@burdenoff/fluidgrids-fe-sdk 2026.624.2 → 2026.626.1

package/dist/{chunk-EVUQS7DK.js → chunk-QANP2YKX.js}

@@ -1,7 +1,7 @@
-import { registerWorkflowNodeTypes, ensureNodeConfigsLoaded, onNodeTypesUpdate, NODE_TYPES, getNodeMetadata, useNodeExecution, AVAILABLE_NODES, createNodeWithDefaultData, NODES_METADATA, isNodeConfigsInitialized, HeaderWithIcon, useInstalledNodes, useInstallNode, useRefreshAvailableNodes, getNodeDetail, NODES, NodePropertyPanel, NODE_CONFIGS, ConnectionSelector } from './chunk-2YP4QVEZ.js';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Input as Input$1 } from './chunk-7VEOUEIN.js';
+import { registerWorkflowNodeTypes, ensureNodeConfigsLoaded, onNodeTypesUpdate, NODE_TYPES, getNodeMetadata, useNodeExecution, getNodeDetail, AVAILABLE_NODES, createNodeWithDefaultData, NODES_METADATA, NODE_CONFIGS, isNodeConfigsInitialized, HeaderWithIcon, useInstalledNodes, useInstallNode, useRefreshAvailableNodes, NODES, NodePropertyPanel, ConnectionSelector } from './chunk-KBHRFZXR.js';
+import { Dialog as Dialog$1, DialogContent as DialogContent$1, DialogHeader as DialogHeader$1, DialogTitle as DialogTitle$1, DialogDescription as DialogDescription$1, DialogFooter, Input as Input$1 } from './chunk-7VEOUEIN.js';
 import { cn, Badge as Badge$1, Button } from './chunk-Z54K22LP.js';
-import { useFlowStore } from './chunk-Z2ZEVYDE.js';
+import { useFlowStore } from './chunk-KU64CCSV.js';
 import { useLazyWorkflowDefinition, useCreateWorkflow, useWorkflowVersions, useRestoreWorkflowVersion, useActivateWorkflow, useDeactivateWorkflow } from './chunk-4FFPGQD3.js';
 import { NodeSchemaIntrospectionDocument, UpdateWorkflowDefinitionDocument, CreateWorkflowDefinitionDocument, CreateWorkflowVersionDocument, NodeUsageStatusDocument, RemoveNodeFromWorkflowsDocument } from './chunk-FGYVIXQ7.js';
 import { BrowseWorkflowTemplatesDocument, BrowseWorkflowNodesDocument, UninstallWorkflowNodeDocument, CreateStoreOrderDocument } from './chunk-LUGJJ7LL.js';
