lib-e2e-cypress-for-dummys-ts 0.6.0 → 0.8.0

package/dist/index.cjs

@@ -463,14 +463,20 @@ __export(index_exports, {
   ACTIVE_SESSION_BREADCRUMB_KEY: () => ACTIVE_SESSION_BREADCRUMB_KEY,
   AdvancedTestEditorElement: () => AdvancedTestEditorElement,
   AdvancedTestTransformationService: () => AdvancedTestTransformationService,
+  CHAIN_METHODS: () => CHAIN_METHODS,
+  CYPRESS_COMPLETIONS: () => CYPRESS_COMPLETIONS,
+  CY_METHODS: () => CY_METHODS,
   ConfigurationElement: () => ConfigurationElement,
   DB_SCHEMA: () => DB_SCHEMA,
   DB_STORE_NAMES: () => DB_STORE_NAMES,
+  DEFAULT_ISSUE_TRACKER_PROVIDER_ID: () => DEFAULT_ISSUE_TRACKER_PROVIDER_ID,
   DEFAULT_RESUME_TTL_MINUTES: () => DEFAULT_RESUME_TTL_MINUTES,
   DRAG_THRESHOLD: () => DRAG_THRESHOLD,
   FilePreviewElement: () => FilePreviewElement,
+  HelpPanelElement: () => HelpPanelElement,
   HttpMonitor: () => HttpMonitor,
   INPUT_TYPES: () => INPUT_TYPES,
+  ISSUE_TRACKER_PROVIDERS: () => ISSUE_TRACKER_PROVIDERS,
   LIB_E2E_CYPRESS_FOR_DUMMYS_SWAL2_STYLES: () => LIB_E2E_CYPRESS_FOR_DUMMYS_SWAL2_STYLES,
   LOCALE_BY_LANG: () => LOCALE_BY_LANG,
   LibE2eRecorderElement: () => LibE2eRecorderElement,
@@ -483,6 +489,7 @@ __export(index_exports, {
   SelectorPickerElement: () => SelectorPickerElement,
   Subject: () => Subject,
   TOGGLE_MARGIN: () => TOGGLE_MARGIN,
+  TOP_LEVEL: () => TOP_LEVEL,
   TestEditorElement: () => TestEditorElement,
   TestPrevisualizerElement: () => TestPrevisualizerElement,
   TransformationService: () => TransformationService,
@@ -491,9 +498,16 @@ __export(index_exports, {
   advancedTestTransformationService: () => advancedTestTransformationService,
   boxOffsetForDirection: () => boxOffsetForDirection,
   boxTopLeftFor: () => boxTopLeftFor,
+  buildTicketComment: () => buildTicketComment,
+  buildTicketUrl: () => buildTicketUrl,
   clampTogglePosition: () => clampTogglePosition,
+  createCodeEditor: () => createCodeEditor,
   defaultTogglePosition: () => defaultTogglePosition,
+  filterCompletions: () => filterCompletions,
+  filterCypressCompletions: () => filterCypressCompletions,
+  findIssueTrackerProvider: () => findIssueTrackerProvider,
   generateAlias: () => generateAlias,
+  inferAssertionCommand: () => inferAssertionCommand,
   injectStyles: () => injectStyles,
   isLang: () => isLang,
   isLocalHost: () => isLocalHost,
@@ -503,6 +517,7 @@ __export(index_exports, {
   makeSwalDraggableByContentId: () => makeSwalDraggableByContentId,
   persistenceService: () => persistenceService,
   resolveExpandDirection: () => resolveExpandDirection,
+  resolveTicketUrl: () => resolveTicketUrl,
   selectTestsForExport: () => selectTestsForExport,
   setSwal2DataCyAttribute: () => setSwal2DataCyAttribute,
   showToast: () => showToast,
@@ -601,6 +616,64 @@ var ACTIVE_SESSION_BREADCRUMB_KEY = "e2e-active-session";
 var RESUME_TTL_CONFIG_KEY = "resumeRecencyTtlMinutes";
 var DEFAULT_RESUME_TTL_MINUTES = 30;
 
+// src/models/issue-tracker.model.ts
+var ISSUE_TRACKER_PROVIDERS = [
+  {
+    id: "jira",
+    labelKey: "CONFIG.ISSUE_TRACKER_PROVIDER_JIRA",
+    urlTemplate: "{baseUrl}/browse/{id}",
+    fields: [
+      { key: "baseUrl", labelKey: "CONFIG.ISSUE_TRACKER_FIELD_BASEURL", placeholderKey: "CONFIG.ISSUE_TRACKER_PH_JIRA_BASEURL" }
+    ],
+    idPattern: "^[A-Za-z][A-Za-z0-9_]+-\\d+$",
+    idPlaceholderKey: "SAVE_TEST.TICKET_PH_JIRA"
+  },
+  {
+    id: "azure-devops",
+    labelKey: "CONFIG.ISSUE_TRACKER_PROVIDER_AZURE",
+    urlTemplate: "https://dev.azure.com/{org}/{project}/_workitems/edit/{id}",
+    fields: [
+      { key: "org", labelKey: "CONFIG.ISSUE_TRACKER_FIELD_ORG", placeholderKey: "CONFIG.ISSUE_TRACKER_PH_AZURE_ORG" },
+      { key: "project", labelKey: "CONFIG.ISSUE_TRACKER_FIELD_PROJECT", placeholderKey: "CONFIG.ISSUE_TRACKER_PH_AZURE_PROJECT" }
+    ],
+    idPattern: "^\\d+$",
+    idPlaceholderKey: "SAVE_TEST.TICKET_PH_AZURE"
+  },
+  {
+    id: "github",
+    labelKey: "CONFIG.ISSUE_TRACKER_PROVIDER_GITHUB",
+    urlTemplate: "https://github.com/{owner}/{repo}/issues/{id}",
+    fields: [
+      { key: "owner", labelKey: "CONFIG.ISSUE_TRACKER_FIELD_OWNER", placeholderKey: "CONFIG.ISSUE_TRACKER_PH_GITHUB_OWNER" },
+      { key: "repo", labelKey: "CONFIG.ISSUE_TRACKER_FIELD_REPO", placeholderKey: "CONFIG.ISSUE_TRACKER_PH_GITHUB_REPO" }
+    ],
+    idPattern: "^\\d+$",
+    idPlaceholderKey: "SAVE_TEST.TICKET_PH_GITHUB"
+  },
+  {
+    id: "trello",
+    labelKey: "CONFIG.ISSUE_TRACKER_PROVIDER_TRELLO",
+    urlTemplate: "https://trello.com/c/{id}",
+    fields: [],
+    idPattern: "^[A-Za-z0-9]+$",
+    idPlaceholderKey: "SAVE_TEST.TICKET_PH_TRELLO"
+  },
+  {
+    id: "custom",
+    labelKey: "CONFIG.ISSUE_TRACKER_PROVIDER_CUSTOM",
+    urlTemplate: "{template}",
+    fields: [
+      { key: "template", labelKey: "CONFIG.ISSUE_TRACKER_FIELD_TEMPLATE", placeholderKey: "CONFIG.ISSUE_TRACKER_PH_CUSTOM_TEMPLATE" }
+    ],
+    idPattern: ".*",
+    idPlaceholderKey: "SAVE_TEST.TICKET_PH_CUSTOM"
+  }
+];
+var DEFAULT_ISSUE_TRACKER_PROVIDER_ID = "custom";
+function findIssueTrackerProvider(id) {
+  return ISSUE_TRACKER_PROVIDERS.find((p) => p.id === id);
+}
+
 // src/utils/subject.ts
 var Subject = class {
   _value;
@@ -645,7 +718,14 @@ var I18N_ES = {
     SAVE_AND_EDIT: "\u{1F4DD} Guardar y editar",
     REMOVE_TAG_TITLE: "Quitar",
     NOTES_LABEL: "Descripci\xF3n / Notas (opcional):",
-    NOTES_PLACEHOLDER: "Qu\xE9 valida este test, condiciones previas, etc."
+    NOTES_PLACEHOLDER: "Qu\xE9 valida este test, condiciones previas, etc.",
+    TICKET_LABEL: "Ticket (opcional):",
+    TICKET_PH_JIRA: "ej. PROJ-123",
+    TICKET_PH_AZURE: "ej. 1234",
+    TICKET_PH_GITHUB: "ej. 42",
+    TICKET_PH_TRELLO: "ej. aBc123",
+    TICKET_PH_CUSTOM: "id del ticket",
+    TICKET_INVALID: "El id del ticket no coincide con el formato esperado del gestor seleccionado."
   },
   TEST_EDITOR: {
     NO_TAGS: "Sin etiquetas",
@@ -659,7 +739,9 @@ var I18N_ES = {
     COPY_ICPS_BTN: "\u{1F4CB} Copiar interceptores",
     DEFAULT_DESCRIBE: "Suite de tests",
     NO_TESTS: "No hay tests guardados",
-    DELETE_TITLE: "Eliminar"
+    DELETE_TITLE: "Eliminar",
+    GROUP_BY_TICKET: "\u{1F3AB} Agrupar por ticket",
+    NO_TICKET_GROUP: "Sin ticket"
   },
   CONFIG: {
     LANG_SECTION: "\u{1F310} Idioma",
@@ -667,6 +749,9 @@ var I18N_ES = {
     HTTP_SECTION: "\u26A1 HTTP Avanzado",
     HTTP_TITLE: "Validaciones de body",
     HTTP_SUB: "GET \u2192 response \xB7 POST/PUT \u2192 request",
+    FIXTURE_SECTION: "\u{1F9EA} Fixtures HTTP",
+    FIXTURE_TITLE: "Grabar respuestas como fixtures",
+    FIXTURE_SUB: "Las GET se guardan en cypress/fixtures y se stubean con cy.intercept({ fixture }).",
     SELECTOR_SECTION: "\u{1F3AF} Estrategia de selector",
     SELECTOR_LABEL: "Atributo preferido para cy.get()",
     SELECTOR_OPT_DATACY: "data-cy (por defecto)",
@@ -714,7 +799,27 @@ var I18N_ES = {
     WIDGET_POSITION_SECTION: "\u{1F9F2} Posici\xF3n del widget",
     WIDGET_POSITION_HINT: "Arrastra el bot\xF3n de grabar para moverlo donde no estorbe. Se recuerda su posici\xF3n.",
     WIDGET_POSITION_RESET_BTN: "\u21BA Restablecer posici\xF3n",
-    WIDGET_POSITION_RESET_DONE: "\u2713 Posici\xF3n restablecida"
+    WIDGET_POSITION_RESET_DONE: "\u2713 Posici\xF3n restablecida",
+    ISSUE_TRACKER_SECTION: "\u{1F3AB} Gestor de incidencias",
+    ISSUE_TRACKER_LABEL: "Gestor (solo enlace, sin sincronizaci\xF3n)",
+    ISSUE_TRACKER_DISCLAIMER: "Solo genera enlaces \u2014 nunca se conecta ni sincroniza con la plataforma.",
+    ISSUE_TRACKER_PROVIDER_JIRA: "Jira",
+    ISSUE_TRACKER_PROVIDER_AZURE: "Azure DevOps",
+    ISSUE_TRACKER_PROVIDER_GITHUB: "GitHub",
+    ISSUE_TRACKER_PROVIDER_TRELLO: "Trello",
+    ISSUE_TRACKER_PROVIDER_CUSTOM: "Personalizado",
+    ISSUE_TRACKER_FIELD_BASEURL: "URL base",
+    ISSUE_TRACKER_FIELD_ORG: "Organizaci\xF3n",
+    ISSUE_TRACKER_FIELD_PROJECT: "Proyecto",
+    ISSUE_TRACKER_FIELD_OWNER: "Propietario",
+    ISSUE_TRACKER_FIELD_REPO: "Repositorio",
+    ISSUE_TRACKER_FIELD_TEMPLATE: "Plantilla de URL (debe contener {id})",
+    ISSUE_TRACKER_PH_JIRA_BASEURL: "https://tu-org.atlassian.net",
+    ISSUE_TRACKER_PH_AZURE_ORG: "organizaci\xF3n",
+    ISSUE_TRACKER_PH_AZURE_PROJECT: "proyecto",
+    ISSUE_TRACKER_PH_GITHUB_OWNER: "propietario",
+    ISSUE_TRACKER_PH_GITHUB_REPO: "repositorio",
+    ISSUE_TRACKER_PH_CUSTOM_TEMPLATE: "https://tracker.example.com/{id}"
   },
   SELECTOR_PICKER: {
     TITLE: "Selecciona un elemento del DOM",
@@ -803,6 +908,8 @@ var I18N_ES = {
     FILE_EDITOR_TITLE: "\u270F\uFE0F Editor de archivo",
     FILE_SAVED_TOAST: "\u2713 Archivo guardado",
     FILE_SAVE_ERROR_TOAST: "Error al guardar el archivo",
+    FIXTURES_WRITTEN_TOAST: "\u2713 Fixtures escritos en cypress/fixtures",
+    FIXTURES_NO_FOLDER_TOAST: "No se pudieron escribir los fixtures (configura la carpeta Cypress)",
     BTN_CONFIG: "Config",
     BTN_FILES: "Ficheros",
     BTN_COMMANDS: "Comandos",
@@ -817,7 +924,76 @@ var I18N_ES = {
     SESSION_RESUME_TEXT: "Hay una grabaci\xF3n activa sin terminar.",
     SESSION_RESUME_COUNT: "comandos capturados",
     SESSION_CONTINUE_BTN: "Continuar grabando",
-    SESSION_DISCARD_BTN: "Descartar"
+    SESSION_DISCARD_BTN: "Descartar",
+    BTN_HELP: "Ayuda"
+  },
+  HELP: {
+    TITLE: "\u2753 Ayuda \u2014 Gu\xEDa r\xE1pida",
+    INTRO: "Todo lo que puede hacer el grabador.",
+    SEC_RECORDING: "\u23FA Grabar",
+    RECORDING_1: "Pulsa \u23FA (o Ctrl+R) para empezar; \u23F9 para parar y guardar.",
+    RECORDING_2: "Pausa / reanuda con \u23F8 (o Ctrl+P).",
+    SEC_SHORTCUTS: "\u2328\uFE0F Atajos de teclado",
+    SC_RECORD: "Ctrl+R \u2014 Grabar / detener",
+    SC_PAUSE: "Ctrl+P \u2014 Pausar / reanudar",
+    SC_TESTS: "Ctrl+1 \u2014 Panel de tests guardados",
+    SC_COMMANDS: "Ctrl+2 \u2014 Panel de comandos",
+    SC_CONFIG: "Ctrl+3 \u2014 Configuraci\xF3n",
+    SC_VISIBILITY: "Ctrl+Shift+E \u2014 Mostrar / ocultar el widget",
+    SC_HELP: "Ctrl+Shift+H \u2014 Esta ayuda",
+    SEC_CAPTURED: "\u{1F3AF} Qu\xE9 se graba",
+    CAP_CLICK: "Click \u2192 .click()",
+    CAP_DBLCLICK: "Doble-click \u2192 .dblclick()",
+    CAP_RIGHTCLICK: "Click derecho \u2192 .rightclick()",
+    CAP_TYPE: "Escribir en un campo \u2192 .clear().type(...)",
+    CAP_CHECK: "Checkbox / radio \u2192 .check() / .uncheck()",
+    CAP_SELECT: "<select> \u2192 .select(...)",
+    CAP_KEYS: 'Enter / Escape \u2192 .type("{enter}") / ("{esc}")',
+    CAP_ROUTE: "Cambio de ruta (SPA) \u2192 cy.url().should(...)",
+    CAP_HTTP: "fetch / XHR \u2192 cy.intercept + cy.wait",
+    SEC_ASSERT: "\u2705 Aserciones",
+    ASSERT_1: "Alt+click sobre un elemento para verificarlo sin ejecutar su acci\xF3n (texto, valor, checked o visible).",
+    ASSERT_2: "O usa el constructor de aserciones en el panel de Comandos.",
+    SEC_PANELS: "\u{1F5C2} Paneles",
+    PANEL_TESTS: "\u{1F4CB} Tests \u2014 guardados: filtrar por tag, copiar, combinar, exportar.",
+    PANEL_COMMANDS: "\u2328\uFE0F Comandos \u2014 de la grabaci\xF3n actual: reordenar, borrar, a\xF1adir aserciones.",
+    PANEL_CONFIG: "\u2699\uFE0F Config \u2014 idioma, selector, HTTP, carpeta Cypress, datos, visibilidad, posici\xF3n.",
+    PANEL_FILES: "\u{1F4C1} Ficheros \u2014 inserta tests en tus .cy.ts y lanza el runner.",
+    SEC_SELECTOR: "\u{1F50E} Selectores",
+    SELECTOR_1: "Elige el atributo preferido (data-cy, data-testid, aria-label, id) en Config.",
+    SELECTOR_2: "Si un click no tiene selector fiable, aparece un picker para elegir el mejor ancestro.",
+    SEC_DATA: "\u{1F4BE} Datos",
+    DATA_1: "Exporta tests a JSON (todo / selecci\xF3n / por tags).",
+    DATA_2: "Importa un JSON: se fusiona con lo existente (no se borra nada).",
+    SEC_ADVANCED: "\u{1F680} Avanzado",
+    ADV_INVISIBLE: "Modo invisible: start-hidden + Ctrl+Shift+E para grabar en producci\xF3n sin molestar.",
+    ADV_RUNNER: "Runner local: npx lib-e2e-cypress-runner para lanzar un spec headless desde el editor.",
+    ADV_CROSSAPP: "Cross-app: la grabaci\xF3n sobrevive al cambiar de micro-frontend (mismo origen).",
+    ADV_DRAG: "Arrastra el bot\xF3n \u23FA para mover el widget; recuerda su posici\xF3n.",
+    CLOSE: "Cerrar",
+    TAB_REFERENCE: "Referencia r\xE1pida",
+    TAB_GUIDE: "Gu\xEDa de uso",
+    GUIDE_INTRO: "C\xF3mo sacarle partido al grabador, qu\xE9 cubre y qu\xE9 no.",
+    G_SEC_WORKFLOW: "\u{1F9ED} Flujo de trabajo",
+    G_WF_1: "1. Pulsa \u23FA (o Ctrl+R) para empezar a grabar.",
+    G_WF_2: "2. Usa tu app como un usuario: clicks, formularios, navegaci\xF3n. Cada acci\xF3n se convierte en un comando Cypress.",
+    G_WF_3: "3. A\xF1ade verificaciones con Alt+click sobre lo que quieras comprobar.",
+    G_WF_4: "4. Pulsa \u23F9 para parar; ponle nombre y tags, y gu\xE1rdalo.",
+    G_WF_5: "5. En \u{1F4C1} Ficheros, inserta el test en un .cy.ts o l\xE1nzalo con el runner local.",
+    G_SEC_COVERED: "\u2705 Qu\xE9 cubre",
+    G_COV_1: "Clicks, doble-click, click derecho, inputs de texto, checkbox/radio, select y teclas Enter/Escape.",
+    G_COV_2: "Navegaci\xF3n SPA (pushState/replaceState/popstate) \u2192 cy.url().should(...).",
+    G_COV_3: "Llamadas fetch/XHR (GET/POST/PUT) \u2192 cy.intercept + cy.wait, con validaci\xF3n de body opcional.",
+    G_COV_4: "Selector fiable (data-cy/testid/aria/id) y picker cuando no hay uno claro.",
+    G_COV_5: "Aserciones autom\xE1ticas (Alt+click) y constructor manual.",
+    G_COV_6: "Continuidad al cambiar de micro-frontend (mismo origen), modo invisible e i18n.",
+    G_SEC_NOTCOVERED: "\u{1F6AB} Qu\xE9 NO cubre (por ahora)",
+    G_NC_1: "Or\xEDgenes distintos / subdominios (solo mismo origen).",
+    G_NC_2: "Subida de ficheros (selectFile), arrastrar y soltar, y hover.",
+    G_NC_3: "La tecla Tab (Cypress no la soporta en .type()).",
+    G_NC_4: "Peticiones DELETE (se ignoran a prop\xF3sito).",
+    G_NC_5: "iframes y Shadow DOM de terceros pueden no capturarse.",
+    G_NC_6: "Generaci\xF3n de login program\xE1tico (en el roadmap)."
   }
 };
 
@@ -845,7 +1021,14 @@ var I18N_EN = {
     SAVE_AND_EDIT: "\u{1F4DD} Save and edit",
     REMOVE_TAG_TITLE: "Remove",
     NOTES_LABEL: "Description / Notes (optional):",
-    NOTES_PLACEHOLDER: "What this test validates, preconditions, etc."
+    NOTES_PLACEHOLDER: "What this test validates, preconditions, etc.",
+    TICKET_LABEL: "Ticket (optional):",
+    TICKET_PH_JIRA: "e.g. PROJ-123",
+    TICKET_PH_AZURE: "e.g. 1234",
+    TICKET_PH_GITHUB: "e.g. 42",
+    TICKET_PH_TRELLO: "e.g. aBc123",
+    TICKET_PH_CUSTOM: "ticket id",
+    TICKET_INVALID: "The ticket id does not match the expected format for the selected tracker."
   },
   TEST_EDITOR: {
     NO_TAGS: "No tags",
@@ -859,7 +1042,9 @@ var I18N_EN = {
     COPY_ICPS_BTN: "\u{1F4CB} Copy interceptors",
     DEFAULT_DESCRIBE: "Test suite",
     NO_TESTS: "No saved tests",
-    DELETE_TITLE: "Delete"
+    DELETE_TITLE: "Delete",
+    GROUP_BY_TICKET: "\u{1F3AB} Group by ticket",
+    NO_TICKET_GROUP: "No ticket"
   },
   CONFIG: {
     LANG_SECTION: "\u{1F310} Language",
@@ -867,6 +1052,9 @@ var I18N_EN = {
     HTTP_SECTION: "\u26A1 Advanced HTTP",
     HTTP_TITLE: "Body validations",
     HTTP_SUB: "GET \u2192 response \xB7 POST/PUT \u2192 request",
+    FIXTURE_SECTION: "\u{1F9EA} HTTP Fixtures",
+    FIXTURE_TITLE: "Record responses as fixtures",
+    FIXTURE_SUB: "GET responses are saved to cypress/fixtures and stubbed via cy.intercept({ fixture }).",
     SELECTOR_SECTION: "\u{1F3AF} Selector strategy",
     SELECTOR_LABEL: "Preferred attribute for cy.get()",
     SELECTOR_OPT_DATACY: "data-cy (default)",
@@ -914,7 +1102,27 @@ var I18N_EN = {
     WIDGET_POSITION_SECTION: "\u{1F9F2} Widget position",
     WIDGET_POSITION_HINT: "Drag the record button to move it out of the way. Its position is remembered.",
     WIDGET_POSITION_RESET_BTN: "\u21BA Reset position",
-    WIDGET_POSITION_RESET_DONE: "\u2713 Position reset"
+    WIDGET_POSITION_RESET_DONE: "\u2713 Position reset",
+    ISSUE_TRACKER_SECTION: "\u{1F3AB} Issue tracker",
+    ISSUE_TRACKER_LABEL: "Tracker (link only, no sync)",
+    ISSUE_TRACKER_DISCLAIMER: "Builds links only \u2014 it never connects to or syncs with the platform.",
+    ISSUE_TRACKER_PROVIDER_JIRA: "Jira",
+    ISSUE_TRACKER_PROVIDER_AZURE: "Azure DevOps",
+    ISSUE_TRACKER_PROVIDER_GITHUB: "GitHub",
+    ISSUE_TRACKER_PROVIDER_TRELLO: "Trello",
+    ISSUE_TRACKER_PROVIDER_CUSTOM: "Custom",
+    ISSUE_TRACKER_FIELD_BASEURL: "Base URL",
+    ISSUE_TRACKER_FIELD_ORG: "Organization",
+    ISSUE_TRACKER_FIELD_PROJECT: "Project",
+    ISSUE_TRACKER_FIELD_OWNER: "Owner",
+    ISSUE_TRACKER_FIELD_REPO: "Repository",
+    ISSUE_TRACKER_FIELD_TEMPLATE: "URL template (must contain {id})",
+    ISSUE_TRACKER_PH_JIRA_BASEURL: "https://your-org.atlassian.net",
+    ISSUE_TRACKER_PH_AZURE_ORG: "organization",
+    ISSUE_TRACKER_PH_AZURE_PROJECT: "project",
+    ISSUE_TRACKER_PH_GITHUB_OWNER: "owner",
+    ISSUE_TRACKER_PH_GITHUB_REPO: "repository",
+    ISSUE_TRACKER_PH_CUSTOM_TEMPLATE: "https://tracker.example.com/{id}"
   },
   SELECTOR_PICKER: {
     TITLE: "Select a DOM element",
@@ -1003,6 +1211,8 @@ var I18N_EN = {
     FILE_EDITOR_TITLE: "\u270F\uFE0F File editor",
     FILE_SAVED_TOAST: "\u2713 File saved",
     FILE_SAVE_ERROR_TOAST: "Error saving the file",
+    FIXTURES_WRITTEN_TOAST: "\u2713 Fixtures written to cypress/fixtures",
+    FIXTURES_NO_FOLDER_TOAST: "Could not write fixtures (configure the Cypress folder)",
     BTN_CONFIG: "Config",
     BTN_FILES: "Files",
     BTN_COMMANDS: "Commands",
@@ -1017,7 +1227,76 @@ var I18N_EN = {
     SESSION_RESUME_TEXT: "There is an unfinished active recording.",
     SESSION_RESUME_COUNT: "commands captured",
     SESSION_CONTINUE_BTN: "Keep recording",
-    SESSION_DISCARD_BTN: "Discard"
+    SESSION_DISCARD_BTN: "Discard",
+    BTN_HELP: "Help"
+  },
+  HELP: {
+    TITLE: "\u2753 Help \u2014 Quick guide",
+    INTRO: "Everything the recorder can do.",
+    SEC_RECORDING: "\u23FA Recording",
+    RECORDING_1: "Press \u23FA (or Ctrl+R) to start; \u23F9 to stop and save.",
+    RECORDING_2: "Pause / resume with \u23F8 (or Ctrl+P).",
+    SEC_SHORTCUTS: "\u2328\uFE0F Keyboard shortcuts",
+    SC_RECORD: "Ctrl+R \u2014 Record / stop",
+    SC_PAUSE: "Ctrl+P \u2014 Pause / resume",
+    SC_TESTS: "Ctrl+1 \u2014 Saved tests panel",
+    SC_COMMANDS: "Ctrl+2 \u2014 Commands panel",
+    SC_CONFIG: "Ctrl+3 \u2014 Settings",
+    SC_VISIBILITY: "Ctrl+Shift+E \u2014 Show / hide the widget",
+    SC_HELP: "Ctrl+Shift+H \u2014 This help",
+    SEC_CAPTURED: "\u{1F3AF} What gets recorded",
+    CAP_CLICK: "Click \u2192 .click()",
+    CAP_DBLCLICK: "Double-click \u2192 .dblclick()",
+    CAP_RIGHTCLICK: "Right-click \u2192 .rightclick()",
+    CAP_TYPE: "Type into a field \u2192 .clear().type(...)",
+    CAP_CHECK: "Checkbox / radio \u2192 .check() / .uncheck()",
+    CAP_SELECT: "<select> \u2192 .select(...)",
+    CAP_KEYS: 'Enter / Escape \u2192 .type("{enter}") / ("{esc}")',
+    CAP_ROUTE: "Route change (SPA) \u2192 cy.url().should(...)",
+    CAP_HTTP: "fetch / XHR \u2192 cy.intercept + cy.wait",
+    SEC_ASSERT: "\u2705 Assertions",
+    ASSERT_1: "Alt+click an element to verify it without running its action (text, value, checked or visible).",
+    ASSERT_2: "Or use the assertion builder in the Commands panel.",
+    SEC_PANELS: "\u{1F5C2} Panels",
+    PANEL_TESTS: "\u{1F4CB} Tests \u2014 saved tests: filter by tag, copy, combine, export.",
+    PANEL_COMMANDS: "\u2328\uFE0F Commands \u2014 current recording: reorder, delete, add assertions.",
+    PANEL_CONFIG: "\u2699\uFE0F Config \u2014 language, selector, HTTP, Cypress folder, data, visibility, position.",
+    PANEL_FILES: "\u{1F4C1} Files \u2014 insert tests into your .cy.ts and launch the runner.",
+    SEC_SELECTOR: "\u{1F50E} Selectors",
+    SELECTOR_1: "Choose the preferred attribute (data-cy, data-testid, aria-label, id) in Config.",
+    SELECTOR_2: "If a click has no reliable selector, a picker appears to choose the best ancestor.",
+    SEC_DATA: "\u{1F4BE} Data",
+    DATA_1: "Export tests to JSON (all / selection / by tags).",
+    DATA_2: "Import a JSON: it merges into your data (nothing is wiped).",
+    SEC_ADVANCED: "\u{1F680} Advanced",
+    ADV_INVISIBLE: "Invisible mode: start-hidden + Ctrl+Shift+E to record in production unobtrusively.",
+    ADV_RUNNER: "Local runner: npx lib-e2e-cypress-runner to run a spec headless from the editor.",
+    ADV_CROSSAPP: "Cross-app: the recording survives switching micro-frontend (same origin).",
+    ADV_DRAG: "Drag the \u23FA button to move the widget; its position is remembered.",
+    CLOSE: "Close",
+    TAB_REFERENCE: "Quick reference",
+    TAB_GUIDE: "Usage guide",
+    GUIDE_INTRO: "How to get the most out of the recorder, and what it does / doesn't cover.",
+    G_SEC_WORKFLOW: "\u{1F9ED} Workflow",
+    G_WF_1: "1. Press \u23FA (or Ctrl+R) to start recording.",
+    G_WF_2: "2. Use your app like a user: clicks, forms, navigation. Each action becomes a Cypress command.",
+    G_WF_3: "3. Add checks with Alt+click on whatever you want to verify.",
+    G_WF_4: "4. Press \u23F9 to stop; give it a name and tags, and save it.",
+    G_WF_5: "5. In \u{1F4C1} Files, insert the test into a .cy.ts or run it with the local runner.",
+    G_SEC_COVERED: "\u2705 What it covers",
+    G_COV_1: "Clicks, double-click, right-click, text inputs, checkbox/radio, select and Enter/Escape keys.",
+    G_COV_2: "SPA navigation (pushState/replaceState/popstate) \u2192 cy.url().should(...).",
+    G_COV_3: "fetch/XHR calls (GET/POST/PUT) \u2192 cy.intercept + cy.wait, with optional body validation.",
+    G_COV_4: "Reliable selector (data-cy/testid/aria/id) and a picker when none is obvious.",
+    G_COV_5: "Automatic assertions (Alt+click) and the manual builder.",
+    G_COV_6: "Continuity when switching micro-frontend (same origin), invisible mode and i18n.",
+    G_SEC_NOTCOVERED: "\u{1F6AB} What it does NOT cover (yet)",
+    G_NC_1: "Different origins / subdomains (same origin only).",
+    G_NC_2: "File upload (selectFile), drag & drop, and hover.",
+    G_NC_3: "The Tab key (Cypress can't .type() it).",
+    G_NC_4: "DELETE requests (intentionally ignored).",
+    G_NC_5: "Third-party iframes and Shadow DOM may not be captured.",
+    G_NC_6: "Programmatic login generation (on the roadmap)."
   }
 };
 
@@ -1045,7 +1324,14 @@ var I18N_FR = {
     SAVE_AND_EDIT: "\u{1F4DD} Enregistrer et \xE9diter",
     REMOVE_TAG_TITLE: "Retirer",
     NOTES_LABEL: "Description / Notes (optionnel) :",
-    NOTES_PLACEHOLDER: "Ce que ce test valide, conditions pr\xE9alables, etc."
+    NOTES_PLACEHOLDER: "Ce que ce test valide, conditions pr\xE9alables, etc.",
+    TICKET_LABEL: "Ticket (optionnel) :",
+    TICKET_PH_JIRA: "p. ex. PROJ-123",
+    TICKET_PH_AZURE: "p. ex. 1234",
+    TICKET_PH_GITHUB: "p. ex. 42",
+    TICKET_PH_TRELLO: "p. ex. aBc123",
+    TICKET_PH_CUSTOM: "id du ticket",
+    TICKET_INVALID: "L'id du ticket ne correspond pas au format attendu par le gestionnaire s\xE9lectionn\xE9."
   },
   TEST_EDITOR: {
     NO_TAGS: "Sans \xE9tiquettes",
@@ -1059,7 +1345,9 @@ var I18N_FR = {
     COPY_ICPS_BTN: "\u{1F4CB} Copier les intercepteurs",
     DEFAULT_DESCRIBE: "Suite de tests",
     NO_TESTS: "Aucun test enregistr\xE9",
-    DELETE_TITLE: "Supprimer"
+    DELETE_TITLE: "Supprimer",
+    GROUP_BY_TICKET: "\u{1F3AB} Grouper par ticket",
+    NO_TICKET_GROUP: "Sans ticket"
   },
   CONFIG: {
     LANG_SECTION: "\u{1F310} Langue",
@@ -1067,6 +1355,9 @@ var I18N_FR = {
     HTTP_SECTION: "\u26A1 HTTP Avanc\xE9",
     HTTP_TITLE: "Validations du corps",
     HTTP_SUB: "GET \u2192 r\xE9ponse \xB7 POST/PUT \u2192 requ\xEAte",
+    FIXTURE_SECTION: "\u{1F9EA} Fixtures HTTP",
+    FIXTURE_TITLE: "Enregistrer les r\xE9ponses comme fixtures",
+    FIXTURE_SUB: "Les GET sont enregistr\xE9es dans cypress/fixtures et stub\xE9es via cy.intercept({ fixture }).",
     SELECTOR_SECTION: "\u{1F3AF} Strat\xE9gie de s\xE9lecteur",
     SELECTOR_LABEL: "Attribut pr\xE9f\xE9r\xE9 pour cy.get()",
     SELECTOR_OPT_DATACY: "data-cy (par d\xE9faut)",
@@ -1114,7 +1405,27 @@ var I18N_FR = {
     WIDGET_POSITION_SECTION: "\u{1F9F2} Position du widget",
     WIDGET_POSITION_HINT: "Fais glisser le bouton d'enregistrement pour le d\xE9placer. Sa position est m\xE9moris\xE9e.",
     WIDGET_POSITION_RESET_BTN: "\u21BA R\xE9initialiser la position",
-    WIDGET_POSITION_RESET_DONE: "\u2713 Position r\xE9initialis\xE9e"
+    WIDGET_POSITION_RESET_DONE: "\u2713 Position r\xE9initialis\xE9e",
+    ISSUE_TRACKER_SECTION: "\u{1F3AB} Gestionnaire de tickets",
+    ISSUE_TRACKER_LABEL: "Gestionnaire (lien uniquement, sans synchronisation)",
+    ISSUE_TRACKER_DISCLAIMER: "G\xE9n\xE8re uniquement des liens \u2014 ne se connecte ni ne se synchronise jamais avec la plateforme.",
+    ISSUE_TRACKER_PROVIDER_JIRA: "Jira",
+    ISSUE_TRACKER_PROVIDER_AZURE: "Azure DevOps",
+    ISSUE_TRACKER_PROVIDER_GITHUB: "GitHub",
+    ISSUE_TRACKER_PROVIDER_TRELLO: "Trello",
+    ISSUE_TRACKER_PROVIDER_CUSTOM: "Personnalis\xE9",
+    ISSUE_TRACKER_FIELD_BASEURL: "URL de base",
+    ISSUE_TRACKER_FIELD_ORG: "Organisation",
+    ISSUE_TRACKER_FIELD_PROJECT: "Projet",
+    ISSUE_TRACKER_FIELD_OWNER: "Propri\xE9taire",
+    ISSUE_TRACKER_FIELD_REPO: "D\xE9p\xF4t",
+    ISSUE_TRACKER_FIELD_TEMPLATE: "Mod\xE8le d'URL (doit contenir {id})",
+    ISSUE_TRACKER_PH_JIRA_BASEURL: "https://votre-org.atlassian.net",
+    ISSUE_TRACKER_PH_AZURE_ORG: "organisation",
+    ISSUE_TRACKER_PH_AZURE_PROJECT: "projet",
+    ISSUE_TRACKER_PH_GITHUB_OWNER: "propri\xE9taire",
+    ISSUE_TRACKER_PH_GITHUB_REPO: "d\xE9p\xF4t",
+    ISSUE_TRACKER_PH_CUSTOM_TEMPLATE: "https://tracker.example.com/{id}"
   },
   SELECTOR_PICKER: {
     TITLE: "S\xE9lectionnez un \xE9l\xE9ment du DOM",
@@ -1203,6 +1514,8 @@ var I18N_FR = {
     FILE_EDITOR_TITLE: "\u270F\uFE0F \xC9diteur de fichier",
     FILE_SAVED_TOAST: "\u2713 Fichier enregistr\xE9",
     FILE_SAVE_ERROR_TOAST: "Erreur lors de l'enregistrement",
+    FIXTURES_WRITTEN_TOAST: "\u2713 Fixtures \xE9crites dans cypress/fixtures",
+    FIXTURES_NO_FOLDER_TOAST: "Impossible d'\xE9crire les fixtures (configure le dossier Cypress)",
     BTN_CONFIG: "Config",
     BTN_FILES: "Fichiers",
     BTN_COMMANDS: "Commandes",
@@ -1217,7 +1530,77 @@ var I18N_FR = {
     SESSION_RESUME_TEXT: "Un enregistrement actif est inachev\xE9.",
     SESSION_RESUME_COUNT: "commandes captur\xE9es",
     SESSION_CONTINUE_BTN: "Continuer l'enregistrement",
-    SESSION_DISCARD_BTN: "Ignorer"
+    SESSION_DISCARD_BTN: "Ignorer",
+    BTN_HELP: "Aide"
+  },
+  HELP: {
+    TITLE: "\u2753 Aide \u2014 Guide rapide",
+    INTRO: "Tout ce que l'enregistreur sait faire.",
+    SEC_RECORDING: "\u23FA Enregistrer",
+    RECORDING_1: "Appuie sur \u23FA (ou Ctrl+R) pour commencer ; \u23F9 pour arr\xEAter et enregistrer.",
+    RECORDING_2: "Pause / reprise avec \u23F8 (ou Ctrl+P).",
+    SEC_SHORTCUTS: "\u2328\uFE0F Raccourcis clavier",
+    SC_RECORD: "Ctrl+R \u2014 Enregistrer / arr\xEAter",
+    SC_PAUSE: "Ctrl+P \u2014 Pause / reprise",
+    SC_TESTS: "Ctrl+1 \u2014 Panneau des tests enregistr\xE9s",
+    SC_COMMANDS: "Ctrl+2 \u2014 Panneau des commandes",
+    SC_CONFIG: "Ctrl+3 \u2014 Param\xE8tres",
+    SC_VISIBILITY: "Ctrl+Shift+E \u2014 Afficher / masquer le widget",
+    SC_HELP: "Ctrl+Shift+H \u2014 Cette aide",
+    SEC_CAPTURED: "\u{1F3AF} Ce qui est enregistr\xE9",
+    CAP_CLICK: "Clic \u2192 .click()",
+    CAP_DBLCLICK: "Double-clic \u2192 .dblclick()",
+    CAP_RIGHTCLICK: "Clic droit \u2192 .rightclick()",
+    CAP_TYPE: "Saisie dans un champ \u2192 .clear().type(...)",
+    CAP_CHECK: "Case \xE0 cocher / radio \u2192 .check() / .uncheck()",
+    CAP_SELECT: "<select> \u2192 .select(...)",
+    CAP_KEYS: 'Entr\xE9e / \xC9chap \u2192 .type("{enter}") / ("{esc}")',
+    CAP_ROUTE: "Changement de route (SPA) \u2192 cy.url().should(...)",
+    CAP_HTTP: "fetch / XHR \u2192 cy.intercept + cy.wait",
+    SEC_ASSERT: "\u2705 Assertions",
+    ASSERT_1: "Alt+clic sur un \xE9l\xE9ment pour le v\xE9rifier sans ex\xE9cuter son action (texte, valeur, coch\xE9 ou visible).",
+    ASSERT_2: "Ou utilise le constructeur d'assertions dans le panneau Commandes.",
+    SEC_PANELS: "\u{1F5C2} Panneaux",
+    PANEL_TESTS: "\u{1F4CB} Tests \u2014 enregistr\xE9s : filtrer par tag, copier, combiner, exporter.",
+    PANEL_COMMANDS: "\u2328\uFE0F Commandes \u2014 enregistrement en cours : r\xE9ordonner, supprimer, ajouter des assertions.",
+    PANEL_CONFIG: "\u2699\uFE0F Config \u2014 langue, s\xE9lecteur, HTTP, dossier Cypress, donn\xE9es, visibilit\xE9, position.",
+    PANEL_FILES: "\u{1F4C1} Fichiers \u2014 ins\xE8re des tests dans tes .cy.ts et lance le runner.",
+    SEC_SELECTOR: "\u{1F50E} S\xE9lecteurs",
+    SELECTOR_1: "Choisis l'attribut pr\xE9f\xE9r\xE9 (data-cy, data-testid, aria-label, id) dans Config.",
+    SELECTOR_2: "Si un clic n'a pas de s\xE9lecteur fiable, un s\xE9lecteur appara\xEEt pour choisir le meilleur anc\xEAtre.",
+    SEC_DATA: "\u{1F4BE} Donn\xE9es",
+    DATA_1: "Exporte les tests en JSON (tout / s\xE9lection / par tags).",
+    DATA_2: "Importe un JSON : il fusionne avec tes donn\xE9es (rien n'est effac\xE9).",
+    SEC_ADVANCED: "\u{1F680} Avanc\xE9",
+    ADV_INVISIBLE: "Mode invisible : start-hidden + Ctrl+Shift+E pour enregistrer en production discr\xE8tement.",
+    ADV_RUNNER: "Runner local : npx lib-e2e-cypress-runner pour lancer un spec headless depuis l'\xE9diteur.",
+    ADV_CROSSAPP: "Cross-app : l'enregistrement survit au changement de micro-frontend (m\xEAme origine).",
+    ADV_DRAG: "Fais glisser le bouton \u23FA pour d\xE9placer le widget ; sa position est m\xE9moris\xE9e.",
+    CLOSE: "Fermer",
+    TAB_REFERENCE: "R\xE9f\xE9rence rapide",
+    TAB_GUIDE: "Guide d'utilisation",
+    // TODO: translate (fr) — usage guide body kept in Spanish for now.
+    GUIDE_INTRO: "C\xF3mo sacarle partido al grabador, qu\xE9 cubre y qu\xE9 no.",
+    G_SEC_WORKFLOW: "\u{1F9ED} Flujo de trabajo",
+    G_WF_1: "1. Pulsa \u23FA (o Ctrl+R) para empezar a grabar.",
+    G_WF_2: "2. Usa tu app como un usuario: clicks, formularios, navegaci\xF3n. Cada acci\xF3n se convierte en un comando Cypress.",
+    G_WF_3: "3. A\xF1ade verificaciones con Alt+click sobre lo que quieras comprobar.",
+    G_WF_4: "4. Pulsa \u23F9 para parar; ponle nombre y tags, y gu\xE1rdalo.",
+    G_WF_5: "5. En \u{1F4C1} Ficheros, inserta el test en un .cy.ts o l\xE1nzalo con el runner local.",
+    G_SEC_COVERED: "\u2705 Qu\xE9 cubre",
+    G_COV_1: "Clicks, doble-click, click derecho, inputs de texto, checkbox/radio, select y teclas Enter/Escape.",
+    G_COV_2: "Navegaci\xF3n SPA (pushState/replaceState/popstate) \u2192 cy.url().should(...).",
+    G_COV_3: "Llamadas fetch/XHR (GET/POST/PUT) \u2192 cy.intercept + cy.wait, con validaci\xF3n de body opcional.",
+    G_COV_4: "Selector fiable (data-cy/testid/aria/id) y picker cuando no hay uno claro.",
+    G_COV_5: "Aserciones autom\xE1ticas (Alt+click) y constructor manual.",
+    G_COV_6: "Continuidad al cambiar de micro-frontend (mismo origen), modo invisible e i18n.",
+    G_SEC_NOTCOVERED: "\u{1F6AB} Qu\xE9 NO cubre (por ahora)",
+    G_NC_1: "Or\xEDgenes distintos / subdominios (solo mismo origen).",
+    G_NC_2: "Subida de ficheros (selectFile), arrastrar y soltar, y hover.",
+    G_NC_3: "La tecla Tab (Cypress no la soporta en .type()).",
+    G_NC_4: "Peticiones DELETE (se ignoran a prop\xF3sito).",
+    G_NC_5: "iframes y Shadow DOM de terceros pueden no capturarse.",
+    G_NC_6: "Generaci\xF3n de login program\xE1tico (en el roadmap)."
   }
 };
 
@@ -1245,7 +1628,14 @@ var I18N_IT = {
     SAVE_AND_EDIT: "\u{1F4DD} Salva e modifica",
     REMOVE_TAG_TITLE: "Rimuovi",
     NOTES_LABEL: "Descrizione / Note (opzionale):",
-    NOTES_PLACEHOLDER: "Cosa valida questo test, condizioni preliminari, ecc."
+    NOTES_PLACEHOLDER: "Cosa valida questo test, condizioni preliminari, ecc.",
+    TICKET_LABEL: "Ticket (opzionale):",
+    TICKET_PH_JIRA: "es. PROJ-123",
+    TICKET_PH_AZURE: "es. 1234",
+    TICKET_PH_GITHUB: "es. 42",
+    TICKET_PH_TRELLO: "es. aBc123",
+    TICKET_PH_CUSTOM: "id del ticket",
+    TICKET_INVALID: "L'id del ticket non corrisponde al formato previsto dal gestore selezionato."
   },
   TEST_EDITOR: {
     NO_TAGS: "Nessuna etichetta",
@@ -1259,7 +1649,9 @@ var I18N_IT = {
     COPY_ICPS_BTN: "\u{1F4CB} Copia interceptor",
     DEFAULT_DESCRIBE: "Suite di test",
     NO_TESTS: "Nessun test salvato",
-    DELETE_TITLE: "Elimina"
+    DELETE_TITLE: "Elimina",
+    GROUP_BY_TICKET: "\u{1F3AB} Raggruppa per ticket",
+    NO_TICKET_GROUP: "Senza ticket"
   },
   CONFIG: {
     LANG_SECTION: "\u{1F310} Lingua",
@@ -1267,6 +1659,9 @@ var I18N_IT = {
     HTTP_SECTION: "\u26A1 HTTP Avanzato",
     HTTP_TITLE: "Validazioni del body",
     HTTP_SUB: "GET \u2192 risposta \xB7 POST/PUT \u2192 richiesta",
+    FIXTURE_SECTION: "\u{1F9EA} Fixture HTTP",
+    FIXTURE_TITLE: "Registra le risposte come fixture",
+    FIXTURE_SUB: "Le GET vengono salvate in cypress/fixtures e stubbate con cy.intercept({ fixture }).",
     SELECTOR_SECTION: "\u{1F3AF} Strategia selettore",
     SELECTOR_LABEL: "Attributo preferito per cy.get()",
     SELECTOR_OPT_DATACY: "data-cy (predefinito)",
@@ -1314,7 +1709,27 @@ var I18N_IT = {
     WIDGET_POSITION_SECTION: "\u{1F9F2} Posizione del widget",
     WIDGET_POSITION_HINT: "Trascina il pulsante di registrazione per spostarlo. La posizione viene ricordata.",
     WIDGET_POSITION_RESET_BTN: "\u21BA Reimposta posizione",
-    WIDGET_POSITION_RESET_DONE: "\u2713 Posizione reimpostata"
+    WIDGET_POSITION_RESET_DONE: "\u2713 Posizione reimpostata",
+    ISSUE_TRACKER_SECTION: "\u{1F3AB} Gestore ticket",
+    ISSUE_TRACKER_LABEL: "Gestore (solo link, senza sincronizzazione)",
+    ISSUE_TRACKER_DISCLAIMER: "Genera solo link \u2014 non si connette n\xE9 si sincronizza mai con la piattaforma.",
+    ISSUE_TRACKER_PROVIDER_JIRA: "Jira",
+    ISSUE_TRACKER_PROVIDER_AZURE: "Azure DevOps",
+    ISSUE_TRACKER_PROVIDER_GITHUB: "GitHub",
+    ISSUE_TRACKER_PROVIDER_TRELLO: "Trello",
+    ISSUE_TRACKER_PROVIDER_CUSTOM: "Personalizzato",
+    ISSUE_TRACKER_FIELD_BASEURL: "URL di base",
+    ISSUE_TRACKER_FIELD_ORG: "Organizzazione",
+    ISSUE_TRACKER_FIELD_PROJECT: "Progetto",
+    ISSUE_TRACKER_FIELD_OWNER: "Proprietario",
+    ISSUE_TRACKER_FIELD_REPO: "Repository",
+    ISSUE_TRACKER_FIELD_TEMPLATE: "Modello di URL (deve contenere {id})",
+    ISSUE_TRACKER_PH_JIRA_BASEURL: "https://tua-org.atlassian.net",
+    ISSUE_TRACKER_PH_AZURE_ORG: "organizzazione",
+    ISSUE_TRACKER_PH_AZURE_PROJECT: "progetto",
+    ISSUE_TRACKER_PH_GITHUB_OWNER: "proprietario",
+    ISSUE_TRACKER_PH_GITHUB_REPO: "repository",
+    ISSUE_TRACKER_PH_CUSTOM_TEMPLATE: "https://tracker.example.com/{id}"
   },
   SELECTOR_PICKER: {
     TITLE: "Seleziona un elemento DOM",
@@ -1403,6 +1818,8 @@ var I18N_IT = {
     FILE_EDITOR_TITLE: "\u270F\uFE0F Editor di file",
     FILE_SAVED_TOAST: "\u2713 File salvato",
     FILE_SAVE_ERROR_TOAST: "Errore durante il salvataggio",
+    FIXTURES_WRITTEN_TOAST: "\u2713 Fixture scritte in cypress/fixtures",
+    FIXTURES_NO_FOLDER_TOAST: "Impossibile scrivere le fixture (configura la cartella Cypress)",
     BTN_CONFIG: "Config",
     BTN_FILES: "File",
     BTN_COMMANDS: "Comandi",
@@ -1417,7 +1834,77 @@ var I18N_IT = {
     SESSION_RESUME_TEXT: "C'\xE8 una registrazione attiva non terminata.",
     SESSION_RESUME_COUNT: "comandi catturati",
     SESSION_CONTINUE_BTN: "Continua a registrare",
-    SESSION_DISCARD_BTN: "Annulla"
+    SESSION_DISCARD_BTN: "Annulla",
+    BTN_HELP: "Aiuto"
+  },
+  HELP: {
+    TITLE: "\u2753 Aiuto \u2014 Guida rapida",
+    INTRO: "Tutto ci\xF2 che il registratore sa fare.",
+    SEC_RECORDING: "\u23FA Registrare",
+    RECORDING_1: "Premi \u23FA (o Ctrl+R) per iniziare; \u23F9 per fermare e salvare.",
+    RECORDING_2: "Pausa / ripresa con \u23F8 (o Ctrl+P).",
+    SEC_SHORTCUTS: "\u2328\uFE0F Scorciatoie da tastiera",
+    SC_RECORD: "Ctrl+R \u2014 Registra / ferma",
+    SC_PAUSE: "Ctrl+P \u2014 Pausa / ripresa",
+    SC_TESTS: "Ctrl+1 \u2014 Pannello test salvati",
+    SC_COMMANDS: "Ctrl+2 \u2014 Pannello comandi",
+    SC_CONFIG: "Ctrl+3 \u2014 Impostazioni",
+    SC_VISIBILITY: "Ctrl+Shift+E \u2014 Mostra / nascondi il widget",
+    SC_HELP: "Ctrl+Shift+H \u2014 Questo aiuto",
+    SEC_CAPTURED: "\u{1F3AF} Cosa viene registrato",
+    CAP_CLICK: "Click \u2192 .click()",
+    CAP_DBLCLICK: "Doppio click \u2192 .dblclick()",
+    CAP_RIGHTCLICK: "Click destro \u2192 .rightclick()",
+    CAP_TYPE: "Digitare in un campo \u2192 .clear().type(...)",
+    CAP_CHECK: "Checkbox / radio \u2192 .check() / .uncheck()",
+    CAP_SELECT: "<select> \u2192 .select(...)",
+    CAP_KEYS: 'Invio / Esc \u2192 .type("{enter}") / ("{esc}")',
+    CAP_ROUTE: "Cambio di rotta (SPA) \u2192 cy.url().should(...)",
+    CAP_HTTP: "fetch / XHR \u2192 cy.intercept + cy.wait",
+    SEC_ASSERT: "\u2705 Asserzioni",
+    ASSERT_1: "Alt+click su un elemento per verificarlo senza eseguire la sua azione (testo, valore, checked o visibile).",
+    ASSERT_2: "Oppure usa il costruttore di asserzioni nel pannello Comandi.",
+    SEC_PANELS: "\u{1F5C2} Pannelli",
+    PANEL_TESTS: "\u{1F4CB} Test \u2014 salvati: filtra per tag, copia, combina, esporta.",
+    PANEL_COMMANDS: "\u2328\uFE0F Comandi \u2014 registrazione corrente: riordina, elimina, aggiungi asserzioni.",
+    PANEL_CONFIG: "\u2699\uFE0F Config \u2014 lingua, selettore, HTTP, cartella Cypress, dati, visibilit\xE0, posizione.",
+    PANEL_FILES: "\u{1F4C1} File \u2014 inserisci test nei tuoi .cy.ts e avvia il runner.",
+    SEC_SELECTOR: "\u{1F50E} Selettori",
+    SELECTOR_1: "Scegli l'attributo preferito (data-cy, data-testid, aria-label, id) in Config.",
+    SELECTOR_2: "Se un click non ha un selettore affidabile, appare un picker per scegliere l'antenato migliore.",
+    SEC_DATA: "\u{1F4BE} Dati",
+    DATA_1: "Esporta i test in JSON (tutto / selezione / per tag).",
+    DATA_2: "Importa un JSON: si fonde con i tuoi dati (non si cancella nulla).",
+    SEC_ADVANCED: "\u{1F680} Avanzato",
+    ADV_INVISIBLE: "Modalit\xE0 invisibile: start-hidden + Ctrl+Shift+E per registrare in produzione senza disturbare.",
+    ADV_RUNNER: "Runner locale: npx lib-e2e-cypress-runner per eseguire uno spec headless dall'editor.",
+    ADV_CROSSAPP: "Cross-app: la registrazione sopravvive al cambio di micro-frontend (stessa origine).",
+    ADV_DRAG: "Trascina il pulsante \u23FA per spostare il widget; la posizione viene ricordata.",
+    CLOSE: "Chiudi",
+    TAB_REFERENCE: "Riferimento rapido",
+    TAB_GUIDE: "Guida all'uso",
+    // TODO: translate (it) — usage guide body kept in Spanish for now.
+    GUIDE_INTRO: "C\xF3mo sacarle partido al grabador, qu\xE9 cubre y qu\xE9 no.",
+    G_SEC_WORKFLOW: "\u{1F9ED} Flujo de trabajo",
+    G_WF_1: "1. Pulsa \u23FA (o Ctrl+R) para empezar a grabar.",
+    G_WF_2: "2. Usa tu app como un usuario: clicks, formularios, navegaci\xF3n. Cada acci\xF3n se convierte en un comando Cypress.",
+    G_WF_3: "3. A\xF1ade verificaciones con Alt+click sobre lo que quieras comprobar.",
+    G_WF_4: "4. Pulsa \u23F9 para parar; ponle nombre y tags, y gu\xE1rdalo.",
+    G_WF_5: "5. En \u{1F4C1} Ficheros, inserta el test en un .cy.ts o l\xE1nzalo con el runner local.",
+    G_SEC_COVERED: "\u2705 Qu\xE9 cubre",
+    G_COV_1: "Clicks, doble-click, click derecho, inputs de texto, checkbox/radio, select y teclas Enter/Escape.",
+    G_COV_2: "Navegaci\xF3n SPA (pushState/replaceState/popstate) \u2192 cy.url().should(...).",
+    G_COV_3: "Llamadas fetch/XHR (GET/POST/PUT) \u2192 cy.intercept + cy.wait, con validaci\xF3n de body opcional.",
+    G_COV_4: "Selector fiable (data-cy/testid/aria/id) y picker cuando no hay uno claro.",
+    G_COV_5: "Aserciones autom\xE1ticas (Alt+click) y constructor manual.",
+    G_COV_6: "Continuidad al cambiar de micro-frontend (mismo origen), modo invisible e i18n.",
+    G_SEC_NOTCOVERED: "\u{1F6AB} Qu\xE9 NO cubre (por ahora)",
+    G_NC_1: "Or\xEDgenes distintos / subdominios (solo mismo origen).",
+    G_NC_2: "Subida de ficheros (selectFile), arrastrar y soltar, y hover.",
+    G_NC_3: "La tecla Tab (Cypress no la soporta en .type()).",
+    G_NC_4: "Peticiones DELETE (se ignoran a prop\xF3sito).",
+    G_NC_5: "iframes y Shadow DOM de terceros pueden no capturarse.",
+    G_NC_6: "Generaci\xF3n de login program\xE1tico (en el roadmap)."
   }
 };
 
@@ -1445,7 +1932,14 @@ var I18N_DE = {
     SAVE_AND_EDIT: "\u{1F4DD} Speichern und bearbeiten",
     REMOVE_TAG_TITLE: "Entfernen",
     NOTES_LABEL: "Beschreibung / Notizen (optional):",
-    NOTES_PLACEHOLDER: "Was dieser Test validiert, Voraussetzungen usw."
+    NOTES_PLACEHOLDER: "Was dieser Test validiert, Voraussetzungen usw.",
+    TICKET_LABEL: "Ticket (optional):",
+    TICKET_PH_JIRA: "z. B. PROJ-123",
+    TICKET_PH_AZURE: "z. B. 1234",
+    TICKET_PH_GITHUB: "z. B. 42",
+    TICKET_PH_TRELLO: "z. B. aBc123",
+    TICKET_PH_CUSTOM: "Ticket-ID",
+    TICKET_INVALID: "Die Ticket-ID entspricht nicht dem erwarteten Format des ausgew\xE4hlten Trackers."
   },
   TEST_EDITOR: {
     NO_TAGS: "Keine Tags",
@@ -1459,7 +1953,9 @@ var I18N_DE = {
     COPY_ICPS_BTN: "\u{1F4CB} Interceptors kopieren",
     DEFAULT_DESCRIBE: "Test-Suite",
     NO_TESTS: "Keine gespeicherten Tests",
-    DELETE_TITLE: "L\xF6schen"
+    DELETE_TITLE: "L\xF6schen",
+    GROUP_BY_TICKET: "\u{1F3AB} Nach Ticket gruppieren",
+    NO_TICKET_GROUP: "Kein Ticket"
   },
   CONFIG: {
     LANG_SECTION: "\u{1F310} Sprache",
@@ -1467,6 +1963,9 @@ var I18N_DE = {
     HTTP_SECTION: "\u26A1 Erweitertes HTTP",
     HTTP_TITLE: "Body-Validierungen",
     HTTP_SUB: "GET \u2192 Antwort \xB7 POST/PUT \u2192 Anfrage",
+    FIXTURE_SECTION: "\u{1F9EA} HTTP-Fixtures",
+    FIXTURE_TITLE: "Antworten als Fixtures aufzeichnen",
+    FIXTURE_SUB: "GET-Antworten werden in cypress/fixtures gespeichert und mit cy.intercept({ fixture }) gestubbt.",
     SELECTOR_SECTION: "\u{1F3AF} Selector-Strategie",
     SELECTOR_LABEL: "Bevorzugtes Attribut f\xFCr cy.get()",
     SELECTOR_OPT_DATACY: "data-cy (Standard)",
@@ -1514,7 +2013,27 @@ var I18N_DE = {
     WIDGET_POSITION_SECTION: "\u{1F9F2} Widget-Position",
     WIDGET_POSITION_HINT: "Ziehe den Aufnahme-Button, um ihn aus dem Weg zu schieben. Die Position wird gespeichert.",
     WIDGET_POSITION_RESET_BTN: "\u21BA Position zur\xFCcksetzen",
-    WIDGET_POSITION_RESET_DONE: "\u2713 Position zur\xFCckgesetzt"
+    WIDGET_POSITION_RESET_DONE: "\u2713 Position zur\xFCckgesetzt",
+    ISSUE_TRACKER_SECTION: "\u{1F3AB} Issue-Tracker",
+    ISSUE_TRACKER_LABEL: "Tracker (nur Link, keine Synchronisierung)",
+    ISSUE_TRACKER_DISCLAIMER: "Erstellt nur Links \u2014 verbindet oder synchronisiert sich nie mit der Plattform.",
+    ISSUE_TRACKER_PROVIDER_JIRA: "Jira",
+    ISSUE_TRACKER_PROVIDER_AZURE: "Azure DevOps",
+    ISSUE_TRACKER_PROVIDER_GITHUB: "GitHub",
+    ISSUE_TRACKER_PROVIDER_TRELLO: "Trello",
+    ISSUE_TRACKER_PROVIDER_CUSTOM: "Benutzerdefiniert",
+    ISSUE_TRACKER_FIELD_BASEURL: "Basis-URL",
+    ISSUE_TRACKER_FIELD_ORG: "Organisation",
+    ISSUE_TRACKER_FIELD_PROJECT: "Projekt",
+    ISSUE_TRACKER_FIELD_OWNER: "Eigent\xFCmer",
+    ISSUE_TRACKER_FIELD_REPO: "Repository",
+    ISSUE_TRACKER_FIELD_TEMPLATE: "URL-Vorlage (muss {id} enthalten)",
+    ISSUE_TRACKER_PH_JIRA_BASEURL: "https://ihre-org.atlassian.net",
+    ISSUE_TRACKER_PH_AZURE_ORG: "Organisation",
+    ISSUE_TRACKER_PH_AZURE_PROJECT: "Projekt",
+    ISSUE_TRACKER_PH_GITHUB_OWNER: "Eigent\xFCmer",
+    ISSUE_TRACKER_PH_GITHUB_REPO: "Repository",
+    ISSUE_TRACKER_PH_CUSTOM_TEMPLATE: "https://tracker.example.com/{id}"
   },
   SELECTOR_PICKER: {
     TITLE: "DOM-Element ausw\xE4hlen",
@@ -1603,6 +2122,8 @@ var I18N_DE = {
     FILE_EDITOR_TITLE: "\u270F\uFE0F Datei-Editor",
     FILE_SAVED_TOAST: "\u2713 Datei gespeichert",
     FILE_SAVE_ERROR_TOAST: "Fehler beim Speichern",
+    FIXTURES_WRITTEN_TOAST: "\u2713 Fixtures in cypress/fixtures geschrieben",
+    FIXTURES_NO_FOLDER_TOAST: "Fixtures konnten nicht geschrieben werden (Cypress-Ordner konfigurieren)",
     BTN_CONFIG: "Config",
     BTN_FILES: "Dateien",
     BTN_COMMANDS: "Befehle",
@@ -1617,7 +2138,77 @@ var I18N_DE = {
     SESSION_RESUME_TEXT: "Es gibt eine nicht abgeschlossene aktive Aufzeichnung.",
     SESSION_RESUME_COUNT: "erfasste Befehle",
     SESSION_CONTINUE_BTN: "Weiter aufzeichnen",
-    SESSION_DISCARD_BTN: "Verwerfen"
+    SESSION_DISCARD_BTN: "Verwerfen",
+    BTN_HELP: "Hilfe"
+  },
+  HELP: {
+    TITLE: "\u2753 Hilfe \u2014 Kurzanleitung",
+    INTRO: "Alles, was der Recorder kann.",
+    SEC_RECORDING: "\u23FA Aufzeichnen",
+    RECORDING_1: "Dr\xFCcke \u23FA (oder Ctrl+R) zum Starten; \u23F9 zum Stoppen und Speichern.",
+    RECORDING_2: "Pause / Fortsetzen mit \u23F8 (oder Ctrl+P).",
+    SEC_SHORTCUTS: "\u2328\uFE0F Tastenk\xFCrzel",
+    SC_RECORD: "Ctrl+R \u2014 Aufzeichnen / stoppen",
+    SC_PAUSE: "Ctrl+P \u2014 Pausieren / fortsetzen",
+    SC_TESTS: "Ctrl+1 \u2014 Panel gespeicherte Tests",
+    SC_COMMANDS: "Ctrl+2 \u2014 Befehle-Panel",
+    SC_CONFIG: "Ctrl+3 \u2014 Einstellungen",
+    SC_VISIBILITY: "Ctrl+Shift+E \u2014 Widget ein-/ausblenden",
+    SC_HELP: "Ctrl+Shift+H \u2014 Diese Hilfe",
+    SEC_CAPTURED: "\u{1F3AF} Was aufgezeichnet wird",
+    CAP_CLICK: "Klick \u2192 .click()",
+    CAP_DBLCLICK: "Doppelklick \u2192 .dblclick()",
+    CAP_RIGHTCLICK: "Rechtsklick \u2192 .rightclick()",
+    CAP_TYPE: "In ein Feld tippen \u2192 .clear().type(...)",
+    CAP_CHECK: "Checkbox / Radio \u2192 .check() / .uncheck()",
+    CAP_SELECT: "<select> \u2192 .select(...)",
+    CAP_KEYS: 'Enter / Escape \u2192 .type("{enter}") / ("{esc}")',
+    CAP_ROUTE: "Routenwechsel (SPA) \u2192 cy.url().should(...)",
+    CAP_HTTP: "fetch / XHR \u2192 cy.intercept + cy.wait",
+    SEC_ASSERT: "\u2705 Assertions",
+    ASSERT_1: "Alt+Klick auf ein Element, um es zu pr\xFCfen, ohne seine Aktion auszul\xF6sen (Text, Wert, checked oder sichtbar).",
+    ASSERT_2: "Oder nutze den Assertion-Builder im Befehle-Panel.",
+    SEC_PANELS: "\u{1F5C2} Panels",
+    PANEL_TESTS: "\u{1F4CB} Tests \u2014 gespeichert: nach Tag filtern, kopieren, kombinieren, exportieren.",
+    PANEL_COMMANDS: "\u2328\uFE0F Befehle \u2014 aktuelle Aufzeichnung: umsortieren, l\xF6schen, Assertions hinzuf\xFCgen.",
+    PANEL_CONFIG: "\u2699\uFE0F Config \u2014 Sprache, Selektor, HTTP, Cypress-Ordner, Daten, Sichtbarkeit, Position.",
+    PANEL_FILES: "\u{1F4C1} Dateien \u2014 Tests in deine .cy.ts einf\xFCgen und den Runner starten.",
+    SEC_SELECTOR: "\u{1F50E} Selektoren",
+    SELECTOR_1: "W\xE4hle das bevorzugte Attribut (data-cy, data-testid, aria-label, id) unter Config.",
+    SELECTOR_2: "Hat ein Klick keinen zuverl\xE4ssigen Selektor, erscheint ein Picker zur Wahl des besten Vorfahren.",
+    SEC_DATA: "\u{1F4BE} Daten",
+    DATA_1: "Tests als JSON exportieren (alle / Auswahl / nach Tags).",
+    DATA_2: "JSON importieren: wird zu deinen Daten hinzugef\xFCgt (nichts wird gel\xF6scht).",
+    SEC_ADVANCED: "\u{1F680} Erweitert",
+    ADV_INVISIBLE: "Unsichtbarer Modus: start-hidden + Ctrl+Shift+E, um in Produktion unauff\xE4llig aufzuzeichnen.",
+    ADV_RUNNER: "Lokaler Runner: npx lib-e2e-cypress-runner, um einen Spec headless aus dem Editor zu starten.",
+    ADV_CROSSAPP: "Cross-App: die Aufzeichnung \xFCbersteht den Wechsel des Micro-Frontends (gleicher Origin).",
+    ADV_DRAG: "Ziehe den \u23FA-Button, um das Widget zu verschieben; die Position wird gemerkt.",
+    CLOSE: "Schlie\xDFen",
+    TAB_REFERENCE: "Kurzreferenz",
+    TAB_GUIDE: "Nutzungsleitfaden",
+    // TODO: translate (de) — usage guide body kept in Spanish for now.
+    GUIDE_INTRO: "C\xF3mo sacarle partido al grabador, qu\xE9 cubre y qu\xE9 no.",
+    G_SEC_WORKFLOW: "\u{1F9ED} Flujo de trabajo",
+    G_WF_1: "1. Pulsa \u23FA (o Ctrl+R) para empezar a grabar.",
+    G_WF_2: "2. Usa tu app como un usuario: clicks, formularios, navegaci\xF3n. Cada acci\xF3n se convierte en un comando Cypress.",
+    G_WF_3: "3. A\xF1ade verificaciones con Alt+click sobre lo que quieras comprobar.",
+    G_WF_4: "4. Pulsa \u23F9 para parar; ponle nombre y tags, y gu\xE1rdalo.",
+    G_WF_5: "5. En \u{1F4C1} Ficheros, inserta el test en un .cy.ts o l\xE1nzalo con el runner local.",
+    G_SEC_COVERED: "\u2705 Qu\xE9 cubre",
+    G_COV_1: "Clicks, doble-click, click derecho, inputs de texto, checkbox/radio, select y teclas Enter/Escape.",
+    G_COV_2: "Navegaci\xF3n SPA (pushState/replaceState/popstate) \u2192 cy.url().should(...).",
+    G_COV_3: "Llamadas fetch/XHR (GET/POST/PUT) \u2192 cy.intercept + cy.wait, con validaci\xF3n de body opcional.",
+    G_COV_4: "Selector fiable (data-cy/testid/aria/id) y picker cuando no hay uno claro.",
+    G_COV_5: "Aserciones autom\xE1ticas (Alt+click) y constructor manual.",
+    G_COV_6: "Continuidad al cambiar de micro-frontend (mismo origen), modo invisible e i18n.",
+    G_SEC_NOTCOVERED: "\u{1F6AB} Qu\xE9 NO cubre (por ahora)",
+    G_NC_1: "Or\xEDgenes distintos / subdominios (solo mismo origen).",
+    G_NC_2: "Subida de ficheros (selectFile), arrastrar y soltar, y hover.",
+    G_NC_3: "La tecla Tab (Cypress no la soporta en .type()).",
+    G_NC_4: "Peticiones DELETE (se ignoran a prop\xF3sito).",
+    G_NC_5: "iframes y Shadow DOM de terceros pueden no capturarse.",
+    G_NC_6: "Generaci\xF3n de login program\xE1tico (en el roadmap)."
   }
 };
 
@@ -1750,6 +2341,32 @@ var advancedTestTransformationService = new AdvancedTestTransformationService();
 
 // src/services/recording.service.ts
 init_selector_quality_utils();
+
+// src/utils/assertion.utils.ts
+var MAX_TEXT_LENGTH = 60;
+function inferAssertionCommand(el, selector) {
+  const should = (body) => `cy.get('${selector}').should(${body})`;
+  const tag = el.tagName.toLowerCase();
+  if (tag === "input") {
+    const input = el;
+    const type = (input.getAttribute("type") ?? "text").toLowerCase();
+    if (type === "checkbox" || type === "radio") {
+      return should(`'${input.checked ? "be.checked" : "not.be.checked"}'`);
+    }
+    return input.value ? should(`'have.value', '${escapeSingleQuotes(input.value)}'`) : should(`'be.visible'`);
+  }
+  if (tag === "textarea" || tag === "select") {
+    const value = el.value;
+    return value ? should(`'have.value', '${escapeSingleQuotes(value)}'`) : should(`'be.visible'`);
+  }
+  const text = (el.textContent ?? "").replace(/\s+/g, " ").trim();
+  if (text && text.length <= MAX_TEXT_LENGTH) {
+    return should(`'contain.text', '${escapeSingleQuotes(text)}'`);
+  }
+  return should(`'be.visible'`);
+}
+
+// src/services/recording.service.ts
 var OWN_SELECTOR = '[data-cy="lib-e2e-cypress-for-dummys"]';
 function createSessionId() {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
@@ -1764,6 +2381,7 @@ var RecordingService = class {
   isPaused$ = new Subject(false);
   selectorNotFound$ = new Subject(null);
   inputDebounceTimers = /* @__PURE__ */ new Map();
+  fixtures = /* @__PURE__ */ new Map();
   abort = new AbortController();
   selectorStrategy = "data-cy";
   /** Stable id of the current live session (null when none has started). */
@@ -1773,9 +2391,13 @@ var RecordingService = class {
   origPushState = history.pushState.bind(history);
   origReplaceState = history.replaceState.bind(history);
   constructor() {
+    this.listenToAssertClicks();
     this.listenToClicks();
+    this.listenToDoubleClicks();
+    this.listenToContextMenu();
     this.listenToInput();
     this.listenToSelect();
+    this.listenToKeys();
     this.listenToRouteChanges();
   }
   // ── Public API ────────────────────────────────────────────────────────────
@@ -1866,17 +2488,27 @@ var RecordingService = class {
     if (index < 0 || index >= ints.length) return;
     this.interceptors$.next([...ints.slice(0, index), ...ints.slice(index + 1)]);
   }
-  registerInterceptor(method, url, alias) {
-    if (this.isPaused$.getValue()) return;
-    const command = `cy.intercept('${method}', '${this.urlToWildcard(url, method)}').as('${alias}')`;
+  registerInterceptor(method, url, alias, fixtureFile) {
+    if (!this.isRecording$.getValue() || this.isPaused$.getValue()) return;
+    const wildcard = this.urlToWildcard(url, method);
+    const command = fixtureFile ? `cy.intercept('${method}', '${wildcard}', { fixture: '${fixtureFile}' }).as('${alias}')` : `cy.intercept('${method}', '${wildcard}').as('${alias}')`;
     const current = this.interceptors$.getValue();
     if (!current.includes(command)) {
       this.interceptors$.next([...current, command]);
     }
   }
+  /** Registers a captured response as a Cypress fixture (name → JSON content). */
+  registerFixture(name, content) {
+    if (!this.isRecording$.getValue() || this.isPaused$.getValue()) return;
+    this.fixtures.set(name, content);
+  }
+  getFixturesSnapshot() {
+    return [...this.fixtures.entries()].map(([name, content]) => ({ name, content }));
+  }
   clearCommands() {
     this.commands$.next([]);
     this.interceptors$.next([]);
+    this.fixtures.clear();
   }
   clearInterceptors() {
     this.interceptors$.next([]);
@@ -1930,6 +2562,39 @@ var RecordingService = class {
     this.inputDebounceTimers.clear();
   }
   // ── DOM listeners ─────────────────────────────────────────────────────────
+  /**
+   * Alt+click captures an ASSERTION for the element instead of a click, and
+   * suppresses the element's real action. Runs in the capture phase so it fires
+   * before the app's handlers and before the bubble-phase click listener below
+   * (stopImmediatePropagation prevents a duplicate `.click()`). See spec 009.
+   */
+  listenToAssertClicks() {
+    document.addEventListener(
+      "click",
+      (e) => {
+        if (!this.isRecording$.getValue() || this.isPaused$.getValue()) return;
+        if (!e.altKey) return;
+        const target = e.target;
+        if (!target || this.isOwnElement(target)) return;
+        const tag = target.tagName?.toLowerCase();
+        if (tag === "body" || tag === "html") return;
+        const container = target.closest("[data-cy], [data-testid], [aria-label], [id]");
+        if (!container) return;
+        const selector = this.getReliableSelector(container);
+        if (!selector || this.isOwnSelector(selector)) return;
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        const emit = () => this.addCommand(inferAssertionCommand(container, selector));
+        const type = (container.getAttribute("type") ?? "").toLowerCase();
+        if (container.tagName.toLowerCase() === "input" && (type === "checkbox" || type === "radio")) {
+          queueMicrotask(emit);
+        } else {
+          emit();
+        }
+      },
+      { capture: true, signal: this.abort.signal }
+    );
+  }
   listenToClicks() {
     document.addEventListener(
       "click",
@@ -1944,6 +2609,70 @@ var RecordingService = class {
       { signal: this.abort.signal }
     );
   }
+  /** Centralised selector resolution for the pointer/key listeners (spec 010). */
+  resolveSelectorFor(target) {
+    if (!target || this.isOwnElement(target)) return null;
+    const tag = target.tagName?.toLowerCase();
+    if (tag === "body" || tag === "html") return null;
+    const container = target.closest("[data-cy], [data-testid], [aria-label], [id]");
+    if (!container) return null;
+    const selector = this.getReliableSelector(container);
+    if (!selector || this.isOwnSelector(selector)) return null;
+    return selector;
+  }
+  listenToDoubleClicks() {
+    document.addEventListener(
+      "dblclick",
+      (e) => {
+        if (!this.isRecording$.getValue() || this.isPaused$.getValue()) return;
+        if (e.altKey) return;
+        const selector = this.resolveSelectorFor(e.target);
+        if (!selector) return;
+        const clickCmd = `cy.get('${selector}').click()`;
+        let cmds = this.commands$.getValue();
+        let removed = 0;
+        while (removed < 2 && cmds.length > 0 && cmds[cmds.length - 1] === clickCmd) {
+          cmds = cmds.slice(0, -1);
+          removed++;
+        }
+        if (removed > 0) this.commands$.next(cmds);
+        this.addCommand(`cy.get('${selector}').dblclick()`);
+      },
+      { signal: this.abort.signal }
+    );
+  }
+  listenToContextMenu() {
+    document.addEventListener(
+      "contextmenu",
+      (e) => {
+        if (!this.isRecording$.getValue() || this.isPaused$.getValue()) return;
+        const selector = this.resolveSelectorFor(e.target);
+        if (!selector) return;
+        this.addCommand(`cy.get('${selector}').rightclick()`);
+      },
+      { signal: this.abort.signal }
+    );
+  }
+  /** Enter → type('{enter}'), Escape → type('{esc}'), only inside a field. */
+  listenToKeys() {
+    document.addEventListener(
+      "keydown",
+      (e) => {
+        if (!this.isRecording$.getValue() || this.isPaused$.getValue()) return;
+        const key = e.key;
+        if (key !== "Enter" && key !== "Escape") return;
+        const target = e.target;
+        const tag = target?.tagName?.toLowerCase();
+        if (tag !== "input" && tag !== "textarea" && tag !== "select") return;
+        const selector = this.resolveSelectorFor(target);
+        if (!selector) return;
+        this.flushInputDebounce(target);
+        const token = key === "Enter" ? "{enter}" : "{esc}";
+        this.addCommand(`cy.get('${selector}').type('${token}')`);
+      },
+      { signal: this.abort.signal }
+    );
+  }
   listenToInput() {
     document.addEventListener(
       "input",
@@ -2026,7 +2755,21 @@ var RecordingService = class {
     const tag = target.tagName.toLowerCase();
     if (tag === "input" || tag === "textarea" || tag === "select") {
       const container2 = target.closest("[data-cy], [data-testid], [aria-label], [id]");
-      if (!container2) this.selectorNotFound$.next({ target, action: "click" });
+      if (!container2) {
+        this.selectorNotFound$.next({ target, action: "click" });
+        return;
+      }
+      if (tag === "input") {
+        const input = target;
+        const type = (input.getAttribute("type") ?? "").toLowerCase();
+        if (type === "checkbox" || type === "radio") {
+          const selector2 = this.getReliableSelector(container2);
+          if (selector2 && !this.isOwnSelector(selector2)) {
+            const action = type === "radio" || input.checked ? "check" : "uncheck";
+            this.addCommand(`cy.get('${selector2}').${action}()`);
+          }
+        }
+      }
       return;
     }
     const container = target.closest("[data-cy], [data-testid], [aria-label], [id]");
@@ -2073,16 +2816,30 @@ var RecordingService = class {
     this.inputDebounceTimers.set(
       target,
       setTimeout(() => {
-        const selector = this.getReliableSelector(container);
-        const value = target.value.replace(/'/g, "\\'");
-        this.addGenericCommand({
-          selector,
-          action: (s) => `cy.get('${s}').clear().type('${value}')`
-        });
         this.inputDebounceTimers.delete(target);
+        this.recordInputValue(target);
       }, 1e3)
     );
   }
+  /** Records a text field's current value as a `clear().type()` command. */
+  recordInputValue(target) {
+    const container = target.closest("[data-cy], [data-testid], [aria-label], [id]");
+    if (!container) return;
+    const selector = this.getReliableSelector(container);
+    const value = target.value.replace(/'/g, "\\'");
+    this.addGenericCommand({
+      selector,
+      action: (s) => `cy.get('${s}').clear().type('${value}')`
+    });
+  }
+  /** Flushes any pending debounced value for an element, recording it now. */
+  flushInputDebounce(target) {
+    const timer = this.inputDebounceTimers.get(target);
+    if (timer === void 0) return;
+    clearTimeout(timer);
+    this.inputDebounceTimers.delete(target);
+    this.recordInputValue(target);
+  }
   // ── Select helpers ────────────────────────────────────────────────────────
   handleSelectEvent(target) {
     const container = target.closest("[data-cy], [data-testid], [aria-label], [id]");
@@ -2148,6 +2905,42 @@ var RecordingService = class {
 
 // src/services/persistence.service.ts
 var import_idb = require("idb");
+
+// src/utils/ticket.utils.ts
+function buildTicketUrl(provider, params, id) {
+  const ticketId = (id ?? "").trim();
+  if (!provider || !ticketId) return null;
+  let url = provider.urlTemplate;
+  for (const field of provider.fields) {
+    const value = (params?.[field.key] ?? "").trim().replace(/\/+$/, "");
+    if (!value) return null;
+    url = url.split(`{${field.key}}`).join(value);
+  }
+  url = url.split("{id}").join(encodeURIComponent(ticketId));
+  if (url.includes("{") || url.includes("}")) return null;
+  return toSafeHttpUrl(url);
+}
+function resolveTicketUrl(providerId, allParams, ticketId) {
+  const id = (ticketId ?? "").trim();
+  if (!id) return null;
+  const provider = findIssueTrackerProvider(providerId);
+  if (!provider) return null;
+  return buildTicketUrl(provider, allParams?.[providerId] ?? {}, id);
+}
+function toSafeHttpUrl(candidate) {
+  try {
+    const parsed = new URL(candidate);
+    return parsed.protocol === "http:" || parsed.protocol === "https:" ? parsed.href : null;
+  } catch {
+    return null;
+  }
+}
+function buildTicketComment(id, url) {
+  const ticketId = (id ?? "").trim();
+  return url ? `// ${ticketId} \u2014 ${url}` : `// ${ticketId}`;
+}
+
+// src/services/persistence.service.ts
 var ACTIVE_SESSION_ID = 1;
 var PersistenceService = class {
   // dbName is overridable so tests can use unique names for isolation.
@@ -2177,9 +2970,9 @@ var PersistenceService = class {
     return this._db;
   }
   // ── Tests ─────────────────────────────────────────────────────────────────
-  async insertTest(name, commands = [], interceptors = [], tags = [], notes) {
+  async insertTest(name, commands = [], interceptors = [], tags = [], notes, ticketId) {
     const db = await this.getDB();
-    const record = { name, createdAt: Date.now(), ...tags.length ? { tags } : {}, ...notes ? { notes } : {} };
+    const record = { name, createdAt: Date.now(), ...tags.length ? { tags } : {}, ...notes ? { notes } : {}, ...ticketId ? { ticketId } : {} };
     const id = await db.add("tests", record);
     if (commands.length) await this.insertCommands(commands, id);
     if (interceptors.length) await this.insertInterceptors(interceptors, id);
@@ -2202,12 +2995,28 @@ var PersistenceService = class {
     if (!record) return null;
     const commands = await this.getCommandStrings(testId);
     const interceptors = await this.getInterceptorStrings(testId);
-    const itBlock = `it('${escapeSingleQuotes(record.name)}', () => {
+    const ticketComment = await this.ticketCommentFor(record);
+    const itBody = `it('${escapeSingleQuotes(record.name)}', () => {
 ${commands.map((c) => normalizeBlock(c, "  ")).join("\n")}
 });`;
+    const itBlock = ticketComment ? `${ticketComment}
+${itBody}` : itBody;
     const interceptorsBlock = interceptors.length ? "  // Auto-generated Cypress interceptors\n" + interceptors.map((i) => normalizeBlock(i, "  ")).join("\n") + "\n" : "";
     return { ...record, commands, interceptors, cypressCommands: commands, itBlock, interceptorsBlock };
   }
+  /**
+   * Builds the traceability comment for a test record (spec 014), reading the
+   * configured issue-tracker provider/params so the link — when resolvable — is
+   * embedded. Returns `null` when the record has no ticket id.
+   */
+  async ticketCommentFor(record) {
+    if (!record.ticketId) return null;
+    const config = await this.getGeneralConfig();
+    const providerId = config?.["issueTrackerProviderId"] ?? DEFAULT_ISSUE_TRACKER_PROVIDER_ID;
+    const params = config?.["issueTrackerParams"] ?? {};
+    const url = resolveTicketUrl(providerId, params, record.ticketId);
+    return buildTicketComment(record.ticketId, url);
+  }
   async deleteTest(id) {
     const db = await this.getDB();
     await db.delete("tests", id);
@@ -2333,6 +3142,31 @@ ${commands.map((c) => normalizeBlock(c, "  ")).join("\n")}
     await this.setConfigKey("cypressDirectoryHandle", dirHandle);
     await this.setConfigKey("allowReadWriteFiles", "true");
   }
+  /**
+   * Writes captured fixtures into `cypress/fixtures/` using the configured Cypress
+   * folder handle (spec 012). Returns the number written. Throws if no folder is
+   * configured or write permission is denied.
+   */
+  async writeFixtures(fixtures) {
+    if (!fixtures.length) return 0;
+    const config = await this.getGeneralConfig();
+    const dirHandle = config?.["cypressDirectoryHandle"];
+    if (!dirHandle) throw new Error("No Cypress folder configured");
+    const perm = dirHandle;
+    let state = await perm.queryPermission({ mode: "readwrite" });
+    if (state !== "granted") state = await perm.requestPermission({ mode: "readwrite" });
+    if (state !== "granted") throw new Error("Write permission denied");
+    const fixturesDir = await dirHandle.getDirectoryHandle("fixtures", { create: true });
+    let written = 0;
+    for (const fx of fixtures) {
+      const fileHandle = await fixturesDir.getFileHandle(fx.name, { create: true });
+      const writable = await fileHandle.createWritable();
+      await writable.write(fx.content);
+      await writable.close();
+      written++;
+    }
+    return written;
+  }
   async bulkInsertWithoutId(store, items) {
     if (!Array.isArray(items)) return;
     const db = await this.getDB();
@@ -2385,6 +3219,14 @@ function parseJsonObject(text) {
   }
   return null;
 }
+function prettyJsonOrNull(text) {
+  try {
+    const parsed = JSON.parse(text);
+    if (parsed && typeof parsed === "object") return JSON.stringify(parsed, null, 2);
+  } catch {
+  }
+  return null;
+}
 function parseRequestBody(init) {
   const body = init?.body;
   if (typeof body === "string") return parseJsonObject(body);
@@ -2418,6 +3260,9 @@ var HttpMonitor = class {
   isExtendedHttpEnabled() {
     return localStorage.getItem("extendedHttpCommands") === "true";
   }
+  isFixtureModeEnabled() {
+    return localStorage.getItem("fixtureMode") === "true";
+  }
   installFetch() {
     if (this.originalFetch) return;
     const originalFetch = window.fetch;
@@ -2479,6 +3324,14 @@ var HttpMonitor = class {
     if (!INTERCEPTED_METHODS.includes(method)) return;
     const url = resolveUrl(input);
     const alias = generateAlias(method, url);
+    if (this.isFixtureModeEnabled() && method === "GET") {
+      const pretty = prettyJsonOrNull(await responseClone.text());
+      const fixtureFile = `${alias}.json`;
+      if (pretty !== null) this.recording.registerFixture(fixtureFile, pretty);
+      this.recording.registerInterceptor(method, url, alias, pretty !== null ? fixtureFile : void 0);
+      this.recording.addCommand(`cy.wait('@${alias}').then((interception) => { })`);
+      return;
+    }
     this.recording.registerInterceptor(method, url, alias);
     const extendedHttp = this.isExtendedHttpEnabled();
     const requestBody = extendedHttp ? parseRequestBody(init) : null;
@@ -2495,6 +3348,14 @@ var HttpMonitor = class {
   handleXhrInterception(method, url, requestBody, responseText) {
     if (!INTERCEPTED_METHODS.includes(method)) return;
     const alias = generateAlias(method, url);
+    if (this.isFixtureModeEnabled() && method === "GET") {
+      const pretty = prettyJsonOrNull(responseText);
+      const fixtureFile = `${alias}.json`;
+      if (pretty !== null) this.recording.registerFixture(fixtureFile, pretty);
+      this.recording.registerInterceptor(method, url, alias, pretty !== null ? fixtureFile : void 0);
+      this.recording.addCommand(`cy.wait('@${alias}').then((interception) => { })`);
+      return;
+    }
     this.recording.registerInterceptor(method, url, alias);
     const extendedHttp = this.isExtendedHttpEnabled();
     const responseBody = extendedHttp ? parseJsonObject(responseText) : null;
@@ -2613,6 +3474,10 @@ var LIB_E2E_CYPRESS_FOR_DUMMYS_SWAL2_STYLES = `
   align-items: stretch;
   box-sizing: border-box;
   overflow: hidden !important;
+  /* Left-align modal body text/code (SweetAlert defaults it to centre, which
+     inherits into the panels \u2014 including their shadow DOM). Titles/buttons keep
+     their own alignment. */
+  text-align: left !important;
 }
 /* The single wrapper div we inject inside each modal fills the container */
 .swal2-html-container > div {
@@ -2816,6 +3681,177 @@ function boxTopLeftFor(toggleCentre, dir) {
   return { x: toggleCentre.x - off.x, y: toggleCentre.y - off.y };
 }
 
+// src/utils/cypress-completions.ts
+var CY_METHODS = [
+  "visit",
+  "get",
+  "contains",
+  "intercept",
+  "wait",
+  "request",
+  "url",
+  "location",
+  "viewport",
+  "fixture",
+  "wrap",
+  "reload",
+  "go",
+  "window",
+  "document",
+  "session",
+  "clearCookies",
+  "clearLocalStorage",
+  "screenshot",
+  "log"
+];
+var CHAIN_METHODS = [
+  "click",
+  "dblclick",
+  "rightclick",
+  "type",
+  "clear",
+  "select",
+  "check",
+  "uncheck",
+  "should",
+  "and",
+  "find",
+  "first",
+  "last",
+  "eq",
+  "then",
+  "its",
+  "invoke",
+  "as",
+  "trigger",
+  "focus",
+  "blur",
+  "scrollIntoView",
+  "within",
+  "parent",
+  "children",
+  "siblings",
+  "contains",
+  "each",
+  "filter",
+  "wait"
+];
+var TOP_LEVEL = [
+  "cy",
+  "describe",
+  "it",
+  "context",
+  "beforeEach",
+  "afterEach",
+  "before",
+  "after",
+  "Cypress"
+];
+var CYPRESS_COMPLETIONS = [
+  ...TOP_LEVEL,
+  ...CY_METHODS.map((m) => `cy.${m}`),
+  ...CHAIN_METHODS
+];
+function filterCompletions(list, prefix) {
+  const p = prefix.toLowerCase();
+  if (!p) return [...list];
+  return list.filter((label) => label.toLowerCase().includes(p));
+}
+function filterCypressCompletions(prefix) {
+  return filterCompletions(CYPRESS_COMPLETIONS, prefix);
+}
+
+// src/utils/code-editor.ts
+function toOptions(labels, type) {
+  return labels.map((label) => ({ label, type }));
+}
+function cypressCompletionSource(context) {
+  const cyMatch = context.matchBefore(/cy\.\w*$/);
+  if (cyMatch) {
+    return { from: cyMatch.from + 3, options: toOptions(filterCompletions(CY_METHODS, cyMatch.text.slice(3)), "method") };
+  }
+  const chainMatch = context.matchBefore(/\.\w*$/);
+  if (chainMatch) {
+    return { from: chainMatch.from + 1, options: toOptions(filterCompletions(CHAIN_METHODS, chainMatch.text.slice(1)), "method") };
+  }
+  const word = context.matchBefore(/\w*/);
+  if (!word || word.from === word.to && !context.explicit) return null;
+  return { from: word.from, options: toOptions(filterCompletions(TOP_LEVEL, word.text), "keyword") };
+}
+async function createCodeEditor(opts) {
+  const [view, state, language, langJs, autocomplete, commands, highlight] = await Promise.all([
+    import("@codemirror/view"),
+    import("@codemirror/state"),
+    import("@codemirror/language"),
+    import("@codemirror/lang-javascript"),
+    import("@codemirror/autocomplete"),
+    import("@codemirror/commands"),
+    import("@lezer/highlight")
+  ]);
+  const { EditorView, keymap, lineNumbers, highlightActiveLine, drawSelection } = view;
+  const { EditorState } = state;
+  const { syntaxHighlighting, HighlightStyle, indentOnInput, bracketMatching } = language;
+  const { javascript } = langJs;
+  const { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } = autocomplete;
+  const { history: history2, defaultKeymap, historyKeymap, indentWithTab } = commands;
+  const { tags } = highlight;
+  const darkHighlight = HighlightStyle.define([
+    { tag: tags.keyword, color: "#ff7b72" },
+    { tag: tags.string, color: "#a5d6ff" },
+    { tag: [tags.function(tags.variableName), tags.function(tags.propertyName)], color: "#d2a8ff" },
+    { tag: tags.number, color: "#79c0ff" },
+    { tag: [tags.bool, tags.null], color: "#79c0ff" },
+    { tag: tags.comment, color: "#8b949e", fontStyle: "italic" },
+    { tag: [tags.propertyName, tags.attributeName], color: "#7ee787" },
+    { tag: [tags.typeName, tags.className], color: "#ffa657" },
+    { tag: tags.operator, color: "#ff7b72" },
+    { tag: [tags.brace, tags.bracket, tags.punctuation], color: "#c9d1d9" }
+  ]);
+  const theme = EditorView.theme(
+    {
+      "&": { color: "#c9d1d9", backgroundColor: "#0d1117", height: "100%", fontSize: "13px" },
+      ".cm-scroller": { fontFamily: "'Cascadia Code','Fira Code',Consolas,monospace", overflow: "auto" },
+      ".cm-gutters": { backgroundColor: "#0d1117", color: "#484f58", border: "none" },
+      ".cm-activeLine": { backgroundColor: "rgba(110,118,129,0.10)" },
+      ".cm-activeLineGutter": { backgroundColor: "transparent" },
+      "&.cm-focused": { outline: "none" },
+      ".cm-tooltip": { background: "#161b22", border: "1px solid #30363d", color: "#c9d1d9", borderRadius: "6px" },
+      ".cm-tooltip-autocomplete ul li[aria-selected]": { background: "#1f6feb", color: "#fff" }
+    },
+    { dark: true }
+  );
+  const editorView = new EditorView({
+    parent: opts.parent,
+    ...opts.root ? { root: opts.root } : {},
+    state: EditorState.create({
+      doc: opts.doc,
+      extensions: [
+        lineNumbers(),
+        highlightActiveLine(),
+        drawSelection(),
+        history2(),
+        indentOnInput(),
+        bracketMatching(),
+        closeBrackets(),
+        javascript({ typescript: true }),
+        syntaxHighlighting(darkHighlight),
+        autocompletion({ override: [cypressCompletionSource] }),
+        keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...historyKeymap, ...completionKeymap, indentWithTab]),
+        theme,
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged && opts.onChange) opts.onChange(update.state.doc.toString());
+        })
+      ]
+    })
+  });
+  return {
+    getValue: () => editorView.state.doc.toString(),
+    setValue: (value) => editorView.dispatch({ changes: { from: 0, to: editorView.state.doc.length, insert: value } }),
+    focus: () => editorView.focus(),
+    destroy: () => editorView.destroy()
+  };
+}
+
 // src/index.ts
 init_selector_picker();
 
@@ -3026,7 +4062,7 @@ var SAVE_TEST_STYLES = `
   :host { display: block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #e6edf3; }
   * { box-sizing: border-box; }
   .container { padding: 24px 28px; text-align: left; }
-  .btn-row, p { text-align: center; }
+  .btn-row { text-align: center; }
   p { margin: 0 0 20px; font-size: 14px; color: #8b949e; line-height: 1.5; }
   .btn-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
   button {
@@ -3096,10 +4132,11 @@ function renderSaveTestAsk(t) {
       </div>
     </div>`;
 }
-function renderSaveTestDesc(description, notes, tags, t) {
+function renderSaveTestDesc(description, notes, tags, ticket, t) {
   const chipsHtml = tags.map(
     (tag) => `<span class="chip">${escHtml(tag)}<button class="chip-del" data-tag="${escAttr(tag)}" title="${t("SAVE_TEST.REMOVE_TAG_TITLE")}">\u2715</button></span>`
   ).join("");
+  const ticketWarning = ticket.invalid ? `<div class="ticket-warning" style="color:#d29922;font-size:11px;margin-top:2px">${t("SAVE_TEST.TICKET_INVALID")}</div>` : "";
   return `
     <div class="container">
       <p>${t("SAVE_TEST.DESC_LABEL")} (<code>it()</code>):</p>
@@ -3107,6 +4144,10 @@ function renderSaveTestDesc(description, notes, tags, t) {
              value="${escAttr(description)}" autocomplete="off" />
       <span class="tag-label">${t("SAVE_TEST.NOTES_LABEL")}</span>
       <textarea id="notes-input" rows="3" placeholder="${escAttr(t("SAVE_TEST.NOTES_PLACEHOLDER"))}">${escHtml(notes)}</textarea>
+      <span class="tag-label">${t("SAVE_TEST.TICKET_LABEL")}</span>
+      <input id="ticket-input" type="text" placeholder="${escAttr(t(ticket.placeholderKey))}"
+             value="${escAttr(ticket.id)}" autocomplete="off" />
+      ${ticketWarning}
       <span class="tag-label">${t("SAVE_TEST.TAGS_LABEL")}</span>
       <div class="tag-input-row">
         <input id="tag-input" type="text" placeholder="${t("SAVE_TEST.TAGS_PLACEHOLDER")}" autocomplete="off" />
@@ -3128,6 +4169,9 @@ var SaveTestElement = class extends HTMLElement {
   description = "";
   notes = "";
   tags = [];
+  ticketId = "";
+  /** Set by the host from config so the ticket placeholder/validation is provider-aware. */
+  issueTrackerProviderId = DEFAULT_ISSUE_TRACKER_PROVIDER_ID;
   translation = translationService;
   constructor() {
     super();
@@ -3144,19 +4188,20 @@ var SaveTestElement = class extends HTMLElement {
     this.render();
   }
   confirmSave() {
-    this.dispatch("savetest", { description: this.description.trim(), notes: this.notes, tags: [...this.tags] });
+    this.dispatch("savetest", { description: this.description.trim(), notes: this.notes, tags: [...this.tags], ticketId: this.ticketId.trim() || null });
   }
   confirmSaveAndExport() {
-    this.dispatch("saveandexport", { description: this.description.trim(), notes: this.notes, tags: [...this.tags] });
+    this.dispatch("saveandexport", { description: this.description.trim(), notes: this.notes, tags: [...this.tags], ticketId: this.ticketId.trim() || null });
   }
   cancel() {
-    this.dispatch("savetest", { description: null, notes: "", tags: [] });
+    this.dispatch("savetest", { description: null, notes: "", tags: [], ticketId: null });
   }
   restartComponent() {
     this._step = "ask";
     this.description = "";
     this.notes = "";
     this.tags = [];
+    this.ticketId = "";
     this.render();
   }
   addTag(tag) {
@@ -3173,6 +4218,20 @@ var SaveTestElement = class extends HTMLElement {
   t(key) {
     return this.translation.translate(key);
   }
+  /** Builds the ticket field view: provider-aware placeholder + soft (non-blocking) format check. */
+  ticketView() {
+    const provider = findIssueTrackerProvider(this.issueTrackerProviderId) ?? ISSUE_TRACKER_PROVIDERS[0];
+    const trimmed = this.ticketId.trim();
+    let invalid = false;
+    if (trimmed) {
+      try {
+        invalid = !new RegExp(provider.idPattern).test(trimmed);
+      } catch {
+        invalid = false;
+      }
+    }
+    return { id: this.ticketId, placeholderKey: provider.idPlaceholderKey, invalid };
+  }
   dispatch(type, detail) {
     this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
   }
@@ -3182,9 +4241,10 @@ var SaveTestElement = class extends HTMLElement {
       this.shadow.getElementById("btn-yes")?.addEventListener("click", () => this.askSave());
       this.shadow.getElementById("btn-no")?.addEventListener("click", () => this.cancel());
     } else {
-      this.shadow.innerHTML = `<style>${SAVE_TEST_STYLES}</style>${renderSaveTestDesc(this.description, this.notes, this.tags, this.t.bind(this))}`;
+      this.shadow.innerHTML = `<style>${SAVE_TEST_STYLES}</style>${renderSaveTestDesc(this.description, this.notes, this.tags, this.ticketView(), this.t.bind(this))}`;
       const descInput = this.shadow.getElementById("desc-input");
       const notesInput = this.shadow.getElementById("notes-input");
+      const ticketInput = this.shadow.getElementById("ticket-input");
       const tagInput = this.shadow.getElementById("tag-input");
       descInput.addEventListener("input", () => {
         this.description = descInput.value;
@@ -3192,6 +4252,13 @@ var SaveTestElement = class extends HTMLElement {
       notesInput.addEventListener("input", () => {
         this.notes = notesInput.value;
       });
+      ticketInput.addEventListener("input", () => {
+        this.ticketId = ticketInput.value;
+      });
+      ticketInput.addEventListener("change", () => {
+        this.ticketId = ticketInput.value;
+        this.render();
+      });
       const tryAddTag = () => {
         this.addTag(tagInput.value);
         tagInput.value = "";
@@ -3421,7 +4488,7 @@ function highlightLine(line) {
 
 // src/components/test-editor/test-editor.template.ts
 function renderTestEditor(state, t) {
-  const { tags, visible, selectedVisible, activeTag, selectMode, selectedIds, describeName, expandedIndex, interceptorsByTest, locale } = state;
+  const { tags, visible, selectedVisible, activeTag, selectMode, selectedIds, describeName, expandedIndex, interceptorsByTest, groupByTicket, ticketUrlByTest, locale } = state;
   const tagFilterHtml = tags.length ? `<div class="tag-filter">
         ${tags.map((tag) => `<button class="tag-chip${activeTag === tag ? " active" : ""}" data-filter-tag="${escAttr(tag)}">${escHtml(tag)}</button>`).join("")}
        </div>` : `<div class="tag-filter" style="color:#484f58;font-size:11px">${t("TEST_EDITOR.NO_TAGS")}</div>`;
@@ -3430,14 +4497,19 @@ function renderTestEditor(state, t) {
         <input id="describe-name" type="text" placeholder="${t("TEST_EDITOR.DESCRIBE_PLACEHOLDER")}" value="${escAttr(describeName)}" />
         <button class="btn-gen-describe" id="btn-gen-describe">${t("TEST_EDITOR.COPY_DESCRIBE")}</button>
       </div>` : "";
-  const rows = visible.map((test, i) => {
+  const renderRow = (test, i) => {
     const expanded = expandedIndex === i;
     const date = new Date(test.createdAt).toLocaleString(locale, { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" });
     const icps = interceptorsByTest[test.id] ?? test.interceptors ?? [];
     const tagsHtml = (test.tags ?? []).length ? `<span class="test-tags">${(test.tags ?? []).map((tag) => `<span class="test-tag">${escHtml(tag)}</span>`).join("")}</span>` : "";
+    const ticketId = (test.ticketId ?? "").trim();
+    const ticketUrl = ticketUrlByTest[test.id] ?? null;
+    const ticketHtml = !ticketId ? "" : ticketUrl ? `<a class="test-ticket" data-ticket-link href="${escAttr(ticketUrl)}" target="_blank" rel="noopener noreferrer" style="color:#58a6ff;font-size:11px;text-decoration:none">\u{1F3AB} ${escHtml(ticketId)}</a>` : `<span class="test-ticket" style="color:#8b949e;font-size:11px">\u{1F3AB} ${escHtml(ticketId)}</span>`;
     const checkbox = selectMode ? `<input type="checkbox" ${selectedIds.has(test.id) ? "checked" : ""} data-select="${test.id}" />` : "";
     const hasIcps = (test.interceptors ?? []).length > 0;
-    const itBlockCode = `it('${escapeSingleQuotes(test.name)}', () => {
+    const ticketComment = ticketId ? `${buildTicketComment(ticketId, ticketUrl)}
+` : "";
+    const itBlockCode = `${ticketComment}it('${escapeSingleQuotes(test.name)}', () => {
 ${(test.commands ?? []).map((c) => normalizeBlock(c, "  ")).join("\n")}
 });`;
     const icpBlockCode = icps.length ? `beforeEach(() => {
@@ -3457,6 +4529,7 @@ ${icps.map((c) => normalizeBlock(c, "  ")).join("\n")}
           ${checkbox}
           <span class="test-name">${escHtml(test.name)}</span>
           ${tagsHtml}
+          ${ticketHtml}
           <span class="test-date">${date}</span>
           <button class="btn-icon" data-action="copy-cmds" data-idx="${i}" title="${t("TEST_EDITOR.COPY_CMDS_BTN")}">${t("TEST_EDITOR.COPY_CMDS_BTN")}</button>
           ${hasIcps ? `<button class="btn-icon" data-action="copy-icps" data-idx="${i}" title="${t("TEST_EDITOR.COPY_ICPS_BTN")}">${t("TEST_EDITOR.COPY_ICPS_BTN")}</button>` : ""}
@@ -3464,17 +4537,40 @@ ${icps.map((c) => normalizeBlock(c, "  ")).join("\n")}
         </div>
         ${body}
       </div>`;
-  }).join("");
+  };
+  const indexed = visible.map((test, i) => ({ test, i }));
+  const groupedRows = () => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const item of indexed) {
+      const key = (item.test.ticketId ?? "").trim();
+      const bucket = groups.get(key);
+      if (bucket) bucket.push(item);
+      else groups.set(key, [item]);
+    }
+    const keys = [...groups.keys()].sort((a, b) => a === "" ? 1 : b === "" ? -1 : a.localeCompare(b));
+    return keys.map((key) => {
+      const items = groups.get(key) ?? [];
+      const label = key || t("TEST_EDITOR.NO_TICKET_GROUP");
+      const url = key ? ticketUrlByTest[items[0].test.id] ?? null : null;
+      const header = url ? `<a data-ticket-link href="${escAttr(url)}" target="_blank" rel="noopener noreferrer" style="color:#58a6ff;text-decoration:none">\u{1F3AB} ${escHtml(label)}</a>` : `\u{1F3AB} ${escHtml(label)}`;
+      return `<div class="ticket-group">
+        <div class="ticket-group-hd" style="padding:6px 10px;color:#8b949e;font-size:12px;font-weight:600;border-top:1px solid #21262d">${header}</div>
+        ${items.map(({ test, i }) => renderRow(test, i)).join("")}
+      </div>`;
+    }).join("");
+  };
+  const listBody = !visible.length ? `<div class="empty">${t("TEST_EDITOR.NO_TESTS")}</div>` : groupByTicket ? groupedRows() : indexed.map(({ test, i }) => renderRow(test, i)).join("");
   return `
     <div class="toolbar">
       ${tagFilterHtml}
+      <button class="btn-select${groupByTicket ? " active" : ""}" id="btn-group-ticket">${t("TEST_EDITOR.GROUP_BY_TICKET")}</button>
       <button class="btn-select${selectMode ? " active" : ""}" id="btn-select-mode">
         ${selectMode ? t("TEST_EDITOR.CANCEL_SELECT") : t("TEST_EDITOR.MULTI_SELECT")}
       </button>
     </div>
     ${describeBarHtml}
     <div class="list">
-      ${visible.length ? rows : `<div class="empty">${t("TEST_EDITOR.NO_TESTS")}</div>`}
+      ${listBody}
     </div>`;
 }
 
@@ -3490,6 +4586,9 @@ var TestEditorElement = class extends HTMLElement {
   selectMode = false;
   selectedIds = /* @__PURE__ */ new Set();
   describeName = "";
+  groupByTicket = false;
+  issueTrackerProviderId = DEFAULT_ISSUE_TRACKER_PROVIDER_ID;
+  issueTrackerParams = {};
   constructor() {
     super();
     this.shadow = this.attachShadow({ mode: "open" });
@@ -3499,7 +4598,17 @@ var TestEditorElement = class extends HTMLElement {
     this.loadTests();
   }
   async loadTests() {
-    this.tests = await this.persistence.getAllTests();
+    const [tests, config] = await Promise.all([
+      this.persistence.getAllTests(),
+      this.persistence.getGeneralConfig()
+    ]);
+    this.tests = tests;
+    this.issueTrackerProviderId = config?.["issueTrackerProviderId"] ?? DEFAULT_ISSUE_TRACKER_PROVIDER_ID;
+    this.issueTrackerParams = config?.["issueTrackerParams"] ?? {};
+    this.render();
+  }
+  toggleGroupByTicket() {
+    this.groupByTicket = !this.groupByTicket;
     this.render();
   }
   async deleteTest(id) {
@@ -3574,6 +4683,12 @@ ${beforeEach}${itBlocks}
     const tags = this.allTags;
     const visible = this.visibleTests;
     const selectedVisible = visible.filter((t) => this.selectedIds.has(t.id));
+    const ticketUrlByTest = {};
+    for (const test of visible) {
+      if (test.ticketId) {
+        ticketUrlByTest[test.id] = resolveTicketUrl(this.issueTrackerProviderId, this.issueTrackerParams, test.ticketId);
+      }
+    }
     this.shadow.innerHTML = `<style>${TEST_EDITOR_STYLES}</style>${renderTestEditor({
       tags,
       visible,
@@ -3584,9 +4699,15 @@ ${beforeEach}${itBlocks}
       describeName: this.describeName,
       expandedIndex: this.expandedIndex,
       interceptorsByTest: this.interceptorsByTest,
+      groupByTicket: this.groupByTicket,
+      ticketUrlByTest,
       locale: localeForLang(this.translation.getLang())
     }, this.t.bind(this))}`;
     this.shadow.getElementById("btn-select-mode")?.addEventListener("click", () => this.toggleSelectMode());
+    this.shadow.getElementById("btn-group-ticket")?.addEventListener("click", () => this.toggleGroupByTicket());
+    this.shadow.querySelectorAll("[data-ticket-link]").forEach(
+      (el) => el.addEventListener("click", (ev) => ev.stopPropagation())
+    );
     this.shadow.querySelectorAll("[data-filter-tag]").forEach((el) => {
       el.addEventListener("click", () => {
         const tag = el.dataset["filterTag"] ?? "";
@@ -3654,12 +4775,22 @@ var CONFIGURATION_STYLES = `
   * { box-sizing: border-box; }
 
   /* \u2500\u2500 Grid container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  /* The SweetAlert2 host clips overflow (overflow:hidden), so the grid owns its
+     own scroll \u2014 otherwise the last cards fall below the fold with no scrollbar. */
   .cfg-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
     padding: 14px;
+    max-height: 72vh;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #30363d transparent;
   }
+  .cfg-grid::-webkit-scrollbar { width: 8px; }
+  .cfg-grid::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
+  .cfg-grid::-webkit-scrollbar-thumb:hover { background: #484f58; }
+  .cfg-grid::-webkit-scrollbar-track { background: transparent; }
 
   /* \u2500\u2500 Cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
   .card {
@@ -3873,8 +5004,33 @@ function renderExportOverlay(state, t) {
       </div>
     </div>`;
 }
+var TRACKER_INPUT_STYLE = "flex:1;min-width:180px;padding:5px 8px;background:#161b22;border:1px solid #30363d;border-radius:5px;color:#c9d1d9;font-size:12px;outline:none";
+function renderIssueTrackerCard(state, t) {
+  const { issueTrackerProviderId, issueTrackerParams } = state;
+  const provider = findIssueTrackerProvider(issueTrackerProviderId) ?? ISSUE_TRACKER_PROVIDERS[0];
+  const values = issueTrackerParams[provider.id] ?? {};
+  const options = ISSUE_TRACKER_PROVIDERS.map(
+    (p) => `<option value="${escAttr(p.id)}" ${provider.id === p.id ? "selected" : ""}>${escHtml(t(p.labelKey))}</option>`
+  ).join("");
+  const fields = provider.fields.map((f) => `
+        <div class="field-row">
+          <span class="field-label">${escHtml(t(f.labelKey))}</span>
+          <input type="text" data-tracker-field="${escAttr(f.key)}" value="${escAttr(values[f.key] ?? "")}"
+            placeholder="${escAttr(t(f.placeholderKey))}" style="${TRACKER_INPUT_STYLE}" />
+        </div>`).join("");
+  return `
+      <div class="card card-wide">
+        <div class="card-hd">${t("CONFIG.ISSUE_TRACKER_SECTION")}</div>
+        <div class="field-row">
+          <span class="field-label">${t("CONFIG.ISSUE_TRACKER_LABEL")}</span>
+          <select id="issue-tracker-provider">${options}</select>
+        </div>
+        ${fields}
+        <div class="check-sub issue-tracker-disclaimer" style="margin-top:8px">${t("CONFIG.ISSUE_TRACKER_DISCLAIMER")}</div>
+      </div>`;
+}
 function renderConfiguration(state, t) {
-  const { selectedLanguage, advancedHttpConfig, selectorStrategy, filesystemGranted, cypressFolderName, smartSelectorEnabled, startHidden, resumeTtlMinutes } = state;
+  const { selectedLanguage, advancedHttpConfig, fixtureMode, selectorStrategy, filesystemGranted, cypressFolderName, smartSelectorEnabled, startHidden, resumeTtlMinutes } = state;
   const langOptions = LANGS.map(
     (l) => `<option value="${l.value}" ${selectedLanguage === l.value ? "selected" : ""}>${l.label}</option>`
   ).join("");
@@ -3902,6 +5058,18 @@ function renderConfiguration(state, t) {
         </label>
       </div>
 
+      <!-- HTTP Fixtures -->
+      <div class="card">
+        <div class="card-hd">${t("CONFIG.FIXTURE_SECTION")}</div>
+        <label class="check-row">
+          <input type="checkbox" id="fixture-toggle" ${fixtureMode ? "checked" : ""} />
+          <div>
+            <div class="check-title">${t("CONFIG.FIXTURE_TITLE")}</div>
+            <div class="check-sub">${t("CONFIG.FIXTURE_SUB")}</div>
+          </div>
+        </label>
+      </div>
+
       <!-- Smart Selector -->
       <div class="card">
         <div class="card-hd">${t("CONFIG.SMART_SELECTOR_SECTION")}</div>
@@ -3983,6 +5151,9 @@ function renderConfiguration(state, t) {
         </div>
       </div>
 
+      <!-- Issue tracker (spec 014) -->
+      ${renderIssueTrackerCard(state, t)}
+
       <!-- Data -->
       <div class="card card-wide">
         <div class="card-hd">${t("CONFIG.DATA_SECTION")}</div>
@@ -4006,10 +5177,13 @@ var ConfigurationElement = class extends HTMLElement {
   translation;
   selectedLanguage = "es";
   advancedHttpConfig = false;
+  fixtureMode = false;
   selectorStrategy = "data-cy";
   smartSelectorEnabled = true;
   startHidden = false;
   resumeTtlMinutes = DEFAULT_RESUME_TTL_MINUTES;
+  issueTrackerProviderId = DEFAULT_ISSUE_TRACKER_PROVIDER_ID;
+  issueTrackerParams = {};
   isExporting = false;
   exportMode = "all";
   exportTests = [];
@@ -4021,6 +5195,7 @@ var ConfigurationElement = class extends HTMLElement {
     super();
     this.shadow = this.attachShadow({ mode: "open" });
     this.advancedHttpConfig = localStorage.getItem("extendedHttpCommands") === "true";
+    this.fixtureMode = localStorage.getItem("fixtureMode") === "true";
   }
   connectedCallback() {
     if (!this.persistence) this.persistence = new PersistenceService();
@@ -4038,6 +5213,7 @@ var ConfigurationElement = class extends HTMLElement {
       this.translation.setLang(this.selectedLanguage);
     }
     this.advancedHttpConfig = localStorage.getItem("extendedHttpCommands") === "true";
+    this.fixtureMode = localStorage.getItem("fixtureMode") === "true";
     this.selectorStrategy = config?.["selectorStrategy"] ?? "data-cy";
     this.smartSelectorEnabled = config?.["smartSelectorEnabled"] !== "false";
     this.startHidden = config?.["startHidden"] === "true";
@@ -4049,6 +5225,12 @@ var ConfigurationElement = class extends HTMLElement {
     this.filesystemGranted = config?.["allowReadWriteFiles"] === "true";
     const handle = config?.["cypressDirectoryHandle"];
     this.cypressFolderName = handle?.name ?? null;
+    if (config?.["issueTrackerProviderId"] !== void 0) {
+      this.issueTrackerProviderId = config["issueTrackerProviderId"];
+    }
+    if (config?.["issueTrackerParams"] !== void 0) {
+      this.issueTrackerParams = config["issueTrackerParams"];
+    }
     this.render();
   }
   async onLanguageChange(lang) {
@@ -4063,6 +5245,12 @@ var ConfigurationElement = class extends HTMLElement {
     this.persistence.setConfig({ extendedHttpCommands: checked ? "true" : "false" });
     this.render();
   }
+  onFixtureModeChange(checked) {
+    this.fixtureMode = checked;
+    localStorage.setItem("fixtureMode", checked ? "true" : "false");
+    this.persistence.setConfig({ fixtureMode: checked ? "true" : "false" });
+    this.render();
+  }
   async onStartHiddenChange(checked) {
     this.startHidden = checked;
     await this.persistence.setConfig({ startHidden: checked ? "true" : "false" });
@@ -4075,6 +5263,20 @@ var ConfigurationElement = class extends HTMLElement {
     await this.persistence.setConfig({ [RESUME_TTL_CONFIG_KEY]: safe });
     this.render();
   }
+  /** Selects the issue-tracker provider (link-only, no sync — spec 014). */
+  async onIssueTrackerProviderChange(id) {
+    this.issueTrackerProviderId = id;
+    await this.persistence.setConfig({ issueTrackerProviderId: id });
+    this.render();
+  }
+  /** Stores a provider field value, scoped to the active provider so switching keeps values. */
+  async onIssueTrackerParamChange(fieldKey, value) {
+    const providerId = this.issueTrackerProviderId;
+    const current = { ...this.issueTrackerParams[providerId] ?? {} };
+    current[fieldKey] = value;
+    this.issueTrackerParams = { ...this.issueTrackerParams, [providerId]: current };
+    await this.persistence.setConfig({ issueTrackerParams: this.issueTrackerParams });
+  }
   onResetWidgetPosition() {
     this.dispatchEvent(new CustomEvent("resetwidgetposition", { bubbles: true, composed: true }));
     showToast(this.t("CONFIG.WIDGET_POSITION_RESET_DONE"));
@@ -4181,12 +5383,15 @@ var ConfigurationElement = class extends HTMLElement {
     this.shadow.innerHTML = `<style>${CONFIGURATION_STYLES}</style>${renderConfiguration({
       selectedLanguage: this.selectedLanguage,
       advancedHttpConfig: this.advancedHttpConfig,
+      fixtureMode: this.fixtureMode,
       selectorStrategy: this.selectorStrategy,
       filesystemGranted: this.filesystemGranted,
       cypressFolderName: this.cypressFolderName,
       smartSelectorEnabled: this.smartSelectorEnabled,
       startHidden: this.startHidden,
       resumeTtlMinutes: this.resumeTtlMinutes,
+      issueTrackerProviderId: this.issueTrackerProviderId,
+      issueTrackerParams: this.issueTrackerParams,
       isExporting: this.isExporting,
       exportMode: this.exportMode,
       exportTests: this.exportTests,
@@ -4202,6 +5407,10 @@ var ConfigurationElement = class extends HTMLElement {
       "change",
       (e) => this.onAdvancedHttpConfigChange(e.target.checked)
     );
+    this.shadow.getElementById("fixture-toggle").addEventListener(
+      "change",
+      (e) => this.onFixtureModeChange(e.target.checked)
+    );
     this.shadow.getElementById("smart-selector-toggle").addEventListener(
       "change",
       (e) => this.onSmartSelectorChange(e.target.checked)
@@ -4219,6 +5428,16 @@ var ConfigurationElement = class extends HTMLElement {
       "change",
       (e) => this.onSelectorStrategyChange(e.target.value)
     );
+    this.shadow.getElementById("issue-tracker-provider")?.addEventListener(
+      "change",
+      (e) => this.onIssueTrackerProviderChange(e.target.value)
+    );
+    this.shadow.querySelectorAll("[data-tracker-field]").forEach(
+      (el) => el.addEventListener(
+        "change",
+        () => this.onIssueTrackerParamChange(el.dataset["trackerField"] ?? "", el.value)
+      )
+    );
     this.shadow.getElementById("btn-change-folder")?.addEventListener("click", () => this.changeFolder());
     this.shadow.getElementById("btn-revoke")?.addEventListener("click", () => this.revokeAccess());
     this.shadow.getElementById("btn-export")?.addEventListener("click", () => this.openExportDialog());
@@ -4821,6 +6040,9 @@ var FILE_PREVIEW_STYLES = `
   .file-name { flex: 1; font-size: 12px; color: #8b949e;
                font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; }
   .body { display: flex; flex: 1; overflow: hidden; min-height: 0; }
+  /* Host for the CodeMirror editor (or the textarea fallback). */
+  .editor-host { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
+  .editor-host .cm-editor { flex: 1; min-height: 0; }
   .editor {
     flex: 1; min-width: 0; padding: 14px;
     background: #0d1117; color: #c9d1d9; border: none; outline: none;
@@ -5010,7 +6232,7 @@ function renderFilePreview(state, t) {
         <button id="btn-copy" title="${t("FILE_PREVIEW.COPY_TITLE")}">\u{1F4CB}</button>
       </div>
       <div class="body">
-        ${showDiff ? `<div class="diff-panel" id="diff-panel">${buildDiffHtml(originalContent ?? "", currentContent, t)}</div>` : `<textarea class="editor" id="editor" spellcheck="false">${escHtml(fileContent ?? "")}</textarea>`}
+        ${showDiff ? `<div class="diff-panel" id="diff-panel">${buildDiffHtml(originalContent ?? "", currentContent, t)}</div>` : `<div class="editor-host" id="editor-host"><textarea class="editor" id="editor" spellcheck="false">${escHtml(fileContent ?? "")}</textarea></div>`}
         ${blocksPanelHtml}
       </div>
       ${runResultHtml}
@@ -5028,6 +6250,7 @@ function renderFilePreview(state, t) {
 var FilePreviewElement = class extends HTMLElement {
   shadow;
   textarea = null;
+  editor = null;
   fileName = null;
   closeLabel = "";
   translation = translationService;
@@ -5053,20 +6276,29 @@ var FilePreviewElement = class extends HTMLElement {
     if (!this.closeLabel) this.closeLabel = this.translation.translate("FILE_PREVIEW.CLOSE_BTN");
     this.render();
   }
+  disconnectedCallback() {
+    this.editor?.destroy();
+    this.editor = null;
+  }
   t(key) {
     return this.translation.translate(key);
   }
+  /** Current editor content (CodeMirror if upgraded, else the textarea/fallback). */
+  currentValue() {
+    return this.editor?.getValue() ?? this.textarea?.value ?? this._fileContent ?? "";
+  }
   get fileContent() {
     return this._fileContent;
   }
   set fileContent(v) {
     if (this._originalContent === null) this._originalContent = v;
     this._fileContent = v;
-    if (this.textarea) this.textarea.value = v ?? "";
+    if (this.editor) this.editor.setValue(v ?? "");
+    else if (this.textarea) this.textarea.value = v ?? "";
     else this.render();
   }
   saveFile() {
-    const content = this.textarea?.value ?? this._fileContent ?? "";
+    const content = this.currentValue();
     this.dispatchEvent(new CustomEvent("save", { detail: content, bubbles: true, composed: true }));
   }
   onClose() {
@@ -5115,7 +6347,7 @@ var FilePreviewElement = class extends HTMLElement {
    * (and warns) when the file has no valid describe() block to insert into.
    */
   insertBlocks() {
-    const base = this.textarea?.value ?? this._fileContent ?? "";
+    const base = this.currentValue();
     let content = base;
     if (this.interceptorsBlock) {
       const merged = advancedTestTransformationService.insertBeforeEach(content, this.interceptorsBlock);
@@ -5135,12 +6367,14 @@ var FilePreviewElement = class extends HTMLElement {
     showToast(this.t("FILE_PREVIEW.INSERT_DONE"));
   }
   render() {
+    this.editor?.destroy();
+    this.editor = null;
     this.shadow.innerHTML = `<style>${FILE_PREVIEW_STYLES}</style>${renderFilePreview({
       fileName: this.fileName,
       showDiff: this._showDiff,
       fileContent: this._fileContent,
       originalContent: this._originalContent,
-      currentContent: this.textarea?.value ?? this._fileContent ?? "",
+      currentContent: this._fileContent ?? "",
       itBlock: this.itBlock,
       interceptorsBlock: this.interceptorsBlock,
       closeLabel: this.closeLabel,
@@ -5154,12 +6388,13 @@ var FilePreviewElement = class extends HTMLElement {
       this.textarea.addEventListener("input", () => {
         this._fileContent = ta.value;
       });
+      void this.upgradeEditor();
     }
     this.shadow.getElementById("btn-save")?.addEventListener("click", () => this.saveFile());
     this.shadow.getElementById("btn-close")?.addEventListener("click", () => this.onClose());
     this.shadow.getElementById("btn-launch")?.addEventListener("click", () => this.launchTest());
     this.shadow.getElementById("btn-copy")?.addEventListener("click", () => {
-      this.copyToClipboard(this.textarea?.value ?? this._fileContent ?? "");
+      this.copyToClipboard(this.currentValue());
     });
     this.shadow.getElementById("btn-diff")?.addEventListener("click", () => this.toggleDiff());
     this.shadow.getElementById("btn-insert")?.addEventListener("click", () => this.insertBlocks());
@@ -5170,11 +6405,188 @@ var FilePreviewElement = class extends HTMLElement {
       this.copyToClipboard(this.interceptorsBlock);
     });
   }
+  /**
+   * Lazily upgrades the textarea to a CodeMirror editor (syntax highlight +
+   * Cypress autocomplete). On any failure the textarea is left in place, so the
+   * editor degrades gracefully when CodeMirror can't load.
+   */
+  async upgradeEditor() {
+    const host = this.shadow.getElementById("editor-host");
+    const ta = this.textarea;
+    if (!host || !ta) return;
+    try {
+      const handle = await createCodeEditor({
+        parent: host,
+        root: this.shadow,
+        doc: this._fileContent ?? "",
+        onChange: (value) => {
+          this._fileContent = value;
+        }
+      });
+      if (!host.isConnected) {
+        handle.destroy();
+        return;
+      }
+      ta.remove();
+      this.textarea = null;
+      this.editor = handle;
+    } catch {
+    }
+  }
 };
 if (!customElements.get("file-preview")) {
   customElements.define("file-preview", FilePreviewElement);
 }
 
+// src/components/help-panel/help-panel.styles.ts
+var HELP_PANEL_STYLES = `
+  :host { display: block; }
+  *, *::before, *::after { box-sizing: border-box; }
+
+  .help-tabs {
+    display: flex;
+    gap: 4px;
+    border-bottom: 1px solid #21262d;
+    margin-bottom: 8px;
+  }
+  .help-tab {
+    appearance: none;
+    border: none;
+    background: transparent;
+    color: #8b949e;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 8px 12px;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    transition: color .12s, border-color .12s;
+  }
+  .help-tab:hover { color: #c9d1d9; }
+  .help-tab.active { color: #e6edf3; border-bottom-color: #2f81f7; }
+
+  .help-panel {
+    max-height: 60vh;
+    overflow-y: auto;
+    padding: 4px 6px 8px;
+    color: #c9d1d9;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-size: 13px;
+    line-height: 1.55;
+  }
+
+  .help-intro {
+    margin: 0 0 12px;
+    color: #8b949e;
+    font-size: 12px;
+  }
+
+  .help-sec { margin: 0 0 14px; }
+
+  .help-sec-hd {
+    margin: 0 0 6px;
+    font-size: 12px;
+    font-weight: 700;
+    color: #e6edf3;
+    letter-spacing: .3px;
+    border-bottom: 1px solid #21262d;
+    padding-bottom: 4px;
+  }
+
+  .help-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .help-list li {
+    padding: 3px 0 3px 14px;
+    position: relative;
+    color: #c9d1d9;
+  }
+
+  .help-list li::before {
+    content: '\xB7';
+    position: absolute;
+    left: 3px;
+    color: #2f81f7;
+    font-weight: 700;
+  }
+`;
+
+// src/components/help-panel/help-panel.template.ts
+init_html_utils();
+var REFERENCE_SECTIONS = [
+  { title: "HELP.SEC_RECORDING", items: ["HELP.RECORDING_1", "HELP.RECORDING_2"] },
+  {
+    title: "HELP.SEC_SHORTCUTS",
+    items: ["HELP.SC_RECORD", "HELP.SC_PAUSE", "HELP.SC_TESTS", "HELP.SC_COMMANDS", "HELP.SC_CONFIG", "HELP.SC_VISIBILITY", "HELP.SC_HELP"]
+  },
+  {
+    title: "HELP.SEC_CAPTURED",
+    items: ["HELP.CAP_CLICK", "HELP.CAP_DBLCLICK", "HELP.CAP_RIGHTCLICK", "HELP.CAP_TYPE", "HELP.CAP_CHECK", "HELP.CAP_SELECT", "HELP.CAP_KEYS", "HELP.CAP_ROUTE", "HELP.CAP_HTTP"]
+  },
+  { title: "HELP.SEC_ASSERT", items: ["HELP.ASSERT_1", "HELP.ASSERT_2"] },
+  { title: "HELP.SEC_PANELS", items: ["HELP.PANEL_TESTS", "HELP.PANEL_COMMANDS", "HELP.PANEL_CONFIG", "HELP.PANEL_FILES"] },
+  { title: "HELP.SEC_SELECTOR", items: ["HELP.SELECTOR_1", "HELP.SELECTOR_2"] },
+  { title: "HELP.SEC_DATA", items: ["HELP.DATA_1", "HELP.DATA_2"] },
+  { title: "HELP.SEC_ADVANCED", items: ["HELP.ADV_INVISIBLE", "HELP.ADV_RUNNER", "HELP.ADV_CROSSAPP", "HELP.ADV_DRAG"] }
+];
+var GUIDE_SECTIONS = [
+  { title: "HELP.G_SEC_WORKFLOW", items: ["HELP.G_WF_1", "HELP.G_WF_2", "HELP.G_WF_3", "HELP.G_WF_4", "HELP.G_WF_5"] },
+  { title: "HELP.G_SEC_COVERED", items: ["HELP.G_COV_1", "HELP.G_COV_2", "HELP.G_COV_3", "HELP.G_COV_4", "HELP.G_COV_5", "HELP.G_COV_6"] },
+  { title: "HELP.G_SEC_NOTCOVERED", items: ["HELP.G_NC_1", "HELP.G_NC_2", "HELP.G_NC_3", "HELP.G_NC_4", "HELP.G_NC_5", "HELP.G_NC_6"] }
+];
+function sectionsHtml(sections, t) {
+  return sections.map(
+    (s) => `
+        <section class="help-sec">
+          <h3 class="help-sec-hd">${escHtml(t(s.title))}</h3>
+          <ul class="help-list">${s.items.map((k) => `<li>${escHtml(t(k))}</li>`).join("")}</ul>
+        </section>`
+  ).join("");
+}
+function renderHelpPanel(t, activeTab = "reference") {
+  const tab = (id, key) => `<button class="help-tab ${activeTab === id ? "active" : ""}" data-tab="${id}">${escHtml(t(key))}</button>`;
+  const body = activeTab === "guide" ? `<p class="help-intro">${escHtml(t("HELP.GUIDE_INTRO"))}</p>${sectionsHtml(GUIDE_SECTIONS, t)}` : `<p class="help-intro">${escHtml(t("HELP.INTRO"))}</p>${sectionsHtml(REFERENCE_SECTIONS, t)}`;
+  return `
+    <div class="help-root">
+      <div class="help-tabs" role="tablist">
+        ${tab("reference", "HELP.TAB_REFERENCE")}
+        ${tab("guide", "HELP.TAB_GUIDE")}
+      </div>
+      <div class="help-panel" data-tab-panel="${activeTab}">${body}</div>
+    </div>`;
+}
+
+// src/components/help-panel/help-panel.ts
+var HelpPanelElement = class extends HTMLElement {
+  shadow;
+  activeTab = "reference";
+  translation;
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    if (!this.translation) this.translation = new TranslationService();
+    this.render();
+  }
+  render() {
+    this.shadow.innerHTML = `<style>${HELP_PANEL_STYLES}</style>${renderHelpPanel(this.translation.translate.bind(this.translation), this.activeTab)}`;
+    this.shadow.querySelectorAll("[data-tab]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        this.activeTab = btn.dataset["tab"] ?? "reference";
+        this.render();
+      });
+    });
+  }
+};
+if (!customElements.get("help-panel")) {
+  customElements.define("help-panel", HelpPanelElement);
+}
+
 // src/components/lib-e2e-recorder/lib-e2e-recorder.ts
 var import_sweetalert2 = __toESM(require("sweetalert2"), 1);
 
@@ -5182,22 +6594,15 @@ var import_sweetalert2 = __toESM(require("sweetalert2"), 1);
 var DIRECTIONS = ["up-left", "up-right", "down-left", "down-right"];
 function directionBlocks() {
   return DIRECTIONS.map((dir) => {
-    const sx = dir.endsWith("left") ? -1 : 1;
-    const sy = dir.startsWith("up") ? -1 : 1;
     const tv = dir.startsWith("up") ? "bottom" : "top";
     const th = dir.endsWith("left") ? "right" : "left";
     const ov = tv === "bottom" ? "top" : "bottom";
     const oh = th === "right" ? "left" : "right";
     const sel = `.widget[data-expand="${dir}"]`;
-    const labelGeneral = `${sel} .btn-action::after { ${oh}: calc(100% + 9px); ${th}: auto; top: 50%; bottom: auto; transform: translateY(-50%); }`;
-    const labelEnds = `${sel} .btn-action[data-n="1"]::after, ${sel} .btn-action[data-n="4"]::after { ${ov}: calc(100% + 9px); ${tv}: auto; left: 50%; right: auto; transform: translateX(-50%); }`;
     return `
-      ${sel} { --sx: ${sx}; --sy: ${sy}; }
-      ${sel} .btn-toggle { ${tv}: 24px; ${th}: 24px; ${ov}: auto; ${oh}: auto; }
-      ${sel} .btn-pause  { ${tv}: 78px; ${th}: 24px; ${ov}: auto; ${oh}: auto; }
-      ${sel} .btn-action { ${tv}: 28px; ${th}: 28px; ${ov}: auto; ${oh}: auto; }
-      ${labelGeneral}
-      ${labelEnds}
+      ${sel} .btn-toggle  { ${tv}: 24px; ${th}: 24px; ${ov}: auto; ${oh}: auto; }
+      ${sel} .btn-pause   { ${tv}: 78px; ${th}: 24px; ${ov}: auto; ${oh}: auto; }
+      ${sel} .action-menu { ${tv}: 118px; ${th}: 8px; ${ov}: auto; ${oh}: auto; transform-origin: ${tv} ${th}; }
     `;
   }).join("\n");
 }
@@ -5207,9 +6612,10 @@ function getRecorderStyles(rec, paused) {
     *, *::before, *::after { box-sizing: border-box; }
 
     /*
-     * Invisible 190\xD7190 hit area. Position (left/top) is set from JS so the
-     * widget can be dragged; --sx/--sy + data-expand orient the radial menu so
-     * it always expands toward the viewport interior. Defaults to bottom-right.
+     * Hit area. Position (left/top) is set from JS so the widget can be dragged;
+     * data-expand orients the action-menu popover toward the viewport interior.
+     * The menu is a DOM child, so hovering it keeps :host(.widget):hover alive even
+     * though it visually overflows this box. Defaults to bottom-right.
      */
     .widget {
       position: fixed;
@@ -5218,12 +6624,10 @@ function getRecorderStyles(rec, paused) {
       width: 190px;
       height: 190px;
       z-index: 2147483647;
-      --sx: -1;
-      --sy: -1;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     }
 
-    /* \u2500\u2500 Toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+    /* \u2500\u2500 Toggle (FAB) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
     .btn-toggle {
       position: absolute;
       bottom: 24px;
@@ -5276,83 +6680,58 @@ function getRecorderStyles(rec, paused) {
     .btn-pause:hover { transform: scale(1.12); }
     .btn-pause:active { transform: scale(0.93); }
 
-    /* \u2500\u2500 Action buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-    .btn-action {
+    /* \u2500\u2500 Action menu (labelled grid popover) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+    .action-menu {
       position: absolute;
-      bottom: 28px;
-      right: 28px;
-      width: 36px;
-      height: 36px;
-      border-radius: 50%;
-      border: none;
-      cursor: pointer;
-      font-size: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: rgba(13,17,23,.92);
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 4px;
+      padding: 8px;
+      width: 174px;
+      background: rgba(13,17,23,.97);
+      border: 1px solid rgba(48,54,61,.9);
+      border-radius: 12px;
+      box-shadow: 0 8px 28px rgba(0,0,0,.5);
       backdrop-filter: blur(14px);
       -webkit-backdrop-filter: blur(14px);
-      color: #8b949e;
-      box-shadow: 0 4px 18px rgba(0,0,0,.45), 0 0 0 1px rgba(48,54,61,.75);
       opacity: 0;
-      transform: scale(0.35);
-      pointer-events: none;
-      transition: opacity .15s, transform .18s ease-in,
-                  background .15s, color .12s, box-shadow .15s;
-    }
-
-    /* Label chip */
-    .btn-action::after {
-      content: attr(data-label);
-      position: absolute;
-      right: calc(100% + 9px);
-      top: 50%;
-      transform: translateY(-50%);
-      background: rgba(13,17,23,.95);
-      color: #e6edf3;
-      font-size: 11px;
-      font-weight: 500;
-      padding: 3px 9px;
-      border-radius: 6px;
-      white-space: nowrap;
+      transform: scale(0.9);
       pointer-events: none;
-      opacity: 0;
-      transition: opacity .15s .05s;
-      border: 1px solid rgba(48,54,61,.8);
-      box-shadow: 0 2px 8px rgba(0,0,0,.35);
+      transition: opacity .16s, transform .2s cubic-bezier(.34,1.56,.64,1);
+      z-index: 3;
     }
-    .btn-action:hover::after   { opacity: 1; }
-    .btn-action:hover          { background: #21262d; color: #e6edf3; }
-    .btn-action:active         { background: #30363d !important; }
-
-    /* Expand: spring + stagger */
-    .widget:hover .btn-action {
+    .widget:hover .action-menu {
       opacity: 1;
+      transform: scale(1);
       pointer-events: all;
-      transition: opacity .2s, transform .32s cubic-bezier(.34,1.56,.64,1),
-                  background .15s, color .12s, box-shadow .15s;
     }
 
-    /* Arc positions \u2014 signs come from --sx/--sy (data-expand) */
-    .widget:hover .btn-action[data-n="1"] {   /* vertical extreme */
-      transform: translateY(calc(var(--sy) * 90px)) scale(1);
-      transition-delay: .03s;
-    }
-    .widget:hover .btn-action[data-n="2"] {   /* diagonal near-vertical */
-      transform: translate(calc(var(--sx) * 45px), calc(var(--sy) * 78px)) scale(1);
-      transition-delay: .07s;
-    }
-    .widget:hover .btn-action[data-n="3"] {   /* diagonal near-horizontal */
-      transform: translate(calc(var(--sx) * 78px), calc(var(--sy) * 45px)) scale(1);
-      transition-delay: .11s;
+    .action-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 3px;
+      padding: 8px 4px;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      background: transparent;
+      color: #c9d1d9;
+      font-size: 18px;
+      line-height: 1;
+      transition: background .12s;
     }
-    .widget:hover .btn-action[data-n="4"] {   /* horizontal extreme */
-      transform: translateX(calc(var(--sx) * 90px)) scale(1);
-      transition-delay: .15s;
+    .action-item:hover { background: #21262d; }
+    .action-item .label {
+      font-size: 9px;
+      font-weight: 500;
+      color: #8b949e;
+      white-space: nowrap;
     }
+    .action-item:hover .label { color: #e6edf3; }
 
-    /* Per-direction anchors + label sides */
+    /* Per-direction anchors */
     ${directionBlocks()}
 
     /* \u2500\u2500 REC / PAUSED badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -5386,14 +6765,18 @@ function getRecorderStyles(rec, paused) {
 function renderRecorderWidget(rec, paused, t) {
   return `
     <div class="widget">
-      <button class="btn-action" data-n="1" data-action="config"
-              data-label="${t("RECORDER.BTN_CONFIG")}">\u2699\uFE0F</button>
-      <button class="btn-action" data-n="2" data-action="browse"
-              data-label="${t("RECORDER.BTN_FILES")}">\u{1F4C1}</button>
-      <button class="btn-action" data-n="3" data-action="commands"
-              data-label="${t("RECORDER.BTN_COMMANDS")}">\u2328\uFE0F</button>
-      <button class="btn-action" data-n="4" data-action="tests"
-              data-label="${t("RECORDER.BTN_TESTS")}">\u{1F4CB}</button>
+      <div class="action-menu">
+        <button class="action-item" data-action="config">
+          <span class="ico">\u2699\uFE0F</span><span class="label">${t("RECORDER.BTN_CONFIG")}</span></button>
+        <button class="action-item" data-action="browse">
+          <span class="ico">\u{1F4C1}</span><span class="label">${t("RECORDER.BTN_FILES")}</span></button>
+        <button class="action-item" data-action="commands">
+          <span class="ico">\u2328\uFE0F</span><span class="label">${t("RECORDER.BTN_COMMANDS")}</span></button>
+        <button class="action-item" data-action="tests">
+          <span class="ico">\u{1F4CB}</span><span class="label">${t("RECORDER.BTN_TESTS")}</span></button>
+        <button class="action-item" data-action="help">
+          <span class="ico">\u2753</span><span class="label">${t("RECORDER.BTN_HELP")}</span></button>
+      </div>
       <button class="btn-pause" data-action="pause"
               title="${paused ? t("RECORDER.RESUME_TITLE") : t("RECORDER.PAUSE_TITLE")}">
         ${paused ? "\u25B6" : "\u23F8"}
@@ -5431,6 +6814,7 @@ var LibE2eRecorderElement = class extends HTMLElement {
   _previsualizerRef = null;
   httpMonitor;
   smartSelectorEnabled = true;
+  _needsRecordingRebuild = false;
   recording;
   persistence;
   translation;
@@ -5444,6 +6828,7 @@ var LibE2eRecorderElement = class extends HTMLElement {
   isSaveTestDialogOpen = false;
   isSettingsDialogOpen = false;
   isAdvancedEditorDialogOpen = false;
+  isHelpDialogOpen = false;
   constructor() {
     super();
     this.shadow = this.attachShadow({ mode: "open" });
@@ -5456,7 +6841,10 @@ var LibE2eRecorderElement = class extends HTMLElement {
     if (!this.getAttribute("data-cy")) {
       this.setAttribute("data-cy", "lib-e2e-cypress-for-dummys");
     }
-    if (!this.recording) this.recording = new RecordingService();
+    if (!this.recording || this._needsRecordingRebuild) {
+      this.recording = new RecordingService();
+      this._needsRecordingRebuild = false;
+    }
     if (!this.persistence) this.persistence = new PersistenceService();
     if (!this.translation) this.translation = new TranslationService();
     this.httpMonitor = new HttpMonitor(this.recording);
@@ -5497,6 +6885,7 @@ var LibE2eRecorderElement = class extends HTMLElement {
     if (this.widgetResize) window.removeEventListener("resize", this.widgetResize);
     this.httpMonitor?.uninstall();
     this.recording.destroy();
+    this._needsRecordingRebuild = true;
   }
   async initHttpConfig() {
     const config = await this.persistence.getConfig("extendedHttpCommands");
@@ -5506,6 +6895,8 @@ var LibE2eRecorderElement = class extends HTMLElement {
     } else {
       localStorage.setItem("extendedHttpCommands", config["extendedHttpCommands"] ?? "true");
     }
+    const fx = await this.persistence.getConfig("fixtureMode");
+    localStorage.setItem("fixtureMode", fx?.["fixtureMode"] ?? "false");
   }
   async initLanguage() {
     const config = await this.persistence.getConfig("language");
@@ -5708,6 +7099,7 @@ var LibE2eRecorderElement = class extends HTMLElement {
     widget.setAttribute("data-expand", this.expandDir);
   }
   beginWidgetDrag(e) {
+    this.suppressNextToggleClick = false;
     const origin = this.togglePos ?? defaultTogglePosition(window.innerWidth, window.innerHeight);
     this.dragState = { startX: e.clientX, startY: e.clientY, origX: origin.x, origY: origin.y, moved: false };
   }
@@ -5772,6 +7164,9 @@ var LibE2eRecorderElement = class extends HTMLElement {
     } else if (key === "3") {
       event.preventDefault();
       this.showSettingsDialog();
+    } else if (key === "h" && event.shiftKey) {
+      event.preventDefault();
+      this.showHelpDialog();
     }
   }
   toggleVisibility() {
@@ -5955,7 +7350,9 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
             const type = document.getElementById("assert-type").value;
             const val = document.getElementById("assert-value").value.trim();
             if (!sel) return;
-            const cmd = NO_VALUE_ASSERTIONS.has(type) || !val ? `cy.get('${sel}').should('${type}')` : `cy.get('${sel}').should('${type}', '${val}')`;
+            const s = escapeSingleQuotes(sel);
+            const v = escapeSingleQuotes(val);
+            const cmd = NO_VALUE_ASSERTIONS.has(type) || !val ? `cy.get('${s}').should('${type}')` : `cy.get('${s}').should('${type}', '${v}')`;
             this.recording.appendCommand(cmd);
             document.getElementById("assert-selector").value = "";
             document.getElementById("assert-value").value = "";
@@ -6011,15 +7408,19 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
           if (!container) return;
           const child = document.createElement("save-test");
           child.translation = this.translation;
+          this.persistence.getGeneralConfig().then((config) => {
+            const providerId = config?.["issueTrackerProviderId"];
+            if (providerId) child.issueTrackerProviderId = providerId;
+          });
           container.appendChild(child);
           child.addEventListener("savetest", (e) => {
-            const { description, notes, tags } = e.detail ?? {};
-            this.onSaveTest(description ?? null, tags ?? [], notes ?? "");
+            const { description, notes, tags, ticketId } = e.detail ?? {};
+            this.onSaveTest(description ?? null, tags ?? [], notes ?? "", ticketId ?? null);
             import_sweetalert2.default.close();
           });
           child.addEventListener("saveandexport", (e) => {
-            const { description, notes, tags } = e.detail ?? {};
-            this.onSaveAndExportTest(description ?? null, tags ?? [], notes ?? "");
+            const { description, notes, tags, ticketId } = e.detail ?? {};
+            this.onSaveAndExportTest(description ?? null, tags ?? [], notes ?? "", ticketId ?? null);
             import_sweetalert2.default.close();
           });
         },
@@ -6063,6 +7464,31 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
       this.resizePopup();
     });
   }
+  showHelpDialog() {
+    this.toggleModal("isHelpDialogOpen", () => {
+      import_sweetalert2.default.fire({
+        title: this.translation.translate("HELP.TITLE"),
+        html: '<div id="help-modal-content" style="padding:0"></div>',
+        showCloseButton: true,
+        showConfirmButton: false,
+        width: 560,
+        color: "#e6edf3",
+        didOpen: () => {
+          makeSwalDraggable();
+          setSwal2DataCyAttribute();
+          const container = document.getElementById("help-modal-content");
+          if (!container) return;
+          const child = document.createElement("help-panel");
+          child.translation = this.translation;
+          container.appendChild(child);
+        },
+        willClose: () => {
+          this.isHelpDialogOpen = false;
+        }
+      });
+      this.resizePopup();
+    });
+  }
   showAdvancedEditorDialog(testId) {
     this.toggleModal("isAdvancedEditorDialogOpen", () => {
       import_sweetalert2.default.fire({
@@ -6127,7 +7553,7 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
   showFileEditorDialog(handle, content, fileName, testId, itBlock = "", interceptorsBlock = "", notes = "") {
     import_sweetalert2.default.fire({
       title: this.translation.translate("RECORDER.FILE_EDITOR_TITLE"),
-      html: '<div id="file-editor-modal-content" style="padding:0;height:540px"></div>',
+      html: '<div id="file-editor-modal-content" style="flex:1;min-height:0;display:flex;flex-direction:column;padding:0"></div>',
       showCloseButton: false,
       showConfirmButton: false,
       allowOutsideClick: false,
@@ -6136,6 +7562,20 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
       didOpen: () => {
         makeSwalDraggable();
         setSwal2DataCyAttribute();
+        const popup = import_sweetalert2.default.getPopup();
+        if (popup) {
+          popup.style.height = "640px";
+          const htmlContainer = popup.querySelector(".swal2-html-container");
+          if (htmlContainer) {
+            htmlContainer.style.flex = "1";
+            htmlContainer.style.minHeight = "0";
+            htmlContainer.style.overflow = "hidden";
+            htmlContainer.style.padding = "0";
+            htmlContainer.style.margin = "0";
+            htmlContainer.style.display = "flex";
+            htmlContainer.style.flexDirection = "column";
+          }
+        }
         const container = document.getElementById("file-editor-modal-content");
         if (!container) return;
         const child = document.createElement("file-preview");
@@ -6168,18 +7608,22 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
     this.resizePopup();
   }
   // ── save handlers ─────────────────────────────────────────────────────────
-  async onSaveTest(description, tags = [], notes = "") {
+  async onSaveTest(description, tags = [], notes = "", ticketId = null) {
     if (description) {
-      await this.persistence.insertTest(description, this.cypressCommands, this.interceptors, tags, notes);
+      const fixtures = this.recording.getFixturesSnapshot();
+      await this.persistence.insertTest(description, this.cypressCommands, this.interceptors, tags, notes, ticketId ?? void 0);
+      await this.writeFixturesIfAny(fixtures);
       this.recording.clearCommands();
       this.clearRecordingHistory();
       this.cypressCommands = [];
       this.interceptors = [];
     }
   }
-  async onSaveAndExportTest(description, tags = [], notes = "") {
+  async onSaveAndExportTest(description, tags = [], notes = "", ticketId = null) {
     if (description) {
-      const id = await this.persistence.insertTest(description, this.cypressCommands, this.interceptors, tags, notes);
+      const fixtures = this.recording.getFixturesSnapshot();
+      const id = await this.persistence.insertTest(description, this.cypressCommands, this.interceptors, tags, notes, ticketId ?? void 0);
+      await this.writeFixturesIfAny(fixtures);
       this.recording.clearCommands();
       this.clearRecordingHistory();
       this.cypressCommands = [];
@@ -6187,6 +7631,16 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
       setTimeout(() => this.showAdvancedEditorDialog(id), 300);
     }
   }
+  /** Writes captured fixtures to cypress/fixtures and toasts the outcome (spec 012). */
+  async writeFixturesIfAny(fixtures) {
+    if (!fixtures.length) return;
+    try {
+      const n = await this.persistence.writeFixtures(fixtures);
+      showToast(`${this.translation.translate("RECORDER.FIXTURES_WRITTEN_TOAST")} (${n})`);
+    } catch {
+      showToast(this.translation.translate("RECORDER.FIXTURES_NO_FOLDER_TOAST"), false);
+    }
+  }
   // ── helpers ───────────────────────────────────────────────────────────────
   toggleModal(flag, openFn) {
     if (this[flag]) {
@@ -6222,6 +7676,7 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
     this.shadow.querySelector('[data-action="commands"]')?.addEventListener("click", () => this.showCommandsDialog());
     this.shadow.querySelector('[data-action="config"]')?.addEventListener("click", () => this.showSettingsDialog());
     this.shadow.querySelector('[data-action="browse"]')?.addEventListener("click", () => this.showAdvancedEditorDialog());
+    this.shadow.querySelector('[data-action="help"]')?.addEventListener("click", () => this.showHelpDialog());
     this.applyWidgetPosition();
   }
 };
@@ -6230,20 +7685,26 @@ if (!customElements.get("lib-e2e-recorder")) {
 }
 
 // src/index.ts
-var VERSION = "0.6.0";
+var VERSION = "0.8.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ACTIVE_SESSION_BREADCRUMB_KEY,
   AdvancedTestEditorElement,
   AdvancedTestTransformationService,
+  CHAIN_METHODS,
+  CYPRESS_COMPLETIONS,
+  CY_METHODS,
   ConfigurationElement,
   DB_SCHEMA,
   DB_STORE_NAMES,
+  DEFAULT_ISSUE_TRACKER_PROVIDER_ID,
   DEFAULT_RESUME_TTL_MINUTES,
   DRAG_THRESHOLD,
   FilePreviewElement,
+  HelpPanelElement,
   HttpMonitor,
   INPUT_TYPES,
+  ISSUE_TRACKER_PROVIDERS,
   LIB_E2E_CYPRESS_FOR_DUMMYS_SWAL2_STYLES,
   LOCALE_BY_LANG,
   LibE2eRecorderElement,
@@ -6256,6 +7717,7 @@ var VERSION = "0.6.0";
   SelectorPickerElement,
   Subject,
   TOGGLE_MARGIN,
+  TOP_LEVEL,
   TestEditorElement,
   TestPrevisualizerElement,
   TransformationService,
@@ -6264,9 +7726,16 @@ var VERSION = "0.6.0";
   advancedTestTransformationService,
   boxOffsetForDirection,
   boxTopLeftFor,
+  buildTicketComment,
+  buildTicketUrl,
   clampTogglePosition,
+  createCodeEditor,
   defaultTogglePosition,
+  filterCompletions,
+  filterCypressCompletions,
+  findIssueTrackerProvider,
   generateAlias,
+  inferAssertionCommand,
   injectStyles,
   isLang,
   isLocalHost,
@@ -6276,6 +7745,7 @@ var VERSION = "0.6.0";
   makeSwalDraggableByContentId,
   persistenceService,
   resolveExpandDirection,
+  resolveTicketUrl,
   selectTestsForExport,
   setSwal2DataCyAttribute,
   showToast,