@sailfish-ai/recorder 1.8.13 → 1.8.17

package/dist/inAppReportIssueModal/ui.js

@@ -0,0 +1,475 @@
+// Helper function to render custom multiselect dropdown
+export function renderCustomMultiSelect(fieldId, fieldName, options, selectedValues, isRequired = false) {
+    const requiredMark = isRequired
+        ? '<span style="color:#ef4444;">*</span>'
+        : "";
+    const selectedLabels = options
+        .filter((opt) => selectedValues.includes(opt.id || opt.value || opt.name || opt))
+        .map((opt) => opt.name || opt.value || opt)
+        .join(", ");
+    const optionsHTML = options
+        .map((opt) => {
+        const value = opt.id || opt.value || opt.name || opt;
+        const label = opt.name || opt.value || opt;
+        const isSelected = selectedValues.includes(value);
+        return `
+        <div class="sf-multiselect-option" data-value="${value}" data-selected="${isSelected}" style="padding:8px 12px; cursor:pointer; ${isSelected ? "background-color:#e0f2fe;" : ""}" onmouseover="this.style.backgroundColor=this.dataset.selected === 'true' ? '#bae6fd' : '#f1f5f9'" onmouseout="this.style.backgroundColor=this.dataset.selected === 'true' ? '#e0f2fe' : ''" onclick="event.stopPropagation();">
+          ${label}
+        </div>
+      `;
+    })
+        .join("");
+    return `
+    <div style="position:relative;">
+      <label for="${fieldId}" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+        ${fieldName} ${requiredMark}
+      </label>
+      <div class="sf-custom-multiselect" id="${fieldId}-container" data-field-id="${fieldId}" style="position:relative;">
+        <div class="sf-multiselect-input" style="width:100%; padding:8px 12px; font-size:14px; border:1px solid #cbd5e1; border-radius:6px; background-color:white; cursor:pointer; min-height:38px; display:flex; align-items:center;" onclick="document.getElementById('${fieldId}-dropdown').style.display = document.getElementById('${fieldId}-dropdown').style.display === 'none' ? 'block' : 'none';">
+          <span style="color:${selectedLabels ? "#000" : "#9ca3af"}; flex:1;">${selectedLabels || "Select..."}</span>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="margin-left:8px;">
+            <path d="M4 6L8 10L12 6" stroke="#64748B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div id="${fieldId}-dropdown" class="sf-multiselect-dropdown" style="display:none; position:absolute; top:100%; left:0; right:0; margin-top:4px; background:white; border:1px solid #cbd5e1; border-radius:6px; max-height:200px; overflow-y:auto; z-index:1000; box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);">
+          ${optionsHTML}
+        </div>
+      </div>
+    </div>
+  `;
+}
+// Helper function to generate chevron SVG
+export function getChevronSVG(isExpanded) {
+    return isExpanded
+        ? `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+         <path d="M12 6L8 10L4 6" stroke="#52525B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+       </svg>`
+        : `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+         <path d="M6 12L10 8L6 4" stroke="#52525B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+       </svg>`;
+}
+// Helper function to generate collapsible section HTML
+export function generateCollapsibleSection(id, title, content, isExpanded = false) {
+    return `
+    <div class="sf-collapsible-section" style="border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 12px;">
+      <button class="sf-collapsible-header" data-target="${id}"
+        style="width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f8fafc; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; color: #0F172A; text-align: left;">
+        <span>${title}</span>
+        <span class="sf-chevron">${getChevronSVG(isExpanded)}</span>
+      </button>
+      <div id="${id}" class="sf-collapsible-content" style="display: ${isExpanded ? "block" : "none"}; padding: 16px; border-top: 1px solid #e2e8f0;">
+        ${content}
+      </div>
+    </div>
+  `;
+}
+export function renderDynamicField(field, fieldValue, users = []) {
+    const fieldId = field.fieldId || field.key;
+    const fieldName = field.name;
+    const fieldType = field.schema?.type;
+    const fieldSystem = field.schema?.system;
+    const fieldCustom = field.schema?.custom;
+    const isRequired = field.required || false;
+    const allowedValues = field.allowedValues;
+    // Skip system fields that are handled separately
+    const skipFields = [
+        "summary",
+        "description",
+        "project",
+        "issuetype",
+        "priority",
+    ];
+    if (skipFields.includes(fieldId) || skipFields.includes(fieldSystem)) {
+        return null;
+    }
+    const requiredMark = isRequired
+        ? '<span style="color:#ef4444;">*</span>'
+        : "";
+    const baseInputStyle = "width:100%; padding:8px 12px; font-size:14px; border:1px solid #cbd5e1; border-radius:6px; outline:none;";
+    switch (fieldType) {
+        case "string":
+            // Check if it's a textarea (custom field type)
+            if (fieldCustom && fieldCustom.includes("textarea")) {
+                return `
+          <div>
+            <label for="${fieldId}" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+              ${fieldName} ${requiredMark}
+            </label>
+            <textarea
+              id="${fieldId}"
+              class="sf-dynamic-field"
+              data-field-id="${fieldId}"
+              placeholder="Enter ${fieldName.toLowerCase()}"
+              style="${baseInputStyle} height:80px; resize:none;"
+              ${isRequired ? "required" : ""}
+            >${fieldValue || ""}</textarea>
+          </div>
+        `;
+            }
+            return `
+        <div>
+          <label for="${fieldId}" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+            ${fieldName} ${requiredMark}
+          </label>
+          <input
+            type="text"
+            id="${fieldId}"
+            class="sf-dynamic-field"
+            data-field-id="${fieldId}"
+            value="${fieldValue || ""}"
+            placeholder="Enter ${fieldName.toLowerCase()}"
+            style="${baseInputStyle}"
+            ${isRequired ? "required" : ""}
+          />
+        </div>
+      `;
+        case "number":
+            return `
+        <div>
+          <label for="${fieldId}" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+            ${fieldName} ${requiredMark}
+          </label>
+          <input
+            type="number"
+            id="${fieldId}"
+            class="sf-dynamic-field"
+            data-field-id="${fieldId}"
+            value="${fieldValue || ""}"
+            placeholder="Enter ${fieldName.toLowerCase()}"
+            style="${baseInputStyle}"
+            step="0.5"
+            ${isRequired ? "required" : ""}
+          />
+        </div>
+      `;
+        case "date":
+            return `
+        <div>
+          <label for="${fieldId}" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+            ${fieldName} ${requiredMark}
+          </label>
+          <input
+            type="date"
+            id="${fieldId}"
+            class="sf-dynamic-field"
+            data-field-id="${fieldId}"
+            value="${fieldValue || ""}"
+            style="${baseInputStyle}"
+            ${isRequired ? "required" : ""}
+          />
+        </div>
+      `;
+        case "user":
+            if (users && users.length > 0) {
+                const options = users
+                    .map((user) => {
+                    const label = user.email
+                        ? `${user.name} (${user.email})`
+                        : user.name;
+                    const selected = fieldValue === user.id ? "selected" : "";
+                    return `<option value="${user.id}" ${selected}>${label}</option>`;
+                })
+                    .join("");
+                const hasValue = fieldValue && users.some((u) => u.id === fieldValue);
+                return `
+          <div>
+            <label for="${fieldId}" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+              ${fieldName} ${requiredMark}
+            </label>
+            <select
+              id="${fieldId}"
+              class="sf-dynamic-field"
+              data-field-id="${fieldId}"
+              style="${baseInputStyle} appearance:none; cursor:pointer; background-color: white; ${!hasValue ? "color: #9ca3af;" : ""}"
+              ${isRequired ? "required" : ""}
+            >
+              <option value="" disabled ${!hasValue ? "selected" : ""} style="color: #9ca3af;">Select ${fieldName.toLowerCase()}...</option>
+              ${options}
+            </select>
+          </div>
+        `;
+            }
+            return null;
+        case "option":
+            if (allowedValues && allowedValues.length > 0) {
+                const options = allowedValues
+                    .map((opt) => {
+                    const value = opt.id || opt.value || opt;
+                    const label = opt.value || opt.name || opt;
+                    const selected = fieldValue === value ? "selected" : "";
+                    return `<option value="${value}" ${selected}>${label}</option>`;
+                })
+                    .join("");
+                const hasValue = fieldValue &&
+                    allowedValues.some((opt) => (opt.id || opt.value || opt) === fieldValue);
+                return `
+          <div>
+            <label for="${fieldId}" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+              ${fieldName} ${requiredMark}
+            </label>
+            <select
+              id="${fieldId}"
+              class="sf-dynamic-field"
+              data-field-id="${fieldId}"
+              style="${baseInputStyle} appearance:none; cursor:pointer; background-color: white; ${!hasValue ? "color: #9ca3af;" : ""}"
+              ${isRequired ? "required" : ""}
+            >
+              <option value="" disabled ${!hasValue ? "selected" : ""} style="color: #9ca3af;">Select ${fieldName.toLowerCase()}...</option>
+              ${options}
+            </select>
+          </div>
+        `;
+            }
+            return null;
+        case "array":
+            // Skip labels as they're handled separately
+            if (fieldSystem === "labels") {
+                return null;
+            }
+            // Only render if allowedValues exist and are not empty
+            if (allowedValues && allowedValues.length > 0) {
+                const fieldValueArray = Array.isArray(fieldValue) ? fieldValue : [];
+                return renderCustomMultiSelect(fieldId, fieldName, allowedValues, fieldValueArray, isRequired);
+            }
+            return null;
+        case "parent":
+        case "issuelink":
+            return `
+        <div>
+          <label for="${fieldId}" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+            ${fieldName} ${requiredMark}
+          </label>
+          <input
+            type="text"
+            id="${fieldId}"
+            class="sf-dynamic-field"
+            data-field-id="${fieldId}"
+            value="${fieldValue || ""}"
+            placeholder="e.g., PROJ-123"
+            style="${baseInputStyle}"
+            ${isRequired ? "required" : ""}
+          />
+        </div>
+      `;
+        default:
+            // For any other field types with set operation, render as text input
+            if (field.operations?.includes("set")) {
+                return `
+          <div>
+            <label for="${fieldId}" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+              ${fieldName} ${requiredMark}
+            </label>
+            <input
+              type="text"
+              id="${fieldId}"
+              class="sf-dynamic-field"
+              data-field-id="${fieldId}"
+              value="${fieldValue || ""}"
+              placeholder="Enter ${fieldName.toLowerCase()}"
+              style="${baseInputStyle}"
+              ${isRequired ? "required" : ""}
+            />
+          </div>
+        `;
+            }
+            return null;
+    }
+}
+export function generateModalHTML(currentState, initialMode = "lookback") {
+    const isStartNow = initialMode === "startnow";
+    return `
+    <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:476px; max-width:90%; max-height:80vh; overflow-y:auto; 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; background:none; border:none; cursor:pointer; padding:0;">
+        <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:20px; font-weight:600; margin:0 0 20px 0; color:#0F172A;">
+        Report an Issue
+      </h2>
+
+      <div style="display:flex; gap:8px; margin-bottom:16px; border:1px solid #cbd5e1; border-radius:8px; padding:4px; background:#f8fafc;">
+        <button class="sf-issue-tab" data-mode="lookback"
+          style="flex:1; padding:8px; border:none; border-radius:6px; font-size:14px; font-weight:500; cursor:pointer; transition:all 0.2s;
+                 background:${!isStartNow ? "#fff" : "transparent"}; color:${!isStartNow ? "#0F172A" : "#64748B"};">
+          It Already Happened
+        </button>
+        <button class="sf-issue-tab" data-mode="startnow"
+          style="flex:1; padding:8px; border:none; border-radius:6px; font-size:14px; font-weight:500; cursor:pointer; transition:all 0.2s;
+                 background:${isStartNow ? "#fff" : "transparent"}; color:${isStartNow ? "#0F172A" : "#64748B"};">
+          I'll Reproduce It Now
+        </button>
+      </div>
+
+      <div id="sf-issue-mode-info" style="display:flex; align-items:center; gap:8px; padding:12px; background:#EFF6FF; border-radius:6px; margin-bottom:20px;">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8 7V11M8 5H8.005M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z" stroke="#2563EB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <div style="font-size:13px; color:#1E40AF;">
+          ${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?
+      </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;">${currentState.description}</textarea>
+
+      <!-- Create an Issue Section -->
+      <div style="margin-bottom:20px;">
+        <label style="display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; cursor:pointer; margin-bottom:12px;">
+          <input type="checkbox" id="sf-create-issue-checkbox" ${currentState.createIssue ? "checked" : ""}
+            style="width:16px; height:16px; accent-color:#295DBF; cursor:pointer;">
+          Create an Issue
+        </label>
+
+        <div id="sf-issue-fields-container" style="display:${currentState.createIssue ? "block" : "none"};">
+          ${generateCollapsibleSection("sf-issue-details", "Issue Details", `
+            <div style="display:flex; flex-direction:column; gap:12px;">
+              <div>
+                <label for="sf-issue-name" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+                  Issue name <span style="color:#ef4444;">*</span>
+                </label>
+                <input type="text" id="sf-issue-name" placeholder="Enter issue name"
+                  value="${currentState.issueName}"
+                  style="width:100%; padding:8px 12px; font-size:14px; border:1px solid #cbd5e1; border-radius:6px; outline:none;">
+              </div>
+              <div>
+                <label for="sf-issue-desc" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+                  Description
+                </label>
+                <textarea id="sf-issue-desc" placeholder="Enter issue description"
+                  style="width:100%; height:80px; padding:8px 12px; font-size:14px; border:1px solid #cbd5e1; border-radius:6px; resize:none; outline:none;">${currentState.issueDescription}</textarea>
+              </div>
+            </div>
+          `, currentState.createIssue)}
+        </div>
+      </div>
+
+      <!-- Create an Engineering Ticket Section -->
+      <div style="margin-bottom:20px;">
+        <label style="display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; cursor:pointer; margin-bottom:12px;">
+          <input type="checkbox" id="sf-create-eng-ticket-checkbox" ${currentState.createEngTicket ? "checked" : ""}
+            style="width:16px; height:16px; accent-color:#295DBF; cursor:pointer;"
+            ${!currentState.createIssue ? "disabled" : ""}>
+          Create an Engineering Ticket
+        </label>
+
+        <div id="sf-eng-ticket-fields-container" style="display:${currentState.createEngTicket && currentState.createIssue
+        ? "block"
+        : "none"};">
+          ${generateCollapsibleSection("sf-eng-ticket-details", "Engineering Ticket Details", `
+            <div style="display:flex; flex-direction:column; gap:12px;">
+              <div>
+                <label for="sf-eng-ticket-team" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+                  Team
+                </label>
+                <select id="sf-eng-ticket-team"
+                  style="width:100%; padding:8px 12px; font-size:14px; border:1px solid #cbd5e1; border-radius:6px; outline:none; appearance:none; cursor:pointer; background-color: white;">
+                  <option value="">Select team...</option>
+                </select>
+              </div>
+              <div>
+                <label for="sf-eng-ticket-project" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+                  Project
+                </label>
+                <select id="sf-eng-ticket-project"
+                  style="width:100%; padding:8px 12px; font-size:14px; border:1px solid #cbd5e1; border-radius:6px; outline:none; appearance:none; cursor:pointer; background-color: white;">
+                  <option value="">Select project...</option>
+                </select>
+              </div>
+              <div>
+                <label for="sf-eng-ticket-priority" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+                  Priority
+                </label>
+                <select id="sf-eng-ticket-priority"
+                  style="width:100%; padding:8px 12px; font-size:14px; border:1px solid #cbd5e1; border-radius:6px; outline:none; appearance:none; cursor:pointer; background-color: white;">
+                  <option value="0">None</option>
+                  <option value="1">Urgent</option>
+                  <option value="2">High</option>
+                  <option value="3">Medium</option>
+                  <option value="4">Low</option>
+                </select>
+              </div>
+              <div>
+                <label for="sf-eng-ticket-labels" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+                  Labels
+                </label>
+                <input type="text" id="sf-eng-ticket-labels" placeholder="Enter labels (comma-separated)"
+                  value="${currentState.engTicketLabels.join(", ")}"
+                  style="width:100%; padding:8px 12px; font-size:14px; border:1px solid #cbd5e1; border-radius:6px; outline:none;">
+              </div>
+              <div>
+                <label for="sf-eng-ticket-type" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+                  Issue Type
+                </label>
+                <select id="sf-eng-ticket-type"
+                  style="width:100%; padding:8px 12px; font-size:14px; border:1px solid #cbd5e1; border-radius:6px; outline:none; appearance:none; cursor:pointer; background-color: white;">
+                  <option value="">Select project first...</option>
+                </select>
+              </div>
+            </div>
+          `, currentState.createEngTicket && currentState.createIssue)}
+        </div>
+      </div>
+
+      <div id="sf-lookback-container" style="display:${isStartNow ? "none" : "block"}; margin-bottom:20px;">
+        <label for="sf-lookback-minutes" style="display:block; font-size:14px; font-weight:500; margin-bottom:6px;">
+          When did this happen?
+        </label>
+        <div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
+          <div style="position:relative; display:flex; align-items:center; gap:6px;">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="8" cy="8" r="6" stroke="#64748B" stroke-width="1.5"/>
+              <path d="M8 4.5V8H11" stroke="#64748B" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+            <select id="sf-lookback-minutes"
+              style="padding:8px 32px 8px 12px; font-size:14px; border:1px solid #cbd5e1; border-radius:6px; cursor:pointer; outline:none; appearance:none; background:white;">
+              <option value="2">2 minutes ago</option>
+              <option value="5">5 minutes ago</option>
+              <option value="10">10 minutes ago</option>
+            </select>
+          </div>
+          <div style="font-size:13px; color:#64748B;">
+            Captures last <span id="sf-minutes-display">2</span> min
+          </div>
+        </div>
+      </div>
+
+      <div id="sf-record-button-container" style="display:${isStartNow ? "block" : "none"}; margin-bottom:20px;">
+        <button id="sf-start-recording-btn"
+          style="width:100%; padding:12px; background:#295DBF; color:#fff; border:none; border-radius:6px; font-size:14px; font-weight:500; cursor:pointer;">
+          Start Recording
+        </button>
+      </div>
+
+      <div id="sf-recording-timer-label" style="display:none; text-align:center; margin-bottom:16px; font-size:13px; color:#64748B;">
+        Recorded: <span id="sf-recording-timer-display" style="font-weight:600; color:#0F172A;">00:00</span>
+      </div>
+
+      <div id="sf-modal-footer" style="display:flex; justify-content:flex-end; gap:12px;">
+        <button id="sf-issue-cancel-btn"
+          style="padding:10px 20px; background:#fff; color:#475569; border:1px solid #cbd5e1; border-radius:6px; font-size:14px; font-weight:500; cursor:pointer;">
+          Cancel
+        </button>
+        <button id="sf-issue-submit-btn"
+          style="padding:10px 20px; background:#295DBF; color:#fff; border:none; border-radius:6px; font-size:14px; font-weight:500; cursor:pointer;">
+          Submit
+        </button>
+      </div>
+    </div>
+  `;
+}

