@burdenoff/fluidgrids-fe-sdk 2026.1031.7 → 2026.1101.2

package/dist/node-detail-view-PCYFQX62.js

@@ -0,0 +1,2034 @@
+import { NDV_Z_INDEX, NodeExecutionActions, ReadOnlyFieldset, NodeParamsForm } from './chunk-472HJ3S3.js';
+import { CodeEditorField } from './chunk-AASHQI77.js';
+import { useNodeConfig, latestNodeLog, nodeTitle, nodeSubtitle, FieldTree } from './chunk-IA2ZCHNQ.js';
+import { RunOnSection } from './chunk-CGXQVZGY.js';
+import './chunk-GTEBQQ7J.js';
+import { useRunHistory, RunHistoryView, SignalRunDialog } from './chunk-OSQ3OCR3.js';
+import './chunk-YKFR7BZJ.js';
+import { TableView, JsonView } from './chunk-MR2B67NW.js';
+import './chunk-JDLQ6QIB.js';
+import './chunk-7KKYIRLH.js';
+import { useFlowStore, useDurableFunctionNodesEnabled, CODE_WORKFLOW_NODE_TYPE, fieldsFromValue, useNodeExecution, getNodeDetail, readCodeWorkflowState, useCodeWorkflowInterface, clearCodeWorkflowDefinitionCache, diagnosticsByPath, interfaceHandlers, declaredSignals, throwIfResultError, childRunIdOf, defaultSourcePath, describeOperationError, projectLanguage, changedSourceFiles, isEditableSourcePath, sourceLanguageOf, interfaceFields } from './chunk-NZJWKVER.js';
+import { useFluidGridsPermission, FLUIDGRIDS_PERMISSIONS } from './chunk-ZUVFD5KV.js';
+import './chunk-JL7CASN5.js';
+import './chunk-OCJTTHTS.js';
+import './chunk-PXIFUMLA.js';
+import './chunk-6AMNEX2Y.js';
+import './chunk-G77IGC3Y.js';
+import { useWorkflowPinnedDataQuery, usePinNodeDataMutation, useUnpinNodeDataMutation, NodeStatesDocument, WorkflowCodeSourceDocument, WorkflowEditLeaseStatusDocument, BuildWorkflowCodeDocument } from './chunk-IHEV5HTD.js';
+import { useTr } from './chunk-UULVIT25.js';
+import { getFluidGridsClientSafe, getFluidGridsClient } from './chunk-NTWG3CJX.js';
+import './chunk-62GWEYJ5.js';
+import * as React from 'react';
+import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
+import { Icon } from '@iconify/react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Skeleton } from '@burdenoff/fe-libs/ui';
+import { cn } from '@burdenoff/fe-libs/utils';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useNavigate } from 'react-router';
+import { Button } from '@burdenoff/fe-libs/button';
+
+var SECTION_LABEL = "text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground";
+var inputCx = "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm outline-none transition-colors focus:border-primary disabled:opacity-50";
+function msToSeconds(ms, fallbackMs) {
+  return Math.round((ms ?? fallbackMs) / 1e3 * 10) / 10;
+}
+function secondsInputToMs(raw, minMs) {
+  const seconds = parseFloat(raw);
+  if (Number.isNaN(seconds)) return minMs;
+  return Math.max(minMs, Math.round(seconds * 1e3));
+}
+function NodeSettingsPanel({
+  config
+}) {
+  const tr = useTr();
+  const {
+    nodes,
+    node,
+    errorConfig,
+    writeErrorConfig,
+    notes,
+    writeNotes,
+    alwaysOutputData,
+    executeOnce,
+    runOn,
+    writeExecutionSettings
+  } = config;
+  const onError = errorConfig?.onError ?? "stop";
+  const retryEnabled = (errorConfig?.retryConfig?.maxRetries ?? 0) > 0;
+  const timeoutEnabled = !!errorConfig?.timeout?.duration;
+  const branchTargets = nodes.filter((n) => n.id !== node?.id);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", "data-testid": "ndv-settings-panel", children: [
+    /* @__PURE__ */ jsx(
+      RunOnSection,
+      {
+        value: runOn,
+        onChange: (next) => writeExecutionSettings({ runOn: next }),
+        sectionLabelClassName: SECTION_LABEL
+      }
+    ),
+    /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: SECTION_LABEL, children: tr("fluidgrids.builder.nodeSettings.retrySection", "Retry on Fail") }),
+      /* @__PURE__ */ jsxs("label", { className: "flex w-fit cursor-pointer items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: retryEnabled,
+            onChange: (e) => writeErrorConfig({
+              retryConfig: e.target.checked ? {
+                maxRetries: errorConfig?.retryConfig?.maxRetries || 3,
+                retryDelay: errorConfig?.retryConfig?.retryDelay || 1e3,
+                backoffMultiplier: errorConfig?.retryConfig?.backoffMultiplier ?? 2,
+                maxDelay: errorConfig?.retryConfig?.maxDelay ?? 3e4
+              } : void 0
+            }),
+            "data-testid": "ndv-settings-retry-enabled",
+            className: "size-4"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: tr(
+          "fluidgrids.builder.nodeSettings.retryEnabledLabel",
+          "Retry this node on failure"
+        ) })
+      ] }),
+      retryEnabled && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pl-6", children: [
+        /* @__PURE__ */ jsx(
+          Field,
+          {
+            label: tr(
+              "fluidgrids.builder.nodeSettings.maxRetries",
+              "Max tries"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: 1,
+                max: 20,
+                value: errorConfig?.retryConfig?.maxRetries ?? 3,
+                onChange: (e) => writeErrorConfig({
+                  retryConfig: {
+                    ...errorConfig?.retryConfig ?? {
+                      retryDelay: 1e3,
+                      maxRetries: 3
+                    },
+                    maxRetries: Math.max(
+                      1,
+                      parseInt(e.target.value, 10) || 1
+                    )
+                  }
+                }),
+                "data-testid": "ndv-settings-max-retries",
+                className: inputCx
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Field,
+          {
+            label: tr(
+              "fluidgrids.builder.nodeSettings.retryDelay",
+              "Wait (seconds)"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: 0,
+                step: 0.1,
+                value: msToSeconds(errorConfig?.retryConfig?.retryDelay, 1e3),
+                onChange: (e) => writeErrorConfig({
+                  retryConfig: {
+                    ...errorConfig?.retryConfig ?? {
+                      maxRetries: 3,
+                      retryDelay: 1e3
+                    },
+                    retryDelay: secondsInputToMs(e.target.value, 0)
+                  }
+                }),
+                "data-testid": "ndv-settings-retry-delay",
+                className: inputCx
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Field,
+          {
+            label: tr(
+              "fluidgrids.builder.nodeSettings.backoffMultiplier",
+              "Backoff \xD7"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: 1,
+                step: 0.5,
+                value: errorConfig?.retryConfig?.backoffMultiplier ?? 2,
+                onChange: (e) => writeErrorConfig({
+                  retryConfig: {
+                    ...errorConfig?.retryConfig ?? {
+                      maxRetries: 3,
+                      retryDelay: 1e3
+                    },
+                    backoffMultiplier: parseFloat(e.target.value) || 1
+                  }
+                }),
+                "data-testid": "ndv-settings-backoff-multiplier",
+                className: inputCx
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Field,
+          {
+            label: tr(
+              "fluidgrids.builder.nodeSettings.maxDelay",
+              "Max wait (seconds)"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: 0,
+                step: 1,
+                value: msToSeconds(errorConfig?.retryConfig?.maxDelay, 3e4),
+                onChange: (e) => writeErrorConfig({
+                  retryConfig: {
+                    ...errorConfig?.retryConfig ?? {
+                      maxRetries: 3,
+                      retryDelay: 1e3
+                    },
+                    maxDelay: secondsInputToMs(e.target.value, 0)
+                  }
+                }),
+                "data-testid": "ndv-settings-max-delay",
+                className: inputCx
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: SECTION_LABEL, children: tr("fluidgrids.builder.nodeSettings.onErrorSection", "On Error") }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: onError,
+          onChange: (e) => writeErrorConfig({
+            onError: e.target.value,
+            errorBranchId: e.target.value === "branch" ? errorConfig?.errorBranchId : void 0
+          }),
+          "data-testid": "ndv-settings-on-error",
+          className: cn(inputCx, "max-w-xs"),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "stop", children: tr(
+              "fluidgrids.builder.nodeSettings.onErrorStop",
+              "Stop workflow (default)"
+            ) }),
+            /* @__PURE__ */ jsx("option", { value: "continue", children: tr(
+              "fluidgrids.builder.nodeSettings.onErrorContinue",
+              "Continue on fail"
+            ) }),
+            /* @__PURE__ */ jsx("option", { value: "branch", children: tr(
+              "fluidgrids.builder.nodeSettings.onErrorBranch",
+              "Route to error branch"
+            ) })
+          ]
+        }
+      ),
+      onError === "branch" && /* @__PURE__ */ jsx("div", { className: "pl-2", children: /* @__PURE__ */ jsx(
+        Field,
+        {
+          label: tr(
+            "fluidgrids.builder.nodeSettings.errorBranchTarget",
+            "Error branch target"
+          ),
+          children: /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: errorConfig?.errorBranchId ?? "",
+              onChange: (e) => writeErrorConfig({
+                errorBranchId: e.target.value || void 0
+              }),
+              "data-testid": "ndv-settings-error-branch-id",
+              className: cn(inputCx, "max-w-xs"),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: tr(
+                  "fluidgrids.builder.nodeSettings.selectNode",
+                  "Select a node\u2026"
+                ) }),
+                branchTargets.map((n) => /* @__PURE__ */ jsx("option", { value: n.id, children: nodeTitle(n) }, n.id))
+              ]
+            }
+          )
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: SECTION_LABEL, children: tr("fluidgrids.builder.nodeSettings.timeoutSection", "Timeout") }),
+      /* @__PURE__ */ jsxs("label", { className: "flex w-fit cursor-pointer items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: timeoutEnabled,
+            onChange: (e) => writeErrorConfig({
+              timeout: e.target.checked ? { duration: errorConfig?.timeout?.duration || 3e4 } : void 0
+            }),
+            "data-testid": "ndv-settings-timeout-enabled",
+            className: "size-4"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: tr(
+          "fluidgrids.builder.nodeSettings.timeoutEnabledLabel",
+          "Abort this node if it runs too long"
+        ) })
+      ] }),
+      timeoutEnabled && /* @__PURE__ */ jsxs("div", { className: "space-y-3 pl-6", children: [
+        /* @__PURE__ */ jsx(
+          Field,
+          {
+            label: tr(
+              "fluidgrids.builder.nodeSettings.timeoutDuration",
+              "Timeout (seconds)"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: 0.1,
+                step: 0.5,
+                value: msToSeconds(errorConfig?.timeout?.duration, 3e4),
+                onChange: (e) => writeErrorConfig({
+                  timeout: {
+                    ...errorConfig?.timeout ?? { duration: 3e4 },
+                    duration: secondsInputToMs(e.target.value, 100)
+                  }
+                }),
+                "data-testid": "ndv-settings-timeout-duration",
+                className: cn(inputCx, "max-w-[10rem]")
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Field,
+          {
+            label: tr(
+              "fluidgrids.builder.nodeSettings.onTimeout",
+              "On timeout"
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: errorConfig?.timeout?.onTimeout ?? "stop",
+                onChange: (e) => writeErrorConfig({
+                  timeout: {
+                    ...errorConfig?.timeout ?? { duration: 3e4 },
+                    onTimeout: e.target.value,
+                    timeoutBranchId: e.target.value === "branch" ? errorConfig?.timeout?.timeoutBranchId : void 0
+                  }
+                }),
+                "data-testid": "ndv-settings-on-timeout",
+                className: cn(inputCx, "max-w-xs"),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "stop", children: tr(
+                    "fluidgrids.builder.nodeSettings.onTimeoutStop",
+                    "Use Retry/On Error settings above"
+                  ) }),
+                  /* @__PURE__ */ jsx("option", { value: "continue", children: tr(
+                    "fluidgrids.builder.nodeSettings.onTimeoutContinue",
+                    "Continue on timeout"
+                  ) }),
+                  /* @__PURE__ */ jsx("option", { value: "branch", children: tr(
+                    "fluidgrids.builder.nodeSettings.onTimeoutBranch",
+                    "Route to a specific branch"
+                  ) })
+                ]
+              }
+            )
+          }
+        ),
+        errorConfig?.timeout?.onTimeout === "branch" && /* @__PURE__ */ jsx(
+          Field,
+          {
+            label: tr(
+              "fluidgrids.builder.nodeSettings.timeoutBranchTarget",
+              "Timeout branch target"
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: errorConfig?.timeout?.timeoutBranchId ?? "",
+                onChange: (e) => writeErrorConfig({
+                  timeout: {
+                    ...errorConfig?.timeout ?? { duration: 3e4 },
+                    timeoutBranchId: e.target.value || void 0
+                  }
+                }),
+                "data-testid": "ndv-settings-timeout-branch-id",
+                className: cn(inputCx, "max-w-xs"),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", children: tr(
+                    "fluidgrids.builder.nodeSettings.selectNode",
+                    "Select a node\u2026"
+                  ) }),
+                  branchTargets.map((n) => /* @__PURE__ */ jsx("option", { value: n.id, children: nodeTitle(n) }, n.id))
+                ]
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: SECTION_LABEL, children: tr("fluidgrids.builder.nodeSettings.otherSection", "Other") }),
+      /* @__PURE__ */ jsxs("label", { className: "flex w-fit cursor-pointer items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: alwaysOutputData,
+            onChange: (e) => writeExecutionSettings({ alwaysOutputData: e.target.checked }),
+            "data-testid": "ndv-settings-always-output-data",
+            className: "size-4"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: tr(
+          "fluidgrids.builder.nodeSettings.alwaysOutputDataLabel",
+          "Always output data"
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex w-fit cursor-pointer items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: executeOnce,
+            onChange: (e) => writeExecutionSettings({ executeOnce: e.target.checked }),
+            "data-testid": "ndv-settings-execute-once",
+            className: "size-4"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: tr(
+          "fluidgrids.builder.nodeSettings.executeOnceLabel",
+          "Execute once"
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: SECTION_LABEL, children: tr("fluidgrids.builder.nodeSettings.notesSection", "Notes") }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: notes,
+          onChange: (e) => writeNotes(e.target.value),
+          rows: 4,
+          placeholder: tr(
+            "fluidgrids.builder.nodeSettings.notesPlaceholder",
+            "Leave a note for teammates about what this node does\u2026"
+          ),
+          "data-testid": "ndv-settings-notes",
+          className: cn(inputCx, "resize-y")
+        }
+      )
+    ] })
+  ] });
+}
+function Field({
+  label,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-foreground", children: label }),
+    children
+  ] });
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = React.useState(false);
+  React.useEffect(() => {
+    const mql = window.matchMedia(query);
+    const onChange = (e) => setMatches(e.matches);
+    setMatches(mql.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
+function entryOf(definitionJson) {
+  if (typeof definitionJson !== "object" || definitionJson === null || Array.isArray(definitionJson))
+    return void 0;
+  const code = definitionJson.code;
+  if (typeof code !== "object" || code === null || Array.isArray(code))
+    return void 0;
+  const entry = code.entry;
+  return typeof entry === "string" ? entry : void 0;
+}
+async function fetchWorkflowCodeSource(workflowKey, version) {
+  const result = await getFluidGridsClient().query({
+    query: WorkflowCodeSourceDocument,
+    variables: { workflowKey, version },
+    fetchPolicy: "network-only"
+  });
+  throwIfResultError(result);
+  const source = result.data?.workflowCodeSource;
+  if (!source) return null;
+  const definition = result.data?.workflowDefinition;
+  return {
+    buildId: source.buildId,
+    files: source.files.map((file) => ({
+      path: file.path,
+      content: file.content
+    })),
+    revision: definition?.revision ?? null,
+    entry: entryOf(definition?.definitionJson)
+  };
+}
+async function fetchEditLease(workflowKey) {
+  try {
+    const result = await getFluidGridsClient().query({
+      query: WorkflowEditLeaseStatusDocument,
+      variables: { workflowKey },
+      fetchPolicy: "network-only"
+    });
+    throwIfResultError(result);
+    return result.data?.workflowEditLease ?? null;
+  } catch {
+    return null;
+  }
+}
+async function runWorkflowCodeBuild(variables) {
+  const result = await getFluidGridsClient().mutate({ mutation: BuildWorkflowCodeDocument, variables });
+  throwIfResultError(result);
+  const data = result.data?.buildWorkflowCode;
+  if (!data) throw new Error("The build returned no result");
+  return data;
+}
+function leaseBlocksEditing(lease) {
+  return !!lease && lease.available && lease.held && !lease.heldByCaller;
+}
+function useWorkflowCodeEditor({
+  workflowKey,
+  version,
+  enabled,
+  canEdit,
+  onSaved
+}) {
+  const [loading, setLoading] = useState(false);
+  const [loadError, setLoadError] = useState(null);
+  const [source, setSource] = useState(null);
+  const [contents, setContents] = useState({});
+  const [selectedPath, setSelectedPath] = useState();
+  const [lease, setLease] = useState(null);
+  const [building, setBuilding] = useState(null);
+  const [buildError, setBuildError] = useState(null);
+  const [lastBuild, setLastBuild] = useState(null);
+  const request = useRef(0);
+  const onSavedRef = useRef(onSaved);
+  onSavedRef.current = onSaved;
+  const reload = useCallback(async () => {
+    if (!enabled || !workflowKey || !version) return;
+    const id = ++request.current;
+    setLoading(true);
+    setLoadError(null);
+    try {
+      const [loaded, currentLease] = await Promise.all([
+        fetchWorkflowCodeSource(workflowKey, version),
+        fetchEditLease(workflowKey)
+      ]);
+      if (id !== request.current) return;
+      setSource(loaded);
+      setLease(currentLease);
+      setContents(
+        Object.fromEntries(
+          (loaded?.files ?? []).map((file) => [file.path, file.content])
+        )
+      );
+      setSelectedPath(
+        loaded ? defaultSourcePath(loaded.files, loaded.entry) : void 0
+      );
+      setLastBuild(null);
+      setBuildError(null);
+    } catch (err) {
+      if (id !== request.current) return;
+      setLoadError(describeOperationError(err));
+    } finally {
+      if (id === request.current) setLoading(false);
+    }
+  }, [enabled, workflowKey, version]);
+  useEffect(() => {
+    void reload();
+  }, [reload]);
+  const language = useMemo(
+    () => projectLanguage(source?.files ?? []),
+    [source]
+  );
+  const readOnlyReason = language === "python" ? "python" : !canEdit ? "permission" : leaseBlocksEditing(lease) ? "lease" : null;
+  const changed = useMemo(
+    () => changedSourceFiles(source?.files ?? [], contents),
+    [source, contents]
+  );
+  const build = useCallback(
+    async (commit, description) => {
+      if (!source || readOnlyReason) return null;
+      setBuilding(commit ? "save" : "check");
+      setBuildError(null);
+      try {
+        const files = changed.length ? changed : selectedPath && contents[selectedPath] !== void 0 ? [{ path: selectedPath, content: contents[selectedPath] }] : [];
+        const result = await runWorkflowCodeBuild({
+          input: {
+            workflowKey,
+            baseVersion: version,
+            files,
+            commit,
+            ...commit && source.revision !== null ? { revision: source.revision } : {},
+            ...commit && description ? { description } : {}
+          }
+        });
+        setLastBuild(result);
+        if (commit && result.success && result.version) {
+          onSavedRef.current?.(result.version, result);
+        }
+        return result;
+      } catch (err) {
+        setBuildError(describeOperationError(err));
+        return null;
+      } finally {
+        setBuilding(null);
+      }
+    },
+    [
+      source,
+      readOnlyReason,
+      changed,
+      selectedPath,
+      contents,
+      workflowKey,
+      version
+    ]
+  );
+  const check = useCallback(() => build(false), [build]);
+  const save = useCallback(
+    (description) => build(true, description),
+    [build]
+  );
+  const setContent = useCallback((path, content) => {
+    setContents(
+      (current) => current[path] === content ? current : { ...current, [path]: content }
+    );
+  }, []);
+  return {
+    loading,
+    loadError,
+    source,
+    contents,
+    selectedPath,
+    select: setSelectedPath,
+    setContent,
+    changed,
+    language,
+    lease,
+    readOnlyReason,
+    isEditable: (path) => !readOnlyReason && isEditableSourcePath(path),
+    building,
+    buildError,
+    lastBuild,
+    diagnostics: lastBuild?.diagnostics ?? [],
+    check,
+    save,
+    reload
+  };
+}
+var NO_DIAGNOSTICS = [];
+function editorLanguage(path) {
+  const language = sourceLanguageOf(path);
+  if (language === "python") return "python";
+  if (language === "typescript") return "typescript";
+  return "javascript";
+}
+function SourceFileButton({
+  path,
+  selected,
+  dirty,
+  problems,
+  onSelect
+}) {
+  const tr = useTr();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onSelect,
+      "aria-current": selected ? "true" : void 0,
+      className: cn(
+        "flex w-full items-center gap-1 px-2 py-1.5 text-left font-mono text-xs",
+        selected ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+      ),
+      title: path,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: path }),
+        dirty && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2022" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: tr(
+            "fluidgrids.builder.codeWorkflow.source.fileChanged",
+            "changed"
+          ) })
+        ] }),
+        problems > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive", children: problems }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: tr(
+            "fluidgrids.builder.codeWorkflow.source.fileProblems",
+            "{{count}} problem(s)",
+            { count: problems }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+function VersionDescriptionInput({
+  value,
+  onChange
+}) {
+  const tr = useTr();
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "text",
+      value,
+      onChange: (e) => onChange(e.target.value),
+      placeholder: tr(
+        "fluidgrids.builder.codeWorkflow.source.descriptionPlaceholder",
+        "What changed (optional)"
+      ),
+      "aria-label": tr(
+        "fluidgrids.builder.codeWorkflow.source.descriptionLabel",
+        "Version description"
+      ),
+      className: "min-w-48 flex-1 rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground",
+      "data-testid": "code-workflow-save-description"
+    }
+  );
+}
+function CodeWorkflowSourceEditor({
+  workflowKey,
+  version,
+  enabled,
+  canEdit,
+  onSaved
+}) {
+  const tr = useTr();
+  const navigate = useNavigate();
+  const [description, setDescription] = useState("");
+  const editor = useWorkflowCodeEditor({
+    workflowKey,
+    version,
+    enabled,
+    canEdit,
+    onSaved: (savedVersion) => {
+      onSaved?.(savedVersion);
+      navigate(
+        `../workflow/${encodeURIComponent(workflowKey)}/${encodeURIComponent(savedVersion)}`
+      );
+    }
+  });
+  const byPath = useMemo(
+    () => diagnosticsByPath(editor.diagnostics),
+    [editor.diagnostics]
+  );
+  const selected = editor.selectedPath;
+  const selectedEditable = selected ? editor.isEditable(selected) : false;
+  if (editor.loading && !editor.source) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2 p-4", "aria-busy": "true", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-6 w-1/3 animate-pulse rounded bg-muted" }),
+      /* @__PURE__ */ jsx("div", { className: "h-64 animate-pulse rounded bg-muted" })
+    ] });
+  }
+  if (editor.loadError) {
+    return /* @__PURE__ */ jsxs("div", { role: "alert", className: "space-y-2 p-4 text-sm text-destructive", children: [
+      /* @__PURE__ */ jsxs("p", { children: [
+        tr(
+          "fluidgrids.builder.codeWorkflow.source.loadError",
+          "Could not load the source:"
+        ),
+        " ",
+        editor.loadError
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => void editor.reload(),
+          children: tr("fluidgrids.builder.codeWorkflow.source.retry", "Try again")
+        }
+      )
+    ] });
+  }
+  if (!editor.source) {
+    return /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-muted-foreground", children: tr(
+      "fluidgrids.builder.codeWorkflow.source.none",
+      "This version has no code bundle. Push the project with fluidgrids push to attach one."
+    ) });
+  }
+  const readOnlyNote = editor.readOnlyReason === "python" ? tr(
+    "fluidgrids.builder.codeWorkflow.source.pythonReadOnly",
+    "Python projects are read-only in the browser. Edit them locally and run fluidgrids push."
+  ) : editor.readOnlyReason === "lease" ? tr(
+    "fluidgrids.builder.codeWorkflow.source.leaseReadOnly",
+    "Someone else is editing this workflow. The source is read-only until they finish."
+  ) : editor.readOnlyReason === "permission" ? tr(
+    "fluidgrids.builder.codeWorkflow.source.permissionReadOnly",
+    "You can read this source but not change it."
+  ) : null;
+  const result = editor.lastBuild;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-h-0 flex-1 flex-col gap-3 p-4",
+      "data-testid": "code-workflow-source",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Icon, { icon: "mdi:package-variant-closed", className: "size-4" }),
+          /* @__PURE__ */ jsx("code", { className: "truncate font-mono", title: editor.source.buildId, children: editor.source.buildId }),
+          editor.changed.length > 0 && /* @__PURE__ */ jsx("span", { className: "rounded bg-primary/10 px-1.5 py-0.5 text-primary", children: tr(
+            "fluidgrids.builder.codeWorkflow.source.changed",
+            "{{count}} changed",
+            { count: editor.changed.length }
+          ) })
+        ] }),
+        readOnlyNote && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "rounded-md border border-border bg-muted px-3 py-2 text-xs text-muted-foreground",
+            "data-testid": "code-workflow-source-readonly",
+            children: readOnlyNote
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "nav",
+            {
+              "aria-label": tr(
+                "fluidgrids.builder.codeWorkflow.source.files",
+                "Files"
+              ),
+              className: "w-48 shrink-0 overflow-auto rounded-md border border-border",
+              children: editor.source.files.map((file) => {
+                const problems = byPath.get(file.path)?.length ?? 0;
+                const dirty = editor.changed.some((c) => c.path === file.path);
+                return /* @__PURE__ */ jsx(
+                  SourceFileButton,
+                  {
+                    path: file.path,
+                    selected: file.path === selected,
+                    dirty,
+                    problems,
+                    onSelect: () => editor.select(file.path)
+                  },
+                  file.path
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: selected && /* @__PURE__ */ jsx(
+            CodeEditorField,
+            {
+              value: editor.contents[selected] ?? "",
+              language: editorLanguage(selected),
+              label: selected,
+              readOnly: !selectedEditable,
+              onChange: (value) => editor.setContent(selected, value),
+              diagnostics: byPath.get(selected) ?? NO_DIAGNOSTICS,
+              minHeight: "320px",
+              maxHeight: "56vh",
+              "data-testid": "code-workflow-source-editor"
+            },
+            selected
+          ) })
+        ] }),
+        (editor.buildError || result) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-testid": "code-workflow-build-result",
+            className: cn(
+              "rounded-md border px-3 py-2 text-xs",
+              editor.buildError || result && !result.success ? "border-destructive/40 bg-destructive/5 text-destructive" : "border-border bg-muted text-foreground"
+            ),
+            children: [
+              editor.buildError ? /* @__PURE__ */ jsx("p", { children: editor.buildError }) : result?.success ? /* @__PURE__ */ jsx("p", { children: result.version ? tr(
+                "fluidgrids.builder.codeWorkflow.source.saved",
+                "Saved as {{version}} ({{buildId}}).",
+                { version: result.version, buildId: result.buildId ?? "" }
+              ) : tr(
+                "fluidgrids.builder.codeWorkflow.source.checked",
+                "No problems found. Build {{buildId}}.",
+                { buildId: result.buildId ?? "" }
+              ) }) : /* @__PURE__ */ jsx("p", { children: tr(
+                "fluidgrids.builder.codeWorkflow.source.failed",
+                "The build found {{count}} problem(s).",
+                { count: result?.diagnostics.length ?? 0 }
+              ) }),
+              result && result.diagnostics.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-1 max-h-40 space-y-0.5 overflow-auto font-mono", children: result.diagnostics.map((d, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "text-left hover:underline",
+                  onClick: () => d.path && editor.select(d.path.replace(/^\.\//, "")),
+                  children: [
+                    d.path ?? "",
+                    d.line ? `:${d.line}` : "",
+                    d.column ? `:${d.column}` : "",
+                    " ",
+                    d.severity,
+                    d.code ? ` ${d.code}` : "",
+                    ": ",
+                    d.message
+                  ]
+                }
+              ) }, `${d.path ?? ""}:${d.line ?? 0}:${index}`)) })
+            ]
+          }
+        ),
+        !editor.readOnlyReason && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            VersionDescriptionInput,
+            {
+              value: description,
+              onChange: setDescription
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => void editor.check(),
+              disabled: editor.building !== null,
+              "data-testid": "code-workflow-check",
+              children: [
+                /* @__PURE__ */ jsx(Icon, { icon: "mdi:check-decagram-outline", className: "mr-1 size-4" }),
+                editor.building === "check" ? tr(
+                  "fluidgrids.builder.codeWorkflow.source.checking",
+                  "Checking..."
+                ) : tr("fluidgrids.builder.codeWorkflow.source.check", "Check")
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "sm",
+              onClick: () => void editor.save(description.trim() || void 0),
+              disabled: editor.building !== null || editor.changed.length === 0,
+              "data-testid": "code-workflow-save",
+              children: [
+                /* @__PURE__ */ jsx(Icon, { icon: "mdi:content-save-outline", className: "mr-1 size-4" }),
+                editor.building === "save" ? tr("fluidgrids.builder.codeWorkflow.source.saving", "Saving...") : tr(
+                  "fluidgrids.builder.codeWorkflow.source.save",
+                  "Save as new version"
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function FieldsTable({ title, schema }) {
+  const tr = useTr();
+  const fields = interfaceFields(schema);
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("h4", { className: "text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: title }),
+    fields.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: tr(
+      "fluidgrids.builder.codeWorkflow.interface.noFields",
+      "Not declared"
+    ) }) : /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border rounded-md border border-border", children: fields.map((field) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "flex items-baseline gap-2 px-2 py-1 text-xs",
+        children: [
+          /* @__PURE__ */ jsxs("code", { className: "font-mono text-foreground", children: [
+            field.name,
+            field.required ? "" : "?"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-muted-foreground", children: field.type }),
+          field.description && /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: field.description })
+        ]
+      },
+      field.name
+    )) })
+  ] });
+}
+function CodeWorkflowInterface({
+  iface,
+  loading = false,
+  error = null,
+  onRetry,
+  childRunId,
+  canSignal
+}) {
+  const tr = useTr();
+  const [signalName, setSignalName] = useState(null);
+  const handlers = interfaceHandlers(iface);
+  const targets = declaredSignals(iface);
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "space-y-2 p-4",
+        role: "status",
+        "aria-label": tr(
+          "fluidgrids.builder.codeWorkflow.interface.loading",
+          "Loading the function's interface"
+        ),
+        "data-testid": "code-workflow-interface-loading",
+        children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-16 w-full" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/4" })
+        ]
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "space-y-2 p-4",
+        "data-testid": "code-workflow-interface-error",
+        children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              role: "alert",
+              className: "text-sm text-[var(--color-status-error-text)]",
+              children: tr(
+                "fluidgrids.builder.codeWorkflow.interface.error",
+                "Could not load the function's interface: {{message}}",
+                { message: error }
+              )
+            }
+          ),
+          onRetry && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: tr("fluidgrids.builder.codeWorkflow.interface.retry", "Try again") })
+        ]
+      }
+    );
+  }
+  if (!iface) {
+    return /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-muted-foreground", children: tr(
+      "fluidgrids.builder.codeWorkflow.interface.none",
+      "The function declares no interface."
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-4", "data-testid": "code-workflow-interface", children: [
+    /* @__PURE__ */ jsx(
+      FieldsTable,
+      {
+        title: tr("fluidgrids.builder.codeWorkflow.interface.inputs", "Inputs"),
+        schema: iface.input
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FieldsTable,
+      {
+        title: tr(
+          "fluidgrids.builder.codeWorkflow.interface.outputs",
+          "Outputs"
+        ),
+        schema: iface.output
+      }
+    ),
+    /* @__PURE__ */ jsxs("section", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: tr("fluidgrids.builder.codeWorkflow.interface.signals", "Signals") }),
+      handlers.signals.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: tr(
+        "fluidgrids.builder.codeWorkflow.interface.noSignals",
+        "None declared"
+      ) }) : /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: handlers.signals.map((name) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground", children: name }),
+        canSignal && childRunId && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "ml-auto h-6 px-2 text-xs",
+            onClick: () => setSignalName(name),
+            "data-testid": `code-workflow-send-signal-${name}`,
+            children: tr(
+              "fluidgrids.builder.codeWorkflow.interface.sendSignal",
+              "Send signal"
+            )
+          }
+        )
+      ] }, name)) })
+    ] }),
+    (handlers.queries.length > 0 || handlers.updates.length > 0) && /* @__PURE__ */ jsxs("section", { className: "space-y-1 text-xs", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: tr(
+        "fluidgrids.builder.codeWorkflow.interface.queriesUpdates",
+        "Queries and updates"
+      ) }),
+      /* @__PURE__ */ jsx("p", { className: "font-mono text-foreground", children: [...handlers.queries, ...handlers.updates].join(", ") }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: tr(
+        "fluidgrids.builder.codeWorkflow.interface.phaseC",
+        "Running queries and updates from the builder is not available yet."
+      ) })
+    ] }),
+    childRunId && /* @__PURE__ */ jsx(
+      SignalRunDialog,
+      {
+        runId: childRunId,
+        targets,
+        open: signalName !== null,
+        onOpenChange: (open) => !open && setSignalName(null),
+        initialName: signalName ?? void 0
+      }
+    )
+  ] });
+}
+var CHILD_RUN_POLL_INTERVAL_MS = 2e3;
+function useCodeWorkflowChildRun(runId, nodeId, enabled, active = false) {
+  const key = enabled && runId && nodeId ? `${runId}\0${nodeId}` : null;
+  const [found, setFound] = useState({ key: null, childRunId: void 0 });
+  const [loading, setLoading] = useState(false);
+  const childRunId = found.key === key ? found.childRunId : void 0;
+  const hasChild = childRunId !== void 0;
+  useEffect(() => {
+    const client = getFluidGridsClientSafe();
+    if (!key || !runId || !nodeId || !client || hasChild) {
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    let timer = null;
+    let inFlight = false;
+    const lookup = (first) => {
+      if (inFlight) return;
+      inFlight = true;
+      if (first) setLoading(true);
+      client.query({
+        query: NodeStatesDocument,
+        variables: { runId },
+        fetchPolicy: "network-only"
+      }).then((result) => {
+        throwIfResultError(result);
+        if (cancelled) return;
+        const next = childRunIdOf(result.data?.nodeStates ?? [], nodeId);
+        setFound({ key, childRunId: next });
+        if (next && timer) {
+          clearInterval(timer);
+          timer = null;
+        }
+      }).catch(() => {
+      }).finally(() => {
+        inFlight = false;
+        if (!cancelled && first) setLoading(false);
+      });
+    };
+    lookup(true);
+    if (active) {
+      timer = setInterval(() => lookup(false), CHILD_RUN_POLL_INTERVAL_MS);
+    }
+    return () => {
+      cancelled = true;
+      if (timer) clearInterval(timer);
+    };
+  }, [key, runId, nodeId, active, hasChild]);
+  return { childRunId, loading: loading && !hasChild };
+}
+function CodeWorkflowTrace({
+  childRunId,
+  locating,
+  active
+}) {
+  const tr = useTr();
+  const history = useRunHistory(childRunId, {
+    enabled: !!childRunId,
+    live: active
+  });
+  if (!childRunId) {
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "p-4 text-sm text-muted-foreground",
+        "data-testid": "code-workflow-trace-empty",
+        children: locating ? tr(
+          "fluidgrids.builder.codeWorkflow.trace.locating",
+          "Looking for the function's run\u2026"
+        ) : tr(
+          "fluidgrids.builder.codeWorkflow.trace.none",
+          "Run the workflow to see the function's history here."
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: "p-4", "data-testid": "code-workflow-trace", children: /* @__PURE__ */ jsx(
+    RunHistoryView,
+    {
+      events: history.events,
+      loading: history.loading,
+      error: history.error,
+      active,
+      streaming: history.streaming,
+      truncated: history.truncated,
+      historyLength: history.historyLength,
+      onRefresh: () => void history.refetch(),
+      compact: true,
+      "data-testid": "code-workflow-trace-history"
+    }
+  ) });
+}
+function CodeWorkflowPanel({
+  tab,
+  nodeId,
+  args,
+  onClose
+}) {
+  const workflowKey = useFlowStore((s) => s.workflow.workflowKey);
+  const version = useFlowStore((s) => s.workflow.version);
+  const currentRunId = useFlowStore((s) => s.execution.currentRunId);
+  const isExecuting = useFlowStore((s) => s.execution.isExecuting);
+  const { allowed: canEdit } = useFluidGridsPermission(
+    FLUIDGRIDS_PERMISSIONS.WORKFLOW_UPDATE
+  );
+  const { allowed: canSignal } = useFluidGridsPermission(
+    FLUIDGRIDS_PERMISSIONS.WORKFLOW_RUN_EXECUTE
+  );
+  const state = readCodeWorkflowState(args);
+  const iface = useCodeWorkflowInterface(state.workflowFn, tab === "interface");
+  const child = useCodeWorkflowChildRun(
+    currentRunId,
+    nodeId,
+    tab === "trace" || tab === "interface",
+    isExecuting
+  );
+  if (tab === "source") {
+    return /* @__PURE__ */ jsx(
+      CodeWorkflowSourceEditor,
+      {
+        workflowKey,
+        version,
+        enabled: !!workflowKey && !!version,
+        canEdit,
+        onSaved: () => {
+          clearCodeWorkflowDefinitionCache();
+          onClose();
+        }
+      }
+    );
+  }
+  if (tab === "trace") {
+    return /* @__PURE__ */ jsx(
+      CodeWorkflowTrace,
+      {
+        childRunId: child.childRunId,
+        locating: child.loading,
+        active: isExecuting
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    CodeWorkflowInterface,
+    {
+      iface: iface.iface,
+      loading: iface.loading,
+      error: iface.error,
+      onRetry: iface.retry,
+      childRunId: child.childRunId,
+      canSignal
+    }
+  );
+}
+var SECTION_LABEL2 = "text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground";
+function NodeDetailView() {
+  const tr = useTr();
+  const ndv = useFlowStore((s) => s.workflow.ndv);
+  const closeNdv = useFlowStore((s) => s.actions.ndv.close);
+  const showNodePropertiesOf = useFlowStore(
+    (s) => s.actions.sidebar.showNodePropertiesOf
+  );
+  const open = !!ndv;
+  const config = useNodeConfig(ndv ?? null, { webhookEnabled: open });
+  const {
+    node,
+    nodes,
+    sourceIds,
+    selectedSource,
+    setSelectedSource,
+    currentOp,
+    inputFields,
+    inputData,
+    outputFields
+  } = config;
+  const [tab, setTab] = useState(
+    "parameters"
+  );
+  const durableEnabled = useDurableFunctionNodesEnabled();
+  const isCodeWorkflow = durableEnabled && node?.type === CODE_WORKFLOW_NODE_TYPE;
+  const [outputView, setOutputView] = useState("schema");
+  const [inputView, setInputView] = useState("schema");
+  const executionLogs = useFlowStore((s) => s.execution.logs);
+  const currentRunId = useFlowStore((s) => s.execution.currentRunId);
+  const sourceRun = useFlowStore((s) => s.execution.sourceRun);
+  const isExecuting = useFlowStore((s) => s.execution.isExecuting);
+  const workflowNodes = useFlowStore((s) => s.workflow.nodes);
+  const workflowEdges = useFlowStore((s) => s.workflow.edges);
+  const workflowKey = useFlowStore((s) => s.workflow.workflowKey);
+  const workflowId = useFlowStore((s) => s.workflow.id);
+  const workflowVersion = useFlowStore((s) => s.workflow.version);
+  const stepPlan = useFlowStore((s) => s.execution.stepPlan);
+  const nodeLog = useMemo(
+    () => latestNodeLog(executionLogs, ndv?.nodeId, currentRunId),
+    [executionLogs, ndv?.nodeId, currentRunId]
+  );
+  const stepPlanForNode = stepPlan?.runId === currentRunId && stepPlan.targetNodeId === ndv?.nodeId ? stepPlan : null;
+  const hasRealOutput = !!nodeLog?.output && Object.keys(nodeLog.output).length > 0;
+  const hasRealInput = inputData !== void 0;
+  const realOutputFields = useMemo(
+    () => hasRealOutput ? fieldsFromValue(nodeLog.output) : [],
+    [hasRealOutput, nodeLog]
+  );
+  const workflowDbId = useFlowStore((s) => s.workflow.dbId);
+  const { data: pinnedDataResult, refetch: refetchPinnedData } = useWorkflowPinnedDataQuery({
+    variables: { id: workflowDbId },
+    skip: !workflowDbId || !open,
+    fetchPolicy: "cache-and-network"
+  });
+  const pinnedNodeData = pinnedDataResult?.workflowDefinition?.pinnedNodeData ?? {};
+  const isPinned = !!ndv?.nodeId && !!pinnedNodeData[ndv.nodeId];
+  const [pinNodeData, { loading: pinning }] = usePinNodeDataMutation();
+  const [unpinNodeData, { loading: unpinning }] = useUnpinNodeDataMutation();
+  const togglePin = async () => {
+    if (!workflowDbId || !ndv?.nodeId || config.readOnly) return;
+    try {
+      if (isPinned) {
+        await unpinNodeData({
+          variables: { id: workflowDbId, nodeId: ndv.nodeId }
+        });
+      } else {
+        const dataToPin = nodeLog?.output ?? currentOp?.output_fields ?? {};
+        await pinNodeData({
+          variables: { id: workflowDbId, nodeId: ndv.nodeId, data: dataToPin }
+        });
+      }
+      await refetchPinnedData();
+    } catch (err) {
+      console.error("[NodeDetailView] Failed to toggle pinned data", err);
+    }
+  };
+  const { executeStep, executeFromNode } = useNodeExecution();
+  const threePaneLayout = useMediaQuery("(min-width: 1024px)");
+  const [pane, setPane] = useState("parameters");
+  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?.(), []);
+  const requestedTab = ndv?.tab;
+  useEffect(() => {
+    if (open) {
+      setTab(requestedTab ?? "parameters");
+      setPane("parameters");
+    }
+  }, [open, ndv?.nodeId, requestedTab]);
+  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: NDV_Z_INDEX
+      },
+      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: tr(
+                "fluidgrids.builder.nodeDetailView.sidePanelButton",
+                "Side panel"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": tr(
+                "fluidgrids.builder.nodeDetailView.closeAriaLabel",
+                "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" })
+            }
+          )
+        ] }),
+        ndv && /* @__PURE__ */ jsx(
+          NodeExecutionActions,
+          {
+            targetNodeId: ndv.nodeId,
+            nodes: workflowNodes,
+            edges: workflowEdges,
+            logs: executionLogs,
+            workflowKey: workflowKey || workflowId,
+            workflowVersion: workflowVersion || "1.0.0",
+            sourceRun,
+            isExecuting,
+            onExecuteStep: async (targetId) => {
+              await executeStep(targetId);
+            },
+            onContinueFromNode: async (sourceRunId, targetId) => {
+              const result = await executeFromNode(sourceRunId, targetId);
+              if (!result.success && result.quotaExhausted) closeNdv();
+            },
+            testIdPrefix: "ndv",
+            className: "border-t-0 border-b"
+          }
+        ),
+        stepPlanForNode && /* @__PURE__ */ jsx(StepExecutionPlanSummary, { plan: stepPlanForNode }),
+        !threePaneLayout && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex shrink-0 items-center gap-4 border-b border-border px-4",
+            "data-testid": "ndv-pane-switcher",
+            children: [
+              /* @__PURE__ */ jsx(
+                TabButton,
+                {
+                  active: pane === "input",
+                  onClick: () => setPane("input"),
+                  children: tr("fluidgrids.builder.nodeDetailView.inputSection", "Input")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TabButton,
+                {
+                  active: pane === "parameters",
+                  onClick: () => setPane("parameters"),
+                  children: tr(
+                    "fluidgrids.builder.nodeDetailView.tabParameters",
+                    "Parameters"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TabButton,
+                {
+                  active: pane === "output",
+                  onClick: () => setPane("output"),
+                  children: tr("fluidgrids.builder.nodeDetailView.outputSection", "Output")
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { ref: panesRef, className: "flex min-h-0 flex-1", children: [
+          /* @__PURE__ */ jsxs(
+            "section",
+            {
+              style: threePaneLayout ? { width: `${leftPct}%` } : void 0,
+              className: cn(
+                "flex min-h-0 flex-col bg-card/40",
+                threePaneLayout ? "min-w-[180px]" : pane === "input" ? "w-full flex-1" : "hidden"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-2.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: SECTION_LABEL2, children: tr("fluidgrids.builder.nodeDetailView.inputSection", "Input") }),
+                  hasRealInput && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-primary",
+                      title: tr(
+                        "fluidgrids.builder.nodeDetailView.realDataBadgeHint",
+                        "Showing real data from the last execution."
+                      ),
+                      children: tr(
+                        "fluidgrids.builder.nodeDetailView.realDataBadge",
+                        "Live"
+                      )
+                    }
+                  ),
+                  sourceIds.length > 0 && /* @__PURE__ */ jsx(
+                    "select",
+                    {
+                      className: "ml-auto max-w-[60%] truncate rounded-md border border-border-default bg-bg-surface px-2 py-1 text-xs text-text-primary scheme-normal dark:scheme-dark outline-none focus:border-action-primary-border [&_option]:bg-bg-surface [&_option]:text-text-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);
+                      })
+                    }
+                  ),
+                  (hasRealInput || inputFields.length > 0) && /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx(
+                      ToggleChip,
+                      {
+                        active: inputView === "schema",
+                        onClick: () => setInputView("schema"),
+                        children: tr(
+                          "fluidgrids.builder.nodeDetailView.outputViewSchema",
+                          "Schema"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ToggleChip,
+                      {
+                        active: inputView === "table",
+                        onClick: () => setInputView("table"),
+                        children: tr(
+                          "fluidgrids.builder.nodeDetailView.outputViewTable",
+                          "Table"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ToggleChip,
+                      {
+                        active: inputView === "json",
+                        onClick: () => setInputView("json"),
+                        children: tr(
+                          "fluidgrids.builder.nodeDetailView.outputViewJson",
+                          "JSON"
+                        )
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "min-h-0 flex-1 overflow-auto px-2 pb-3",
+                    "data-testid": "ndv-input-tree",
+                    children: [
+                      hasRealInput ? inputView === "schema" ? /* @__PURE__ */ jsx(FieldTree, { fields: inputFields, draggable: true }) : inputView === "table" ? /* @__PURE__ */ jsx(TableView, { data: inputData }) : /* @__PURE__ */ jsx(JsonView, { data: inputData }) : inputFields.length > 0 ? /* @__PURE__ */ jsx(FieldTree, { fields: inputFields, draggable: true }) : /* @__PURE__ */ jsx(
+                        EmptyState,
+                        {
+                          icon: "mdi:tray-arrow-down",
+                          title: tr(
+                            "fluidgrids.builder.nodeDetailView.noInputTitle",
+                            "No input data"
+                          ),
+                          hint: sourceIds.length === 0 ? tr(
+                            "fluidgrids.builder.nodeDetailView.noInputHintDisconnected",
+                            "Connect an upstream node to map its fields."
+                          ) : tr(
+                            "fluidgrids.builder.nodeDetailView.noInputHintNoFields",
+                            "The selected source has no declared output fields."
+                          )
+                        }
+                      ),
+                      nodeLog?.inputArgs && /* @__PURE__ */ jsxs(
+                        "details",
+                        {
+                          className: "mt-4 border-t border-border px-2 pt-3 text-xs",
+                          "data-testid": "ndv-executed-parameters",
+                          children: [
+                            /* @__PURE__ */ jsx("summary", { className: "cursor-pointer font-medium", children: tr(
+                              "fluidgrids.builder.nodeDetailView.executedParameters",
+                              "Executed parameters (read-only)"
+                            ) }),
+                            /* @__PURE__ */ jsx("p", { className: "my-2 text-muted-foreground", children: tr(
+                              "fluidgrids.builder.nodeDetailView.executedParametersHint",
+                              "Values passed to this node after mapping. Drag fields from the upstream source above to create mappings."
+                            ) }),
+                            /* @__PURE__ */ jsx(JsonView, { data: nodeLog.inputArgs })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          threePaneLayout && /* @__PURE__ */ jsx(ResizeHandle, { onStart: startDrag("left") }),
+          /* @__PURE__ */ jsxs(
+            "section",
+            {
+              className: cn(
+                "flex min-h-0 flex-1 flex-col",
+                threePaneLayout ? "min-w-[280px]" : pane === "parameters" ? "w-full" : "hidden"
+              ),
+              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: tr(
+                        "fluidgrids.builder.nodeDetailView.tabParameters",
+                        "Parameters"
+                      )
+                    }
+                  ),
+                  isCodeWorkflow && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      TabButton,
+                      {
+                        active: tab === "source",
+                        onClick: () => setTab("source"),
+                        children: tr(
+                          "fluidgrids.builder.nodeDetailView.tabSource",
+                          "Source"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      TabButton,
+                      {
+                        active: tab === "trace",
+                        onClick: () => setTab("trace"),
+                        children: tr("fluidgrids.builder.nodeDetailView.tabTrace", "Trace")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      TabButton,
+                      {
+                        active: tab === "interface",
+                        onClick: () => setTab("interface"),
+                        children: tr(
+                          "fluidgrids.builder.nodeDetailView.tabInterface",
+                          "Interface"
+                        )
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    TabButton,
+                    {
+                      active: tab === "settings",
+                      onClick: () => setTab("settings"),
+                      children: tr(
+                        "fluidgrids.builder.nodeDetailView.tabSettings",
+                        "Settings"
+                      )
+                    }
+                  )
+                ] }),
+                isCodeWorkflow && ndv && (tab === "source" || tab === "trace" || tab === "interface") ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex min-h-0 flex-1 flex-col overflow-auto",
+                    "data-testid": `ndv-code-workflow-${tab}`,
+                    children: /* @__PURE__ */ jsx(
+                      CodeWorkflowPanel,
+                      {
+                        tab,
+                        nodeId: ndv.nodeId,
+                        args: node?.data?.args?.state,
+                        onClose: closeNdv
+                      }
+                    )
+                  }
+                ) : tab === "parameters" ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "min-h-0 flex-1 space-y-4 overflow-auto p-4",
+                    "data-testid": "ndv-params",
+                    children: /* @__PURE__ */ jsx(ReadOnlyFieldset, { className: "space-y-4", children: /* @__PURE__ */ jsx(
+                      NodeParamsForm,
+                      {
+                        config,
+                        nodeType: node?.type,
+                        testIdPrefix: "ndv"
+                      }
+                    ) })
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "min-h-0 flex-1 overflow-auto p-4",
+                    "data-testid": "ndv-settings",
+                    children: /* @__PURE__ */ jsx(ReadOnlyFieldset, { children: /* @__PURE__ */ jsx(NodeSettingsPanel, { config }) })
+                  }
+                )
+              ]
+            }
+          ),
+          threePaneLayout && /* @__PURE__ */ jsx(ResizeHandle, { onStart: startDrag("right") }),
+          /* @__PURE__ */ jsxs(
+            "section",
+            {
+              style: threePaneLayout ? { width: `${rightPct}%` } : void 0,
+              className: cn(
+                "flex min-h-0 flex-col bg-card/40",
+                threePaneLayout ? "min-w-[180px]" : pane === "output" ? "w-full flex-1" : "hidden"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-2.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: SECTION_LABEL2, children: tr(
+                    "fluidgrids.builder.nodeDetailView.outputSection",
+                    "Output"
+                  ) }),
+                  hasRealOutput && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-primary",
+                      title: tr(
+                        "fluidgrids.builder.nodeDetailView.realDataBadgeHint",
+                        "Showing real data from the last execution."
+                      ),
+                      children: tr(
+                        "fluidgrids.builder.nodeDetailView.realDataBadge",
+                        "Live"
+                      )
+                    }
+                  ),
+                  nodeLog?.usedPinnedData && /* @__PURE__ */ jsx("span", { className: "rounded bg-status-warning-bg-subtle px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-status-warning-text", children: tr(
+                    "fluidgrids.builder.nodeDetailView.pinnedDataUsedBadge",
+                    "Pinned"
+                  ) }),
+                  ndv?.nodeId && workflowDbId && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: togglePin,
+                      disabled: pinning || unpinning || config.readOnly,
+                      "data-testid": "ndv-pin-toggle",
+                      title: tr(
+                        isPinned ? "fluidgrids.builder.nodeDetailView.unpinHint" : "fluidgrids.builder.nodeDetailView.pinHint",
+                        isPinned ? "Unpin \u2014 TEST runs will call this node for real again." : "Pin this output \u2014 TEST runs will replay it instead of calling the node."
+                      ),
+                      className: cn(
+                        "flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide transition-colors disabled:opacity-50",
+                        isPinned ? "bg-status-warning-bg-subtle text-status-warning-text" : "text-muted-foreground hover:text-foreground"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            icon: isPinned ? "mdi:pin" : "mdi:pin-outline",
+                            className: "size-3"
+                          }
+                        ),
+                        tr(
+                          isPinned ? "fluidgrids.builder.nodeDetailView.unpinButton" : "fluidgrids.builder.nodeDetailView.pinButton",
+                          isPinned ? "Pinned" : "Pin"
+                        )
+                      ]
+                    }
+                  ),
+                  (hasRealOutput || 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: tr(
+                          "fluidgrids.builder.nodeDetailView.outputViewSchema",
+                          "Schema"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ToggleChip,
+                      {
+                        active: outputView === "table",
+                        onClick: () => setOutputView("table"),
+                        children: tr(
+                          "fluidgrids.builder.nodeDetailView.outputViewTable",
+                          "Table"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ToggleChip,
+                      {
+                        active: outputView === "json",
+                        onClick: () => setOutputView("json"),
+                        children: tr(
+                          "fluidgrids.builder.nodeDetailView.outputViewJson",
+                          "JSON"
+                        )
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "min-h-0 flex-1 overflow-auto px-2 pb-3",
+                    "data-testid": "ndv-output-tree",
+                    children: hasRealOutput ? outputView === "schema" ? /* @__PURE__ */ jsx(FieldTree, { fields: realOutputFields, draggable: true }) : outputView === "table" ? /* @__PURE__ */ jsx(TableView, { data: nodeLog.output }) : /* @__PURE__ */ jsx(JsonView, { data: nodeLog.output }) : outputFields.length === 0 ? /* @__PURE__ */ jsx(
+                      EmptyState,
+                      {
+                        icon: "mdi:tray-arrow-up",
+                        title: tr(
+                          "fluidgrids.builder.nodeDetailView.noOutputTitle",
+                          "No output data"
+                        ),
+                        hint: tr(
+                          "fluidgrids.builder.nodeDetailView.noOutputHint",
+                          "This operation has no declared output fields. Run this node to see its real output here."
+                        )
+                      }
+                    ) : outputView === "schema" ? /* @__PURE__ */ jsx(FieldTree, { fields: outputFields, draggable: true }) : outputView === "table" ? /* @__PURE__ */ jsx(TableView, { data: null }) : /* @__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 StepExecutionPlanSummary({ plan }) {
+  const tr = useTr();
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "shrink-0 border-b border-border bg-muted/30 px-4 py-2.5",
+      "data-testid": "ndv-step-execution-plan",
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-foreground", children: tr(
+            "fluidgrids.builder.nodeDetailView.stepPlanTitle",
+            "TEST execution plan"
+          ) }),
+          /* @__PURE__ */ jsx(
+            PlanMetric,
+            {
+              label: tr(
+                "fluidgrids.builder.nodeDetailView.stepPlanExecute",
+                "Execute"
+              ),
+              count: plan.executeNodeIds.length
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PlanMetric,
+            {
+              label: tr("fluidgrids.builder.nodeDetailView.stepPlanReuse", "Reuse"),
+              count: plan.reusedNodeIds.length
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PlanMetric,
+            {
+              label: tr(
+                "fluidgrids.builder.nodeDetailView.stepPlanPinned",
+                "Pinned"
+              ),
+              count: plan.pinnedNodeIds.length
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PlanMetric,
+            {
+              label: tr(
+                "fluidgrids.builder.nodeDetailView.stepPlanBlockers",
+                "Blockers"
+              ),
+              count: plan.blockers.length
+            }
+          )
+        ] }),
+        plan.sourceRunId && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-[11px] text-muted-foreground", children: [
+          tr(
+            "fluidgrids.builder.nodeDetailView.stepPlanSource",
+            "Using compatible TEST data from run"
+          ),
+          " ",
+          /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground", children: plan.sourceRunId })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 grid gap-2 sm:grid-cols-2", children: [
+          /* @__PURE__ */ jsx(
+            PlanNodeList,
+            {
+              label: tr(
+                "fluidgrids.builder.nodeDetailView.stepPlanExecuteNodes",
+                "Nodes to execute"
+              ),
+              nodeIds: plan.executeNodeIds,
+              emptyLabel: tr(
+                "fluidgrids.builder.nodeDetailView.stepPlanExecuteNodesEmpty",
+                "No nodes need execution."
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PlanNodeList,
+            {
+              label: tr(
+                "fluidgrids.builder.nodeDetailView.stepPlanReusedNodes",
+                "Reused nodes"
+              ),
+              nodeIds: plan.reusedNodeIds,
+              emptyLabel: tr(
+                "fluidgrids.builder.nodeDetailView.stepPlanReusedNodesEmpty",
+                "No prior node data reused."
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PlanNodeList,
+            {
+              label: tr(
+                "fluidgrids.builder.nodeDetailView.stepPlanPinnedNodes",
+                "Pinned nodes"
+              ),
+              nodeIds: plan.pinnedNodeIds,
+              emptyLabel: tr(
+                "fluidgrids.builder.nodeDetailView.stepPlanPinnedNodesEmpty",
+                "No pinned data used."
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PlanNodeList,
+            {
+              label: tr(
+                "fluidgrids.builder.nodeDetailView.stepPlanBlockerNodes",
+                "Blockers"
+              ),
+              nodeIds: plan.blockers,
+              emptyLabel: tr(
+                "fluidgrids.builder.nodeDetailView.stepPlanBlockerNodesEmpty",
+                "No blockers."
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function PlanMetric({ label, count }) {
+  return /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted-foreground", children: [
+    label,
+    ": ",
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: count })
+  ] });
+}
+function PlanNodeList({
+  label,
+  nodeIds,
+  emptyLabel
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0 rounded-md border border-border bg-background/60 px-2 py-1.5", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
+    nodeIds.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap gap-1", children: nodeIds.map((nodeId) => /* @__PURE__ */ jsx(
+      "code",
+      {
+        className: "max-w-full truncate rounded bg-muted px-1 py-0.5 font-mono text-[10px] text-foreground",
+        children: nodeId
+      },
+      `${label}-${nodeId}`
+    )) }) : /* @__PURE__ */ jsx("p", { className: "mt-1 text-[10px] text-muted-foreground", children: emptyLabel })
+  ] });
+}
+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(
+        "-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(
+        "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 })
+  ] });
+}
+
+export { NodeDetailView };