@revenexx/studio-integrations 0.5.0 → 0.6.0

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

@@ -1,19 +1,30 @@
 <script setup>
 import { computed, nextTick, onMounted, provide, ref, watch } from "vue";
-import { TrashBinMinimalistic as Trash2, Copy } from "#solar-icons";
-import { ChevronLeft, ChevronRight, Clock, Play, Search, Webhook, X, Zap } from "lucide-vue-next";
+import { AddCircle as Plus, TrashBinMinimalistic as Trash2, Copy } from "#solar-icons";
+import { ChevronDown, ChevronLeft, ChevronRight, Clock, Database, MessageSquareText, Play, Search, Webhook, X, Zap } from "lucide-vue-next";
 import { toast } from "vue-sonner";
 import {
   Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
   Input,
   Label,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
   Select,
   SelectContent,
   SelectItem,
+  SelectSeparator,
   SelectTrigger,
   SelectValue,
   Switch,
-  Textarea
+  Textarea,
+  ToggleGroup,
+  ToggleGroupItem
 } from "@revenexx/studio";
 import EventTypeCombobox from "./EventTypeCombobox.vue";
 import { NODE_CATEGORIES, findManifest } from "../../data/integrationNodeCatalog";
@@ -24,12 +35,16 @@ import {
   triggerPayloadExpr,
   variableExpr
 } from "../../data/nodeInputData";
+import { portDotClass } from "../../data/portTone";
+import { authChoiceFromConfig, configPatchForAuthChoice } from "../../data/webhookAuth";
 import {
   dataTypeOf,
   portValuesFromStepOutput,
   previewValue,
   valueAtPath
 } from "../../data/nodeRunData";
