Merge pull request steam-bell-92#1727 from nishtha-agarwal-211/fix/console-copy-clear-1715

fix(playground): add clear console and copy output features (steam-bell-92#1715)

Author: steam-bell-92

web-app/css/styles.css

@@ -1716,12 +1716,24 @@ main>.hero-section:has(.hero-code-snippets) {
   align-items: center;
   gap: 8px;
 }
-
-.editor-actions {
+.editor-actions,
+.console-actions {
   display: flex;
   gap: 6px;
 }
 
+.btn-panel-action.copy-success {
+  background: rgba(16, 185, 129, 0.12) !important;
+  border-color: rgba(16, 185, 129, 0.4) !important;
+  color: #10b981 !important;
+}
+
+.btn-panel-action.copy-error {
+  background: rgba(239, 68, 68, 0.12) !important;
+  border-color: rgba(239, 68, 68, 0.4) !important;
+  color: #ef4444 !important;
+}
+
 .draft-selector {
   background: var(--bg-glass);
   border: 1px solid var(--border);

web-app/index.html

@@ -377,9 +377,16 @@ <h2 class="playground-title">🐍 Python Playground</h2>
             <div class="panel-header">
               <span><i aria-hidden="true" class="fas fa-terminal"></i> Output
                 Console</span>
-              <button class="btn-panel-action" id="clearConsole" title="Clear the console" type="button">
-                <i aria-hidden="true" class="fas fa-times-circle"></i> Clear
-              </button>
+              <div class="console-actions">
+                <button class="btn-panel-action" id="copyConsole" title="Copy console output to clipboard" type="button"
+                  aria-label="Copy console output to clipboard">
+                  <i aria-hidden="true" class="fas fa-copy"></i> Copy
+                </button>
+                <button class="btn-panel-action" id="clearConsole" title="Clear the console" type="button"
+                  aria-label="Clear console output">
+                  <i aria-hidden="true" class="fas fa-times-circle"></i> Clear
+                </button>
+              </div>
             </div>
             <pre aria-label="Console output" aria-live="polite" class="console-output" id="consoleOutput"></pre>
           </div>

web-app/js/playground.js

@@ -129,6 +129,7 @@
   var statusDot = $id("statusDot");
   var statusText = $id("statusText");
   var clearConsoleBtn = $id("clearConsole");
+  var copyConsoleBtn = $id("copyConsole");
   var clearEditorBtn = $id("clearEditor");
   var loadExampleBtn = $id("loadExample");
   var draftSelector = $id("draftSelector");
@@ -903,6 +904,106 @@
     });
   }
 
+  /* ──────────────────────────────────────────────────────────────
+     Copy Console Button — Issue #1715
+     Copy console output to clipboard with visual feedback
+     ────────────────────────────────────────────────────────────── */
+  if (copyConsoleBtn) {
+    copyConsoleBtn.addEventListener("click", function (event) {
+      event.preventDefault();
+
+      var hasPlaceholder = consoleEl.querySelector(".pg-placeholder");
+      var textToCopy = "";
+      if (!hasPlaceholder) {
+        textToCopy = consoleEl.innerText || consoleEl.textContent || "";
+      }
+      textToCopy = textToCopy.trim();
+
+      if (!textToCopy) {
+        copyConsoleBtn.textContent = "Nothing to copy";
+        copyConsoleBtn.classList.add("copy-error");
+        copyConsoleBtn.setAttribute("aria-label", "Console is empty, nothing to copy");
+        setTimeout(function () {
+          copyConsoleBtn.innerHTML =
+            '<i aria-hidden="true" class="fas fa-copy"></i> Copy';
+          copyConsoleBtn.classList.remove("copy-error");
+          copyConsoleBtn.setAttribute(
+            "aria-label",
+            "Copy console output to clipboard"
+          );
+        }, 1500);
+        return;
+      }
+
+      function fallbackCopy(text) {
+        return new Promise(function (resolve, reject) {
+          var textarea = document.createElement("textarea");
+          textarea.value = text;
+          textarea.style.position = "fixed";
+          textarea.style.left = "-9999px";
+          textarea.style.opacity = "0";
+          textarea.setAttribute("aria-hidden", "true");
+          textarea.setAttribute("tabindex", "-1");
+
+          document.body.appendChild(textarea);
+
+          try {
+            textarea.select();
+            var success = document.execCommand("copy");
+            if (success) {
+              resolve();
+            } else {
+              reject(new Error("execCommand copy failed"));
+            }
+          } catch (error) {
+            reject(error);
+          } finally {
+            document.body.removeChild(textarea);
+          }
+        });
+      }
+
+      var copyPromise =
+        navigator.clipboard && navigator.clipboard.writeText
+          ? navigator.clipboard.writeText(textToCopy)
+          : fallbackCopy(textToCopy);
+
+      copyPromise
+        .then(function () {
+          copyConsoleBtn.innerHTML =
+            '<i aria-hidden="true" class="fas fa-check"></i> Copied!';
+          copyConsoleBtn.classList.add("copy-success");
+          copyConsoleBtn.setAttribute("aria-label", "Console output copied to clipboard");
+
+          setTimeout(function () {
+            copyConsoleBtn.innerHTML =
+              '<i aria-hidden="true" class="fas fa-copy"></i> Copy';
+            copyConsoleBtn.classList.remove("copy-success");
+            copyConsoleBtn.setAttribute(
+              "aria-label",
+              "Copy console output to clipboard"
+            );
+          }, 2000);
+        })
+        .catch(function (error) {
+          console.error("Copy failed:", error);
+          copyConsoleBtn.textContent = "Copy failed";
+          copyConsoleBtn.classList.add("copy-error");
+          copyConsoleBtn.setAttribute("aria-label", "Copy failed, try again");
+
+          setTimeout(function () {
+            copyConsoleBtn.innerHTML =
+              '<i aria-hidden="true" class="fas fa-copy"></i> Copy';
+            copyConsoleBtn.classList.remove("copy-error");
+            copyConsoleBtn.setAttribute(
+              "aria-label",
+              "Copy console output to clipboard"
+            );
+          }, 2000);
+        });
+    });
+  }
+
   // Keyboard shortcut for copy: Ctrl+Shift+C in editor
   if (cmView) {
     document.addEventListener("keydown", function (event) {