@sailfish-ai/recorder 1.7.35 → 1.7.42

package/dist/eventStore.js

@@ -1,42 +1,100 @@
-import { openDB } from 'idb';
-const DB_NAME = 'leapsEventDB';
-const STORE_NAME = 'recordingEvents';
-const dbPromise = openDB(DB_NAME, 1, {
-    upgrade(db) {
-        if (!db.objectStoreNames.contains(STORE_NAME)) {
-            db.createObjectStore(STORE_NAME, { keyPath: 'id', autoIncrement: true });
+// lib/safe-idb.ts
+// SSR/Edge-safe IndexedDB helpers with zero top-level access to `indexedDB`.
+// On the server (or any env without IDB), functions are no-ops / return safe defaults.
+const DB_NAME = "leapsEventDB";
+const STORE_NAME = "recordingEvents";
+const DB_VERSION = 1;
+// Cached open promise; never created on SSR
+let _dbPromise = null;
+// Narrow, safe feature check (no throws in weird runtimes)
+function hasIndexedDB() {
+    return typeof globalThis !== "undefined" && !!globalThis.indexedDB;
+}
+// Open the DB lazily and only on the client.
+function openDb() {
+    if (!hasIndexedDB())
+        return Promise.resolve(null);
+    if (_dbPromise)
+        return _dbPromise;
+    _dbPromise = new Promise((resolve) => {
+        try {
+            const req = globalThis.indexedDB.open(DB_NAME, DB_VERSION);
+            req.onupgradeneeded = () => {
+                const db = req.result;
+                if (!db.objectStoreNames.contains(STORE_NAME)) {
+                    db.createObjectStore(STORE_NAME, {
+                        keyPath: "id",
+                        autoIncrement: true,
+                    });
+                }
+            };
+            req.onsuccess = () => resolve(req.result);
+            req.onerror = () => resolve(null); // fail closed → treat as unavailable
+            req.onblocked = () => {
+                // Best effort: resolve null to avoid hanging builds if something odd blocks upgrades
+                resolve(null);
+            };
+        }
+        catch {
+            // Some exotic environments can still throw on open()
+            resolve(null);
         }
-    },
-});
+    });
+    return _dbPromise;
+}
+function withStore(mode, fn) {
+    return openDb().then((db) => {
+        if (!db)
+            return null;
+        return new Promise((resolve) => {
+            try {
+                const tx = db.transaction(STORE_NAME, mode);
+                const store = tx.objectStore(STORE_NAME);
+                Promise.resolve(fn(store))
+                    .then((result) => {
+                    tx.oncomplete = () => resolve(result);
+                    tx.onerror = () => resolve(null);
+                    // If fn() already did async work, ensure we complete; otherwise completing will call resolve above
+                })
+                    .catch(() => resolve(null));
+            }
+            catch {
+                resolve(null);
+            }
+        });
+    });
+}
+// ── Public API (SSR-safe) ──────────────────────────────────────────────────────
 export async function saveEventToIDB(event) {
-    const db = await dbPromise;
-    const tx = db.transaction(STORE_NAME, 'readwrite');
-    await tx.store.add({ timestamp: Date.now(), data: event });
-    await tx.done;
+    await withStore("readwrite", (store) => {
+        store.add({ timestamp: Date.now(), data: event });
+    });
 }
 export async function saveEventsToIDB(events) {
-    const db = await dbPromise;
-    const tx = db.transaction(STORE_NAME, 'readwrite');
-    for (const event of events) {
-        await tx.store.add({ timestamp: Date.now(), data: event });
-    }
-    await tx.done;
+    await withStore("readwrite", async (store) => {
+        for (const event of events) {
+            store.add({ timestamp: Date.now(), data: event });
+        }
+    });
 }
 export async function getAllIndexedEvents() {
-    const db = await dbPromise;
-    return await db.getAll(STORE_NAME);
+    const result = await withStore("readonly", (store) => {
+        return new Promise((resolve) => {
+            const req = store.getAll();
+            req.onsuccess = () => resolve(req.result);
+            req.onerror = () => resolve([]);
+        });
+    });
+    return result ?? []; // SSR/Edge → []
 }
 export async function deleteEventById(id) {
-    const db = await dbPromise;
-    const tx = db.transaction(STORE_NAME, 'readwrite');
-    await tx.store.delete(id);
-    await tx.done;
+    await withStore("readwrite", (store) => {
+        store.delete(id);
+    });
 }
 export async function deleteEventsByIds(ids) {
-    const db = await dbPromise;
-    const tx = db.transaction(STORE_NAME, 'readwrite');
-    for (const id of ids) {
-        await tx.store.delete(id);
-    }
-    await tx.done;
+    await withStore("readwrite", async (store) => {
+        for (const id of ids)
+            store.delete(id);
+    });
 }

package/dist/inAppReportIssueModal.js

@@ -9,10 +9,12 @@ let recordingStartTime = null;
 let recordingEndTime = null;
 let timerInterval = null;
 let isRecording = false;
-let resolveSessionId = null;
-let apiKey = null;
-let backendApi = null;
-let triageBaseUrl = "https://app.sailfishqa.com";
+export const ReportIssueContext = {
+    resolveSessionId: null,
+    apiKey: null,
+    backendApi: null,
+    triageBaseUrl: "https://app.sailfishqa.com",
+};
 function isMacPlatform() {
     // Newer API (Chrome, Edge, Opera)
     const uaData = navigator.userAgentData;
@@ -32,9 +34,9 @@ function isTypingInInput() {
         (el instanceof HTMLElement && el.isContentEditable));
 }
 export function setupIssueReporting(options) {
-    apiKey = options.apiKey;
-    backendApi = options.backendApi;
-    resolveSessionId = options.getSessionId;
+    ReportIssueContext.apiKey = options.apiKey;
+    ReportIssueContext.backendApi = options.backendApi;
+    ReportIssueContext.resolveSessionId = options.getSessionId;
     // Attach keyboard shortcuts
     window.addEventListener("keydown", (e) => {
         const typingInInput = isTypingInInput();
@@ -91,10 +93,10 @@ export function setupIssueReporting(options) {
     });
 }
 function getSessionIdSafely() {
-    if (!resolveSessionId) {
+    if (!ReportIssueContext.resolveSessionId) {
         throw new Error("getSessionId not defined");
     }
-    return resolveSessionId();
+    return ReportIssueContext.resolveSessionId();
 }
 export function openReportIssueModal(customBaseUrl) {
     if (isRecording) {
@@ -105,7 +107,8 @@ export function openReportIssueModal(customBaseUrl) {
     if (modalEl)
         document.body.appendChild(modalEl);
     // Store custom base URL globally for reuse
-    triageBaseUrl = customBaseUrl ?? "https://app.sailfishqa.com";
+    ReportIssueContext.triageBaseUrl =
+        customBaseUrl ?? "https://app.sailfishqa.com";
 }
 function closeModal() {
     // ✅ Explicitly blur the focused element
@@ -266,7 +269,7 @@ function injectModalHTML(initialMode = "lookback") {
           style="background: #295DBF; color:white; border:none; padding:8px 16px;
           border-radius:6px; font-size:14px; line-height: 24px; font-weight:500;
           cursor:${isStartNow ? "not-allowed" : "pointer"}; opacity:${isStartNow ? "0.4" : "1"}; margin-bottom:1px" ${isStartNow ? "disabled" : ""}>
-          Create Triage <span style="margin-left: 8px; display: inline-flex; align-items: center; gap: 4px; color: #94A3B8; font-size: 12px; line-height:16px;">
+          Report <span style="margin-left: 8px; display: inline-flex; align-items: center; gap: 4px; color: #94A3B8; font-size: 12px; line-height:16px;">
                           <span style="background: #F1F5F9; border-radius: 4px; padding: 0 4px; font-weight: 500;">${getShortcutKeyCmdCtrlLabel()}</span>
                           +
                           <span style="background: #F1F5F9; border-radius: 4px; padding: 0 4px; font-weight: 500;">ENTER</span>
@@ -561,7 +564,7 @@ function reopenModalAfterStop() {
 async function createTriage(startTimestamp, endTimestamp, description) {
     try {
         showTriageStatusModal(true);
-        const response = await createTriageFromRecorder(apiKey, backendApi, getSessionIdSafely(), startTimestamp, endTimestamp, description);
+        const response = await createTriageFromRecorder(ReportIssueContext.apiKey, ReportIssueContext.backendApi, getSessionIdSafely(), startTimestamp, endTimestamp, description);
         const triageId = response?.data?.createTriageFromRecorder?.id;
         if (triageId) {
             showTriageStatusModal(false, triageId);
@@ -578,10 +581,20 @@ async function createTriage(startTimestamp, endTimestamp, description) {
 }
 function showTriageStatusModal(isLoading, triageId) {
     removeExistingModals();
-    const triageUrl = triageId ? `${triageBaseUrl}/triage/${triageId}` : "";
+    const triageUrl = triageId
+        ? `${ReportIssueContext.triageBaseUrl}/triage/${triageId}?from=inAppReportIssue`
+        : "";
     const container = document.createElement("div");
     container.id = "sf-triage-status-modal";
-    const statusTitle = isLoading ? "Creating Triage..." : "Triage created!";
+    Object.assign(container.style, {
+        position: "fixed",
+        inset: "0",
+        zIndex: "9998",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+    });
+    const statusTitle = isLoading ? "Reporting Issue..." : "Issue reported!";
     const statusSubtitle = isLoading
         ? `<p style="font-size:14px; color:#64748b; line-height:20px;">This may take ~10 seconds</p>`
         : "";
@@ -601,10 +614,10 @@ function showTriageStatusModal(isLoading, triageId) {
         : "";
     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 id="sf-triage-card"
+         style="position:relative; background:#fff; padding:24px; border-radius:12px; width:300px; max-width:90%;
+                font-family:sans-serif; box-shadow:0 4px 20px rgba(0,0,0,0.15);
+                z-index:9999; opacity:1; transition:opacity 300ms ease;">
       <div style="position:absolute; top:24px; right:48px;">${copiedStatus}</div>
 
       <button id="sf-triage-modal-close"
@@ -615,7 +628,7 @@ function showTriageStatusModal(isLoading, triageId) {
         </svg>
       </button>
 
-      <h2 style="font-size:18px; font-weight:600; margin-bottom:${isLoading ? 8 : 40}px; line-height: 28px;">${statusTitle}</h2>
+      <h2 style="font-size:18px; font-weight:600; margin-bottom:${isLoading ? 8 : 40}px; line-height:28px;">${statusTitle}</h2>
       ${statusSubtitle}
       ${spinner}
 
@@ -628,7 +641,7 @@ function showTriageStatusModal(isLoading, triageId) {
         <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
+          View
           <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"/>
@@ -642,10 +655,12 @@ function showTriageStatusModal(isLoading, triageId) {
     </style>
   `;
     document.body.appendChild(container);
+    const card = container.querySelector("#sf-triage-card");
+    // Close handler with fade only on card
     document
         .getElementById("sf-triage-modal-close")
         ?.addEventListener("click", () => {
-        container.remove();
+        fadeCardAndRemove(container, card, 300);
     });
     const copyBtn = document.getElementById("sf-copy-triage-link");
     const viewBtn = document.getElementById("sf-view-triage-btn");
@@ -672,8 +687,17 @@ function showTriageStatusModal(isLoading, triageId) {
                 window.open(triageUrl, "_blank");
             }
         });
+        // Auto-hide after success
+        setTimeout(() => fadeCardAndRemove(container, card, 300), 10000);
     }
 }
+function fadeCardAndRemove(container, card, durationMs = 300) {
+    card.style.opacity = "0"; // fade only the card
+    card.addEventListener("transitionend", () => container.remove(), {
+        once: true,
+    });
+    setTimeout(() => container.remove(), durationMs + 100); // fallback
+}
 function removeExistingModals() {
     document.getElementById("sf-report-issue-modal")?.remove();
     document.getElementById("sf-triage-status-modal")?.remove();