@revenexx/studio-integrations 0.1.4 → 0.2.0

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

@@ -1,6 +1,8 @@
 <script setup>
-import { computed, onMounted } from "vue";
-import { AddCircle as Plus, TrashBinMinimalistic as Trash2, CloseCircle as X } from "#solar-icons";
+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 { toast } from "vue-sonner";
 import {
   Button,
   Input,
@@ -13,112 +15,803 @@ import {
   Switch,
   Textarea
 } from "@revenexx/studio";
-import { findManifest } from "../../data/integrationNodeCatalog";
+import EventTypeCombobox from "./EventTypeCombobox.vue";
+import { NODE_CATEGORIES, findManifest } from "../../data/integrationNodeCatalog";
+import {
+  collectUpstreamNodes,
+  nodeOutputExpr,
+  portsForNode,
+  triggerPayloadExpr,
+  variableExpr
+} from "../../data/nodeInputData";
+import {
+  dataTypeOf,
+  portValuesFromStepOutput,
+  previewValue,
+  valueAtPath
+} from "../../data/nodeRunData";
 const props = defineProps({
   selection: { type: [Object, null], required: true },
-  secretKeys: { type: Array, required: true }
+  secretKeys: { type: Array, required: true },
+  variables: { type: Object, required: false },
+  upstreamOutputs: { type: Array, required: false },
+  autofocusName: { type: Boolean, required: false },
+  nodes: { type: Array, required: false },
+  edges: { type: Array, required: false },
+  triggers: { type: Array, required: false },
+  dynamicOutputs: { type: Object, required: false },
+  workflowId: { type: [Number, String], required: false }
 });
-const emit = defineEmits(["update", "close", "remove"]);
-const isNode = computed(() => !!props.selection && "nodeSlug" in props.selection);
-const { credentials, load: loadCredentials } = useIntegrationsCredentials();
-onMounted(() => {
-  void loadCredentials();
-});
-function credsOfType(slug) {
-  if (!slug) return credentials.value;
-  return credentials.value.filter((c) => c.credential_type_slug === slug);
+const emit = defineEmits(["update", "close", "remove", "navigate"]);
+function clone(v) {
+  return JSON.parse(JSON.stringify(v));
 }
-function credNeedsReauth(id) {
-  return credentials.value.some((c) => c.id === id && c.status === "needs_reauth");
+const draft = ref(clone(props.selection));
+watch(() => props.selection?.id, () => {
+  if (props.selection && props.selection.id !== draft.value.id) draft.value = clone(props.selection);
+});
+const isNode = computed(() => "nodeSlug" in draft.value);
+const draftNode = computed(() => isNode.value ? draft.value : null);
+const draftTrigger = computed(() => isNode.value ? null : draft.value);
+const dirty = computed(() => JSON.stringify(draft.value) !== JSON.stringify(props.selection));
+function save() {
+  if (dirty.value) emit("update", clone(draft.value));
+  emit("close");
 }
-const exprHint = "${{ \u2026 }} ok";
+const nameInput = ref(null);
+onMounted(() => {
+  if (!props.autofocusName) return;
+  void nextTick(() => {
+    nameInput.value?.focus();
+    nameInput.value?.select();
+  });
+});
 const manifest = computed(() => {
-  if (!isNode.value || !props.selection) return null;
-  const wn = props.selection;
-  return findManifest(wn.nodeSlug, wn.nodeVersion);
+  const wn = draftNode.value;
+  return wn ? findManifest(wn.nodeSlug, wn.nodeVersion) : null;
 });
 function labelText(v) {
   if (!v) return "";
-  return typeof v === "string" ? v : Object.values(v)[0] ?? "";
+  return typeof v === "string" ? v : v.en ?? Object.values(v)[0] ?? "";
 }
-function readConfig(key) {
-  if (!isNode.value || !props.selection) return void 0;
-  return props.selection.config?.[key];
+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;
+  return TRIGGER_LABELS[draftTrigger.value?.type ?? "manual"] + " trigger";
+});
+const subtitleText = computed(() => {
+  const wn = draftNode.value;
+  if (wn) return wn.nodeSlug + "@" + wn.nodeVersion;
+  return TRIGGER_LABELS[draftTrigger.value?.type ?? "manual"] + " trigger";
+});
+const groupLabel = computed(() => {
+  if (!isNode.value) return "Trigger";
+  const groups = manifest.value?.groups;
+  if (groups?.length) return labelText(groups[groups.length - 1]);
+  return NODE_CATEGORIES.find((c) => c.key === manifest.value?.category)?.label ?? "Node";
+});
+function writeName(name) {
+  draft.value = { ...draft.value, name };
+}
+const tab = ref("parameters");
+const showSettingsTab = computed(() => isNode.value);
+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)));
+function dependentKeys(changedKey) {
+  const fields = manifest.value?.config ?? [];
+  const out = /* @__PURE__ */ new Set();
+  const queue = [changedKey];
+  while (queue.length > 0) {
+    const dep = queue.shift();
+    for (const f of fields) {
+      if ((f.dependsOn ?? []).includes(dep) && !out.has(f.key)) {
+        out.add(f.key);
+        queue.push(f.key);
+      }
+    }
+  }
+  out.delete(changedKey);
+  return out;
 }
 function writeConfig(key, value) {
-  if (!isNode.value || !props.selection) return;
-  const wn = props.selection;
-  emit("update", { ...wn, config: { ...wn.config, [key]: value } });
+  const wn = draftNode.value;
+  if (!wn) return;
+  const next = { ...wn.config, [key]: value };
+  const cleared = dependentKeys(key);
+  for (const k of cleared) delete next[k];
+  const clearedDynamicSchema = [...cleared].some(
+    (k) => (manifest.value?.config ?? []).some((f) => f.key === k && f.type === "dynamic-schema")
+  );
+  if (clearedDynamicSchema) {
+    const staticKeys = new Set((manifest.value?.config ?? []).map((f) => f.key));
+    for (const k of Object.keys(next)) if (!staticKeys.has(k)) delete next[k];
+  }
+  wn.config = next;
 }
