@sailfish-ai/recorder 1.7.12 → 1.7.14

package/dist/modal.js

@@ -0,0 +1,629 @@
+import { createTriageFromRecorder } from "./graphql";
+let modalEl = null;
+let currentState = { mode: "lookback", description: "" };
+let recordingStartTime = null;
+let recordingEndTime = null;
+let timerInterval = null;
+let isRecording = false;
+let resolveSessionId = null;
+let apiKey = null;
+let backendApi = null;
+function isTypingInInput() {
+    const el = document.activeElement;
+    return (el instanceof HTMLInputElement ||
+        el instanceof HTMLTextAreaElement ||
+        (el instanceof HTMLElement && el.isContentEditable));
+}
+export function setupIssueReporting(options) {
+    apiKey = options.apiKey;
+    backendApi = options.backendApi;
+    resolveSessionId = options.getSessionId;
+    // Attach keyboard shortcuts
+    window.addEventListener("keydown", (e) => {
+        const typingInInput = isTypingInInput();
+        const key = e.key.toLowerCase();
+        const isCmdOrCtrl = e.metaKey || e.ctrlKey;
+        // Shortcuts for modal open
+        if (!typingInInput && options.enableShortcuts && !isCmdOrCtrl) {
+            if (key === "o") {
+                e.preventDefault();
+                injectModalHTML("lookback");
+                return;
+            }
+            if (key === "c") {
+                e.preventDefault();
+                injectModalHTML("startnow");
+                return;
+            }
+        }
+        // Inside modal actions
+        const modalOpen = !!document.getElementById("sf-report-issue-modal");
+        if (!modalOpen && !isRecording)
+            return;
+        // Cmd/Ctrl + Enter → submit
+        if (isCmdOrCtrl && key === "enter" && modalOpen) {
+            const submitBtn = document.getElementById("sf-issue-submit-btn");
+            if (submitBtn && !submitBtn.disabled) {
+                e.preventDefault();
+                submitBtn.click();
+            }
+        }
+        // Cmd/Ctrl + Esc → stop recording
+        if (isCmdOrCtrl && key === "escape" && isRecording) {
+            e.preventDefault();
+            stopRecording();
+        }
+        // "r" to start recording (only in capture-new mode)
+        if (!typingInInput &&
+            !isCmdOrCtrl &&
+            key === "r" &&
+            modalOpen &&
+            currentState.mode === "startnow") {
+            const recordIcon = document.getElementById("sf-record-icon");
+            if (recordIcon) {
+                e.preventDefault();
+                recordIcon.click();
+            }
+        }
+    });
+}
+function getSessionIdSafely() {
+    if (!resolveSessionId) {
+        throw new Error("getSessionId not defined");
+    }
+    return resolveSessionId();
+}
+export function openReportIssueModal() {
+    if (isRecording) {
+        stopRecording();
+        return;
+    }
+    injectModalHTML();
+    if (modalEl)
+        document.body.appendChild(modalEl);
+}
+function closeModal() {
+    if (modalEl?.parentNode) {
+        modalEl.parentNode.removeChild(modalEl);
+    }
+    modalEl = null;
+    if (!isRecording) {
+        currentState = { mode: "lookback", description: "" };
+        recordingStartTime = null;
+        recordingEndTime = null;
+    }
+    if (timerInterval)
+        clearInterval(timerInterval);
+}
+function injectModalHTML(initialMode = "lookback") {
+    if (modalEl) {
+        modalEl.remove();
+        modalEl = null;
+    }
+    modalEl = document.createElement("div");
+    modalEl.id = "sf-report-issue-modal";
+    const isStartNow = initialMode === "startnow";
+    modalEl.innerHTML = `
+    <div style="position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:9998;"></div>
+    <div style="position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
+      background:#fff; padding:24px; border-radius:12px;
+      width:424px; max-width:90%; z-index:9999;
+      box-shadow:0 4px 20px rgba(0,0,0,0.15); font-family:sans-serif;">
+
+      <button id="sf-modal-close-btn"
+        style="position:absolute; top:24px; right:24px;">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M18 6L6 18" stroke="#71717A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M6 6L18 18" stroke="#71717A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+
+      <h2 style="font-size:18px; font-weight:600; margin-bottom:16px;">Report Issue</h2>
+
+      <div id="sf-issue-tabs" style="display:flex; gap:4px; margin-bottom:16px; background:#f1f5f9; padding:6px; border-radius:6px; width: fit-content;">
+        <button id="sf-tab-lookback" data-mode="lookback" class="issue-tab ${!isStartNow ? "active" : ""}"
+          style="padding:6px 12px; border:none; background:${!isStartNow ? "white" : "transparent"}; color: ${!isStartNow ? "#0F172A" : "#64748B"}; border-radius:4px; font-size:14px; cursor:pointer; font-weight:500; height:32px;">
+          Already occurred <span style="color:#94a3b8;">[o]</span>
+        </button>
+        <button id="sf-tab-startnow" data-mode="startnow" class="issue-tab ${isStartNow ? "active" : ""}"
+          style="padding:6px 12px; border:none; background:${isStartNow ? "white" : "transparent"}; color: ${isStartNow ? "#0F172A" : "#64748B"}; border-radius:4px; font-size:14px; cursor:pointer; font-weight:500; height:32px;">
+          Capture new <span style="color:#94a3b8;">[c]</span>
+        </button>
+      </div>
+
+      <div id="sf-issue-mode-info" style="display:flex; align-items:flex-start; gap:8px; margin-bottom:24px;">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-top:4px;">
+          <g clip-path="url(#clip0_2477_11797)">
+            <path d="M6.99935 12.8333C10.221 12.8333 12.8327 10.2216 12.8327 6.99996C12.8327 3.7783 10.221 1.16663 6.99935 1.16663C3.77769 1.16663 1.16602 3.7783 1.16602 6.99996C1.16602 10.2216 3.77769 12.8333 6.99935 12.8333Z" stroke="#A1A1AA" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M7 9.33333V7" stroke="#A1A1AA" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M7 4.66663H7.00583" stroke="#A1A1AA" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+          </g>
+          <defs>
+            <clipPath id="clip0_2477_11797">
+            <rect width="14" height="14" fill="white"/>
+            </clipPath>
+          </defs>
+        </svg>
+        <div style="font-size:14px;">
+          ${isStartNow
+        ? "I want to reproduce the issue right now."
+        : "Something already happened. Capture the past few minutes."}
+        </div>
+      </div>
+
+      <label for="sf-issue-description" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+        What happened? (optional)
+      </label>
+      <textarea id="sf-issue-description" placeholder="Add description here"
+        style="width:100%; height:80px; padding:8px 12px; font-size:14px;
+               border:1px solid #cbd5e1; border-radius:6px; margin-bottom:20px;
+               resize:none; outline:none;"></textarea>
+
+      <div id="sf-lookback-timestamp-container" style="display: ${isStartNow ? "none" : "block"};">
+        <label for="sf-lookback-time-input" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+          Time stamp
+        </label>
+
+        <div id="sf-lookback-time-input" style="display:flex; align-items:center; gap:6px; padding:8px 12px;
+          border:1px solid #cbd5e1; border-radius:6px; width:fit-content; font-size:14px; color:#0f172a; cursor:pointer;">
+          <span id="sf-lookback-time-display">00:00</span>
+          <svg width="16" height="16" fill="none" stroke="#0f172a" stroke-width="1.5" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2" />
+            <circle cx="12" cy="12" r="9" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </div>
+
+        <div id="sf-lookback-dropdown" style="display:none; position:absolute; background:white; border:1px solid #e5e7eb;
+          border-radius:6px; padding:12px; margin-top:4px; box-shadow:0 4px 12px rgba(0,0,0,0.1); z-index:10000;">
+          <div style="display:flex; gap:12px;">
+            <div>
+              <label style="font-size:12px; color:#64748b;">Minutes</label>
+              <select id="sf-lookback-minutes" style="margin-top:4px; padding:6px; border:1px solid #cbd5e1; border-radius:4px;">
+                ${Array.from({ length: 60 }, (_, i) => `<option value="${i}">${i
+        .toString()
+        .padStart(2, "0")}</option>`).join("")}
+              </select>
+            </div>
+            <div>
+              <label style="font-size:12px; color:#64748b;">Seconds</label>
+              <select id="sf-lookback-seconds" style="margin-top:4px; padding:6px; border:1px solid #cbd5e1; border-radius:4px;">
+                ${Array.from({ length: 60 }, (_, i) => `<option value="${i}">${i
+        .toString()
+        .padStart(2, "0")}</option>`).join("")}
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div style="font-size:12px; color:#a1a1aa; margin-top:4px;">Enter time stamp here. Max 1 hour.</div>
+      </div>
+
+      <div id="sf-start-recording" style="display: ${isStartNow ? "block" : "none"};">
+        <label for="sf-inline-record-chip" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+          Start recording <span style="color:#94a3b8;">[r]</span>
+        </label>
+
+        <div id="sf-inline-record-chip" style="display:flex; margin-top:8px; align-items:center; gap:8px;">
+          <div id="sf-record-icon" style="padding: 8px; border-radius: 6px; border: 1px solid #9dd3ef;  cursor: pointer;">
+            <div style="width: 14px; height: 14px; background: #fc5555; border-radius: 50%; border: 1px solid #991b1b;"></div>
+          </div>
+          <div>
+            <div id="sf-inline-record-timer" style="font-family: monospace; font-weight: 500; color: #d4d4d8;">00:00</div>
+            <div style="font-size: 12px; color: #a1a1aa; margin-top: 2px;">Max time stamp 1 hour.</div>
+          </div>
+        </div>
+      </div>
+
+      <div style="display:flex; justify-content:flex-end; margin-top:16px;">
+        <button id="sf-issue-submit-btn"
+          style="background: #295DBF; color:white; border:none; padding:8px 16px;
+          border-radius:6px; font-size:14px; line-height: 24px; font-weight:500; cursor:not-allowed; opacity:0.4;"
+          disabled>
+          Create Triage <span style="color: #E2E8F0; margin-left:6px; font-size:10px; line-height: 20px;">[cmd+enter]</span>
+        </button>
+      </div>
+    </div>
+  `;
+    currentState.mode = initialMode;
+    document.body.appendChild(modalEl);
+    bindListeners();
+}
+function setActiveTab(mode) {
+    const tabLookback = modalEl?.querySelector("#sf-tab-lookback");
+    const tabStartnow = modalEl?.querySelector("#sf-tab-startnow");
+    if (mode === "lookback") {
+        tabLookback.style.background = "white";
+        tabLookback.style.color = "#0F172A";
+        tabStartnow.style.background = "transparent";
+        tabStartnow.style.color = "#64748B";
+    }
+    else {
+        tabStartnow.style.background = "white";
+        tabStartnow.style.color = "#0F172A";
+        tabLookback.style.background = "transparent";
+        tabLookback.style.color = "#64748B";
+    }
+}
+function updateModeSpecificUI(mode) {
+    const infoText = document.getElementById("sf-issue-mode-info");
+    const infoMessage = infoText?.querySelector("div");
+    const submitBtn = document.getElementById("sf-issue-submit-btn");
+    const timerText = document.getElementById("sf-inline-record-timer");
+    const timestampContainer = document.getElementById("sf-lookback-timestamp-container");
+    const startRecording = document.getElementById("sf-start-recording");
+    if (!infoText || !infoMessage || !submitBtn)
+        return;
+    if (mode === "startnow") {
+        if (startRecording)
+            startRecording.style.display = "block";
+        if (timestampContainer)
+            timestampContainer.style.display = "none";
+        infoMessage.textContent = "I want to reproduce the issue right now.";
+        // Disable submit if recording not done yet
+        const canSubmit = recordingStartTime !== null && recordingEndTime !== null;
+        submitBtn.disabled = !canSubmit;
+        submitBtn.style.opacity = canSubmit ? "1" : "0.4";
+        submitBtn.style.cursor = canSubmit ? "pointer" : "not-allowed";
+        // Show current timer value if available
+        if (recordingStartTime && recordingEndTime && timerText) {
+            const duration = Math.floor((recordingEndTime - recordingStartTime) / 1000);
+            const mins = String(Math.floor(duration / 60)).padStart(2, "0");
+            const secs = String(duration % 60).padStart(2, "0");
+            timerText.textContent = `${mins}:${secs}`;
+            timerText.style.color = "#171717";
+        }
+        else if (timerText) {
+            timerText.textContent = "00:00";
+            timerText.style.color = "#d4d4d8";
+        }
+    }
+    else if (mode === "lookback") {
+        if (startRecording)
+            startRecording.style.display = "none";
+        if (timestampContainer)
+            timestampContainer.style.display = "block";
+        infoMessage.textContent =
+            "Something already happened. Capture the past few minutes.";
+        // Enable submit only if a valid timestamp is selected
+        const mins = Number(document.getElementById("sf-lookback-minutes")
+            ?.value || "0");
+        const secs = Number(document.getElementById("sf-lookback-seconds")
+            ?.value || "0");
+        const canSubmit = mins > 0 || secs > 0;
+        submitBtn.disabled = !canSubmit;
+        submitBtn.style.opacity = canSubmit ? "1" : "0.4";
+        submitBtn.style.cursor = canSubmit ? "pointer" : "not-allowed";
+    }
+}
+function bindListeners() {
+    const timeInput = document.getElementById("sf-lookback-time-input");
+    const dropdown = document.getElementById("sf-lookback-dropdown");
+    const display = document.getElementById("sf-lookback-time-display");
+    const closeBtn = document.getElementById("sf-modal-close-btn");
+    const recordIcon = document.getElementById("sf-record-icon");
+    if (closeBtn) {
+        closeBtn.onclick = () => {
+            closeModal();
+        };
+    }
+    if (recordIcon) {
+        recordIcon.onclick = () => {
+            const descInput = document.getElementById("sf-issue-description");
+            currentState.description = descInput?.value ?? "";
+            startCountdownThenRecord();
+        };
+    }
+    timeInput?.addEventListener("click", () => {
+        if (!dropdown)
+            return;
+        if (dropdown.style.display === "none") {
+            dropdown.style.display = "block";
+        }
+        else {
+            dropdown.style.display = "none";
+        }
+    });
+    window.addEventListener("click", (e) => {
+        if (!dropdown)
+            return;
+        if (!dropdown.contains(e.target) &&
+            !timeInput?.contains(e.target)) {
+            dropdown.style.display = "none";
+        }
+    });
+    const updateTimeDisplay = () => {
+        const mins = Number(document.getElementById("sf-lookback-minutes")
+            ?.value || "0");
+        const secs = Number(document.getElementById("sf-lookback-seconds")
+            ?.value || "0");
+        if (display) {
+            display.textContent = `${mins.toString().padStart(2, "0")}:${secs
+                .toString()
+                .padStart(2, "0")}`;
+        }
+        updateModeSpecificUI("lookback"); // re-check submit button status
+    };
+    // Handle dropdown value changes
+    document
+        .getElementById("sf-lookback-minutes")
+        ?.addEventListener("change", updateTimeDisplay);
+    document
+        .getElementById("sf-lookback-seconds")
+        ?.addEventListener("change", updateTimeDisplay);
+    modalEl?.querySelectorAll(".issue-tab").forEach((tabBtn) => {
+        tabBtn.addEventListener("click", (e) => {
+            const mode = e.currentTarget.dataset
+                .mode;
+            currentState.mode = mode;
+            setActiveTab(mode);
+            // Optionally toggle relevant UI
+            updateModeSpecificUI(mode);
+        });
+    });
+    modalEl?.addEventListener("click", (e) => {
+        const target = e.target;
+        if (target.closest("#sf-issue-submit-btn")) {
+            const desc = document.getElementById("sf-issue-description")
+                ?.value || "";
+            const mode = currentState.mode;
+            currentState.description = desc;
+            let startTimestamp;
+            let endTimestamp;
+            if (mode === "startnow") {
+                startTimestamp = recordingStartTime ?? Date.now() - 5 * 60 * 1000;
+                endTimestamp = recordingEndTime ?? Date.now();
+            }
+            else {
+                // Parse time from time selector
+                const minutes = Number(document.getElementById("sf-lookback-minutes")
+                    ?.value || "0");
+                const seconds = Number(document.getElementById("sf-lookback-seconds")
+                    ?.value || "0");
+                const delta = (minutes * 60 + seconds) * 1000;
+                endTimestamp = Date.now();
+                startTimestamp = endTimestamp - delta;
+            }
+            closeModal();
+            createTriage(`${startTimestamp}`, `${endTimestamp}`, desc);
+        }
+    });
+}
+function startCountdownThenRecord() {
+    // Prevent duplicates
+    if (document.getElementById("sf-countdown-overlay"))
+        return;
+    const overlay = document.createElement("div");
+    overlay.id = "sf-countdown-overlay";
+    overlay.style.cssText = `
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.6);
+    z-index: 10001;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 80px;
+    font-weight: bold;
+    color: white;
+    font-family: sans-serif;
+  `;
+    let count = 3;
+    overlay.textContent = count.toString();
+    document.body.appendChild(overlay);
+    const interval = setInterval(() => {
+        count--;
+        if (count > 0) {
+            overlay.textContent = count.toString();
+        }
+        else {
+            clearInterval(interval);
+            document.body.removeChild(overlay);
+            // Begin recording
+            recordingStartTime = Date.now();
+            isRecording = true;
+            closeModal();
+            showFloatingTimer();
+        }
+    }, 1000);
+}
+function showFloatingTimer() {
+    const timer = document.createElement("div");
+    timer.id = "sf-recording-indicator";
+    timer.style.cssText = `
+    position: fixed;
+    bottom: 16px;
+    right: 16px;
+    background: white;
+    border: 1px solid #cbd5e1;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
+    padding: 8px 16px;
+    font-family: sans-serif;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    z-index: 10000;
+    width: 168px;
+  `;
+    timer.innerHTML = `
+    <div id="sf-stop-icon" style="width: 24px; height: 24px; background: #fc5555; border-radius: 6px; border: 1px solid #991b1b; display: flex; align-items: center; justify-content: center; cursor: pointer;">
+      <div style="width: 8px; height: 8px; background: white; border-radius: 2px;"></div>
+    </div>
+    <span id="sf-recording-timer">00:00</span>
+    <div style="font-size:10px; color:#94a3b8;">[cmd] + [esc]</div>
+  `;
+    document.body.appendChild(timer);
+    const timerEl = timer.querySelector("#sf-recording-timer");
+    if (!timerEl)
+        return;
+    timerInterval = setInterval(() => {
+        const delta = Date.now() - (recordingStartTime ?? Date.now());
+        const mins = Math.floor(delta / 60000)
+            .toString()
+            .padStart(2, "0");
+        const secs = Math.floor((delta % 60000) / 1000)
+            .toString()
+            .padStart(2, "0");
+        timerEl.textContent = `${mins}:${secs}`;
+    }, 1000);
+    const stopBtn = timer.querySelector("#sf-stop-icon");
+    stopBtn?.addEventListener("click", () => stopRecording());
+}
+function stopRecording() {
+    recordingEndTime = Date.now();
+    isRecording = false;
+    if (timerInterval)
+        clearInterval(timerInterval);
+    document.getElementById("sf-recording-indicator")?.remove();
+    reopenModalAfterStop();
+}
+function reopenModalAfterStop() {
+    injectModalHTML("startnow");
+    const descBox = document.getElementById("sf-issue-description");
+    if (descBox)
+        descBox.value = currentState.description;
+    const startNowRadio = document.querySelector('input[value="startnow"]');
+    if (startNowRadio)
+        startNowRadio.checked = true;
+    const chip = document.getElementById("sf-inline-record-chip");
+    const timerText = document.getElementById("sf-inline-record-timer");
+    if (chip && timerText) {
+        const durationSec = Math.floor(((recordingEndTime ?? 0) - (recordingStartTime ?? 0)) / 1000);
+        const mins = Math.floor(durationSec / 60)
+            .toString()
+            .padStart(2, "0");
+        const secs = Math.floor(durationSec % 60)
+            .toString()
+            .padStart(2, "0");
+        timerText.textContent = `${mins}:${secs}`;
+        timerText.style.color = "black";
+        chip.style.display = "flex";
+    }
+    const submitBtn = document.getElementById("sf-issue-submit-btn");
+    submitBtn.disabled = false;
+    submitBtn.style.opacity = "1";
+    submitBtn.style.cursor = "pointer";
+}
+async function createTriage(startTimestamp, endTimestamp, description) {
+    try {
+        showTriageStatusModal(true);
+        const response = await createTriageFromRecorder(apiKey, backendApi, getSessionIdSafely(), startTimestamp, endTimestamp, description);
+        const triageId = response?.data?.createTriageFromRecorder?.id;
+        if (triageId) {
+            showTriageStatusModal(false, triageId);
+        }
+        else {
+            console.error("No Triage ID returned from backend.");
+            showTriageStatusModal(false, null); // fallback behavior
+        }
+    }
+    catch (error) {
+        console.error("Error creating triage:", error);
+        showTriageStatusModal(false, null);
+    }
+}
+function showTriageStatusModal(isLoading, triageId) {
+    removeExistingModals();
+    const triageUrl = triageId
+        ? `https://app.sailfishqa.com/triage/${triageId}`
+        : "";
+    const container = document.createElement("div");
+    container.id = "sf-triage-status-modal";
+    const statusTitle = isLoading ? "Creating Triage..." : "Triage created!";
+    const statusSubtitle = isLoading
+        ? `<p style="font-size:14px; color:#64748b; line-height:20px;">This may take ~10 seconds</p>`
+        : "";
+    const spinner = isLoading
+        ? `<div style="display:flex; justify-content:center; align-items:center; padding: 40px 0;">
+        <div class="spinner" style="width:24px; height:24px; border:2px solid #295dbf; border-top:2px solid white; border-radius:50%; animation:spin 1s linear infinite;"></div>
+      </div>`
+        : "";
+    const copiedStatus = !isLoading
+        ? `<div id="sf-copied-status" style="display:none; font-size:12px; font-weight:500; color:white;
+         background-color:#22c55e; padding:4px 8px; border-radius:6px; white-space:nowrap; align-items:center; gap:6px;">
+         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+           <path fill-rule="evenodd" clip-rule="evenodd" d="M21 7.5L9 19.5L3 13.5L5.25 11.25L9 15L18.75 5.25L21 7.5Z" fill="white"/>
+         </svg>
+         Copied
+       </div>`
+        : "";
+    container.innerHTML = `
+    <div style="position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:9998;"></div>
+    <div style="position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
+        background:#fff; padding:24px; border-radius:12px; width:300px; max-width:90%;
+        z-index:9999; font-family:sans-serif; box-shadow:0 4px 20px rgba(0,0,0,0.15);">
+
+      <div style="position:absolute; top:24px; right:48px;">${copiedStatus}</div>
+
+      <button id="sf-triage-modal-close"
+        style="position:absolute; top:24px; right:16px; background:none; border:none; cursor:pointer;">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M18 6L6 18" stroke="#71717A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M6 6L18 18" stroke="#71717A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+
+      <h2 style="font-size:18px; font-weight:600; margin-bottom:${isLoading ? 8 : 40}px; line-height: 28px;">${statusTitle}</h2>
+      ${statusSubtitle}
+      ${spinner}
+
+      <div style="display:flex; justify-content:flex-end; align-items:center; gap:8px;">
+        <button id="sf-copy-triage-link"
+          style="background:white; border:1px solid #e2e8f0; padding:8px 16px; border-radius:6px;
+          font-size:14px; color: #0f172a; cursor:pointer;">
+          Share
+        </button>
+        <button id="sf-view-triage-btn"
+          style="display:flex; align-items:center; gap:8px; background:#295dbf; border:none;
+          padding:8px 16px; border-radius:6px; font-size:14px; color:white; cursor:pointer;">
+          View Triage
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M10 2H14V6" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M6.66602 9.33333L13.9993 2" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+    <style>
+      @keyframes spin { to { transform: rotate(360deg); } }
+    </style>
+  `;
+    document.body.appendChild(container);
+    document
+        .getElementById("sf-triage-modal-close")
+        ?.addEventListener("click", () => {
+        container.remove();
+    });
+    const copyBtn = document.getElementById("sf-copy-triage-link");
+    const viewBtn = document.getElementById("sf-view-triage-btn");
+    if (isLoading) {
+        copyBtn.disabled = true;
+        copyBtn.style.opacity = "0.4";
+        copyBtn.style.cursor = "not-allowed";
+        viewBtn.disabled = true;
+        viewBtn.style.opacity = "0.4";
+        viewBtn.style.cursor = "not-allowed";
+    }
+    else {
+        copyBtn.disabled = false;
+        copyBtn.addEventListener("click", () => {
+            navigator.clipboard.writeText(triageUrl).then(() => {
+                const copiedStatus = document.getElementById("sf-copied-status");
+                if (copiedStatus)
+                    copiedStatus.style.display = "flex";
+            });
+        });
+        viewBtn.disabled = false;
+        viewBtn.addEventListener("click", () => {
+            if (triageId) {
+                window.open(triageUrl, "_blank");
+            }
+        });
+    }
+}
+function removeExistingModals() {
+    document.getElementById("sf-report-issue-modal")?.remove();
+    document.getElementById("sf-triage-status-modal")?.remove();
+}