package/dist/index.js

@@ -7,6 +7,7 @@ import { readGitSha } from "./env";
 import { initializeErrorInterceptor } from "./errorInterceptor";
 import { fetchCaptureSettings, fetchFunctionSpanTrackingEnabled, sendDomainsToNotPropagateHeaderTo, startRecordingSession, } from "./graphql";
 import { setupIssueReporting } from "./inAppReportIssueModal";
+import { fetchIntegrationData, getIntegrationData, } from "./inAppReportIssueModal/integrations";
 import { sendMapUuidIfAvailable } from "./mapUuid";
 import { getUrlAndStoredUuids, initializeConsolePlugin, initializeDomContentEvents, initializeRecording, } from "./recording";
 import { HAS_DOCUMENT, HAS_LOCAL_STORAGE, HAS_SESSION_STORAGE, HAS_WINDOW, } from "./runtimeEnv";
@@ -819,7 +820,8 @@ export async function startRecording({ apiKey, backendApi = "https://api-service
     if (isFunctionSpanTrackingEnabled() && (!g.ws || g.ws.readyState !== 1)) {
         fetchFunctionSpanTrackingEnabled(apiKey, backendApi)
             .then((funcSpanResponse) => {
-            const isEnabled = funcSpanResponse.data?.isFunctionSpanTrackingEnabledFromApiKey ?? false;
+            const isEnabled = funcSpanResponse.data?.isFunctionSpanTrackingEnabledFromApiKey ??
+                false;
             if (!isEnabled) {
                 // Backend says tracking is NOT active, clear stale localStorage data
                 clearStaleFuncSpanState();
@@ -870,7 +872,8 @@ export async function startRecording({ apiKey, backendApi = "https://api-service
         const sessionResponse = await startRecordingSession(apiKey, sessionId, backendApi, effectiveServiceIdentifier, effectiveServiceVersion, effectiveMapUuid, effectiveGitSha, effectiveLibrary, metadataWithAppUrl);
         if (sessionResponse.data?.startRecordingSession) {
             // Extract env value from serviceAdditionalMetadata
-            const envValue = serviceAdditionalMetadata?.env || serviceAdditionalMetadata?.environment;
+            const envValue = serviceAdditionalMetadata?.env ||
+                serviceAdditionalMetadata?.environment;
             const websocket = await initializeRecording(captureSettings, backendApi, apiKey, sessionId, envValue);
             g.ws = websocket;
             g.initialized = true;
@@ -917,12 +920,24 @@ export const initRecorder = async (options) => {
             await startRecording(options);
             // Set up the issue reporting UI once
             if (!g.issueReportingInit) {
+                const backendApiUrl = options.backendApi ?? "https://api-service.sailfishqa.com";
+                // Fetch integration data before setting up issue reporting
+                let integrationData = null;
+                try {
+                    await fetchIntegrationData(options.apiKey, backendApiUrl);
+                    integrationData = getIntegrationData();
+                }
+                catch (error) {
+                    console.warn("[Sailfish] Failed to fetch integration data for issue reporting:", error);
+                    // Continue with null integration data - the modal will work without it
+                }
                 setupIssueReporting({
                     apiKey: options.apiKey,
-                    backendApi: options.backendApi ?? "https://api-service.sailfishqa.com",
+                    backendApi: backendApiUrl,
                     getSessionId: () => getOrSetSessionId(),
                     shortcuts: options.reportIssueShortcuts,
                     customBaseUrl: options.customBaseUrl,
+                    integrationData,
                 });
                 g.issueReportingInit = true;
             }