@revenexx/studio-integrations 1.1.0 → 1.2.0

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, inject, onBeforeUnmount, onMounted, ref, useId, watch } from "vue";
 import { Editor, EditorContent } from "@tiptap/vue-3";
 import { Node } from "@tiptap/core";
 import Document from "@tiptap/extension-document";
@@ -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();
@@ -158,10 +180,16 @@ const filteredSections = computed(() => {
 });
 const open = ref(false);
 const wrapRef = ref(null);
+const triggerRef = ref(null);
+const listOpen = computed(() => open.value && hasSuggestions.value);
+const pickerId = useId();
 function toggle() {
   if (!open.value && !hasSuggestions.value) return;
   open.value = !open.value;
 }
+function onTriggerClick(e) {
+  if (e.detail === 0) toggle();
+}
 function onFocusOut(e) {
   if (wrapRef.value && e.relatedTarget instanceof globalThis.Node && wrapRef.value.contains(e.relatedTarget)) return;
   open.value = false;
@@ -173,6 +201,13 @@ function onKeydown(e) {
     open.value = false;
   }
 }
+function onPickerKeydown(e) {
+  if (e.key !== "Escape" || !open.value) return;
+  e.stopPropagation();
+  e.preventDefault();
+  open.value = false;
+  triggerRef.value?.focus();
+}
 function onDocMousedown(e) {
   if (wrapRef.value && !wrapRef.value.contains(e.target)) open.value = false;
 }