+import { resolveDisplayName, resolveLocalized } from "../../utils/localize";
+import { describeRecurrence, parseCron, scheduleTimezone, toCron } from "../../utils/schedule";
 const props = defineProps({
   selection: { type: [Object, null], required: true },
   secretKeys: { type: Array, required: true },
@@ -40,7 +55,8 @@ const props = defineProps({
   edges: { type: Array, required: false },
   triggers: { type: Array, required: false },
   dynamicOutputs: { type: Object, required: false },
-  workflowId: { type: [Number, String], required: false }
+  workflowId: { type: [Number, String], required: false },
+  refusedFields: { type: Object, required: false }
 });
 const emit = defineEmits(["update", "close", "remove", "navigate"]);
 function clone(v) {
@@ -70,15 +86,11 @@ const manifest = computed(() => {
   const wn = draftNode.value;
   return wn ? findManifest(wn.nodeSlug, wn.nodeVersion) : null;
 });
-function labelText(v) {
-  if (!v) return "";
-  return typeof v === "string" ? v : v.en ?? Object.values(v)[0] ?? "";
-}
 const TRIGGER_GLYPHS = { manual: Play, schedule: Clock, webhook: Webhook, event: Zap };
 const TRIGGER_LABELS = { manual: "Manual", schedule: "Schedule", webhook: "Webhook", event: "Event" };
 const triggerGlyph = computed(() => TRIGGER_GLYPHS[draftTrigger.value?.type ?? "manual"]);
 const namePlaceholder = computed(() => {
-  if (draftNode.value) return labelText(manifest.value?.name) || draftNode.value.nodeSlug;
+  if (draftNode.value) return resolveLocalized(manifest.value?.name) || draftNode.value.nodeSlug;
   return TRIGGER_LABELS[draftTrigger.value?.type ?? "manual"] + " trigger";
 });
 const subtitleText = computed(() => {
@@ -86,20 +98,49 @@ const subtitleText = computed(() => {
   if (wn) return wn.nodeSlug + "@" + wn.nodeVersion;
   return TRIGGER_LABELS[draftTrigger.value?.type ?? "manual"] + " trigger";
 });
+const manifestDescription = computed(() => resolveLocalized(manifest.value?.description));
 const groupLabel = computed(() => {
   if (!isNode.value) return "Trigger";
   const groups = manifest.value?.groups;
-  if (groups?.length) return labelText(groups[groups.length - 1]);
+  if (groups?.length) return resolveLocalized(groups[groups.length - 1]);
   return NODE_CATEGORIES.find((c) => c.key === manifest.value?.category)?.label ?? "Node";
 });
+const nameValue = computed(() => {
+  const name = draft.value.name;
+  return resolveDisplayName(name);
+});
 function writeName(name) {
   draft.value = { ...draft.value, name };
 }
+const noteOpen = ref(false);
+const noteText = computed(() => (draftNode.value?.notes ?? "").trim());
+const noteLabel = computed(() => noteText.value ? "Note" : "Add note");
+function writeNote(v) {
+  const text = String(v ?? "");
+  patchNode({ notes: text.trim() ? text : void 0 });
+}
 const tab = ref("parameters");
 const showSettingsTab = computed(() => isNode.value);
+const inspectorTabs = computed(() => [
+  { key: "parameters", label: "Parameters" },
+  ...showSettingsTab.value ? [{ key: "settings", label: "Settings" }, { key: "output", label: "Output" }] : []
+]);
+watch(showSettingsTab, (hasThem) => {
+  if (!hasThem) tab.value = "parameters";
+});
 const SETTINGS_FIELD_KEY = /(^|_)(timeout|retry|retries|backoff)|(timeout|retry|retries|backoff)(ms|sec|seconds|attempts)?$/i;
 const parameterFields = computed(() => (manifest.value?.config ?? []).filter((f) => !SETTINGS_FIELD_KEY.test(f.key)));
 const settingsFields = computed(() => (manifest.value?.config ?? []).filter((f) => SETTINGS_FIELD_KEY.test(f.key)));
+const requiredFields = computed(() => parameterFields.value.filter((f) => f.required));
+const optionalFields = computed(() => parameterFields.value.filter((f) => !f.required));
+function optionalShouldOpen() {
+  if (!requiredFields.value.length) return true;
+  return optionalFields.value.some((f) => props.refusedFields?.[f.key] !== void 0);
+}
+const optionalOpen = ref(optionalShouldOpen());
+watch([() => props.selection?.id, manifest], () => {
+  optionalOpen.value = optionalShouldOpen();
+});
 function dependentKeys(changedKey) {
   const fields = manifest.value?.config ?? [];
   const out = /* @__PURE__ */ new Set();
@@ -139,12 +180,6 @@ function patchTrigger(patch) {
   if (!draftTrigger.value) return;
   draft.value = { ...draftTrigger.value, ...patch };
 }
-const requiredMissingCount = computed(() => {
-  if (!draftNode.value || !manifest.value?.config) return 0;
-  const cfg = draftNode.value.config ?? {};
-  const empty = (v) => v === void 0 || v === null || v === "" || Array.isArray(v) && v.length === 0;
-  return manifest.value.config.filter((f) => f.required && empty(cfg[f.key])).length;
-});
 async function copyConfig() {
   if (!draftNode.value) return;
   try {
@@ -185,6 +220,263 @@ function writeTriggerConfig(key, value) {
   if (!wt) return;
   patchTrigger({ config: { ...wt.config, [key]: value } });
 }
+const MINUTE_INTERVALS = [1, 2, 5, 10, 15, 20, 30];
+const HOUR_INTERVALS = [2, 3, 4, 6, 8, 12];
+const MINUTES_PAST = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
+const DAY_OPTIONS = [
+  { value: 1, short: "Mo", name: "Mondays" },
+  { value: 2, short: "Tu", name: "Tuesdays" },
+  { value: 3, short: "We", name: "Wednesdays" },
+  { value: 4, short: "Th", name: "Thursdays" },
+  { value: 5, short: "Fr", name: "Fridays" },
+  { value: 6, short: "Sa", name: "Saturdays" },
+  { value: 0, short: "Su", name: "Sundays" }
+];
+const FREQUENCY_OPTIONS = [
+  { value: "minutes", label: "Every few minutes" },
+  { value: "hourly", label: "Every hour" },
+  { value: "hours", label: "Every few hours" },
+  { value: "times", label: "Several times a day" },
+  { value: "daily", label: "Every day" },
+  { value: "weekly", label: "Every week" },
+  { value: "monthly", label: "Every month" }
+];
+const HOURS_OF_DAY = Array.from({ length: 24 }, (_, h) => h);
+const FREQUENCY_ADVANCED = "advanced";
+const cronValue = computed(() => readTriggerConfig("cron") ?? "");
+const hasCron = computed(() => cronValue.value.trim() !== "");
+const recurrence = computed(() => parseCron(cronValue.value));
+const advancedOpen = ref(false);
+watch(() => draftTrigger.value?.id, () => {
+  advancedOpen.value = false;
+});
+const frequency = computed(() => advancedOpen.value ? FREQUENCY_ADVANCED : recurrence.value?.kind ?? FREQUENCY_ADVANCED);
+const ALL_DAYS = [0, 1, 2, 3, 4, 5, 6];
+const carry = ref({
+  hour: 8,
+  minute: 0,
+  days: [1],
+  day: 1,
+  minuteInterval: 15,
+  hourInterval: 4,
+  // "Several times a day" carries its own two sets: its days start at every day,
+  // where a weekly schedule's start at one, and its hours start empty so the
+  // first pair is built from the time already on screen rather than from a
+  // working hour nobody chose.
+  hours: [],
+  timeDays: ALL_DAYS
+});
+watch(recurrence, (r) => {
+  if (!r) return;
+  if ("hour" in r) carry.value.hour = r.hour;
+  if ("minute" in r) carry.value.minute = r.minute;
+  if (r.kind === "weekly") carry.value.days = r.days;
+  if (r.kind === "monthly") carry.value.day = r.day;
+  if (r.kind === "minutes") carry.value.minuteInterval = r.interval;
+  if (r.kind === "hours") carry.value.hourInterval = r.interval;
+  if (r.kind === "times") {
+    carry.value.hours = r.hours;
+    carry.value.timeDays = r.days ?? ALL_DAYS;
+  }
+}, { immediate: true });
+function recurrenceFor(kind) {
+  const c = carry.value;
+  switch (kind) {
+    case "minutes":
+      return { kind: "minutes", interval: c.minuteInterval };
+    case "hourly":
+      return { kind: "hourly", minute: c.minute };
+    case "hours":
+      return { kind: "hours", interval: c.hourInterval, minute: c.minute };
+    case "daily":
+      return { kind: "daily", hour: c.hour, minute: c.minute };
+    case "times":
+      return {
+        kind: "times",
+        minute: c.minute,
+        // Two is the smallest set that is "several"; one hour is the daily rhythm.
+        // With none carried yet, the rhythm starts from the hour that was on screen
+        // and the one after it — a schedule set for 02:00 becomes 02:00 and 03:00
+        // rather than losing the time the author had already chosen.
+        hours: c.hours.length >= 2 ? c.hours : [c.hour, (c.hour + 1) % 24].sort((a, b) => a - b),
+        days: c.timeDays.length ? c.timeDays : null
+      };
+    case "weekly":
+      return { kind: "weekly", days: c.days.length ? c.days : [1], hour: c.hour, minute: c.minute };
+    case "monthly":
+      return { kind: "monthly", day: c.day, hour: c.hour, minute: c.minute };
+  }
+}
+function writeRecurrence(kind) {
+  writeTriggerConfig("cron", toCron(recurrenceFor(kind)));
+}
+function applyFrequency(v) {
+  const next = v;
+  advancedOpen.value = next === FREQUENCY_ADVANCED;
+  if (next !== FREQUENCY_ADVANCED) writeRecurrence(next);
+}
+function applyToCurrent() {
+  const f = frequency.value;
+  if (f !== FREQUENCY_ADVANCED) writeRecurrence(f);
+}
+function pad2(n) {
+  return String(n).padStart(2, "0");
+}
+function withCurrent(options, current) {
+  return options.includes(current) ? options : [...options, current].sort((a, b) => a - b);
+}
+const minuteIntervalOptions = computed(() => withCurrent(MINUTE_INTERVALS, carry.value.minuteInterval));
+const minutePastOptions = computed(() => withCurrent(MINUTES_PAST, carry.value.minute));
+const timeValue = computed(() => `${pad2(carry.value.hour)}:${pad2(carry.value.minute)}`);
+function applyTime(v) {
+  const m = /^(\d{1,2}):(\d{2})/.exec(String(v ?? ""));
+  if (!m) return;
+  carry.value.hour = Math.min(23, Number(m[1]));
+  carry.value.minute = Math.min(59, Number(m[2]));
+  applyToCurrent();
+}
+const selectedDays = computed(() => (frequency.value === "times" ? carry.value.timeDays : carry.value.days).map(String));
+function applyDays(v) {
+  const picked = (Array.isArray(v) ? v : []).map(Number).filter((n) => Number.isInteger(n) && n >= 0 && n <= 6);
+  const forTimes = frequency.value === "times";
+  const previous = forTimes ? carry.value.timeDays : carry.value.days;
+  const days = [...new Set(picked.length ? picked : previous)].sort((a, b) => a - b);
+  if (forTimes) {
+    carry.value.timeDays = days;
+    writeRecurrence("times");
+    return;
+  }
+  carry.value.days = days;
+  writeRecurrence("weekly");
+}
+const selectedHours = computed(() => carry.value.hours.map(String));
+function applyHours(v) {
+  const picked = (Array.isArray(v) ? v : []).map(Number).filter((n) => Number.isInteger(n) && n >= 0 && n <= 23);
+  const hours = [...new Set(picked)].sort((a, b) => a - b);
+  carry.value.hours = hours.length >= 2 ? hours : carry.value.hours;
+  writeRecurrence("times");
+}
+function applyMinuteInterval(v) {
+  carry.value.minuteInterval = Number(v);
+  writeRecurrence("minutes");
+}
+function applyHourInterval(v) {
+  carry.value.hourInterval = Number(v);
+  writeRecurrence("hours");
+}
+function applyMinutePast(v) {
+  carry.value.minute = Number(v);
+  applyToCurrent();
+}
+function applyDayOfMonth(v) {
+  carry.value.day = Number(v);
+  writeRecurrence("monthly");
+}
+const scheduleSentence = computed(() => {
+  const r = recurrence.value;
+  if (!r) return null;
+  return `${describeRecurrence(r)} \xB7 ${scheduleTimezone(readTriggerConfig("timezone"))}`;
+});
+const webhookUrl = computed(() => {
+  const wt = draftTrigger.value;
+  if (!wt || wt.type !== "webhook") return null;
+  const inbound = wt.config.inbound;
+  if (inbound?.url) return inbound.url;
+  const base = String(useRuntimeConfig().public.integrationsApi ?? "").replace(/\/+$/, "");
+  return base ? `${base}/webhooks/${wt.id}` : null;
+});
+const webhookIsPublic = computed(() => !!draftTrigger.value?.config?.public);
+const authChoice = computed(() => authChoiceFromConfig(draftTrigger.value?.config));
+function writeTriggerConfigPatch(patch) {
+  const wt = draftTrigger.value;
+  if (!wt) return;
+  patchTrigger({ config: { ...wt.config, ...patch } });
+}
+function applyAuthChoice(v) {
+  writeTriggerConfigPatch(configPatchForAuthChoice(v));
+}
+function writeAuthConfigKey(key, value) {
+  const cfg = draftTrigger.value?.config;
+  writeTriggerConfigPatch({ authConfig: { ...cfg?.authConfig, [key]: value || void 0 } });
+}
+const webhookExposed = computed(() => !!draftTrigger.value?.config?.inbound?.url);
+const rotateBusy = ref(false);
+const rotatedSecret = ref(null);
+const rotateOpen = ref(false);
+async function rotateEndpointSecret() {
+  const wt = draftTrigger.value;
+  if (!wt || !props.workflowId) return;
+  rotateBusy.value = true;
+  try {
+    const api2 = useIntegrationsApi();
+    const res = await api2.post(`/workflows/${props.workflowId}/triggers/${wt.id}/rotate-secret`, {});
+    const body = res ?? {};
+    const secret = body.inbound_secret ?? body.data?.inbound_secret ?? null;
+    if (secret) {
+      rotatedSecret.value = secret;
+      rotateOpen.value = true;
+    } else {
+      toast.error("The endpoint did not return a secret.");
+    }
+  } catch (e) {
+    toast.error(e.message || "Could not rotate the secret.");
+  } finally {
+    rotateBusy.value = false;
+  }
+}
+async function copySecret() {
+  if (!rotatedSecret.value) return;
+  try {
+    await navigator.clipboard.writeText(rotatedSecret.value);
+    toast.success("Secret copied");
+  } catch {
+    toast.error("Could not copy the secret");
+  }
+}
+async function copyWebhookUrl() {
+  if (!webhookUrl.value) return;
+  try {
+    await navigator.clipboard.writeText(webhookUrl.value);
+    toast.success("Webhook URL copied");
+  } catch {
+    toast.error("Could not copy the URL");
+  }
+}
+const definedEvents = typeof useDefinedEvents === "function" ? useDefinedEvents() : { emits: ref([]), load: async () => {
+} };
+const eventTopic = computed(() => {
+  const t = readTriggerConfig("event_type");
+  return typeof t === "string" && t.trim() !== "" ? t.trim() : null;
+});
+watch(eventTopic, (topic) => {
+  if (topic) void definedEvents.load();
+}, { immediate: true });
+const eventSample = computed(() => {
+  if (!eventTopic.value) return null;
+  const sample = definedEvents.emits.value.find((e) => e.topic === eventTopic.value)?.sample;
+  return sample ? JSON.stringify(sample, null, 2) : null;
+});
+const manualFields = computed(() => readTriggerConfig("payloadFields") ?? []);
+function writeManualFields(next) {
+  writeTriggerConfig("payloadFields", next.length ? next : void 0);
+}
+function setManualField(idx, patch) {
+  writeManualFields(manualFields.value.map((f, i) => i === idx ? { ...f, ...patch } : f));
+}
+function addManualField() {
+  writeManualFields([...manualFields.value, { path: "", label: "", kind: "text" }]);
+}
+function removeManualField(idx) {
+  manualFieldUids.value.splice(idx, 1);
+  writeManualFields(manualFields.value.filter((_, i) => i !== idx));
+}
+let nextManualFieldUid = 0;
+const manualFieldUids = ref([]);
+watch(() => manualFields.value.length, (n) => {
+  const uids = manualFieldUids.value;
+  while (uids.length < n) uids.push(nextManualFieldUid++);
+  if (uids.length > n) uids.splice(n);
+}, { immediate: true });
 const { loadForWorkflow, getSteps } = useIntegrationsRuns();
 const runData = ref(null);
 const runInfo = ref(null);
@@ -275,7 +567,7 @@ const sampleContext = computed(() => {
 });
 provide("integrationsSampleContext", sampleContext);
 provide("integrationsNodeNames", computed(
-  () => Object.fromEntries((props.nodes ?? []).map((n) => [n.id, labelText(n.name) || n.nodeSlug]))
+  () => Object.fromEntries((props.nodes ?? []).map((n) => [n.id, resolveDisplayName(n.name) || n.nodeSlug]))
 ));
 const upstreamSections = computed(() => {
   if (!isNode.value) return [];
@@ -283,7 +575,7 @@ const upstreamSections = computed(() => {
     const m = findManifest(node.nodeSlug, node.nodeVersion);
     return {
       id: node.id,
-      name: labelText(node.name) || node.nodeSlug,
+      name: resolveDisplayName(node.name) || node.nodeSlug,
       manifest: m,
       direct,
       ports: withSampledFields(portsForNode(node, m, props.dynamicOutputs?.[node.id]), sampleFor(node.id))
@@ -291,21 +583,16 @@ const upstreamSections = computed(() => {
   });
 });
 const variableNames = computed(() => Object.keys(props.variables ?? {}));
-function portDotClass(kind, name) {
-  if (name === "true") return "bg-emerald-500";
-  if (name === "false") return "bg-amber-400";
-  if (kind === "error") return "bg-rose-500";
-  if (kind === "branch") return "bg-violet-500";
-  return "bg-slate-400";
-}
 const lastField = ref(null);
 const lastFocusKind = ref(null);
+const inputPaneOpen = ref(false);
 const exprInsertHandler = ref(null);
 provide("integrationsExpressionInsert", exprInsertHandler);
 function onCenterFocusIn(e) {
   const t = e.target;
   if (t instanceof HTMLElement && t.closest(".expr-editor")) {
     lastFocusKind.value = "editor";
+    inputPaneOpen.value = true;
     return;
   }
   if (t instanceof HTMLTextAreaElement) {
@@ -339,6 +626,7 @@ function insertExpression(expression) {
   toast("Expression copied. Click into a field first to insert it directly.");
 }
 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";
 function onChipDragStart(e, expression) {
   e.dataTransfer?.setData("text/plain", expression);
   if (e.dataTransfer) e.dataTransfer.effectAllowed = "copy";
@@ -408,6 +696,14 @@ const visibleVariableNames = computed(() => {
   const q = searchQuery.value;
   return q ? variableNames.value.filter((n) => n.toLowerCase().includes(q)) : variableNames.value;
 });
+const variableRows = computed(() => visibleVariableNames.value.map((name) => {
+  const def = props.variables?.[name]?.default;
+  return {
+    name,
+    glyph: typeGlyph(dataTypeOf(def)),
+    value: def === void 0 || def === "" ? null : previewValue(def)
+  };
+}));
 const searchEmpty = computed(
   () => !!searchQuery.value && !visibleSections.value.length && !showTriggerChip.value && !visibleVariableNames.value.length
 );
@@ -563,30 +859,129 @@ async function runTestStep() {
        width/height, border and the close control. -->
   <div class="flex min-h-0 flex-1 flex-col bg-white">
     <!-- Header -->
-    <div class="flex shrink-0 items-center gap-3 border-b border-black/[0.06] px-4 py-3 pr-14">
+    <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">
-        <IntegrationsNodeLogo v-if="isNode" :manifest="manifest" :size="20" />
+        <IntegrationsNodeMark v-if="isNode" :manifest="manifest" :size="20" />
         <component :is="triggerGlyph" v-else :size="18" />
       </div>
       <div class="min-w-0 flex-1">
+        <!-- Named explicitly: the placeholder is the node's slug, which left
+             this field accessibly called `revenexx:sftp-list` — a name for the
+             type, not for the field. -->
         <input
           ref="nameInput"
-          :value="labelText(draft.name)"
+          aria-label="Node name"
+          :value="nameValue"
           :placeholder="namePlaceholder"
-          class="w-full truncate bg-transparent text-sm font-semibold text-foreground outline-none placeholder:text-muted-foreground/60"
+          class="w-full truncate rounded-sm bg-transparent text-sm font-semibold text-foreground outline-none placeholder:text-muted-foreground/60 focus:ring-2 focus:ring-primary/40"
           @input="writeName($event.target.value)"
         >
-        <div class="truncate font-mono text-[11px] text-muted-foreground">
-          {{ subtitleText }}
+        <div class="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <span class="truncate">{{ subtitleText }}</span>
+          <!-- What the node TYPE is for, one click behind the line that names
+               the type. Not printed into the header: it is read once, when the
+               node is new to someone, and a manifest that writes three
+               paragraphs would otherwise push the form off the screen every
+               time it is opened by someone who already knows. No description in
+               the manifest, no question mark — nothing to ask. -->
+          <Popover v-if="manifestDescription">
+            <PopoverTrigger as-child>
+              <!-- The ring stays 16px because that is what a `?` in a subtitle
+                   line should look like; the TARGET is grown to 24px by the
+                   `after` overlay. A 16px target inline under the full-width
+                   name input misses WCAG 2.5.8 and cannot claim the spacing
+                   exception — a 24px circle centred here reaches into the input,
+                   which is a target of its own. And this is the only route to
+                   the description at all. -->
+              <button
+                type="button"
+                aria-label="What this node does"
+                class="relative flex size-4 shrink-0 items-center justify-center rounded-full border border-black/[0.12] text-[10px] font-semibold leading-none transition after:absolute after:-inset-1 after:content-[''] hover:border-black/25 hover:bg-black/[0.04] hover:text-foreground"
+              >
+                ?
+              </button>
+            </PopoverTrigger>
+            <PopoverContent aria-label="What this node does" align="start" class="w-96 rounded-lg border border-black/[0.06] bg-white p-4 shadow-lg">
+              <div class="flex items-center gap-2.5">
+                <span class="flex size-8 shrink-0 items-center justify-center rounded-md border border-black/[0.06] bg-slate-50 text-slate-600">
+                  <IntegrationsNodeMark :manifest="manifest" :size="18" />
+                </span>
+                <div class="min-w-0">
+                  <div class="truncate text-sm font-semibold text-foreground">
+                    {{ resolveLocalized(manifest?.name) }}
+                  </div>
+                  <div class="truncate text-xs text-muted-foreground">
+                    {{ subtitleText }}
+                  </div>
+                </div>
+              </div>
+              <!-- Reading matter, so it gets reading measure and scrolls when
+                   the node package is generous. -->
+              <p class="mt-3 max-h-64 overflow-y-auto text-sm leading-relaxed text-foreground/80">
+                {{ manifestDescription }}
+              </p>
+            </PopoverContent>
+          </Popover>
         </div>
       </div>
       <span class="shrink-0 rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wider text-slate-600">
         {{ groupLabel }}
       </span>
+      <!-- The user's own note. A control of its own, deliberately not a second
+           paragraph under the name: the line above is what the node TYPE does
+           and cannot be edited, this is what one person wrote about this one
+           node. Named like the badge on the card, so the canvas and the dialog
+           agree on what the thing is called. -->
+      <Popover v-if="draftNode" v-model:open="noteOpen">
+        <PopoverTrigger as-child>
+          <button
+            type="button"
+            class="flex shrink-0 items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium transition"
+            :class="noteText ? 'border-amber-500/40 bg-amber-500/10 text-amber-700' : 'border-black/[0.08] text-muted-foreground hover:bg-black/[0.04] hover:text-foreground'"
+          >
+            <MessageSquareText :size="12" />
+            {{ noteLabel }}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent aria-label="Note" align="end" class="w-80 space-y-1.5 rounded-lg border border-black/[0.06] bg-white p-3 shadow-lg">
+          <Label class="text-mono text-muted-foreground">Note</Label>
+          <Textarea
+            aria-label="Note"
+            :model-value="draftNode.notes ?? ''"
+            :rows="4"
+            placeholder="Why this node is here…"
+            class="rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white"
+            @update:model-value="writeNote"
+          />
+        </PopoverContent>
+      </Popover>
+      <!-- The Input pane on request. Also opens by itself when the cursor lands
+           in an expression field — this is for reading it, or for dragging out
+           of it, before a field is chosen.
+
+           Not offered on a trigger: a trigger starts the workflow, so there is no
+           upstream data, and none of its settings takes an expression — the pane
+           would open onto its own explanation of why it is empty, in a dialog
+           sized for the few controls a trigger has. -->
+      <button
+        v-if="isNode"
+        type="button"
+        class="flex shrink-0 items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium transition"
+        :class="inputPaneOpen ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-700' : 'border-black/[0.08] text-muted-foreground hover:bg-black/[0.04] hover:text-foreground'"
+        :aria-pressed="inputPaneOpen"
+        @click="inputPaneOpen = !inputPaneOpen"
+      >
+        <Database :size="12" />
+        Input data
+      </button>
+      <!-- Icon-only controls: `title` alone leaves them nameless to a screen
+           reader (and unaddressable to a test without a CSS selector), so each
+           carries the same sentence as an aria-label. -->
       <div v-if="sequence.length > 1" class="flex shrink-0 items-center gap-0.5 border-l border-black/[0.06] pl-2">
         <button
           type="button"
           :disabled="!hasPrev"
+          aria-label="Previous step (saves changes)"
           title="Previous step (saves changes)"
           class="flex size-7 items-center justify-center rounded-md text-muted-foreground transition hover:bg-black/[0.04] hover:text-foreground disabled:pointer-events-none disabled:opacity-30"
           @click="navigate(-1)"
@@ -596,6 +991,7 @@ async function runTestStep() {
         <button
           type="button"
           :disabled="!hasNext"
+          aria-label="Next step (saves changes)"
           title="Next step (saves changes)"
           class="flex size-7 items-center justify-center rounded-md text-muted-foreground transition hover:bg-black/[0.04] hover:text-foreground disabled:pointer-events-none disabled:opacity-30"
           @click="navigate(1)"
@@ -603,14 +999,25 @@ async function runTestStep() {
           <ChevronRight :size="14" />
         </button>
       </div>
+      <!-- Close lives in the header row so it lines up with the chevrons
+           (the DialogContent built-in X floats at its own offset). -->
+      <button
+        type="button"
+        aria-label="Close"
+        title="Close"
+        class="-mr-1.5 flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-black/[0.04] hover:text-foreground"
+        @click="emit('close')"
+      >
+        <X :size="15" />
+      </button>
     </div>
 
     <!-- Body: Input pane + tabbed center -->
     <div class="flex min-h-0 flex-1">
       <!-- Input pane -->
-      <aside class="flex w-[300px] shrink-0 flex-col border-r border-black/[0.06] bg-muted/10" @dragend="onChipDragEnd">
+      <aside v-if="inputPaneOpen" class="flex w-[300px] shrink-0 flex-col border-r border-black/[0.06] bg-muted/10" @dragend="onChipDragEnd">
         <div class="shrink-0 border-b border-black/[0.06] px-3 py-2.5">
-          <div class="text-sm font-semibold text-foreground">
+          <div class="text-mono text-muted-foreground">
             Input
           </div>
           <p class="mt-0.5 text-xs leading-snug text-muted-foreground">
@@ -621,8 +1028,9 @@ async function runTestStep() {
             <input
               v-model="inputSearch"
               type="text"
+              aria-label="Search data"
               placeholder="Search data"
-              class="h-7 w-full rounded-md border border-black/[0.08] bg-white pl-6.5 pr-2 text-xs outline-none transition placeholder:text-muted-foreground/60 focus:border-black/[0.16]"
+              class="h-7 w-full rounded-md border border-black/[0.08] bg-white pl-6.5 pr-2 text-xs outline-none transition placeholder:text-muted-foreground/60 focus:border-black/[0.16] focus:ring-2 focus:ring-primary/40"
             >
           </div>
           <div v-if="workflowId" class="mt-2 flex items-center gap-1.5">
@@ -670,7 +1078,7 @@ async function runTestStep() {
                   @click="toggleNodeSection(s.id)"
                 >
                   <ChevronRight :size="11" class="shrink-0 text-muted-foreground transition-transform" :class="sectionClosed(s.id) ? '' : 'rotate-90'" />
-                  <IntegrationsNodeLogo :manifest="s.manifest" :size="14" />
+                  <IntegrationsNodeMark :manifest="s.manifest" :size="14" :badge="false" />
                   <span class="min-w-0 truncate text-xs font-medium text-foreground">{{ s.name }}</span>
                   <span
                     v-if="!s.direct"
@@ -686,25 +1094,37 @@ async function runTestStep() {
                     <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 class="flex flex-wrap gap-1">
+                  <!-- Schema rows, n8n-style: glyph · key · sampled value. -->
+                  <div class="space-y-px">
                     <button
                       type="button"
-                      :class="chipClass"
+                      :class="rowClass"
+                      :aria-label="nodeOutputExpr(s.id, p.name)"
                       :title="nodeOutputExpr(s.id, p.name)"
                       draggable="true"
                       @dragstart="onChipDragStart($event, nodeOutputExpr(s.id, p.name))"
                       @click="insertExpression(nodeOutputExpr(s.id, p.name))"
-                    ><span v-for="(seg, i) in highlightSegments(p.name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span></button>
-                    <button
-                      v-for="f in p.fields"
-                      :key="f.name"
-                      type="button"
-                      :class="chipClass"
-                      :title="nodeOutputExpr(s.id, p.name, f.name) + (f.dataType ? ' \xB7 ' + f.dataType : '')"
-                      draggable="true"
-                      @dragstart="onChipDragStart($event, nodeOutputExpr(s.id, p.name, f.name))"
-                      @click="insertExpression(nodeOutputExpr(s.id, p.name, f.name))"
-                    ><span v-if="typeGlyph(f.dataType)" class="mr-1 font-semibold" :class="typeGlyph(f.dataType).cls">{{ typeGlyph(f.dataType).char }}</span><span v-for="(seg, i) in highlightSegments(f.name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span><span v-if="chipValue(s.id, p.name, f.name) !== null" class="text-slate-400">: {{ chipValue(s.id, p.name, f.name) }}</span></button>
+                    >
+                      <span class="w-3 shrink-0 text-center font-semibold text-slate-400">{}</span>
+                      <span class="shrink-0 font-medium"><span v-for="(seg, i) in highlightSegments(p.name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span></span>
+                    </button>
+                    <div class="space-y-px pl-3">
+                      <button
+                        v-for="f in p.fields"
+                        :key="f.name"
+                        type="button"
+                        :class="rowClass"
+                        :aria-label="nodeOutputExpr(s.id, p.name, f.name)"
+                        :title="nodeOutputExpr(s.id, p.name, f.name) + (f.dataType ? ' \xB7 ' + f.dataType : '')"
+                        draggable="true"
+                        @dragstart="onChipDragStart($event, nodeOutputExpr(s.id, p.name, f.name))"
+                        @click="insertExpression(nodeOutputExpr(s.id, p.name, f.name))"
+                      >
+                        <span class="w-3 shrink-0 text-center font-semibold" :class="typeGlyph(f.dataType)?.cls ?? 'text-slate-300'">{{ typeGlyph(f.dataType)?.char ?? "\xB7" }}</span>
+                        <span class="shrink-0"><span v-for="(seg, i) in highlightSegments(f.name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span></span>
+                        <span v-if="chipValue(s.id, p.name, f.name) !== null" class="min-w-0 flex-1 truncate text-slate-400">{{ chipValue(s.id, p.name, f.name) }}</span>
+                      </button>
+                    </div>
                   </div>
                 </div>
                 </div>
@@ -720,6 +1140,7 @@ async function runTestStep() {
                 <button
                   type="button"
                   :class="chipClass"
+                  :aria-label="triggerPayloadExpr()"
                   :title="triggerPayloadExpr()"
                   draggable="true"
                   @dragstart="onChipDragStart($event, triggerPayloadExpr())"
@@ -743,17 +1164,23 @@ async function runTestStep() {
             <div class="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
               Variables
             </div>
-            <div v-if="visibleVariableNames.length" class="flex flex-wrap gap-1">
+            <!-- Schema rows with the declared default as the value. -->
+            <div v-if="variableRows.length" class="space-y-px">
               <button
-                v-for="name in visibleVariableNames"
-                :key="name"
+                v-for="row in variableRows"
+                :key="row.name"
                 type="button"
-                :class="chipClass"
-                :title="variableExpr(name)"
+                :class="rowClass"
+                :aria-label="variableExpr(row.name)"
+                :title="variableExpr(row.name)"
                 draggable="true"
-                @dragstart="onChipDragStart($event, variableExpr(name))"
-                @click="insertExpression(variableExpr(name))"
-              ><span v-for="(seg, i) in highlightSegments(name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span></button>
+                @dragstart="onChipDragStart($event, variableExpr(row.name))"
+                @click="insertExpression(variableExpr(row.name))"
+              >
+                <span class="w-3 shrink-0 text-center font-semibold" :class="row.glyph?.cls ?? 'text-slate-300'">{{ row.glyph?.char ?? "\xB7" }}</span>
+                <span class="shrink-0"><span v-for="(seg, i) in highlightSegments(row.name)" :key="i" :class="seg.hit ? 'rounded-[2px] bg-amber-200/80' : ''">{{ seg.text }}</span></span>
+                <span v-if="row.value !== null" class="min-w-0 flex-1 truncate text-slate-400">{{ row.value }}</span>
+              </button>
             </div>
             <p v-else class="text-xs leading-snug text-muted-foreground">
               No workflow variables defined.
@@ -768,25 +1195,8 @@ async function runTestStep() {
 
       <!-- Center: tabs + content -->
       <section class="flex min-w-0 flex-1 flex-col">
-        <div class="flex shrink-0 items-center gap-1 border-b border-black/[0.06] px-4">
-          <button
-            type="button"
-            class="relative -mb-px border-b-2 px-2.5 py-2 text-sm font-medium transition"
-            :class="tab === 'parameters' ? 'border-foreground text-foreground' : 'border-transparent text-muted-foreground hover:text-foreground'"
-            @click="tab = 'parameters'"
-          >
-            Parameters
-          </button>
-          <button
-            v-if="showSettingsTab"
-            type="button"
-            class="relative -mb-px border-b-2 px-2.5 py-2 text-sm font-medium transition"
-            :class="tab === 'settings' ? 'border-foreground text-foreground' : 'border-transparent text-muted-foreground hover:text-foreground'"
-            @click="tab = 'settings'"
-          >
-            Settings
-          </button>
-        </div>
+        <!-- Same TabBar as the workflow page — one tab look everywhere. -->
+        <TabBar v-model="tab" :tabs="inspectorTabs" class="shrink-0 px-4" />
 
         <div
           class="min-h-0 flex-1 overflow-y-auto p-4"
@@ -797,111 +1207,416 @@ async function runTestStep() {
           @drop="onCenterDrop"
         >
           <!-- Parameters: trigger config -->
-          <div v-if="!isNode && draftTrigger" class="mx-auto w-full max-w-3xl space-y-3">
+          <!-- Full width: triggers have no output pane, a capped column
+               would float lost in the wide center. -->
+          <div v-if="!isNode && draftTrigger" class="w-full space-y-3">
             <!-- Active toggle. Persists with the workflow save like every other trigger field. -->
-            <div class="flex items-center justify-between rounded-lg border border-black/[0.06] bg-muted/20 px-3 py-2">
+            <div class="flex items-center gap-3 rounded-lg border border-black/[0.06] bg-muted/20 px-3 py-2">
+              <!-- The name lives in the text next to the switch, which is not
+                   a <label> — so the switch says it itself. -->
+              <Switch
+                aria-label="Active"
+                class="data-[state=unchecked]:bg-slate-300"
+                :model-value="draftTrigger.active !== false"
+                @update:model-value="(v) => patchTrigger({ active: v })"
+              />
               <div>
                 <div class="text-sm font-medium">Active</div>
                 <p class="text-xs text-muted-foreground">
                   A run needs at least one active trigger.
                 </p>
               </div>
-              <Switch
-                :model-value="draftTrigger.active !== false"
-                @update:model-value="(v) => patchTrigger({ active: v })"
-              />
             </div>
+            <!--
+              The schedule is picked, not written. Each frequency shows only its
+              own fields, and the expression appears in one place only: the
+              Advanced field, for a schedule no picker can represent.
+            -->
             <template v-if="draftTrigger.type === 'schedule'">
-              <div class="space-y-1.5">
-                <Label class="text-mono text-muted-foreground">Cron</Label>
-                <Input
-                  :model-value="readTriggerConfig('cron') ?? ''"
-                  placeholder="0 2 * * *"
-                  class="h-8 text-sm bg-white font-mono"
-                  @update:model-value="(v) => writeTriggerConfig('cron', v)"
-                />
+              <div class="grid grid-cols-2 gap-3">
+                <div class="space-y-1.5">
+                  <!-- "Frequency", not "Runs": a run is an execution everywhere
+                       else in the studio, and there is a whole page of them. -->
+                  <Label for="ni-frequency" class="text-mono text-muted-foreground">Frequency</Label>
+                  <Select :model-value="frequency" @update:model-value="applyFrequency">
+                    <SelectTrigger id="ni-frequency" aria-label="Frequency" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem v-for="f in FREQUENCY_OPTIONS" :key="f.value" :value="f.value">{{ f.label }}</SelectItem>
+                      <SelectSeparator />
+                      <SelectItem :value="FREQUENCY_ADVANCED">Advanced (cron)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <!-- Every few minutes: the gap between firings. -->
+                <div v-if="frequency === 'minutes'" class="space-y-1.5">
+                  <Label for="ni-minute-interval" class="text-mono text-muted-foreground">Interval</Label>
+                  <Select :model-value="String(carry.minuteInterval)" @update:model-value="applyMinuteInterval">
+                    <SelectTrigger id="ni-minute-interval" aria-label="Interval" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem v-for="n in minuteIntervalOptions" :key="n" :value="String(n)">
+                        {{ n === 1 ? "Every minute" : `Every ${n} minutes` }}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <!-- Every few hours: the gap, plus where in the hour it lands. -->
+                <div v-if="frequency === 'hours'" class="space-y-1.5">
+                  <Label for="ni-hour-interval" class="text-mono text-muted-foreground">Interval</Label>
+                  <Select :model-value="String(carry.hourInterval)" @update:model-value="applyHourInterval">
+                    <SelectTrigger id="ni-hour-interval" aria-label="Interval" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem v-for="n in HOUR_INTERVALS" :key="n" :value="String(n)">Every {{ n }} hours</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div v-if="frequency === 'hourly' || frequency === 'hours' || frequency === 'times'" class="space-y-1.5">
+                  <Label for="ni-minute-past" class="text-mono text-muted-foreground">Minutes past the hour</Label>
+                  <Select :model-value="String(carry.minute)" @update:model-value="applyMinutePast">
+                    <SelectTrigger id="ni-minute-past" aria-label="Minutes past the hour" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem v-for="n in minutePastOptions" :key="n" :value="String(n)">:{{ pad2(n) }}</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <!-- A fixed time of day: the one field all three calendar
+                     rhythms share, which is why it survives a change of
+                     frequency. -->
+                <div v-if="frequency === 'daily' || frequency === 'weekly' || frequency === 'monthly'" class="space-y-1.5">
+                  <Label for="ni-time" class="text-mono text-muted-foreground">Time</Label>
+                  <Input
+                    id="ni-time"
+                    type="time"
+                    aria-label="Time"
+                    :model-value="timeValue"
+                    class="h-8 rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white tabular-nums"
+                    @update:model-value="applyTime"
+                  />
+                </div>
+
+                <div v-if="frequency === 'monthly'" class="space-y-1.5">
+                  <Label for="ni-day-of-month" class="text-mono text-muted-foreground">Day of month</Label>
+                  <Select :model-value="String(carry.day)" @update:model-value="applyDayOfMonth">
+                    <SelectTrigger id="ni-day-of-month" aria-label="Day of month" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem v-for="n in 31" :key="n" :value="String(n)">{{ n }}</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <!-- Advanced: the expression itself, the only place it is shown. -->
+                <div v-if="frequency === FREQUENCY_ADVANCED" class="space-y-1.5">
+                  <Label for="ni-cron" class="text-mono text-muted-foreground">Cron expression</Label>
+                  <Input
+                    id="ni-cron"
+                    aria-label="Cron expression"
+                    :model-value="cronValue"
+                    placeholder="0 9-17 * * 1-5"
+                    class="h-8 rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white font-mono"
+                    @update:model-value="(v) => writeTriggerConfig('cron', v)"
+                  />
+                </div>
               </div>
-              <div class="space-y-1.5">
-                <Label class="text-mono text-muted-foreground">Timezone</Label>
-                <Input
-                  :model-value="readTriggerConfig('timezone') ?? ''"
-                  placeholder="Europe/Berlin"
-                  class="h-8 text-sm bg-white"
-                  @update:model-value="(v) => writeTriggerConfig('timezone', v)"
-                />
+
+              <!--
+                The hours of "several times a day". Two rows of twelve, and the
+                minute above is shared by all of them: cron cannot express times
+                with different minutes in one expression, so 07:30 and 09:15 is two
+                schedule triggers rather than one field per row.
+              -->
+              <div v-if="frequency === 'times'" class="space-y-1.5">
+                <Label class="text-mono text-muted-foreground">Hours</Label>
+                <ToggleGroup
+                  type="multiple"
+                  aria-label="Hours"
+                  :model-value="selectedHours"
+                  class="grid w-fit grid-cols-12 gap-1"
+                  @update:model-value="applyHours"
+                >
+                  <ToggleGroupItem
+                    v-for="h in HOURS_OF_DAY"
+                    :key="h"
+                    :value="String(h)"
+                    :aria-label="`${pad2(h)}:${pad2(carry.minute)}`"
+                    class="h-7 w-9 rounded-md border border-black/[0.08] bg-white text-xs tabular-nums data-[state=on]:border-emerald-500/40 data-[state=on]:bg-emerald-500/10 data-[state=on]:text-emerald-700"
+                  >
+                    {{ pad2(h) }}
+                  </ToggleGroupItem>
+                </ToggleGroup>
               </div>
+
+              <!-- Weekdays: full width, because seven toggles in half of the
+                   grid would wrap. Serves both rhythms that fall on days. -->
+              <div v-if="frequency === 'weekly' || frequency === 'times'" class="space-y-1.5">
+                <Label class="text-mono text-muted-foreground">Days</Label>
+                <ToggleGroup
+                  type="multiple"
+                  aria-label="Days"
+                  :model-value="selectedDays"
+                  class="justify-start gap-1"
+                  @update:model-value="applyDays"
+                >
+                  <ToggleGroupItem
+                    v-for="d in DAY_OPTIONS"
+                    :key="d.value"
+                    :value="String(d.value)"
+                    :aria-label="d.name"
+                    class="h-8 w-10 rounded-md border border-black/[0.08] bg-white text-sm data-[state=on]:border-emerald-500/40 data-[state=on]:bg-emerald-500/10 data-[state=on]:text-emerald-700"
+                  >
+                    {{ d.short }}
+                  </ToggleGroupItem>
+                </ToggleGroup>
+              </div>
+
+              <!--
+                The confirmation. The timezone is in it because the platform reads
+                the expression's numbers as wall-clock time in that zone, so a time
+                without its zone would be half an answer.
+              -->
+              <p v-if="scheduleSentence" aria-label="When it fires" class="text-xs text-emerald-700">{{ scheduleSentence }}</p>
+              <!-- No expression at all is its own answer, and the same one the
+                   Schedules page gives for this trigger: it is not written as
+                   anything, and it does not run. A trigger placed from the palette
+                   carries an expression, so this is for one that arrived without
+                   one. -->
+              <p v-else-if="!hasCron" aria-label="When it fires" class="text-xs text-muted-foreground">
+                No schedule set — pick a frequency, or write an expression.
+              </p>
+              <p v-else class="text-xs text-muted-foreground">
+                This schedule is written as an expression these settings cannot show. It runs exactly as written.
+              </p>
+              <p v-if="frequency === 'monthly' && carry.day >= 29" class="text-xs text-muted-foreground">
+                Months without this day are skipped.
+              </p>
             </template>
             <template v-else-if="draftTrigger.type === 'webhook'">
               <div class="space-y-1.5">
-                <Label class="text-mono text-muted-foreground">Path</Label>
+                <Label for="ni-webhook-url" class="text-mono text-muted-foreground">Webhook URL</Label>
+                <div v-if="webhookUrl" class="flex items-center gap-1.5">
+                  <Input
+                    id="ni-webhook-url"
+                    readonly
+                    :model-value="webhookUrl"
+                    class="h-8 flex-1 rounded-md border border-black/[0.08] ring-0 shadow-none bg-white font-mono text-xs"
+                    @focus="$event.target.select()"
+                  />
+                  <button
+                    type="button"
+                    title="Copy URL"
+                    class="flex size-8 shrink-0 items-center justify-center rounded-md border border-black/[0.08] bg-white text-muted-foreground transition hover:text-foreground"
+                    @click="copyWebhookUrl"
+                  >
+                    <Copy :size="14" />
+                  </button>
+                </div>
+                <p class="text-xs text-muted-foreground">
+                  <template v-if="webhookIsPublic">Public ingress endpoint — callers authenticate with the endpoint secret issued when the trigger was exposed.</template>
+                  <template v-else>Authenticated endpoint: callers need a platform API token (Bearer). Enable the public endpoint for external systems.</template>
+                </p>
+              </div>
+              <div class="flex items-center gap-3 rounded-lg border border-black/[0.06] bg-muted/20 px-3 py-2">
+                <Switch
+                  aria-label="Public endpoint"
+                  class="data-[state=unchecked]:bg-slate-300"
+                  :model-value="webhookIsPublic"
+                  @update:model-value="(v) => writeTriggerConfigPatch(v ? { public: true, ...draftTrigger.config.authProfile ? {} : configPatchForAuthChoice('token') } : { public: void 0 })"
+                />
+                <div>
+                  <div class="text-sm font-medium">Public endpoint</div>
+                  <p class="text-xs text-muted-foreground">
+                    Saving provisions a public URL on the webhook ingress (with its own endpoint secret) — for external systems without a platform token.
+                  </p>
+                </div>
+              </div>
+              <div class="grid grid-cols-2 gap-3">
+                <div class="space-y-1.5">
+                  <Label for="ni-webhook-method" class="text-mono text-muted-foreground">Method</Label>
+                  <Select
+                    :model-value="readTriggerConfig('method') ?? 'POST'"
+                    @update:model-value="(v) => writeTriggerConfig('method', v)"
+                  >
+                    <SelectTrigger id="ni-webhook-method" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="GET">GET</SelectItem>
+                      <SelectItem value="POST">POST</SelectItem>
+                      <SelectItem value="PUT">PUT</SelectItem>
+                      <SelectItem value="PATCH">PATCH</SelectItem>
+                      <SelectItem value="DELETE">DELETE</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div v-if="webhookIsPublic" class="space-y-1.5">
+                  <Label for="ni-webhook-protection" class="text-mono text-muted-foreground">Protection</Label>
+                  <Select :model-value="authChoice" @update:model-value="applyAuthChoice">
+                    <SelectTrigger id="ni-webhook-protection" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="token">API key / token header</SelectItem>
+                      <SelectItem value="bearer">Bearer token</SelectItem>
+                      <SelectItem value="basic">Basic auth</SelectItem>
+                      <SelectItem value="none">None (capture everything)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <p class="text-xs text-muted-foreground">Verified by the webhook ingress before the workflow runs.</p>
+                </div>
+              </div>
+              <div v-if="webhookIsPublic && authChoice === 'token'" class="space-y-1.5">
+                <Label for="ni-auth-header" class="text-mono text-muted-foreground">Header name</Label>
                 <Input
-                  :model-value="readTriggerConfig('path') ?? ''"
-                  placeholder="/orders"
-                  class="h-8 text-sm bg-white font-mono"
-                  @update:model-value="(v) => writeTriggerConfig('path', v)"
+                  id="ni-auth-header"
+                  :model-value="draftTrigger.config.authConfig?.header ?? ''"
+                  placeholder="X-Webhook-Token"
+                  class="h-8 rounded-md border border-black/[0.08] ring-0 shadow-none bg-white text-sm"
+                  @update:model-value="(v) => writeAuthConfigKey('header', String(v))"
                 />
+                <p class="text-xs text-muted-foreground">The header carrying the endpoint secret (e.g. X-Api-Key). Empty uses X-Webhook-Token.</p>
               </div>
-              <div class="space-y-1.5">
-                <Label class="text-mono text-muted-foreground">Method</Label>
-                <Select
-                  :model-value="readTriggerConfig('method') ?? 'POST'"
-                  @update:model-value="(v) => writeTriggerConfig('method', v)"
-                >
-                  <SelectTrigger class="h-8 text-sm bg-white">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="GET">GET</SelectItem>
-                    <SelectItem value="POST">POST</SelectItem>
-                    <SelectItem value="PUT">PUT</SelectItem>
-                    <SelectItem value="PATCH">PATCH</SelectItem>
-                    <SelectItem value="DELETE">DELETE</SelectItem>
-                  </SelectContent>
-                </Select>
+              <div v-if="webhookIsPublic && authChoice === 'basic'" class="space-y-1.5">
+                <Label for="ni-auth-username" class="text-mono text-muted-foreground">Username</Label>
+                <Input
+                  id="ni-auth-username"
+                  :model-value="draftTrigger.config.authConfig?.username ?? ''"
+                  placeholder="Any username"
+                  class="h-8 rounded-md border border-black/[0.08] ring-0 shadow-none bg-white text-sm"
+                  @update:model-value="(v) => writeAuthConfigKey('username', String(v))"
+                />
+                <p class="text-xs text-muted-foreground">Optional — pins the Basic-auth username. The password is the endpoint secret.</p>
               </div>
-              <div class="space-y-1.5">
-                <Label class="text-mono text-muted-foreground">Signing secret</Label>
-                <Select
-                  :model-value="readTriggerConfig('secretRef') ?? ''"
-                  @update:model-value="(v) => writeTriggerConfig('secretRef', v)"
-                >
-                  <SelectTrigger class="h-8 text-sm bg-white">
-                    <SelectValue placeholder="None" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem v-for="k in secretKeys" :key="k" :value="k">{{ k }}</SelectItem>
-                  </SelectContent>
-                </Select>
+              <div v-if="webhookExposed && authChoice !== 'none'" class="flex items-center gap-2">
+                <Button type="button" variant="outline" size="sm" class="h-7 text-sm" :disabled="rotateBusy" @click="rotateEndpointSecret">
+                  {{ rotateBusy ? "Rotating\u2026" : "Rotate endpoint secret" }}
+                </Button>
+                <p class="text-xs text-muted-foreground">Issues a new secret (shown once); the previous one keeps working briefly.</p>
               </div>
+
+              <Dialog v-model:open="rotateOpen">
+                <DialogContent class="sm:max-w-md">
+                  <DialogHeader>
+                    <DialogTitle>New endpoint secret</DialogTitle>
+                    <DialogDescription>
+                      Copy it now — it is shown only this once. Give it to the calling system
+                      ({{ authChoice === "basic" ? "as the Basic-auth password" : authChoice === "bearer" ? "as the Bearer token" : "in the token header" }}).
+                    </DialogDescription>
+                  </DialogHeader>
+                  <div class="flex items-center gap-1.5">
+                    <Input
+                      readonly
+                      :model-value="rotatedSecret ?? ''"
+                      class="h-8 flex-1 rounded-md border border-black/[0.08] ring-0 shadow-none bg-white font-mono text-xs"
+                      @focus="$event.target.select()"
+                    />
+                    <button
+                      type="button"
+                      title="Copy secret"
+                      class="flex size-8 shrink-0 items-center justify-center rounded-md border border-black/[0.08] bg-white text-muted-foreground transition hover:text-foreground"
+                      @click="copySecret"
+                    >
+                      <Copy :size="14" />
+                    </button>
+                  </div>
+                </DialogContent>
+              </Dialog>
             </template>
             <template v-else-if="draftTrigger.type === 'event'">
               <div class="space-y-1.5">
-                <Label class="text-mono text-muted-foreground">Event</Label>
+                <Label for="ni-event-type" class="text-mono text-muted-foreground">Event</Label>
                 <EventTypeCombobox
+                  input-id="ni-event-type"
                   :model-value="readTriggerConfig('event_type') ?? ''"
                   @update:model-value="(v) => writeTriggerConfig('event_type', v)"
                 />
-                <p class="text-sm text-muted-foreground">
+                <p class="text-xs text-muted-foreground">
                   Runs whenever this platform event fires (e.g. <code class="font-mono">customer.created</code>, <code class="font-mono">order.placed</code>). The event payload is available to the workflow as <code class="font-mono">trigger.payload</code>.
                 </p>
               </div>
+              <div v-if="eventSample" class="space-y-1.5">
+                <!-- A caption, not a field label: it heads a read-only block,
+                     so it stays a plain line rather than an orphan <label>. -->
+                <div class="text-mono text-muted-foreground">Sample payload</div>
+                <pre class="max-h-72 overflow-auto rounded-md border border-black/[0.06] bg-muted/20 p-2.5 font-mono text-[11px] leading-relaxed text-slate-700">{{ eventSample }}</pre>
+                <p class="text-xs text-muted-foreground">From the event catalogue — the shape this event delivers as <code class="font-mono">trigger.payload</code>.</p>
+              </div>
+              <p v-else-if="eventTopic" class="text-xs text-muted-foreground">
+                No sample payload in the event catalogue for this topic.
+              </p>
             </template>
             <template v-else>
-              <p class="text-sm text-muted-foreground">
-                Manual triggers have no configuration. The workflow runs when invoked from the editor or via the API.
-              </p>
+              <div class="space-y-1.5">
+                <!-- Caption for the field list below, not a label for one
+                     control — the row's own controls are named individually. -->
+                <div class="text-mono text-muted-foreground">Run payload fields</div>
+                <p class="text-xs text-muted-foreground">
+                  What the Run dialog asks for when this workflow is started by hand. Each field lands in
+                  <code class="font-mono">trigger.payload.&lt;key&gt;</code>; a File field becomes a manual upload.
+                  Fields referenced by nodes via <code class="font-mono">trigger.payload.*</code> are added automatically.
+                </p>
+              </div>
+              <div v-if="manualFields.length" class="space-y-1.5">
+                <div v-for="(mf, idx) in manualFields" :key="manualFieldUids[idx] ?? idx" class="flex items-center gap-1.5">
+                  <!-- A repeating row has no room for visible labels, so each
+                       control carries its own name and says which row it is. -->
+                  <Select :model-value="mf.kind ?? 'text'" @update:model-value="(v) => setManualField(idx, { kind: v })">
+                    <SelectTrigger :aria-label="`Kind of payload field ${idx + 1}`" size="sm" class="h-8 w-24 shrink-0 rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="text">Text</SelectItem>
+                      <SelectItem value="file">File</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <Input
+                    :aria-label="`Key of payload field ${idx + 1}`"
+                    :model-value="mf.path"
+                    placeholder="key (e.g. orderId or import.file)"
+                    class="h-8 w-[38%] rounded-md border border-black/[0.08] ring-0 shadow-none bg-white font-mono text-sm"
+                    @update:model-value="(v) => setManualField(idx, { path: String(v) })"
+                  />
+                  <Input
+                    :aria-label="`Label of payload field ${idx + 1}`"
+                    :model-value="mf.label ?? ''"
+                    placeholder="Label shown in the Run dialog"
+                    class="h-8 min-w-0 flex-1 rounded-md border border-black/[0.08] ring-0 shadow-none bg-white text-sm"
+                    @update:model-value="(v) => setManualField(idx, { label: String(v) })"
+                  />
+                  <button
+                    type="button"
+                    :aria-label="`Remove payload field ${idx + 1}`"
+                    class="flex size-7 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:text-rose-600"
+                    @click="removeManualField(idx)"
+                  >
+                    <Trash2 :size="13" />
+                  </button>
+                </div>
+              </div>
+              <Button type="button" variant="outline" size="sm" class="h-7 text-sm" @click="addManualField">
+                <Plus :size="12" />
+                Add field
+              </Button>
             </template>
           </div>
 
           <!-- Parameters: node config, generated from the manifest -->
-          <div v-else-if="tab === 'parameters' && draftNode" class="mx-auto w-full max-w-3xl">
+          <div v-else-if="tab === 'parameters' && draftNode" class="mx-auto w-full max-w-5xl">
             <div v-if="manifest?.config?.length" class="space-y-3">
               <div class="flex items-center justify-between">
                 <span class="text-mono text-muted-foreground">Configuration</span>
                 <div class="flex items-center gap-2">
-                  <span v-if="requiredMissingCount" class="text-sm text-amber-600">
-                    {{ requiredMissingCount }} required left
-                  </span>
                   <button
                     type="button"
                     class="flex items-center gap-1 rounded px-1 py-0.5 text-sm text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
@@ -921,7 +1636,7 @@ async function runTestStep() {
                 </div>
               </div>
               <IntegrationsNodeConfigField
-                v-for="field in parameterFields"
+                v-for="field in requiredFields"
                 :key="field.key"
                 :field="field"
                 :config="draftNode.config ?? {}"
@@ -932,8 +1647,51 @@ async function runTestStep() {
                 :depth="0"
                 :variables="variables"
                 :upstream-outputs="upstreamOutputs"
+                :refused="refusedFields?.[field.key]"
                 @set="(k, v) => writeConfig(k, v)"
               />
+
+              <!-- Optional settings, folded. The count is on the control on
+                   purpose: "Show 9 optional settings" is a decision the user can
+                   take without opening it, "Show more" is not. -->
+              <template v-if="optionalFields.length">
+                <button
+                  v-if="!optionalOpen"
+                  type="button"
+                  class="flex items-center gap-1.5 rounded px-1 py-1 text-sm text-muted-foreground transition hover:text-foreground"
+                  @click="optionalOpen = true"
+                >
+                  <ChevronRight :size="13" />
+                  Show {{ optionalFields.length }} optional setting{{ optionalFields.length === 1 ? "" : "s" }}
+                </button>
+                <template v-else>
+                  <button
+                    v-if="requiredFields.length"
+                    type="button"
+                    class="flex items-center gap-1.5 rounded px-1 py-1 text-sm text-muted-foreground transition hover:text-foreground"
+                    @click="optionalOpen = false"
+                  >
+                    <ChevronDown :size="13" />
+                    Hide {{ optionalFields.length }} optional setting{{ optionalFields.length === 1 ? "" : "s" }}
+                  </button>
+                  <IntegrationsNodeConfigField
+                    v-for="field in optionalFields"
+                    :key="field.key"
+                    :field="field"
+                    :config="draftNode.config ?? {}"
+                    :slug="draftNode.nodeSlug"
+                    :version="draftNode.nodeVersion"
+                    :secret-keys="secretKeys"
+                    :static-keys="(manifest.config ?? []).map((f2) => f2.key)"
+                    :depth="0"
+                    :variables="variables"
+                    :upstream-outputs="upstreamOutputs"
+                    :refused="refusedFields?.[field.key]"
+                    @set="(k, v) => writeConfig(k, v)"
+                  />
+                </template>
+              </template>
+
               <p v-if="!parameterFields.length" class="text-sm text-muted-foreground italic">
                 All of this node's options live on the Settings tab.
               </p>
@@ -944,10 +1702,19 @@ async function runTestStep() {
           </div>
 
           <!-- Settings: node-instance execution settings -->
-          <div v-else-if="tab === 'settings' && draftNode" class="mx-auto w-full max-w-3xl space-y-6">
-            <!-- Node behavior: settings-like fields from the node's own config -->
+          <div v-else-if="tab === 'settings' && draftNode" class="mx-auto w-full max-w-5xl space-y-6">
+            <!-- The node's OWN options that happen to be about waiting or
+                 retrying. They read like engine settings and sit next to them,
+                 which is why both blocks say out loud which is which: a node's
+                 "Poll timeout" and the engine's "Timeout" are otherwise two
+                 identical-looking numbers with nothing to tell them apart. -->
             <div v-if="settingsFields.length" class="space-y-3">
-              <span class="text-mono text-muted-foreground">Node behavior</span>
+              <div>
+                <span class="text-mono text-muted-foreground">Options of this node</span>
+                <p class="text-xs text-muted-foreground">
+                  Settings this node type defines for itself.
+                </p>
+              </div>
               <IntegrationsNodeConfigField
                 v-for="field in settingsFields"
                 :key="field.key"
@@ -960,51 +1727,67 @@ async function runTestStep() {
                 :depth="0"
                 :variables="variables"
                 :upstream-outputs="upstreamOutputs"
+                :refused="refusedFields?.[field.key]"
                 @set="(k, v) => writeConfig(k, v)"
               />
             </div>
+            <!-- The rule only earns its place when there is something above to
+                 divide from. -->
+            <div :class="settingsFields.length ? 'border-t border-black/[0.06] pt-5' : ''">
+              <span class="text-mono text-muted-foreground">How the engine runs this step</span>
+              <p class="text-xs text-muted-foreground">
+                The same settings on every node type, applied by the engine around whatever the node does.
+              </p>
+            </div>
+
             <!-- Retry policy -->
-            <section class="space-y-2">
-              <div class="flex items-center justify-between rounded-lg border border-black/[0.06] bg-muted/20 px-3 py-2">
+            <!-- One card: the toggle heads it, the policy fields expand
+                 inside — they belong to the same schematic unit. -->
+            <section class="rounded-lg border border-black/[0.06] bg-muted/20">
+              <div class="flex items-center gap-3 px-3 py-2">
+                <Switch
+                  aria-label="Retry on failure"
+                  class="data-[state=unchecked]:bg-slate-300"
+                  :model-value="!!draftNode.retry"
+                  @update:model-value="(v) => patchNode({ retry: v ? { maxAttempts: 3, backoffSeconds: 1, strategy: 'exponential' } : void 0 })"
+                />
                 <div>
                   <div class="text-sm font-medium">Retry on failure</div>
                   <p class="text-xs text-muted-foreground">
                     Re-run this node automatically when an attempt fails.
                   </p>
                 </div>
-                <Switch
-                  :model-value="!!draftNode.retry"
-                  @update:model-value="(v) => patchNode({ retry: v ? { maxAttempts: 3, backoffSeconds: 1, strategy: 'exponential' } : void 0 })"
-                />
               </div>
-              <div v-if="draftNode.retry" class="grid grid-cols-2 gap-3 rounded-lg border border-black/[0.06] p-3">
+              <div v-if="draftNode.retry" class="grid grid-cols-4 gap-3 border-t border-black/[0.06] p-3">
                 <div class="space-y-1.5">
-                  <Label class="text-mono text-muted-foreground">Max attempts</Label>
+                  <Label for="ni-retry-attempts" class="text-mono text-muted-foreground">Max attempts</Label>
                   <Input
+                    id="ni-retry-attempts"
                     type="number"
                     min="1"
                     :model-value="draftNode.retry?.maxAttempts ?? 3"
-                    class="h-8 text-sm bg-white"
+                    class="h-8 rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white"
                     @update:model-value="(v) => patchNode({ retry: { ...draftNode.retry, maxAttempts: Number(v) || 1 } })"
                   />
                 </div>
                 <div class="space-y-1.5">
-                  <Label class="text-mono text-muted-foreground">Backoff seconds</Label>
+                  <Label for="ni-retry-backoff" class="text-mono text-muted-foreground">Backoff seconds</Label>
                   <Input
+                    id="ni-retry-backoff"
                     type="number"
                     min="0"
                     :model-value="draftNode.retry?.backoffSeconds ?? 0"
-                    class="h-8 text-sm bg-white"
+                    class="h-8 rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white"
                     @update:model-value="(v) => patchNode({ retry: { ...draftNode.retry, backoffSeconds: Number(v) || 0 } })"
                   />
                 </div>
                 <div class="col-span-2 space-y-1.5">
-                  <Label class="text-mono text-muted-foreground">Strategy</Label>
+                  <Label for="ni-retry-strategy" class="text-mono text-muted-foreground">Strategy</Label>
                   <Select
                     :model-value="draftNode.retry?.strategy ?? 'exponential'"
                     @update:model-value="(v) => patchNode({ retry: { ...draftNode.retry, strategy: v } })"
                   >
-                    <SelectTrigger class="h-8 text-sm bg-white">
+                    <SelectTrigger id="ni-retry-strategy" size="sm" class="h-8 rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
@@ -1018,14 +1801,15 @@ async function runTestStep() {
 
             <!-- Timeout: engine start-to-close ceiling for one attempt -->
             <section class="space-y-1.5">
-              <Label class="text-mono text-muted-foreground">Timeout</Label>
+              <Label for="ni-timeout" class="text-mono text-muted-foreground">Timeout</Label>
               <Input
+                id="ni-timeout"
                 type="number"
                 min="1"
                 max="7200"
                 placeholder="600"
                 :model-value="draftNode.timeoutSeconds ?? ''"
-                class="h-8 text-sm bg-white"
+                class="h-8 rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white"
                 @update:model-value="(v) => patchNode({ timeoutSeconds: Number(v) > 0 ? Math.min(Math.trunc(Number(v)), 7200) : void 0 })"
               />
               <p class="text-xs text-muted-foreground">
@@ -1035,12 +1819,12 @@ async function runTestStep() {
 
             <!-- On error: what happens once the retries are exhausted -->
             <section class="space-y-1.5">
-              <Label class="text-mono text-muted-foreground">On error</Label>
+              <Label for="ni-on-error" class="text-mono text-muted-foreground">On error</Label>
               <Select
                 :model-value="draftNode.onError ?? 'fail'"
                 @update:model-value="(v) => patchNode({ onError: v === 'route' ? 'route' : void 0 })"
               >
-                <SelectTrigger class="h-8 text-sm bg-white">
+                <SelectTrigger id="ni-on-error" size="sm" class="h-8 rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -1052,165 +1836,153 @@ async function runTestStep() {
                 Applies after the retry policy is exhausted. A Stop and Error node always fails the run.
               </p>
             </section>
+          </div>
 
-            <!-- Notes: editor-only blob field -->
-            <section class="space-y-1.5">
-              <Label class="text-mono text-muted-foreground">Notes</Label>
+          <!-- Test: run this one step and look at what came back. Its own tab
+               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">
+            <section class="space-y-2">
+              <div class="flex items-center justify-between gap-2">
+                <p class="text-xs text-muted-foreground">
+                  What downstream nodes receive from this one. Declared by the node type;
+                  filled with real values once the step has run.
+                </p>
+                <div class="flex shrink-0 items-center rounded-md border border-black/[0.06] bg-white p-0.5">
+                  <button type="button" :class="outputView === 'schema' ? segActive : segIdle" @click="outputView = 'schema'">
+                    Schema
+                  </button>
+                  <button type="button" :disabled="!selfSample" :class="outputView === 'json' ? segActive : segIdle" @click="outputView = 'json'">
+                    JSON
+                  </button>
+                </div>
+              </div>
+              <template v-if="outputView === 'schema'">
+                <IntegrationsNodeOutputSchema :ports="selfPorts" :value-at="(port, field2) => chipValue(draft.id, port, field2)" />
+              </template>
+              <pre v-else class="overflow-auto rounded-md border border-black/[0.06] bg-white p-3 font-mono text-xs leading-snug">{{ selfSampleJson }}</pre>
+            </section>
+
+            <section class="space-y-2 border-t border-black/[0.06] pt-4">
+              <span class="text-mono text-muted-foreground">Real values</span>
+              <div class="flex items-center gap-2">
+                <Button
+                  size="sm"
+                  class="h-8"
+                  :disabled="testRunning"
+                  title="Runs this node once with the current draft config"
+                  @click="runTestStep"
+                >
+                  {{ testRunning ? "Testing\u2026" : "Test step" }}
+                </Button>
+                <button
+                  type="button"
+                  class="rounded px-1 py-1 text-sm font-medium text-muted-foreground transition hover:text-foreground"
+                  @click="toggleTestInput"
+                >
+                  {{ testInputOpen ? "Hide input" : "Edit input" }}
+                </button>
+                <span class="text-xs text-muted-foreground">
+                  Runs this step alone, against the draft config — the workflow is not started.
+                </span>
+              </div>
               <Textarea
-                :model-value="draftNode.notes ?? ''"
-                :rows="3"
-                placeholder="Optional note about this node"
-                class="text-sm bg-white"
-                @update:model-value="(v) => patchNode({ notes: String(v) || void 0 })"
+                v-if="testInputOpen"
+                v-model="testInputDraft"
+                aria-label="Test input"
+                :rows="8"
+                spellcheck="false"
+                class="rounded-md border border-black/[0.08] ring-0 shadow-none bg-white font-mono text-xs"
               />
-              <p class="text-xs text-muted-foreground">
-                Only shown in the editor; never sent to the engine.
+              <p v-if="testError" class="text-sm text-rose-600">
+                {{ testError }}
               </p>
+              <div v-if="testLogs.length" class="max-h-48 space-y-0.5 overflow-y-auto rounded-md border border-black/[0.06] bg-white p-2">
+                <div
+                  v-for="(l, i) in testLogs"
+                  :key="i"
+                  class="font-mono text-[11px] leading-snug"
+                  :class="l.level === 'error' ? 'text-rose-600' : l.level === 'warn' ? 'text-amber-600' : 'text-slate-600'"
+                >
+                  {{ l.message }}
+                </div>
+              </div>
             </section>
-          </div>
-        </div>
-      </section>
 
-      <!-- Output pane: what this node hands downstream -->
-      <aside v-if="isNode" class="flex w-[280px] shrink-0 flex-col border-l border-black/[0.06] bg-muted/10">
-        <div class="shrink-0 border-b border-black/[0.06] px-3 py-2.5">
-          <div class="flex items-center justify-between gap-2">
-            <div class="text-sm font-semibold text-foreground">
-              Output
-            </div>
-            <div class="flex items-center rounded-md border border-black/[0.06] bg-white p-0.5">
-              <button type="button" :class="outputView === 'schema' ? segActive : segIdle" @click="outputView = 'schema'">
-                Schema
-              </button>
-              <button type="button" :disabled="!selfSample" :class="outputView === 'json' ? segActive : segIdle" @click="outputView = 'json'">
-                JSON
-              </button>
-            </div>
-          </div>
-          <p class="mt-0.5 text-xs leading-snug text-muted-foreground">
-            What downstream nodes receive from this one.
-          </p>
-        </div>
-        <div class="shrink-0 space-y-1.5 border-b border-black/[0.06] px-3 py-2">
-          <div class="flex items-center gap-2">
-            <Button
-              size="sm"
-              class="h-7 flex-1 text-xs"
-              :disabled="testRunning"
-              title="Runs this node once with the current draft config"
-              @click="runTestStep"
-            >
-              {{ testRunning ? "Testing\u2026" : "Test step" }}
-            </Button>
-            <button
-              type="button"
-              class="shrink-0 text-[11px] font-medium text-muted-foreground transition hover:text-foreground"
-              @click="toggleTestInput"
-            >
-              {{ testInputOpen ? "Hide input" : "Edit input" }}
-            </button>
-          </div>
-          <Textarea
-            v-if="testInputOpen"
-            v-model="testInputDraft"
-            :rows="5"
-            spellcheck="false"
-            class="bg-white font-mono text-[11px]"
-          />
-          <p v-if="testError" class="text-[11px] leading-snug text-rose-600">
-            {{ testError }}
-          </p>
-          <div v-if="testLogs.length" class="max-h-24 space-y-0.5 overflow-y-auto rounded-md border border-black/[0.06] bg-white p-1.5">
-            <div
-              v-for="(l, i) in testLogs"
-              :key="i"
-              class="font-mono text-[10px] leading-snug"
-              :class="l.level === 'error' ? 'text-rose-600' : l.level === 'warn' ? 'text-amber-600' : 'text-slate-600'"
-            >
-              {{ l.message }}
-            </div>
-          </div>
-        </div>
-        <div class="min-h-0 flex-1 overflow-y-auto px-3 py-3">
-          <template v-if="outputView === 'schema'">
-            <div v-for="p in selfPorts" :key="p.name" class="mb-3 space-y-1">
-              <div 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>
-              </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="chipValue(draft.id, p.name, f.name) !== null" class="min-w-0 truncate text-slate-400">: {{ chipValue(draft.id, p.name, f.name) }}</span>
+            <section class="space-y-2 border-t border-black/[0.06] pt-4">
+              <template v-if="!pinEditorOpen">
+                <div class="flex items-center gap-2">
+                  <Button variant="outline" size="sm" class="h-8" @click="openPinEditor">
+                    {{ selfPinned ? "Edit pinned sample" : "Pin sample output" }}
+                  </Button>
+                  <button
+                    v-if="selfPinned"
+                    type="button"
+                    class="text-sm font-medium text-rose-600 transition hover:text-rose-700"
+                    @click="removePin"
+                  >
+                    Unpin
+                  </button>
+                  <span class="text-xs text-muted-foreground">
+                    A pinned sample stands in for run data while you map downstream fields.
+                  </span>
                 </div>
-              </div>
-              <p v-else class="text-[11px] leading-snug text-muted-foreground">
-                No declared fields<template v-if="chipValue(draft.id, p.name) !== null">; sampled: <span class="font-mono">{{ chipValue(draft.id, p.name) }}</span></template>.
-              </p>
-            </div>
-            <p v-if="!selfPorts.length" class="text-xs leading-snug text-muted-foreground">
-              This node declares no outputs.
-            </p>
-          </template>
-          <pre v-else class="overflow-auto rounded-md border border-black/[0.06] bg-white p-2 font-mono text-[11px] leading-snug">{{ selfSampleJson }}</pre>
-        </div>
-        <div class="shrink-0 border-t border-black/[0.06] px-3 py-2">
-          <template v-if="!pinEditorOpen">
-            <div class="flex items-center gap-2">
-              <button
-                type="button"
-                class="rounded-md border border-black/[0.08] bg-white px-2 py-1 text-[11px] font-medium text-muted-foreground transition hover:bg-muted/30 hover:text-foreground"
-                @click="openPinEditor"
-              >
-                {{ selfPinned ? "Edit pinned sample" : "Pin sample output" }}
-              </button>
-              <button
-                v-if="selfPinned"
-                type="button"
-                class="text-[11px] font-medium text-rose-600 transition hover:text-rose-700"
-                @click="removePin"
-              >
-                Unpin
-              </button>
-            </div>
-            <p class="mt-1 text-[11px] leading-snug text-muted-foreground">
-              A pinned sample stands in for run data while you map downstream fields.
-            </p>
-          </template>
-          <template v-else>
-            <Textarea
-              v-model="pinDraft"
-              :rows="8"
-              spellcheck="false"
-              class="bg-white font-mono text-[11px]"
-            />
-            <p v-if="pinError" class="mt-1 text-[11px] text-amber-600">
-              {{ pinError }}
-            </p>
-            <div class="mt-1.5 flex items-center gap-2">
-              <Button size="sm" class="h-7 text-xs" @click="savePin">
-                Pin
-              </Button>
-              <Button size="sm" variant="outline" class="h-7 text-xs" @click="pinEditorOpen = false">
-                Cancel
-              </Button>
-            </div>
-          </template>
+              </template>
+              <template v-else>
+                <Textarea
+                  v-model="pinDraft"
+                  aria-label="Pinned sample output"
+                  :rows="10"
+                  spellcheck="false"
+                  class="rounded-md border border-black/[0.08] ring-0 shadow-none bg-white font-mono text-xs"
+                />
+                <p v-if="pinError" class="text-sm text-amber-600">
+                  {{ pinError }}
+                </p>
+                <div class="flex items-center gap-2">
+                  <Button size="sm" class="h-8" @click="savePin">
+                    Pin
+                  </Button>
+                  <Button size="sm" variant="outline" class="h-8" @click="pinEditorOpen = false">
+                    Cancel
+                  </Button>
+                </div>
+              </template>
+            </section>
+          </div>
         </div>
-      </aside>
+      </section>
     </div>
 
     <!-- Footer: draft semantics — nothing reaches the blob until Save -->
     <div class="flex shrink-0 items-center justify-between gap-3 border-t border-black/[0.06] px-4 py-3">
+      <!-- Quiet until reached for: a bare glyph that unfolds into its name and
+           its colour on hover or focus.
+
+           It is the rarest of the four ways to delete a node — the canvas
+           offers the card's toolbar, the context menu and the Delete key — and
+           it sits in the row the user reads to decide what happens to their
+           edits, where a third, louder option reads as one of the answers.
+           Rose carries a meaning now, too: a setting the last save refused.
+           Spending it on a footer button weakens that.
+
+           The name is on the button itself, not only in the revealed span, so
+           it reaches a screen reader without a pointer. Revealing on focus as
+           well as hover is what keeps it usable from the keyboard. The button
+           grows leftmost into empty space, so nothing else moves. -->
       <Button
         variant="ghost"
         size="sm"
-        class="h-8 text-sm text-rose-600 hover:bg-rose-500/10 hover:text-rose-700"
+        aria-label="Remove from workflow"
+        class="group h-8 gap-0 text-sm text-muted-foreground transition-colors hover:bg-rose-500/10 hover:text-rose-700 focus-visible:bg-rose-500/10 focus-visible:text-rose-700"
         @click="emit('remove')"
       >
         <Trash2 :size="13" />
-        Remove from workflow
+        <span
+          class="max-w-0 overflow-hidden whitespace-nowrap opacity-0 transition-all duration-150 group-hover:ml-1.5 group-hover:max-w-48 group-hover:opacity-100 group-focus-visible:ml-1.5 group-focus-visible:max-w-48 group-focus-visible:opacity-100"
+        >
+          Remove from workflow
+        </span>
       </Button>
       <div class="flex items-center gap-2">
         <span v-if="dirty" class="text-xs text-muted-foreground">Unsaved changes</span>