-function writeName(name) {
-  if (!props.selection) return;
-  emit("update", { ...props.selection, name });
+function patchNode(patch) {
+  if (!draftNode.value) return;
+  draft.value = { ...draftNode.value, ...patch };
+}
+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 {
+    await navigator.clipboard.writeText(JSON.stringify(draftNode.value.config ?? {}, null, 2));
+    toast.success("Config copied");
+  } catch {
+    toast.error("Could not copy config");
+  }
+}
+async function pasteConfig() {
+  if (!draftNode.value) return;
+  let text;
+  try {
+    text = await navigator.clipboard.readText();
+  } catch {
+    toast.error("Could not read the clipboard");
+    return;
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    toast.error("Clipboard is not valid JSON");
+    return;
+  }
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+    toast.error("Clipboard is not a JSON config object");
+    return;
+  }
+  patchNode({ config: parsed });
+  toast.success("Config pasted");
 }
 function readTriggerConfig(key) {
-  if (isNode.value || !props.selection) return void 0;
-  return props.selection.config[key];
+  return draftTrigger.value?.config[key];
 }
 function writeTriggerConfig(key, value) {
-  if (isNode.value || !props.selection) return;
-  const wt = props.selection;
-  emit("update", { ...wt, config: { ...wt.config, [key]: value } });
+  const wt = draftTrigger.value;
+  if (!wt) return;
+  patchTrigger({ config: { ...wt.config, [key]: value } });
 }
