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

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to FlowPilot are documented here.
 
+## [0.5.1] - 2026-07-24
+
+### Added
+- **`/refresh` command**: re-renders the entire message panel from an in-memory record store without clearing conversation history. Restores interactive Apply buttons and review panels that may have become stale after a long session or a pop-out sync. Type `/refresh` at any time.
+- **Reasoning model support**: FlowPilot detects reasoning models (Nemotron, DeepSeek, QwQ, and any model returning `reasoning_content` or `<think>` blocks) at pre-flight and handles them correctly throughout. Streaming: a live collapsing "Thinking…" block shows reasoning tokens as they arrive, then auto-collapses when the real response begins. Non-streaming (agent loop): a pre-collapsed thinking block renders alongside the final response. Both the SGLang/Nemotron (`delta.reasoning_content`) and llama.cpp/LocalAI (`<think>…</think>` in `delta.content`) formats are supported. Token count shown on collapse.
+- **Auto-preflight on model change**: changing the model field and sending a message now triggers a silent capability probe before the request goes out — no need to click "Test Provider" after every model switch. A notice appears in the chat thread confirming the probe result (model name, tool support, reasoning flag). Settings are saved automatically as part of the probe so the backend uses the new model. The provider status line also updates live as you type the model name.
+
+### Fixed
+- **Pre-flight `probedModel` not reaching frontend**: after a `/test` run, `probedModel` was saved to disk but never mirrored into the in-memory provider profile, so the auto-probe condition (`probedModel !== currentModel`) could never fire after a page reload. The `/test` response now includes `probedModel` in the `capability` object and `handleSendResult` mirrors it into `currentSettings.providers`.
+- **Reasoning content scrolling**: the live thinking block now scrolls to bottom on each streaming delta so long reasoning chains stay visible as they arrive.
+
+### Internal
+- Phase 10 Workstream 0A: shadow record store added across `main.js`, `apply-review.js`, `modes.js`, `init.js` — addMessage/addModifyReview/addGeneratedReview/renderActionChip/renderClarifyingQuestion/renderLoopCheckpoint/renderLoopStepper all create typed records; rerenderRecord dispatches each kind on refresh.
+- Phase 10 Workstream 0B: DOM elements now carry `data-fp-record-id` (record id) instead of inline JSON payloads in `data-fp-apply-*` attributes. Four separate pop-out bind functions consolidated into a single `bindReviewApplyButtons`; four separate parent postMessage handlers replaced by a unified `applyByRecordId` handler that dispatches on the record's subkind.
+
 ## [0.5.0] - 2026-07-06
 
 ### Added

package/flowpilot-core.css

@@ -103,6 +103,65 @@
     border-color: rgba(80, 130, 255, 0.35);
 }
 
