@octaviaflow/core 3.1.0-beta.113 → 3.1.0-beta.115

package/dist/workflow.js

@@ -62,7 +62,7 @@ import {
   useSelection,
   useViewport,
   useViewportOrNull
-} from "./chunk-NFNETL4U.js";
+} from "./chunk-LQVPNIO5.js";
 import {
   Accordion,
   Button,
@@ -70,7 +70,7 @@ import {
   Select,
   Spinner,
   Tooltip
-} from "./chunk-2VYRM5DQ.js";
+} from "./chunk-75JAQ4ZG.js";
 import {
   cn
 } from "./chunk-ZAUUGK2Y.js";
@@ -583,15 +583,7 @@ function ConfigPanel({
           t.id
         )) }),
         banner && /* @__PURE__ */ jsx("div", { className: "ods-flow-config-panel__banner", children: banner }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "ods-flow-config-panel__body",
-            role: "tabpanel",
-            style: { padding },
-            children: tabs ? activeTab?.content : children
-          }
-        ),
+        /* @__PURE__ */ jsx("div", { className: "ods-flow-config-panel__body", role: "tabpanel", style: { padding }, children: tabs ? activeTab?.content : children }),
         /* @__PURE__ */ jsxs("footer", { className: "ods-flow-config-panel__footer", children: [
           saveState && /* @__PURE__ */ jsxs(
             "span",
@@ -640,2031 +632,2008 @@ function ConfigPanel({
   );
 }
 
-// src/workflow/components/HttpActionPanel/HttpActionPanel.tsx
+// src/workflow/components/FxPanel/DataRefButton.tsx
+import { DataReferenceIcon } from "@octaviaflow/icons";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function DataRefButton({
+  active = false,
+  label = "Data ref",
+  className,
+  type = "button",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      ...rest,
+      type,
+      className: cn(
+        "ods-flow-dataref-button",
+        active && "ods-flow-dataref-button--active",
+        label == null && "ods-flow-dataref-button--icon-only",
+        className
+      ),
+      "aria-pressed": active,
+      title: active ? "Hide data references" : "Show data references",
+      children: [
+        /* @__PURE__ */ jsx2(DataReferenceIcon, { size: "sm", className: "ods-flow-dataref-button__icon" }),
+        label != null && /* @__PURE__ */ jsx2("span", { className: "ods-flow-dataref-button__label", children: label })
+      ]
+    }
+  );
+}
+
+// src/workflow/components/FxPanel/FxPanel.tsx
 import {
-  CheckmarkIcon,
-  CodeIcon,
-  CopyIcon,
-  DataViewAltIcon,
-  GlobeIcon,
-  ListIcon,
-  LockedIcon,
-  PlayIcon,
-  RenewIcon,
-  TagIcon
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CloseIcon,
+  CollapseAllIcon,
+  DraggableIcon,
+  ExpandAllIcon,
+  FunctionMathIcon,
+  SearchIcon,
+  ValueVariableIcon
 } from "@octaviaflow/icons";
-import { useCallback as useCallback4, useId, useMemo as useMemo2, useRef as useRef4, useState as useState4 } from "react";
-
-// src/workflow/components/HttpActionPanel/httpActionTypes.ts
-var HTTP_METHODS = [
-  "GET",
-  "POST",
-  "PUT",
-  "PATCH",
-  "DELETE",
-  "HEAD",
-  "OPTIONS"
-];
-var HTTP_ACTION_DEFAULTS = {
-  apiType: "rest",
-  method: "GET",
-  url: "",
-  queryParams: [],
-  headers: [],
-  bodyType: "json",
-  formData: [],
-  graphqlQuery: "",
-  graphqlVariables: {},
-  auth: { type: "none" },
-  timeout: 3e4,
-  failOnError: true,
-  followRedirects: true,
-  retry: {
-    maxAttempts: 1,
-    retryOn: [429, 500, 502, 503, 504],
-    initialDelayMs: 1e3,
-    backoffFactor: 2,
-    maxDelayMs: 3e4
-  },
-  pagination: { type: "none" },
-  extract: {},
-  responseType: "json",
-  expectedContentTypes: []
+import {
+  useMemo as useMemo2,
+  useRef as useRef4,
+  useState as useState4
+} from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var KIND_ICON = {
+  function: FunctionMathIcon,
+  variable: ValueVariableIcon
 };
-function normalizeKeyValues(raw) {
-  if (Array.isArray(raw)) {
-    return raw.map((r) => ({
-      key: String(r.key ?? ""),
-      value: String(r.value ?? ""),
-      description: r.description,
-      enabled: r.enabled !== false
-    }));
-  }
-  if (raw && typeof raw === "object") {
-    return Object.entries(raw).map(([key, value]) => ({
-      key,
-      value: String(value),
-      enabled: true
-    }));
+function countLeaves(items) {
+  let n = 0;
+  for (const it of items) {
+    if (it.children && it.children.length > 0) n += countLeaves(it.children);
+    else n += 1;
   }
-  return [];
-}
-function normalizeAuth(raw) {
-  const r = raw ?? {};
-  const rawType = r.type ?? "none";
-  const type = rawType === "oauth2" ? "bearer" : rawType;
-  return {
-    type: ["none", "basic", "bearer", "apikey"].includes(type) ? type : "none",
-    username: r.username ?? "",
-    password: r.password ?? "",
-    token: r.token ?? r.accessToken ?? "",
-    apiKeyName: r.apiKeyName ?? "X-API-Key",
-    apiKeyValue: r.apiKeyValue ?? "",
-    apiKeyLocation: r.apiKeyLocation === "query" ? "query" : "header"
-  };
-}
-function effectiveUrl(baseUrl, url) {
-  const base = (baseUrl ?? "").trim();
-  if (!base) return url;
-  return `${base.replace(/\/$/, "")}/${url.replace(/^\//, "")}`;
-}
-function serializeKeyValues(rows) {
-  return rows.filter((r) => r.key || r.value).map((r) => ({
-    key: r.key,
-    value: r.value,
-    enabled: r.enabled !== false,
-    ...r.description ? { description: r.description } : {}
-  }));
+  return n;
 }
-function validateHttpConfig(config) {
-  const errors = [];
-  const apiType = config.apiType ?? "rest";
-  if (apiType === "rest" && !config.method) errors.push("Method is required");
-  if (apiType === "graphql" && !String(config.graphqlQuery ?? "").trim()) {
-    errors.push("GraphQL query is required");
-  }
-  const hasConnection = Boolean(config.connectionId);
-  if (!config.url && !hasConnection) {
-    errors.push("URL is required");
-  } else if (config.url && !hasConnection && !config.baseUrl && !config.url.includes("{{")) {
-    try {
-      new URL(config.url);
-    } catch {
-      errors.push("Invalid URL format");
+function collectBranchIds(items, out) {
+  for (const it of items) {
+    if (it.children && it.children.length > 0) {
+      out.add(it.id);
+      collectBranchIds(it.children, out);
     }
   }
-  if (typeof config.timeout === "number" && config.timeout < 1e3) {
-    errors.push("Timeout must be at least 1000ms");
-  }
-  return { valid: errors.length === 0, errors };
-}
-function countGraphqlVariables(query) {
-  return new Set(query.match(/\$[A-Za-z_][A-Za-z0-9_]*/g) ?? []).size;
 }
-function shellTokens(input) {
-  const tokens = [];
-  const flat = input.replace(/\\\r?\n/g, " ");
-  const re = /'([^']*)'|"((?:[^"\\]|\\.)*)"|(\S+)/g;
-  let m = re.exec(flat);
-  while (m !== null) {
-    if (m[1] !== void 0) tokens.push(m[1]);
-    else if (m[2] !== void 0) tokens.push(m[2].replace(/\\(["\\])/g, "$1"));
-    else tokens.push(m[3]);
-    m = re.exec(flat);
+function flattenTree(items, depth, expandedItems, out) {
+  for (const it of items) {
+    const hasChildren = !!it.children && it.children.length > 0;
+    const expanded = hasChildren && expandedItems.has(it.id);
+    out.push({ item: it, depth, hasChildren, expanded });
+    if (expanded) flattenTree(it.children, depth + 1, expandedItems, out);
   }
-  return tokens;
 }
-function parseCurl(input) {
-  const tokens = shellTokens(input.trim());
-  if (!tokens.length || !/^curl$/i.test(tokens[0])) return null;
-  let method;
-  let url = "";
-  const headers = [];
-  const formData = [];
-  let bodyRaw;
-  let basicUser;
-  let followRedirects;
-  for (let i = 1; i < tokens.length; i++) {
-    const t = tokens[i];
-    const next = () => tokens[++i] ?? "";
-    if (t === "-X" || t === "--request") {
-      const m = next().toUpperCase();
-      if (HTTP_METHODS.includes(m)) method = m;
-    } else if (t === "-H" || t === "--header") {
-      const raw = next();
-      const idx = raw.indexOf(":");
-      if (idx > 0) {
-        headers.push({
-          key: raw.slice(0, idx).trim(),
-          value: raw.slice(idx + 1).trim(),
-          enabled: true
-        });
-      }
-    } else if (t === "-d" || t === "--data" || t === "--data-raw" || t === "--data-binary" || t === "--data-urlencode") {
-      bodyRaw = next();
-    } else if (t === "-F" || t === "--form") {
-      const raw = next();
-      const idx = raw.indexOf("=");
-      if (idx > 0) {
-        formData.push({ key: raw.slice(0, idx), value: raw.slice(idx + 1), enabled: true });
-      }
-    } else if (t === "-u" || t === "--user") {
-      basicUser = next();
-    } else if (t === "--url") {
-      url = next();
-    } else if (t === "-L" || t === "--location") {
-      followRedirects = true;
-    } else if (t.startsWith("-")) {
-      if ([
-        "-o",
-        "--output",
-        "-A",
-        "--user-agent",
-        "-e",
-        "--referer",
-        "-b",
-        "--cookie",
-        "--connect-timeout",
-        "-m",
-        "--max-time"
-      ].includes(t)) {
-        next();
-      }
-    } else if (!url) {
-      url = t;
+function collectHits(items, ancestors, q, out) {
+  for (const it of items) {
+    if (it.children && it.children.length > 0) {
+      collectHits(it.children, [...ancestors, it.label], q, out);
+    } else {
+      const path = [...ancestors, it.label].join(" / ");
+      const hay = `${it.label} ${it.description ?? ""} ${path} ${it.insertValue ?? ""}`.toLowerCase();
+      if (hay.includes(q)) out.push({ item: it, ancestors });
     }
   }
-  if (!url) return null;
-  const patch = { url, apiType: "rest" };
-  const qIdx = url.indexOf("?");
-  if (qIdx >= 0) {
-    const query = url.slice(qIdx + 1);
-    patch.url = url.slice(0, qIdx);
-    patch.queryParams = query.split("&").filter(Boolean).map((pair) => {
-      const eq = pair.indexOf("=");
-      const rawKey = eq >= 0 ? pair.slice(0, eq) : pair;
-      const rawValue = eq >= 0 ? pair.slice(eq + 1) : "";
-      const decode = (s) => {
-        try {
-          return decodeURIComponent(s.replace(/\+/g, "%20"));
-        } catch {
-          return s;
-        }
-      };
-      return { key: decode(rawKey), value: decode(rawValue), enabled: true };
-    });
-  }
-  const authHeaderIdx = headers.findIndex((h) => h.key.toLowerCase() === "authorization");
-  if (authHeaderIdx >= 0 && /^bearer\s+/i.test(headers[authHeaderIdx].value)) {
-    patch.auth = {
-      type: "bearer",
-      token: headers[authHeaderIdx].value.replace(/^bearer\s+/i, "")
-    };
-    headers.splice(authHeaderIdx, 1);
-  } else if (basicUser) {
-    const sep = basicUser.indexOf(":");
-    patch.auth = {
-      type: "basic",
-      username: sep >= 0 ? basicUser.slice(0, sep) : basicUser,
-      password: sep >= 0 ? basicUser.slice(sep + 1) : ""
-    };
-  }
-  if (headers.length) patch.headers = headers;
-  if (followRedirects !== void 0) patch.followRedirects = followRedirects;
-  if (formData.length) {
-    patch.bodyType = "form-data";
-    patch.formData = formData;
-    patch.method = method ?? "POST";
-  } else if (bodyRaw !== void 0) {
-    try {
-      patch.body = JSON.parse(bodyRaw);
-      patch.bodyType = "json";
-    } catch {
-      patch.body = bodyRaw;
-      patch.bodyType = "raw";
-    }
-    patch.method = method ?? "POST";
-  } else {
-    patch.method = method ?? "GET";
-    patch.bodyType = "none";
-  }
-  return patch;
 }
-function shellQuote(value) {
-  return `'${value.replace(/'/g, `'\\''`)}'`;
-}
-function buildCurl(config) {
-  const parts = ["curl"];
-  const method = config.apiType === "graphql" ? "POST" : config.method ?? "GET";
-  if (method !== "GET") parts.push(`-X ${method}`);
-  let url = effectiveUrl(config.baseUrl, config.url);
-  const params = normalizeKeyValues(config.queryParams).filter((p) => p.enabled !== false && p.key);
-  if (params.length) {
-    const qs = params.map((p) => `${encodeURIComponent(p.key)}=${encodeURIComponent(p.value)}`).join("&");
-    url += (url.includes("?") ? "&" : "?") + qs;
-  }
-  parts.push(shellQuote(url));
-  for (const h of normalizeKeyValues(config.headers).filter((h2) => h2.enabled !== false && h2.key)) {
-    parts.push(`-H ${shellQuote(`${h.key}: ${h.value}`)}`);
-  }
-  const auth = config.auth;
-  if (auth?.type === "bearer" && auth.token) {
-    parts.push(`-H ${shellQuote(`Authorization: Bearer ${auth.token}`)}`);
-  } else if (auth?.type === "basic" && auth.username) {
-    parts.push(`-u ${shellQuote(`${auth.username}:${auth.password ?? ""}`)}`);
-  } else if (auth?.type === "apikey" && auth.apiKeyName && auth.apiKeyValue) {
-    if ((auth.apiKeyLocation ?? "header") === "header") {
-      parts.push(`-H ${shellQuote(`${auth.apiKeyName}: ${auth.apiKeyValue}`)}`);
+function FxPanel({
+  categories,
+  title = "Data References",
+  hint = "Drag onto a field, or click an item to insert it.",
+  search: controlledSearch,
+  defaultSearch = "",
+  onSearchChange,
+  expandedCategory: controlledExpanded,
+  defaultExpandedCategory,
+  onExpandedCategoryChange,
+  onClose,
+  onItemDragStart,
+  onItemSelect,
+  width = 300,
+  emptyLabel = "No matches",
+  searchPlaceholder = "Search fields, functions & variables\u2026",
+  className,
+  style
+}) {
+  const [internalSearch, setInternalSearch] = useState4(defaultSearch);
+  const search = controlledSearch ?? internalSearch;
+  const query = search.trim().toLowerCase();
+  const setSearch = (next) => {
+    if (controlledSearch === void 0) setInternalSearch(next);
+    onSearchChange?.(next);
+  };
+  const visibleCategories = useMemo2(
+    () => categories.filter((c) => c.items.length > 0),
+    [categories]
+  );
+  const [internalCat, setInternalCat] = useState4(
+    defaultExpandedCategory !== void 0 ? defaultExpandedCategory : visibleCategories[0]?.id ?? null
+  );
+  const openCategoryId = controlledExpanded ?? internalCat;
+  const setOpenCategory = (id) => {
+    if (controlledExpanded === void 0) setInternalCat(id);
+    onExpandedCategoryChange?.(id);
+  };
+  const [expandedItems, setExpandedItems] = useState4(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const cat of categories) {
+      for (const item of cat.items) {
+        if (item.children && item.children.length > 0) ids.add(item.id);
+      }
     }
-  }
-  if (config.apiType === "graphql") {
-    const payload = JSON.stringify({
-      query: config.graphqlQuery ?? "",
-      variables: typeof config.graphqlVariables === "string" ? config.graphqlVariables : config.graphqlVariables ?? {}
+    return ids;
+  });
+  const toggleItem = (id) => {
+    setExpandedItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
     });
-    parts.push(`-H ${shellQuote("Content-Type: application/json")}`);
-    parts.push(`-d ${shellQuote(payload)}`);
-  } else if (config.bodyType === "form-data") {
-    for (const f of normalizeKeyValues(config.formData).filter(
-      (f2) => f2.enabled !== false && f2.key
-    )) {
-      parts.push(`-F ${shellQuote(`${f.key}=${f.value}`)}`);
-    }
-  } else if (config.bodyType && config.bodyType !== "none" && config.body != null) {
-    const raw = typeof config.body === "string" ? config.body : JSON.stringify(config.body);
-    if (raw) {
-      if (config.bodyType === "json") {
-        parts.push(`-H ${shellQuote("Content-Type: application/json")}`);
+  };
+  const setCategoryExpansion = (cat, expand) => {
+    const branchIds = /* @__PURE__ */ new Set();
+    collectBranchIds(cat.items, branchIds);
+    setExpandedItems((prev) => {
+      const next = new Set(prev);
+      for (const id of branchIds) {
+        if (expand) next.add(id);
+        else next.delete(id);
       }
-      parts.push(`-d ${shellQuote(raw)}`);
+      return next;
+    });
+  };
+  const [draggingId, setDraggingId] = useState4(null);
+  const [focusedId, setFocusedId] = useState4(null);
+  const hits = useMemo2(() => {
+    if (!query) return null;
+    const all = [];
+    for (const cat of visibleCategories) {
+      const out = [];
+      collectHits(cat.items, [], query, out);
+      for (const hit of out) all.push({ category: cat, hit });
     }
-  }
-  if (config.followRedirects !== false) parts.push("-L");
-  return parts.join(" ");
-}
-function inferJsonSchema(value, depth = 0) {
-  if (value === null || value === void 0) return { type: "null" };
-  if (Array.isArray(value)) {
-    if (!value.length || depth > 6) return { type: "array" };
-    return { type: "array", items: inferJsonSchema(value[0], depth + 1) };
-  }
-  if (typeof value === "object") {
-    if (depth > 6) return { type: "object" };
-    const properties = {};
-    for (const [k, v] of Object.entries(value)) {
-      properties[k] = inferJsonSchema(v, depth + 1);
+    return all;
+  }, [query, visibleCategories]);
+  const handleDragStart = (item, category) => (e) => {
+    setDraggingId(item.id);
+    if (onItemDragStart) {
+      onItemDragStart(item, category, e);
+    } else if (item.insertValue) {
+      e.dataTransfer.setData("text/plain", item.insertValue);
+      e.dataTransfer.setData("application/x-fx-insert", item.insertValue);
+      e.dataTransfer.setData("application/x-fx-type", category.kind ?? "function");
+      e.dataTransfer.effectAllowed = "copy";
     }
-    return { type: "object", properties };
-  }
-  return { type: typeof value };
-}
-function countSchemaPaths(schema, depth = 0) {
-  if (!schema || typeof schema !== "object" || depth > 8) return 0;
-  const s = schema;
-  let count = 0;
-  if (s.type === "object" && s.properties) {
-    for (const child of Object.values(s.properties)) {
-      count += 1 + countSchemaPaths(child, depth + 1);
-    }
-  } else if (s.type === "array" && s.items) {
-    count += countSchemaPaths(s.items, depth + 1);
-  }
-  return count;
-}
-function statusTone(status) {
-  if (status < 300) return "success";
-  if (status < 400) return "info";
-  if (status < 500) return "warning";
-  return "error";
-}
-function formatBytes(size) {
-  return size < 1024 ? `${size} B` : `${(size / 1024).toFixed(1)} KB`;
-}
-
-// src/workflow/components/HttpActionPanel/HttpActionPanel.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function toPairs(rows) {
-  return rows.map((r) => ({
-    key: r.key,
-    value: r.value,
-    enabled: r.enabled !== false,
-    description: r.description
-  }));
-}
-function textOf(raw) {
-  if (typeof raw === "string") return raw;
-  if (raw == null) return "";
-  try {
-    return JSON.stringify(raw, null, 2);
-  } catch {
-    return "";
-  }
-}
-function HttpActionPanel({
-  value,
-  onChange,
-  disabled = false,
-  connections,
-  connectionsLoading = false,
-  onSendPreview,
-  className
-}) {
-  const uid = useId();
-  const cfgRef = useRef4({
-    ...HTTP_ACTION_DEFAULTS,
-    ...value,
-    queryParams: normalizeKeyValues(value?.queryParams),
-    headers: normalizeKeyValues(value?.headers),
-    formData: normalizeKeyValues(value?.formData),
-    auth: normalizeAuth(value?.auth),
-    retry: {
-      ...HTTP_ACTION_DEFAULTS.retry,
-      ...value?.retry
-    },
-    pagination: {
-      ...HTTP_ACTION_DEFAULTS.pagination,
-      ...value?.pagination
-    }
-  });
-  const [, force] = useState4(0);
-  const emit = useCallback4(
-    (patch) => {
-      cfgRef.current = { ...cfgRef.current, ...patch };
-      force((n) => n + 1);
-      onChange?.(cfgRef.current);
-    },
-    [onChange]
-  );
-  const cfg = cfgRef.current;
-  const connectionId = cfg.connectionId ?? "";
-  const selectedConnection = connections?.find((c) => c.id === connectionId) ?? null;
-  const endpoints = selectedConnection?.endpoints ?? [];
-  const method = cfg.method ?? "GET";
-  const url = cfg.url ?? "";
-  const baseUrl = cfg.baseUrl ?? "";
-  const fullUrl = connectionId ? url : effectiveUrl(baseUrl, url);
-  const queryParams = normalizeKeyValues(cfg.queryParams);
-  const headers = normalizeKeyValues(cfg.headers);
-  const formData = normalizeKeyValues(cfg.formData);
-  const auth = normalizeAuth(cfg.auth);
-  const retry = cfg.retry ?? HTTP_ACTION_DEFAULTS.retry;
-  const pagination = cfg.pagination ?? { type: "none" };
-  const responseType = cfg.responseType ?? "json";
-  const [bodyText, setBodyText] = useState4(() => textOf(cfg.body));
-  const [bodyError, setBodyError] = useState4();
-  const [gqlVarsText, setGqlVarsText] = useState4(() => textOf(cfg.graphqlVariables));
-  const [gqlVarsError, setGqlVarsError] = useState4();
-  const [retryOnText, setRetryOnText] = useState4(() => (retry?.retryOn ?? []).join(", "));
-  const [expectedCtText, setExpectedCtText] = useState4(
-    () => (cfg.expectedContentTypes ?? []).join(", ")
-  );
-  const [urlError, setUrlError] = useState4();
-  const [extractRows, setExtractRows] = useState4(
-    () => Object.entries(cfg.extract ?? {}).map(([key, v]) => ({ key, value: v, enabled: true }))
-  );
-  const [curlOpen, setCurlOpen] = useState4(false);
-  const [curlText, setCurlText] = useState4("");
-  const [curlError, setCurlError] = useState4();
-  const [copiedCurl, setCopiedCurl] = useState4(false);
-  const [copiedResult, setCopiedResult] = useState4(false);
-  const [copiedSection, setCopiedSection] = useState4(null);
-  const applyCurl = () => {
-    const patch = parseCurl(curlText);
-    if (!patch) {
-      setCurlError(
-        "That doesn't look like a cURL command \u2014 it should start with `curl` and include a URL."
-      );
-      return;
-    }
-    setCurlError(void 0);
-    setCurlText("");
-    setCurlOpen(false);
-    setBodyText(textOf(patch.body));
-    setBodyError(void 0);
-    emit({ ...patch, connectionId: void 0, baseUrl: void 0 });
-  };
-  const copyCurl = async () => {
-    try {
-      await navigator.clipboard?.writeText(buildCurl(cfg));
-      setCopiedCurl(true);
-      setTimeout(() => setCopiedCurl(false), 1600);
-    } catch {
+  };
+  const listRef = useRef4(null);
+  const focusRow = (id) => {
+    setFocusedId(id);
+    requestAnimationFrame(() => {
+      listRef.current?.querySelector(`[data-fx-row="${CSS.escape(id)}"]`)?.focus();
+    });
+  };
+  const onRowKeyDown = (e, rows, row, category) => {
+    const idx = rows.findIndex((r) => r.item.id === row.item.id);
+    if (idx < 0) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (idx < rows.length - 1) focusRow(rows[idx + 1].item.id);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (idx > 0) focusRow(rows[idx - 1].item.id);
+        break;
+      case "ArrowRight":
+        if (row.hasChildren) {
+          e.preventDefault();
+          if (!row.expanded) toggleItem(row.item.id);
+          else if (idx < rows.length - 1) focusRow(rows[idx + 1].item.id);
+        }
+        break;
+      case "ArrowLeft":
+        if (row.hasChildren && row.expanded) {
+          e.preventDefault();
+          toggleItem(row.item.id);
+        } else {
+          for (let i = idx - 1; i >= 0; i--) {
+            if (rows[i].depth < row.depth) {
+              e.preventDefault();
+              focusRow(rows[i].item.id);
+              break;
+            }
+          }
+        }
+        break;
+      case "Home":
+        e.preventDefault();
+        if (rows.length) focusRow(rows[0].item.id);
+        break;
+      case "End":
+        e.preventDefault();
+        if (rows.length) focusRow(rows[rows.length - 1].item.id);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (row.hasChildren) toggleItem(row.item.id);
+        else onItemSelect?.(row.item, category);
+        break;
+      default:
+        break;
     }
   };
-  const copyResult = async () => {
-    if (preview.phase !== "success") return;
-    const r = preview.response;
-    const bundle = {
-      request: {
-        method: cfg.apiType === "graphql" ? "POST" : method,
-        url: connectionId ? `${selectedConnection?.name ?? connectionId} \xB7 ${url}` : fullUrl
+  const searchRows = useMemo2(
+    () => hits ? hits.map(({ hit }) => ({
+      item: hit.item,
+      depth: 0,
+      hasChildren: false,
+      expanded: false
+    })) : [],
+    [hits]
+  );
+  const renderRow = (row, category, rows, crumb) => {
+    const { item, depth, hasChildren, expanded } = row;
+    const mono = category.kind === "function";
+    const draggable = !!item.insertValue;
+    const isFocused = focusedId === item.id;
+    const showsReference = !!item.insertValue && !item.insertValue.trim().startsWith("ods://");
+    const tip = /* @__PURE__ */ jsxs3("span", { className: "ods-flow-fx-panel__tip", children: [
+      /* @__PURE__ */ jsxs3("span", { className: "ods-flow-fx-panel__tip-head", children: [
+        /* @__PURE__ */ jsx3(
+          "span",
+          {
+            className: cn(
+              "ods-flow-fx-panel__tip-label",
+              mono && "ods-flow-fx-panel__tip-label--mono"
+            ),
+            children: item.label
+          }
+        ),
+        item.valueType && /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__tip-type", children: item.valueType })
+      ] }),
+      item.description && /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__tip-desc", children: item.description }),
+      showsReference && /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__tip-ref", children: item.insertValue })
+    ] });
+    return /* @__PURE__ */ jsx3(
+      Tooltip,
+      {
+        content: tip,
+        position: "left",
+        disabled: !item.description && !showsReference,
+        children: /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            "data-fx-row": item.id,
+            className: cn(
+              "ods-flow-fx-panel__row",
+              hasChildren ? "ods-flow-fx-panel__row--branch" : "ods-flow-fx-panel__row--leaf",
+              draggingId === item.id && "ods-flow-fx-panel__row--dragging",
+              isFocused && "ods-flow-fx-panel__row--focused"
+            ),
+            role: "treeitem",
+            "aria-expanded": hasChildren ? expanded : void 0,
+            "aria-level": depth + 1,
+            tabIndex: isFocused || focusedId === null && rows[0]?.item.id === item.id ? 0 : -1,
+            draggable,
+            onDragStart: draggable ? handleDragStart(item, category) : void 0,
+            onDragEnd: () => setDraggingId(null),
+            onFocus: () => setFocusedId(item.id),
+            onKeyDown: (e) => onRowKeyDown(e, rows, row, category),
+            onClick: () => {
+              if (hasChildren) toggleItem(item.id);
+              else onItemSelect?.(item, category);
+            },
+            children: [
+              Array.from({ length: depth }, (_, i) => /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__indent", "aria-hidden": "true" }, i)),
+              hasChildren ? /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__twisty", "aria-hidden": "true", children: expanded ? /* @__PURE__ */ jsx3(ChevronDownIcon, { size: "sm" }) : /* @__PURE__ */ jsx3(ChevronRightIcon, { size: "sm" }) }) : /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__grip", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(DraggableIcon, { size: "sm" }) }),
+              /* @__PURE__ */ jsxs3("span", { className: "ods-flow-fx-panel__row-main", children: [
+                /* @__PURE__ */ jsxs3("span", { className: "ods-flow-fx-panel__row-line", children: [
+                  mono ? /* @__PURE__ */ jsx3("code", { className: "ods-flow-fx-panel__row-label ods-flow-fx-panel__row-label--mono", children: item.label }) : /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__row-label", children: item.label }),
+                  item.valueType && /* @__PURE__ */ jsx3(
+                    "span",
+                    {
+                      className: cn(
+                        "ods-flow-fx-panel__type",
+                        `ods-flow-fx-panel__type--${item.valueType}`
+                      ),
+                      children: item.valueType
+                    }
+                  )
+                ] }),
+                (item.description || crumb) && /* @__PURE__ */ jsxs3("span", { className: "ods-flow-fx-panel__row-sub", children: [
+                  crumb && /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__crumb", children: crumb }),
+                  item.description
+                ] })
+              ] })
+            ]
+          }
+        )
       },
-      response: {
-        status: r.status,
-        statusText: r.statusText,
-        ok: r.ok,
-        durationMs: r.duration,
-        sizeBytes: r.size,
-        headers: r.headers,
-        body: r.body
-      }
-    };
-    try {
-      await navigator.clipboard?.writeText(JSON.stringify(bundle, null, 2));
-      setCopiedResult(true);
-      setTimeout(() => setCopiedResult(false), 1600);
-    } catch {
-    }
-  };
-  const copySection = async (text, key) => {
-    try {
-      await navigator.clipboard?.writeText(text);
-      setCopiedSection(key);
-      setTimeout(() => setCopiedSection(null), 1600);
-    } catch {
-    }
+      item.id
+    );
   };
-  const sectionCopyButton = (text, key, label) => /* @__PURE__ */ jsx2(
-    Button,
+  return /* @__PURE__ */ jsxs3(
+    "aside",
     {
-      variant: "ghost",
-      size: "sm",
-      "aria-label": copiedSection === key ? `${label} copied` : `Copy ${label}`,
-      leftIcon: copiedSection === key ? /* @__PURE__ */ jsx2(CheckmarkIcon, { size: "sm" }) : /* @__PURE__ */ jsx2(CopyIcon, { size: "sm" }),
-      className: cn(copiedSection === key && "ods-http-panel__copy-done"),
-      onClick: () => {
-        void copySection(text, key);
-      }
-    }
-  );
-  const validateUrl = (nextUrl, nextBase, hasConnection) => {
-    if (!nextUrl && !nextBase && !hasConnection) {
-      setUrlError("URL is required");
-      return;
-    }
-    if (!nextUrl || hasConnection || nextBase || nextUrl.includes("{{")) {
-      setUrlError(void 0);
-      return;
-    }
-    try {
-      new URL(nextUrl);
-      setUrlError(void 0);
-    } catch {
-      setUrlError("URL does not look valid");
-    }
-  };
-  const bodyMode = cfg.apiType === "graphql" ? "graphql" : cfg.bodyType ?? "json";
-  const gqlVarCount = useMemo2(
-    () => countGraphqlVariables(cfg.graphqlQuery ?? ""),
-    [cfg.graphqlQuery]
-  );
-  const handleBodyMode = (next) => {
-    if (next === "graphql") {
-      emit(method === "GET" ? { apiType: "graphql", method: "POST" } : { apiType: "graphql" });
-      return;
+      className: cn("ods-flow-fx-panel", className),
+      style: { width, ...style },
+      "aria-label": typeof title === "string" ? title : "Data References",
+      children: [
+        /* @__PURE__ */ jsxs3("header", { className: "ods-flow-fx-panel__header", children: [
+          /* @__PURE__ */ jsx3("h3", { className: "ods-flow-fx-panel__title", children: title }),
+          onClose && /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "ods-flow-fx-panel__close",
+              onClick: onClose,
+              "aria-label": "Close data references",
+              children: /* @__PURE__ */ jsx3(CloseIcon, { size: "sm" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "ods-flow-fx-panel__search", children: [
+          /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__search-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(SearchIcon, { size: "sm" }) }),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "text",
+              className: "ods-flow-fx-panel__search-input",
+              placeholder: searchPlaceholder,
+              "aria-label": "Search fields, functions and variables",
+              value: search,
+              onChange: (e) => setSearch(e.target.value)
+            }
+          ),
+          search && /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "ods-flow-fx-panel__search-clear",
+              onClick: () => setSearch(""),
+              "aria-label": "Clear search",
+              children: /* @__PURE__ */ jsx3(CloseIcon, { size: "sm" })
+            }
+          )
+        ] }),
+        hint && !query && /* @__PURE__ */ jsx3("p", { className: "ods-flow-fx-panel__hint", children: hint }),
+        /* @__PURE__ */ jsxs3("div", { className: "ods-flow-fx-panel__list", ref: listRef, role: "tree", children: [
+          query && hits && (hits.length > 0 ? /* @__PURE__ */ jsxs3("div", { className: "ods-flow-fx-panel__results", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "ods-flow-fx-panel__results-count", children: [
+              hits.length,
+              " ",
+              hits.length === 1 ? "match" : "matches"
+            ] }),
+            hits.map(
+              ({ category, hit }, i) => renderRow(
+                searchRows[i],
+                category,
+                searchRows,
+                hit.ancestors.length ? hit.ancestors.join(" / ") : category.label
+              )
+            )
+          ] }) : /* @__PURE__ */ jsx3("div", { className: "ods-flow-fx-panel__empty", children: emptyLabel })),
+          !query && visibleCategories.map((cat) => {
+            const isOpen = openCategoryId === cat.id;
+            const kind = cat.kind ?? "function";
+            const KindIcon = KIND_ICON[kind];
+            const branchIds = /* @__PURE__ */ new Set();
+            collectBranchIds(cat.items, branchIds);
+            const hasTree = branchIds.size > 0;
+            const rows = [];
+            if (isOpen) flattenTree(cat.items, 0, expandedItems, rows);
+            const allExpanded = hasTree && [...branchIds].every((id) => expandedItems.has(id));
+            return /* @__PURE__ */ jsxs3("div", { className: "ods-flow-fx-panel__category", children: [
+              /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  className: cn(
+                    "ods-flow-fx-panel__cat-header",
+                    isOpen && "ods-flow-fx-panel__cat-header--open"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs3(
+                      "button",
+                      {
+                        type: "button",
+                        className: "ods-flow-fx-panel__cat-toggle",
+                        "aria-expanded": isOpen,
+                        onClick: () => setOpenCategory(isOpen ? null : cat.id),
+                        children: [
+                          /* @__PURE__ */ jsx3(
+                            ChevronRightIcon,
+                            {
+                              size: "sm",
+                              className: cn(
+                                "ods-flow-fx-panel__chevron",
+                                isOpen && "ods-flow-fx-panel__chevron--open"
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs3(
+                            "span",
+                            {
+                              className: cn(
+                                "ods-flow-fx-panel__badge",
+                                `ods-flow-fx-panel__badge--${kind}`
+                              ),
+                              children: [
+                                /* @__PURE__ */ jsx3(KindIcon, { size: "sm", className: "ods-flow-fx-panel__badge-icon" }),
+                                cat.label
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__count", children: countLeaves(cat.items) })
+                        ]
+                      }
+                    ),
+                    isOpen && hasTree && /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        type: "button",
+                        className: "ods-flow-fx-panel__cat-action",
+                        "aria-label": allExpanded ? "Collapse all" : "Expand all",
+                        title: allExpanded ? "Collapse all" : "Expand all",
+                        onClick: () => setCategoryExpansion(cat, !allExpanded),
+                        children: allExpanded ? /* @__PURE__ */ jsx3(CollapseAllIcon, { size: "sm" }) : /* @__PURE__ */ jsx3(ExpandAllIcon, { size: "sm" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              isOpen && /* @__PURE__ */ jsx3("div", { className: "ods-flow-fx-panel__rows", role: "group", "aria-label": cat.label, children: rows.map((row) => renderRow(row, cat, rows)) })
+            ] }, cat.id);
+          })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/workflow/components/HttpActionPanel/HttpActionPanel.tsx
+import {
+  CheckmarkIcon,
+  CodeIcon,
+  CopyIcon,
+  DataViewAltIcon,
+  GlobeIcon,
+  ListIcon,
+  LockedIcon,
+  PlayIcon,
+  RenewIcon,
+  TagIcon
+} from "@octaviaflow/icons";
+import { useCallback as useCallback4, useId, useMemo as useMemo3, useRef as useRef5, useState as useState5 } from "react";
+
+// src/workflow/components/HttpActionPanel/httpActionTypes.ts
+var HTTP_METHODS = [
+  "GET",
+  "POST",
+  "PUT",
+  "PATCH",
+  "DELETE",
+  "HEAD",
+  "OPTIONS"
+];
+var HTTP_ACTION_DEFAULTS = {
+  apiType: "rest",
+  method: "GET",
+  url: "",
+  queryParams: [],
+  headers: [],
+  bodyType: "json",
+  formData: [],
+  graphqlQuery: "",
+  graphqlVariables: {},
+  auth: { type: "none" },
+  timeout: 3e4,
+  failOnError: true,
+  followRedirects: true,
+  retry: {
+    maxAttempts: 1,
+    retryOn: [429, 500, 502, 503, 504],
+    initialDelayMs: 1e3,
+    backoffFactor: 2,
+    maxDelayMs: 3e4
+  },
+  pagination: { type: "none" },
+  extract: {},
+  responseType: "json",
+  expectedContentTypes: []
+};
+function normalizeKeyValues(raw) {
+  if (Array.isArray(raw)) {
+    return raw.map((r) => ({
+      key: String(r.key ?? ""),
+      value: String(r.value ?? ""),
+      description: r.description,
+      enabled: r.enabled !== false
+    }));
+  }
+  if (raw && typeof raw === "object") {
+    return Object.entries(raw).map(([key, value]) => ({
+      key,
+      value: String(value),
+      enabled: true
+    }));
+  }
+  return [];
+}
+function normalizeAuth(raw) {
+  const r = raw ?? {};
+  const rawType = r.type ?? "none";
+  const type = rawType === "oauth2" ? "bearer" : rawType;
+  return {
+    type: ["none", "basic", "bearer", "apikey"].includes(type) ? type : "none",
+    username: r.username ?? "",
+    password: r.password ?? "",
+    token: r.token ?? r.accessToken ?? "",
+    apiKeyName: r.apiKeyName ?? "X-API-Key",
+    apiKeyValue: r.apiKeyValue ?? "",
+    apiKeyLocation: r.apiKeyLocation === "query" ? "query" : "header"
+  };
+}
+function effectiveUrl(baseUrl, url) {
+  const base = (baseUrl ?? "").trim();
+  if (!base) return url;
+  return `${base.replace(/\/$/, "")}/${url.replace(/^\//, "")}`;
+}
+function serializeKeyValues(rows) {
+  return rows.filter((r) => r.key || r.value).map((r) => ({
+    key: r.key,
+    value: r.value,
+    enabled: r.enabled !== false,
+    ...r.description ? { description: r.description } : {}
+  }));
+}
+function validateHttpConfig(config) {
+  const errors = [];
+  const apiType = config.apiType ?? "rest";
+  if (apiType === "rest" && !config.method) errors.push("Method is required");
+  if (apiType === "graphql" && !String(config.graphqlQuery ?? "").trim()) {
+    errors.push("GraphQL query is required");
+  }
+  const hasConnection = Boolean(config.connectionId);
+  if (!config.url && !hasConnection) {
+    errors.push("URL is required");
+  } else if (config.url && !hasConnection && !config.baseUrl && !config.url.includes("{{")) {
+    try {
+      new URL(config.url);
+    } catch {
+      errors.push("Invalid URL format");
+    }
+  }
+  if (typeof config.timeout === "number" && config.timeout < 1e3) {
+    errors.push("Timeout must be at least 1000ms");
+  }
+  return { valid: errors.length === 0, errors };
+}
+function countGraphqlVariables(query) {
+  return new Set(query.match(/\$[A-Za-z_][A-Za-z0-9_]*/g) ?? []).size;
+}
+function shellTokens(input) {
+  const tokens = [];
+  const flat = input.replace(/\\\r?\n/g, " ");
+  const re = /'([^']*)'|"((?:[^"\\]|\\.)*)"|(\S+)/g;
+  let m = re.exec(flat);
+  while (m !== null) {
+    if (m[1] !== void 0) tokens.push(m[1]);
+    else if (m[2] !== void 0) tokens.push(m[2].replace(/\\(["\\])/g, "$1"));
+    else tokens.push(m[3]);
+    m = re.exec(flat);
+  }
+  return tokens;
+}
+function parseCurl(input) {
+  const tokens = shellTokens(input.trim());
+  if (!tokens.length || !/^curl$/i.test(tokens[0])) return null;
+  let method;
+  let url = "";
+  const headers = [];
+  const formData = [];
+  let bodyRaw;
+  let basicUser;
+  let followRedirects;
+  for (let i = 1; i < tokens.length; i++) {
+    const t = tokens[i];
+    const next = () => tokens[++i] ?? "";
+    if (t === "-X" || t === "--request") {
+      const m = next().toUpperCase();
+      if (HTTP_METHODS.includes(m)) method = m;
+    } else if (t === "-H" || t === "--header") {
+      const raw = next();
+      const idx = raw.indexOf(":");
+      if (idx > 0) {
+        headers.push({
+          key: raw.slice(0, idx).trim(),
+          value: raw.slice(idx + 1).trim(),
+          enabled: true
+        });
+      }
+    } else if (t === "-d" || t === "--data" || t === "--data-raw" || t === "--data-binary" || t === "--data-urlencode") {
+      bodyRaw = next();
+    } else if (t === "-F" || t === "--form") {
+      const raw = next();
+      const idx = raw.indexOf("=");
+      if (idx > 0) {
+        formData.push({ key: raw.slice(0, idx), value: raw.slice(idx + 1), enabled: true });
+      }
+    } else if (t === "-u" || t === "--user") {
+      basicUser = next();
+    } else if (t === "--url") {
+      url = next();
+    } else if (t === "-L" || t === "--location") {
+      followRedirects = true;
+    } else if (t.startsWith("-")) {
+      if ([
+        "-o",
+        "--output",
+        "-A",
+        "--user-agent",
+        "-e",
+        "--referer",
+        "-b",
+        "--cookie",
+        "--connect-timeout",
+        "-m",
+        "--max-time"
+      ].includes(t)) {
+        next();
+      }
+    } else if (!url) {
+      url = t;
+    }
+  }
+  if (!url) return null;
+  const patch = { url, apiType: "rest" };
+  const qIdx = url.indexOf("?");
+  if (qIdx >= 0) {
+    const query = url.slice(qIdx + 1);
+    patch.url = url.slice(0, qIdx);
+    patch.queryParams = query.split("&").filter(Boolean).map((pair) => {
+      const eq = pair.indexOf("=");
+      const rawKey = eq >= 0 ? pair.slice(0, eq) : pair;
+      const rawValue = eq >= 0 ? pair.slice(eq + 1) : "";
+      const decode = (s) => {
+        try {
+          return decodeURIComponent(s.replace(/\+/g, "%20"));
+        } catch {
+          return s;
+        }
+      };
+      return { key: decode(rawKey), value: decode(rawValue), enabled: true };
+    });
+  }
+  const authHeaderIdx = headers.findIndex((h) => h.key.toLowerCase() === "authorization");
+  if (authHeaderIdx >= 0 && /^bearer\s+/i.test(headers[authHeaderIdx].value)) {
+    patch.auth = {
+      type: "bearer",
+      token: headers[authHeaderIdx].value.replace(/^bearer\s+/i, "")
+    };
+    headers.splice(authHeaderIdx, 1);
+  } else if (basicUser) {
+    const sep = basicUser.indexOf(":");
+    patch.auth = {
+      type: "basic",
+      username: sep >= 0 ? basicUser.slice(0, sep) : basicUser,
+      password: sep >= 0 ? basicUser.slice(sep + 1) : ""
+    };
+  }
+  if (headers.length) patch.headers = headers;
+  if (followRedirects !== void 0) patch.followRedirects = followRedirects;
+  if (formData.length) {
+    patch.bodyType = "form-data";
+    patch.formData = formData;
+    patch.method = method ?? "POST";
+  } else if (bodyRaw !== void 0) {
+    try {
+      patch.body = JSON.parse(bodyRaw);
+      patch.bodyType = "json";
+    } catch {
+      patch.body = bodyRaw;
+      patch.bodyType = "raw";
+    }
+    patch.method = method ?? "POST";
+  } else {
+    patch.method = method ?? "GET";
+    patch.bodyType = "none";
+  }
+  return patch;
+}
+function shellQuote(value) {
+  return `'${value.replace(/'/g, `'\\''`)}'`;
+}
+function buildCurl(config) {
+  const parts = ["curl"];
+  const method = config.apiType === "graphql" ? "POST" : config.method ?? "GET";
+  if (method !== "GET") parts.push(`-X ${method}`);
+  let url = effectiveUrl(config.baseUrl, config.url);
+  const params = normalizeKeyValues(config.queryParams).filter((p) => p.enabled !== false && p.key);
+  if (params.length) {
+    const qs = params.map((p) => `${encodeURIComponent(p.key)}=${encodeURIComponent(p.value)}`).join("&");
+    url += (url.includes("?") ? "&" : "?") + qs;
+  }
+  parts.push(shellQuote(url));
+  for (const h of normalizeKeyValues(config.headers).filter((h2) => h2.enabled !== false && h2.key)) {
+    parts.push(`-H ${shellQuote(`${h.key}: ${h.value}`)}`);
+  }
+  const auth = config.auth;
+  if (auth?.type === "bearer" && auth.token) {
+    parts.push(`-H ${shellQuote(`Authorization: Bearer ${auth.token}`)}`);
+  } else if (auth?.type === "basic" && auth.username) {
+    parts.push(`-u ${shellQuote(`${auth.username}:${auth.password ?? ""}`)}`);
+  } else if (auth?.type === "apikey" && auth.apiKeyName && auth.apiKeyValue) {
+    if ((auth.apiKeyLocation ?? "header") === "header") {
+      parts.push(`-H ${shellQuote(`${auth.apiKeyName}: ${auth.apiKeyValue}`)}`);
+    }
+  }
+  if (config.apiType === "graphql") {
+    const payload = JSON.stringify({
+      query: config.graphqlQuery ?? "",
+      variables: typeof config.graphqlVariables === "string" ? config.graphqlVariables : config.graphqlVariables ?? {}
+    });
+    parts.push(`-H ${shellQuote("Content-Type: application/json")}`);
+    parts.push(`-d ${shellQuote(payload)}`);
+  } else if (config.bodyType === "form-data") {
+    for (const f of normalizeKeyValues(config.formData).filter(
+      (f2) => f2.enabled !== false && f2.key
+    )) {
+      parts.push(`-F ${shellQuote(`${f.key}=${f.value}`)}`);
     }
-    emit({ apiType: "rest", bodyType: next });
-  };
-  const [preview, setPreview] = useState4({ phase: "idle" });
-  const [schemaInfo, setSchemaInfo] = useState4(
-    null
-  );
-  const lastSchemaKey = useRef4("");
-  const inferAndEmitSchema = useCallback4(
-    (response, forceRefresh = false) => {
-      if (responseType === "binary") return;
-      const snapshot = {
-        status: response.status,
-        statusText: response.statusText,
-        ok: response.ok,
-        headers: response.headers,
-        body: response.body,
-        duration: response.duration,
-        attempts: 1,
-        extracted: {}
-      };
-      const inferred = inferJsonSchema(snapshot);
-      const key = JSON.stringify(inferred);
-      if (!forceRefresh && key === lastSchemaKey.current) return;
-      lastSchemaKey.current = key;
-      emit({ _outputSchema: inferred });
-      const bodySchema = inferred.properties?.body;
-      const topKeys = Object.keys(bodySchema?.properties ?? inferred.properties ?? {});
-      setSchemaInfo({ pathCount: countSchemaPaths(inferred), topKeys });
+  } else if (config.bodyType && config.bodyType !== "none" && config.body != null) {
+    const raw = typeof config.body === "string" ? config.body : JSON.stringify(config.body);
+    if (raw) {
+      if (config.bodyType === "json") {
+        parts.push(`-H ${shellQuote("Content-Type: application/json")}`);
+      }
+      parts.push(`-d ${shellQuote(raw)}`);
+    }
+  }
+  if (config.followRedirects !== false) parts.push("-L");
+  return parts.join(" ");
+}
+function inferJsonSchema(value, depth = 0) {
+  if (value === null || value === void 0) return { type: "null" };
+  if (Array.isArray(value)) {
+    if (!value.length || depth > 6) return { type: "array" };
+    return { type: "array", items: inferJsonSchema(value[0], depth + 1) };
+  }
+  if (typeof value === "object") {
+    if (depth > 6) return { type: "object" };
+    const properties = {};
+    for (const [k, v] of Object.entries(value)) {
+      properties[k] = inferJsonSchema(v, depth + 1);
+    }
+    return { type: "object", properties };
+  }
+  return { type: typeof value };
+}
+function countSchemaPaths(schema, depth = 0) {
+  if (!schema || typeof schema !== "object" || depth > 8) return 0;
+  const s = schema;
+  let count = 0;
+  if (s.type === "object" && s.properties) {
+    for (const child of Object.values(s.properties)) {
+      count += 1 + countSchemaPaths(child, depth + 1);
+    }
+  } else if (s.type === "array" && s.items) {
+    count += countSchemaPaths(s.items, depth + 1);
+  }
+  return count;
+}
+function statusTone(status) {
+  if (status < 300) return "success";
+  if (status < 400) return "info";
+  if (status < 500) return "warning";
+  return "error";
+}
+function formatBytes(size) {
+  return size < 1024 ? `${size} B` : `${(size / 1024).toFixed(1)} KB`;
+}
+
+// src/workflow/components/HttpActionPanel/HttpActionPanel.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function toPairs(rows) {
+  return rows.map((r) => ({
+    key: r.key,
+    value: r.value,
+    enabled: r.enabled !== false,
+    description: r.description
+  }));
+}
+function textOf(raw) {
+  if (typeof raw === "string") return raw;
+  if (raw == null) return "";
+  try {
+    return JSON.stringify(raw, null, 2);
+  } catch {
+    return "";
+  }
+}
+function HttpActionPanel({
+  value,
+  onChange,
+  disabled = false,
+  connections,
+  connectionsLoading = false,
+  onSendPreview,
+  className
+}) {
+  const uid = useId();
+  const cfgRef = useRef5({
+    ...HTTP_ACTION_DEFAULTS,
+    ...value,
+    queryParams: normalizeKeyValues(value?.queryParams),
+    headers: normalizeKeyValues(value?.headers),
+    formData: normalizeKeyValues(value?.formData),
+    auth: normalizeAuth(value?.auth),
+    retry: {
+      ...HTTP_ACTION_DEFAULTS.retry,
+      ...value?.retry
     },
-    [emit, responseType]
+    pagination: {
+      ...HTTP_ACTION_DEFAULTS.pagination,
+      ...value?.pagination
+    }
+  });
+  const [, force] = useState5(0);
+  const emit = useCallback4(
+    (patch) => {
+      cfgRef.current = { ...cfgRef.current, ...patch };
+      force((n) => n + 1);
+      onChange?.(cfgRef.current);
+    },
+    [onChange]
   );
-  const sendPreview = async () => {
-    if (!onSendPreview) return;
-    setPreview({ phase: "loading" });
+  const cfg = cfgRef.current;
+  const connectionId = cfg.connectionId ?? "";
+  const selectedConnection = connections?.find((c) => c.id === connectionId) ?? null;
+  const endpoints = selectedConnection?.endpoints ?? [];
+  const method = cfg.method ?? "GET";
+  const url = cfg.url ?? "";
+  const baseUrl = cfg.baseUrl ?? "";
+  const fullUrl = connectionId ? url : effectiveUrl(baseUrl, url);
+  const queryParams = normalizeKeyValues(cfg.queryParams);
+  const headers = normalizeKeyValues(cfg.headers);
+  const formData = normalizeKeyValues(cfg.formData);
+  const auth = normalizeAuth(cfg.auth);
+  const retry = cfg.retry ?? HTTP_ACTION_DEFAULTS.retry;
+  const pagination = cfg.pagination ?? { type: "none" };
+  const responseType = cfg.responseType ?? "json";
+  const [bodyText, setBodyText] = useState5(() => textOf(cfg.body));
+  const [bodyError, setBodyError] = useState5();
+  const [gqlVarsText, setGqlVarsText] = useState5(() => textOf(cfg.graphqlVariables));
+  const [gqlVarsError, setGqlVarsError] = useState5();
+  const [retryOnText, setRetryOnText] = useState5(() => (retry?.retryOn ?? []).join(", "));
+  const [expectedCtText, setExpectedCtText] = useState5(
+    () => (cfg.expectedContentTypes ?? []).join(", ")
+  );
+  const [urlError, setUrlError] = useState5();
+  const [extractRows, setExtractRows] = useState5(
+    () => Object.entries(cfg.extract ?? {}).map(([key, v]) => ({ key, value: v, enabled: true }))
+  );
+  const [curlOpen, setCurlOpen] = useState5(false);
+  const [curlText, setCurlText] = useState5("");
+  const [curlError, setCurlError] = useState5();
+  const [copiedCurl, setCopiedCurl] = useState5(false);
+  const [copiedResult, setCopiedResult] = useState5(false);
+  const [copiedSection, setCopiedSection] = useState5(null);
+  const applyCurl = () => {
+    const patch = parseCurl(curlText);
+    if (!patch) {
+      setCurlError(
+        "That doesn't look like a cURL command \u2014 it should start with `curl` and include a URL."
+      );
+      return;
+    }
+    setCurlError(void 0);
+    setCurlText("");
+    setCurlOpen(false);
+    setBodyText(textOf(patch.body));
+    setBodyError(void 0);
+    emit({ ...patch, connectionId: void 0, baseUrl: void 0 });
+  };
+  const copyCurl = async () => {
     try {
-      const response = await onSendPreview({
+      await navigator.clipboard?.writeText(buildCurl(cfg));
+      setCopiedCurl(true);
+      setTimeout(() => setCopiedCurl(false), 1600);
+    } catch {
+    }
+  };
+  const copyResult = async () => {
+    if (preview.phase !== "success") return;
+    const r = preview.response;
+    const bundle = {
+      request: {
         method: cfg.apiType === "graphql" ? "POST" : method,
-        url: connectionId ? url : fullUrl,
-        connectionId: connectionId || void 0,
-        headers,
-        queryParams,
-        bodyType: cfg.bodyType ?? "json",
-        body: bodyText,
-        formData,
-        graphqlQuery: cfg.apiType === "graphql" ? cfg.graphqlQuery ?? "" : void 0,
-        graphqlVariables: cfg.apiType === "graphql" ? gqlVarsText : void 0,
-        auth,
-        timeout: cfg.timeout ?? 3e4
-      });
-      setPreview({ phase: "success", response });
-      inferAndEmitSchema(response);
-    } catch (err) {
-      setPreview({
-        phase: "error",
-        message: err instanceof Error ? err.message : "Request failed"
-      });
+        url: connectionId ? `${selectedConnection?.name ?? connectionId} \xB7 ${url}` : fullUrl
+      },
+      response: {
+        status: r.status,
+        statusText: r.statusText,
+        ok: r.ok,
+        durationMs: r.duration,
+        sizeBytes: r.size,
+        headers: r.headers,
+        body: r.body
+      }
+    };
+    try {
+      await navigator.clipboard?.writeText(JSON.stringify(bundle, null, 2));
+      setCopiedResult(true);
+      setTimeout(() => setCopiedResult(false), 1600);
+    } catch {
     }
   };
-  const previewUrlOk = Boolean(fullUrl) && !fullUrl.includes("{{");
-  const canSend = Boolean(onSendPreview) && previewUrlOk && preview.phase !== "loading" && !disabled;
-  const paramCount = queryParams.filter((r) => r.enabled !== false && r.key).length;
-  const headerCount = headers.filter((r) => r.enabled !== false && r.key).length;
-  const extractCount = extractRows.filter((r) => r.key).length;
-  const advancedSummary = [];
-  if ((cfg.timeout ?? 3e4) !== 3e4) advancedSummary.push(`${(cfg.timeout ?? 0) / 1e3}s`);
-  if ((retry?.maxAttempts ?? 1) > 1) advancedSummary.push(`retry \xD7${retry?.maxAttempts}`);
-  if (pagination.type !== "none") advancedSummary.push(pagination.type.replace("_", " "));
-  if (extractCount > 0) advancedSummary.push(`${extractCount} extracted`);
-  const kvTab = (rows, key, desc, keyPlaceholder) => /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__tab", children: [
-    /* @__PURE__ */ jsx2("p", { className: "ods-http-panel__desc", children: desc }),
-    /* @__PURE__ */ jsx2(
-      KeyValueEditor,
-      {
-        pairs: toPairs(rows),
-        onChange: (pairs) => emit({ [key]: pairs }),
-        rowToggle: true,
-        showDescription: true,
-        keyPlaceholder,
-        valuePlaceholder: "value or {{var}}",
-        emptyLabel: "No entries yet \u2014 click Add to begin.",
-        addLabel: "Add",
-        size: "sm",
-        disabled
+  const copySection = async (text, key) => {
+    try {
+      await navigator.clipboard?.writeText(text);
+      setCopiedSection(key);
+      setTimeout(() => setCopiedSection(null), 1600);
+    } catch {
+    }
+  };
+  const sectionCopyButton = (text, key, label) => /* @__PURE__ */ jsx4(
+    Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      "aria-label": copiedSection === key ? `${label} copied` : `Copy ${label}`,
+      leftIcon: copiedSection === key ? /* @__PURE__ */ jsx4(CheckmarkIcon, { size: "sm" }) : /* @__PURE__ */ jsx4(CopyIcon, { size: "sm" }),
+      className: cn(copiedSection === key && "ods-http-panel__copy-done"),
+      onClick: () => {
+        void copySection(text, key);
       }
-    )
-  ] });
-  const paramsTab = kvTab(
-    queryParams,
-    "queryParams",
-    /* @__PURE__ */ jsxs2(Fragment2, { children: [
-      "Query parameters appended to the URL. Supports ",
-      /* @__PURE__ */ jsx2("code", { children: "{{variable}}" }),
-      " interpolation."
-    ] }),
-    "param name"
+    }
   );
-  const headersTab = kvTab(
-    headers,
-    "headers",
-    /* @__PURE__ */ jsxs2(Fragment2, { children: [
-      "Request headers. Auth headers are injected automatically from the Auth tab. Supports",
-      " ",
-      /* @__PURE__ */ jsx2("code", { children: "{{variable}}" }),
-      " interpolation."
-    ] }),
-    "Header-Name"
+  const validateUrl = (nextUrl, nextBase, hasConnection) => {
+    if (!nextUrl && !nextBase && !hasConnection) {
+      setUrlError("URL is required");
+      return;
+    }
+    if (!nextUrl || hasConnection || nextBase || nextUrl.includes("{{")) {
+      setUrlError(void 0);
+      return;
+    }
+    try {
+      new URL(nextUrl);
+      setUrlError(void 0);
+    } catch {
+      setUrlError("URL does not look valid");
+    }
+  };
+  const bodyMode = cfg.apiType === "graphql" ? "graphql" : cfg.bodyType ?? "json";
+  const gqlVarCount = useMemo3(
+    () => countGraphqlVariables(cfg.graphqlQuery ?? ""),
+    [cfg.graphqlQuery]
   );
-  const bodyTab = /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__tab", children: [
-    /* @__PURE__ */ jsx2(
-      SegmentedControl,
-      {
-        size: "sm",
-        "aria-label": "Body type",
-        options: [
-          { value: "none", label: "None" },
-          { value: "json", label: "JSON" },
-          { value: "graphql", label: "GraphQL" },
-          { value: "raw", label: "Raw" },
-          { value: "form-data", label: "Form" },
-          { value: "xml", label: "XML" }
-        ],
-        value: bodyMode,
-        onChange: handleBodyMode
-      }
-    ),
-    bodyMode === "none" && /* @__PURE__ */ jsx2("p", { className: "ods-http-panel__empty", children: "No request body will be sent." }),
-    (bodyMode === "json" || bodyMode === "raw" || bodyMode === "xml") && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-      /* @__PURE__ */ jsx2(
-        CodeEditor,
-        {
-          value: bodyText,
-          language: bodyMode === "json" ? "json" : "plain",
-          onChange: (next) => {
-            setBodyText(next);
-            if (bodyMode === "json" && next.trim()) {
-              try {
-                emit({ body: JSON.parse(next) });
-                setBodyError(void 0);
-              } catch {
-                setBodyError("Invalid JSON");
-                emit({ body: next });
-              }
-            } else {
-              setBodyError(void 0);
-              emit({ body: next || void 0 });
-            }
-          },
-          readOnly: disabled,
-          minHeight: 180,
-          ariaLabel: "Request body"
-        }
-      ),
-      bodyError && /* @__PURE__ */ jsxs2("p", { className: "ods-http-panel__error", children: [
-        "\u26A0 ",
-        bodyError
-      ] }),
-      /* @__PURE__ */ jsxs2("p", { className: "ods-http-panel__desc", children: [
-        "Supports ",
-        /* @__PURE__ */ jsx2("code", { children: "{{variable}}" }),
-        " interpolation."
-      ] })
-    ] }),
-    bodyMode === "graphql" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-      /* @__PURE__ */ jsx2(
-        CodeEditor,
-        {
-          value: cfg.graphqlQuery ?? "",
-          language: "plain",
-          onChange: (next) => emit({ graphqlQuery: next }),
-          readOnly: disabled,
-          minHeight: 160,
-          placeholder: "query ($id: ID!) {\n  node(id: $id) { id }\n}",
-          ariaLabel: "GraphQL query"
-        }
-      ),
-      /* @__PURE__ */ jsxs2(
-        Disclosure,
-        {
-          size: "sm",
-          title: "Variables",
-          defaultOpen: Boolean(gqlVarsText.trim()) || gqlVarCount > 0,
-          trailing: gqlVarCount > 0 ? /* @__PURE__ */ jsx2(Badge, { size: "sm", variant: "neutral", children: gqlVarCount }) : void 0,
-          children: [
-            /* @__PURE__ */ jsx2(
-              CodeEditor,
-              {
-                value: gqlVarsText,
-                language: "json",
-                onChange: (next) => {
-                  setGqlVarsText(next);
-                  if (!next.trim()) {
-                    setGqlVarsError(void 0);
-                    emit({ graphqlVariables: {} });
-                    return;
-                  }
-                  try {
-                    emit({ graphqlVariables: JSON.parse(next) });
-                    setGqlVarsError(void 0);
-                  } catch {
-                    setGqlVarsError("Invalid JSON");
-                  }
-                },
-                readOnly: disabled,
-                minHeight: 100,
-                ariaLabel: "GraphQL variables (JSON)"
-              }
-            ),
-            gqlVarsError && /* @__PURE__ */ jsxs2("p", { className: "ods-http-panel__error", children: [
-              "\u26A0 ",
-              gqlVarsError
-            ] })
-          ]
-        }
-      )
-    ] }),
-    bodyMode === "form-data" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-      /* @__PURE__ */ jsx2("p", { className: "ods-http-panel__desc", children: "Multipart form fields. Content-Type is set automatically with the boundary." }),
-      /* @__PURE__ */ jsx2(
-        KeyValueEditor,
-        {
-          pairs: toPairs(formData),
-          onChange: (pairs) => (
-            // Raw rows — see the params/headers note; serializing here ate
-            // the blank row that Add appends.
-            emit({ formData: pairs, bodyType: "form-data" })
-          ),
-          rowToggle: true,
-          keyPlaceholder: "field name",
-          valuePlaceholder: "value or {{var}}",
-          emptyLabel: "No fields yet \u2014 click Add to begin.",
-          addLabel: "Add",
-          size: "sm",
-          disabled
-        }
-      )
-    ] })
-  ] });
-  const authTab = /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__tab", children: [
-    connectionId ? /* @__PURE__ */ jsxs2(Banner, { variant: "success", appearance: "subtle", size: "sm", children: [
-      "Authentication is inherited from ",
-      /* @__PURE__ */ jsx2("strong", { children: selectedConnection?.name }),
-      " and refreshed automatically. Choose a type below only to override it for this step."
-    ] }) : /* @__PURE__ */ jsx2(Banner, { variant: "info", appearance: "subtle", size: "sm", children: "For OAuth 2.0 APIs that need a login screen, create an API connection and select it as the Source \u2014 the token is obtained once and refreshed automatically. Inline auth here is for non-interactive credentials only." }),
-    /* @__PURE__ */ jsx2(
-      Select,
-      {
-        id: `${uid}-auth-type`,
-        label: connectionId ? "Override authentication" : "Authentication",
-        value: auth.type,
-        onChange: (next) => emit({ auth: { ...auth, type: next } }),
-        disabled,
-        options: [
-          { value: "none", label: connectionId ? "Inherit from connection" : "No auth" },
-          { value: "basic", label: "Basic auth (username + password)" },
-          { value: "bearer", label: "Bearer token" },
-          { value: "apikey", label: "API key" }
-        ]
-      }
-    ),
-    auth.type === "basic" && /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__grid", children: [
-      /* @__PURE__ */ jsx2(
-        Input,
-        {
-          id: `${uid}-auth-user`,
-          label: "Username",
-          value: auth.username ?? "",
-          placeholder: "username or {{var}}",
-          onChange: (e) => emit({ auth: { ...auth, username: e.target.value } }),
-          disabled
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        PasswordInput,
-        {
-          id: `${uid}-auth-pass`,
-          label: "Password",
-          value: auth.password ?? "",
-          placeholder: "password or {{var}}",
-          onChange: (next) => emit({ auth: { ...auth, password: next } }),
-          disabled
-        }
-      )
-    ] }),
-    auth.type === "bearer" && /* @__PURE__ */ jsx2(
-      PasswordInput,
-      {
-        id: `${uid}-auth-token`,
-        label: "Token",
-        value: auth.token ?? "",
-        placeholder: "your-token or {{step.token}}",
-        onChange: (next) => emit({ auth: { ...auth, token: next } }),
-        disabled
-      }
-    ),
-    auth.type === "apikey" && /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__grid", children: [
-      /* @__PURE__ */ jsx2(
-        Input,
-        {
-          id: `${uid}-auth-keyname`,
-          label: "Key name",
-          value: auth.apiKeyName ?? "",
-          placeholder: "X-API-Key",
-          onChange: (e) => emit({ auth: { ...auth, apiKeyName: e.target.value } }),
-          disabled
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        PasswordInput,
-        {
-          id: `${uid}-auth-keyval`,
-          label: "Key value",
-          value: auth.apiKeyValue ?? "",
-          placeholder: "your-api-key or {{var}}",
-          onChange: (next) => emit({ auth: { ...auth, apiKeyValue: next } }),
-          disabled
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        Select,
-        {
-          id: `${uid}-auth-keyloc`,
-          label: "Send in",
-          value: auth.apiKeyLocation ?? "header",
-          onChange: (next) => emit({ auth: { ...auth, apiKeyLocation: next } }),
-          disabled,
-          options: [
-            { value: "header", label: "Request header" },
-            { value: "query", label: "Query parameter" }
-          ]
-        }
-      )
-    ] }),
-    auth.type === "none" && /* @__PURE__ */ jsx2("p", { className: "ods-http-panel__empty", children: connectionId ? "This step uses the connection's authentication." : "No authentication will be added to this request." })
-  ] });
-  const responseTab = /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__tab", children: [
-    /* @__PURE__ */ jsx2(
-      SegmentedControl,
+  const handleBodyMode = (next) => {
+    if (next === "graphql") {
+      emit(method === "GET" ? { apiType: "graphql", method: "POST" } : { apiType: "graphql" });
+      return;
+    }
+    emit({ apiType: "rest", bodyType: next });
+  };
+  const [preview, setPreview] = useState5({ phase: "idle" });
+  const [schemaInfo, setSchemaInfo] = useState5(
+    null
+  );
+  const lastSchemaKey = useRef5("");
+  const inferAndEmitSchema = useCallback4(
+    (response, forceRefresh = false) => {
+      if (responseType === "binary") return;
+      const snapshot = {
+        status: response.status,
+        statusText: response.statusText,
+        ok: response.ok,
+        headers: response.headers,
+        body: response.body,
+        duration: response.duration,
+        attempts: 1,
+        extracted: {}
+      };
+      const inferred = inferJsonSchema(snapshot);
+      const key = JSON.stringify(inferred);
+      if (!forceRefresh && key === lastSchemaKey.current) return;
+      lastSchemaKey.current = key;
+      emit({ _outputSchema: inferred });
+      const bodySchema = inferred.properties?.body;
+      const topKeys = Object.keys(bodySchema?.properties ?? inferred.properties ?? {});
+      setSchemaInfo({ pathCount: countSchemaPaths(inferred), topKeys });
+    },
+    [emit, responseType]
+  );
+  const sendPreview = async () => {
+    if (!onSendPreview) return;
+    setPreview({ phase: "loading" });
+    try {
+      const response = await onSendPreview({
+        method: cfg.apiType === "graphql" ? "POST" : method,
+        url: connectionId ? url : fullUrl,
+        connectionId: connectionId || void 0,
+        headers,
+        queryParams,
+        bodyType: cfg.bodyType ?? "json",
+        body: bodyText,
+        formData,
+        graphqlQuery: cfg.apiType === "graphql" ? cfg.graphqlQuery ?? "" : void 0,
+        graphqlVariables: cfg.apiType === "graphql" ? gqlVarsText : void 0,
+        auth,
+        timeout: cfg.timeout ?? 3e4
+      });
+      setPreview({ phase: "success", response });
+      inferAndEmitSchema(response);
+    } catch (err) {
+      setPreview({
+        phase: "error",
+        message: err instanceof Error ? err.message : "Request failed"
+      });
+    }
+  };
+  const previewUrlOk = Boolean(fullUrl) && !fullUrl.includes("{{");
+  const canSend = Boolean(onSendPreview) && previewUrlOk && preview.phase !== "loading" && !disabled;
+  const paramCount = queryParams.filter((r) => r.enabled !== false && r.key).length;
+  const headerCount = headers.filter((r) => r.enabled !== false && r.key).length;
+  const extractCount = extractRows.filter((r) => r.key).length;
+  const advancedSummary = [];
+  if ((cfg.timeout ?? 3e4) !== 3e4) advancedSummary.push(`${(cfg.timeout ?? 0) / 1e3}s`);
+  if ((retry?.maxAttempts ?? 1) > 1) advancedSummary.push(`retry \xD7${retry?.maxAttempts}`);
+  if (pagination.type !== "none") advancedSummary.push(pagination.type.replace("_", " "));
+  if (extractCount > 0) advancedSummary.push(`${extractCount} extracted`);
+  const kvTab = (rows, key, desc, keyPlaceholder) => /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__tab", children: [
+    /* @__PURE__ */ jsx4("p", { className: "ods-http-panel__desc", children: desc }),
+    /* @__PURE__ */ jsx4(
+      KeyValueEditor,
       {
+        pairs: toPairs(rows),
+        onChange: (pairs) => emit({ [key]: pairs }),
+        rowToggle: true,
+        showDescription: true,
+        keyPlaceholder,
+        valuePlaceholder: "value or {{var}}",
+        emptyLabel: "No entries yet \u2014 click Add to begin.",
+        addLabel: "Add",
         size: "sm",
-        "aria-label": "Response type",
-        options: [
-          { value: "json", label: "JSON" },
-          { value: "text", label: "Text" },
-          { value: "binary", label: "Binary" }
-        ],
-        value: responseType,
-        onChange: (next) => emit({ responseType: next })
-      }
-    ),
-    /* @__PURE__ */ jsxs2("p", { className: "ods-http-panel__desc", children: [
-      responseType === "json" && "Tries to parse the response body as JSON; falls back to raw text on parse failure.",
-      responseType === "text" && "Returns the raw response body as a string. No JSON parsing.",
-      responseType === "binary" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-        "Returns the response as bytes with ",
-        /* @__PURE__ */ jsx2("code", { children: "fileName" }),
-        ", ",
-        /* @__PURE__ */ jsx2("code", { children: "contentType" }),
-        " and",
-        " ",
-        /* @__PURE__ */ jsx2("code", { children: "size" }),
-        " on the step output \u2014 for downloads feeding file actions. Pagination is not compatible with binary responses."
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx2(
-      Input,
-      {
-        id: `${uid}-expected-ct`,
-        label: "Expected content-types (optional)",
-        value: expectedCtText,
-        placeholder: "application/pdf, application/json",
-        helperText: "Comma-separated. A warning is logged when the response Content-Type matches none of these.",
-        onChange: (e) => {
-          setExpectedCtText(e.target.value);
-          const parts = e.target.value.split(",").map((s) => s.trim()).filter(Boolean);
-          emit({ expectedContentTypes: parts.length ? parts : void 0 });
-        },
         disabled
       }
-    ),
-    /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__schema", children: [
-      /* @__PURE__ */ jsx2("span", { className: "ods-http-panel__schema-label", children: "Data stream schema" }),
-      schemaInfo ? /* @__PURE__ */ jsxs2("p", { className: "ods-http-panel__desc", children: [
-        /* @__PURE__ */ jsxs2(Badge, { size: "sm", variant: "success", children: [
-          schemaInfo.pathCount,
-          " paths"
-        ] }),
-        " ",
-        "Inferred from the last test send. Top-level keys:",
-        " ",
-        /* @__PURE__ */ jsx2("code", { children: schemaInfo.topKeys.join(", ") }),
-        ". Downstream binding (Field Mapper, Transform, ForEach) sees this shape immediately; Save persists it."
-      ] }) : /* @__PURE__ */ jsxs2("p", { className: "ods-http-panel__desc", children: [
-        "No schema yet \u2014 hit ",
-        /* @__PURE__ */ jsx2("strong", { children: "Send" }),
-        " in the request bar. On success the response shape is inferred so downstream steps bind against real field names."
-      ] }),
-      /* @__PURE__ */ jsx2(
-        Button,
-        {
-          variant: "ghost",
-          size: "sm",
-          disabled: preview.phase !== "success" || responseType === "binary" || disabled,
-          onClick: () => {
-            if (preview.phase === "success") inferAndEmitSchema(preview.response, true);
-          },
-          children: "Refresh schema from last send"
-        }
-      )
-    ] })
+    )
   ] });
-  const tabItems = [
-    {
-      value: "params",
-      label: paramCount ? `Params \xB7 ${paramCount}` : "Params",
-      icon: /* @__PURE__ */ jsx2(ListIcon, { size: "sm" }),
-      children: paramsTab
-    },
-    {
-      value: "headers",
-      label: headerCount ? `Headers \xB7 ${headerCount}` : "Headers",
-      icon: /* @__PURE__ */ jsx2(TagIcon, { size: "sm" }),
-      children: headersTab
-    },
-    {
-      value: "body",
-      label: bodyMode === "none" ? "Body" : `Body \xB7 ${bodyMode === "form-data" ? "form" : bodyMode}`,
-      icon: /* @__PURE__ */ jsx2(CodeIcon, { size: "sm" }),
-      children: bodyTab
-    },
-    {
-      value: "auth",
-      label: auth.type === "none" ? "Auth" : `Auth \xB7 ${auth.type}`,
-      icon: /* @__PURE__ */ jsx2(LockedIcon, { size: "sm" }),
-      children: authTab
-    },
-    {
-      value: "response",
-      label: responseType === "json" ? "Response" : `Response \xB7 ${responseType}`,
-      icon: /* @__PURE__ */ jsx2(DataViewAltIcon, { size: "sm" }),
-      children: responseTab
-    }
-  ];
-  return /* @__PURE__ */ jsxs2("div", { className: cn("ods-http-panel", className), children: [
-    connections && /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__source", children: [
-      /* @__PURE__ */ jsx2(
-        Select,
-        {
-          id: `${uid}-connection`,
-          label: "Source",
-          placeholder: connectionsLoading ? "Loading\u2026" : "No connection (manual config)",
-          options: connections.map((c) => ({ value: c.id, label: c.name, icon: c.icon })),
-          value: connectionId,
-          onChange: (next) => emit({ connectionId: next || void 0 }),
-          disabled: disabled || connectionsLoading,
-          helperText: connectionId ? `Base URL and auth are inherited from "${selectedConnection?.name}" at runtime.` : "Select a saved API connection to inherit base URL and auth, or configure manually."
-        }
-      ),
-      connectionId && endpoints.length > 0 && /* @__PURE__ */ jsx2(
-        Combobox,
-        {
-          ariaLabel: "Endpoint",
-          placeholder: `Search ${endpoints.length} discovered endpoints\u2026`,
-          value: url,
-          creatable: true,
-          options: endpoints.map((e) => ({
-            value: e.path,
-            label: `${e.method}  ${e.path}`,
-            description: e.summary
-          })),
-          onChange: (nextPath) => {
-            const match = endpoints.find((e) => e.path === nextPath);
-            validateUrl(nextPath, baseUrl, true);
-            emit(
-              match && HTTP_METHODS.includes(match.method.toUpperCase()) ? { url: nextPath, method: match.method.toUpperCase() } : { url: nextPath }
-            );
-          }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__bar", children: [
-      /* @__PURE__ */ jsx2(
-        Select,
-        {
-          id: `${uid}-method`,
-          "aria-label": "HTTP method",
-          className: cn(
-            "ods-http-panel__method",
-            `ods-http-panel__method--${method.toLowerCase()}`
-          ),
-          value: method,
-          onChange: (next) => emit({ method: next }),
-          disabled,
-          options: HTTP_METHODS.map((m) => ({ value: m, label: m }))
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        Input,
-        {
-          id: `${uid}-url`,
-          "aria-label": connectionId ? "Path" : "URL",
-          "data-fx-droppable": "true",
-          className: "ods-http-panel__url",
-          value: url,
-          placeholder: connectionId ? "/v1/users" : "https://api.example.com/v1/users or {{var}}",
-          error: Boolean(urlError),
-          errorMessage: urlError,
-          onChange: (e) => {
-            validateUrl(e.target.value, baseUrl, Boolean(connectionId));
-            emit({ url: e.target.value });
-          },
-          disabled
-        }
-      ),
-      onSendPreview && /* @__PURE__ */ jsx2(
-        Button,
-        {
-          variant: "primary",
-          size: "md",
-          leftIcon: preview.phase === "loading" ? void 0 : /* @__PURE__ */ jsx2(PlayIcon, { size: "sm" }),
-          onClick: sendPreview,
-          disabled: !canSend,
-          children: preview.phase === "loading" ? "Sending\u2026" : "Send"
-        }
-      )
-    ] }),
-    !connectionId && baseUrl && /* @__PURE__ */ jsxs2("p", { className: "ods-http-panel__effective", children: [
-      /* @__PURE__ */ jsx2("span", { children: "Effective URL:" }),
-      " ",
-      /* @__PURE__ */ jsx2("code", { children: fullUrl || "\u2014" })
-    ] }),
-    fullUrl.includes("{{") && /* @__PURE__ */ jsxs2("p", { className: "ods-http-panel__desc", children: [
-      "\u26A0 URL contains ",
-      /* @__PURE__ */ jsx2("code", { children: "{{variables}}" }),
-      " \u2014 they resolve at run time; testing needs literal values."
-    ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__tools", children: [
-      /* @__PURE__ */ jsxs2("span", { className: "ods-http-panel__hint", children: [
-        "Use ",
-        /* @__PURE__ */ jsx2("code", { children: "{{stepName.fieldPath}}" }),
-        " to insert data from upstream steps."
-      ] }),
-      /* @__PURE__ */ jsxs2("span", { className: "ods-http-panel__tools-actions", children: [
-        /* @__PURE__ */ jsx2(Button, { variant: "ghost", size: "sm", onClick: () => setCurlOpen((o) => !o), children: "Import cURL" }),
-        /* @__PURE__ */ jsx2(
-          Button,
-          {
-            variant: "ghost",
-            size: "sm",
-            className: cn(copiedCurl && "ods-http-panel__copy-done"),
-            leftIcon: copiedCurl ? /* @__PURE__ */ jsx2(CheckmarkIcon, { size: "sm" }) : /* @__PURE__ */ jsx2(CopyIcon, { size: "sm" }),
-            onClick: copyCurl,
-            children: copiedCurl ? "Copied" : "Copy as cURL"
-          }
-        )
-      ] })
+  const paramsTab = kvTab(
+    queryParams,
+    "queryParams",
+    /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      "Query parameters appended to the URL. Supports ",
+      /* @__PURE__ */ jsx4("code", { children: "{{variable}}" }),
+      " interpolation."
     ] }),
-    curlOpen && /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__curl", children: [
-      /* @__PURE__ */ jsx2(
-        CodeEditor,
-        {
-          value: curlText,
-          language: "plain",
-          onChange: setCurlText,
-          minHeight: 90,
-          showLineNumbers: false,
-          placeholder: "curl -X POST 'https://api.example.com/v1/users' -H 'Authorization: Bearer \u2026' -d '{\u2026}'",
-          ariaLabel: "cURL command"
-        }
-      ),
-      curlError && /* @__PURE__ */ jsxs2("p", { className: "ods-http-panel__error", children: [
-        "\u26A0 ",
-        curlError
-      ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__curl-actions", children: [
-        /* @__PURE__ */ jsx2(Button, { variant: "secondary", size: "sm", onClick: () => setCurlOpen(false), children: "Cancel" }),
-        /* @__PURE__ */ jsx2(Button, { variant: "primary", size: "sm", onClick: applyCurl, disabled: !curlText.trim(), children: "Apply to request" })
-      ] })
+    "param name"
+  );
+  const headersTab = kvTab(
+    headers,
+    "headers",
+    /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      "Request headers. Auth headers are injected automatically from the Auth tab. Supports",
+      " ",
+      /* @__PURE__ */ jsx4("code", { children: "{{variable}}" }),
+      " interpolation."
     ] }),
-    /* @__PURE__ */ jsx2(Tabs, { items: tabItems, defaultValue: "params", className: "ods-http-panel__tabs" }),
-    /* @__PURE__ */ jsxs2(
-      Disclosure,
+    "Header-Name"
+  );
+  const bodyTab = /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__tab", children: [
+    /* @__PURE__ */ jsx4(
+      SegmentedControl,
       {
         size: "sm",
-        icon: /* @__PURE__ */ jsx2(GlobeIcon, { size: "sm" }),
-        title: "Advanced options",
-        description: "Base URL, timeout, retries, pagination, response extraction",
-        trailing: advancedSummary.length ? /* @__PURE__ */ jsx2(Badge, { size: "sm", variant: "info", children: advancedSummary.join(" \xB7 ") }) : void 0,
-        children: [
-          /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__grid", children: [
-            !connectionId && /* @__PURE__ */ jsx2(
-              Input,
-              {
-                id: `${uid}-base-url`,
-                label: "Base URL (optional)",
-                value: baseUrl,
-                placeholder: "https://api.example.com",
-                helperText: "Combined with the request path to form the full URL.",
-                onChange: (e) => {
-                  validateUrl(url, e.target.value, Boolean(connectionId));
-                  emit({ baseUrl: e.target.value || void 0 });
-                },
-                disabled
-              }
-            ),
-            /* @__PURE__ */ jsx2(
-              NumberInput,
-              {
-                label: "Timeout (ms)",
-                helperText: "Minimum 1000 ms",
-                value: cfg.timeout ?? 3e4,
-                min: 1e3,
-                step: 1e3,
-                onChange: (next) => {
-                  if (!Number.isNaN(next) && next >= 1e3) emit({ timeout: next });
-                },
-                disabled
-              }
-            ),
-            /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__switches", children: [
-              /* @__PURE__ */ jsx2(
-                Switch,
-                {
-                  id: `${uid}-fail`,
-                  label: "Fail on non-2xx",
-                  checked: cfg.failOnError !== false,
-                  onChange: (next) => emit({ failOnError: next }),
-                  disabled,
-                  size: "sm"
-                }
-              ),
-              /* @__PURE__ */ jsx2(
-                Switch,
-                {
-                  id: `${uid}-redirects`,
-                  label: "Follow redirects",
-                  checked: cfg.followRedirects !== false,
-                  onChange: (next) => emit({ followRedirects: next }),
-                  disabled,
-                  size: "sm"
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx2(
-            Disclosure,
-            {
-              size: "sm",
-              title: "Retry",
-              trailing: (retry?.maxAttempts ?? 1) > 1 ? /* @__PURE__ */ jsxs2(Badge, { size: "sm", variant: "info", children: [
-                retry?.maxAttempts,
-                " attempts"
-              ] }) : void 0,
-              children: /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__grid", children: [
-                /* @__PURE__ */ jsx2(
-                  NumberInput,
-                  {
-                    label: "Max attempts",
-                    helperText: "1 = no retry",
-                    value: retry?.maxAttempts ?? 1,
-                    min: 1,
-                    max: 10,
-                    onChange: (next) => {
-                      if (!Number.isNaN(next) && next >= 1 && retry) {
-                        emit({ retry: { ...retry, maxAttempts: next } });
-                      }
-                    },
-                    disabled
-                  }
-                ),
-                /* @__PURE__ */ jsx2(
-                  Input,
-                  {
-                    id: `${uid}-retry-on`,
-                    label: "Retry on (status codes)",
-                    value: retryOnText,
-                    placeholder: "429, 500, 502, 503, 504",
-                    helperText: "Comma-separated HTTP status codes",
-                    onChange: (e) => {
-                      setRetryOnText(e.target.value);
-                      const codes = e.target.value.split(",").map((s) => Number.parseInt(s.trim(), 10)).filter((n) => !Number.isNaN(n));
-                      if (retry) emit({ retry: { ...retry, retryOn: codes } });
-                    },
-                    disabled
-                  }
-                ),
-                /* @__PURE__ */ jsx2(
-                  NumberInput,
-                  {
-                    label: "Initial delay (ms)",
-                    value: retry?.initialDelayMs ?? 1e3,
-                    min: 100,
-                    step: 100,
-                    onChange: (next) => {
-                      if (!Number.isNaN(next) && retry)
-                        emit({ retry: { ...retry, initialDelayMs: next } });
-                    },
-                    disabled
-                  }
-                ),
-                /* @__PURE__ */ jsx2(
-                  NumberInput,
-                  {
-                    label: "Backoff factor",
-                    helperText: "Delay multiplies by this each retry",
-                    value: retry?.backoffFactor ?? 2,
-                    min: 1,
-                    step: 0.5,
-                    onChange: (next) => {
-                      if (!Number.isNaN(next) && retry)
-                        emit({ retry: { ...retry, backoffFactor: next } });
-                    },
-                    disabled
-                  }
-                ),
-                /* @__PURE__ */ jsx2(
-                  NumberInput,
-                  {
-                    label: "Max delay (ms)",
-                    value: retry?.maxDelayMs ?? 3e4,
-                    min: 1e3,
-                    step: 1e3,
-                    onChange: (next) => {
-                      if (!Number.isNaN(next) && retry) emit({ retry: { ...retry, maxDelayMs: next } });
-                    },
-                    disabled
-                  }
-                )
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsxs2(
-            Disclosure,
-            {
-              size: "sm",
-              title: "Pagination",
-              trailing: pagination.type !== "none" ? /* @__PURE__ */ jsx2(Badge, { size: "sm", variant: "success", children: pagination.type.replace("_", " ") }) : void 0,
-              children: [
-                /* @__PURE__ */ jsx2(
-                  Select,
-                  {
-                    id: `${uid}-pag-type`,
-                    label: "Strategy",
-                    value: pagination.type,
-                    onChange: (next) => emit({
-                      pagination: { ...pagination, type: next }
-                    }),
-                    disabled,
-                    options: [
-                      { value: "none", label: "None (single request)" },
-                      { value: "offset", label: "Offset / page number" },
-                      { value: "cursor", label: "Cursor-based" },
-                      { value: "link_header", label: 'Link header (rel="next")' },
-                      { value: "next_url", label: "Next URL in response body" }
-                    ]
-                  }
-                ),
-                pagination.type !== "none" && /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__grid", children: [
-                  /* @__PURE__ */ jsx2(
-                    NumberInput,
-                    {
-                      label: "Max pages",
-                      helperText: "Safety cap against infinite loops",
-                      value: pagination.maxPages ?? 20,
-                      min: 1,
-                      onChange: (next) => {
-                        if (!Number.isNaN(next)) emit({ pagination: { ...pagination, maxPages: next } });
-                      },
-                      disabled
-                    }
-                  ),
-                  /* @__PURE__ */ jsx2(
-                    Input,
-                    {
-                      id: `${uid}-pag-merge`,
-                      label: "Merge key (dot path)",
-                      value: pagination.mergeKey ?? "",
-                      placeholder: "data.items",
-                      helperText: "Array to merge across pages",
-                      onChange: (e) => emit({ pagination: { ...pagination, mergeKey: e.target.value } }),
-                      disabled
-                    }
-                  ),
-                  (pagination.type === "offset" || pagination.type === "cursor") && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-                    /* @__PURE__ */ jsx2(
-                      Input,
-                      {
-                        id: `${uid}-pag-limitp`,
-                        label: "Limit param",
-                        value: pagination.limitParam ?? "limit",
-                        onChange: (e) => emit({ pagination: { ...pagination, limitParam: e.target.value } }),
-                        disabled
-                      }
-                    ),
-                    /* @__PURE__ */ jsx2(
-                      NumberInput,
-                      {
-                        label: "Page size",
-                        value: pagination.limitValue ?? 100,
-                        min: 1,
-                        onChange: (next) => {
-                          if (!Number.isNaN(next)) {
-                            emit({ pagination: { ...pagination, limitValue: next } });
-                          }
-                        },
-                        disabled
-                      }
-                    )
-                  ] }),
-                  pagination.type === "offset" && /* @__PURE__ */ jsx2(
-                    Input,
-                    {
-                      id: `${uid}-pag-offset`,
-                      label: "Offset param",
-                      value: pagination.offsetParam ?? "offset",
-                      onChange: (e) => emit({ pagination: { ...pagination, offsetParam: e.target.value } }),
-                      disabled
-                    }
-                  ),
-                  pagination.type === "cursor" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-                    /* @__PURE__ */ jsx2(
-                      Input,
-                      {
-                        id: `${uid}-pag-cres`,
-                        label: "Cursor in response (dot path)",
-                        value: pagination.cursorResponsePath ?? "",
-                        placeholder: "meta.next_cursor",
-                        onChange: (e) => emit({ pagination: { ...pagination, cursorResponsePath: e.target.value } }),
-                        disabled
-                      }
-                    ),
-                    /* @__PURE__ */ jsx2(
-                      Input,
-                      {
-                        id: `${uid}-pag-creq`,
-                        label: "Cursor request param",
-                        value: pagination.cursorRequestParam ?? "cursor",
-                        onChange: (e) => emit({ pagination: { ...pagination, cursorRequestParam: e.target.value } }),
-                        disabled
-                      }
-                    )
-                  ] }),
-                  pagination.type === "next_url" && /* @__PURE__ */ jsx2(
-                    Input,
-                    {
-                      id: `${uid}-pag-next`,
-                      label: "Next URL in response (dot path)",
-                      value: pagination.nextUrlResponsePath ?? "",
-                      placeholder: "links.next",
-                      onChange: (e) => emit({ pagination: { ...pagination, nextUrlResponsePath: e.target.value } }),
-                      disabled
-                    }
-                  )
-                ] })
-              ]
+        "aria-label": "Body type",
+        options: [
+          { value: "none", label: "None" },
+          { value: "json", label: "JSON" },
+          { value: "graphql", label: "GraphQL" },
+          { value: "raw", label: "Raw" },
+          { value: "form-data", label: "Form" },
+          { value: "xml", label: "XML" }
+        ],
+        value: bodyMode,
+        onChange: handleBodyMode
+      }
+    ),
+    bodyMode === "none" && /* @__PURE__ */ jsx4("p", { className: "ods-http-panel__empty", children: "No request body will be sent." }),
+    (bodyMode === "json" || bodyMode === "raw" || bodyMode === "xml") && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx4(
+        CodeEditor,
+        {
+          value: bodyText,
+          language: bodyMode === "json" ? "json" : "plain",
+          onChange: (next) => {
+            setBodyText(next);
+            if (bodyMode === "json" && next.trim()) {
+              try {
+                emit({ body: JSON.parse(next) });
+                setBodyError(void 0);
+              } catch {
+                setBodyError("Invalid JSON");
+                emit({ body: next });
+              }
+            } else {
+              setBodyError(void 0);
+              emit({ body: next || void 0 });
             }
-          ),
-          /* @__PURE__ */ jsxs2(
-            Disclosure,
-            {
-              size: "sm",
-              title: "Response field extraction",
-              trailing: extractCount > 0 ? /* @__PURE__ */ jsxs2(Badge, { size: "sm", variant: "info", children: [
-                extractCount,
-                " field",
-                extractCount === 1 ? "" : "s"
-              ] }) : void 0,
-              children: [
-                /* @__PURE__ */ jsxs2("p", { className: "ods-http-panel__desc", children: [
-                  "Extract fields from the response with dot paths \u2014 available downstream as",
-                  " ",
-                  /* @__PURE__ */ jsx2("code", { children: "{{extracted.keyName}}" }),
-                  "."
-                ] }),
-                /* @__PURE__ */ jsx2(
-                  KeyValueEditor,
-                  {
-                    pairs: extractRows.map((r) => ({ key: r.key, value: r.value })),
-                    onChange: (pairs) => {
-                      const rows = pairs.map((p) => ({ key: p.key, value: p.value, enabled: true }));
-                      setExtractRows(rows);
-                      const extract = {};
-                      for (const r of rows) if (r.key && r.value) extract[r.key] = r.value;
-                      emit({ extract: Object.keys(extract).length ? extract : void 0 });
-                    },
-                    keyPlaceholder: "outputKey",
-                    valuePlaceholder: "data.user.id",
-                    emptyLabel: "No extractions yet \u2014 click Add to begin.",
-                    addLabel: "Add",
-                    size: "sm",
-                    disabled
+          },
+          readOnly: disabled,
+          minHeight: 180,
+          ariaLabel: "Request body"
+        }
+      ),
+      bodyError && /* @__PURE__ */ jsxs4("p", { className: "ods-http-panel__error", children: [
+        "\u26A0 ",
+        bodyError
+      ] }),
+      /* @__PURE__ */ jsxs4("p", { className: "ods-http-panel__desc", children: [
+        "Supports ",
+        /* @__PURE__ */ jsx4("code", { children: "{{variable}}" }),
+        " interpolation."
+      ] })
+    ] }),
+    bodyMode === "graphql" && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx4(
+        CodeEditor,
+        {
+          value: cfg.graphqlQuery ?? "",
+          language: "plain",
+          onChange: (next) => emit({ graphqlQuery: next }),
+          readOnly: disabled,
+          minHeight: 160,
+          placeholder: "query ($id: ID!) {\n  node(id: $id) { id }\n}",
+          ariaLabel: "GraphQL query"
+        }
+      ),
+      /* @__PURE__ */ jsxs4(
+        Disclosure,
+        {
+          size: "sm",
+          title: "Variables",
+          defaultOpen: Boolean(gqlVarsText.trim()) || gqlVarCount > 0,
+          trailing: gqlVarCount > 0 ? /* @__PURE__ */ jsx4(Badge, { size: "sm", variant: "neutral", children: gqlVarCount }) : void 0,
+          children: [
+            /* @__PURE__ */ jsx4(
+              CodeEditor,
+              {
+                value: gqlVarsText,
+                language: "json",
+                onChange: (next) => {
+                  setGqlVarsText(next);
+                  if (!next.trim()) {
+                    setGqlVarsError(void 0);
+                    emit({ graphqlVariables: {} });
+                    return;
                   }
-                )
-              ]
-            }
-          )
+                  try {
+                    emit({ graphqlVariables: JSON.parse(next) });
+                    setGqlVarsError(void 0);
+                  } catch {
+                    setGqlVarsError("Invalid JSON");
+                  }
+                },
+                readOnly: disabled,
+                minHeight: 100,
+                ariaLabel: "GraphQL variables (JSON)"
+              }
+            ),
+            gqlVarsError && /* @__PURE__ */ jsxs4("p", { className: "ods-http-panel__error", children: [
+              "\u26A0 ",
+              gqlVarsError
+            ] })
+          ]
+        }
+      )
+    ] }),
+    bodyMode === "form-data" && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx4("p", { className: "ods-http-panel__desc", children: "Multipart form fields. Content-Type is set automatically with the boundary." }),
+      /* @__PURE__ */ jsx4(
+        KeyValueEditor,
+        {
+          pairs: toPairs(formData),
+          onChange: (pairs) => (
+            // Raw rows — see the params/headers note; serializing here ate
+            // the blank row that Add appends.
+            emit({ formData: pairs, bodyType: "form-data" })
+          ),
+          rowToggle: true,
+          keyPlaceholder: "field name",
+          valuePlaceholder: "value or {{var}}",
+          emptyLabel: "No fields yet \u2014 click Add to begin.",
+          addLabel: "Add",
+          size: "sm",
+          disabled
+        }
+      )
+    ] })
+  ] });
+  const authTab = /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__tab", children: [
+    connectionId ? /* @__PURE__ */ jsxs4(Banner, { variant: "success", appearance: "subtle", size: "sm", children: [
+      "Authentication is inherited from ",
+      /* @__PURE__ */ jsx4("strong", { children: selectedConnection?.name }),
+      " and refreshed automatically. Choose a type below only to override it for this step."
+    ] }) : /* @__PURE__ */ jsx4(Banner, { variant: "info", appearance: "subtle", size: "sm", children: "For OAuth 2.0 APIs that need a login screen, create an API connection and select it as the Source \u2014 the token is obtained once and refreshed automatically. Inline auth here is for non-interactive credentials only." }),
+    /* @__PURE__ */ jsx4(
+      Select,
+      {
+        id: `${uid}-auth-type`,
+        label: connectionId ? "Override authentication" : "Authentication",
+        value: auth.type,
+        onChange: (next) => emit({ auth: { ...auth, type: next } }),
+        disabled,
+        options: [
+          { value: "none", label: connectionId ? "Inherit from connection" : "No auth" },
+          { value: "basic", label: "Basic auth (username + password)" },
+          { value: "bearer", label: "Bearer token" },
+          { value: "apikey", label: "API key" }
         ]
       }
     ),
-    preview.phase !== "idle" && /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__console", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__console-head", children: [
-        /* @__PURE__ */ jsx2(
-          "code",
-          {
-            className: cn(
-              "ods-http-panel__console-method",
-              `ods-http-panel__method--${method.toLowerCase()}`
-            ),
-            children: cfg.apiType === "graphql" ? "POST" : method
-          }
-        ),
-        /* @__PURE__ */ jsx2("code", { className: "ods-http-panel__console-url", children: connectionId ? `${selectedConnection?.name ?? connectionId} \xB7 ${url || "\u2014"}` : fullUrl || "\u2014" }),
-        sectionCopyButton(fullUrl || url, "url", "request URL"),
-        preview.phase === "success" && /* @__PURE__ */ jsx2(
-          Button,
-          {
-            variant: "ghost",
-            size: "sm",
-            className: cn(copiedResult && "ods-http-panel__copy-done"),
-            leftIcon: copiedResult ? /* @__PURE__ */ jsx2(CheckmarkIcon, { size: "sm" }) : /* @__PURE__ */ jsx2(CopyIcon, { size: "sm" }),
-            onClick: copyResult,
-            children: copiedResult ? "Copied" : "Copy result"
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          Button,
-          {
-            variant: "ghost",
-            size: "sm",
-            leftIcon: /* @__PURE__ */ jsx2(RenewIcon, { size: "sm" }),
-            onClick: () => {
-              setPreview({ phase: "idle" });
-            },
-            disabled: preview.phase === "loading",
-            children: "Clear"
-          }
-        )
-      ] }),
-      preview.phase === "loading" && /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__console-loading", children: [
-        /* @__PURE__ */ jsx2(Spinner, { size: "sm" }),
-        /* @__PURE__ */ jsx2("span", { children: "Sending request\u2026" })
-      ] }),
-      preview.phase === "error" && /* @__PURE__ */ jsxs2(Banner, { variant: "error", appearance: "subtle", size: "sm", children: [
-        /* @__PURE__ */ jsx2("strong", { children: "Request failed." }),
+    auth.type === "basic" && /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__grid", children: [
+      /* @__PURE__ */ jsx4(
+        Input,
+        {
+          id: `${uid}-auth-user`,
+          label: "Username",
+          value: auth.username ?? "",
+          placeholder: "username or {{var}}",
+          onChange: (e) => emit({ auth: { ...auth, username: e.target.value } }),
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        PasswordInput,
+        {
+          id: `${uid}-auth-pass`,
+          label: "Password",
+          value: auth.password ?? "",
+          placeholder: "password or {{var}}",
+          onChange: (next) => emit({ auth: { ...auth, password: next } }),
+          disabled
+        }
+      )
+    ] }),
+    auth.type === "bearer" && /* @__PURE__ */ jsx4(
+      PasswordInput,
+      {
+        id: `${uid}-auth-token`,
+        label: "Token",
+        value: auth.token ?? "",
+        placeholder: "your-token or {{step.token}}",
+        onChange: (next) => emit({ auth: { ...auth, token: next } }),
+        disabled
+      }
+    ),
+    auth.type === "apikey" && /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__grid", children: [
+      /* @__PURE__ */ jsx4(
+        Input,
+        {
+          id: `${uid}-auth-keyname`,
+          label: "Key name",
+          value: auth.apiKeyName ?? "",
+          placeholder: "X-API-Key",
+          onChange: (e) => emit({ auth: { ...auth, apiKeyName: e.target.value } }),
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        PasswordInput,
+        {
+          id: `${uid}-auth-keyval`,
+          label: "Key value",
+          value: auth.apiKeyValue ?? "",
+          placeholder: "your-api-key or {{var}}",
+          onChange: (next) => emit({ auth: { ...auth, apiKeyValue: next } }),
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        Select,
+        {
+          id: `${uid}-auth-keyloc`,
+          label: "Send in",
+          value: auth.apiKeyLocation ?? "header",
+          onChange: (next) => emit({ auth: { ...auth, apiKeyLocation: next } }),
+          disabled,
+          options: [
+            { value: "header", label: "Request header" },
+            { value: "query", label: "Query parameter" }
+          ]
+        }
+      )
+    ] }),
+    auth.type === "none" && /* @__PURE__ */ jsx4("p", { className: "ods-http-panel__empty", children: connectionId ? "This step uses the connection's authentication." : "No authentication will be added to this request." })
+  ] });
+  const responseTab = /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__tab", children: [
+    /* @__PURE__ */ jsx4(
+      SegmentedControl,
+      {
+        size: "sm",
+        "aria-label": "Response type",
+        options: [
+          { value: "json", label: "JSON" },
+          { value: "text", label: "Text" },
+          { value: "binary", label: "Binary" }
+        ],
+        value: responseType,
+        onChange: (next) => emit({ responseType: next })
+      }
+    ),
+    /* @__PURE__ */ jsxs4("p", { className: "ods-http-panel__desc", children: [
+      responseType === "json" && "Tries to parse the response body as JSON; falls back to raw text on parse failure.",
+      responseType === "text" && "Returns the raw response body as a string. No JSON parsing.",
+      responseType === "binary" && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        "Returns the response as bytes with ",
+        /* @__PURE__ */ jsx4("code", { children: "fileName" }),
+        ", ",
+        /* @__PURE__ */ jsx4("code", { children: "contentType" }),
+        " and",
         " ",
-        preview.message
-      ] }),
-      preview.phase === "success" && /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__console-result", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__console-status", children: [
-          /* @__PURE__ */ jsxs2(Badge, { size: "sm", variant: statusTone(preview.response.status), children: [
-            preview.response.status,
-            " ",
-            preview.response.statusText
-          ] }),
-          /* @__PURE__ */ jsxs2("span", { className: "ods-http-panel__meta", children: [
-            preview.response.duration,
-            "ms"
-          ] }),
-          /* @__PURE__ */ jsx2("span", { className: "ods-http-panel__meta", children: formatBytes(preview.response.size) })
-        ] }),
-        /* @__PURE__ */ jsx2(
-          Accordion,
-          {
-            size: "sm",
-            mode: "multiple",
-            defaultValue: ["res-body"],
-            items: [
-              {
-                id: "res-headers",
-                label: "Response headers",
-                trailing: /* @__PURE__ */ jsxs2(Fragment2, { children: [
-                  sectionCopyButton(
-                    Object.entries(preview.response.headers).map(([k, v]) => `${k}: ${v}`).join("\n"),
-                    "res-headers",
-                    "response headers"
-                  ),
-                  /* @__PURE__ */ jsx2(Badge, { size: "sm", variant: "neutral", children: Object.keys(preview.response.headers).length })
-                ] }),
-                content: /* @__PURE__ */ jsx2("div", { className: "ods-http-panel__res-headers", children: Object.entries(preview.response.headers).map(([k, v]) => /* @__PURE__ */ jsxs2("div", { className: "ods-http-panel__res-header", children: [
-                  /* @__PURE__ */ jsx2("span", { className: "ods-http-panel__res-header-key", children: k }),
-                  /* @__PURE__ */ jsx2("span", { className: "ods-http-panel__res-header-val", children: v })
-                ] }, k)) })
-              },
-              {
-                id: "res-body",
-                label: "Response body",
-                trailing: /* @__PURE__ */ jsxs2(Fragment2, { children: [
-                  sectionCopyButton(
-                    typeof preview.response.body === "object" ? JSON.stringify(preview.response.body, null, 2) : String(preview.response.bodyRaw ?? preview.response.body ?? ""),
-                    "res-body",
-                    "response body"
-                  ),
-                  !preview.response.ok && /* @__PURE__ */ jsx2(Badge, { size: "sm", variant: "error", children: "Error" })
-                ] }),
-                content: (
-                  // Size guard: the tree view renders recursively (no
-                  // virtualization) — very large bodies fall back to text.
-                  preview.response.body !== null && typeof preview.response.body === "object" && preview.response.size <= 15e5 ? /* @__PURE__ */ jsx2(
-                    JsonViewer,
-                    {
-                      data: preview.response.body,
-                      mode: "view",
-                      maxHeight: 320,
-                      copyable: true
-                    }
-                  ) : /* @__PURE__ */ jsx2("pre", { className: "ods-http-panel__res-body", children: typeof preview.response.body === "object" ? JSON.stringify(preview.response.body, null, 2) : String(
-                    preview.response.bodyRaw ?? preview.response.body ?? "(empty body)"
-                  ) })
-                )
-              }
-            ]
-          }
-        )
+        /* @__PURE__ */ jsx4("code", { children: "size" }),
+        " on the step output \u2014 for downloads feeding file actions. Pagination is not compatible with binary responses."
       ] })
+    ] }),
+    /* @__PURE__ */ jsx4(
+      Input,
+      {
+        id: `${uid}-expected-ct`,
+        label: "Expected content-types (optional)",
+        value: expectedCtText,
+        placeholder: "application/pdf, application/json",
+        helperText: "Comma-separated. A warning is logged when the response Content-Type matches none of these.",
+        onChange: (e) => {
+          setExpectedCtText(e.target.value);
+          const parts = e.target.value.split(",").map((s) => s.trim()).filter(Boolean);
+          emit({ expectedContentTypes: parts.length ? parts : void 0 });
+        },
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__schema", children: [
+      /* @__PURE__ */ jsx4("span", { className: "ods-http-panel__schema-label", children: "Data stream schema" }),
+      schemaInfo ? /* @__PURE__ */ jsxs4("p", { className: "ods-http-panel__desc", children: [
+        /* @__PURE__ */ jsxs4(Badge, { size: "sm", variant: "success", children: [
+          schemaInfo.pathCount,
+          " paths"
+        ] }),
+        " ",
+        "Inferred from the last test send. Top-level keys:",
+        " ",
+        /* @__PURE__ */ jsx4("code", { children: schemaInfo.topKeys.join(", ") }),
+        ". Downstream binding (Field Mapper, Transform, ForEach) sees this shape immediately; Save persists it."
+      ] }) : /* @__PURE__ */ jsxs4("p", { className: "ods-http-panel__desc", children: [
+        "No schema yet \u2014 hit ",
+        /* @__PURE__ */ jsx4("strong", { children: "Send" }),
+        " in the request bar. On success the response shape is inferred so downstream steps bind against real field names."
+      ] }),
+      /* @__PURE__ */ jsx4(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          disabled: preview.phase !== "success" || responseType === "binary" || disabled,
+          onClick: () => {
+            if (preview.phase === "success") inferAndEmitSchema(preview.response, true);
+          },
+          children: "Refresh schema from last send"
+        }
+      )
     ] })
   ] });
-}
-
-// src/workflow/components/FxPanel/FxPanel.tsx
-import {
-  useMemo as useMemo3,
-  useRef as useRef5,
-  useState as useState5
-} from "react";
-import {
-  ChevronDownIcon,
-  ChevronRightIcon,
-  CloseIcon,
-  CollapseAllIcon,
-  DraggableIcon,
-  ExpandAllIcon,
-  FunctionMathIcon,
-  SearchIcon,
-  ValueVariableIcon
-} from "@octaviaflow/icons";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var KIND_ICON = {
-  function: FunctionMathIcon,
-  variable: ValueVariableIcon
-};
-function countLeaves(items) {
-  let n = 0;
-  for (const it of items) {
-    if (it.children && it.children.length > 0) n += countLeaves(it.children);
-    else n += 1;
-  }
-  return n;
-}
-function collectBranchIds(items, out) {
-  for (const it of items) {
-    if (it.children && it.children.length > 0) {
-      out.add(it.id);
-      collectBranchIds(it.children, out);
-    }
-  }
-}
-function flattenTree(items, depth, expandedItems, out) {
-  for (const it of items) {
-    const hasChildren = !!it.children && it.children.length > 0;
-    const expanded = hasChildren && expandedItems.has(it.id);
-    out.push({ item: it, depth, hasChildren, expanded });
-    if (expanded) flattenTree(it.children, depth + 1, expandedItems, out);
-  }
-}
-function collectHits(items, ancestors, q, out) {
-  for (const it of items) {
-    if (it.children && it.children.length > 0) {
-      collectHits(it.children, [...ancestors, it.label], q, out);
-    } else {
-      const path = [...ancestors, it.label].join(" / ");
-      const hay = `${it.label} ${it.description ?? ""} ${path} ${it.insertValue ?? ""}`.toLowerCase();
-      if (hay.includes(q)) out.push({ item: it, ancestors });
-    }
-  }
-}
-function FxPanel({
-  categories,
-  title = "Data References",
-  hint = "Drag onto a field, or click an item to insert it.",
-  search: controlledSearch,
-  defaultSearch = "",
-  onSearchChange,
-  expandedCategory: controlledExpanded,
-  defaultExpandedCategory,
-  onExpandedCategoryChange,
-  onClose,
-  onItemDragStart,
-  onItemSelect,
-  width = 300,
-  emptyLabel = "No matches",
-  searchPlaceholder = "Search fields, functions & variables\u2026",
-  className,
-  style
-}) {
-  const [internalSearch, setInternalSearch] = useState5(defaultSearch);
-  const search = controlledSearch ?? internalSearch;
-  const query = search.trim().toLowerCase();
-  const setSearch = (next) => {
-    if (controlledSearch === void 0) setInternalSearch(next);
-    onSearchChange?.(next);
-  };
-  const visibleCategories = useMemo3(
-    () => categories.filter((c) => c.items.length > 0),
-    [categories]
-  );
-  const [internalCat, setInternalCat] = useState5(
-    defaultExpandedCategory !== void 0 ? defaultExpandedCategory : visibleCategories[0]?.id ?? null
-  );
-  const openCategoryId = controlledExpanded ?? internalCat;
-  const setOpenCategory = (id) => {
-    if (controlledExpanded === void 0) setInternalCat(id);
-    onExpandedCategoryChange?.(id);
-  };
-  const [expandedItems, setExpandedItems] = useState5(() => {
-    const ids = /* @__PURE__ */ new Set();
-    for (const cat of categories) {
-      for (const item of cat.items) {
-        if (item.children && item.children.length > 0) ids.add(item.id);
-      }
-    }
-    return ids;
-  });
-  const toggleItem = (id) => {
-    setExpandedItems((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-  const setCategoryExpansion = (cat, expand) => {
-    const branchIds = /* @__PURE__ */ new Set();
-    collectBranchIds(cat.items, branchIds);
-    setExpandedItems((prev) => {
-      const next = new Set(prev);
-      for (const id of branchIds) {
-        if (expand) next.add(id);
-        else next.delete(id);
-      }
-      return next;
-    });
-  };
-  const [draggingId, setDraggingId] = useState5(null);
-  const [focusedId, setFocusedId] = useState5(null);
-  const hits = useMemo3(() => {
-    if (!query) return null;
-    const all = [];
-    for (const cat of visibleCategories) {
-      const out = [];
-      collectHits(cat.items, [], query, out);
-      for (const hit of out) all.push({ category: cat, hit });
-    }
-    return all;
-  }, [query, visibleCategories]);
-  const handleDragStart = (item, category) => (e) => {
-    setDraggingId(item.id);
-    if (onItemDragStart) {
-      onItemDragStart(item, category, e);
-    } else if (item.insertValue) {
-      e.dataTransfer.setData("text/plain", item.insertValue);
-      e.dataTransfer.setData("application/x-fx-insert", item.insertValue);
-      e.dataTransfer.setData(
-        "application/x-fx-type",
-        category.kind ?? "function"
-      );
-      e.dataTransfer.effectAllowed = "copy";
+  const tabItems = [
+    {
+      value: "params",
+      label: paramCount ? `Params \xB7 ${paramCount}` : "Params",
+      icon: /* @__PURE__ */ jsx4(ListIcon, { size: "sm" }),
+      children: paramsTab
+    },
+    {
+      value: "headers",
+      label: headerCount ? `Headers \xB7 ${headerCount}` : "Headers",
+      icon: /* @__PURE__ */ jsx4(TagIcon, { size: "sm" }),
+      children: headersTab
+    },
+    {
+      value: "body",
+      label: bodyMode === "none" ? "Body" : `Body \xB7 ${bodyMode === "form-data" ? "form" : bodyMode}`,
+      icon: /* @__PURE__ */ jsx4(CodeIcon, { size: "sm" }),
+      children: bodyTab
+    },
+    {
+      value: "auth",
+      label: auth.type === "none" ? "Auth" : `Auth \xB7 ${auth.type}`,
+      icon: /* @__PURE__ */ jsx4(LockedIcon, { size: "sm" }),
+      children: authTab
+    },
+    {
+      value: "response",
+      label: responseType === "json" ? "Response" : `Response \xB7 ${responseType}`,
+      icon: /* @__PURE__ */ jsx4(DataViewAltIcon, { size: "sm" }),
+      children: responseTab
     }
-  };
-  const listRef = useRef5(null);
-  const focusRow = (id) => {
-    setFocusedId(id);
-    requestAnimationFrame(() => {
-      listRef.current?.querySelector(`[data-fx-row="${CSS.escape(id)}"]`)?.focus();
-    });
-  };
-  const onRowKeyDown = (e, rows, row, category) => {
-    const idx = rows.findIndex((r) => r.item.id === row.item.id);
-    if (idx < 0) return;
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        if (idx < rows.length - 1) focusRow(rows[idx + 1].item.id);
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        if (idx > 0) focusRow(rows[idx - 1].item.id);
-        break;
-      case "ArrowRight":
-        if (row.hasChildren) {
-          e.preventDefault();
-          if (!row.expanded) toggleItem(row.item.id);
-          else if (idx < rows.length - 1) focusRow(rows[idx + 1].item.id);
+  ];
+  return /* @__PURE__ */ jsxs4("div", { className: cn("ods-http-panel", className), children: [
+    connections && /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__source", children: [
+      /* @__PURE__ */ jsx4(
+        Select,
+        {
+          id: `${uid}-connection`,
+          label: "Source",
+          placeholder: connectionsLoading ? "Loading\u2026" : "No connection (manual config)",
+          options: connections.map((c) => ({ value: c.id, label: c.name, icon: c.icon })),
+          value: connectionId,
+          onChange: (next) => emit({ connectionId: next || void 0 }),
+          disabled: disabled || connectionsLoading,
+          helperText: connectionId ? `Base URL and auth are inherited from "${selectedConnection?.name}" at runtime.` : "Select a saved API connection to inherit base URL and auth, or configure manually."
         }
-        break;
-      case "ArrowLeft":
-        if (row.hasChildren && row.expanded) {
-          e.preventDefault();
-          toggleItem(row.item.id);
-        } else {
-          for (let i = idx - 1; i >= 0; i--) {
-            if (rows[i].depth < row.depth) {
-              e.preventDefault();
-              focusRow(rows[i].item.id);
-              break;
-            }
+      ),
+      connectionId && endpoints.length > 0 && /* @__PURE__ */ jsx4(
+        Combobox,
+        {
+          ariaLabel: "Endpoint",
+          placeholder: `Search ${endpoints.length} discovered endpoints\u2026`,
+          value: url,
+          creatable: true,
+          options: endpoints.map((e) => ({
+            value: e.path,
+            label: `${e.method}  ${e.path}`,
+            description: e.summary
+          })),
+          onChange: (nextPath) => {
+            const match = endpoints.find((e) => e.path === nextPath);
+            validateUrl(nextPath, baseUrl, true);
+            emit(
+              match && HTTP_METHODS.includes(match.method.toUpperCase()) ? { url: nextPath, method: match.method.toUpperCase() } : { url: nextPath }
+            );
           }
         }
-        break;
-      case "Home":
-        e.preventDefault();
-        if (rows.length) focusRow(rows[0].item.id);
-        break;
-      case "End":
-        e.preventDefault();
-        if (rows.length) focusRow(rows[rows.length - 1].item.id);
-        break;
-      case "Enter":
-      case " ":
-        e.preventDefault();
-        if (row.hasChildren) toggleItem(row.item.id);
-        else onItemSelect?.(row.item, category);
-        break;
-      default:
-        break;
-    }
-  };
-  const searchRows = useMemo3(
-    () => hits ? hits.map(({ hit }) => ({
-      item: hit.item,
-      depth: 0,
-      hasChildren: false,
-      expanded: false
-    })) : [],
-    [hits]
-  );
-  const renderRow = (row, category, rows, crumb) => {
-    const { item, depth, hasChildren, expanded } = row;
-    const mono = category.kind === "function";
-    const draggable = !!item.insertValue;
-    const isFocused = focusedId === item.id;
-    const showsReference = !!item.insertValue && !item.insertValue.trim().startsWith("ods://");
-    const tip = /* @__PURE__ */ jsxs3("span", { className: "ods-flow-fx-panel__tip", children: [
-      /* @__PURE__ */ jsxs3("span", { className: "ods-flow-fx-panel__tip-head", children: [
-        /* @__PURE__ */ jsx3(
-          "span",
-          {
-            className: cn(
-              "ods-flow-fx-panel__tip-label",
-              mono && "ods-flow-fx-panel__tip-label--mono"
-            ),
-            children: item.label
-          }
-        ),
-        item.valueType && /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__tip-type", children: item.valueType })
+      )
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__bar", children: [
+      /* @__PURE__ */ jsx4(
+        Select,
+        {
+          id: `${uid}-method`,
+          "aria-label": "HTTP method",
+          className: cn(
+            "ods-http-panel__method",
+            `ods-http-panel__method--${method.toLowerCase()}`
+          ),
+          value: method,
+          onChange: (next) => emit({ method: next }),
+          disabled,
+          options: HTTP_METHODS.map((m) => ({ value: m, label: m }))
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        Input,
+        {
+          id: `${uid}-url`,
+          "aria-label": connectionId ? "Path" : "URL",
+          "data-fx-droppable": "true",
+          className: "ods-http-panel__url",
+          value: url,
+          placeholder: connectionId ? "/v1/users" : "https://api.example.com/v1/users or {{var}}",
+          error: Boolean(urlError),
+          errorMessage: urlError,
+          onChange: (e) => {
+            validateUrl(e.target.value, baseUrl, Boolean(connectionId));
+            emit({ url: e.target.value });
+          },
+          disabled
+        }
+      ),
+      onSendPreview && /* @__PURE__ */ jsx4(
+        Button,
+        {
+          variant: "primary",
+          size: "md",
+          leftIcon: preview.phase === "loading" ? void 0 : /* @__PURE__ */ jsx4(PlayIcon, { size: "sm" }),
+          onClick: sendPreview,
+          disabled: !canSend,
+          children: preview.phase === "loading" ? "Sending\u2026" : "Send"
+        }
+      )
+    ] }),
+    !connectionId && baseUrl && /* @__PURE__ */ jsxs4("p", { className: "ods-http-panel__effective", children: [
+      /* @__PURE__ */ jsx4("span", { children: "Effective URL:" }),
+      " ",
+      /* @__PURE__ */ jsx4("code", { children: fullUrl || "\u2014" })
+    ] }),
+    fullUrl.includes("{{") && /* @__PURE__ */ jsxs4("p", { className: "ods-http-panel__desc", children: [
+      "\u26A0 URL contains ",
+      /* @__PURE__ */ jsx4("code", { children: "{{variables}}" }),
+      " \u2014 they resolve at run time; testing needs literal values."
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__tools", children: [
+      /* @__PURE__ */ jsxs4("span", { className: "ods-http-panel__hint", children: [
+        "Use ",
+        /* @__PURE__ */ jsx4("code", { children: "{{stepName.fieldPath}}" }),
+        " to insert data from upstream steps."
       ] }),
-      item.description && /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__tip-desc", children: item.description }),
-      showsReference && /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__tip-ref", children: item.insertValue })
-    ] });
-    return /* @__PURE__ */ jsx3(
-      Tooltip,
-      {
-        content: tip,
-        position: "left",
-        disabled: !item.description && !showsReference,
-        children: /* @__PURE__ */ jsxs3(
-          "div",
+      /* @__PURE__ */ jsxs4("span", { className: "ods-http-panel__tools-actions", children: [
+        /* @__PURE__ */ jsx4(Button, { variant: "ghost", size: "sm", onClick: () => setCurlOpen((o) => !o), children: "Import cURL" }),
+        /* @__PURE__ */ jsx4(
+          Button,
           {
-            "data-fx-row": item.id,
-            className: cn(
-              "ods-flow-fx-panel__row",
-              hasChildren ? "ods-flow-fx-panel__row--branch" : "ods-flow-fx-panel__row--leaf",
-              draggingId === item.id && "ods-flow-fx-panel__row--dragging",
-              isFocused && "ods-flow-fx-panel__row--focused"
-            ),
-            role: "treeitem",
-            "aria-expanded": hasChildren ? expanded : void 0,
-            "aria-level": depth + 1,
-            tabIndex: isFocused || focusedId === null && rows[0]?.item.id === item.id ? 0 : -1,
-            draggable,
-            onDragStart: draggable ? handleDragStart(item, category) : void 0,
-            onDragEnd: () => setDraggingId(null),
-            onFocus: () => setFocusedId(item.id),
-            onKeyDown: (e) => onRowKeyDown(e, rows, row, category),
-            onClick: () => {
-              if (hasChildren) toggleItem(item.id);
-              else onItemSelect?.(item, category);
-            },
-            children: [
-              Array.from({ length: depth }, (_, i) => /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__indent", "aria-hidden": "true" }, i)),
-              hasChildren ? /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__twisty", "aria-hidden": "true", children: expanded ? /* @__PURE__ */ jsx3(ChevronDownIcon, { size: "sm" }) : /* @__PURE__ */ jsx3(ChevronRightIcon, { size: "sm" }) }) : /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__grip", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(DraggableIcon, { size: "sm" }) }),
-              /* @__PURE__ */ jsxs3("span", { className: "ods-flow-fx-panel__row-main", children: [
-                /* @__PURE__ */ jsxs3("span", { className: "ods-flow-fx-panel__row-line", children: [
-                  mono ? /* @__PURE__ */ jsx3("code", { className: "ods-flow-fx-panel__row-label ods-flow-fx-panel__row-label--mono", children: item.label }) : /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__row-label", children: item.label }),
-                  item.valueType && /* @__PURE__ */ jsx3(
-                    "span",
-                    {
-                      className: cn(
-                        "ods-flow-fx-panel__type",
-                        `ods-flow-fx-panel__type--${item.valueType}`
-                      ),
-                      children: item.valueType
-                    }
-                  )
-                ] }),
-                (item.description || crumb) && /* @__PURE__ */ jsxs3("span", { className: "ods-flow-fx-panel__row-sub", children: [
-                  crumb && /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__crumb", children: crumb }),
-                  item.description
-                ] })
-              ] })
-            ]
-          }
-        )
-      },
-      item.id
-    );
-  };
-  return /* @__PURE__ */ jsxs3(
-    "aside",
-    {
-      className: cn("ods-flow-fx-panel", className),
-      style: { width, ...style },
-      "aria-label": typeof title === "string" ? title : "Data References",
-      children: [
-        /* @__PURE__ */ jsxs3("header", { className: "ods-flow-fx-panel__header", children: [
-          /* @__PURE__ */ jsx3("h3", { className: "ods-flow-fx-panel__title", children: title }),
-          onClose && /* @__PURE__ */ jsx3(
-            "button",
-            {
-              type: "button",
-              className: "ods-flow-fx-panel__close",
-              onClick: onClose,
-              "aria-label": "Close data references",
-              children: /* @__PURE__ */ jsx3(CloseIcon, { size: "sm" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "ods-flow-fx-panel__search", children: [
-          /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__search-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(SearchIcon, { size: "sm" }) }),
-          /* @__PURE__ */ jsx3(
-            "input",
+            variant: "ghost",
+            size: "sm",
+            className: cn(copiedCurl && "ods-http-panel__copy-done"),
+            leftIcon: copiedCurl ? /* @__PURE__ */ jsx4(CheckmarkIcon, { size: "sm" }) : /* @__PURE__ */ jsx4(CopyIcon, { size: "sm" }),
+            onClick: copyCurl,
+            children: copiedCurl ? "Copied" : "Copy as cURL"
+          }
+        )
+      ] })
+    ] }),
+    curlOpen && /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__curl", children: [
+      /* @__PURE__ */ jsx4(
+        CodeEditor,
+        {
+          value: curlText,
+          language: "plain",
+          onChange: setCurlText,
+          minHeight: 90,
+          showLineNumbers: false,
+          placeholder: "curl -X POST 'https://api.example.com/v1/users' -H 'Authorization: Bearer \u2026' -d '{\u2026}'",
+          ariaLabel: "cURL command"
+        }
+      ),
+      curlError && /* @__PURE__ */ jsxs4("p", { className: "ods-http-panel__error", children: [
+        "\u26A0 ",
+        curlError
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__curl-actions", children: [
+        /* @__PURE__ */ jsx4(Button, { variant: "secondary", size: "sm", onClick: () => setCurlOpen(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx4(Button, { variant: "primary", size: "sm", onClick: applyCurl, disabled: !curlText.trim(), children: "Apply to request" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4(Tabs, { items: tabItems, defaultValue: "params", className: "ods-http-panel__tabs" }),
+    /* @__PURE__ */ jsxs4(
+      Disclosure,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsx4(GlobeIcon, { size: "sm" }),
+        title: "Advanced options",
+        description: "Base URL, timeout, retries, pagination, response extraction",
+        trailing: advancedSummary.length ? /* @__PURE__ */ jsx4(Badge, { size: "sm", variant: "info", children: advancedSummary.join(" \xB7 ") }) : void 0,
+        children: [
+          /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__grid", children: [
+            !connectionId && /* @__PURE__ */ jsx4(
+              Input,
+              {
+                id: `${uid}-base-url`,
+                label: "Base URL (optional)",
+                value: baseUrl,
+                placeholder: "https://api.example.com",
+                helperText: "Combined with the request path to form the full URL.",
+                onChange: (e) => {
+                  validateUrl(url, e.target.value, Boolean(connectionId));
+                  emit({ baseUrl: e.target.value || void 0 });
+                },
+                disabled
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              NumberInput,
+              {
+                label: "Timeout (ms)",
+                helperText: "Minimum 1000 ms",
+                value: cfg.timeout ?? 3e4,
+                min: 1e3,
+                step: 1e3,
+                onChange: (next) => {
+                  if (!Number.isNaN(next) && next >= 1e3) emit({ timeout: next });
+                },
+                disabled
+              }
+            ),
+            /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__switches", children: [
+              /* @__PURE__ */ jsx4(
+                Switch,
+                {
+                  id: `${uid}-fail`,
+                  label: "Fail on non-2xx",
+                  checked: cfg.failOnError !== false,
+                  onChange: (next) => emit({ failOnError: next }),
+                  disabled,
+                  size: "sm"
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                Switch,
+                {
+                  id: `${uid}-redirects`,
+                  label: "Follow redirects",
+                  checked: cfg.followRedirects !== false,
+                  onChange: (next) => emit({ followRedirects: next }),
+                  disabled,
+                  size: "sm"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx4(
+            Disclosure,
             {
-              type: "text",
-              className: "ods-flow-fx-panel__search-input",
-              placeholder: searchPlaceholder,
-              "aria-label": "Search fields, functions and variables",
-              value: search,
-              onChange: (e) => setSearch(e.target.value)
+              size: "sm",
+              title: "Retry",
+              trailing: (retry?.maxAttempts ?? 1) > 1 ? /* @__PURE__ */ jsxs4(Badge, { size: "sm", variant: "info", children: [
+                retry?.maxAttempts,
+                " attempts"
+              ] }) : void 0,
+              children: /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__grid", children: [
+                /* @__PURE__ */ jsx4(
+                  NumberInput,
+                  {
+                    label: "Max attempts",
+                    helperText: "1 = no retry",
+                    value: retry?.maxAttempts ?? 1,
+                    min: 1,
+                    max: 10,
+                    onChange: (next) => {
+                      if (!Number.isNaN(next) && next >= 1 && retry) {
+                        emit({ retry: { ...retry, maxAttempts: next } });
+                      }
+                    },
+                    disabled
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  Input,
+                  {
+                    id: `${uid}-retry-on`,
+                    label: "Retry on (status codes)",
+                    value: retryOnText,
+                    placeholder: "429, 500, 502, 503, 504",
+                    helperText: "Comma-separated HTTP status codes",
+                    onChange: (e) => {
+                      setRetryOnText(e.target.value);
+                      const codes = e.target.value.split(",").map((s) => Number.parseInt(s.trim(), 10)).filter((n) => !Number.isNaN(n));
+                      if (retry) emit({ retry: { ...retry, retryOn: codes } });
+                    },
+                    disabled
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  NumberInput,
+                  {
+                    label: "Initial delay (ms)",
+                    value: retry?.initialDelayMs ?? 1e3,
+                    min: 100,
+                    step: 100,
+                    onChange: (next) => {
+                      if (!Number.isNaN(next) && retry)
+                        emit({ retry: { ...retry, initialDelayMs: next } });
+                    },
+                    disabled
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  NumberInput,
+                  {
+                    label: "Backoff factor",
+                    helperText: "Delay multiplies by this each retry",
+                    value: retry?.backoffFactor ?? 2,
+                    min: 1,
+                    step: 0.5,
+                    onChange: (next) => {
+                      if (!Number.isNaN(next) && retry)
+                        emit({ retry: { ...retry, backoffFactor: next } });
+                    },
+                    disabled
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  NumberInput,
+                  {
+                    label: "Max delay (ms)",
+                    value: retry?.maxDelayMs ?? 3e4,
+                    min: 1e3,
+                    step: 1e3,
+                    onChange: (next) => {
+                      if (!Number.isNaN(next) && retry) emit({ retry: { ...retry, maxDelayMs: next } });
+                    },
+                    disabled
+                  }
+                )
+              ] })
             }
           ),
-          search && /* @__PURE__ */ jsx3(
-            "button",
+          /* @__PURE__ */ jsxs4(
+            Disclosure,
             {
-              type: "button",
-              className: "ods-flow-fx-panel__search-clear",
-              onClick: () => setSearch(""),
-              "aria-label": "Clear search",
-              children: /* @__PURE__ */ jsx3(CloseIcon, { size: "sm" })
-            }
-          )
-        ] }),
-        hint && !query && /* @__PURE__ */ jsx3("p", { className: "ods-flow-fx-panel__hint", children: hint }),
-        /* @__PURE__ */ jsxs3("div", { className: "ods-flow-fx-panel__list", ref: listRef, role: "tree", children: [
-          query && hits && (hits.length > 0 ? /* @__PURE__ */ jsxs3("div", { className: "ods-flow-fx-panel__results", children: [
-            /* @__PURE__ */ jsxs3("div", { className: "ods-flow-fx-panel__results-count", children: [
-              hits.length,
-              " ",
-              hits.length === 1 ? "match" : "matches"
-            ] }),
-            hits.map(
-              ({ category, hit }, i) => renderRow(
-                searchRows[i],
-                category,
-                searchRows,
-                hit.ancestors.length ? hit.ancestors.join(" / ") : category.label
-              )
-            )
-          ] }) : /* @__PURE__ */ jsx3("div", { className: "ods-flow-fx-panel__empty", children: emptyLabel })),
-          !query && visibleCategories.map((cat) => {
-            const isOpen = openCategoryId === cat.id;
-            const kind = cat.kind ?? "function";
-            const KindIcon = KIND_ICON[kind];
-            const branchIds = /* @__PURE__ */ new Set();
-            collectBranchIds(cat.items, branchIds);
-            const hasTree = branchIds.size > 0;
-            const rows = [];
-            if (isOpen) flattenTree(cat.items, 0, expandedItems, rows);
-            const allExpanded = hasTree && [...branchIds].every((id) => expandedItems.has(id));
-            return /* @__PURE__ */ jsxs3("div", { className: "ods-flow-fx-panel__category", children: [
-              /* @__PURE__ */ jsxs3(
-                "div",
-                {
-                  className: cn(
-                    "ods-flow-fx-panel__cat-header",
-                    isOpen && "ods-flow-fx-panel__cat-header--open"
+              size: "sm",
+              title: "Pagination",
+              trailing: pagination.type !== "none" ? /* @__PURE__ */ jsx4(Badge, { size: "sm", variant: "success", children: pagination.type.replace("_", " ") }) : void 0,
+              children: [
+                /* @__PURE__ */ jsx4(
+                  Select,
+                  {
+                    id: `${uid}-pag-type`,
+                    label: "Strategy",
+                    value: pagination.type,
+                    onChange: (next) => emit({
+                      pagination: { ...pagination, type: next }
+                    }),
+                    disabled,
+                    options: [
+                      { value: "none", label: "None (single request)" },
+                      { value: "offset", label: "Offset / page number" },
+                      { value: "cursor", label: "Cursor-based" },
+                      { value: "link_header", label: 'Link header (rel="next")' },
+                      { value: "next_url", label: "Next URL in response body" }
+                    ]
+                  }
+                ),
+                pagination.type !== "none" && /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__grid", children: [
+                  /* @__PURE__ */ jsx4(
+                    NumberInput,
+                    {
+                      label: "Max pages",
+                      helperText: "Safety cap against infinite loops",
+                      value: pagination.maxPages ?? 20,
+                      min: 1,
+                      onChange: (next) => {
+                        if (!Number.isNaN(next)) emit({ pagination: { ...pagination, maxPages: next } });
+                      },
+                      disabled
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(
+                    Input,
+                    {
+                      id: `${uid}-pag-merge`,
+                      label: "Merge key (dot path)",
+                      value: pagination.mergeKey ?? "",
+                      placeholder: "data.items",
+                      helperText: "Array to merge across pages",
+                      onChange: (e) => emit({ pagination: { ...pagination, mergeKey: e.target.value } }),
+                      disabled
+                    }
+                  ),
+                  (pagination.type === "offset" || pagination.type === "cursor") && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                    /* @__PURE__ */ jsx4(
+                      Input,
+                      {
+                        id: `${uid}-pag-limitp`,
+                        label: "Limit param",
+                        value: pagination.limitParam ?? "limit",
+                        onChange: (e) => emit({ pagination: { ...pagination, limitParam: e.target.value } }),
+                        disabled
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4(
+                      NumberInput,
+                      {
+                        label: "Page size",
+                        value: pagination.limitValue ?? 100,
+                        min: 1,
+                        onChange: (next) => {
+                          if (!Number.isNaN(next)) {
+                            emit({ pagination: { ...pagination, limitValue: next } });
+                          }
+                        },
+                        disabled
+                      }
+                    )
+                  ] }),
+                  pagination.type === "offset" && /* @__PURE__ */ jsx4(
+                    Input,
+                    {
+                      id: `${uid}-pag-offset`,
+                      label: "Offset param",
+                      value: pagination.offsetParam ?? "offset",
+                      onChange: (e) => emit({ pagination: { ...pagination, offsetParam: e.target.value } }),
+                      disabled
+                    }
                   ),
-                  children: [
-                    /* @__PURE__ */ jsxs3(
-                      "button",
+                  pagination.type === "cursor" && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                    /* @__PURE__ */ jsx4(
+                      Input,
                       {
-                        type: "button",
-                        className: "ods-flow-fx-panel__cat-toggle",
-                        "aria-expanded": isOpen,
-                        onClick: () => setOpenCategory(isOpen ? null : cat.id),
-                        children: [
-                          /* @__PURE__ */ jsx3(
-                            ChevronRightIcon,
-                            {
-                              size: "sm",
-                              className: cn(
-                                "ods-flow-fx-panel__chevron",
-                                isOpen && "ods-flow-fx-panel__chevron--open"
-                              )
-                            }
-                          ),
-                          /* @__PURE__ */ jsxs3(
-                            "span",
-                            {
-                              className: cn(
-                                "ods-flow-fx-panel__badge",
-                                `ods-flow-fx-panel__badge--${kind}`
-                              ),
-                              children: [
-                                /* @__PURE__ */ jsx3(
-                                  KindIcon,
-                                  {
-                                    size: "sm",
-                                    className: "ods-flow-fx-panel__badge-icon"
-                                  }
-                                ),
-                                cat.label
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-panel__count", children: countLeaves(cat.items) })
-                        ]
+                        id: `${uid}-pag-cres`,
+                        label: "Cursor in response (dot path)",
+                        value: pagination.cursorResponsePath ?? "",
+                        placeholder: "meta.next_cursor",
+                        onChange: (e) => emit({ pagination: { ...pagination, cursorResponsePath: e.target.value } }),
+                        disabled
                       }
                     ),
-                    isOpen && hasTree && /* @__PURE__ */ jsx3(
-                      "button",
+                    /* @__PURE__ */ jsx4(
+                      Input,
                       {
-                        type: "button",
-                        className: "ods-flow-fx-panel__cat-action",
-                        "aria-label": allExpanded ? "Collapse all" : "Expand all",
-                        title: allExpanded ? "Collapse all" : "Expand all",
-                        onClick: () => setCategoryExpansion(cat, !allExpanded),
-                        children: allExpanded ? /* @__PURE__ */ jsx3(CollapseAllIcon, { size: "sm" }) : /* @__PURE__ */ jsx3(ExpandAllIcon, { size: "sm" })
+                        id: `${uid}-pag-creq`,
+                        label: "Cursor request param",
+                        value: pagination.cursorRequestParam ?? "cursor",
+                        onChange: (e) => emit({ pagination: { ...pagination, cursorRequestParam: e.target.value } }),
+                        disabled
                       }
                     )
-                  ]
-                }
-              ),
-              isOpen && /* @__PURE__ */ jsx3(
-                "div",
-                {
-                  className: "ods-flow-fx-panel__rows",
-                  role: "group",
-                  "aria-label": cat.label,
-                  children: rows.map((row) => renderRow(row, cat, rows))
-                }
-              )
-            ] }, cat.id);
-          })
-        ] })
-      ]
-    }
-  );
-}
-
-// src/workflow/components/FxPanel/DataRefButton.tsx
-import { DataReferenceIcon } from "@octaviaflow/icons";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function DataRefButton({
-  active = false,
-  label = "Data ref",
-  className,
-  type = "button",
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxs4(
-    "button",
-    {
-      ...rest,
-      type,
-      className: cn(
-        "ods-flow-dataref-button",
-        active && "ods-flow-dataref-button--active",
-        label == null && "ods-flow-dataref-button--icon-only",
-        className
-      ),
-      "aria-pressed": active,
-      title: active ? "Hide data references" : "Show data references",
-      children: [
+                  ] }),
+                  pagination.type === "next_url" && /* @__PURE__ */ jsx4(
+                    Input,
+                    {
+                      id: `${uid}-pag-next`,
+                      label: "Next URL in response (dot path)",
+                      value: pagination.nextUrlResponsePath ?? "",
+                      placeholder: "links.next",
+                      onChange: (e) => emit({ pagination: { ...pagination, nextUrlResponsePath: e.target.value } }),
+                      disabled
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs4(
+            Disclosure,
+            {
+              size: "sm",
+              title: "Response field extraction",
+              trailing: extractCount > 0 ? /* @__PURE__ */ jsxs4(Badge, { size: "sm", variant: "info", children: [
+                extractCount,
+                " field",
+                extractCount === 1 ? "" : "s"
+              ] }) : void 0,
+              children: [
+                /* @__PURE__ */ jsxs4("p", { className: "ods-http-panel__desc", children: [
+                  "Extract fields from the response with dot paths \u2014 available downstream as",
+                  " ",
+                  /* @__PURE__ */ jsx4("code", { children: "{{extracted.keyName}}" }),
+                  "."
+                ] }),
+                /* @__PURE__ */ jsx4(
+                  KeyValueEditor,
+                  {
+                    pairs: extractRows.map((r) => ({ key: r.key, value: r.value })),
+                    onChange: (pairs) => {
+                      const rows = pairs.map((p) => ({ key: p.key, value: p.value, enabled: true }));
+                      setExtractRows(rows);
+                      const extract = {};
+                      for (const r of rows) if (r.key && r.value) extract[r.key] = r.value;
+                      emit({ extract: Object.keys(extract).length ? extract : void 0 });
+                    },
+                    keyPlaceholder: "outputKey",
+                    valuePlaceholder: "data.user.id",
+                    emptyLabel: "No extractions yet \u2014 click Add to begin.",
+                    addLabel: "Add",
+                    size: "sm",
+                    disabled
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    preview.phase !== "idle" && /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__console", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__console-head", children: [
         /* @__PURE__ */ jsx4(
-          DataReferenceIcon,
+          "code",
+          {
+            className: cn(
+              "ods-http-panel__console-method",
+              `ods-http-panel__method--${method.toLowerCase()}`
+            ),
+            children: cfg.apiType === "graphql" ? "POST" : method
+          }
+        ),
+        /* @__PURE__ */ jsx4("code", { className: "ods-http-panel__console-url", children: connectionId ? `${selectedConnection?.name ?? connectionId} \xB7 ${url || "\u2014"}` : fullUrl || "\u2014" }),
+        sectionCopyButton(fullUrl || url, "url", "request URL"),
+        preview.phase === "success" && /* @__PURE__ */ jsx4(
+          Button,
           {
+            variant: "ghost",
             size: "sm",
-            className: "ods-flow-dataref-button__icon"
+            className: cn(copiedResult && "ods-http-panel__copy-done"),
+            leftIcon: copiedResult ? /* @__PURE__ */ jsx4(CheckmarkIcon, { size: "sm" }) : /* @__PURE__ */ jsx4(CopyIcon, { size: "sm" }),
+            onClick: copyResult,
+            children: copiedResult ? "Copied" : "Copy result"
           }
         ),
-        label != null && /* @__PURE__ */ jsx4("span", { className: "ods-flow-dataref-button__label", children: label })
-      ]
-    }
-  );
+        /* @__PURE__ */ jsx4(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            leftIcon: /* @__PURE__ */ jsx4(RenewIcon, { size: "sm" }),
+            onClick: () => {
+              setPreview({ phase: "idle" });
+            },
+            disabled: preview.phase === "loading",
+            children: "Clear"
+          }
+        )
+      ] }),
+      preview.phase === "loading" && /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__console-loading", children: [
+        /* @__PURE__ */ jsx4(Spinner, { size: "sm" }),
+        /* @__PURE__ */ jsx4("span", { children: "Sending request\u2026" })
+      ] }),
+      preview.phase === "error" && /* @__PURE__ */ jsxs4(Banner, { variant: "error", appearance: "subtle", size: "sm", children: [
+        /* @__PURE__ */ jsx4("strong", { children: "Request failed." }),
+        " ",
+        preview.message
+      ] }),
+      preview.phase === "success" && /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__console-result", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__console-status", children: [
+          /* @__PURE__ */ jsxs4(Badge, { size: "sm", variant: statusTone(preview.response.status), children: [
+            preview.response.status,
+            " ",
+            preview.response.statusText
+          ] }),
+          /* @__PURE__ */ jsxs4("span", { className: "ods-http-panel__meta", children: [
+            preview.response.duration,
+            "ms"
+          ] }),
+          /* @__PURE__ */ jsx4("span", { className: "ods-http-panel__meta", children: formatBytes(preview.response.size) })
+        ] }),
+        /* @__PURE__ */ jsx4(
+          Accordion,
+          {
+            size: "sm",
+            mode: "multiple",
+            defaultValue: ["res-body"],
+            items: [
+              {
+                id: "res-headers",
+                label: "Response headers",
+                trailing: /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  sectionCopyButton(
+                    Object.entries(preview.response.headers).map(([k, v]) => `${k}: ${v}`).join("\n"),
+                    "res-headers",
+                    "response headers"
+                  ),
+                  /* @__PURE__ */ jsx4(Badge, { size: "sm", variant: "neutral", children: Object.keys(preview.response.headers).length })
+                ] }),
+                content: /* @__PURE__ */ jsx4("div", { className: "ods-http-panel__res-headers", children: Object.entries(preview.response.headers).map(([k, v]) => /* @__PURE__ */ jsxs4("div", { className: "ods-http-panel__res-header", children: [
+                  /* @__PURE__ */ jsx4("span", { className: "ods-http-panel__res-header-key", children: k }),
+                  /* @__PURE__ */ jsx4("span", { className: "ods-http-panel__res-header-val", children: v })
+                ] }, k)) })
+              },
+              {
+                id: "res-body",
+                label: "Response body",
+                trailing: /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  sectionCopyButton(
+                    typeof preview.response.body === "object" ? JSON.stringify(preview.response.body, null, 2) : String(preview.response.bodyRaw ?? preview.response.body ?? ""),
+                    "res-body",
+                    "response body"
+                  ),
+                  !preview.response.ok && /* @__PURE__ */ jsx4(Badge, { size: "sm", variant: "error", children: "Error" })
+                ] }),
+                content: (
+                  // Size guard: the tree view renders recursively (no
+                  // virtualization) — very large bodies fall back to text.
+                  preview.response.body !== null && typeof preview.response.body === "object" && preview.response.size <= 15e5 ? /* @__PURE__ */ jsx4(
+                    JsonViewer,
+                    {
+                      data: preview.response.body,
+                      mode: "view",
+                      maxHeight: 320,
+                      copyable: true
+                    }
+                  ) : /* @__PURE__ */ jsx4("pre", { className: "ods-http-panel__res-body", children: typeof preview.response.body === "object" ? JSON.stringify(preview.response.body, null, 2) : String(
+                    preview.response.bodyRaw ?? preview.response.body ?? "(empty body)"
+                  ) })
+                )
+              }
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
 }
 
 // src/workflow/components/NodeToolbar/NodeToolbar.tsx