-function readArray(key) {
-  const v = readConfig(key);
-  return Array.isArray(v) ? v : [];
+const { loadForWorkflow, getSteps } = useIntegrationsRuns();
+const runData = ref(null);
+const runInfo = ref(null);
+const runLoading = ref(false);
+const runError = ref(null);
+async function loadRunData() {
+  if (!props.workflowId || runLoading.value) return;
+  runLoading.value = true;
+  runError.value = null;
+  try {
+    const { runs } = await loadForWorkflow(Number(props.workflowId), "", { perPage: 10 });
+    const source = runs.find((r) => r.status === "succeeded") ?? runs[0];
+    if (!source) {
+      runError.value = "No runs yet. Run the workflow once to sample real values.";
+      return;
+    }
+    const res = await getSteps(props.workflowId, source.id, true);
+    const map = {};
+    for (const step of res.steps ?? []) {
+      const values = portValuesFromStepOutput(step.output);
+      const existing = map[step.node_id];
+      if (!existing || Object.keys(values).length > 0 && Object.keys(existing).length === 0) {
+        map[step.node_id] = values;
+      }
+    }
+    runData.value = map;
+    runInfo.value = { id: source.id, startedAt: source.startedAt };
+  } catch (e) {
+    runError.value = e?.message ?? "Could not load run data.";
+  } finally {
+    runLoading.value = false;
+  }
 }
-function pushArrayItem(key, defaultItem) {
-  writeConfig(key, [...readArray(key), defaultItem]);
+function clearRunData() {
+  runData.value = null;
+  runInfo.value = null;
+  runError.value = null;
 }
-function removeArrayItem(key, index) {
-  const arr = readArray(key).slice();
-  arr.splice(index, 1);
-  writeConfig(key, arr);
+const pinnedSamples = ref({});
+const pinStorageKey = computed(() => `integrations.sample-outputs.${props.workflowId ?? "wf"}`);
+onMounted(() => {
+  try {
+    const raw = localStorage.getItem(pinStorageKey.value);
+    const parsed = raw ? JSON.parse(raw) : null;
+    if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+      pinnedSamples.value = parsed;
+    }
+  } catch {
+  }
+});
+function persistPins() {
+  try {
+    localStorage.setItem(pinStorageKey.value, JSON.stringify(pinnedSamples.value));
+  } catch {
+  }
+}
+const testOutputs = ref({});
+function sampleFor(nodeId) {
+  return testOutputs.value[nodeId] ?? pinnedSamples.value[nodeId] ?? runData.value?.[nodeId] ?? void 0;
+}
+function withSampledFields(ports, sample) {
+  if (!sample) return ports;
+  return ports.map((p) => {
+    const value = sample[p.name];
+    if (!value || typeof value !== "object" || Array.isArray(value)) return p;
+    const known = new Set(p.fields.map((f) => f.name));
+    const extras = Object.keys(value).filter((k) => !known.has(k)).map((name) => ({ name, dataType: dataTypeOf(value[name]) }));
+    return extras.length ? { ...p, fields: [...p.fields, ...extras] } : p;
+  });
+}
+function chipValue(nodeId, port, field) {
+  const sample = sampleFor(nodeId);
+  if (!sample || !(port in sample)) return null;
+  const v = field ? valueAtPath(sample[port], field.split(".")) : sample[port];
+  if (v === void 0) return null;
+  return previewValue(v);
+}
+const sampleContext = computed(() => {
+  const nodeOutputs = {};
+  for (const n of props.nodes ?? []) {
+    const s = sampleFor(n.id);
+    if (s) nodeOutputs[n.id] = s;
+  }
+  return {
+    nodeOutputs,
+    variables: Object.fromEntries(Object.entries(props.variables ?? {}).map(([k, v]) => [k, v.default]))
+  };
+});
+provide("integrationsSampleContext", sampleContext);
+provide("integrationsNodeNames", computed(
+  () => Object.fromEntries((props.nodes ?? []).map((n) => [n.id, labelText(n.name) || n.nodeSlug]))
+));
+const upstreamSections = computed(() => {
+  if (!isNode.value) return [];
+  return collectUpstreamNodes(draft.value.id, props.nodes ?? [], props.edges ?? []).map(({ node, direct }) => {
+    const m = findManifest(node.nodeSlug, node.nodeVersion);
+    return {
+      id: node.id,
+      name: labelText(node.name) || node.nodeSlug,
+      manifest: m,
+      direct,
+      ports: withSampledFields(portsForNode(node, m, props.dynamicOutputs?.[node.id]), sampleFor(node.id))
+    };
+  });
+});
+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 exprInsertHandler = ref(null);
+provide("integrationsExpressionInsert", exprInsertHandler);
+function onCenterFocusIn(e) {
+  const t = e.target;
+  if (t instanceof HTMLElement && t.closest(".expr-editor")) {
+    lastFocusKind.value = "editor";
+    return;
+  }
+  if (t instanceof HTMLTextAreaElement) {
+    lastField.value = t;
+    lastFocusKind.value = "native";
+    return;
+  }
+  if (t instanceof HTMLInputElement && !["number", "checkbox", "radio", "range", "file", "color"].includes(t.type)) {
+    lastField.value = t;
+    lastFocusKind.value = "native";
+  }
+}
+function insertExpression(expression) {
+  if (lastFocusKind.value === "editor" && exprInsertHandler.value) {
+    exprInsertHandler.value(expression);
+    return;
+  }
+  const el = lastField.value;
+  if (el && el.isConnected) {
+    const start = el.selectionStart ?? el.value.length;
+    const end = el.selectionEnd ?? start;
+    el.setRangeText(expression, start, end, "end");
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+    el.focus();
+    return;
+  }
+  try {
+    void navigator.clipboard?.writeText(expression);
+  } catch {
+  }
+  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";
+function onChipDragStart(e, expression) {
+  e.dataTransfer?.setData("text/plain", expression);
+  if (e.dataTransfer) e.dataTransfer.effectAllowed = "copy";
+  dragActive.value = true;
+}
+const dragActive = ref(false);
+const dropHoverEl = ref(null);
+function clearDropHover() {
+  dropHoverEl.value?.classList.remove("chip-drop-hover");
+  dropHoverEl.value = null;
+}
+function onChipDragEnd() {
+  dragActive.value = false;
+  clearDropHover();
+}
+function expressionTarget(t) {
+  if (t instanceof HTMLTextAreaElement) return t;
+  if (t instanceof HTMLInputElement && !["number", "checkbox", "radio", "range", "file", "color"].includes(t.type)) return t;
+  if (t instanceof HTMLElement) return t.closest(".expr-editor");
+  return null;
+}
+function onCenterDragEnter(e) {
+  if (!dragActive.value) return;
+  const el = expressionTarget(e.target);
+  if (!el || el === dropHoverEl.value) return;
+  clearDropHover();
+  dropHoverEl.value = el;
+  el.classList.add("chip-drop-hover");
+}
+function onCenterDragLeave(e) {
+  if (e.target === dropHoverEl.value) clearDropHover();
+}
+function onCenterDrop() {
+  clearDropHover();
+  dragActive.value = false;
+}
+const closedNodes = ref(/* @__PURE__ */ new Set());
+watch(upstreamSections, (sections) => {
+  const closed = /* @__PURE__ */ new Set();
+  for (const s of sections) {
+    if (!s.direct) closed.add(s.id);
+  }
+  closedNodes.value = closed;
+}, { immediate: true });
+function toggleNodeSection(id) {
+  const next = new Set(closedNodes.value);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  closedNodes.value = next;
 }
-function setArrayItemField(key, index, fieldKey, value) {
-  const arr = readArray(key).slice();
-  arr[index] = { ...arr[index] ?? {}, [fieldKey]: value };
-  writeConfig(key, arr);
+const inputSearch = ref("");
+const searchQuery = computed(() => inputSearch.value.trim().toLowerCase());
+function sectionClosed(id) {
+  return !searchQuery.value && closedNodes.value.has(id);
+}
+const visibleSections = computed(() => {
+  const q = searchQuery.value;
+  if (!q) return upstreamSections.value;
+  return upstreamSections.value.map((s) => {
+    if (s.name.toLowerCase().includes(q)) return s;
+    const ports = s.ports.map((p) => p.name.toLowerCase().includes(q) ? p : { ...p, fields: p.fields.filter((f) => f.name.toLowerCase().includes(q)) }).filter((p) => p.name.toLowerCase().includes(q) || p.fields.length > 0);
+    return { ...s, ports };
+  }).filter((s) => s.ports.length > 0);
+});
+const showTriggerChip = computed(() => !searchQuery.value || "trigger.payload".includes(searchQuery.value));
+const visibleVariableNames = computed(() => {
+  const q = searchQuery.value;
+  return q ? variableNames.value.filter((n) => n.toLowerCase().includes(q)) : variableNames.value;
+});
+const searchEmpty = computed(
+  () => !!searchQuery.value && !visibleSections.value.length && !showTriggerChip.value && !visibleVariableNames.value.length
+);
+function highlightSegments(label) {
+  const q = searchQuery.value;
+  if (!q) return [{ text: label, hit: false }];
+  const lower = label.toLowerCase();
+  const out = [];
+  let i = 0;
+  while (i < label.length) {
+    const idx = lower.indexOf(q, i);
+    if (idx === -1) {
+      out.push({ text: label.slice(i), hit: false });
+      break;
+    }
+    if (idx > i) out.push({ text: label.slice(i, idx), hit: false });
+    out.push({ text: label.slice(idx, idx + q.length), hit: true });
+    i = idx + q.length;
+  }
+  return out;
+}
+const TYPE_GLYPHS = {
+  string: { char: "A", cls: "text-sky-600" },
+  number: { char: "#", cls: "text-amber-600" },
+  integer: { char: "#", cls: "text-amber-600" },
+  boolean: { char: "\u2713", cls: "text-emerald-600" },
+  object: { char: "{}", cls: "text-violet-600" },
+  array: { char: "[]", cls: "text-violet-600" }
+};
+function typeGlyph(dataType) {
+  return dataType ? TYPE_GLYPHS[dataType] ?? null : null;
+}
+const sequence = computed(() => [
+  ...(props.triggers ?? []).map((t) => t.id),
+  ...(props.nodes ?? []).map((n) => n.id)
+]);
+const seqIndex = computed(() => sequence.value.indexOf(draft.value.id));
+const hasPrev = computed(() => seqIndex.value > 0);
+const hasNext = computed(() => seqIndex.value >= 0 && seqIndex.value < sequence.value.length - 1);
+function navigate(offset) {
+  const target = sequence.value[seqIndex.value + offset];
+  if (!target) return;
+  if (dirty.value) emit("update", clone(draft.value));
+  emit("navigate", target);
+}
+const outputView = ref("schema");
+const selfSample = computed(() => draftNode.value ? sampleFor(draftNode.value.id) : void 0);
+const selfPorts = computed(() => draftNode.value ? withSampledFields(portsForNode(draftNode.value, manifest.value, props.dynamicOutputs?.[draftNode.value.id]), selfSample.value) : []);
+const selfSampleJson = computed(() => selfSample.value ? JSON.stringify(selfSample.value, null, 2) : "");
+const selfPinned = computed(() => !!draftNode.value && !!pinnedSamples.value[draftNode.value.id]);
+watch(selfSample, (s) => {
+  if (!s && outputView.value === "json") outputView.value = "schema";
+});
+const pinEditorOpen = ref(false);
+const pinDraft = ref("");
+const pinError = ref(null);
+function openPinEditor() {
+  pinDraft.value = JSON.stringify(selfSample.value ?? { default: {} }, null, 2);
+  pinError.value = null;
+  pinEditorOpen.value = true;
+}
+function savePin() {
+  if (!draftNode.value) return;
+  let parsed;
+  try {
+    parsed = JSON.parse(pinDraft.value);
+  } catch {
+    pinError.value = "Not valid JSON.";
+    return;
+  }
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+    pinError.value = 'Must be an object mapping ports to payloads, e.g. { "default": { \u2026 } }.';
+    return;
+  }
+  pinnedSamples.value = { ...pinnedSamples.value, [draftNode.value.id]: parsed };
+  persistPins();
+  pinEditorOpen.value = false;
+  toast.success("Sample output pinned");
+}
+function removePin() {
+  if (!draftNode.value) return;
+  const next = { ...pinnedSamples.value };
+  delete next[draftNode.value.id];
+  pinnedSamples.value = next;
+  persistPins();
+  pinEditorOpen.value = false;
+}
+const segBase = "rounded px-1.5 py-0.5 text-[11px] font-medium transition";
+const segActive = segBase + " bg-slate-100 text-foreground";
+const segIdle = segBase + " text-muted-foreground hover:text-foreground disabled:opacity-40 disabled:pointer-events-none";
+const api = useIntegrationsApi();
+const testRunning = ref(false);
+const testError = ref(null);
+const testLogs = ref([]);
+const testInputOpen = ref(false);
+const testInputDraft = ref("");
+const primaryUpstreamSample = computed(() => {
+  const first = upstreamSections.value.find((s) => s.direct);
+  if (!first) return {};
+  const def = sampleFor(first.id)?.default;
+  return def === void 0 ? {} : def;
+});
+function defaultTestInput() {
+  return JSON.stringify({ in: primaryUpstreamSample.value }, null, 2);
+}
+function toggleTestInput() {
+  if (!testInputOpen.value && !testInputDraft.value) testInputDraft.value = defaultTestInput();
+  testInputOpen.value = !testInputOpen.value;
+}
+async function runTestStep() {
+  const wn = draftNode.value;
+  if (!wn || testRunning.value) return;
+  let inputs;
+  try {
+    const parsed = JSON.parse(testInputDraft.value.trim() || defaultTestInput());
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      testError.value = "Test input must be a JSON object.";
+      return;
+    }
+    inputs = parsed;
+  } catch {
+    testError.value = "Test input is not valid JSON.";
+    testInputOpen.value = true;
+    return;
+  }
+  testRunning.value = true;
+  testError.value = null;
+  testLogs.value = [];
+  try {
+    const res = await api.post(
+      `/nodes/${encodeURIComponent(wn.nodeSlug)}/${encodeURIComponent(wn.nodeVersion)}/execute:test`,
+      { config: wn.config ?? {}, inputs }
+    );
+    testLogs.value = res.logs ?? [];
+    testOutputs.value = {
+      ...testOutputs.value,
+      [wn.id]: res.outputs && typeof res.outputs === "object" ? res.outputs : {}
+    };
+    outputView.value = "json";
+    toast.success("Test run finished");
+  } catch (e) {
+    const body = e.body;
+    testError.value = body?.error?.message ?? body?.message ?? e?.message ?? "Test run failed.";
+    testLogs.value = body?.logs ?? [];
+  } finally {
+    testRunning.value = false;
+  }
 }
 </script>
 
 <template>
-  <aside class="flex h-full w-80 shrink-0 flex-col border-l border-black/[0.06] bg-white">
-    <template v-if="selection">
-      <div class="flex items-center justify-between border-b border-black/[0.06] px-3 py-2">
-        <div class="min-w-0">
-          <div class="text-mono text-muted-foreground">
-            {{ isNode ? "Node" : "Trigger" }}
-          </div>
-          <div class="text-sm font-semibold truncate text-foreground">
-            {{ labelText(selection.name) || (isNode ? selection.nodeSlug : selection.type) }}
-          </div>
+  <!-- Fills the editor's near-fullscreen config lightbox; the Dialog owns
+       width/height, border and the close control. -->
+  <div class="flex min-h-0 flex-1 flex-col bg-white">
+    <!-- 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 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" />
+        <component :is="triggerGlyph" v-else :size="18" />
+      </div>
+      <div class="min-w-0 flex-1">
+        <input
+          ref="nameInput"
+          :value="labelText(draft.name)"
+          :placeholder="namePlaceholder"
+          class="w-full truncate bg-transparent text-sm font-semibold text-foreground outline-none placeholder:text-muted-foreground/60"
+          @input="writeName($event.target.value)"
+        >
+        <div class="truncate font-mono text-[11px] text-muted-foreground">
+          {{ subtitleText }}
         </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>
+      <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"
+          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)"
+        >
+          <ChevronLeft :size="14" />
+        </button>
         <button
           type="button"
-          class="flex size-7 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-          @click="emit('close')"
+          :disabled="!hasNext"
+          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)"
         >