+/* Reasoning / thinking block — shown for models that emit reasoning_content
+   (e.g. Nemotron, DeepSeek-R1). Sits above the assistant response bubble.
+   Expanded while the model thinks; collapses automatically when content starts. */
+.fp-thinking {
+    margin-bottom: 8px;
+    border-radius: 8px;
+    border: 1px solid rgba(120, 100, 220, 0.25);
+    background: rgba(100, 80, 200, 0.05);
+    overflow: hidden;
+}
+
+.fp-thinking summary {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 12px;
+    cursor: pointer;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    color: var(--red-ui-secondary-text-color, #888);
+    user-select: none;
+    list-style: none;
+}
+
+.fp-thinking summary::-webkit-details-marker { display: none; }
+
+.fp-thinking summary::before {
+    content: "▶";
+    font-size: 8px;
+    display: inline-block;
+    transition: transform 0.15s ease;
+    color: var(--red-ui-secondary-text-color, #aaa);
+    flex-shrink: 0;
+}
+
+.fp-thinking[open] summary::before {
+    transform: rotate(90deg);
+}
+
+.fp-thinking-tokens {
+    margin-left: auto;
+    font-size: 10px;
+    font-weight: 400;
+    opacity: 0.55;
+}
+
+.fp-thinking-body {
+    padding: 4px 12px 10px 12px;
+    font-family: monospace;
+    font-size: 11px;
+    line-height: 1.5;
+    color: var(--red-ui-secondary-text-color, #999);
+    opacity: 0.8;
+    white-space: pre-wrap;
+    max-height: 180px;
+    overflow-y: auto;
+}
+
 .fp-error {
     background: rgba(255, 80, 80, 0.12);
     border-color: rgba(255, 80, 80, 0.65);

package/flowpilot.js

@@ -556,13 +556,18 @@ module.exports = function flowPilotRuntime(RED) {
 
     let streamResult;
     try {
-      streamResult = await provider.chatStream(activeProvider, messages, function (delta) {
-        const visible = splitter.push(delta);
-        if (visible) {
-          visibleText += visible;
-          res.write("data: " + JSON.stringify({ delta: visible }) + "\n\n");
+      streamResult = await provider.chatStream(activeProvider, messages,
+        function (delta) {
+          const visible = splitter.push(delta);
+          if (visible) {
+            visibleText += visible;
+            res.write("data: " + JSON.stringify({ delta: visible }) + "\n\n");
+          }
+        },
+        function (reasoningDelta) {
+          res.write("data: " + JSON.stringify({ reasoningDelta: reasoningDelta }) + "\n\n");
         }
-      });
+      );
     } catch (err) {
       res.write("data: " + JSON.stringify({ error: err.message }) + "\n\n");
       res.end();
@@ -751,6 +756,10 @@ module.exports = function flowPilotRuntime(RED) {
       if (suggestedAction) { body.suggestedAction = suggestedAction; }
       const questionOptions = extractQuestionOptions(chatData);
       if (questionOptions) { body.questionOptions = questionOptions; }
+      // Pass reasoning_content through so the frontend can render a thinking
+      // block on the non-streaming (agent-loop) path too.
+      const rawMsg = result.raw && result.raw.choices && result.raw.choices[0] && result.raw.choices[0].message;
+      if (rawMsg && rawMsg.reasoning_content) { body.reasoningContent = rawMsg.reasoning_content; }
       res.json(body);
     } catch (err) {
       storage.appendAudit({ action: "chat_error", error: err.message });
@@ -933,29 +942,42 @@ module.exports = function flowPilotRuntime(RED) {
       // probe failure here just means "no tool support", not a /test failure.
       // Persist the result on the provider profile for the agentic tool-calling path.
       const probe = await provider.probeTools(activeProvider);
+      const reasoning = provider.detectReasoning(result.raw);
       storage.appendAudit({
         action: "capability_probe",
         providerName: activeProvider.providerName,
         baseUrl: activeProvider.baseUrl,
         model: activeProvider.model,
-        supportsTools: probe.supportsTools
+        supportsTools: probe.supportsTools,
+        isReasoningModel: reasoning.isReasoningModel
       });
 
       const updatedProviders = (settings.providers || []).map(function (p) {
         return p.id === activeProvider.id
-          ? Object.assign({}, p, { supportsTools: probe.supportsTools, toolsProbedAt: new Date().toISOString() })
+          ? Object.assign({}, p, {
+              supportsTools: probe.supportsTools,
+              toolsProbedAt: new Date().toISOString(),
+              isReasoningModel: reasoning.isReasoningModel,
+              reasoningProbedAt: new Date().toISOString(),
+              probedModel: activeProvider.model
+            })
           : p;
       });
       storage.saveSettings(Object.assign({}, settings, { providers: updatedProviders }));
 
+      const toolLabel = probe.supportsTools
+        ? "✓ Connected · ✓ Supports tools"
+        : "✓ Connected · ⚠ No tool support — compatibility mode";
+      const reasoningLabel = reasoning.isReasoningModel ? " · Reasoning model" : "";
+
       res.json({
         message: chatMessage || "[No assistant message returned by provider]",
         raw: result.raw ? "[raw response captured]" : null,
         capability: {
           supportsTools: probe.supportsTools,
-          label: probe.supportsTools
-            ? "✓ Connected · ✓ Supports tools"
-            : "✓ Connected · ⚠ No tool support — compatibility mode"
+          isReasoningModel: reasoning.isReasoningModel,
+          probedModel: activeProvider.model,
+          label: toolLabel + reasoningLabel
         }
       });
     } catch (err) {
@@ -964,6 +986,58 @@ module.exports = function flowPilotRuntime(RED) {
     }
   });
 
+  // ---- Probe: silent capability re-check after model change -----------
+  // Called by the frontend when it detects that the active provider's model
+  // changed since the last full pre-flight — stale supportsTools silently
+  // misroutes chat (agent-loop vs streaming/non-streaming). Runs probeTools
+  // + a minimal chat for reasoning detection, saves all results including
+  // probedModel, and returns { supportsTools, isReasoningModel, probedModel }.
+
+  RED.httpAdmin.post("/flowpilot/probe", RED.auth.needsPermission("settings.write"), async function (req, res) {
+    try {
+      const settings = storage.getSettings();
+      const activeProvider = storage.getActiveProvider(settings);
+
+      const probe = await provider.probeTools(activeProvider);
+      const chatResult = await provider.chat(activeProvider, [
+        { role: "system", content: "You are a helpful assistant." },
+        { role: "user", content: "Say hello." }
+      ]);
+      const reasoning = provider.detectReasoning(chatResult.raw);
+
+      const updatedProviders = (settings.providers || []).map(function (p) {
+        return p.id === activeProvider.id
+          ? Object.assign({}, p, {
+              supportsTools: probe.supportsTools,
+              toolsProbedAt: new Date().toISOString(),
+              isReasoningModel: reasoning.isReasoningModel,
+              reasoningProbedAt: new Date().toISOString(),
+              probedModel: activeProvider.model
+            })
+          : p;
+      });
+      storage.saveSettings(Object.assign({}, settings, { providers: updatedProviders }));
+
+      storage.appendAudit({
+        action: "auto_probe",
+        providerName: activeProvider.providerName,
+        baseUrl: activeProvider.baseUrl,
+        model: activeProvider.model,
+        supportsTools: probe.supportsTools,
+        isReasoningModel: reasoning.isReasoningModel
+      });
+
+      res.json({
+        supportsTools: probe.supportsTools,
+        isReasoningModel: reasoning.isReasoningModel,
+        probedModel: activeProvider.model
+      });
+    } catch (err) {
+      storage.appendAudit({ action: "auto_probe_error", error: err.message });
+      res.status(500).json({ error: err.message });
+    }
+  });
+
   // ---- Generate: produce an importable flow fragment --------------------
   // Uses the generation system prompt and expects the model to return a single
   // JSON object { explanation, flow }. This first cut does NOT validate node

package/lib/core/apply-review.js

@@ -863,17 +863,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,12 +886,13 @@
                 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 $applyBtn = $("<button>")
                 .addClass("red-ui-button red-ui-button-primary")
@@ -916,6 +911,7 @@
                     }
                     if (hasMutations && applyCallback) { applyCallback(nodeDiffs, removeNodes, null, idMap); }
                     if (hasNewGroups) { applyGroupChanges(newGroups, idMap); }
+                    if (_modRecord) { _modRecord.state = "applied"; }
                     $applyBtn.text("Done ✓");
                 });
             $actions.append($applyBtn);
@@ -1567,18 +1563,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,12 +1644,21 @@
         } else if (!nodes.length) {
             $("<div>").addClass("fp-warning").text("No nodes were generated — nothing to add.").appendTo($actions);
         } else {
+            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);
             var $addBtn = $("<button>")
                 .addClass("red-ui-button red-ui-button-primary")
                 .attr("type", "button")
                 .text("Add to workspace")
                 .on("click", function () {
                     $addBtn.prop("disabled", true).text("Click the canvas to place…");
+                    if (_genRecord) { _genRecord.state = "applied"; }
                     importGeneratedFlow(nodes, onImported);
                 });
             $actions.append($addBtn);
@@ -1675,3 +1672,255 @@
         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 $applyBtn = $("<button>").addClass("red-ui-button red-ui-button-primary")
+                .attr("type", "button").text(btnLabel)
+                .on("click", function () {
+                    $applyBtn.prop("disabled", true).text("Applying…");
+                    var idMap = {};
+                    if (hasNewNodes) { 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"; }
+                    $applyBtn.text("Done ✓");
+                });
+            $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"); }
+            if (hintParts.length) {
+                $("<span>").addClass("fp-review-hint")
+                    .text("Review above — " + hintParts.join(", ") + ". Ctrl+Z to undo.")
+                    .appendTo($actions);
+            }
+        }
+
+        $box.append($msg);
+        scrollMessagesToBottom();
+    }
+
+    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);
+        }
+    }
+