@sailfish-ai/recorder 1.8.15 → 1.8.17

package/dist/{inAppReportIssueModal.js → inAppReportIssueModal/index.js}

@@ -1,4 +1,8 @@
-import { createTriageFromRecorder } from "./graphql";
+import { createTriageAndIssueFromRecorder, createTriageFromRecorder, } from "../graphql";
+import { getFieldsForProject, getIntegrationData, getProjectsForTeam, getUsers, hasValidIntegration, updateFormWithIntegrationData, updateIssueTypeOptions, } from "./integrations";
+import { currentState, isRecording, recordingEndTime, recordingStartTime, resetState, setIsRecording, setRecordingEndTime, setRecordingStartTime, setTimerInterval, timerInterval, } from "./state";
+import { STORAGE_KEYS } from "./types";
+import { getChevronSVG, renderCustomMultiSelect, renderDynamicField, } from "./ui";
 // TODO - enable configuration by keyboard typing in UI
 const DEFAULT_SHORTCUTS = {
     enabled: false,
@@ -16,17 +20,167 @@ export const ReportIssueContext = {
     backendApi: null,
     triageBaseUrl: "https://app.sailfishqa.com",
     deactivateIsolation: () => { },
+    integrationData: null,
 };
 let modalEl = null;
-let currentState = {
-    mode: "lookback",
-    description: "",
-    occurredInThisTab: true,
-};
-let recordingStartTime = null;
-let recordingEndTime = null;
-let timerInterval = null;
-let isRecording = false;
+// Function to set up custom multiselect listeners
+function setupCustomMultiSelectListeners(fieldId, onChange) {
+    const container = document.getElementById(`${fieldId}-container`);
+    const dropdown = document.getElementById(`${fieldId}-dropdown`);
+    if (!container || !dropdown)
+        return;
+    // Handle option clicks
+    const options = dropdown.querySelectorAll(".sf-multiselect-option");
+    options.forEach((option) => {
+        option.addEventListener("click", (e) => {
+            e.stopPropagation();
+            const optionEl = option;
+            // Toggle selection
+            const isSelected = optionEl.dataset.selected === "true";
+            optionEl.dataset.selected = String(!isSelected);
+            // Update background color
+            if (!isSelected) {
+                optionEl.style.backgroundColor = "#e0f2fe";
+            }
+            else {
+                optionEl.style.backgroundColor = "";
+            }
+            // Get all selected values and labels
+            const selectedValues = [];
+            const selectedLabels = [];
+            dropdown.querySelectorAll(".sf-multiselect-option").forEach((opt) => {
+                const optEl = opt;
+                if (optEl.dataset.selected === "true") {
+                    selectedValues.push(optEl.dataset.value || "");
+                    selectedLabels.push(optEl.textContent || "");
+                }
+            });
+            // Update input display
+            const input = container.querySelector(".sf-multiselect-input span");
+            const displayText = selectedLabels.join(", ");
+            if (input) {
+                input.textContent = displayText || "Select...";
+                input.style.color = displayText ? "#000" : "#9ca3af";
+            }
+            // Call onChange callback
+            onChange(selectedValues);
+        });
+    });
+    // Close dropdown on outside click
+    document.addEventListener("click", (e) => {
+        const target = e.target;
+        if (!container.contains(target)) {
+            dropdown.style.display = "none";
+        }
+    });
+}
+// Function to render all dynamic fields for a project and issue type
+function renderDynamicFields(projectId, issueTypeId) {
+    const dynamicFieldsContainer = document.getElementById("sf-dynamic-fields-container");
+    if (!dynamicFieldsContainer)
+        return;
+    if (!projectId) {
+        dynamicFieldsContainer.innerHTML =
+            '<div style="font-size:14px; color:#64748B;">Select a project to see additional fields</div>';
+        return;
+    }
+    const fields = getFieldsForProject(projectId, issueTypeId);
+    const users = getUsers();
+    if (!fields || fields.length === 0) {
+        dynamicFieldsContainer.innerHTML = "";
+        return;
+    }
+    const renderedFields = fields
+        .map((field) => renderDynamicField(field, currentState.engTicketCustomFields[field.fieldId || field.key], users))
+        .filter(Boolean)
+        .join("");
+    dynamicFieldsContainer.innerHTML = renderedFields || "";
+    // Set up listeners for custom multiselects in dynamic fields
+    fields.forEach((field) => {
+        const fieldId = field.fieldId || field.key;
+        const fieldType = field.schema?.type;
+        const allowedValues = field.allowedValues;
+        if (fieldType === "array" && allowedValues && allowedValues.length > 0) {
+            setupCustomMultiSelectListeners(fieldId, (selectedValues) => {
+                currentState.engTicketCustomFields[fieldId] = selectedValues;
+            });
+        }
+    });
+}
+// Function to generate engineering ticket fields HTML based on integration data
+function generateEngTicketFieldsHTML() {
+    const integrationData = ReportIssueContext.integrationData;
+    if (!integrationData)
+        return "";
+    const isJira = integrationData.provider?.toLowerCase() === "jira";
+    const hasTeams = integrationData.teams &&
+        Array.isArray(integrationData.teams) &&
+        integrationData.teams.length > 0;
+    let fieldsHTML = "<div style='display:flex; flex-direction:column; gap:12px;'>";
+    // Team field (only for Linear - when teams exist)
+    if (hasTeams) {
+        fieldsHTML += `
+      <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; color: #9ca3af;">
+          <option value="" disabled selected style="color: #9ca3af;">Select team...</option>
+        </select>
+      </div>
+    `;
+    }
+    // Project field (always shown)
+    fieldsHTML += `
+    <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; color: #9ca3af;">
+        <option value="" disabled selected style="color: #9ca3af;">Select project...</option>
+      </select>
+    </div>
+  `;
+    // Issue Type field (only for Jira)
+    if (isJira) {
+        fieldsHTML += `
+      <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; color: #9ca3af;">
+          <option value="" disabled selected style="color: #9ca3af;">Select project first...</option>
+        </select>
+      </div>
+    `;
+    }
+    // Priority field (always shown)
+    fieldsHTML += `
+    <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;">
+      </select>
+    </div>
+  `;
+    // Labels field (only if integration has labels)
+    if (integrationData.labels &&
+        Array.isArray(integrationData.labels) &&
+        integrationData.labels.length > 0) {
+        fieldsHTML += renderCustomMultiSelect("sf-eng-ticket-labels", "Labels", integrationData.labels, currentState.engTicketLabels, false);
+    }
+    // Dynamic Fields Container
+    fieldsHTML += `
+    <div id="sf-dynamic-fields-container" style="display: flex; flex-direction: column; gap: 12px;"></div>
+  `;
+    fieldsHTML += "</div>";
+    return fieldsHTML;
+}
 function isMacPlatform() {
     // Newer API (Chrome, Edge, Opera)
     const uaData = navigator.userAgentData;
@@ -95,6 +249,7 @@ export function setupIssueReporting(options) {
     ReportIssueContext.apiKey = options.apiKey;
     ReportIssueContext.backendApi = options.backendApi;
     ReportIssueContext.resolveSessionId = options.getSessionId;
+    ReportIssueContext.integrationData = options.integrationData || null;
     if (options.customBaseUrl)
         ReportIssueContext.triageBaseUrl = options.customBaseUrl;
     ReportIssueContext.shortcuts = mergeShortcutsConfig(options.shortcuts);
@@ -188,16 +343,12 @@ function closeModal() {
     }
     modalEl = null;
     if (!isRecording) {
-        currentState = {
-            mode: "lookback",
-            description: "",
-            occurredInThisTab: true,
-        };
-        recordingStartTime = null;
-        recordingEndTime = null;
+        resetState();
     }
-    if (timerInterval)
+    if (timerInterval) {
         clearInterval(timerInterval);
+        setTimerInterval(null);
+    }
 }
 function activateModalIsolation(modal) {
     // A. Ensure modal is a proper dialog & focus anchor
@@ -378,31 +529,38 @@ function injectModalHTML(initialMode = "lookback") {
     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:476px; max-width:90%; z-index:9999;
-      box-shadow:0 4px 20px rgba(0,0,0,0.15); font-family:sans-serif;">
+      background:#fff; border-radius:12px;
+      width:476px; max-width:90%; max-height:90vh; z-index:9999;
+      box-shadow:0 4px 20px rgba(0,0,0,0.15); font-family:sans-serif;
+      display:flex; flex-direction:column;">
 
-      <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>
+      <!-- Fixed Header -->
+      <div style="padding:24px 24px 16px 24px; flex-shrink:0; position:relative;">
+        <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:18px; font-weight:600; margin-bottom:16px;">Report Issue</h2>
+        <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="sf-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; display: flex; align-items: center; gap: 8px;">
-          Existing ${getShortcutLabelFromContext("openModalExistingMode")}
-        </button>
-        <button id="sf-tab-startnow" data-mode="startnow" class="sf-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; display: flex; align-items: center; gap: 8px;">
-          Capture new ${getShortcutLabelFromContext("openModalCaptureNewMode")}
-        </button>
+        <div id="sf-issue-tabs" style="display:flex; gap:4px; background:#f1f5f9; padding:6px; border-radius:6px; width: fit-content;">
+          <button id="sf-tab-lookback" data-mode="lookback" class="sf-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; display: flex; align-items: center; gap: 8px;">
+            Existing ${getShortcutLabelFromContext("openModalExistingMode")}
+          </button>
+          <button id="sf-tab-startnow" data-mode="startnow" class="sf-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; display: flex; align-items: center; gap: 8px;">
+            Capture new ${getShortcutLabelFromContext("openModalCaptureNewMode")}
+          </button>
+        </div>
       </div>
 
+      <!-- Scrollable Content -->
+      <div style="flex:1; overflow-y:auto; padding:0 24px;">
+
       <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)">
@@ -427,6 +585,7 @@ function injectModalHTML(initialMode = "lookback") {
                border:1px solid #cbd5e1; border-radius:6px; margin-bottom:20px;
                resize:none; outline:none;">${currentState.description}</textarea>
 
+      <!-- When did this happen Section -->
       <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?
@@ -483,35 +642,82 @@ function injectModalHTML(initialMode = "lookback") {
         </div>
       </div>
 
-      <div id="sf-modal-footer" style="display:flex; justify-content:${isStartNow ? "space-between" : "flex-end"}; align-items:flex-end;">
+      <!-- Divider -->
+      <div style="height: 1px; background: #e2e8f0; margin: 20px 0;"></div>
 
-        <div id="sf-record-button-container" style="display:${isStartNow ? "block" : "none"};">
-          <div id="sf-recording-timer-label" style="display:none; font-size:14px; margin-bottom:20px;">
-            Recording: <span id="sf-recording-timer-display">00:00</span>
-          </div>
-          <button id="sf-start-recording-btn"
-            style="display:flex; align-items:center; gap:8px; border:1px solid #fc5555;
-                   background:transparent; padding:6px 12px; font-size:14px;
-                   color: #fc5555; border-radius:6px; cursor:pointer; font-weight:500;">
-            <div id="sf-record-icon" style="padding: 6px; border-radius: 6px; border: 1px solid #fc5555; cursor: pointer;">
-              <div style="width: 14px; height: 14px; background: #fc5555; border-radius: 50%; border: 1px solid #991b1b;"></div>
+      <!-- Create an Issue & Engineering Ticket Section -->
+      <div style="margin-bottom:20px;">
+        <!-- Checkboxes on same line -->
+        <div style="display:flex; align-items:center; gap:24px; margin-bottom:16px;">
+          <label style="display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; cursor:pointer;">
+            <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>
+
+          <label id="sf-create-eng-ticket-label" style="display:${ReportIssueContext.integrationData ? "flex" : "none"}; align-items:center; gap:8px; font-size:14px; font-weight:500; cursor:pointer;">
+            <input type="checkbox" id="sf-create-eng-ticket-checkbox" ${currentState.createEngTicket ? "checked" : ""}
+              style="width:16px; height:16px; accent-color:#295DBF; cursor:pointer;">
+            Create an Eng Ticket
+          </label>
+        </div>
+
+        <!-- Issue Title Field (always shown when create issue is checked) -->
+        <div id="sf-issue-fields-container" style="display:${currentState.createIssue ? "block" : "none"};">
+          <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;">
+                Title <span style="color:#ef4444;">*</span>
+              </label>
+              <input type="text" id="sf-issue-name" placeholder="Enter title"
+                value="${currentState.issueName}"
+                style="width:100%; padding:8px 12px; font-size:14px; border:1px solid #cbd5e1; border-radius:6px; outline:none;">
             </div>
-            <span>Start Recording</span>
-            ${getShortcutLabelFromContext("startRecording")}
-          </button>
+          </div>
         </div>
 
-        <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:${isStartNow ? "not-allowed" : "pointer"}; opacity:${isStartNow ? "0.4" : "1"}; margin-bottom:1px" ${isStartNow ? "disabled" : ""}>
-          Report <span style="margin-left: 8px; display: inline-flex; align-items: center; gap: 4px; color: #94A3B8; font-size: 12px; line-height:16px;">
-                          ${getShortcutLabelFromContext("submitReport")}
-                        </span>
-        </button>
+        <!-- Engineering Ticket Fields (shown when create eng ticket is checked) -->
+        <div id="sf-eng-ticket-fields-container" style="display:${currentState.createEngTicket ? "block" : "none"}; margin-top: ${currentState.createIssue ? "12px" : "0"};">
+          ${generateEngTicketFieldsHTML()}
+        </div>
       </div>
-      <div style="display:flex; justify-content:center; font-size: 12px; margin-top: 12px; color: #295dbf;">
-        <a href="mailto:info@sailfishqa.com?subject=I'd%20love%20to%20learn%20more&body=Hey%2C%20Sailfish%20AI%20team%20-%20I'd%20love%20to%20learn%20more%20about%20Sailfish%20AI!">Powered by Sailfish AI</a>
+
+      <!-- Divider -->
+      <div style="height: 1px; background: #e2e8f0; margin-top: 20px;"></div>
+      </div>
+
+      <!-- Fixed Footer -->
+      <div style="padding:20px 24px; flex-shrink:0;">
+        <div id="sf-modal-footer" style="display:flex; justify-content:${isStartNow ? "space-between" : "flex-end"}; align-items:flex-end;">
+
+          <div id="sf-record-button-container" style="display:${isStartNow ? "block" : "none"};">
+            <div id="sf-recording-timer-label" style="display:none; font-size:14px; margin-bottom:20px;">
+              Recording: <span id="sf-recording-timer-display">00:00</span>
+            </div>
+            <button id="sf-start-recording-btn"
+              style="display:flex; align-items:center; gap:8px; border:1px solid #fc5555;
+                     background:transparent; padding:6px 12px; font-size:14px;
+                     color: #fc5555; border-radius:6px; cursor:pointer; font-weight:500;">
+              <div id="sf-record-icon" style="padding: 6px; border-radius: 6px; border: 1px solid #fc5555; cursor: pointer;">
+                <div style="width: 14px; height: 14px; background: #fc5555; border-radius: 50%; border: 1px solid #991b1b;"></div>
+              </div>
+              <span>Start Recording</span>
+              ${getShortcutLabelFromContext("startRecording")}
+            </button>
+          </div>
+
+          <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:${isStartNow ? "not-allowed" : "pointer"}; opacity:${isStartNow ? "0.4" : "1"}; margin-bottom:1px" ${isStartNow ? "disabled" : ""}>
+            Report <span style="margin-left: 8px; display: inline-flex; align-items: center; gap: 4px; color: #94A3B8; font-size: 12px; line-height:16px;">
+                            ${getShortcutLabelFromContext("submitReport")}
+                          </span>
+          </button>
+        </div>
+        <div style="display:flex; justify-content:center; font-size: 12px; margin-top: 12px; color: #295dbf;">
+          <a href="mailto:info@sailfishqa.com?subject=I'd%20love%20to%20learn%20more&body=Hey%2C%20Sailfish%20AI%20team%20-%20I'd%20love%20to%20learn%20more%20about%20Sailfish%20AI!">Powered by Sailfish AI</a>
+        </div>
       </div>
     </div>
   `;
@@ -519,6 +725,47 @@ function injectModalHTML(initialMode = "lookback") {
     document.body.appendChild(modalEl);
     bindListeners();
     ReportIssueContext.deactivateIsolation = activateModalIsolation(modalEl);
+    // If engineering ticket is already enabled on load, initialize the form
+    if (ReportIssueContext.integrationData && currentState.createEngTicket) {
+        initializeEngTicketForm();
+    }
+    else if (!ReportIssueContext.integrationData) {
+        // No integration, disable eng ticket
+        currentState.createEngTicket = false;
+    }
+}
+function initializeEngTicketForm() {
+    const integrationData = ReportIssueContext.integrationData;
+    if (!integrationData) {
+        return;
+    }
+    // Set default values from integration data
+    if (!currentState.engTicketTeam && integrationData.defaultTeam) {
+        currentState.engTicketTeam = integrationData.defaultTeam;
+    }
+    if (!currentState.engTicketProject && integrationData.defaultProject) {
+        currentState.engTicketProject = integrationData.defaultProject;
+    }
+    if (!currentState.engTicketPriority && integrationData.defaultPriority) {
+        currentState.engTicketPriority = integrationData.defaultPriority;
+    }
+    // Update form with integration data
+    updateFormWithIntegrationData(currentState);
+    // Handle reporter field for Jira
+    if (integrationData.provider?.toLowerCase() === "jira" &&
+        integrationData.jiraReporterAccountId &&
+        currentState.engTicketProject) {
+        const fields = getFieldsForProject(currentState.engTicketProject, currentState.engTicketIssueType);
+        const reporterField = fields.find((f) => f.fieldId === "reporter");
+        if (reporterField && !currentState.engTicketCustomFields["reporter"]) {
+            currentState.engTicketCustomFields["reporter"] =
+                integrationData.jiraReporterAccountId;
+        }
+    }
+    // If a project is already selected, render dynamic fields
+    if (currentState.engTicketProject) {
+        renderDynamicFields(currentState.engTicketProject, currentState.engTicketIssueType);
+    }
 }
 function setActiveTab(mode) {
     currentState.mode = mode;
@@ -617,6 +864,255 @@ function bindListeners() {
             }
         });
     }
+    // Collapsible sections toggle
+    const collapsibleHeaders = modalEl?.querySelectorAll(".sf-collapsible-header");
+    collapsibleHeaders?.forEach((header) => {
+        header.addEventListener("click", (e) => {
+            const button = e.currentTarget;
+            const targetId = button.dataset.target;
+            const content = document.getElementById(targetId);
+            const chevron = button.querySelector(".sf-chevron");
+            if (content && chevron) {
+                const isExpanded = content.style.display !== "none";
+                content.style.display = isExpanded ? "none" : "block";
+                chevron.innerHTML = getChevronSVG(!isExpanded);
+            }
+        });
+    });
+    // Create Issue checkbox
+    const createIssueCheckbox = document.getElementById("sf-create-issue-checkbox");
+    const issueFieldsContainer = document.getElementById("sf-issue-fields-container");
+    const createEngTicketCheckbox = document.getElementById("sf-create-eng-ticket-checkbox");
+    const engTicketFieldsContainer = document.getElementById("sf-eng-ticket-fields-container");
+    if (createIssueCheckbox) {
+        createIssueCheckbox.addEventListener("change", () => {
+            const isChecked = createIssueCheckbox.checked;
+            currentState.createIssue = isChecked;
+            localStorage.setItem(STORAGE_KEYS.CREATE_ISSUE, String(isChecked));
+            if (issueFieldsContainer) {
+                issueFieldsContainer.style.display = isChecked ? "block" : "none";
+            }
+            // If unchecking create issue, also uncheck eng ticket
+            if (!isChecked && createEngTicketCheckbox) {
+                createEngTicketCheckbox.checked = false;
+                currentState.createEngTicket = false;
+                localStorage.setItem(STORAGE_KEYS.CREATE_ENG_TICKET, "false");
+                if (engTicketFieldsContainer) {
+                    engTicketFieldsContainer.style.display = "none";
+                }
+            }
+        });
+    }
+    // Create Engineering Ticket checkbox
+    if (createEngTicketCheckbox) {
+        createEngTicketCheckbox.addEventListener("change", async () => {
+            const isChecked = createEngTicketCheckbox.checked;
+            currentState.createEngTicket = isChecked;
+            localStorage.setItem(STORAGE_KEYS.CREATE_ENG_TICKET, String(isChecked));
+            // If checking eng ticket, also check create issue
+            if (isChecked && !currentState.createIssue) {
+                currentState.createIssue = true;
+                localStorage.setItem(STORAGE_KEYS.CREATE_ISSUE, "true");
+                if (createIssueCheckbox) {
+                    createIssueCheckbox.checked = true;
+                }
+                if (issueFieldsContainer) {
+                    issueFieldsContainer.style.display = "block";
+                }
+            }
+            if (engTicketFieldsContainer) {
+                engTicketFieldsContainer.style.display = isChecked ? "block" : "none";
+            }
+            // Validate integration data when checkbox is checked
+            // (Data should already be pre-loaded in initRecorder)
+            if (isChecked) {
+                // Check if we have a valid integration
+                if (!hasValidIntegration()) {
+                    // Uncheck the checkbox if no valid integration
+                    createEngTicketCheckbox.checked = false;
+                    currentState.createEngTicket = false;
+                    localStorage.setItem(STORAGE_KEYS.CREATE_ENG_TICKET, "false");
+                    // Hide fields
+                    if (engTicketFieldsContainer) {
+                        engTicketFieldsContainer.style.display = "none";
+                    }
+                    alert("No engineering ticket integration found. Please install and configure an integration (Jira, Linear, or Zendesk) first.");
+                    return;
+                }
+                // Update form fields with integration data if available
+                const integrationData = getIntegrationData();
+                if (integrationData) {
+                    // Set default values
+                    if (!currentState.engTicketTeam && integrationData.defaultTeam) {
+                        currentState.engTicketTeam = integrationData.defaultTeam;
+                    }
+                    if (!currentState.engTicketProject &&
+                        integrationData.defaultProject) {
+                        currentState.engTicketProject = integrationData.defaultProject;
+                    }
+                    if (!currentState.engTicketPriority &&
+                        integrationData.defaultPriority) {
+                        currentState.engTicketPriority = integrationData.defaultPriority;
+                    }
+                    updateFormWithIntegrationData(currentState);
+                    // Handle reporter field for Jira
+                    if (integrationData.provider?.toLowerCase() === "jira" &&
+                        integrationData.jiraReporterAccountId &&
+                        currentState.engTicketProject) {
+                        const fields = getFieldsForProject(currentState.engTicketProject, currentState.engTicketIssueType);
+                        const reporterField = fields.find((f) => f.fieldId === "reporter");
+                        if (reporterField &&
+                            !currentState.engTicketCustomFields["reporter"]) {
+                            currentState.engTicketCustomFields["reporter"] =
+                                integrationData.jiraReporterAccountId;
+                        }
+                    }
+                    // Render dynamic fields if a project is already selected
+                    const projectSelect = document.getElementById("sf-eng-ticket-project");
+                    const issueTypeSelect = document.getElementById("sf-eng-ticket-type");
+                    if (projectSelect && projectSelect.value) {
+                        renderDynamicFields(projectSelect.value, issueTypeSelect?.value);
+                    }
+                }
+            }
+        });
+    }
+    // Issue form fields
+    const issueNameInput = document.getElementById("sf-issue-name");
+    if (issueNameInput) {
+        issueNameInput.addEventListener("input", () => {
+            currentState.issueName = issueNameInput.value;
+        });
+    }
+    // Engineering ticket form fields
+    const engTeamSelect = document.getElementById("sf-eng-ticket-team");
+    const engProjectSelect = document.getElementById("sf-eng-ticket-project");
+    const engPrioritySelect = document.getElementById("sf-eng-ticket-priority");
+    const engLabelsContainer = document.getElementById("sf-eng-ticket-labels-container");
+    const engTypeSelect = document.getElementById("sf-eng-ticket-type");
+    if (engTeamSelect) {
+        engTeamSelect.addEventListener("change", () => {
+            currentState.engTicketTeam = engTeamSelect.value;
+            // Update text color based on selection
+            engTeamSelect.style.color = engTeamSelect.value ? "" : "#9ca3af";
+            // Update projects dropdown when team changes (for Linear)
+            if (engProjectSelect) {
+                const projects = getProjectsForTeam(engTeamSelect.value);
+                const projectSelect = document.getElementById("sf-eng-ticket-project");
+                if (projectSelect) {
+                    // Clear current selection
+                    currentState.engTicketProject = "";
+                    currentState.engTicketCustomFields = {};
+                    // Populate new projects
+                    projectSelect.innerHTML =
+                        '<option value="">Select project...</option>';
+                    projects.forEach((project) => {
+                        const optionElement = document.createElement("option");
+                        optionElement.value = project.id || project.value || project;
+                        optionElement.textContent =
+                            project.name || project.label || project;
+                        projectSelect.appendChild(optionElement);
+                    });
+                }
+            }
+        });
+    }
+    if (engProjectSelect) {
+        engProjectSelect.addEventListener("change", () => {
+            currentState.engTicketProject = engProjectSelect.value;
+            // Update text color based on selection
+            engProjectSelect.style.color = engProjectSelect.value ? "" : "#9ca3af";
+            // Clear custom fields when project changes
+            currentState.engTicketCustomFields = {};
+            // Update issue types when project changes
+            const integrationData = getIntegrationData();
+            if (integrationData && engTypeSelect) {
+                updateIssueTypeOptions(engTypeSelect, engProjectSelect.value);
+                // Update state with the selected/default issue type
+                currentState.engTicketIssueType = engTypeSelect.value;
+            }
+            // Handle reporter field for Jira
+            if (integrationData &&
+                integrationData.provider?.toLowerCase() === "jira" &&
+                integrationData.jiraReporterAccountId &&
+                engProjectSelect.value) {
+                const fields = getFieldsForProject(engProjectSelect.value, currentState.engTicketIssueType);
+                const reporterField = fields.find((f) => f.fieldId === "reporter");
+                if (reporterField) {
+                    currentState.engTicketCustomFields["reporter"] =
+                        integrationData.jiraReporterAccountId;
+                }
+            }
+            // Render dynamic fields for the selected project and issue type
+            renderDynamicFields(engProjectSelect.value, currentState.engTicketIssueType);
+        });
+    }
+    if (engPrioritySelect) {
+        engPrioritySelect.addEventListener("change", () => {
+            currentState.engTicketPriority = Number(engPrioritySelect.value);
+        });
+    }
+    if (engLabelsContainer) {
+        // Set up event listeners for custom multiselect
+        setupCustomMultiSelectListeners("sf-eng-ticket-labels", (selectedValues) => {
+            currentState.engTicketLabels = selectedValues;
+        });
+    }
+    if (engTypeSelect) {
+        engTypeSelect.addEventListener("change", () => {
+            currentState.engTicketIssueType = engTypeSelect.value;
+            // Update text color based on selection
+            engTypeSelect.style.color = engTypeSelect.value ? "" : "#9ca3af";
+            // Re-render dynamic fields when issue type changes
+            const engProjectSelect = document.getElementById("sf-eng-ticket-project");
+            if (engProjectSelect && engProjectSelect.value) {
+                // Clear custom fields except reporter
+                const reporterValue = currentState.engTicketCustomFields["reporter"];
+                currentState.engTicketCustomFields = {};
+                if (reporterValue) {
+                    currentState.engTicketCustomFields["reporter"] = reporterValue;
+                }
+                renderDynamicFields(engProjectSelect.value, engTypeSelect.value);
+            }
+        });
+    }
+    // Dynamic fields event delegation
+    const dynamicFieldsContainer = document.getElementById("sf-dynamic-fields-container");
+    if (dynamicFieldsContainer) {
+        dynamicFieldsContainer.addEventListener("input", (e) => {
+            const target = e.target;
+            if (target.classList.contains("sf-dynamic-field")) {
+                const fieldId = target.dataset.fieldId;
+                if (fieldId) {
+                    // Handle different input types
+                    if (target.type === "checkbox") {
+                        currentState.engTicketCustomFields[fieldId] = target.checked;
+                    }
+                    else if (target.type === "number") {
+                        currentState.engTicketCustomFields[fieldId] =
+                            parseFloat(target.value) || null;
+                    }
+                    else {
+                        currentState.engTicketCustomFields[fieldId] = target.value;
+                    }
+                }
+            }
+        });
+        dynamicFieldsContainer.addEventListener("change", (e) => {
+            const target = e.target;
+            if (target.classList.contains("sf-dynamic-field")) {
+                const fieldId = target.dataset.fieldId;
+                if (fieldId) {
+                    currentState.engTicketCustomFields[fieldId] = target.value;
+                }
+                // Update text color for select elements (to remove placeholder gray)
+                if (target.tagName === "SELECT") {
+                    const selectElement = target;
+                    selectElement.style.color = selectElement.value ? "" : "#9ca3af";
+                }
+            }
+        });
+    }
     // Start recording
     if (recordBtn) {
         recordBtn.onclick = () => {
@@ -635,6 +1131,11 @@ function bindListeners() {
                 ?.value || "";
             const mode = currentState.mode;
             currentState.description = desc;
+            // Validate issue name if creating an issue
+            if (currentState.createIssue && !currentState.issueName.trim()) {
+                alert("Issue title is required when creating an issue.");
+                return;
+            }
             let startTimestamp;
             let endTimestamp;
             if (mode === "startnow") {
@@ -647,8 +1148,55 @@ function bindListeners() {
                 endTimestamp = Date.now();
                 startTimestamp = endTimestamp - delta;
             }
-            closeModal();
-            createTriage(`${startTimestamp}`, `${endTimestamp}`, desc);
+            // Read values from DOM inputs BEFORE closing modal (so elements still exist)
+            if (currentState.createIssue) {
+                const issueNameInput = document.getElementById("sf-issue-name");
+                const engTeamSelect = document.getElementById("sf-eng-ticket-team");
+                const engProjectSelect = document.getElementById("sf-eng-ticket-project");
+                const engPrioritySelect = document.getElementById("sf-eng-ticket-priority");
+                const engTypeSelect = document.getElementById("sf-eng-ticket-type");
+                const issueName = issueNameInput?.value || "";
+                // Use the triage description for issue description
+                const issueDescription = desc;
+                const engTicketTeam = engTeamSelect?.value || "";
+                const engTicketProject = engProjectSelect?.value || "";
+                const engTicketPriority = engPrioritySelect
+                    ? Number(engPrioritySelect.value)
+                    : 0;
+                // Labels come from currentState since we update it in the event listener
+                const engTicketLabels = currentState.engTicketLabels;
+                const engTicketIssueType = engTypeSelect?.value || "";
+                // Read dynamic field values from DOM (non-multiselect fields)
+                const engTicketCustomFields = {
+                    ...currentState.engTicketCustomFields,
+                };
+                const dynamicFieldElements = document.querySelectorAll(".sf-dynamic-field");
+                dynamicFieldElements.forEach((element) => {
+                    const fieldElement = element;
+                    const fieldId = fieldElement.dataset.fieldId;
+                    if (fieldId) {
+                        if (fieldElement.type === "checkbox") {
+                            engTicketCustomFields[fieldId] = fieldElement.checked;
+                        }
+                        else if (fieldElement.type === "number") {
+                            engTicketCustomFields[fieldId] =
+                                parseFloat(fieldElement.value) || null;
+                        }
+                        else if (!fieldElement.classList.contains("sf-custom-multiselect")) {
+                            // Only read from DOM if it's not a custom multiselect (those are already in state)
+                            engTicketCustomFields[fieldId] = fieldElement.value;
+                        }
+                    }
+                });
+                closeModal();
+                // Create triage + issue (with optional engineering ticket)
+                createTriageAndIssue(`${startTimestamp}`, `${endTimestamp}`, desc, issueName, issueDescription, currentState.createEngTicket, engTicketTeam, engTicketProject, engTicketPriority, engTicketLabels, engTicketIssueType, engTicketCustomFields);
+            }
+            else {
+                closeModal();
+                // Create triage only
+                createTriage(`${startTimestamp}`, `${endTimestamp}`, desc);
+            }
         }
     });
 }
@@ -683,11 +1231,11 @@ function startCountdownThenRecord() {
             clearInterval(interval);
             document.body.removeChild(overlay);
             // Begin recording
-            recordingStartTime = Date.now();
-            isRecording = true;
+            setRecordingStartTime(Date.now());
+            setIsRecording(true);
             // Enable function span tracking for this recording session
             try {
-                const { enableFunctionSpanTracking } = await import("./websocket");
+                const { enableFunctionSpanTracking } = await import("../websocket");
                 enableFunctionSpanTracking();
             }
             catch (e) {
@@ -739,7 +1287,7 @@ function showFloatingTimer() {
     const timerEl = timer.querySelector("#sf-recording-timer");
     if (!timerEl)
         return;
-    timerInterval = setInterval(() => {
+    const interval = setInterval(() => {
         const delta = Date.now() - (recordingStartTime ?? Date.now());
         const mins = Math.floor(delta / 60000)
             .toString()
@@ -749,16 +1297,19 @@ function showFloatingTimer() {
             .padStart(2, "0");
         timerEl.textContent = `${mins}:${secs}`;
     }, 1000);
+    setTimerInterval(interval);
 }
 async function stopRecording() {
-    recordingEndTime = Date.now();
-    isRecording = false;
-    if (timerInterval)
+    setRecordingEndTime(Date.now());
+    setIsRecording(false);
+    if (timerInterval) {
         clearInterval(timerInterval);
+        setTimerInterval(null);
+    }
     document.getElementById("sf-recording-indicator")?.remove();
     // Disable function span tracking after recording stops
     try {
-        const { disableFunctionSpanTracking } = await import("./websocket");
+        const { disableFunctionSpanTracking } = await import("../websocket");
         disableFunctionSpanTracking();
     }
     catch (e) {
@@ -812,27 +1363,53 @@ function reopenModalAfterStop() {
 }
 async function createTriage(startTimestamp, endTimestamp, description) {
     try {
-        showTriageStatusModal(true);
+        showStatusModal(true);
         const response = await createTriageFromRecorder(ReportIssueContext.apiKey, ReportIssueContext.backendApi, getSessionIdSafely(), startTimestamp, endTimestamp, description);
         const triageId = response?.data?.createTriageFromRecorder?.id;
         if (triageId) {
-            showTriageStatusModal(false, triageId);
+            showStatusModal(false, { type: "triage", id: triageId });
         }
         else {
             console.error("No Triage ID returned from backend.");
-            showTriageStatusModal(false, null); // fallback behavior
+            showStatusModal(false, null);
         }
     }
     catch (error) {
         console.error("Error creating triage:", error);
-        showTriageStatusModal(false, null);
+        showStatusModal(false, null);
+    }
+}
+async function createTriageAndIssue(startTimestamp, endTimestamp, description, issueName, issueDescription, createEngTicket, engTicketTeam, engTicketProject, engTicketPriority, engTicketLabels, engTicketIssueType, engTicketCustomFields) {
+    try {
+        showStatusModal(true);
+        const response = await createTriageAndIssueFromRecorder(ReportIssueContext.apiKey, ReportIssueContext.backendApi, getSessionIdSafely(), startTimestamp, endTimestamp, description, issueName, issueDescription, createEngTicket, engTicketTeam, engTicketProject, engTicketPriority, engTicketLabels, engTicketIssueType, engTicketCustomFields);
+        const issueId = response?.data?.createTriageAndIssueFromRecorder?.id;
+        if (issueId) {
+            showStatusModal(false, { type: "issue", id: issueId });
+        }
+        else {
+            console.error("No Issue ID returned from backend.");
+            showStatusModal(false, null);
+        }
+    }
+    catch (error) {
+        console.error("Error creating triage and issue:", error);
+        showStatusModal(false, null);
     }
 }
-function showTriageStatusModal(isLoading, triageId) {
+function showStatusModal(isLoading, result) {
+    const triageId = result?.type === "triage" ? result.id : undefined;
+    const issueId = result?.type === "issue" ? result.id : undefined;
+    showTriageStatusModal(isLoading, triageId, issueId);
+}
+function showTriageStatusModal(isLoading, triageId, issueId) {
     removeExistingModals();
-    const triageUrl = triageId
-        ? `${ReportIssueContext.triageBaseUrl}/triage/${triageId}?from=inAppReportIssue`
-        : "";
+    // Prefer issue URL if available, otherwise use triage URL
+    const resultUrl = issueId
+        ? `${ReportIssueContext.triageBaseUrl}/issues/${issueId}?from=inAppReportIssue`
+        : triageId
+            ? `${ReportIssueContext.triageBaseUrl}/triage/${triageId}?from=inAppReportIssue`
+            : "";
     const container = document.createElement("div");
     container.id = "sf-triage-status-modal";
     Object.assign(container.style, {
@@ -924,7 +1501,7 @@ function showTriageStatusModal(isLoading, triageId) {
     else {
         copyBtn.disabled = false;
         copyBtn.addEventListener("click", () => {
-            navigator.clipboard.writeText(triageUrl).then(() => {
+            navigator.clipboard.writeText(resultUrl).then(() => {
                 const copiedStatus = document.getElementById("sf-copied-status");
                 if (copiedStatus)
                     copiedStatus.style.display = "flex";
@@ -932,8 +1509,8 @@ function showTriageStatusModal(isLoading, triageId) {
         });
         viewBtn.disabled = false;
         viewBtn.addEventListener("click", () => {
-            if (triageId) {
-                window.open(triageUrl, "_blank");
+            if (triageId || issueId) {
+                window.open(resultUrl, "_blank");
             }
         });
         // Auto-hide after success