@manny-est/node-red-flowpilot 0.5.0 → 0.5.2

package/lib/core/apply-review.js

@@ -28,7 +28,21 @@
         // throwing) AND on disk (each string serializes with id
         // undefined -> null, confirmed via a live flows.json). Group
         // membership must only ever change through applyGroupChanges().
-        nodes: 1
+        nodes: 1,
+        // Node appearance/documentation fields and node-type-specific
+        // internal defaults that models hallucinate sentinel placeholders
+        // for during build-loop reviews. None of these are meaningfully
+        // settable via a Modify patch — they're either Appearance-tab
+        // metadata or type-internal runtime flags. Adding them here
+        // prevents false "redaction" blocks with no actionable remediation.
+        // Appearance/docs (all node types):
+        info: 1, inputLabels: 1, outputLabels: 1, icon: 1,
+        // debug node internal display flags:
+        console: 1, tostatus: 1, targetType: 1, statusVal: 1, statusType: 1,
+        // function node internal flags:
+        noerr: 1, initialize: 1, finalize: 1,
+        // mqtt in/out retain handling:
+        rh: 1
     };
 
     // Sentinel strings written by sanitizeNode (and redactDebugValue) for
@@ -113,7 +127,7 @@
     // internally for t:"add" events) and pushes one compound history entry so
     // a single Ctrl+Z removes both the new nodes and their wires together.
     function applyInsertions(newNodes, newWires, contextNodeIds) {
-        if (!newNodes || !newNodes.length) { return; }
+        if ((!newNodes || !newNodes.length) && (!newWires || !newWires.length)) { return; }
 
         // Determine z (flow-tab id) from the active workspace.
         var z = "";
@@ -246,6 +260,57 @@
             });
         });
 
+        // Collision-avoidance stagger: independent components that happen to
+        // share the same anchor (e.g. several standalone new nodes each
+        // wired from/to the SAME existing node — "add 5 debug taps after
+        // this http request node") compute identical target coordinates
+        // above and land exactly on top of each other. Detect a component
+        // whose origin collides with an earlier one and nudge the WHOLE
+        // component (preserving its own internal layout) into a small grid
+        // offset from the first occupant, so multi-node insertions never
+        // pile invisibly at one point.
+        var occupiedOrigins = [];
+        function collidesWithOccupied(x, y) {
+            return occupiedOrigins.some(function (p) {
+                return Math.abs(p.x - x) < 20 && Math.abs(p.y - y) < 20;
+            });
+        }
+        Object.keys(componentAnchors).forEach(function (c) {
+            var members = laid.filter(function (n) { return componentOf[n.id] === c; });
+            if (!members.length) { return; }
+            var baseX = members.reduce(function (m, n) { return Math.min(m, n.x); }, members[0].x);
+            var baseY = members.reduce(function (m, n) { return Math.min(m, n.y); }, members[0].y);
+            // Walk a single-column grid outward from the natural origin
+            // until we find a slot nothing else already occupies — one
+            // node per row, never two at the same y (CLAUDE-012: Manny's
+            // original spec, which the earlier 2-wide grid still violated
+            // by putting a pair at the same vertical level). After 5 nodes
+            // in a column, wrap to a new column further right than the
+            // first node in the previous one, so wires stay visually
+            // distinguishable instead of stacking on top of each other.
+            var slot = 0;
+            var x = baseX, y = baseY;
+            while (collidesWithOccupied(x, y) && slot < 200) {
+                slot++;
+                x = baseX + Math.floor(slot / 5) * 250;
+                y = baseY + (slot % 5) * 90;
+            }
+            if (slot > 0) {
+                var dx = x - baseX, dy = y - baseY;
+                members.forEach(function (n) { n.x += dx; n.y += dy; });
+            }
+            occupiedOrigins.push({ x: x, y: y });
+        });
+
+        // B3: snapshot placeholder→type before ids are overwritten, so wire
+        // failure messages can name the placeholder id and type rather than the
+        // opaque real hex id the node was never given (node not inserted = id
+        // exists in idMap but never landed in the live graph).
+        var placeholderToType = {};
+        laid.forEach(function (n) {
+            if (placeholderIds[n.id]) { placeholderToType[n.id] = n.type || "?"; }
+        });
+
         // Build placeholder-id → real-id map and assign real ids + z.
         var idMap = {};
         laid.forEach(function (n) {
@@ -338,6 +403,15 @@
                     ? typeDef.outputs
                     : (Array.isArray(n.wires) ? n.wires.length : 0);
             }
+            // The model's "wires" array can disagree with the node type's
+            // real port count (e.g. a hallucinated single empty port on a
+            // 0-output type like http response) — the editor draws one
+            // anchor per n.wires entry regardless of n.outputs, so a
+            // mismatch renders a phantom port. Reconcile the array length
+            // to the authoritative n.outputs count now that it's resolved.
+            if (!Array.isArray(n.wires)) { n.wires = []; }
+            while (n.wires.length < n.outputs) { n.wires.push([]); }
+            if (n.wires.length > n.outputs) { n.wires.length = n.outputs; }
             // Apply type-definition defaults for any property the model omitted.
             // This covers required fields (e.g. statusVal/statusType on debug)
             // that oneditsave would normally set, preventing a spurious triangle.
@@ -396,7 +470,16 @@
             var fromNode = findLiveNode(fromId);
             var toNode = findLiveNode(toId);
             if (!fromNode || !toNode) {
-                addMessage("error", "Cannot wire — node not found: " + (!fromNode ? fromId : toId));
+                var _failRef = !fromNode ? wire.from : wire.to;
+                var _failMsg;
+                if (placeholderIds[_failRef]) {
+                    _failMsg = "Cannot wire — referenced node was not inserted (" +
+                        _failRef + " / type: " + (placeholderToType[_failRef] || "?") + ")";
+                } else {
+                    _failMsg = "Cannot wire — node not found in editor: " +
+                        (!fromNode ? fromId : toId);
+                }
+                addMessage("error", _failMsg);
                 return;
             }
             var fromPort = wire.fromPort || 0;
@@ -524,12 +607,13 @@
         var propertyChanges = [];
         var wiresChanged = false;
         var redactionSkips = 0;
+        var redactedKeys = [];
         Object.keys(modNode).forEach(function (k) {
             if (DIFF_SKIP[k]) { return; }
             var newRaw = modNode[k];
             // If the model echoed a sanitizer sentinel, the field is opaque —
             // we can't meaningfully compare or apply it, so skip entirely.
-            if (isSanitizeSentinel(newRaw)) { redactionSkips++; return; }
+            if (isSanitizeSentinel(newRaw)) { redactionSkips++; redactedKeys.push(k); return; }
             var oldRaw = liveNode ? liveNode[k] : undefined;
             var oldStr, newStr;
             try { oldStr = JSON.stringify(oldRaw); } catch (e) { oldStr = String(oldRaw); }
@@ -538,7 +622,7 @@
             if (k === "wires") { wiresChanged = true; return; }
             propertyChanges.push({ key: k, oldVal: oldRaw, newVal: newRaw });
         });
-        return { propertyChanges: propertyChanges, wiresChanged: wiresChanged, redactionSkips: redactionSkips };
+        return { propertyChanges: propertyChanges, wiresChanged: wiresChanged, redactionSkips: redactionSkips, redactedKeys: redactedKeys };
     }
 
     // Diff outgoing wires for an existing node: compare what's live in the graph
