feat(compare): add copy share link action

Author: georgidhristov

DebugProbe.AspNetCore/Assets/css/debugprobe.css

@@ -369,7 +369,13 @@ h4 {
     margin-top: 0;
 }
 
-.compare-open-tab {
+.compare-header-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.compare-icon-action {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -384,17 +390,17 @@ h4 {
     cursor: pointer;
 }
 
-.compare-open-tab:hover {
+.compare-icon-action:hover {
     background: #f9fafb;
     border-color: #d1d5db;
     color: #111827;
 }
 
-.compare-open-tab[hidden] {
+.compare-icon-action[hidden] {
     display: none;
 }
 
-.compare-open-tab svg {
+.compare-icon-action svg {
     width: 15px;
     height: 15px;
     stroke: currentColor;

DebugProbe.AspNetCore/Assets/html/details.html

@@ -106,19 +106,33 @@
                     <span class="trace-dot" aria-hidden="true"></span>
                     <span class="trace-label">Compare Trace</span>
                 </div>
-                <button id="openCompareTab"
-                        class="compare-open-tab"
-                        type="button"
-                        title="Open in new tab"
-                        aria-label="Open in new tab"
-                        onclick="openCompareInNewTab()"
-                        hidden>
-                    <svg viewBox="0 0 24 24" aria-hidden="true">
-                        <path d="M14 3h7v7"></path>
-                        <path d="M10 14 21 3"></path>
-                        <path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"></path>
-                    </svg>
-                </button>
+                <div class="compare-header-actions">
+                    <button id="copyCompareLink"
+                            class="compare-icon-action"
+                            type="button"
+                            title="Copy share link"
+                            aria-label="Copy share link"
+                            onclick="copyCompareShareLink()"
+                            hidden>
+                        <svg viewBox="0 0 24 24" aria-hidden="true">
+                            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+                            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+                        </svg>
+                    </button>
+                    <button id="openCompareTab"
+                            class="compare-icon-action"
+                            type="button"
+                            title="Open in new tab"
+                            aria-label="Open in new tab"
+                            onclick="openCompareInNewTab()"
+                            hidden>
+                        <svg viewBox="0 0 24 24" aria-hidden="true">
+                            <path d="M14 3h7v7"></path>
+                            <path d="M10 14 21 3"></path>
+                            <path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"></path>
+                        </svg>
+                    </button>
+                </div>
             </div>
 
             <div class="compare-controls">

DebugProbe.AspNetCore/Assets/js/debugprobe-compare-renderer.js

@@ -10,7 +10,7 @@ window.runCompare = async function () {
     }
 
     setCompareResult('<div class="compare-message">Comparing...</div>');
-    setOpenCompareButtonVisible(false);
+    setCompareActionsVisible(false);
 
     try {
         const res = await fetch(`/debug/compare/${id}?baseUrl=${encodeURIComponent(base)}&remoteTraceId=${encodeURIComponent(remoteId)}`);
@@ -22,24 +22,50 @@ window.runCompare = async function () {
         }
 
         setCompareResult(renderCompare(await res.json()));
-        setOpenCompareButtonVisible(true);
+        setCompareActionsVisible(true);
     } catch (error) {
         setCompareResult(`<div class="compare-message compare-message-error">${escapeHtml(error.message || 'Compare failed')}</div>`);
     }
 };
 
 window.openCompareInNewTab = function () {
+    const url = getCompareShareUrl();
+
+    if (url) {
+        window.open(url, '_blank', 'noopener');
+    }
+};
+
+window.copyCompareShareLink = async function () {
+    const url = getCompareShareUrl();
+    const button = document.getElementById('copyCompareLink');
+
+    if (!url || !button) {
+        return;
+    }
+
+    await navigator.clipboard.writeText(url);
+
+    button.title = 'Copied!';
+    button.setAttribute('aria-label', 'Copied!');
+
+    window.setTimeout(() => {
+        button.title = 'Copy share link';
+        button.setAttribute('aria-label', 'Copy share link');
+    }, 1800);
+};
+
+function getCompareShareUrl() {
     const localTraceId = getLocalTraceId();
     const base = document.getElementById('baseUrl').value.trim();
     const traceId = document.getElementById('compareId').value.trim();
 
     if (!base || !traceId) {
-        return;
+        return '';
     }
 
-    const url = `/compare?baseUrl=${encodeURIComponent(base)}&traceId=${encodeURIComponent(traceId)}&localTraceId=${encodeURIComponent(localTraceId)}`;
-    window.open(url, '_blank', 'noopener');
-};
+    return `${window.location.origin}/compare?baseUrl=${encodeURIComponent(base)}&traceId=${encodeURIComponent(traceId)}&localTraceId=${encodeURIComponent(localTraceId)}`;
+}
 
 document.addEventListener('DOMContentLoaded', () => {
     const baseInput = document.getElementById('baseUrl');
@@ -71,10 +97,18 @@ function getLocalTraceId() {
     return input?.value || window.location.pathname.split('/').pop();
 }
 
-function setOpenCompareButtonVisible(visible) {
-    const button = document.getElementById('openCompareTab');
-    if (button) {
-        button.hidden = !visible;
+function setCompareActionsVisible(visible) {
+    ['copyCompareLink', 'openCompareTab'].forEach(id => {
+        const button = document.getElementById(id);
+        if (button) {
+            button.hidden = !visible;
+        }
+    });
+
+    const copyButton = document.getElementById('copyCompareLink');
+    if (copyButton) {
+        copyButton.title = 'Copy share link';
+        copyButton.setAttribute('aria-label', 'Copy share link');
     }
 }