@@ -17,7 +17,7 @@ import React3__default, { forwardRef, lazy, memo, createContext, useContext, use
 import { Handle, Position, getBezierPath, MarkerType, ReactFlowProvider, useReactFlow, ReactFlow, Background, useOnSelectionChange, useStore, MiniMap, getSmoothStepPath, EdgeLabelRenderer, getOutgoers, getConnectedEdges, useNodes, useNodesState, useEdgesState, addEdge, Controls, Panel } from '@xyflow/react';
 import { produce } from 'immer';
 import { cn as cn$1 } from '@burdenoff/fe-libs/utils';
-import { Card as Card$1, Badge, CardContent as CardContent$1, Button as Button$1, Input, Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, Popover, PopoverTrigger, PopoverContent, Toaster, Tabs, TabsList, TabsTrigger, TabsContent, CardHeader as CardHeader$1, CardTitle as CardTitle$1, CardDescription as CardDescription$1, ScrollArea, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, Label, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Textarea } from '@burdenoff/fe-libs/ui';
+import { Card as Card$1, Badge, CardContent as CardContent$1, Button as Button$1, Input, Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Popover, PopoverTrigger, PopoverContent, Toaster, Tabs, TabsList, TabsTrigger, TabsContent, CardHeader as CardHeader$1, CardTitle as CardTitle$1, CardDescription as CardDescription$1, ScrollArea, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, Label, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Textarea } from '@burdenoff/fe-libs/ui';
 import { isEmpty } from 'radash';
 import { Icon } from '@iconify/react';
 import { gql } from '@apollo/client';
@@ -2573,18 +2573,18 @@ function TemplatesModal({
   const handleCloseDetailPanel = () => {
     setSelectedTemplate(null);
   };
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
-    DialogContent,
+  return /* @__PURE__ */ jsx(Dialog$1, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    DialogContent$1,
     {
       size: "xl",
       className: "!flex !flex-col !h-[75vh] !max-h-[75vh] min-h-[500px] p-0 gap-0 overflow-hidden",
       children: [
-        /* @__PURE__ */ jsxs(DialogHeader, { className: "px-6 pt-6 pb-4 border-b shrink-0", children: [
+        /* @__PURE__ */ jsxs(DialogHeader$1, { className: "px-6 pt-6 pb-4 border-b shrink-0", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(Sparkles, { className: "size-5 text-primary" }),
-            /* @__PURE__ */ jsx(DialogTitle, { className: "text-2xl", children: "Workflow Templates" })
+            /* @__PURE__ */ jsx(DialogTitle$1, { className: "text-2xl", children: "Workflow Templates" })
           ] }),
-          /* @__PURE__ */ jsx(DialogDescription, { children: "Browse and use pre-built workflow templates to get started quickly" }),
+          /* @__PURE__ */ jsx(DialogDescription$1, { children: "Browse and use pre-built workflow templates to get started quickly" }),
           /* @__PURE__ */ jsx("div", { className: "pt-4", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
             /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" }),
             /* @__PURE__ */ jsx(
@@ -2692,7 +2692,7 @@ function DesktopSidebarFragment({
   const handleUseTemplate = useCallback(
     async (template) => {
       try {
-        const { useImportWorkflowTemplate: useImportWorkflowTemplate2 } = await import('./useImportWorkflowTemplate-PNE2ANBV.js');
+        const { useImportWorkflowTemplate: useImportWorkflowTemplate2 } = await import('./useImportWorkflowTemplate-UTPGK45L.js');
         const { useTemplateDetail: useTemplateDetail2 } = await import('./useTemplateDetail-NK63V3PC.js');
         toast.loading("Loading template...", { id: "template-load" });
         const { getGlobalStoreClient } = await import('./global-client-OW43ZRDR.js');
@@ -9929,9 +9929,9 @@ function TriggerDataDialog({
     setSubmitted(true);
     onExecute({});
   }, [onExecute]);
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-lg", children: [
-    /* @__PURE__ */ jsxs(DialogHeader, { children: [
-      /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsx(Dialog$1, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent$1, { className: "sm:max-w-lg", children: [
+    /* @__PURE__ */ jsxs(DialogHeader$1, { children: [
+      /* @__PURE__ */ jsxs(DialogTitle$1, { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(
           Icon,
           {
@@ -9941,7 +9941,7 @@ function TriggerDataDialog({
         ),
         "Execute Workflow"
       ] }),
-      /* @__PURE__ */ jsx(DialogDescription, { children: "Provide the trigger data (JSON) that will be passed to the first node in the workflow. This is the input your workflow will process." })
+      /* @__PURE__ */ jsx(DialogDescription$1, { children: "Provide the trigger data (JSON) that will be passed to the first node in the workflow. This is the input your workflow will process." })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx(
@@ -10710,6 +10710,714 @@ var ChatPanel = () => {
     }
   );
 };
+
+// src/builder/lib/field-schema.ts
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isIdentifier(key) {
+  return /^[A-Za-z_$][\w$]*$/.test(key);
+}
+function joinPath(base, key) {
+  if (isIdentifier(key)) return base ? `${base}.${key}` : key;
+  const bracket = `[${JSON.stringify(key)}]`;
+  return base ? `${base}${bracket}` : bracket;
+}
+function pathToExpression(path) {
+  if (!path) return "${output}";
+  const accessor = path.startsWith("[") ? `output${path}` : `output.${path}`;
+  return "${" + accessor + "}";
+}
+function fieldFromSpec(key, path, spec) {
+  if (typeof spec === "string") {
+    return { key, path, type: spec };
+  }
+  if (isRecord(spec)) {
+    const declaredType = typeof spec.type === "string" ? spec.type : void 0;
+    const description = typeof spec.description === "string" ? spec.description : void 0;
+    const required = spec.required === true;
+    if (isRecord(spec.properties)) {
+      const children = Object.entries(spec.properties).map(
+        ([k, v]) => fieldFromSpec(k, joinPath(path, k), v)
+      );
+      return { key, path, type: "object", required, description, children };
+    }
+    if (spec.items !== void 0) {
+      const element = fieldFromSpec("0", `${path}[0]`, spec.items);
+      return {
+        key,
+        path,
+        type: "array",
+        required,
+        description,
+        children: [element]
+      };
+    }
+    return { key, path, type: declaredType ?? "any", required, description };
+  }
+  return { key, path, type: "any" };
+}
+function fieldsFromIO(io, root = "") {
+  if (!isRecord(io)) return [];
+  return Object.entries(io).map(
+    ([key, spec]) => fieldFromSpec(key, joinPath(root, key), spec)
+  );
+}
+function normalizeOperations(raw) {
+  if (Array.isArray(raw)) return raw;
+  if (isRecord(raw) && Array.isArray(raw.operations)) {
+    return raw.operations;
+  }
+  return [];
+}
+function resolveNodeOperation(data, fallbackOperations2) {
+  const nodeData = isRecord(data?.nodeData) ? data?.nodeData : void 0;
+  let operations = normalizeOperations(nodeData?.operations);
+  if (operations.length === 0) {
+    operations = normalizeOperations(data?.operations);
+  }
+  if (operations.length === 0 && fallbackOperations2 !== void 0) {
+    operations = normalizeOperations(fallbackOperations2);
+  }
+  const opName = typeof data?.operation_name === "string" ? data.operation_name : void 0;
+  const selected = operations.find((op) => op.name === opName) ?? operations[0];
+  return { operations, selected };
+}
+var FIELD_PATH_MIME = "application/x-fg-field-path";
+var TYPE_ICON = {
+  string: "mdi:format-text",
+  number: "mdi:numeric",
+  integer: "mdi:numeric",
+  boolean: "mdi:toggle-switch-outline",
+  array: "mdi:code-brackets",
+  object: "mdi:code-braces",
+  any: "mdi:help-circle-outline"
+};
+function FieldRow({ field, depth, draggable }) {
+  const [open, setOpen] = useState(depth < 1);
+  const hasChildren = !!field.children && field.children.length > 0;
+  const handleDragStart = (e) => {
+    e.dataTransfer.setData(FIELD_PATH_MIME, field.path);
+    e.dataTransfer.setData("text/plain", pathToExpression(field.path));
+    e.dataTransfer.effectAllowed = "copy";
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `group flex items-center gap-1.5 rounded-md py-1 pr-2 text-xs hover:bg-muted ${draggable ? "cursor-grab active:cursor-grabbing" : ""}`,
+        style: { paddingLeft: `${depth * 14 + 6}px` },
+        draggable,
+        onDragStart: draggable ? handleDragStart : void 0,
+        "data-field-path": field.path,
+        title: field.description || field.path,
+        children: [
+          hasChildren ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setOpen((v) => !v),
+              className: "flex size-4 items-center justify-center text-muted-foreground hover:text-foreground",
+              children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: open ? "mdi:chevron-down" : "mdi:chevron-right",
+                  className: "size-3.5"
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "inline-block size-4" }),
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: TYPE_ICON[field.type] ?? TYPE_ICON.any,
+              className: "size-3.5 shrink-0 text-primary/70"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-foreground", children: field.key }),
+          /* @__PURE__ */ jsxs("span", { className: "ml-auto shrink-0 text-[10px] lowercase tracking-wide text-muted-foreground", children: [
+            field.type,
+            field.required ? " *" : ""
+          ] })
+        ]
+      }
+    ),
+    hasChildren && open && /* @__PURE__ */ jsx("div", { children: field.children.map((child) => /* @__PURE__ */ jsx(
+      FieldRow,
+      {
+        field: child,
+        depth: depth + 1,
+        draggable
+      },
+      child.path
+    )) })
+  ] });
+}
+function FieldTree({
+  fields,
+  draggable = false,
+  emptyMessage = "No fields available."
+}) {
+  if (fields.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "px-2 py-4 text-xs text-card-foreground/50", children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: fields.map((field) => /* @__PURE__ */ jsx(
+    FieldRow,
+    {
+      field,
+      depth: 0,
+      draggable
+    },
+    field.path
+  )) });
+}
+function coerceNumber(type, raw) {
+  if (raw.trim() === "") return void 0;
+  const n = type === "integer" ? parseInt(raw, 10) : parseFloat(raw);
+  return Number.isNaN(n) ? void 0 : n;
+}
+function asRecord(value) {
+  return typeof value === "object" && value !== null ? value : void 0;
+}
+function fallbackOperations(type) {
+  if (!type) return void 0;
+  return NODE_CONFIGS.find((c) => c.type === type)?.operations;
+}
+function selectedOperationOf(data, type) {
+  return resolveNodeOperation(data, fallbackOperations(type)).selected;
+}
+function paramsFromOperation(op) {
+  const io = asRecord(op?.input_fields);
+  if (!io) return [];
+  return Object.entries(io).map(([name, spec]) => {
+    const rec = asRecord(spec);
+    const optsRaw = rec?.options ?? rec?.enum;
+    const options = Array.isArray(optsRaw) ? optsRaw.map(
+      (o) => typeof o === "string" ? o : asRecord(o)?.value ?? asRecord(o)?.name
+    ).filter((v) => typeof v === "string") : void 0;
+    return {
+      name,
+      type: typeof spec === "string" ? spec : typeof rec?.type === "string" ? rec.type : "any",
+      required: rec?.required === true,
+      description: typeof rec?.description === "string" ? rec.description : void 0,
+      options,
+      defaultValue: rec?.default
+    };
+  });
+}
+function nodeTitle(node) {
+  if (!node) return "Node";
+  const data = asRecord(node.data);
+  const label = typeof data?.label === "string" ? data.label : "";
+  return label || getNodeDetail(node.type).title || node.id;
+}
+function nodeSubtitle(node) {
+  const data = asRecord(node?.data);
+  return typeof data?.operation_name === "string" ? data.operation_name : void 0;
+}
+var SECTION_LABEL = "text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground";
+function NodeDetailView() {
+  const ndv = useFlowStore((s) => s.workflow.ndv);
+  const nodes = useFlowStore((s) => s.workflow.nodes);
+  const edges = useFlowStore((s) => s.workflow.edges);
+  const closeNdv = useFlowStore((s) => s.actions.ndv.close);
+  const showNodePropertiesOf = useFlowStore(
+    (s) => s.actions.sidebar.showNodePropertiesOf
+  );
+  const open = !!ndv;
+  const node = useMemo(
+    () => ndv ? nodes.find((n) => n.id === ndv.nodeId) : void 0,
+    [ndv, nodes]
+  );
+  const incoming = useMemo(
+    () => ndv ? edges.filter((e) => e.target === ndv.nodeId) : [],
+    [edges, ndv]
+  );
+  const sourceIds = useMemo(() => incoming.map((e) => e.source), [incoming]);
+  const sourceKey = sourceIds.join(",");
+  const [selectedSource, setSelectedSource] = useState();
+  const [tab, setTab] = useState("parameters");
+  const [outputView, setOutputView] = useState("schema");
+  const [dragField, setDragField] = useState(null);
+  const [modeByField, setModeByField] = useState({});
+  const panesRef = useRef(null);
+  const dragCleanupRef = useRef(null);
+  const [leftPct, setLeftPct] = useState(30);
+  const [rightPct, setRightPct] = useState(30);
+  const startDrag = (which) => (e) => {
+    e.preventDefault();
+    const el = panesRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const onMove = (ev) => {
+      const pct = (ev.clientX - rect.left) / rect.width * 100;
+      if (which === "left") setLeftPct(Math.min(55, Math.max(15, pct)));
+      else setRightPct(Math.min(55, Math.max(15, 100 - pct)));
+    };
+    const cleanup = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", cleanup);
+      dragCleanupRef.current = null;
+    };
+    dragCleanupRef.current = cleanup;
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", cleanup);
+  };
+  useEffect(() => () => dragCleanupRef.current?.(), []);
+  useEffect(() => {
+    setSelectedSource(
+      (prev) => prev && sourceIds.includes(prev) ? prev : sourceIds[0]
+    );
+  }, [ndv?.nodeId, sourceKey, sourceIds]);
+  useEffect(() => {
+    if (open) setTab("parameters");
+  }, [open, ndv?.nodeId]);
+  useEffect(() => {
+    setModeByField({});
+  }, [ndv?.nodeId, selectedSource]);
+  const sourceNode = useMemo(
+    () => nodes.find((n) => n.id === selectedSource),
+    [nodes, selectedSource]
+  );
+  const currentEdge = useMemo(
+    () => incoming.find((e) => e.source === selectedSource),
+    [incoming, selectedSource]
+  );
+  const currentOp = useMemo(
+    () => selectedOperationOf(asRecord(node?.data), node?.type),
+    [node]
+  );
+  const sourceOp = useMemo(
+    () => selectedOperationOf(asRecord(sourceNode?.data), sourceNode?.type),
+    [sourceNode]
+  );
+  const inputFields = useMemo(
+    () => fieldsFromIO(sourceOp?.output_fields),
+    [sourceOp]
+  );
+  const outputFields = useMemo(
+    () => fieldsFromIO(currentOp?.output_fields),
+    [currentOp]
+  );
+  const params = useMemo(() => paramsFromOperation(currentOp), [currentOp]);
+  const mapping = currentEdge?.mapping?.definition ?? {};
+  const argsState = useMemo(() => {
+    const data = asRecord(node?.data);
+    const args = asRecord(data?.args);
+    return asRecord(args?.state) ?? {};
+  }, [node]);
+  const writeMapping = (field, value) => {
+    if (!currentEdge) return;
+    const store = useFlowStore.getState();
+    const freshEdges = store.workflow.edges;
+    const next = freshEdges.map((e) => {
+      if (e.id !== currentEdge.id) return e;
+      const def = { ...e.mapping?.definition ?? {} };
+      if (value.trim()) def[field] = value;
+      else delete def[field];
+      return {
+        ...e,
+        mapping: {
+          definition: def,
+          comment: e.mapping?.comment ?? `Map ${selectedSource} \u2192 ${ndv?.nodeId ?? ""}`
+        }
+      };
+    });
+    store.actions.edges.setEdges(next);
+  };
+  const clearMappingFromAllIncoming = (field) => {
+    if (!ndv) return;
+    const store = useFlowStore.getState();
+    const fresh = store.workflow.edges;
+    let changed = false;
+    const next = fresh.map((e) => {
+      if (e.target !== ndv.nodeId || !e.mapping?.definition) return e;
+      if (!(field in e.mapping.definition)) return e;
+      const def = { ...e.mapping.definition };
+      delete def[field];
+      changed = true;
+      return { ...e, mapping: { ...e.mapping, definition: def } };
+    });
+    if (changed) store.actions.edges.setEdges(next);
+  };
+  const writeFixed = (field, value) => {
+    if (!ndv) return;
+    const store = useFlowStore.getState();
+    const next = store.workflow.nodes.map((n) => {
+      if (n.id !== ndv.nodeId) return n;
+      const data = { ...asRecord(n.data) ?? {} };
+      const args = { ...asRecord(data.args) ?? {} };
+      const state = { ...asRecord(args.state) ?? {} };
+      if (value === void 0 || value === null || value === "") {
+        delete state[field];
+      } else {
+        state[field] = value;
+      }
+      args.state = state;
+      data.args = args;
+      return { ...n, data };
+    });
+    store.actions.nodes.setNodes(next);
+    clearMappingFromAllIncoming(field);
+  };
+  const toggleMode = (field, current) => {
+    if (current === "expression") {
+      clearMappingFromAllIncoming(field);
+    }
+    setModeByField((m) => ({
+      ...m,
+      [field]: current === "expression" ? "fixed" : "expression"
+    }));
+  };
+  const handleDropOnParam = (field) => (e) => {
+    e.preventDefault();
+    setDragField(null);
+    const path = e.dataTransfer.getData(FIELD_PATH_MIME);
+    if (path) {
+      writeMapping(field, pathToExpression(path));
+      setModeByField((m) => ({ ...m, [field]: "expression" }));
+    }
+  };
+  const openClassicPanel = () => {
+    if (!ndv) return;
+    showNodePropertiesOf({
+      id: ndv.nodeId,
+      type: ndv.type
+    });
+    closeNdv();
+  };
+  const headerIcon = getNodeDetail(node?.type).icon;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (o) => !o && closeNdv(), children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      style: {
+        width: "94vw",
+        height: "92vh",
+        maxWidth: "none",
+        maxHeight: "92vh",
+        // Above the app shell navbar so the header (title/close) isn't occluded.
+        zIndex: 1e3
+      },
+      className: "flex flex-col gap-0 overflow-hidden border-border bg-background p-0",
+      "data-testid": "ndv-modal",
+      children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { className: "flex shrink-0 flex-row items-center gap-3 space-y-0 border-b border-border px-4 py-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-muted", children: /* @__PURE__ */ jsx(Icon, { icon: headerIcon, className: "size-4 text-foreground" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx(DialogTitle, { className: "truncate text-sm font-semibold leading-tight", children: nodeTitle(node) }),
+            nodeSubtitle(node) && /* @__PURE__ */ jsx(DialogDescription, { className: "truncate text-xs leading-tight", children: nodeSubtitle(node) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: openClassicPanel,
+              className: "rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
+              children: "Side panel"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Close",
+              onClick: closeNdv,
+              className: "rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground",
+              children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:close", className: "size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { ref: panesRef, className: "flex min-h-0 flex-1", children: [
+          /* @__PURE__ */ jsxs(
+            "section",
+            {
+              style: { width: `${leftPct}%` },
+              className: "flex min-h-0 min-w-[180px] flex-col bg-card/40",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-2.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: SECTION_LABEL, children: "Input" }),
+                  sourceIds.length > 0 && /* @__PURE__ */ jsx(
+                    "select",
+                    {
+                      className: "ml-auto max-w-[60%] truncate rounded-md border border-input bg-background px-2 py-1 text-xs text-foreground outline-none focus:border-primary",
+                      value: selectedSource ?? "",
+                      onChange: (e) => setSelectedSource(e.target.value),
+                      "data-testid": "ndv-source-selector",
+                      children: sourceIds.map((sid) => {
+                        const sn = nodes.find((n) => n.id === sid);
+                        return /* @__PURE__ */ jsx("option", { value: sid, children: nodeTitle(sn) }, sid);
+                      })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "min-h-0 flex-1 overflow-auto px-2 pb-3",
+                    "data-testid": "ndv-input-tree",
+                    children: inputFields.length > 0 ? /* @__PURE__ */ jsx(FieldTree, { fields: inputFields, draggable: true }) : /* @__PURE__ */ jsx(
+                      EmptyState,
+                      {
+                        icon: "mdi:tray-arrow-down",
+                        title: "No input data",
+                        hint: sourceIds.length === 0 ? "Connect an upstream node to map its fields." : "The selected source has no declared output fields."
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(ResizeHandle, { onStart: startDrag("left") }),
+          /* @__PURE__ */ jsxs("section", { className: "flex min-h-0 min-w-[280px] flex-1 flex-col", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-4 border-b border-border px-4", children: [
+              /* @__PURE__ */ jsx(
+                TabButton,
+                {
+                  active: tab === "parameters",
+                  onClick: () => setTab("parameters"),
+                  children: "Parameters"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TabButton,
+                {
+                  active: tab === "settings",
+                  onClick: () => setTab("settings"),
+                  children: "Settings"
+                }
+              )
+            ] }),
+            tab === "parameters" ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "min-h-0 flex-1 space-y-4 overflow-auto p-4",
+                "data-testid": "ndv-params",
+                children: [
+                  !currentEdge && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed border-border bg-muted/40 px-3 py-2 text-xs text-muted-foreground", children: "No upstream node connected \u2014 set fixed values below, or connect a node to map fields with expressions." }),
+                  params.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-xs text-muted-foreground", children: "This operation has no input parameters." }) : params.map((p) => {
+                    const mode = modeByField[p.name] ?? (mapping[p.name] !== void 0 ? "expression" : "fixed");
+                    const exprValue = mapping[p.name] ?? "";
+                    const fixedValue = argsState[p.name];
+                    const highlight = dragField === p.name;
+                    const inputCx = cn$1(
+                      "w-full rounded-md border bg-background px-2.5 py-1.5 text-sm outline-none transition-colors disabled:opacity-50",
+                      highlight ? "border-primary ring-1 ring-primary" : "border-input focus:border-primary"
+                    );
+                    return /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: "flex flex-col gap-1.5",
+                        onDragOver: (e) => e.preventDefault(),
+                        onDragEnter: () => setDragField(p.name),
+                        onDragLeave: () => setDragField((f) => f === p.name ? null : f),
+                        onDrop: handleDropOnParam(p.name),
+                        children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                            /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-foreground", children: p.name }),
+                            p.required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" }),
+                            /* @__PURE__ */ jsx("span", { className: "ml-auto text-[10px] uppercase tracking-wide text-muted-foreground", children: p.type }),
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: () => toggleMode(p.name, mode),
+                                title: mode === "expression" ? "Switch to a fixed value" : "Switch to an expression",
+                                "data-testid": `ndv-mode-${p.name}`,
+                                className: cn$1(
+                                  "ml-1 rounded p-0.5 hover:text-foreground",
+                                  mode === "expression" ? "text-primary" : "text-muted-foreground"
+                                ),
+                                children: /* @__PURE__ */ jsx(
+                                  Icon,
+                                  {
+                                    icon: mode === "expression" ? "mdi:variable" : "mdi:form-textbox",
+                                    className: "size-3.5"
+                                  }
+                                )
+                              }
+                            )
+                          ] }),
+                          mode === "expression" ? /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              type: "text",
+                              value: exprValue,
+                              placeholder: currentEdge ? "Drop a field or type ${output.\u2026}" : "Connect an upstream node to use expressions",
+                              disabled: !currentEdge,
+                              onChange: (e) => writeMapping(p.name, e.target.value),
+                              "data-testid": `ndv-param-${p.name}`,
+                              className: cn$1(inputCx, "font-mono text-primary")
+                            }
+                          ) : p.type === "boolean" ? /* @__PURE__ */ jsxs("label", { className: "flex w-fit cursor-pointer items-center gap-2 text-sm", children: [
+                            /* @__PURE__ */ jsx(
+                              "input",
+                              {
+                                type: "checkbox",
+                                checked: fixedValue === true,
+                                onChange: (e) => writeFixed(p.name, e.target.checked),
+                                "data-testid": `ndv-param-${p.name}`,
+                                className: "size-4"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: fixedValue === void 0 ? "Not set (default)" : fixedValue === true ? "true" : "false" })
+                          ] }) : p.options && p.options.length > 0 ? /* @__PURE__ */ jsxs(
+                            "select",
+                            {
+                              value: typeof fixedValue === "string" ? fixedValue : "",
+                              onChange: (e) => writeFixed(p.name, e.target.value),
+                              "data-testid": `ndv-param-${p.name}`,
+                              className: inputCx,
+                              children: [
+                                /* @__PURE__ */ jsx("option", { value: "", children: p.defaultValue !== void 0 ? `Default (${String(p.defaultValue)})` : "Select\u2026" }),
+                                p.options.map((o) => /* @__PURE__ */ jsx("option", { value: o, children: o }, o))
+                              ]
+                            }
+                          ) : p.type === "integer" || p.type === "number" ? /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              type: "number",
+                              step: p.type === "integer" ? "1" : "any",
+                              value: typeof fixedValue === "number" ? String(fixedValue) : "",
+                              placeholder: p.defaultValue !== void 0 ? `Default: ${String(p.defaultValue)}` : "Enter a number",
+                              onChange: (e) => writeFixed(
+                                p.name,
+                                coerceNumber(p.type, e.target.value)
+                              ),
+                              "data-testid": `ndv-param-${p.name}`,
+                              className: inputCx
+                            }
+                          ) : /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              type: "text",
+                              value: fixedValue === void 0 || fixedValue === null ? "" : String(fixedValue),
+                              placeholder: p.defaultValue !== void 0 ? `Default: ${String(p.defaultValue)}` : "Enter a value",
+                              onChange: (e) => writeFixed(p.name, e.target.value),
+                              "data-testid": `ndv-param-${p.name}`,
+                              className: inputCx
+                            }
+                          ),
+                          p.description && /* @__PURE__ */ jsx("span", { className: "text-[11px] leading-snug text-muted-foreground", children: p.description })
+                        ]
+                      },
+                      p.name
+                    );
+                  })
+                ]
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4 text-xs text-muted-foreground", children: "No additional settings for this node." })
+          ] }),
+          /* @__PURE__ */ jsx(ResizeHandle, { onStart: startDrag("right") }),
+          /* @__PURE__ */ jsxs(
+            "section",
+            {
+              style: { width: `${rightPct}%` },
+              className: "flex min-h-0 min-w-[180px] flex-col bg-card/40",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-2.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: SECTION_LABEL, children: "Output" }),
+                  outputFields.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx(
+                      ToggleChip,
+                      {
+                        active: outputView === "schema",
+                        onClick: () => setOutputView("schema"),
+                        children: "Schema"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ToggleChip,
+                      {
+                        active: outputView === "json",
+                        onClick: () => setOutputView("json"),
+                        children: "JSON"
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "min-h-0 flex-1 overflow-auto px-2 pb-3",
+                    "data-testid": "ndv-output-tree",
+                    children: outputFields.length === 0 ? /* @__PURE__ */ jsx(
+                      EmptyState,
+                      {
+                        icon: "mdi:tray-arrow-up",
+                        title: "No output data",
+                        hint: "This operation has no declared output fields."
+                      }
+                    ) : outputView === "schema" ? /* @__PURE__ */ jsx(FieldTree, { fields: outputFields }) : /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap break-words px-2 text-[11px] leading-relaxed text-muted-foreground", children: JSON.stringify(currentOp?.output_fields ?? {}, null, 2) })
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+function ResizeHandle({ onStart }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseDown: onStart,
+      role: "separator",
+      "aria-orientation": "vertical",
+      className: "group flex w-1.5 shrink-0 cursor-col-resize items-center justify-center bg-border/60 hover:bg-primary/40",
+      children: /* @__PURE__ */ jsx("div", { className: "h-8 w-0.5 rounded bg-muted-foreground/40 group-hover:bg-primary" })
+    }
+  );
+}
+function TabButton({
+  active,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn$1(
+        "-mb-px border-b-2 py-2.5 text-sm transition-colors",
+        active ? "border-primary font-medium text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+      ),
+      children
+    }
+  );
+}
+function ToggleChip({
+  active,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn$1(
+        "rounded px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide transition-colors",
+        active ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground"
+      ),
+      children
+    }
+  );
+}
+function EmptyState({
+  icon,
+  title,
+  hint
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2 px-6 text-center", children: [
+    /* @__PURE__ */ jsx(Icon, { icon, className: "size-7 text-muted-foreground/50" }),
+    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground/80", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "max-w-[14rem] text-xs text-muted-foreground", children: hint })
+  ] });
+}
 var STATUS_STYLES = {
   DRAFT: { label: "Draft", variant: "secondary" },
   ACTIVE: { label: "Active", variant: "default" },
@@ -11168,6 +11876,7 @@ var FlowBuilder = () => {
     ),
     /* @__PURE__ */ jsx(ChatPanel, {}),
     /* @__PURE__ */ jsx(LogsPanel, {}),
+    /* @__PURE__ */ jsx(NodeDetailView, {}),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -11421,5 +12130,5 @@ function WorkflowBuilder() {
 }
 
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, TemplateCard, WorkflowBuilder, useWorkflowTemplates };
-//# sourceMappingURL=chunk-EVUQS7DK.js.map
-//# sourceMappingURL=chunk-EVUQS7DK.js.map
+//# sourceMappingURL=chunk-QANP2YKX.js.map
+//# sourceMappingURL=chunk-QANP2YKX.js.map