@@ -188,24 +223,42 @@ function insert(expr) {
 </script>
 
 <template>
-  <div ref="wrapRef" class="relative" @focusout="onFocusOut">
+  <!-- `keydown` on the widget rather than on the editor alone: with focus on the
+       trigger, Escape used to reach the configuration lightbox and close the whole
+       dialog. The editor keeps its own handler, which stops the event before it
+       arrives here. -->
+  <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
+           `aria-controls` only while it is — an id pointing at nothing is worse
+           than no link. See the docblock on `listOpen` for why this is not the
+           shared popover. -->
       <button
+        ref="triggerRef"
         type="button"
         :title="t('integration.nodeConfig.expression.insertTitle')"
+        :aria-label="t('integration.nodeConfig.expression.insertAria')"
+        :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="open ? 'ring-2 ring-emerald-500/40' : ''"
+        :class="[listOpen ? 'ring-2 ring-emerald-500/40' : '', multiline ? 'self-start' : '']"
         @mousedown.prevent="toggle"
+        @click="onTriggerClick"
       >
         {{ triggerLabel }}
       </button>
@@ -224,8 +277,10 @@ function insert(expr) {
          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"
+      v-if="listOpen"
+      :id="pickerId"
       role="group"
+      @keydown="onPickerKeydown"
       :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"
     >
@@ -267,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/NodeConfigField.vue

@@ -195,6 +195,9 @@ function removeKvRow(idx) {
   kvRows.value = kvRows.value.filter((_, i) => i !== idx);
   commitKvRows();
 }
+const isMultiline = computed(
+  () => Boolean(props.field.multiline) && (props.field.type === "string" || props.field.type === "expression")
+);
 const isQueryField = computed(
   () => props.field.type === "array" && props.field.items?.type !== "object" && /(^|__)queries$/.test(props.field.key)
 );
@@ -383,6 +386,7 @@ function setArrayItemField(index, fieldKey, v) {
       :upstream-outputs="upstreamOutputs"
       :invalid="invalid"
       :label="resolveLocalized(field.label)"
+      :multiline="isMultiline"
       @update:model-value="(v) => write(v)"
     />
 
@@ -409,6 +413,25 @@ function setArrayItemField(index, fieldKey, v) {
       :upstream-outputs="upstreamOutputs"
       :invalid="invalid"
       :label="resolveLocalized(field.label)"
+      :multiline="isMultiline"
+      @update:model-value="(v) => write(v)"
+    />
+
+    <!-- plain string the node says takes several lines. Same accessible name as
+         the one-line box below, because it is the same setting. Opens at four
+         rows, grows with what is typed and scrolls past ten — the same rule the
+         expression editor follows, so the two controls for one kind of setting
+         do not behave differently. The two heights are lines × 1.25rem plus the
+         1rem of vertical padding; `rows` alone would not set them, because the
+         shared control sizes itself to its content and ignores it. -->
+    <Textarea
+      v-else-if="field.type === 'string' && isMultiline"
+      :aria-label="resolveLocalized(field.label)"
+      :model-value="value ?? ''"
+      :placeholder="resolveLocalized(field.placeholder)"
+      :rows="4"
+      class="min-h-24 max-h-[13.5rem] resize-none 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)"
     />
 

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

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

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

@@ -39,6 +39,8 @@ import {
 } from "../../data/nodeInputData";
 import { portDotClass } from "../../data/portTone";
 import { computeLoopBodies, manifestIterates } from "../../data/loopBody";
+import { deepClone } from "../../utils/deepClone";
+import { copyToClipboard } from "../../utils/clipboard";
 import { nodeDisplayLabel } from "../../utils/validationFindings";
 import { authChoiceFromConfig, configPatchForAuthChoice } from "../../data/webhookAuth";
 import {
@@ -49,6 +51,7 @@ import {
 } from "../../data/nodeRunData";
 import { resolveDisplayName, resolveLocalized } from "../../utils/localize";
 import { describeRecurrence, parseCron, scheduleTimezone, toCron } from "../../utils/schedule";
+import { errorReason } from "../../utils/apiError";
 const t = useIntegrationsT();
 const props = defineProps({
   selection: { type: [Object, null], required: true },
@@ -64,19 +67,16 @@ const props = defineProps({
   refusedFields: { type: Object, required: false }
 });
 const emit = defineEmits(["update", "close", "remove", "navigate"]);
-function clone(v) {
-  return JSON.parse(JSON.stringify(v));
-}
-const draft = ref(clone(props.selection));
+const draft = ref(deepClone(props.selection));
 watch(() => props.selection?.id, () => {
-  if (props.selection && props.selection.id !== draft.value.id) draft.value = clone(props.selection);
+  if (props.selection && props.selection.id !== draft.value.id) draft.value = deepClone(props.selection);
 });
 const isNode = computed(() => "nodeSlug" in draft.value);
 const draftNode = computed(() => isNode.value ? draft.value : null);
 const draftTrigger = computed(() => isNode.value ? null : draft.value);
 const dirty = computed(() => JSON.stringify(draft.value) !== JSON.stringify(props.selection));
 function save() {
-  if (dirty.value) emit("update", clone(draft.value));
+  if (dirty.value) emit("update", deepClone(draft.value));
   emit("close");
 }
 const nameInput = ref(null);
@@ -203,12 +203,10 @@ function patchTrigger(patch) {
 }
 async function copyConfig() {
   if (!draftNode.value) return;
-  try {
-    await navigator.clipboard.writeText(JSON.stringify(draftNode.value.config ?? {}, null, 2));
-    toast.success(t("integration.nodeInspector.toast.configCopied"));
-  } catch {
-    toast.error(t("integration.nodeInspector.toast.configCopyFailed"));
-  }
+  await copyToClipboard(JSON.stringify(draftNode.value.config ?? {}, null, 2), {
+    copied: t("integration.nodeInspector.toast.configCopied"),
+    failed: t("integration.nodeInspector.toast.configCopyFailed")
+  });
 }
 async function pasteConfig() {
   if (!draftNode.value) return;
@@ -440,28 +438,24 @@ async function rotateEndpointSecret() {
       toast.error(t("integration.nodeInspector.toast.rotateNoSecret"));
     }
   } catch (e) {
-    toast.error(e.message || t("integration.nodeInspector.toast.rotateFailed"));
+    toast.error(errorReason(e, t("integration.nodeInspector.toast.rotateFailed")));
   } finally {
     rotateBusy.value = false;
   }
 }
 async function copySecret() {
   if (!rotatedSecret.value) return;
-  try {
-    await navigator.clipboard.writeText(rotatedSecret.value);
-    toast.success(t("integration.nodeInspector.toast.secretCopied"));
-  } catch {
-    toast.error(t("integration.nodeInspector.toast.secretCopyFailed"));
-  }
+  await copyToClipboard(rotatedSecret.value, {
+    copied: t("integration.nodeInspector.toast.secretCopied"),
+    failed: t("integration.nodeInspector.toast.secretCopyFailed")
+  });
 }
 async function copyWebhookUrl() {
   if (!webhookUrl.value) return;
-  try {
-    await navigator.clipboard.writeText(webhookUrl.value);
-    toast.success(t("integration.nodeInspector.toast.webhookUrlCopied"));
-  } catch {
-    toast.error(t("integration.nodeInspector.toast.webhookUrlCopyFailed"));
-  }
+  await copyToClipboard(webhookUrl.value, {
+    copied: t("integration.nodeInspector.toast.webhookUrlCopied"),
+    failed: t("integration.nodeInspector.toast.webhookUrlCopyFailed")
+  });
 }
 const definedEvents = typeof useDefinedEvents === "function" ? useDefinedEvents() : { emits: ref([]), load: async () => {
 } };
@@ -526,7 +520,7 @@ async function loadRunData() {
     runData.value = map;
     runInfo.value = { id: source.id, startedAt: source.startedAt };
   } catch (e) {
-    runError.value = e?.message ?? t("integration.nodeInspector.input.runData.loadFailed");
+    runError.value = errorReason(e, t("integration.nodeInspector.input.runData.loadFailed"));
   } finally {
     runLoading.value = false;
   }
@@ -640,11 +634,10 @@ function insertExpression(expression) {
     el.focus();
     return;
   }
-  try {
-    void navigator.clipboard?.writeText(expression);
-  } catch {
-  }
-  toast(t("integration.nodeInspector.toast.expressionCopied"));
+  void copyToClipboard(expression, {
+    copied: t("integration.nodeInspector.toast.expressionCopied"),
+    failed: t("integration.nodeInspector.toast.expressionCopyFailed")
+  });
 }
 const chipClass = "max-w-full cursor-grab truncate rounded-md border border-black/[0.06] bg-slate-50 px-1.5 py-0.5 font-mono text-[11px] text-slate-700 transition hover:border-black/[0.12] hover:bg-slate-100 active:cursor-grabbing";
 const rowClass = "flex w-full min-w-0 cursor-grab items-center gap-1.5 rounded-md px-1.5 py-[3px] text-left font-mono text-[11px] text-slate-700 transition hover:bg-slate-100 active:cursor-grabbing";
@@ -767,7 +760,7 @@ const hasNext = computed(() => seqIndex.value >= 0 && seqIndex.value < sequence.
 function navigate(offset) {
   const target = sequence.value[seqIndex.value + offset];
   if (!target) return;
-  if (dirty.value) emit("update", clone(draft.value));
+  if (dirty.value) emit("update", deepClone(draft.value));
   emit("navigate", target);
 }
 const outputView = ref("schema");