@revenexx/studio-integrations 1.1.1 → 1.3.0

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

@@ -20,6 +20,7 @@ import {
 } from "@revenexx/studio";
 import { toast } from "vue-sonner";
 import { resolveLocalized } from "../../utils/localize";
+import { errorReason } from "../../utils/apiError";
 const props = defineProps({
   open: { type: Boolean, required: true },
   credentialType: { type: [String, Array], required: false }
@@ -102,24 +103,11 @@ async function runTest() {
     testing.value = false;
   }
 }
+const { open: openAuthorisation } = useOAuthConnect(() => {
+  void load(true);
+});
 function connect(id) {
-  return oauthAuthorizeUrl(id).then((authorizeUrl) => {
-    const popup = window.open(authorizeUrl, "oauth-connect", "width=600,height=720");
-    const onMessage = (ev) => {
-      if (ev.data?.type === "integrations-oauth-complete") {
-        window.removeEventListener("message", onMessage);
-        void load(true);
-      }
-    };
-    window.addEventListener("message", onMessage);
-    const poll = window.setInterval(() => {
-      if (popup?.closed) {
-        window.clearInterval(poll);
-        window.removeEventListener("message", onMessage);
-        void load(true);
-      }
-    }, 1e3);
-  });
+  return oauthAuthorizeUrl(id).then(openAuthorisation);
 }
 async function submit() {
   if (!pickedType.value || !form.name.trim()) return;
@@ -138,7 +126,7 @@ async function submit() {
     emit("created", created.id);
     emit("update:open", false);
   } catch (e) {
-    toast.error(e?.message ?? t("integration.credentials.createDialog.error.create"));
+    toast.error(errorReason(e, t("integration.credentials.createDialog.error.create")));
   } finally {
     saving.value = false;
   }

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

@@ -30,7 +30,7 @@ import {
   SelectValue
 } from "@revenexx/studio";
 import { toast } from "../../utils/notify";
-import { apiFieldErrors, refusalReason } from "../../utils/apiError";
+import { apiFieldErrors, errorReason } from "../../utils/apiError";
 import { credentialState, relativeTime } from "../../utils/credentialState";
 import { hasRevenexxSource } from "../../utils/revenexxCredentialSource";
 import { resolveLocalized } from "../../utils/localize";
@@ -122,7 +122,7 @@ async function save() {
     toast.success(t("integration.credentials.toast.updated"));
   } catch (e) {
     fieldErrors.value = apiFieldErrors(e);
-    saveError.value = refusalReason(e, t("integration.credentials.error.save"));
+    saveError.value = errorReason(e, t("integration.credentials.error.save"));
     toast.error(saveError.value);
   } finally {
     saving.value = false;
@@ -139,36 +139,26 @@ async function destroy() {
     emit("changed");
     emit("update:open", false);
   } catch (e) {
-    toast.error(e?.message ?? t("integration.credentials.error.delete"));
+    toast.error(errorReason(e, t("integration.credentials.error.delete")));
   } finally {
     deleting.value = false;
   }
 }
+const { open: openAuthorisation, cancel: cancelAuthorisation } = useOAuthConnect(async (outcome) => {
+  await load(true);
+  emit("changed");
+  if (outcome === "completed") toast.success(t("integration.credentials.toast.connected"));
+});
+watch(() => props.open, (open) => {
+  if (!open) cancelAuthorisation();
+});
 async function connect() {
   if (!props.credential) return;
   connecting.value = true;
   try {
-    const authorizeUrl = await oauthAuthorizeUrl(props.credential.id);
-    const popup = window.open(authorizeUrl, "oauth-connect", "width=600,height=720");
-    const onMessage = async (ev) => {
-      if (ev.data?.type === "integrations-oauth-complete") {
-        window.removeEventListener("message", onMessage);
-        await load(true);
-        emit("changed");
-        toast.success(t("integration.credentials.toast.connected"));
-      }
-    };
-    window.addEventListener("message", onMessage);
-    const poll = window.setInterval(async () => {
-      if (popup?.closed) {
-        window.clearInterval(poll);
-        window.removeEventListener("message", onMessage);
-        await load(true);
-        emit("changed");
-      }
-    }, 1e3);
+    openAuthorisation(await oauthAuthorizeUrl(props.credential.id));
   } catch (e) {
-    toast.error(e?.message ?? t("integration.credentials.error.oauthConnect"));
+    toast.error(errorReason(e, t("integration.credentials.error.oauthConnect")));
   } finally {
     connecting.value = false;
   }

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

@@ -25,6 +25,7 @@ import {
 import { toast } from "vue-sonner";
 import { REVENEXX_SOURCE_KIND_BY_SLUG } from "../../utils/revenexxCredentialSource";
 import { cockpitSources } from "../../utils/cockpitSources";
+import { errorReason } from "../../utils/apiError";
 const props = defineProps({
   type: { type: [Object, null], required: true }
 });
@@ -93,7 +94,7 @@ async function ensureLists() {
       await fetchMarkets();
     }
   } catch (e) {
-    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.loadResources"));
+    toast.error(errorReason(e, t("integration.credentials.revenexxSource.error.loadResources")));
   } finally {
     loadingList.value = false;
   }
@@ -124,7 +125,7 @@ async function applySftp() {
     });
     applied.value = `${acc.login_username}@${sftpHost}:${sftpPort}`;
   } catch (e) {
-    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.readSftpPassword"));
+    toast.error(errorReason(e, t("integration.credentials.revenexxSource.error.readSftpPassword")));
   } finally {
     applying.value = false;
   }
@@ -147,7 +148,7 @@ async function applySmtp() {
     });
     applied.value = `${cred.smtp_username}@${mailSmtpHost}:${mailSmtpPort}`;
   } catch (e) {
-    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.readMailCredential"));
+    toast.error(errorReason(e, t("integration.credentials.revenexxSource.error.readMailCredential")));
   } finally {
     applying.value = false;
   }