-          <X :size="14" />
+          <ChevronRight :size="14" />
         </button>
       </div>
+    </div>
 
-      <div class="flex-1 overflow-y-auto p-3 space-y-4">
-        <!-- Display name -->
-        <div class="space-y-1.5">
-          <Label class="text-mono text-muted-foreground">Display name</Label>
-          <Input
-            :model-value="labelText(selection.name)"
-            class="h-8 text-sm bg-white"
-            placeholder="Override the manifest name"
-            @update:model-value="(v) => writeName(String(v))"
-          />
+    <!-- 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">
+        <div class="shrink-0 border-b border-black/[0.06] px-3 py-2.5">
+          <div class="text-sm font-semibold text-foreground">
+            Input
+          </div>
+          <p class="mt-0.5 text-xs leading-snug text-muted-foreground">
+            Available data. Click a value to insert it into the focused field, or drag it onto one.
+          </p>
+          <div class="relative mt-2">
+            <Search :size="12" class="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+            <input
+              v-model="inputSearch"
+              type="text"
+              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]"
+            >
+          </div>
+          <div v-if="workflowId" class="mt-2 flex items-center gap-1.5">
+            <button
+              v-if="!runInfo"
+              type="button"
+              :disabled="runLoading"
+              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 disabled:opacity-50"
+              @click="loadRunData"
+            >
+              {{ runLoading ? "Loading run data\u2026" : "Use last run data" }}
+            </button>
+            <template v-else>
+              <span class="min-w-0 flex-1 truncate text-[11px] text-emerald-700">
+                Values from run #{{ runInfo.id }}
+              </span>
+              <button
+                type="button"
+                title="Clear run data"
+                class="flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:text-foreground"
+                @click="clearRunData"
+              >
+                <X :size="11" />
+              </button>
+            </template>
+          </div>
+          <p v-if="runError" class="mt-1 text-[11px] leading-snug text-amber-600">
+            {{ runError }}
+          </p>
+        </div>
+        <div class="min-h-0 flex-1 space-y-4 overflow-y-auto px-3 py-3">
+          <template v-if="isNode">
+            <!-- Upstream nodes -->
+            <div v-if="!searchQuery || visibleSections.length" class="space-y-3">
+              <div class="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+                Nodes
+              </div>
+              <p v-if="!upstreamSections.length" class="text-xs leading-snug text-muted-foreground">
+                No upstream nodes yet. Connect a node into this one to reference its output here.
+              </p>
+              <div v-for="s in visibleSections" :key="s.id" class="rounded-md border border-black/[0.06]">
+                <button
+                  type="button"
+                  class="flex w-full items-center gap-1.5 px-2 py-1.5 text-left"
+                  @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" />
+                  <span class="min-w-0 truncate text-xs font-medium text-foreground">{{ s.name }}</span>
+                  <span
+                    v-if="!s.direct"
+                    class="shrink-0 rounded bg-slate-100 px-1 py-px text-[9px] font-medium uppercase tracking-wider text-slate-500"
+                    title="Not directly connected; reachable further upstream"
+                  >
+                    upstream
+                  </span>
+                </button>
+                <div v-show="!sectionClosed(s.id)" class="space-y-2 border-t border-black/[0.06] px-2 py-2">
+                <div v-for="p in s.ports" :key="p.name" class="space-y-1 pl-0.5">
+                  <div v-if="s.ports.length > 1 || p.kind !== 'default'" class="flex items-center gap-1.5">
+                    <span class="size-1.5 rounded-full" :class="portDotClass(p.kind, p.name)" />
+                    <span class="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">{{ p.name }}</span>
+                  </div>
+                  <div class="flex flex-wrap gap-1">
+                    <button
+                      type="button"
+                      :class="chipClass"
+                      :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>
+                  </div>
+                </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Trigger payload -->
+            <div v-if="showTriggerChip" class="space-y-1.5">
+              <div class="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+                Trigger
+              </div>
+              <div class="flex flex-wrap gap-1">
+                <button
+                  type="button"
+                  :class="chipClass"
+                  :title="triggerPayloadExpr()"
+                  draggable="true"
+                  @dragstart="onChipDragStart($event, triggerPayloadExpr())"
+                  @click="insertExpression(triggerPayloadExpr())"
+                >
+                  trigger.payload
+                </button>
+              </div>
+              <p class="text-xs leading-snug text-muted-foreground">
+                The payload the run started with. Append a path for a single value, e.g. trigger.payload.orderId.
+              </p>
+            </div>
+          </template>
+
+          <p v-else class="text-xs leading-snug text-muted-foreground">
+            Triggers start the workflow, so there is no upstream data. Workflow variables are available everywhere.
+          </p>
+
+          <!-- Workflow variables -->
+          <div v-if="!searchQuery || visibleVariableNames.length" class="space-y-1.5">
+            <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">
+              <button
+                v-for="name in visibleVariableNames"
+                :key="name"
+                type="button"
+                :class="chipClass"
+                :title="variableExpr(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>
+            </div>
+            <p v-else class="text-xs leading-snug text-muted-foreground">
+              No workflow variables defined.
+            </p>
+          </div>
+
+          <p v-if="searchEmpty" class="text-xs leading-snug text-muted-foreground">
+            Nothing matches "{{ inputSearch.trim() }}". Clear the search to see all available data.
+          </p>
+        </div>
+      </aside>
+
+      <!-- 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>
 
