From d28906d74f1385519b2a14be7acc48ab8486cdfd Mon Sep 17 00:00:00 2001
From: Al Azhar <alazhar@indomaret.co.id>
Date: Wed, 29 Apr 2026 11:54:00 +0700
Subject: [PATCH] add copy button

---
 index.html | 45 +++++++++++++++++++++++++++++++++++----------
 1 file changed, 35 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index b61fad8..ee9f32e 100644
--- a/index.html
+++ b/index.html
@@ -942,7 +942,7 @@
             }
 
             if (!isNaN(time)) {
-              
+
               // Collect continuation lines (stack traces etc.)
               let exception = '';
               let j = i + 1;
@@ -1273,17 +1273,28 @@
       expandedRows.add(idx);
       const detailTr = document.createElement('tr');
       detailTr.className = 'row-detail';
+
+      const section = (label, content, color = 'var(--text2)') => `
+    <div class="detail-section">
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
+        <div class="detail-label">${label}</div>
+        <button onclick="copySection(this, ${JSON.stringify(content).replace(/"/g, '&quot;')})"
+          style="padding:2px 8px;border-radius:3px;border:1px solid var(--border2);background:transparent;
+                 color:var(--text3);font-size:10px;font-family:var(--font-mono);cursor:pointer;transition:all .15s"
+          onmouseover="this.style.color='var(--text)';this.style.borderColor='var(--border3)'"
+          onmouseout="this.style.color='var(--text3)';this.style.borderColor='var(--border2)'">
+          copy
+        </button>
+      </div>
+      <div class="detail-val" style="color:${color}">${esc(content)}</div>
+    </div>`;
+
       let sections = '';
-      if (log.fullmessage) {
-        sections += `<div class="detail-section"><div class="detail-label">Full Message</div><div class="detail-val">${esc(log.fullmessage)}</div></div>`;
-      }
-      if (log.exception) {
-        sections += `<div class="detail-section"><div class="detail-label">Exception / Stack Trace</div><div class="detail-val" style="color:var(--error)">${esc(log.exception)}</div></div>`;
-      }
-      if (log.props) {
-        sections += `<div class="detail-section"><div class="detail-label">Properties</div><div class="detail-val">${esc(JSON.stringify(log.props, null, 2))}</div></div>`;
-      }
+      if (log.fullmessage) sections += section('Full Message', log.fullmessage);
+      if (log.exception) sections += section('Exception / Stack Trace', log.exception, 'var(--error)');
+      if (log.props) sections += section('Properties', JSON.stringify(log.props, null, 2));
       if (!sections) return;
+
       detailTr.innerHTML = `<td colspan="3"><div class="detail-inner">${sections}</div></td>`;
       tr.after(detailTr);
     }
@@ -1485,6 +1496,20 @@
       if (file) loadFile(file);
     });
 
+    window.copySection = function (btn, text) {
+        navigator.clipboard.writeText(text).then(() => {
+          const orig = btn.textContent;
+          btn.textContent = 'copied ✓';
+          btn.style.color = 'var(--info)';
+          btn.style.borderColor = 'var(--info)';
+          setTimeout(() => {
+            btn.textContent = orig;
+            btn.style.color = 'var(--text3)';
+            btn.style.borderColor = 'var(--border2)';
+          }, 1500);
+        });
+      };
+
     // Load demo on start
     //loadDemo();
   </script>