@@ -202,7 +203,7 @@ async function createSftp() {
     createOpen.value = false;
     toast.success(t("integration.credentials.revenexxSource.toast.sftpCreated"));
   } catch (e) {
-    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.createSftp"));
+    toast.error(errorReason(e, t("integration.credentials.revenexxSource.error.createSftp")));
   } finally {
     creating.value = false;
     provisioningNote.value = "";
@@ -230,7 +231,7 @@ async function createSmtp() {
     createOpen.value = false;
     toast.success(t("integration.credentials.revenexxSource.toast.smtpCreated"));
   } catch (e) {
-    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.createSmtp"));
+    toast.error(errorReason(e, t("integration.credentials.revenexxSource.error.createSmtp")));
   } finally {
     creating.value = false;
   }
@@ -246,7 +247,7 @@ async function createApiKey() {
     createOpen.value = false;
     toast.success(t("integration.credentials.revenexxSource.toast.apiKeyCreated"));
   } catch (e) {
-    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.createApiKey"));
+    toast.error(errorReason(e, t("integration.credentials.revenexxSource.error.createApiKey")));
   } finally {
     creating.value = false;
   }

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

@@ -3,7 +3,9 @@ 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 LoadingAnnouncement from "./LoadingAnnouncement.vue";
 import { deadLetterStatusClass, deadLetterStatusLabel } from "../../utils/statusStyle";
+import { errorReason } from "../../utils/apiError";
 const props = defineProps({
   workflowId: { type: Number, required: true }
 });
@@ -27,7 +29,7 @@ async function load(p = page.value) {
     lastPage.value = res.lastPage;
     page.value = res.page;
   } catch (e) {
-    error.value = e?.message ?? t("integration.deadLetters.error.load");
+    error.value = errorReason(e, t("integration.deadLetters.error.load"));
   } finally {
     loading.value = false;
   }
@@ -46,7 +48,7 @@ async function onReplay(dl) {
     toast.success(newId ? t("integration.deadLetters.toast.replay.started", { id: newId }) : t("integration.deadLetters.toast.replay.done"));
     await load();
   } catch (e) {
-    toast.error(e?.message ?? t("integration.deadLetters.toast.replay.error"));
+    toast.error(errorReason(e, t("integration.deadLetters.toast.replay.error")));
   } finally {
     busyId.value = null;
   }
@@ -58,7 +60,7 @@ async function onDiscard(dl) {
     toast.success(t("integration.deadLetters.toast.discard.done"));
     await load();
   } catch (e) {
-    toast.error(e?.message ?? t("integration.deadLetters.toast.discard.error"));
+    toast.error(errorReason(e, t("integration.deadLetters.toast.discard.error")));
   } finally {
     busyId.value = null;
   }
@@ -75,6 +77,15 @@ function fmt(iso) {
 
 <template>
   <div class="space-y-3">
+    <!-- Outside the branch below, so the words are on the page before the answer is
+         (PO-251). This panel is the workflow editor's own copy of the missed-runs
+         list; the region is named after the panel rather than the tab. -->
+    <LoadingAnnouncement
+      :label="t('integration.deadLetters.panel.title')"
+      :loading="loading && !items.length"
+      :text="t('integration.deadLetters.state.loading')"
+    />
+
     <div class="flex items-center justify-between">
       <div>
         <h3 class="text-sm font-semibold">{{ t("integration.deadLetters.panel.title") }}</h3>
@@ -92,7 +103,7 @@ function fmt(iso) {
       {{ error }}
     </div>
 
-    <div v-if="loading && !items.length">
+    <div v-if="loading && !items.length" aria-hidden="true">
       <div class="rounded-lg border border-black/[0.06] bg-white divide-y divide-black/[0.04]">
         <div v-for="n in 4" :key="`sk-${n}`" class="flex items-start gap-3 px-3 py-3">
           <div class="h-5 w-16 shrink-0 rounded bg-black/[0.07] animate-pulse" />

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

@@ -14,6 +14,10 @@ type __VLS_Props = {
     invalid?: boolean;
     /** The setting's label, so the editable region has an accessible name. */
     label?: string;
+    /** The setting takes several lines: Enter opens one instead of being
+     *  swallowed, and the box opens at four rows and grows to ten before it
+     *  scrolls. */
+    multiline?: boolean;
 };
 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

@@ -14,7 +14,8 @@ const props = defineProps({
   variables: { type: Object, required: false },
   upstreamOutputs: { type: Array, required: false },
   invalid: { type: Boolean, required: false },
-  label: { type: String, required: false }
+  label: { type: String, required: false },
+  multiline: { type: Boolean, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
 const t = useIntegrationsT();
@@ -76,23 +77,40 @@ const ExprToken = Node.create({
     };
   }
 });
+const lineMode = () => ({ multiline: props.multiline });
+function editableAttributes() {
+  return {
+    "role": "textbox",
+    ...props.multiline ? { "aria-multiline": "true" } : {},
+    ...props.label ? { "aria-label": props.label } : {}
+  };
+}
+function endOfLine(line) {
+  const doc = editor.state.doc;
+  const index = Math.min(Math.max(line, 0), doc.childCount - 1);
+  let pos = 0;
+  doc.forEach((node, offset, i) => {
+    if (i === index) pos = offset + node.nodeSize - 1;
+  });
+  return pos;
+}
 const editor = new Editor({
   extensions: [Document, Paragraph, Text, History, ExprToken],
-  content: textToDoc(text.value),
+  content: textToDoc(text.value, lineMode()),
   editorProps: {
-    // Single line: swallow Enter (paragraph splits would break the field).
-    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 } : {} }
+    // Single line: swallow Enter (paragraph splits would break the field). A
+    // multiline field wants exactly that split, so it lets the key through.
+    handleKeyDown: (_view, event) => !props.multiline && event.key === "Enter" && !event.isComposing,
+    attributes: editableAttributes()
   },
   onUpdate({ editor: ed }) {
     const json = ed.getJSON();
-    let raw = docToText(json);
+    let raw = docToText(json, lineMode());
     if (hasRawTokenText(json)) {
-      ed.commands.setContent(textToDoc(raw));
-      raw = docToText(ed.getJSON());
+      const line = ed.state.selection.$from.index(0);
+      ed.commands.setContent(textToDoc(raw, lineMode()));
+      ed.commands.setTextSelection(endOfLine(line));
+      raw = docToText(ed.getJSON(), lineMode());
     }
     if (raw !== text.value) emit("update:modelValue", raw);
   },
@@ -106,10 +124,14 @@ onBeforeUnmount(() => {
   editor.destroy();
 });
 watch(text, (t2) => {
-  if (docToText(editor.getJSON()) !== t2) {
-    editor.commands.setContent(textToDoc(t2));
+  if (docToText(editor.getJSON(), lineMode()) !== t2) {
+    editor.commands.setContent(textToDoc(t2, lineMode()));
   }
 });
+watch(() => props.multiline, () => {
+  editor.setOptions({ editorProps: { ...editor.options.editorProps, attributes: editableAttributes() } });
+  editor.commands.setContent(textToDoc(text.value, lineMode()));
+});
 function insertToken(expr) {
   if (editor.isDestroyed) return;
   editor.chain().focus().insertContent({ type: EXPR_TOKEN_NODE, attrs: { token: expr } }).run();
@@ -208,14 +230,18 @@ function insert(expr) {
   <div ref="wrapRef" class="relative" @focusout="onFocusOut" @keydown="onKeydown">
     <div class="flex items-center gap-1">
       <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]'"
+        class="expr-editor relative min-w-0 flex-1 rounded-md border bg-white px-2 text-sm transition focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-ring"
+        :class="[
+  multiline ? 'expr-multiline' : 'h-8 overflow-hidden',
+  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"
+          class="pointer-events-none absolute left-2 truncate text-muted-foreground/60"
+          :class="multiline ? 'top-1' : 'top-1/2 -translate-y-1/2'"
         >{{ placeholder }}</span>
-        <EditorContent :editor="editor" class="h-full" @keydown="onKeydown" />
+        <EditorContent :editor="editor" :class="multiline ? '' : 'h-full'" @keydown="onKeydown" />
       </div>
       <!-- The name says what the button does AND what it opens, because the glyph
            says neither; `aria-expanded` says whether the list is there, and
@@ -230,7 +256,7 @@ function insert(expr) {
         :aria-expanded="listOpen"
         :aria-controls="listOpen ? pickerId : void 0"
         class="flex h-8 shrink-0 items-center rounded-md border border-black/[0.08] bg-white px-1.5 font-mono text-sm text-muted-foreground transition hover:text-foreground hover:bg-muted/30"
-        :class="listOpen ? 'ring-2 ring-emerald-500/40' : ''"
+        :class="[listOpen ? 'ring-2 ring-emerald-500/40' : '', multiline ? 'self-start' : '']"
         @mousedown.prevent="toggle"
         @click="onTriggerClick"
       >
@@ -296,5 +322,5 @@ function insert(expr) {
 </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{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)}
+.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-editor.expr-multiline{--expr-line:1.375rem;max-height:calc(var(--expr-line)*10 + .5rem);min-height:calc(var(--expr-line)*4 + .5rem);overflow-x:hidden;overflow-y:auto;padding-bottom:.25rem;padding-top:.25rem}.expr-editor.expr-multiline .ProseMirror{display:block;height:auto;overflow-x:visible}.expr-editor.expr-multiline .ProseMirror p{line-height:var(--expr-line);white-space:pre-wrap}.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

@@ -14,6 +14,10 @@ type __VLS_Props = {
     invalid?: boolean;
     /** The setting's label, so the editable region has an accessible name. */
     label?: string;
+    /** The setting takes several lines: Enter opens one instead of being
+     *  swallowed, and the box opens at four rows and grows to ten before it
+     *  scrolls. */
+    multiline?: boolean;
 };
 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

@@ -4,6 +4,7 @@ import { Handle, Position, useVueFlow } from "@vue-flow/core";
 import { NodeToolbar } from "@vue-flow/node-toolbar";
 import { ChevronsDownUp, ChevronsUpDown, Ungroup } from "lucide-vue-next";
 import { TrashBinMinimalistic as TrashBin } from "#solar-icons";
+import { inputHandleId, outputHandleId } from "../../data/handleId";
 import { resolveDisplayName } from "../../utils/localize";
 const props = defineProps({
   id: { type: String, required: true },
@@ -100,9 +101,9 @@ function onResizeEnd() {
         v-for="(c, i) in GROUP_COLORS"
         :key="i"
         type="button"
-        class="size-4.5 rounded-full border transition hover:scale-110"
+        class="size-6 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' }"
+        :style="{ backgroundColor: c.chip, borderColor: c.border }"
         :title="t(c.nameKey)"
         :aria-label="t(c.nameKey)"
         @click="data.actions?.setColor(i)"
@@ -138,7 +139,7 @@ function onResizeEnd() {
   <!-- Collapsed: compact stand-in card with generic edge handles. -->
   <template v-if="collapsed">
     <Handle
-      id="__in__top"
+      :id="inputHandleId('top')"
       type="target"
       :position="Position.Top"
       class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm"
@@ -165,7 +166,7 @@ function onResizeEnd() {
       </div>
     </div>
     <Handle
-      id="default__bottom"
+      :id="outputHandleId('default', 'bottom')"
       type="source"
       :position="Position.Bottom"
       class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm"

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

@@ -0,0 +1,38 @@
+/**
+ * What a surface is doing, in words, for somebody who cannot see the shimmer.
+ *
+ * A studio surface that is waiting draws placeholder blocks and — before PO-251 —
+ * said nothing, which is exactly what it says when there is genuinely nothing to
+ * show. Those two states ask for opposite reactions: wait, or go and do something
+ * about it. The shimmer separates them for a sighted reader and is not information a
+ * screen reader can reach.
+ *
+ * Three things this component exists to keep from drifting, all of them learned on
+ * the template gallery (PO-246), which was the first surface to get this right:
+ *
+ * - **It is always in the DOM**, and only its text changes. A live region that
+ *   appears together with its content is a region assistive technology may never
+ *   have been watching: what gets announced is a change *inside* an existing region.
+ *   So mount this outside the `v-if` chain it describes, never inside the branch
+ *   that draws the placeholders.
+ * - **It is named**, because a page can hold more than one. The template gallery
+ *   draws one per card for its flow miniature; the dashboard has four panels that
+ *   each load on their own. Two unnamed status regions on one page are two things
+ *   neither a reader nor a test can tell apart.
+ * - **`aria-busy` is not what this is.** The attribute only asks assistive
+ *   technology to defer exposing changes to an element, and on a role-less `div`
+ *   that is not a live region NVDA and JAWS effectively ignore it — it expresses the
+ *   state without keeping anything from being walked. The placeholders themselves
+ *   get `aria-hidden` at the call site instead: a placeholder carries no
+ *   information, so there is nothing to lose by removing it from the tree.
+ */
+type __VLS_Props = {
+    /** Names the region, so several on one page stay distinguishable. */
+    label: string;
+    /** Whether the surface this speaks for is waiting. */
+    loading: boolean;
+    /** What to say while it is — "Loading the runs…", in the surface's own words. */
+    text: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,16 @@
+<script setup>
+const props = defineProps({
+  label: { type: String, required: true },
+  loading: { type: Boolean, required: true },
+  text: { type: String, required: true }
+});
+</script>
+
+<template>
+  <p
+    role="status"
+    aria-live="polite"
+    :aria-label="props.label"
+    class="sr-only"
+  >{{ props.loading ? props.text : "" }}</p>
+</template>

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

@@ -0,0 +1,38 @@
+/**
+ * What a surface is doing, in words, for somebody who cannot see the shimmer.
+ *
+ * A studio surface that is waiting draws placeholder blocks and — before PO-251 —
+ * said nothing, which is exactly what it says when there is genuinely nothing to
+ * show. Those two states ask for opposite reactions: wait, or go and do something
+ * about it. The shimmer separates them for a sighted reader and is not information a
+ * screen reader can reach.
+ *
+ * Three things this component exists to keep from drifting, all of them learned on
+ * the template gallery (PO-246), which was the first surface to get this right:
+ *
+ * - **It is always in the DOM**, and only its text changes. A live region that
+ *   appears together with its content is a region assistive technology may never
+ *   have been watching: what gets announced is a change *inside* an existing region.
+ *   So mount this outside the `v-if` chain it describes, never inside the branch
+ *   that draws the placeholders.
+ * - **It is named**, because a page can hold more than one. The template gallery
+ *   draws one per card for its flow miniature; the dashboard has four panels that
+ *   each load on their own. Two unnamed status regions on one page are two things
+ *   neither a reader nor a test can tell apart.
+ * - **`aria-busy` is not what this is.** The attribute only asks assistive
+ *   technology to defer exposing changes to an element, and on a role-less `div`
+ *   that is not a live region NVDA and JAWS effectively ignore it — it expresses the
+ *   state without keeping anything from being walked. The placeholders themselves
+ *   get `aria-hidden` at the call site instead: a placeholder carries no
+ *   information, so there is nothing to lose by removing it from the tree.
+ */
+type __VLS_Props = {
+    /** Names the region, so several on one page stay distinguishable. */
+    label: string;
+    /** Whether the surface this speaks for is waiting. */
+    loading: boolean;
+    /** What to say while it is — "Loading the runs…", in the surface's own words. */
+    text: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -3,6 +3,7 @@ import { computed } from "vue";
 import { Button } from "@revenexx/studio";
 import { IntegrationsApiError } from "../../utils/apiError";
 import { resolveLocalized } from "../../utils/localize";
+import { applyingFields, staleKeys } from "../../utils/settingCondition";
 const props = defineProps({
   slug: { type: String, required: true },
   version: { type: String, required: true },
@@ -24,6 +25,13 @@ const q = useNodeConfigResolve({
   dependsOn: () => props.field.dependsOn
 });
 const resolvedFields = computed(() => q.data.value?.fields ?? []);
+const applyingResolvedFields = computed(() => applyingFields(resolvedFields.value, props.config));
+function writeResolved(key, value) {
+  emit("set", key, value);
+  const after = { ...props.config, [key]: value };
+  for (const stale of staleKeys(resolvedFields.value, key, after))
+    emit("set", stale, void 0);
+}
 </script>
 
 <template>
@@ -67,7 +75,7 @@ const resolvedFields = computed(() => q.data.value?.fields ?? []);
       <legend class="px-1 text-mono text-muted-foreground">
         {{ resolveLocalized(field.label) }}
       </legend>
-      <template v-for="f in resolvedFields" :key="f.key">
+      <template v-for="f in applyingResolvedFields" :key="f.key">
         <!-- collision guard: a resolved key that shadows a static config field is skipped -->
         <p v-if="staticKeys.includes(f.key)" class="text-sm text-amber-600">
           {{ t("integration.nodeConfig.dynamicSchema.fieldCollision", { key: f.key }) }}
@@ -89,7 +97,7 @@ const resolvedFields = computed(() => q.data.value?.fields ?? []);
           :static-keys="staticKeys"
           :sibling-fields="resolvedFields"
           :depth="(depth ?? 0) + 1"
-          @set="(k, v) => emit('set', k, v)"
+          @set="writeResolved"
         />
       </template>
 

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

@@ -1,4 +1,4 @@
-import type { ConfigField, WorkflowVariable } from '../../types/integrations.js';
+import type { ConfigField, WorkflowStateNamespace, WorkflowStateRole, WorkflowStateVisibility, WorkflowVariable } from '../../types/integrations.js';
 type __VLS_Props = {
     field: ConfigField;
     config: Record<string, unknown>;
@@ -11,6 +11,8 @@ type __VLS_Props = {
     siblingFields?: ConfigField[];
     depth?: number;
     variables?: Record<string, WorkflowVariable>;
+    /** The workflow's declared state namespaces — the options a `state-ref` offers. */
+    stateNamespaces?: WorkflowStateNamespace[];
     upstreamOutputs?: Array<{
         nodeId: string;
         nodeName?: string;
@@ -22,7 +24,9 @@ type __VLS_Props = {
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     set: (key: string, value: unknown) => any;
+    "declare-state": (namespace: string, role: WorkflowStateRole, visibility: WorkflowStateVisibility) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSet?: ((key: string, value: unknown) => any) | undefined;
+    "onDeclare-state"?: ((namespace: string, role: WorkflowStateRole, visibility: WorkflowStateVisibility) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;