-        <!-- Trigger config (manual / schedule / webhook) -->
-        <template v-if="!isNode">
-          <div class="space-y-3">
-            <template v-if="selection.type === 'schedule'">
+        <div
+          class="min-h-0 flex-1 overflow-y-auto p-4"
+          :class="dragActive ? 'chip-drag-live' : ''"
+          @focusin="onCenterFocusIn"
+          @dragenter="onCenterDragEnter"
+          @dragleave="onCenterDragLeave"
+          @drop="onCenterDrop"
+        >
+          <!-- Parameters: trigger config -->
+          <div v-if="!isNode && draftTrigger" class="mx-auto w-full max-w-3xl 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>
+                <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>
+            <template v-if="draftTrigger.type === 'schedule'">
               <div class="space-y-1.5">
                 <Label class="text-mono text-muted-foreground">Cron</Label>
                 <Input
@@ -138,7 +831,7 @@ function setArrayItemField(key, index, fieldKey, value) {
                 />
               </div>
             </template>
-            <template v-else-if="selection.type === 'webhook'">
+            <template v-else-if="draftTrigger.type === 'webhook'">
               <div class="space-y-1.5">
                 <Label class="text-mono text-muted-foreground">Path</Label>
                 <Input
@@ -181,13 +874,11 @@ function setArrayItemField(key, index, fieldKey, value) {
                 </Select>
               </div>
             </template>
-            <template v-else-if="selection.type === 'event'">
+            <template v-else-if="draftTrigger.type === 'event'">
               <div class="space-y-1.5">
                 <Label class="text-mono text-muted-foreground">Event</Label>
-                <Input
+                <EventTypeCombobox
                   :model-value="readTriggerConfig('event_type') ?? ''"
-                  placeholder="customer.created"
-                  class="h-8 text-sm bg-white font-mono"
                   @update:model-value="(v) => writeTriggerConfig('event_type', v)"
                 />
                 <p class="text-sm text-muted-foreground">
@@ -201,250 +892,339 @@ function setArrayItemField(key, index, fieldKey, value) {
               </p>
             </template>
           </div>
-        </template>
 
-        <!-- Node config — generated from manifest -->
-        <template v-else>
-          <div v-if="manifest?.config?.length" class="space-y-3">
-            <div
-              v-for="field in manifest.config"
-              :key="field.key"
-              class="space-y-1.5"
-            >
+          <!-- Parameters: node config, generated from the manifest -->
+          <div v-else-if="tab === 'parameters' && draftNode" class="mx-auto w-full max-w-3xl">
+            <div v-if="manifest?.config?.length" class="space-y-3">
               <div class="flex items-center justify-between">
-                <Label class="text-mono text-muted-foreground">
-                  {{ labelText(field.label) }}{{ field.required ? " *" : "" }}
-                </Label>
-                <span v-if="field.expressionAllowed" class="text-sm font-mono text-emerald-600/70">
-                  {{ exprHint }}
-                </span>
+                <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"
+                    title="Copy this node's config as JSON"
+                    @click="copyConfig"
+                  >
+                    <Copy :size="12" /> Copy
+                  </button>
+                  <button
+                    type="button"
+                    class="rounded px-1 py-0.5 text-sm text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
+                    title="Replace this node's config from a JSON object in the clipboard"
+                    @click="pasteConfig"
+                  >
+                    Paste
+                  </button>
+                </div>
               </div>
-
-              <!-- string / expression -->
-              <Input
-                v-if="['string', 'expression'].includes(field.type)"
-                :model-value="readConfig(field.key) ?? ''"
-                :placeholder="labelText(field.placeholder)"
-                class="h-8 text-sm bg-white"
-                :class="field.type === 'expression' ? 'font-mono' : ''"
-                @update:model-value="(v) => writeConfig(field.key, v)"
+              <IntegrationsNodeConfigField
+                v-for="field in parameterFields"
+                :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"
+                @set="(k, v) => writeConfig(k, v)"
               />
+              <p v-if="!parameterFields.length" class="text-sm text-muted-foreground italic">
+                All of this node's options live on the Settings tab.
+              </p>
+            </div>
+            <div v-else class="text-sm text-muted-foreground italic">
+              This node has no configuration.
+            </div>
+          </div>
 
-              <!-- number -->
-              <Input
-                v-else-if="field.type === 'number'"
-                type="number"
-                :model-value="readConfig(field.key) ?? ''"
-                class="h-8 text-sm bg-white"
-                @update:model-value="(v) => writeConfig(field.key, v === '' ? null : Number(v))"
+          <!-- 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-if="settingsFields.length" class="space-y-3">
+              <span class="text-mono text-muted-foreground">Node behavior</span>
+              <IntegrationsNodeConfigField
+                v-for="field in settingsFields"
+                :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"
+                @set="(k, v) => writeConfig(k, v)"
               />
-
-              <!-- boolean -->
-              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2 pt-1">
+            </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">
+                <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="Boolean(readConfig(field.key))"
-                  @update:model-value="(v) => writeConfig(field.key, v)"
+                  :model-value="!!draftNode.retry"
+                  @update:model-value="(v) => patchNode({ retry: v ? { maxAttempts: 3, backoffSeconds: 1, strategy: 'exponential' } : void 0 })"
                 />
-                <span class="text-sm text-muted-foreground">
-                  {{ labelText(field.description) }}
-                </span>
               </div>
-
-              <!-- select -->
-              <Select
-                v-else-if="field.type === 'select'"
-                :model-value="readConfig(field.key) ?? ''"
-                @update:model-value="(v) => writeConfig(field.key, v)"
-              >
-                <SelectTrigger class="h-8 text-sm bg-white">
-                  <SelectValue :placeholder="labelText(field.placeholder) || 'Pick one'" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem v-for="opt in field.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
-                    {{ labelText(opt.label) }}
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-
-              <!-- multiselect — pill toggles for now -->
-              <div v-else-if="field.type === 'multiselect'" class="flex flex-wrap gap-1">
-                <button
-                  v-for="opt in field.options ?? []"
-                  :key="String(opt.value)"
-                  type="button"
-                  class="rounded-md border border-black/[0.08] px-1.5 py-0.5 text-sm transition"
-                  :class="(readConfig(field.key) ?? []).includes(opt.value) ? 'bg-emerald-500/15 text-emerald-700 border-emerald-500/30' : 'bg-white text-muted-foreground hover:text-foreground'"
-                  @click="() => {
-  const current = readConfig(field.key) ?? [];
-  const has = current.includes(opt.value);
-  writeConfig(field.key, has ? current.filter((v) => v !== opt.value) : [...current, opt.value]);
-}"
-                >
-                  {{ labelText(opt.label) }}
-                </button>
+              <div v-if="draftNode.retry" class="grid grid-cols-2 gap-3 rounded-lg border border-black/[0.06] p-3">
+                <div class="space-y-1.5">
+                  <Label class="text-mono text-muted-foreground">Max attempts</Label>
+                  <Input
+                    type="number"
+                    min="1"
+                    :model-value="draftNode.retry?.maxAttempts ?? 3"
+                    class="h-8 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>
+                  <Input
+                    type="number"
+                    min="0"
+                    :model-value="draftNode.retry?.backoffSeconds ?? 0"
+                    class="h-8 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>
+                  <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">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="linear">linear backoff</SelectItem>
+                      <SelectItem value="exponential">exponential backoff</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
               </div>
+            </section>
+
+            <!-- Timeout: engine start-to-close ceiling for one attempt -->
+            <section class="space-y-1.5">
+              <Label class="text-mono text-muted-foreground">Timeout</Label>
+              <Input
+                type="number"
+                min="1"
+                max="7200"
+                placeholder="600"
+                :model-value="draftNode.timeoutSeconds ?? ''"
+                class="h-8 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">
+                Seconds per attempt before the engine cancels the node. Empty uses the default (10 minutes); maximum 2 hours.
+              </p>
+            </section>
 
-              <!-- secret-ref -->
+            <!-- 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>
               <Select
-                v-else-if="field.type === 'secret-ref'"
-                :model-value="readConfig(field.key) ?? ''"
-                @update:model-value="(v) => writeConfig(field.key, v)"
+                :model-value="draftNode.onError ?? 'fail'"
+                @update:model-value="(v) => patchNode({ onError: v === 'route' ? 'route' : void 0 })"
               >
                 <SelectTrigger class="h-8 text-sm bg-white">
-                  <SelectValue placeholder="Pick a secret" />
+                  <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem v-for="k in secretKeys" :key="k" :value="k">{{ k }}</SelectItem>
+                  <SelectItem value="fail">Fail the run</SelectItem>
+                  <SelectItem value="route">Route to error output</SelectItem>
                 </SelectContent>
               </Select>
+              <p class="text-xs text-muted-foreground">
+                Applies after the retry policy is exhausted. A Stop and Error node always fails the run.
+              </p>
+            </section>
 
-              <!-- credentials-ref — pick a credential of the required type -->
-              <template v-else-if="field.type === 'credentials-ref'">
-                <Select
-                  :model-value="readConfig(field.key) ?? ''"
-                  @update:model-value="(v) => writeConfig(field.key, v)"
-                >
-                  <SelectTrigger class="h-8 text-sm bg-white">
-                    <SelectValue placeholder="Pick a credential" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem v-for="c in credsOfType(field.credentialType)" :key="c.id" :value="c.id">
-                      {{ c.name }}
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-                <p v-if="credNeedsReauth(readConfig(field.key))" class="text-sm text-amber-600">
-                  This credential needs reconnect.
-                </p>
-                <NuxtLink to="/integrations/credentials" class="text-sm text-violet-600 hover:underline">
-                  Manage credentials →
-                </NuxtLink>
-              </template>
-
-              <!-- array of objects (e.g. headers / mappings) -->
-              <div v-else-if="field.type === 'array' && field.items?.type === 'object'" class="space-y-2">
-                <div
-                  v-for="(item, idx) in readArray(field.key)"
-                  :key="idx"
-                  class="rounded-md border border-black/[0.06] bg-muted/20 p-2 space-y-1.5"
-                >
-                  <div class="flex items-center justify-between">
-                    <span class="text-mono text-muted-foreground">
-                      #{{ idx + 1 }}
-                    </span>
-                    <button
-                      type="button"
-                      class="flex size-5 items-center justify-center rounded text-muted-foreground hover:text-rose-600"
-                      @click="removeArrayItem(field.key, idx)"
-                    >
-                      <Trash2 :size="11" />
-                    </button>
-                  </div>
-                  <div
-                    v-for="sub in field.items.properties ?? []"
-                    :key="sub.key"
-                    class="space-y-1"
-                  >
-                    <Label class="text-mono text-muted-foreground">
-                      {{ labelText(sub.label) }}
-                    </Label>
-                    <Input
-                      :model-value="item[sub.key] ?? ''"
-                      :placeholder="labelText(sub.placeholder)"
-                      class="h-7 text-sm bg-white"
-                      :class="sub.type === 'expression' ? 'font-mono' : ''"
-                      @update:model-value="(v) => setArrayItemField(field.key, idx, sub.key, v)"
-                    />
-                  </div>
-                </div>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  class="h-7 text-sm w-full"
-                  @click="pushArrayItem(field.key, Object.fromEntries((field.items?.properties ?? []).map((p) => [p.key, ''])))"
-                >
-                  <Plus :size="11" />
-                  Add row
-                </Button>
-              </div>
-
-              <!-- fallback: JSON textarea for complex types -->
+            <!-- Notes: editor-only blob field -->
+            <section class="space-y-1.5">
+              <Label class="text-mono text-muted-foreground">Notes</Label>
               <Textarea
-                v-else
-                :model-value="readConfig(field.key) === void 0 ? '' : JSON.stringify(readConfig(field.key), null, 2)"
-                rows="3"
-                class="text-sm font-mono bg-white"
-                @update:model-value="(v) => {
-  try {
-    writeConfig(field.key, v ? JSON.parse(String(v)) : void 0);
-  } catch {
-  }
-}"
+                :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 })"
               />