@@ -642,6 +726,7 @@
                 propertyChanges: diff.propertyChanges,
                 wiresChanged: diff.wiresChanged,
                 redactionSkips: diff.redactionSkips,
+                redactedKeys: diff.redactedKeys,
                 wiresDiff: wiresDiff,
                 name: modNode.name || (liveNode && liveNode.name) || "",
                 type: modNode.type || (liveNode && liveNode.type) || ""
@@ -662,7 +747,7 @@
         var hasNewNodes = newNodes.length > 0;
         var hasRemoveNodes = removeNodes.length > 0;
         var hasNewGroups = newGroups.length > 0;
-        var hasAnyChanges = hasPropChanges || hasWireChanges || hasNewNodes || hasRemoveNodes || hasNewGroups;
+        var hasAnyChanges = hasPropChanges || hasWireChanges || hasNewNodes || hasRemoveNodes || hasNewGroups || (newWires && newWires.length > 0);
         var totalRedactionSkips = nodeDiffs.reduce(function (s, d) { return s + (d.redactionSkips || 0); }, 0);
 
         var $msg = $("<div>").addClass("fp-message fp-review");
@@ -715,15 +800,27 @@
         });
         if (redactionOnlyDiffs.length > 0) {
             var redSectionTop = hasPropChanges ? "12px" : "0";
-            $("<div>").addClass("fp-review-count").css("margin-top", redSectionTop)
-                .text("Not applied — targets redacted value(s):")
+            var totalRedFields = redactionOnlyDiffs.reduce(function (s, d) {
+                return s + (Array.isArray(d.redactedKeys) && d.redactedKeys.length ? d.redactedKeys.length : 1);
+            }, 0);
+            var $redToggle = $("<div>").addClass("fp-review-count")
+                .css({ "margin-top": redSectionTop, "cursor": "pointer" })
+                .text("▶ Not applied — FlowPilot can’t change these directly (" + totalRedFields + " field(s))")
                 .appendTo($summaryPanel);
+            var $redContent = $("<div>").addClass("fp-hidden").appendTo($summaryPanel);
+            $redToggle.on("click", function () {
+                var collapsed = $redContent.hasClass("fp-hidden");
+                $redContent.toggleClass("fp-hidden", !collapsed);
+                $redToggle.text((collapsed ? "▼" : "▶") + " Not applied — FlowPilot can’t change these directly (" + totalRedFields + " field(s))");
+            });
             redactionOnlyDiffs.forEach(function (d) {
-                var $section = $("<div>").addClass("fp-diff-node").appendTo($summaryPanel);
+                var $section = $("<div>").addClass("fp-diff-node").appendTo($redContent);
                 var title = d.type + (d.name ? " — \"" + d.name + "\"" : "");
                 $("<div>").addClass("fp-diff-node-title").text(title).appendTo($section);
+                var keys = Array.isArray(d.redactedKeys) && d.redactedKeys.length ? d.redactedKeys : [];
+                var fieldList = keys.length ? keys.join(", ") : "one or more fields";
                 $("<div>").addClass("fp-diff-warn")
-                    .text("Proposed change targets a redacted field — edit the value directly in the node editor.")
+                    .text("Cannot change “" + fieldList + "” — FlowPilot cannot read the live value for this field (internal node config). Edit it directly in the node editor if needed.")
                     .appendTo($section);
             });
         }
