From 36e713147a862f56c3e5e2ec69b54665f1367290 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell@unturf.com>
Date: Sun, 30 Nov 2025 14:47:17 -0500
Subject: [PATCH] Fix DOM insertion error in auto-exec results container

- Correctly insert results container after button container
- Use buttonContainer.parentNode.insertBefore() instead of preElement
- Add proper styling when creating results container
- Fixes 'Child to insert before is not a child of this node' error
---
 templates/chat.html | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/templates/chat.html b/templates/chat.html
index cd3f387..3005767 100644
--- a/templates/chat.html
+++ b/templates/chat.html
@@ -955,11 +955,25 @@ socket.on("chat_message", (data) => {
                         console.log(`Auto-executing fixed code (attempt ${autoExecData.attempt}/3)...`);
 
                         // Find or create results container and set attempt count
-                        let resultsContainer = preElement.querySelector('.code-execution-results');
-                        if (!resultsContainer) {
+                        // Results container goes after the button container (which is after the <pre>)
+                        let resultsContainer = buttonContainer?.nextSibling;
+                        if (!resultsContainer || !resultsContainer.classList.contains('code-execution-results')) {
                             resultsContainer = document.createElement('div');
                             resultsContainer.classList.add('code-execution-results');
-                            preElement.insertBefore(resultsContainer, preElement.nextSibling);
+                            resultsContainer.style.marginTop = '10px';
+                            resultsContainer.style.padding = '10px';
+                            resultsContainer.style.backgroundColor = 'var(--bg-code)';
+                            resultsContainer.style.borderRadius = '5px';
+                            resultsContainer.style.fontFamily = 'monospace';
+                            resultsContainer.style.fontSize = '14px';
+                            resultsContainer.style.whiteSpace = 'pre-wrap';
+                            resultsContainer.style.wordWrap = 'break-word';
+                            // Insert after button container
+                            if (buttonContainer && buttonContainer.nextSibling) {
+                                buttonContainer.parentNode.insertBefore(resultsContainer, buttonContainer.nextSibling);
+                            } else if (buttonContainer) {
+                                buttonContainer.parentNode.appendChild(resultsContainer);
+                            }
                         }
                         resultsContainer.dataset.fixAttempts = autoExecData.attempt.toString();