-
-              <p v-if="field.description" class="text-sm text-muted-foreground">
-                {{ labelText(field.description) }}
+              <p class="text-xs text-muted-foreground">
+                Only shown in the editor; never sent to the engine.
               </p>
+            </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>
-          <div v-else class="text-sm text-muted-foreground italic">
-            This node has no configuration.
+          <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>
-
-          <!-- Retry section (always available on nodes) -->
-          <div class="space-y-1.5 border-t border-black/[0.06] pt-3 mt-3">
-            <Label class="text-mono text-muted-foreground">Retry policy</Label>
-            <div class="flex items-center gap-2">
-              <Switch
-                :model-value="!!selection.retry"
-                @update:model-value="(v) => emit('update', { ...selection, retry: v ? { maxAttempts: 3, backoffSeconds: 1, strategy: 'exponential' } : void 0 })"
-              />
-              <span class="text-sm text-muted-foreground">Retry on failure</span>
+          <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>
-            <template v-if="selection.retry">
-              <div class="grid grid-cols-2 gap-2 pt-1">
-                <Input
-                  type="number"
-                  :model-value="selection.retry?.maxAttempts ?? 3"
-                  class="h-7 text-sm bg-white"
-                  @update:model-value="(v) => emit('update', { ...selection, retry: { ...selection.retry, maxAttempts: Number(v) || 1 } })"
-                />
-                <Input
-                  type="number"
-                  :model-value="selection.retry?.backoffSeconds ?? 0"
-                  class="h-7 text-sm bg-white"
-                  @update:model-value="(v) => emit('update', { ...selection, retry: { ...selection.retry, backoffSeconds: Number(v) || 0 } })"
-                />
+          </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>
-              <Select
-                :model-value="selection.retry?.strategy ?? 'exponential'"
-                @update:model-value="(v) => emit('update', { ...selection, retry: { ...selection.retry, strategy: v } })"
+              <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>
+                </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"
               >