@@ -845,7 +942,7 @@
         if (!hasAnyChanges) {
             if (totalRedactionSkips > 0) {
                 $("<div>").addClass("fp-warning")
-                    .text("All proposed changes target redacted fields — FlowPilot can only see those values as placeholders. Edit the field(s) directly in the node editor, then retry for any remaining changes.")
+                    .text("None of the proposed changes could be applied — all targeted fields are internal node config that FlowPilot cannot read or modify directly. See the field names above and edit them in the node editor if needed.")
                     .appendTo($actions);
             } else {
                 $("<div>").addClass("fp-review-hint")
@@ -863,17 +960,11 @@
                 : hasNewNodes ? "Insert Nodes"
                 : "Apply Changes"; // covers a request that ONLY creates/updates a group
 
-            // Pop-out: tag this panel with everything applyInsertions/
-            // applyModifications/applyGroupChanges need to re-run from a
-            // relayed click — nodeDiffs re-serialized without liveNode (a
-            // live RED node object, not JSON-safe; applyModifications
-            // re-fetches it itself via findLiveNode anyway, so nothing is
-            // lost). A plain Modify call (applyCallback is the bare
-            // applyModifications reference) gets "data-fp-apply-modify"; a
-            // /build loop fix (buildFixInfo set — see applyBuildLoopFix)
-            // gets "data-fp-apply-build-fix" instead, carrying capReached
-            // too since the relayed click needs to run the SAME loop
-            // bookkeeping a local click would, not just applyModifications.
+            // sharedApplyData is stored in the review record (Phase 10 0B)
+            // so the pop-out can relay an applyByRecordId intent to the
+            // parent without serializing payload into DOM attributes.
+            // nodeDiffs is re-serialized without liveNode (a RED node object,
+            // not JSON-safe; applyModifications re-fetches via findLiveNode).
             var sharedApplyData = {
                 nodeDiffs: nodeDiffs.map(function (d) {
                     return {
@@ -892,40 +983,57 @@
                 existingNodeIds: nodes.map(function (n) { return n.id; }),
                 hasMutations: hasMutations
             };
-            if (applyCallback === applyModifications) {
-                $msg.attr("data-fp-apply-modify", JSON.stringify(sharedApplyData));
-            } else if (buildFixInfo) {
-                sharedApplyData.capReached = !!buildFixInfo.capReached;
-                $msg.attr("data-fp-apply-build-fix", JSON.stringify(sharedApplyData));
-            }
+            if (buildFixInfo) { sharedApplyData.capReached = !!buildFixInfo.capReached; }
+            var _modRecord = addRecord("review", {
+                subkind: buildFixInfo ? "build-fix" : "modify",
+                sharedApplyData: sharedApplyData,
+                state: "pending"
+            });
+            $msg.attr("data-fp-record-id", _modRecord.id);
 
+            var hintParts = [];
+            if (hasPropChanges || hasWireChanges) { hintParts.push("changes mutate live nodes"); }
+            if (hasRemoveNodes) { hintParts.push("removals delete nodes"); }
+            if (hasNewGroups) { hintParts.push("groups are created/updated"); }
+            if (hasNewNodes) { hintParts.push("insertions add new nodes"); }
+            if (!hasNewNodes && newWires && newWires.length > 0) { hintParts.push("connections added"); }
+            var applySub = hintParts.length ? "Review above — " + hintParts.join(", ") + ". Ctrl+Z to undo." : "";
             var $applyBtn = $("<button>")
-                .addClass("red-ui-button red-ui-button-primary")
+                .addClass("fp-chip fp-chip-card")
                 .attr("type", "button")
-                .text(btnLabel)
                 .on("click", function () {
-                    $applyBtn.prop("disabled", true).text("Applying…");
+                    $applyBtn.prop("disabled", true);
+                    $applyTitle.text("Applying…");
                     // Insertions run FIRST so their placeholder→real-id map is
                     // available to applyModifications/applyGroupChanges — an
                     // existing node's rewired "wires" (Tier 3) or a new
                     // group's membership may point at a node being inserted
                     // in this same response.
                     var idMap = {};
-                    if (hasNewNodes) {
+                    var hasNewWires = newWires && newWires.length > 0;
+                    if (hasNewNodes || hasNewWires) {
                         idMap = applyInsertions(newNodes, newWires, nodes.map(function (n) { return n.id; })) || {};
                     }
-                    if (hasMutations && applyCallback) { applyCallback(nodeDiffs, removeNodes, null, idMap); }
+                    // W4 Phase 2: applyCallback also runs the verify read-back,
+                    // so it must fire for insertion-only Modifies too (no
+                    // property/wire change on an EXISTING node), not just when
+                    // hasMutations is true — otherwise "exists"/"wire" checks on
+                    // newly inserted nodes would never run.
+                    if ((hasMutations || hasNewNodes || hasNewWires) && applyCallback) {
+                        applyCallback(nodeDiffs, removeNodes, null, idMap);
+                    }
                     if (hasNewGroups) { applyGroupChanges(newGroups, idMap); }
-                    $applyBtn.text("Done ✓");
+                    if (_modRecord) { _modRecord.state = "applied"; }
+                    $applyTitle.text("Done ✓");
                 });
+            $("<span>").addClass("fp-chip-icon")
+                .append($("<i>").addClass(buildFixInfo ? "fa fa-wrench" : "fa fa-check-circle"))
+                .appendTo($applyBtn);
+            var $applyBody = $("<span>").addClass("fp-chip-body").appendTo($applyBtn);
+            var $applyTitle = $("<span>").addClass("fp-chip-title").text(buildFixInfo ? "Apply Fix" : btnLabel).appendTo($applyBody);
+            $("<span>").addClass("fp-chip-sub").text(buildFixInfo && buildFixInfo.capReached ? "Apply final fix and stop the loop" : applySub).appendTo($applyBody);
+            $("<span>").addClass("fp-chip-go").html("&rsaquo;").appendTo($applyBtn);
             $actions.append($applyBtn);
-            var hintParts = [];
-            if (hasPropChanges || hasWireChanges) { hintParts.push("changes mutate live nodes"); }
-            if (hasRemoveNodes) { hintParts.push("removals delete nodes"); }
-            if (hasNewGroups) { hintParts.push("groups are created/updated"); }
-            if (hasNewNodes) { hintParts.push("insertions add new nodes"); }
-            var hintText = "Review above — " + hintParts.join(", ") + ". Ctrl+Z to undo.";
-            $("<span>").addClass("fp-review-hint").text(hintText).appendTo($actions);
         }
 
         $box.append($msg);
@@ -953,7 +1061,17 @@
 
             var oldValues = {};
             d.propertyChanges.forEach(function (c) { oldValues[c.key] = liveNode[c.key]; });
-            d.propertyChanges.forEach(function (c) { liveNode[c.key] = c.newVal; });
+            d.propertyChanges.forEach(function (c) {
+                // Rewrite placeholder ids that point at newly-inserted config
+                // nodes (e.g. an MQTT out node's broker: "fp-new-0" referring
+                // to a new mqtt-broker in the same response's newNodes).
+                // applyInsertions returns idMap and it flows to us via the
+                // applyCallback chain — idMap[placeholder] is the real id.
+                var val = (idMap && typeof c.newVal === "string" && idMap[c.newVal])
+                    ? idMap[c.newVal]
+                    : c.newVal;
+                liveNode[c.key] = val;
+            });
 
             // Switch nodes derive their port count from rules.length (the edit
             // dialog's "outputCount" map assigns each rule its own output and
@@ -1567,18 +1685,10 @@
         var v = validateGeneratedFlow(nodes);
 
         var $msg = $("<div>").addClass("fp-message fp-review");
-        // Pop-out slice 3 (plain Generate/Document, no onImported): tag
-        // with the raw flow data so the relay can wire up a WORKING "Add
-        // to workspace" button in the pop-out. /build's first proposal
-        // (onImported set, buildGoal present) gets its own tag instead —
-        // importing it also needs to start the loop (startBuildLoop),
-        // which the parent does itself once it gets the relayed intent;
-        // see the "applyBuild" handler in initMainWindow.
-        if (!onImported) {
-            $msg.attr("data-fp-apply-flow", JSON.stringify(nodes));
-        } else if (buildGoal) {
-            $msg.attr("data-fp-apply-build", JSON.stringify({ flow: nodes, goal: buildGoal }));
-        }
+        // The review record (created in the action row when nodes are valid)
+        // carries data-fp-record-id; the pop-out uses it to relay
+        // applyByRecordId to the parent — see bindReviewApplyButtons/
+        // applyByRecordId in initMainWindow (Phase 10 0B).
         $("<div>").addClass("fp-label").text("GENERATED FLOW — REVIEW").appendTo($msg);
 
         var $tabSummary = $("<button>").addClass("fp-tab fp-tab-active").attr("type", "button").text("Summary");
@@ -1656,22 +1766,342 @@
         } else if (!nodes.length) {
             $("<div>").addClass("fp-warning").text("No nodes were generated — nothing to add.").appendTo($actions);
         } else {
-            var $addBtn = $("<button>")
-                .addClass("red-ui-button red-ui-button-primary")
+            var _genRecord = addRecord("review", {
+                subkind: onImported ? "build-generate" : "generate",
+                flow: nodes,
+                buildGoal: buildGoal || null,
+                onImported: onImported || null,
+                state: "pending"
+            });
+            $msg.attr("data-fp-record-id", _genRecord.id);
+            if (onImported && buildGoal) {
+                // B1: primary deploy-and-verify chip (accent, full-width) + secondary
+                // plain escape hatch. Only when buildGoal is set — that signals this
+                // is a build-loop context, not just a plain post-import callback.
+                var $primaryChip = $("<button>")
+                    .addClass("fp-chip fp-chip-card")
+                    .attr("type", "button")
+                    .on("click", function () {
+                        $primaryChip.prop("disabled", true);
+                        $secondaryAddBtn.prop("disabled", true);
+                        if (_genRecord) { _genRecord.state = "applied"; }
+                        importGeneratedFlow(nodes, onImported);
+                    });
+                $("<span>").addClass("fp-chip-icon")
+                    .append($("<i>").addClass("fa fa-check-circle"))
+                    .appendTo($primaryChip);
+                var $chipBody = $("<span>").addClass("fp-chip-body").appendTo($primaryChip);
+                $("<span>").addClass("fp-chip-title").text("Deploy & verify this works →").appendTo($chipBody);
+                $("<span>").addClass("fp-chip-sub").text("Add to canvas, deploy, then run the verification loop").appendTo($chipBody);
+                $("<span>").addClass("fp-chip-go").html("&rsaquo;").appendTo($primaryChip);
+                $actions.append($primaryChip);
+                var $secondaryAddBtn = $("<button>")
+                    .addClass("fp-chip fp-chip-card fp-chip-card-alt")
+                    .attr("type", "button")
+                    .on("click", function () {
+                        $secondaryAddBtn.prop("disabled", true);
+                        $primaryChip.prop("disabled", true);
+                        if (_genRecord) { _genRecord.state = "applied"; }
+                        importGeneratedFlow(nodes, null);
+                    });
+                var $altBody = $("<span>").addClass("fp-chip-body").appendTo($secondaryAddBtn);
+                $("<span>").addClass("fp-chip-title").text("Just add to canvas").appendTo($altBody);
+                $("<span>").addClass("fp-chip-sub").text("Skips deploy & verification").appendTo($altBody);
+                $("<span>").addClass("fp-chip-go").html("&rsaquo;").appendTo($secondaryAddBtn);
+                $actions.append($secondaryAddBtn);
+            } else if (onImported) {
+                // Has a post-import callback (e.g. verifyImportedNodes) but no build
+                // loop — chip button that still fires the callback on import.
+                var $addBtn = $("<button>")
+                    .addClass("fp-chip fp-chip-card")
+                    .attr("type", "button")
+                    .on("click", function () {
+                        $addBtn.prop("disabled", true);
+                        if (_genRecord) { _genRecord.state = "applied"; }
+                        importGeneratedFlow(nodes, onImported);
+                    });
+                var $addBody = $("<span>").addClass("fp-chip-body").appendTo($addBtn);
+                $("<span>").addClass("fp-chip-title").text("Add to canvas").appendTo($addBody);
+                $("<span>").addClass("fp-chip-sub").text("Click the canvas to place the nodes").appendTo($addBody);
+                $("<span>").addClass("fp-chip-go").html("&rsaquo;").appendTo($addBtn);
+                $actions.append($addBtn);
+            } else {
+                var $addBtn = $("<button>")
+                    .addClass("fp-chip fp-chip-card")
+                    .attr("type", "button")
+                    .on("click", function () {
+                        $addBtn.prop("disabled", true);
+                        if (_genRecord) { _genRecord.state = "applied"; }
+                        importGeneratedFlow(nodes, null);
+                    });
+                var $addBody = $("<span>").addClass("fp-chip-body").appendTo($addBtn);
+                $("<span>").addClass("fp-chip-title").text("Add to canvas").appendTo($addBody);
+                $("<span>").addClass("fp-chip-sub").text("Click the canvas to place the nodes").appendTo($addBody);
+                $("<span>").addClass("fp-chip-go").html("&rsaquo;").appendTo($addBtn);
+                $actions.append($addBtn);
+            }
+        }
+
+        $box.append($msg);
+        scrollMessagesToBottom();
+        return $msg;
+    }
+
+    // ---- Refresh-from-history re-render helpers (Phase 10, 0A) -------------
+    // Called by rerenderRecord() in main.js during refreshView(). Reconstruct
+    // review panels from stored record data — the sharedApplyData already
+    // holds everything needed without re-querying the live editor.
+
+    function rerenderReviewRecord(rec) {
+        if (!rec) { return; }
+        switch (rec.subkind) {
+            case "modify":
+            case "build-fix":
+                rerenderModifyReview(rec);
+                break;
+            case "generate":
+            case "build-generate":
+                rerenderGeneratedReview(rec);
+                break;
+        }
+    }
+
+    function rerenderModifyReview(rec) {
+        var $box = el("#fp-messages");
+        if (!$box.length) { return; }
+
+        var d = rec.sharedApplyData || {};
+        var nodeDiffs = Array.isArray(d.nodeDiffs) ? d.nodeDiffs : [];
+        var removeNodes = Array.isArray(d.removeNodes) ? d.removeNodes : [];
+        var newNodes = Array.isArray(d.newNodes) ? d.newNodes : [];
+        var newWires = Array.isArray(d.newWires) ? d.newWires : [];
+        var newGroups = Array.isArray(d.newGroups) ? d.newGroups : [];
+        var existingIds = Array.isArray(d.existingNodeIds) ? d.existingNodeIds : [];
+        var hasMutations = !!d.hasMutations;
+        var capReached = !!d.capReached;
+        var isBuildFix = rec.subkind === "build-fix";
+
+        var hasPropChanges = nodeDiffs.some(function (nd) { return nd.propertyChanges && nd.propertyChanges.length > 0; });
+        var hasWireChanges = nodeDiffs.some(function (nd) { return nd.wiresDiff && (nd.wiresDiff.toRemove.length > 0 || nd.wiresDiff.toAdd.length > 0); });
+        var hasNewNodes = newNodes.length > 0;
+        var hasRemoveNodes = removeNodes.length > 0;
+        var hasNewGroups = newGroups.length > 0;
+        var nodesWithChanges = nodeDiffs.filter(function (nd) { return nd.propertyChanges && nd.propertyChanges.length > 0; }).length;
+        var missingLive = nodeDiffs.some(function (nd) { return nd.propertyChanges && nd.propertyChanges.length > 0 && !findLiveNode(nd.modNode && nd.modNode.id); });
+
+        // Add the record first so the Apply button's closure can reference it.
+        var _newRec = addRecord("review", {
+            subkind: rec.subkind,
+            sharedApplyData: rec.sharedApplyData,
+            state: rec.state
+        });
+
+        var $msg = $("<div>").addClass("fp-message fp-review");
+        $("<div>").addClass("fp-label")
+            .text(isBuildFix ? "BUILD LOOP — FIX REVIEW" : "MODIFY FLOW — REVIEW CHANGES")
+            .appendTo($msg);
+
+        $msg.attr("data-fp-record-id", _newRec.id);
+
+        var $tabSummary = $("<button>").addClass("fp-tab fp-tab-active").attr("type", "button").text("Summary");
+        var $tabJson = $("<button>").addClass("fp-tab").attr("type", "button").text("JSON");
+        $("<div>").addClass("fp-tabs").append($tabSummary, $tabJson).appendTo($msg);
+
+        var $summaryPanel = $("<div>").addClass("fp-tab-panel");
+        var $jsonPanel = $("<div>").addClass("fp-tab-panel fp-hidden");
+        $msg.append($summaryPanel, $jsonPanel);
+
+        // Prop diffs
+        if (hasPropChanges) {
+            $("<div>").addClass("fp-review-count")
+                .text(nodesWithChanges + " of " + nodeDiffs.length + " node(s) will change:")
+                .appendTo($summaryPanel);
+            nodeDiffs.forEach(function (nd) {
+                if (!nd.propertyChanges || !nd.propertyChanges.length) { return; }
+                var $section = $("<div>").addClass("fp-diff-node").appendTo($summaryPanel);
+                var title = nd.type + (nd.name ? " — \"" + nd.name + "\"" : "");
+                $("<div>").addClass("fp-diff-node-title").text(title).appendTo($section);
+                if (!findLiveNode(nd.modNode && nd.modNode.id)) {
+                    $("<div>").addClass("fp-diff-warn")
+                        .text("⚠ Node not found in editor (id: " + (nd.modNode && nd.modNode.id) + ")")
+                        .appendTo($section);
+                    return;
+                }
+                nd.propertyChanges.forEach(function (c) {
+                    var $row = $("<div>").addClass("fp-diff-row").appendTo($section);
+                    $("<span>").addClass("fp-diff-key").text(c.key).appendTo($row);
+                    $("<span>").addClass("fp-diff-old").text(formatDiffVal(c.oldVal)).appendTo($row);
+                    $("<span>").addClass("fp-diff-arrow").text("→").appendTo($row);
+                    $("<span>").addClass("fp-diff-new").text(formatDiffVal(c.newVal)).appendTo($row);
+                });
+            });
+        }
+        // Wire diffs — same rendering as original addModifyReview
+        if (hasWireChanges) {
+            nodeDiffs.forEach(function (nd) {
+                var wd = nd.wiresDiff;
+                if (!wd || (!wd.toRemove.length && !wd.toAdd.length)) { return; }
+                var $section = $("<div>").addClass("fp-diff-node").appendTo($summaryPanel);
+                $("<div>").addClass("fp-diff-node-title")
+                    .text(nd.type + (nd.name ? " — \"" + nd.name + "\"" : ""))
+                    .appendTo($section);
+                wd.toRemove.forEach(function (entry) {
+                    var tgt = RED.nodes.node ? RED.nodes.node(entry.targetId) : null;
+                    var tgtLabel = tgt ? (tgt.name || tgt.type || entry.targetId) : entry.targetId;
+                    var $row = $("<div>").addClass("fp-diff-row").appendTo($section);
+                    $("<span>").addClass("fp-diff-key").text("port " + entry.sourcePort).appendTo($row);
+                    $("<span>").addClass("fp-diff-old").text("→ " + tgtLabel).appendTo($row);
+                    $("<span>").addClass("fp-diff-arrow").text("✕").appendTo($row);
+                    $("<span>").addClass("fp-diff-new").text("").appendTo($row);
+                });
+                wd.toAdd.forEach(function (entry) {
+                    var tgt = RED.nodes.node ? RED.nodes.node(entry.targetId) : null;
+                    var tgtLabel = tgt ? (tgt.name || tgt.type || entry.targetId) : entry.targetId;
+                    var $row = $("<div>").addClass("fp-diff-row").appendTo($section);
+                    $("<span>").addClass("fp-diff-key").text("port " + entry.sourcePort).appendTo($row);
+                    $("<span>").addClass("fp-diff-old").text("").appendTo($row);
+                    $("<span>").addClass("fp-diff-arrow").text("→").appendTo($row);
+                    $("<span>").addClass("fp-diff-new").text(tgtLabel).appendTo($row);
+                });
+            });
+        }
+        // Removals
+        if (hasRemoveNodes) {
+            $("<div>").addClass("fp-review-count fp-diff-warn")
+                .text(removeNodes.length + " node(s) to remove:")
+                .appendTo($summaryPanel);
+            var $rmList = $("<ul>").addClass("fp-review-list").appendTo($summaryPanel);
+            removeNodes.forEach(function (id) {
+                var lv = RED.nodes.node ? RED.nodes.node(id) : null;
+                var label = lv ? ((lv.name || lv.type || id) + " (" + id + ")") : id + " (not found)";
+                $("<li>").addClass("fp-diff-warn").text("✕ " + label).appendTo($rmList);
+            });
+        }
+        // New nodes
+        if (hasNewNodes) {
+            $("<div>").addClass("fp-review-count")
+                .text(newNodes.length + " node(s) to insert:")
+                .appendTo($summaryPanel);
+            var $newList = $("<ul>").addClass("fp-review-list").appendTo($summaryPanel);
+            newNodes.forEach(function (n) {
+                $("<li>").text((n.type || "unknown") + (n.name ? " — \"" + n.name + "\"" : "")).appendTo($newList);
+            });
+            if (newWires.length > 0) {
+                $("<div>").addClass("fp-review-count").css("margin-top", "8px")
+                    .text(newWires.length + " wire connection(s):")
+                    .appendTo($summaryPanel);
+                var $wireList = $("<ul>").addClass("fp-review-list").appendTo($summaryPanel);
+                newWires.forEach(function (wire) {
+                    var fromLabel = resolveWireRef(wire.from, newNodes);
+                    var toLabel = resolveWireRef(wire.to, newNodes);
+                    var portNote = (wire.fromPort && wire.fromPort > 0) ? " [port " + wire.fromPort + "]" : "";
+                    $("<li>").text(fromLabel + portNote + " → " + toLabel).appendTo($wireList);
+                });
+            }
+        }
+        // Groups
+        if (hasNewGroups) {
+            $("<div>").addClass("fp-review-count")
+                .text(newGroups.length + " group(s) to create/update:")
+                .appendTo($summaryPanel);
+            var $grpList = $("<ul>").addClass("fp-review-list").appendTo($summaryPanel);
+            newGroups.forEach(function (g) {
+                $("<li>").text((g.name ? "\"" + g.name + "\"" : "(unnamed)") +
+                    " — " + (Array.isArray(g.nodes) ? g.nodes.length : 0) + " node(s)").appendTo($grpList);
+            });
+        }
+
+        // JSON tab
+        var jsonText = JSON.stringify(d, null, 2);
+        var $copyBtn = $("<button>").addClass("red-ui-button red-ui-button-small").attr("type", "button").text("Copy")
+            .on("click", function () { copyToClipboard($copyBtn, jsonText); });
+        $("<div>").addClass("fp-json-toolbar").append($copyBtn).appendTo($jsonPanel);
+        $("<pre>").addClass("fp-json").text(jsonText).appendTo($jsonPanel);
+
+        $tabSummary.on("click", function () {
+            $tabSummary.addClass("fp-tab-active"); $tabJson.removeClass("fp-tab-active");
+            $summaryPanel.removeClass("fp-hidden"); $jsonPanel.addClass("fp-hidden");
+        });
+        $tabJson.on("click", function () {
+            $tabJson.addClass("fp-tab-active"); $tabSummary.removeClass("fp-tab-active");
+            $jsonPanel.removeClass("fp-hidden"); $summaryPanel.addClass("fp-hidden");
+        });
+
+        // Action row
+        var $actions = $("<div>").addClass("fp-review-actions").appendTo($msg);
+        if (rec.state === "applied") {
+            $("<button>").addClass("red-ui-button red-ui-button-primary")
+                .attr("type", "button").prop("disabled", true).text("Applied ✓")
+                .appendTo($actions);
+        } else if (missingLive && (hasPropChanges || hasWireChanges)) {
+            $("<div>").addClass("fp-warning")
+                .text("One or more nodes could not be found in the editor. Cannot apply safely.")
+                .appendTo($actions);
+        } else {
+            var btnLabel = (hasMutations && hasNewNodes) ? "Apply & Insert"
+                : hasMutations ? "Apply Changes"
+                : hasNewNodes ? "Insert Nodes"
+                : "Apply Changes";
+            var hintParts = [];
+            if (hasPropChanges || hasWireChanges) { hintParts.push("changes mutate live nodes"); }
+            if (hasRemoveNodes) { hintParts.push("removals delete nodes"); }
+            if (hasNewGroups) { hintParts.push("groups are created/updated"); }
+            if (hasNewNodes) { hintParts.push("insertions add new nodes"); }
+            if (!hasNewNodes && newWires && newWires.length > 0) { hintParts.push("connections added"); }
+            var applySub = hintParts.length ? "Review above — " + hintParts.join(", ") + ". Ctrl+Z to undo." : "";
+            var $applyBtn = $("<button>")
+                .addClass("fp-chip fp-chip-card")
                 .attr("type", "button")
-                .text("Add to workspace")
                 .on("click", function () {
-                    $addBtn.prop("disabled", true).text("Click the canvas to place…");
-                    importGeneratedFlow(nodes, onImported);
+                    $applyBtn.prop("disabled", true);
+                    $applyTitle.text("Applying…");
+                    var idMap = {};
+                    if (hasNewNodes || (newWires && newWires.length > 0)) { idMap = applyInsertions(newNodes, newWires, existingIds) || {}; }
+                    if (isBuildFix) {
+                        applyBuildLoopFix(nodeDiffs, removeNodes, idMap, capReached);
+                    } else {
+                        if (hasMutations) { applyModifications(nodeDiffs, removeNodes, null, idMap); }
+                        if (hasNewGroups) { applyGroupChanges(newGroups, idMap); }
+                    }
+                    if (_newRec) { _newRec.state = "applied"; }
+                    $applyTitle.text("Done ✓");
                 });
-            $actions.append($addBtn);
-            $("<span>").addClass("fp-review-hint")
-                .text("Opens Node-RED's normal place-at-cursor import — click the canvas to drop the nodes.")
-                .appendTo($actions);
+            $("<span>").addClass("fp-chip-icon")
+                .append($("<i>").addClass(isBuildFix ? "fa fa-wrench" : "fa fa-check-circle"))
+                .appendTo($applyBtn);
+            var $applyBody = $("<span>").addClass("fp-chip-body").appendTo($applyBtn);
+            var $applyTitle = $("<span>").addClass("fp-chip-title").text(isBuildFix ? "Apply Fix" : btnLabel).appendTo($applyBody);
+            $("<span>").addClass("fp-chip-sub").text(isBuildFix && capReached ? "Apply final fix and stop the loop" : applySub).appendTo($applyBody);
+            $("<span>").addClass("fp-chip-go").html("&rsaquo;").appendTo($applyBtn);
+            $actions.append($applyBtn);
         }
 
         $box.append($msg);
         scrollMessagesToBottom();
-        return $msg;
+    }
+
+    function rerenderGeneratedReview(rec) {
+        var nodes = Array.isArray(rec.flow) ? rec.flow : [];
+        if (rec.state === "applied") {
+            var $box = el("#fp-messages");
+            if (!$box.length) { return; }
+            var $msg = $("<div>").addClass("fp-message fp-review");
+            $("<div>").addClass("fp-label").text("GENERATED FLOW — APPLIED ✓").appendTo($msg);
+            $("<div>").addClass("fp-review-actions")
+                .append($("<button>").addClass("red-ui-button red-ui-button-primary")
+                    .attr("type", "button").prop("disabled", true).text("Applied ✓"))
+                .appendTo($msg);
+            $box.append($msg);
+            addRecord("review", {
+                subkind: rec.subkind, flow: rec.flow,
+                buildGoal: rec.buildGoal, onImported: rec.onImported, state: "applied"
+            });
+            scrollMessagesToBottom();
+        } else {
+            // Re-call addGeneratedReview — it revalidates and creates a fully
+            // interactive panel, including its own addRecord call. onImported is
+            // a live function ref (valid within the same session).
+            addGeneratedReview(nodes, rec.onImported || null, rec.buildGoal || null);
+        }
     }