-                <SelectTrigger class="h-7 text-sm bg-white">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="linear">linear backoff</SelectItem>
-                  <SelectItem value="exponential">exponential backoff</SelectItem>
-                </SelectContent>
-              </Select>
-            </template>
-          </div>
-        </template>
-      </div>
+                {{ 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>
+        </div>
+      </aside>
+    </div>
 
-      <div class="border-t border-black/[0.06] p-3">
-        <Button
-          variant="outline"
-          size="sm"
-          class="w-full h-7 text-sm text-rose-600 hover:text-rose-700"
-          @click="emit('remove')"
-        >
-          <Trash2 :size="12" />
-          Remove from workflow
+    <!-- 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">
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-8 text-sm text-rose-600 hover:bg-rose-500/10 hover:text-rose-700"
+        @click="emit('remove')"
+      >
+        <Trash2 :size="13" />
+        Remove from workflow
+      </Button>
+      <div class="flex items-center gap-2">
+        <span v-if="dirty" class="text-xs text-muted-foreground">Unsaved changes</span>
+        <Button variant="outline" size="sm" class="h-8" @click="emit('close')">
+          Cancel
+        </Button>
+        <Button size="sm" class="h-8" @click="save">
+          Save
         </Button>
       </div>
-    </template>
-  </aside>
+    </div>
+  </div>
 </template>
+
+<style>
+.chip-drag-live .expr-editor,.chip-drag-live input:not([type=number]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),.chip-drag-live textarea{border-color:rgba(16,185,129,.55);border-style:dashed}.chip-drop-hover{background-color:rgba(16,185,129,.06)!important;border-color:#10b981!important;border-style:solid!important;box-shadow:0 0 0 3px rgba(16,185,129,.15)}
+</style>