siesa-agents 2.1.72-qa.2 → 2.1.72-qa.21

package/siesa-agents/resources/playwright-kit/tools/locator-overlay.js

@@ -0,0 +1,1306 @@
+/**
+ * Overlay del Grabador de Localizadores v4.0
+ * Dos modos: Inspect (Ctrl+Click) y Record (automático)
+ *
+ * Funciones expuestas esperadas (via page.exposeFunction):
+ *   window.__lrSaveJSON(json)             → { filename, filePath }
+ *   window.__lrGenerateTS(json)           → { filename, filePath, content }
+ *   window.__lrCaptureScreenshot(stepNum) → { filename, filePath }   (v4)
+ *   window.__lrSaveModule(json)           → { filename, filePath }   (v4)
+ *   window.__lrListModules()              → JSON string[]            (v4)
+ *   window.__lrLoadModule(name)           → JSON string              (v4)
+ *
+ * Mejoras v4.0:
+ *   - Assertions capturadas: clic derecho → menu contextual (texto/existe/valor)
+ *   - Screenshots / visual baseline: boton Screenshot → toHaveScreenshot()
+ *   - Modulos reutilizables: guardar/insertar secuencias JSON entre grabaciones
+ */
+(() => {
+  if (window.__locatorRecorder) return;
+  window.__locatorRecorder = true;
+
+  // Restaurar capturas de sessionStorage
+  let stored = null;
+  try { stored = sessionStorage.getItem('__lr_captures'); } catch {}
+  window.__capturedElements = stored ? JSON.parse(stored) : [];
+
+  function persistCaptures() {
+    try { sessionStorage.setItem('__lr_captures', JSON.stringify(window.__capturedElements)); } catch {}
+  }
+
+  // ── Estado de grabación (persistido en sessionStorage) ──
+  let isRecording = false;
+  let _lastRecSelector = null;
+  let _lastRecTime = 0;
+  let _lastRecElement = null;
+
+  function persistRecState() {
+    try { sessionStorage.setItem('__lr_recording', isRecording ? '1' : '0'); } catch {}
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // ESTILOS
+  // ═══════════════════════════════════════════════════════════════
+  const style = document.createElement('style');
+  style.textContent = `
+    #lr-tooltip {
+      position: fixed; z-index: 999999; pointer-events: none;
+      background: #1a1a2e; color: #eee; border: 2px solid #00ff88;
+      border-radius: 8px; padding: 10px 14px; font-family: 'Consolas', monospace;
+      font-size: 12px; max-width: 520px; box-shadow: 0 4px 20px rgba(0,255,136,0.3);
+      display: none; line-height: 1.5;
+    }
+    #lr-tooltip .lr-label { color: #888; font-size: 10px; text-transform: uppercase; }
+    #lr-tooltip .lr-value { color: #00ff88; font-weight: bold; }
+    #lr-tooltip .lr-value.lr-best { color: #ffd700; }
+    #lr-tooltip .lr-disabled { color: #ff4757; }
+
+    #lr-highlight {
+      position: fixed; z-index: 999998; pointer-events: none;
+      border: 2px dashed #00ff88; background: rgba(0,255,136,0.08);
+      border-radius: 3px; transition: all 0.1s ease; display: none;
+    }
+
+    #lr-panel {
+      position: fixed; top: 10px; right: 10px; z-index: 999997;
+      background: #1a1a2e; color: #eee; border: 2px solid #00b894;
+      border-radius: 10px; width: 440px; max-height: 90vh;
+      font-family: 'Segoe UI', sans-serif; font-size: 13px;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.5); overflow: hidden;
+      display: flex; flex-direction: column;
+      transition: border-color 0.3s, opacity 0.3s;
+      opacity: 0.25;
+    }
+    #lr-panel:hover {
+      opacity: 1;
+    }
+    #lr-panel-header {
+      background: #16213e; padding: 8px 12px; cursor: move;
+      border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center;
+    }
+    #lr-panel-header h3 { margin: 0; font-size: 13px; color: #00ff88; }
+    #lr-panel-header .lr-badge {
+      background: #00b894; color: #fff; border-radius: 12px; padding: 2px 8px; font-size: 10px;
+    }
+    .lr-window-btn {
+      background: none; border: 1px solid #555; color: #aaa; width: 22px; height: 22px;
+      border-radius: 4px; cursor: pointer; font-size: 13px; line-height: 1;
+      display: inline-flex; align-items: center; justify-content: center;
+      transition: all 0.15s; margin-left: 4px;
+    }
+    .lr-window-btn:hover { background: #333; color: #fff; border-color: #888; }
+
+    #lr-panel-recording {
+      padding: 8px 16px; background: #16213e; border-bottom: 1px solid #333;
+      display: flex; gap: 8px; align-items: center;
+    }
+    .lr-btn-rec {
+      padding: 5px 14px; border-radius: 5px; cursor: pointer;
+      font-size: 11px; font-weight: 700; transition: all 0.2s; border: 1px solid;
+    }
+    .lr-btn-rec:disabled { opacity: 0.3; cursor: not-allowed; }
+    .lr-btn-rec-start {
+      background: rgba(249,115,22,0.15); color: #f97316; border-color: #f97316;
+    }
+    .lr-btn-rec-start:hover:not(:disabled) { background: rgba(249,115,22,0.3); }
+    .lr-btn-rec-stop {
+      background: rgba(239,68,68,0.15); color: #ef4444; border-color: #ef4444;
+    }
+    .lr-btn-rec-stop:hover:not(:disabled) { background: rgba(239,68,68,0.3); }
+    #lr-rec-status {
+      font-family: Consolas, monospace; font-size: 10px; font-weight: 700;
+      padding: 2px 8px; border-radius: 4px; letter-spacing: 1px;
+    }
+    .lr-rec-active {
+      background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid #ef4444;
+      animation: lr-status-pulse 1.5s ease-in-out infinite;
+    }
+    .lr-rec-idle { color: #888; }
+    @keyframes lr-status-pulse {
+      0%,100% { opacity: 1; } 50% { opacity: 0.5; }
+    }
+
+    #lr-panel-group {
+      padding: 6px 16px; background: #16213e; border-bottom: 1px solid #333;
+      display: flex; gap: 8px; align-items: center;
+    }
+    #lr-panel-group .lr-group-label { color: #888; font-size: 11px; white-space: nowrap; }
+    #lr-panel-group input {
+      flex: 1; background: #0a0a1a; color: #ffd700; border: 1px solid #444;
+      border-radius: 4px; padding: 4px 8px; font-size: 12px;
+      font-family: Consolas, monospace; outline: none;
+    }
+    #lr-panel-group input:focus { border-color: #ffd700; }
+    #lr-panel-group .lr-group-info { color: #888; font-size: 10px; white-space: nowrap; }
+
+    #lr-panel-actions {
+      padding: 8px 16px; background: #16213e; border-bottom: 1px solid #333;
+      display: flex; gap: 6px; flex-wrap: wrap;
+    }
+    #lr-panel-actions button {
+      padding: 5px 12px; border: none; border-radius: 5px; cursor: pointer;
+      font-size: 11px; font-weight: 600; transition: opacity 0.2s;
+    }
+    #lr-panel-actions button:hover { opacity: 0.85; }
+    .lr-btn-detect { background: #6c5ce7; color: #fff; }
+    .lr-btn-clear  { background: #e74c3c; color: #fff; }
+    .lr-btn-export { background: #0984e3; color: #fff; }
+    .lr-btn-copy   { background: #00b894; color: #fff; }
+    .lr-btn-toggle { background: #fdcb6e; color: #333; }
+
+    #lr-panel-list { overflow-y: auto; flex: 1; padding: 8px 12px; max-height: 50vh; }
+
+    .lr-group-header {
+      color: #ffd700; font-weight: bold; font-size: 12px;
+      padding: 8px 4px 4px; border-bottom: 1px solid #333;
+      margin-top: 8px; display: flex; justify-content: space-between;
+    }
+    .lr-group-header:first-child { margin-top: 0; }
+    .lr-group-header .lr-group-count { color: #888; font-weight: normal; font-size: 10px; }
+
+    .lr-item {
+      background: #0f3460; border-radius: 6px; padding: 10px 12px; margin-bottom: 8px;
+      border-left: 4px solid #00b894; position: relative;
+    }
+    .lr-item:hover { background: #1a4a7a; }
+    .lr-item-click { border-left-color: #f97316; }
+    .lr-item-fill { border-left-color: #3b82f6; }
+    .lr-item-select { border-left-color: #a78bfa; }
+    .lr-item-disabled { border-left-color: #ff4757; }
+    .lr-item .lr-item-num { color: #00ff88; font-weight: bold; font-size: 11px; }
+    .lr-item .lr-item-tag { color: #ddd; font-size: 12px; }
+    .lr-item .lr-item-loc {
+      color: #ffd700; font-family: Consolas, monospace; font-size: 11px;
+      word-break: break-all; margin-top: 4px;
+    }
+    .lr-item .lr-item-extra { color: #aaa; font-size: 10px; margin-top: 2px; }
+    .lr-item .lr-item-value { color: #22c55e; font-family: Consolas, monospace; font-size: 11px; margin-top: 3px; }
+    .lr-item .lr-item-copy {
+      position: absolute; top: 8px; right: 8px; background: #00b894; color: #fff;
+      border: none; border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 10px;
+    }
+    .lr-item .lr-item-delete {
+      position: absolute; top: 8px; right: 56px; background: #e74c3c; color: #fff;
+      border: none; border-radius: 4px; padding: 2px 6px; cursor: pointer; font-size: 10px; font-weight: bold;
+    }
+    .lr-action-badge {
+      display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 6px;
+      border-radius: 3px; letter-spacing: 0.5px; margin-left: 6px;
+    }
+    .lr-action-click  { background: rgba(249,115,22,0.2); color: #f97316; }
+    .lr-action-fill   { background: rgba(59,130,246,0.2); color: #3b82f6; }
+    .lr-action-select { background: rgba(167,139,250,0.2); color: #a78bfa; }
+
+    #lr-panel-footer {
+      padding: 8px 16px; background: #16213e; border-top: 1px solid #333;
+      font-size: 10px; color: #888; text-align: center;
+    }
+
+    #lr-status {
+      position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%);
+      z-index: 999996; background: #1a1a2e; color: #00ff88; border: 1px solid #00b894;
+      border-radius: 20px; padding: 6px 18px; font-family: 'Segoe UI', sans-serif;
+      font-size: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+      transition: opacity 0.3s; opacity: 0;
+    }
+
+    #lr-stop-btn {
+      position: fixed; bottom: 20px; right: 20px;
+      background: #ef4444; color: #fff;
+      padding: 11px 20px; border-radius: 8px;
+      cursor: pointer; z-index: 2147483647;
+      border: 2px solid #fca5a5;
+      display: flex; align-items: center; gap: 8px;
+      font-size: 14px; user-select: none;
+      transition: all 0.2s;
+      animation: lr-rec-pulse 1.5s ease-in-out infinite;
+    }
+    #lr-stop-btn:hover { background: #b91c1c; transform: scale(1.06); }
+    @keyframes lr-rec-pulse {
+      0%,100% { box-shadow: 0 4px 20px rgba(239,68,68,0.5); }
+      50% { box-shadow: 0 4px 32px rgba(239,68,68,0.95); transform: scale(1.04); }
+    }
+
+    /* ── v4: Mejora 1 — Menu contextual de assertions (clic derecho) ── */
+    #lr-context-menu {
+      position: fixed; z-index: 2147483647; display: none;
+      background: #0a2a1e; color: #eee; border: 2px solid #10b981;
+      border-radius: 8px; padding: 6px 0; min-width: 230px;
+      font-family: 'Segoe UI', sans-serif; font-size: 12px;
+      box-shadow: 0 8px 28px rgba(16,185,129,0.35);
+    }
+    #lr-context-menu .lr-ctx-title {
+      color: #10b981; font-weight: 700; font-size: 10px; letter-spacing: 1px;
+      padding: 4px 14px 6px; border-bottom: 1px solid #134e3a; margin-bottom: 4px;
+      text-transform: uppercase;
+    }
+    #lr-context-menu .lr-ctx-item {
+      padding: 7px 14px; cursor: pointer; white-space: nowrap;
+      overflow: hidden; text-overflow: ellipsis; max-width: 340px;
+    }
+    #lr-context-menu .lr-ctx-item:hover { background: rgba(16,185,129,0.18); }
+    #lr-context-menu .lr-ctx-item .lr-ctx-val { color: #6ee7b7; font-family: Consolas, monospace; }
+    #lr-context-menu .lr-ctx-cancel { color: #888; border-top: 1px solid #134e3a; margin-top: 4px; }
+
+    /* badge + item assert en el panel */
+    .lr-action-assert { background: rgba(16,185,129,0.2); color: #10b981; }
+    .lr-action-screenshot { background: rgba(245,158,11,0.2); color: #f59e0b; }
+    .lr-item-assert { border-left-color: #10b981; }
+    .lr-item-screenshot { border-left-color: #f59e0b; }
+    .lr-item .lr-item-assert-detail { color: #10b981; font-family: Consolas, monospace; font-size: 11px; margin-top: 3px; }
+    .lr-item .lr-item-screenshot-detail { color: #f59e0b; font-family: Consolas, monospace; font-size: 11px; margin-top: 3px; }
+
+    /* ── v4: Mejora 2 — Boton Screenshot (amber) ── */
+    .lr-btn-screenshot { background: #f59e0b; color: #1a1a2e; }
+
+    /* ── v4: Mejora 3 — Modulos reutilizables (violeta) ── */
+    .lr-btn-module { background: #8b5cf6; color: #fff; }
+    #lr-module-dialog {
+      position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
+      z-index: 2147483647; display: none;
+      background: #1a1530; color: #eee; border: 2px solid #8b5cf6;
+      border-radius: 10px; padding: 18px 20px; width: 380px;
+      font-family: 'Segoe UI', sans-serif; font-size: 13px;
+      box-shadow: 0 12px 40px rgba(139,92,246,0.4);
+    }
+    #lr-module-dialog h4 { margin: 0 0 12px; color: #c4b5fd; font-size: 14px; }
+    #lr-module-dialog label { display: block; color: #aaa; font-size: 11px; margin: 8px 0 3px; }
+    #lr-module-dialog input, #lr-module-dialog textarea {
+      width: 100%; box-sizing: border-box; background: #0a0a1a; color: #c4b5fd;
+      border: 1px solid #4c3a7a; border-radius: 5px; padding: 6px 9px;
+      font-family: Consolas, monospace; font-size: 12px; outline: none;
+    }
+    #lr-module-dialog input:focus, #lr-module-dialog textarea:focus { border-color: #8b5cf6; }
+    #lr-module-dialog textarea { resize: vertical; min-height: 50px; }
+    #lr-module-dialog .lr-module-buttons {
+      display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px;
+    }
+    #lr-module-dialog .lr-module-buttons button {
+      padding: 6px 16px; border: none; border-radius: 5px; cursor: pointer;
+      font-size: 12px; font-weight: 600;
+    }
+    #lr-module-cancel { background: #e74c3c; color: #fff; }
+    #lr-module-confirm { background: #8b5cf6; color: #fff; }
+    #lr-module-list {
+      position: fixed; z-index: 2147483647; display: none;
+      background: #1a1530; color: #eee; border: 2px solid #8b5cf6;
+      border-radius: 8px; padding: 6px 0; min-width: 260px; max-height: 50vh;
+      overflow-y: auto; font-family: 'Segoe UI', sans-serif; font-size: 12px;
+      box-shadow: 0 8px 28px rgba(139,92,246,0.35);
+    }
+    #lr-module-list .lr-modlist-title {
+      color: #c4b5fd; font-weight: 700; font-size: 10px; letter-spacing: 1px;
+      padding: 4px 14px 6px; border-bottom: 1px solid #4c3a7a; margin-bottom: 4px;
+      text-transform: uppercase;
+    }
+    #lr-module-list .lr-modlist-item { padding: 7px 14px; cursor: pointer; }
+    #lr-module-list .lr-modlist-item:hover { background: rgba(139,92,246,0.18); }
+    #lr-module-list .lr-modlist-item .lr-modlist-meta { color: #888; font-size: 10px; }
+    #lr-module-list .lr-modlist-empty { padding: 10px 14px; color: #888; }
+  `;
+  document.head.appendChild(style);
+
+  // ═══════════════════════════════════════════════════════════════
+  // ELEMENTOS DOM
+  // ═══════════════════════════════════════════════════════════════
+  const tooltip = document.createElement('div');
+  tooltip.id = 'lr-tooltip';
+  document.body.appendChild(tooltip);
+
+  const highlight = document.createElement('div');
+  highlight.id = 'lr-highlight';
+  document.body.appendChild(highlight);
+
+  const statusBar = document.createElement('div');
+  statusBar.id = 'lr-status';
+  document.body.appendChild(statusBar);
+
+  const panel = document.createElement('div');
+  panel.id = 'lr-panel';
+  panel.innerHTML = `
+    <div id="lr-panel-header">
+      <h3>Grabador v4</h3>
+      <div style="display:flex;align-items:center;gap:4px;">
+        <span class="lr-badge" id="lr-count">0</span>
+        <button class="lr-window-btn" id="lr-btn-minimize" title="Minimizar (Esc)">&#8722;</button>
+        <button class="lr-window-btn" id="lr-btn-maximize" title="Maximizar / Restaurar">&#9633;</button>
+      </div>
+    </div>
+    <div id="lr-panel-recording">
+      <button class="lr-btn-rec lr-btn-rec-start" id="lr-btn-record">&#9210; Grabar</button>
+      <button class="lr-btn-rec lr-btn-rec-stop" id="lr-btn-stop" disabled>&#9209; Detener</button>
+      <span id="lr-rec-status" class="lr-rec-idle">LISTO</span>
+    </div>
+    <div id="lr-panel-group">
+      <span class="lr-group-label">Grupo:</span>
+      <input id="lr-group-input" type="text" value="General" placeholder="Nombre del grupo..." />
+      <span class="lr-group-info" id="lr-group-info"></span>
+    </div>
+    <div id="lr-panel-actions">
+      <button class="lr-btn-detect" id="lr-act-detect">Detectar</button>
+      <button class="lr-btn-copy" id="lr-act-copy">Copiar</button>
+      <button class="lr-btn-export" id="lr-act-json">JSON</button>
+      <button class="lr-btn-export" id="lr-act-ts">PW TS</button>
+      <button class="lr-btn-export" id="lr-act-robot">.robot</button>
+      <button class="lr-btn-export" id="lr-act-pwpy">PW PY</button>
+      <button class="lr-btn-export" id="lr-act-cypress">Cypress</button>
+      <button class="lr-btn-export" id="lr-act-gherkin">Gherkin</button>
+      <button class="lr-btn-export" id="lr-act-csv">CSV</button>
+      <button class="lr-btn-screenshot" id="lr-act-screenshot">Screenshot</button>
+      <button class="lr-btn-module" id="lr-act-save-module">Guardar modulo</button>
+      <button class="lr-btn-module" id="lr-act-insert-module">Insertar modulo</button>
+      <button class="lr-btn-clear" id="lr-act-clear">Limpiar</button>
+    </div>
+    <div id="lr-panel-list"></div>
+    <div id="lr-preview-container" style="display:none; padding:8px 12px;">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
+        <span style="color:#ffd700;font-size:12px;font-weight:bold;" id="lr-preview-title">Preview</span>
+        <div>
+          <button id="lr-preview-copy" style="background:#00b894;color:#fff;border:none;border-radius:4px;padding:3px 10px;cursor:pointer;font-size:11px;margin-right:4px;">Copiar</button>
+          <button id="lr-preview-close" style="background:#e74c3c;color:#fff;border:none;border-radius:4px;padding:3px 10px;cursor:pointer;font-size:11px;">Cerrar</button>
+        </div>
+      </div>
+      <textarea id="lr-preview-text" style="width:100%;height:250px;background:#0a0a1a;color:#00ff88;border:1px solid #333;border-radius:4px;font-family:Consolas,monospace;font-size:11px;padding:8px;resize:vertical;" readonly></textarea>
+    </div>
+    <div id="lr-panel-footer">Grabar = captura auto | Ctrl+Click = inspeccionar | Clic derecho = assert | Esc = minimizar</div>
+  `;
+  document.body.appendChild(panel);
+
+  // ── v4: Menu contextual de assertions (clic derecho) ──
+  const contextMenu = document.createElement('div');
+  contextMenu.id = 'lr-context-menu';
+  document.body.appendChild(contextMenu);
+
+  // ── v4: Dialog para guardar modulo ──
+  const moduleDialog = document.createElement('div');
+  moduleDialog.id = 'lr-module-dialog';
+  moduleDialog.innerHTML = `
+    <h4>Guardar modulo reutilizable</h4>
+    <label for="lr-module-name">Nombre (sin espacios, ej: login-erp)</label>
+    <input id="lr-module-name" type="text" placeholder="login-erp" />
+    <label for="lr-module-desc">Descripcion (opcional)</label>
+    <textarea id="lr-module-desc" placeholder="Login al ERP con usuario de pruebas"></textarea>
+    <div class="lr-module-buttons">
+      <button id="lr-module-cancel">Cancelar</button>
+      <button id="lr-module-confirm">Guardar</button>
+    </div>
+  `;
+  document.body.appendChild(moduleDialog);
+
+  // ── v4: Dropdown para insertar modulo ──
+  const moduleList = document.createElement('div');
+  moduleList.id = 'lr-module-list';
+  document.body.appendChild(moduleList);
+
+  // Vincular botones con addEventListener (más robusto que onclick inline)
+  document.getElementById('lr-btn-record').addEventListener('click', (e) => { e.stopPropagation(); window.__lrStartRec(); });
+  document.getElementById('lr-btn-stop').addEventListener('click', (e) => { e.stopPropagation(); window.__lrStopRec(); });
+  document.getElementById('lr-act-detect').addEventListener('click', (e) => { e.stopPropagation(); window.__lrDetectVisible(); });
+  document.getElementById('lr-act-copy').addEventListener('click', (e) => { e.stopPropagation(); window.__lrCopyAll(); });
+  document.getElementById('lr-act-json').addEventListener('click', (e) => { e.stopPropagation(); window.__lrExportJSON(); });
+  document.getElementById('lr-act-ts').addEventListener('click', (e) => { e.stopPropagation(); window.__lrExportTS(); });
+  document.getElementById('lr-act-robot').addEventListener('click', (e) => { e.stopPropagation(); window.__lrExportRobot(); });
+  document.getElementById('lr-act-pwpy').addEventListener('click', (e) => { e.stopPropagation(); window.__lrExportPwPy(); });
+  document.getElementById('lr-act-cypress').addEventListener('click', (e) => { e.stopPropagation(); window.__lrExportCypress(); });
+  document.getElementById('lr-act-gherkin').addEventListener('click', (e) => { e.stopPropagation(); window.__lrExportGherkin(); });
+  document.getElementById('lr-act-csv').addEventListener('click', (e) => { e.stopPropagation(); window.__lrExportCSV(); });
+  document.getElementById('lr-act-screenshot').addEventListener('click', (e) => { e.stopPropagation(); window.__lrTakeScreenshot(); });
+  document.getElementById('lr-act-save-module').addEventListener('click', (e) => { e.stopPropagation(); window.__lrShowSaveModule(); });
+  document.getElementById('lr-act-insert-module').addEventListener('click', (e) => { e.stopPropagation(); window.__lrShowInsertModule(); });
+  document.getElementById('lr-act-clear').addEventListener('click', (e) => { e.stopPropagation(); window.__lrClear(); });
+  document.getElementById('lr-module-cancel').addEventListener('click', (e) => { e.stopPropagation(); window.__lrCloseModuleDialog(); });
+  document.getElementById('lr-module-confirm').addEventListener('click', (e) => { e.stopPropagation(); window.__lrConfirmSaveModule(); });
+  document.getElementById('lr-btn-minimize').addEventListener('click', (e) => { e.stopPropagation(); window.__lrTogglePanel(); });
+  document.getElementById('lr-btn-maximize').addEventListener('click', (e) => { e.stopPropagation(); window.__lrToggleMaximize(); });
+  document.getElementById('lr-preview-copy').addEventListener('click', (e) => { e.stopPropagation(); window.__lrCopyPreview(); });
+  document.getElementById('lr-preview-close').addEventListener('click', (e) => { e.stopPropagation(); window.__lrClosePreview(); });
+
+  // Draggable con clamp (nunca sale del viewport)
+  let dragging = false, dragX = 0, dragY = 0;
+  document.getElementById('lr-panel-header').addEventListener('mousedown', (e) => {
+    dragging = true; dragX = e.clientX - panel.offsetLeft; dragY = e.clientY - panel.offsetTop; e.preventDefault();
+  });
+  document.addEventListener('mousemove', (e) => {
+    if (!dragging) return;
+    let newLeft = e.clientX - dragX;
+    let newTop = e.clientY - dragY;
+    // Clamp: header siempre visible dentro del viewport
+    newTop = Math.max(0, Math.min(newTop, window.innerHeight - 40));
+    newLeft = Math.max(-panel.offsetWidth + 80, Math.min(newLeft, window.innerWidth - 80));
+    panel.style.left = newLeft + 'px'; panel.style.right = 'auto'; panel.style.top = newTop + 'px';
+  });
+  document.addEventListener('mouseup', () => { dragging = false; });
+
+  // Doble-click en header → reset posición + expandir
+  document.getElementById('lr-panel-header').addEventListener('dblclick', (e) => {
+    e.preventDefault();
+    panel.style.top = '10px'; panel.style.right = '10px'; panel.style.left = 'auto';
+    if (panelMinimized) window.__lrTogglePanel();
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // LOCALIZADORES
+  // ═══════════════════════════════════════════════════════════════
+
+  function getLocatorStrategies(el) {
+    const strategies = [];
+    const tag = el.tagName.toLowerCase();
+
+    // 1. data-automation-id
+    const autoId = el.getAttribute('data-automation-id');
+    if (autoId) {
+      strategies.push({ type: 'automation-id', selector: '[data-automation-id="' + autoId + '"]', playwright: "page.locator('[data-automation-id=\"" + autoId + "\"]')", reliability: 98, label: 'data-automation-id' });
+    }
+
+    // 2. Ancestro con automation-id
+    if (!autoId) {
+      let parent = el.parentElement, depth = 0;
+      while (parent && depth < 5) {
+        const pAutoId = parent.getAttribute('data-automation-id');
+        if (pAutoId) {
+          const relSelector = tag + (el.className ? '.' + [...el.classList].filter(c => !c.startsWith('b-')).join('.') : '');
+          strategies.push({ type: 'parent-auto-id', selector: '[data-automation-id="' + pAutoId + '"] ' + relSelector, playwright: "page.locator('[data-automation-id=\"" + pAutoId + "\"]').locator('" + relSelector + "')", reliability: 85, label: 'parent auto-id' });
+          break;
+        }
+        parent = parent.parentElement; depth++;
+      }
+    }
+
+    // 3. title
+    const title = el.getAttribute('title');
+    if (title) {
+      strategies.push({ type: 'title', selector: tag + '[title="' + title + '"]', playwright: "page.locator('" + tag + "[title=\"" + title + "\"]')", reliability: 90, label: 'title' });
+    }
+
+    // 4. role + name
+    const role = el.getAttribute('role') || (tag === 'button' ? 'button' : tag === 'input' ? 'textbox' : null);
+    const name = el.getAttribute('aria-label') || title || (tag === 'button' ? el.textContent.trim().substring(0, 50) : null);
+    if (role && name) {
+      strategies.push({ type: 'role', selector: 'role=' + role + '[name="' + name + '"]', playwright: "page.getByRole('" + role + "', { name: '" + name.replace(/'/g, "\\'") + "' })", reliability: 88, label: 'getByRole' });
+    }
+
+    // 5. text
+    const text = el.textContent.trim();
+    if (text && text.length < 60 && (tag === 'button' || tag === 'a' || tag === 'span')) {
+      const shortText = text.length > 30 ? text.substring(0, 30) : text;
+      strategies.push({ type: 'text', selector: tag + ':has-text("' + shortText + '")', playwright: "page.locator('" + tag + ":has-text(\"" + shortText + "\")')", reliability: 75, label: 'text' });
+    }
+
+    // 6. CSS classes
+    const sigClasses = [...el.classList].filter(c => !c.startsWith('b-') && c.length > 2);
+    if (sigClasses.length > 0) {
+      const cssSel = tag + '.' + sigClasses.join('.');
+      strategies.push({ type: 'css', selector: cssSel, playwright: "page.locator('" + cssSel + "')", reliability: 70, label: 'css' });
+    }
+
+    // 7. ID (estable)
+    const id = el.id;
+    if (id && !/[0-9a-f]{8}-[0-9a-f]{4}/.test(id) && !(/^[a-zA-Z0-9_-]{6,}$/.test(id) && !/^SDK|^TopBar|^whcm|^suite/.test(id))) {
+      strategies.push({ type: 'id', selector: '#' + id, playwright: "page.locator('#" + id + "')", reliability: 92, label: 'id' });
+    }
+
+    // 8. Fallback
+    strategies.push({ type: 'fallback', selector: tag, playwright: "page.locator('" + tag + "')", reliability: 30, label: 'tag' });
+
+    strategies.sort((a, b) => b.reliability - a.reliability);
+    return strategies;
+  }
+
+  function getElementInfo(el) {
+    const tag = el.tagName.toLowerCase();
+    return {
+      tag, autoId: el.getAttribute('data-automation-id') || '',
+      title: el.getAttribute('title') || '',
+      text: (el.textContent || '').trim().substring(0, 80),
+      classes: [...el.classList].filter(c => !c.startsWith('b-')).join(' '),
+      isDisabled: el.disabled || el.classList.contains('dxbl-disabled') || el.getAttribute('aria-disabled') === 'true',
+      isVisible: el.offsetParent !== null && el.offsetWidth > 0 && el.offsetHeight > 0,
+      rect: el.getBoundingClientRect(),
+      inputType: el.getAttribute('type') || '',
+      value: (el.value || '').substring(0, 50),
+      placeholder: el.getAttribute('placeholder') || '',
+      role: el.getAttribute('role') || ''
+    };
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // TOOLTIP (solo en modo inspect, no durante grabación)
+  // ═══════════════════════════════════════════════════════════════
+  let lastHoverEl = null;
+
+  document.addEventListener('mousemove', (e) => {
+    // Ocultar tooltip durante grabación para no estorbar
+    if (isRecording) { tooltip.style.display = 'none'; highlight.style.display = 'none'; return; }
+    if (e.target.closest('#lr-panel') || e.target.closest('#lr-tooltip')) {
+      tooltip.style.display = 'none'; highlight.style.display = 'none'; return;
+    }
+
+    const el = document.elementFromPoint(e.clientX, e.clientY);
+    if (!el || el === lastHoverEl) {
+      if (tooltip.style.display === 'block') {
+        const tx = e.clientX + 15, ty = e.clientY + 15;
+        tooltip.style.left = (tx + tooltip.offsetWidth > window.innerWidth ? e.clientX - tooltip.offsetWidth - 10 : tx) + 'px';
+        tooltip.style.top = (ty + tooltip.offsetHeight > window.innerHeight ? e.clientY - tooltip.offsetHeight - 10 : ty) + 'px';
+      }
+      return;
+    }
+    lastHoverEl = el;
+
+    const info = getElementInfo(el);
+    const strategies = getLocatorStrategies(el);
+    const best = strategies[0];
+
+    highlight.style.display = 'block';
+    highlight.style.left = info.rect.left + 'px'; highlight.style.top = info.rect.top + 'px';
+    highlight.style.width = info.rect.width + 'px'; highlight.style.height = info.rect.height + 'px';
+    highlight.style.borderColor = info.isDisabled ? '#ff4757' : '#00ff88';
+
+    let html = '<div><span class="lr-label">Tag:</span> <span class="lr-value">&lt;' + info.tag + '&gt;</span>';
+    if (info.inputType) html += ' <span class="lr-label">type=</span><span class="lr-value">' + info.inputType + '</span>';
+    html += '</div>';
+    if (info.autoId) html += '<div><span class="lr-label">automation-id:</span> <span class="lr-value lr-best">' + info.autoId + '</span></div>';
+    if (info.title) html += '<div><span class="lr-label">title:</span> <span class="lr-value">' + info.title + '</span></div>';
+    if (info.text && info.text !== info.title) html += '<div><span class="lr-label">text:</span> <span class="lr-value">' + info.text.substring(0, 60) + '</span></div>';
+    html += '<div style="margin-top:6px;border-top:1px solid #333;padding-top:4px;"><span class="lr-label">Mejor:</span> <span class="lr-value lr-best">' + best.selector + '</span> <span class="lr-label">(' + best.reliability + '%)</span></div>';
+    html += '<div style="color:#aaa;font-size:10px;margin-top:4px;">Ctrl+Click = capturar</div>';
+
+    tooltip.innerHTML = html;
+    tooltip.style.display = 'block';
+    const tx = e.clientX + 15, ty = e.clientY + 15;
+    tooltip.style.left = (tx + tooltip.offsetWidth > window.innerWidth ? e.clientX - tooltip.offsetWidth - 10 : tx) + 'px';
+    tooltip.style.top = (ty + tooltip.offsetHeight > window.innerHeight ? e.clientY - tooltip.offsetHeight - 10 : ty) + 'px';
+  }, true);
+
+  // ═══════════════════════════════════════════════════════════════
+  // CAPTURA (soporta actionType)
+  // ═══════════════════════════════════════════════════════════════
+
+  function isRecorderUI(el) {
+    return el.closest('#lr-panel') || el.closest('#lr-tooltip') || el.closest('#lr-stop-btn') || el.closest('#lr-status')
+      // v4: la UI nueva tambien debe excluirse para no capturar pasos espurios al grabar
+      || el.closest('#lr-context-menu') || el.closest('#lr-module-dialog') || el.closest('#lr-module-list');
+  }
+
+  function flashElement(el, color) {
+    const orig = el.style.outline;
+    const origOffset = el.style.outlineOffset;
+    el.style.outline = '3px solid ' + color;
+    el.style.outlineOffset = '2px';
+    setTimeout(() => { el.style.outline = orig; el.style.outlineOffset = origOffset; }, 800);
+  }
+
+  function captureElement(el, source, actionType, actionValue, assertionType, assertionValue) {
+    actionType = actionType || 'inspect';
+    actionValue = actionValue || null;
+    assertionType = assertionType || null;
+    assertionValue = assertionValue !== undefined ? assertionValue : null;
+
+    // Filtrar html/body — siempre falsos positivos
+    if (['HTML', 'BODY'].includes(el.tagName)) return false;
+
+    const info = getElementInfo(el);
+    const strategies = getLocatorStrategies(el);
+    const best = strategies[0];
+    const groupInput = document.getElementById('lr-group-input');
+
+    const capture = {
+      num: window.__capturedElements.length + 1,
+      timestamp: new Date().toISOString(),
+      source: source || 'manual',
+      actionType: actionType,
+      actionValue: actionValue,
+      assertionType: assertionType,
+      assertionValue: assertionValue,
+      group: (groupInput ? groupInput.value : '') || 'General',
+      url: window.location.pathname + window.location.search,
+      tag: info.tag, autoId: info.autoId, title: info.title,
+      text: info.text.substring(0, 80), classes: info.classes,
+      isDisabled: info.isDisabled, isVisible: info.isVisible,
+      inputType: info.inputType, value: info.value,
+      position: { x: Math.round(info.rect.x), y: Math.round(info.rect.y), w: Math.round(info.rect.width), h: Math.round(info.rect.height) },
+      bestLocator: best.selector, bestPlaywright: best.playwright,
+      reliability: best.reliability,
+      allStrategies: strategies.map(s => ({ type: s.type, selector: s.selector, playwright: s.playwright, reliability: s.reliability }))
+    };
+
+    // Dedup solo para inspect (Ctrl+Click), no para recording (puede haber click + fill al mismo locator)
+    if (actionType === 'inspect') {
+      if (window.__capturedElements.some(c => c.bestLocator === capture.bestLocator)) {
+        showStatus('Duplicado ignorado');
+        return null;
+      }
+    }
+
+    window.__capturedElements.push(capture);
+    persistCaptures();
+    renderPanel();
+
+    const label = info.autoId || info.title || info.tag;
+    const actionLabel = actionType !== 'inspect' ? ' [' + actionType.toUpperCase() + ']' : '';
+    showStatus('#' + capture.num + actionLabel + ' ' + label + (actionValue ? ' → "' + actionValue + '"' : ''));
+    return capture;
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // CTRL+CLICK (modo inspect — funciona siempre)
+  // ═══════════════════════════════════════════════════════════════
+
+  document.addEventListener('click', (e) => {
+    if (isRecorderUI(e.target)) return;
+
+    if (e.ctrlKey) {
+      e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
+      captureElement(e.target, 'ctrl-click', 'inspect', null);
+      flashElement(e.target, '#00ff88');
+      return false;
+    }
+
+    if (e.shiftKey) {
+      e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
+      captureElement(e.target, 'shift-click', 'inspect', null);
+      e.target.querySelectorAll('button, input, select, textarea, [data-automation-id], [role="button"], [role="tab"]')
+        .forEach(child => captureElement(child, 'shift-child', 'inspect', null));
+      return false;
+    }
+  }, true);
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      // v4: si hay menus/dialogos abiertos, Escape los cierra primero (no minimiza el panel)
+      if (contextMenu.style.display === 'block') { e.preventDefault(); hideContextMenu(); return; }
+      if (moduleDialog.style.display === 'block') { e.preventDefault(); window.__lrCloseModuleDialog(); return; }
+      if (moduleList.style.display === 'block') { e.preventDefault(); moduleList.style.display = 'none'; return; }
+      e.preventDefault(); window.__lrTogglePanel();
+    }
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // v4: MEJORA 1 — ASSERTIONS via CLIC DERECHO (solo en modo grabar)
+  // ═══════════════════════════════════════════════════════════════
+
+  function hideContextMenu() { contextMenu.style.display = 'none'; }
+
+  function showContextMenu(el, x, y) {
+    const info = getElementInfo(el);
+    const isInputLike = ['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName);
+    const text = (el.textContent || '').trim().substring(0, 40);
+    const value = (el.value || '').substring(0, 40);
+
+    const items = [];
+    items.push({
+      type: 'text',
+      value: info.text || text,
+      label: 'Assert: texto visible = <span class="lr-ctx-val">"' + (info.text || text || '(vacio)') + '"</span>'
+    });
+    items.push({
+      type: 'exists',
+      value: null,
+      label: 'Assert: elemento existe / visible'
+    });
+    if (isInputLike) {
+      items.push({
+        type: 'value',
+        value: value,
+        label: 'Assert: valor = <span class="lr-ctx-val">"' + (value || '(vacio)') + '"</span>'
+      });
+    }
+
+    let html = '<div class="lr-ctx-title">Assertions</div>';
+    items.forEach((it, i) => {
+      html += '<div class="lr-ctx-item" data-ctx-idx="' + i + '">' + it.label + '</div>';
+    });
+    html += '<div class="lr-ctx-item lr-ctx-cancel" data-ctx-cancel="1">Cancelar</div>';
+    contextMenu.innerHTML = html;
+
+    // Posicion (clamp dentro del viewport)
+    contextMenu.style.display = 'block';
+    const mw = contextMenu.offsetWidth, mh = contextMenu.offsetHeight;
+    contextMenu.style.left = Math.min(x, window.innerWidth - mw - 8) + 'px';
+    contextMenu.style.top = Math.min(y, window.innerHeight - mh - 8) + 'px';
+
+    contextMenu.querySelectorAll('.lr-ctx-item').forEach(node => {
+      node.addEventListener('click', (ev) => {
+        ev.stopPropagation(); ev.preventDefault();
+        if (node.getAttribute('data-ctx-cancel')) { hideContextMenu(); return; }
+        const it = items[parseInt(node.getAttribute('data-ctx-idx'), 10)];
+        captureElement(el, 'rec-assert', 'assert', null, it.type, it.value);
+        flashElement(el, '#10b981');
+        hideContextMenu();
+      }, true);
+    });
+  }
+
+  document.addEventListener('contextmenu', (e) => {
+    if (!isRecording) return;              // solo activo grabando
+    if (isRecorderUI(e.target)) return;    // no sobre la UI del grabador
+    if (['HTML', 'BODY'].includes(e.target.tagName)) return;
+    e.preventDefault(); e.stopPropagation();
+    showContextMenu(e.target, e.clientX, e.clientY);
+  }, true);
+
+  // Cerrar menu contextual al hacer click fuera
+  document.addEventListener('click', (e) => {
+    if (contextMenu.style.display === 'block' && !contextMenu.contains(e.target)) hideContextMenu();
+    if (moduleList.style.display === 'block' && !moduleList.contains(e.target) && e.target.id !== 'lr-act-insert-module') moduleList.style.display = 'none';
+  }, true);
+
+  // ═══════════════════════════════════════════════════════════════
+  // MODO GRABAR (captura automática de clicks, fills, selects)
+  // ═══════════════════════════════════════════════════════════════
+
+  function onRecordClick(e) {
+    if (!isRecording) return;
+    const el = e.target;
+    if (isRecorderUI(el)) return;
+    // No capturar inputs/textareas como click (se capturan como fill)
+    if (['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName)) return;
+    // No capturar html/body (falsos positivos)
+    if (['HTML', 'BODY'].includes(el.tagName)) return;
+
+    const strategies = getLocatorStrategies(el);
+    const selector = strategies[0].selector;
+    const now = Date.now();
+
+    // Dedup: mismo selector en 400ms
+    if (selector === _lastRecSelector && (now - _lastRecTime) < 400) return;
+
+    // Dedup padre-hijo: si el click anterior fue en un hijo/padre del actual (burbujeo), skip
+    if (_lastRecElement && (now - _lastRecTime) < 100) {
+      if (el.contains(_lastRecElement) || _lastRecElement.contains(el)) return;
+    }
+
+    _lastRecSelector = selector;
+    _lastRecTime = now;
+    _lastRecElement = el;
+
+    // NO preventDefault — el click pasa normalmente a la app
+    captureElement(el, 'rec-click', 'click', null);
+    flashElement(el, '#f97316');
+  }
+
+  function onRecordInput(e) {
+    if (!isRecording) return;
+    const el = e.target;
+    if (!['INPUT', 'TEXTAREA'].includes(el.tagName)) return;
+    if (isRecorderUI(el)) return;
+
+    // Debounce 800ms — capturar valor final
+    if (el.__lrDebounce) clearTimeout(el.__lrDebounce);
+    el.__lrDebounce = setTimeout(() => {
+      const finalValue = el.value;
+      if (!finalValue) return;
+
+      const strategies = getLocatorStrategies(el);
+      const bestSelector = strategies[0].selector;
+
+      // Actualizar fill existente para el mismo locator
+      const existing = [...window.__capturedElements].reverse().find(
+        c => c.actionType === 'fill' && c.bestLocator === bestSelector
+      );
+      if (existing) {
+        existing.actionValue = finalValue;
+        existing.value = finalValue;
+        existing.timestamp = new Date().toISOString();
+        persistCaptures();
+        renderPanel();
+        showStatus('Fill actualizado: "' + finalValue + '"');
+      } else {
+        captureElement(el, 'rec-fill', 'fill', finalValue);
+        flashElement(el, '#3b82f6');
+      }
+    }, 800);
+  }
+
+  function onRecordChange(e) {
+    if (!isRecording) return;
+    const el = e.target;
+    if (isRecorderUI(el)) return;
+    if (el.tagName === 'SELECT') {
+      captureElement(el, 'rec-select', 'select', el.value);
+      flashElement(el, '#a78bfa');
+    }
+    // Checkboxes y radio buttons como click
+    if (el.tagName === 'INPUT' && (el.type === 'checkbox' || el.type === 'radio')) {
+      captureElement(el, 'rec-check', 'click', null);
+      flashElement(el, '#f97316');
+    }
+  }
+
+  function createFloatingStopButton() {
+    if (document.getElementById('lr-stop-btn')) return;
+    const btn = document.createElement('div');
+    btn.id = 'lr-stop-btn';
+    btn.innerHTML = '\u23F9 <b style="font-family:monospace;font-size:11px;letter-spacing:1px">DETENER REC</b>';
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation(); e.preventDefault();
+      window.__lrStopRec();
+    });
+    document.body.appendChild(btn);
+  }
+
+  function removeFloatingStopButton() {
+    const btn = document.getElementById('lr-stop-btn');
+    if (btn) btn.remove();
+  }
+
+  function updateRecordingUI() {
+    const recBtn = document.getElementById('lr-btn-record');
+    const stopBtn = document.getElementById('lr-btn-stop');
+    const recStatus = document.getElementById('lr-rec-status');
+
+    if (recBtn) recBtn.disabled = isRecording;
+    if (stopBtn) stopBtn.disabled = !isRecording;
+    panel.style.borderColor = isRecording ? '#ef4444' : '#00b894';
+
+    if (recStatus) {
+      if (isRecording) {
+        recStatus.textContent = '\u25CF REC';
+        recStatus.className = 'lr-rec-active';
+      } else {
+        recStatus.textContent = window.__capturedElements.length > 0
+          ? window.__capturedElements.length + ' PASOS'
+          : 'LISTO';
+        recStatus.className = 'lr-rec-idle';
+      }
+    }
+  }
+
+  window.__lrStartRec = function(silent) {
+    isRecording = true;
+    persistRecState();
+    document.addEventListener('click', onRecordClick, true);
+    document.addEventListener('input', onRecordInput, true);
+    document.addEventListener('change', onRecordChange, true);
+    createFloatingStopButton();
+    updateRecordingUI();
+    if (!silent) showStatus('Grabaci\u00f3n iniciada \u2014 interact\u00faa normalmente, todo se captura');
+  };
+
+  window.__lrStopRec = function() {
+    isRecording = false;
+    persistRecState();
+    document.removeEventListener('click', onRecordClick, true);
+    document.removeEventListener('input', onRecordInput, true);
+    document.removeEventListener('change', onRecordChange, true);
+    removeFloatingStopButton();
+    hideContextMenu(); // v4: el menu de assertions solo aplica grabando
+    updateRecordingUI();
+    showStatus('Grabaci\u00f3n detenida \u2014 ' + window.__capturedElements.length + ' pasos capturados');
+  };
+
+  // ═══════════════════════════════════════════════════════════════
+  // PANEL RENDER
+  // ═══════════════════════════════════════════════════════════════
+
+  function renderPanel() {
+    const list = document.getElementById('lr-panel-list');
+    const count = document.getElementById('lr-count');
+    const groupInfo = document.getElementById('lr-group-info');
+    count.textContent = window.__capturedElements.length;
+    updateRecordingUI();
+
+    if (window.__capturedElements.length === 0) {
+      list.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">Presiona Grabar o usa Ctrl+Click</div>';
+      if (groupInfo) groupInfo.textContent = '';
+      return;
+    }
+
+    const groups = {};
+    window.__capturedElements.forEach(cap => {
+      const g = cap.group || 'General';
+      if (!groups[g]) groups[g] = [];
+      groups[g].push(cap);
+    });
+
+    const groupNames = Object.keys(groups);
+    if (groupInfo) groupInfo.textContent = groupNames.length + ' grupo' + (groupNames.length !== 1 ? 's' : '');
+
+    let html = '';
+    groupNames.forEach(groupName => {
+      html += '<div class="lr-group-header"><span>' + groupName + '</span><span class="lr-group-count">' + groups[groupName].length + ' elem.</span></div>';
+
+      groups[groupName].forEach(cap => {
+        const idx = window.__capturedElements.indexOf(cap);
+        const actionClass = cap.actionType === 'click' ? ' lr-item-click'
+          : cap.actionType === 'fill' ? ' lr-item-fill'
+          : cap.actionType === 'select' ? ' lr-item-select'
+          : cap.actionType === 'assert' ? ' lr-item-assert'
+          : cap.actionType === 'screenshot' ? ' lr-item-screenshot'
+          : cap.isDisabled ? ' lr-item-disabled' : '';
+
+        html += '<div class="lr-item' + actionClass + '">';
+        html += '<button class="lr-item-delete" onclick="window.__lrDeleteOne(' + idx + ')" title="Eliminar">\u00d7</button>';
+        html += '<button class="lr-item-copy" onclick="window.__lrCopyOne(' + idx + ')">Copiar</button>';
+        html += '<div class="lr-item-num">#' + cap.num;
+
+        // Action badge
+        if (cap.actionType && cap.actionType !== 'inspect') {
+          const badgeClass = 'lr-action-' + cap.actionType;
+          html += ' <span class="lr-action-badge ' + badgeClass + '">' + cap.actionType.toUpperCase() + '</span>';
+        }
+        html += '</div>';
+
+        html += '<div class="lr-item-tag">&lt;' + cap.tag + '&gt;';
+        if (cap.autoId) html += ' <span style="color:#ffd700;">' + cap.autoId + '</span>';
+        if (cap.title) html += ' title="' + cap.title + '"';
+        if (cap.isDisabled) html += ' <span style="color:#ff4757;">[DISABLED]</span>';
+        html += '</div>';
+        html += '<div class="lr-item-loc">' + cap.bestPlaywright + '</div>';
+
+        // Valor de la acción
+        if (cap.actionValue) {
+          html += '<div class="lr-item-value">\u2192 "' + cap.actionValue + '"</div>';
+        }
+        // v4: detalle de assertion (verde)
+        if (cap.actionType === 'assert') {
+          let assertTxt;
+          if (cap.assertionType === 'text') assertTxt = 'assert texto = "' + (cap.assertionValue || '') + '"';
+          else if (cap.assertionType === 'value') assertTxt = 'assert valor = "' + (cap.assertionValue || '') + '"';
+          else assertTxt = 'assert visible / existe';
+          html += '<div class="lr-item-assert-detail">✓ ' + assertTxt + '</div>';
+        }
+
+        // v4: detalle de screenshot (amber)
+        if (cap.actionType === 'screenshot') {
+          html += '<div class="lr-item-screenshot-detail">\u{1F4F7} ' + (cap.screenshotFile || 'screenshot') + '</div>';
+        }
+
+        if (cap.text && cap.text !== cap.title && cap.text !== cap.autoId && !cap.actionValue && cap.actionType !== 'assert' && cap.actionType !== 'screenshot') {
+          html += '<div class="lr-item-extra">text: "' + cap.text.substring(0, 40) + '"</div>';
+        }
+        html += '<div class="lr-item-extra">' + cap.reliability + '% | ' + cap.position.x + ',' + cap.position.y + '</div>';
+        html += '</div>';
+      });
+    });
+
+    list.innerHTML = html;
+  }
+
+  // ═══════════════════════════════════════════════════════════════
+  // ACCIONES
+  // ═══════════════════════════════════════════════════════════════
+
+  function showStatus(msg) {
+    statusBar.textContent = msg;
+    statusBar.style.opacity = '1';
+    setTimeout(() => { statusBar.style.opacity = '0'; }, 2500);
+  }
+
+  function showPreview(title, content) {
+    try {
+      const container = document.getElementById('lr-preview-container');
+      document.getElementById('lr-preview-title').textContent = title;
+      document.getElementById('lr-preview-text').value = content;
+      container.style.display = 'block';
+      showStatus(title + ' generado — click "Copiar" para copiar al clipboard');
+    } catch (e) {
+      console.error('[LR] showPreview error:', e);
+      showStatus('Error mostrando preview: ' + (e.message || e));
+    }
+  }
+
+  window.__lrCopyPreview = function() {
+    const ta = document.getElementById('lr-preview-text');
+    navigator.clipboard.writeText(ta.value).then(() => showStatus('Copiado')).catch(() => { ta.select(); document.execCommand('copy'); showStatus('Copiado (fallback)'); });
+  };
+  window.__lrClosePreview = function() { document.getElementById('lr-preview-container').style.display = 'none'; };
+
+  window.__lrDetectVisible = function() {
+    let added = 0;
+    document.querySelectorAll('[data-automation-id]').forEach(el => {
+      if (el.offsetParent !== null && el.offsetWidth > 0) { if (captureElement(el, 'detect-visible', 'inspect', null)) added++; }
+    });
+    showStatus('Detectados ' + added + ' elementos visibles');
+  };
+
+  window.__lrClear = function() {
+    if (isRecording) window.__lrStopRec();
+    window.__capturedElements = [];
+    persistCaptures();
+    renderPanel();
+    document.getElementById('lr-preview-container').style.display = 'none';
+    hideContextMenu();                       // v4
+    moduleDialog.style.display = 'none';     // v4
+    moduleList.style.display = 'none';       // v4
+    showStatus('Panel limpiado');
+  };
+
+  window.__lrDeleteOne = function(index) {
+    const cap = window.__capturedElements[index];
+    if (!cap) return;
+    window.__capturedElements.splice(index, 1);
+    window.__capturedElements.forEach((c, i) => { c.num = i + 1; });
+    persistCaptures(); renderPanel();
+    showStatus('Eliminado #' + (index + 1));
+  };
+
+  window.__lrCopyOne = function(index) {
+    const cap = window.__capturedElements[index];
+    if (cap) navigator.clipboard.writeText(cap.bestPlaywright).then(() => showStatus('Copiado'));
+  };
+
+  window.__lrCopyAll = function() {
+    if (window.__capturedElements.length === 0) { showStatus('Vac\u00edo'); return; }
+    const groups = {};
+    window.__capturedElements.forEach(c => { const g = c.group || 'General'; if (!groups[g]) groups[g] = []; groups[g].push(c); });
+    let text = '';
+    Object.keys(groups).forEach(gn => {
+      text += '// \u2500\u2500 ' + gn + ' \u2500\u2500\n';
+      groups[gn].forEach(c => {
+        const action = c.actionType !== 'inspect' ? ' [' + c.actionType + ']' : '';
+        text += '// #' + c.num + action + ' ' + c.tag + (c.autoId ? ' [' + c.autoId + ']' : '') + '\n';
+        text += c.bestPlaywright + (c.actionValue ? ' // → "' + c.actionValue + '"' : '') + '\n\n';
+      });
+    });
+    navigator.clipboard.writeText(text).then(() => showStatus('Copiados ' + window.__capturedElements.length + ' pasos'));
+  };
+
+  // Helper genérico para exportar — evita duplicar try-catch en cada formato
+  async function exportFormat(name, generatorFn, fallbackContent) {
+    if (window.__capturedElements.length === 0) { showStatus('No hay pasos'); return; }
+    const json = JSON.stringify(window.__capturedElements);
+    console.log('[LR] Exportando ' + name + '... (' + window.__capturedElements.length + ' pasos)');
+    if (generatorFn) {
+      try {
+        const r = await generatorFn(json);
+        console.log('[LR] ' + name + ' generado: ' + r.filename);
+        showPreview(name + ': ' + r.filename, r.content);
+      } catch (e) {
+        console.error('[LR] Error ' + name + ':', e);
+        showStatus('Error ' + name + ': ' + (e.message || e));
+      }
+    } else {
+      showPreview(name + ' (fallback)', fallbackContent);
+    }
+  }
+
+  window.__lrExportJSON = async function() {
+    const json = JSON.stringify(window.__capturedElements, null, 2);
+    console.log('[LR] Exportando JSON...');
+    if (window.__lrSaveJSON) {
+      try { const r = await window.__lrSaveJSON(json); showPreview('JSON: ' + r.filename, json); } catch (e) { console.error('[LR]', e); showPreview('JSON', json); }
+    } else {
+      showPreview('JSON', json);
+    }
+  };
+
+  window.__lrExportTS = function() { exportFormat('Playwright TS', window.__lrGenerateTS, '// Sin función de generación'); };
+  window.__lrExportRobot = function() { exportFormat('Robot Selenium', window.__lrGenerateRobot, '// Sin función de generación'); };
+  window.__lrExportPwPy = function() { exportFormat('Playwright PY', window.__lrGeneratePwPy, '# Sin función de generación'); };
+  window.__lrExportCypress = function() { exportFormat('Cypress', window.__lrGenerateCypress, '// Sin función de generación'); };
+  window.__lrExportGherkin = function() { exportFormat('Gherkin', window.__lrGenerateGherkin, '# Sin función de generación'); };
+  window.__lrExportCSV = function() { exportFormat('CSV', window.__lrGenerateCSV, '# Sin función de generación'); };
+
+  // ═══════════════════════════════════════════════════════════════
+  // v4: MEJORA 2 — SCREENSHOTS / VISUAL BASELINE
+  // ═══════════════════════════════════════════════════════════════
+  window.__lrTakeScreenshot = async function() {
+    if (!window.__lrCaptureScreenshot) {
+      showStatus('Screenshot no disponible (funcion no expuesta)');
+      return;
+    }
+    const stepNum = window.__capturedElements.length + 1;
+    showStatus('Capturando screenshot...');
+    // v4: ocultar la UI del grabador para no contaminar el baseline visual
+    const uiEls = ['lr-panel', 'lr-status', 'lr-stop-btn', 'lr-tooltip', 'lr-highlight', 'lr-context-menu']
+      .map(id => document.getElementById(id)).filter(Boolean);
+    const prevDisplay = uiEls.map(el => el.style.display);
+    uiEls.forEach(el => { el.style.display = 'none'; });
+    try {
+      const r = await window.__lrCaptureScreenshot(stepNum);
+      uiEls.forEach((el, i) => { el.style.display = prevDisplay[i]; });
+      const groupInput = document.getElementById('lr-group-input');
+      const capture = {
+        num: stepNum,
+        timestamp: new Date().toISOString(),
+        source: 'screenshot-btn',
+        actionType: 'screenshot',
+        actionValue: null,
+        assertionType: null,
+        assertionValue: null,
+        screenshotFile: (r && r.filename) || ('step-' + stepNum + '.png'),
+        group: (groupInput ? groupInput.value : '') || 'General',
+        url: window.location.pathname + window.location.search,
+        tag: 'page', autoId: '', title: '', text: '', classes: '',
+        isDisabled: false, isVisible: true, inputType: '', value: '',
+        position: { x: 0, y: 0, w: 0, h: 0 },
+        bestLocator: 'page', bestPlaywright: 'page',
+        reliability: 100, allStrategies: []
+      };
+      window.__capturedElements.push(capture);
+      persistCaptures();
+      renderPanel();
+      showStatus('Screenshot #' + stepNum + ' → ' + capture.screenshotFile);
+    } catch (e) {
+      uiEls.forEach((el, i) => { el.style.display = prevDisplay[i]; }); // restaurar UI si fallo
+      console.error('[LR] Error screenshot:', e);
+      showStatus('Error screenshot: ' + (e.message || e));
+    }
+  };
+
+  // ═══════════════════════════════════════════════════════════════
+  // v4: MEJORA 3 — MODULOS REUTILIZABLES
+  // ═══════════════════════════════════════════════════════════════
+  window.__lrCloseModuleDialog = function() {
+    moduleDialog.style.display = 'none';
+  };
+
+  window.__lrShowSaveModule = function() {
+    if (window.__capturedElements.length === 0) { showStatus('No hay capturas para guardar como modulo'); return; }
+    if (!window.__lrSaveModule) { showStatus('Modulos no disponibles (funcion no expuesta)'); return; }
+    document.getElementById('lr-module-name').value = '';
+    document.getElementById('lr-module-desc').value = '';
+    moduleList.style.display = 'none';
+    moduleDialog.style.display = 'block';
+    document.getElementById('lr-module-name').focus();
+  };
+
+  window.__lrConfirmSaveModule = async function() {
+    const nameRaw = (document.getElementById('lr-module-name').value || '').trim();
+    const desc = (document.getElementById('lr-module-desc').value || '').trim();
+    if (!nameRaw) { showStatus('Indica un nombre para el modulo'); return; }
+    const name = nameRaw.replace(/[^a-zA-Z0-9_-]/g, '-').replace(/-+/g, '-');
+    const payload = {
+      name: name,
+      displayName: nameRaw,
+      description: desc,
+      stepCount: window.__capturedElements.length,
+      savedAt: new Date().toISOString(),
+      captures: window.__capturedElements
+    };
+    try {
+      const r = await window.__lrSaveModule(JSON.stringify(payload));
+      moduleDialog.style.display = 'none';
+      showStatus('Modulo guardado: ' + ((r && r.filename) || (name + '.json')));
+    } catch (e) {
+      console.error('[LR] Error guardando modulo:', e);
+      showStatus('Error guardando modulo: ' + (e.message || e));
+    }
+  };
+
+  window.__lrShowInsertModule = async function() {
+    if (!window.__lrListModules) { showStatus('Modulos no disponibles (funcion no expuesta)'); return; }
+    moduleDialog.style.display = 'none';
+    let modules = [];
+    try {
+      const raw = await window.__lrListModules();
+      modules = JSON.parse(raw || '[]');
+    } catch (e) {
+      console.error('[LR] Error listando modulos:', e);
+      showStatus('Error listando modulos: ' + (e.message || e));
+      return;
+    }
+
+    let html = '<div class="lr-modlist-title">Insertar modulo</div>';
+    if (!modules.length) {
+      html += '<div class="lr-modlist-empty">No hay modulos guardados todavia</div>';
+    } else {
+      modules.forEach((m, i) => {
+        html += '<div class="lr-modlist-item" data-mod-idx="' + i + '" data-mod-name="' + m.name + '">'
+          + (m.displayName || m.name)
+          + '<div class="lr-modlist-meta">' + (m.stepCount || 0) + ' pasos'
+          + (m.description ? ' — ' + m.description : '') + '</div></div>';
+      });
+    }
+    moduleList.innerHTML = html;
+
+    // Posicionar bajo el boton "Insertar modulo"
+    const btn = document.getElementById('lr-act-insert-module');
+    const rect = btn.getBoundingClientRect();
+    moduleList.style.display = 'block';
+    const mw = moduleList.offsetWidth;
+    moduleList.style.left = Math.max(8, Math.min(rect.left, window.innerWidth - mw - 8)) + 'px';
+    moduleList.style.top = Math.min(rect.bottom + 4, window.innerHeight - moduleList.offsetHeight - 8) + 'px';
+
+    moduleList.querySelectorAll('.lr-modlist-item').forEach(node => {
+      node.addEventListener('click', (ev) => {
+        ev.stopPropagation(); ev.preventDefault();
+        window.__lrInsertModule(node.getAttribute('data-mod-name'));
+      }, true);
+    });
+  };
+
+  window.__lrInsertModule = async function(name) {
+    moduleList.style.display = 'none';
+    if (!window.__lrLoadModule) { showStatus('Modulos no disponibles'); return; }
+    try {
+      const raw = await window.__lrLoadModule(name);
+      const mod = JSON.parse(raw);
+      const modCaptures = (mod.captures || []).map(c => Object.assign({}, c, { source: 'module:' + name }));
+      // Prepone las capturas del modulo y re-numera todo
+      window.__capturedElements = modCaptures.concat(window.__capturedElements);
+      window.__capturedElements.forEach((c, i) => { c.num = i + 1; });
+      persistCaptures();
+      renderPanel();
+      showStatus('Modulo "' + (mod.displayName || name) + '" insertado (' + modCaptures.length + ' pasos)');
+    } catch (e) {
+      console.error('[LR] Error insertando modulo:', e);
+      showStatus('Error insertando modulo: ' + (e.message || e));
+    }
+  };
+
+  let panelMinimized = false;
+  let panelMaximized = false;
+  const PANEL_DEFAULT_WIDTH = '440px';
+  const PANEL_MIN_WIDTH = '180px';
+
+  window.__lrTogglePanel = function() {
+    if (panelMaximized) { window.__lrToggleMaximize(); return; }
+    panelMinimized = !panelMinimized;
+    ['lr-panel-list', 'lr-panel-actions', 'lr-panel-footer', 'lr-panel-group'].forEach(id => {
+      const el = document.getElementById(id);
+      if (el) el.style.display = panelMinimized ? 'none' : '';
+    });
+    const preview = document.getElementById('lr-preview-container');
+    if (preview && panelMinimized) preview.style.display = 'none';
+    panel.style.width = panelMinimized ? PANEL_MIN_WIDTH : PANEL_DEFAULT_WIDTH;
+    panel.style.maxHeight = panelMinimized ? 'auto' : '90vh';
+    // Actualizar icono del botón minimizar
+    const btnMin = document.getElementById('lr-btn-minimize');
+    if (btnMin) btnMin.innerHTML = panelMinimized ? '&#43;' : '&#8722;';
+    if (btnMin) btnMin.title = panelMinimized ? 'Restaurar (Esc)' : 'Minimizar (Esc)';
+  };
+
+  window.__lrToggleMaximize = function() {
+    if (panelMinimized) { window.__lrTogglePanel(); }
+    panelMaximized = !panelMaximized;
+    if (panelMaximized) {
+      panel._prevTop = panel.style.top; panel._prevLeft = panel.style.left;
+      panel._prevRight = panel.style.right; panel._prevWidth = panel.style.width;
+      panel.style.top = '0'; panel.style.left = '0'; panel.style.right = '0';
+      panel.style.width = '100vw'; panel.style.maxHeight = '100vh';
+      panel.style.borderRadius = '0';
+    } else {
+      panel.style.top = panel._prevTop || '10px';
+      panel.style.left = panel._prevLeft || 'auto';
+      panel.style.right = panel._prevRight || '10px';
+      panel.style.width = panel._prevWidth || PANEL_DEFAULT_WIDTH;
+      panel.style.maxHeight = '90vh';
+      panel.style.borderRadius = '10px';
+    }
+    // Actualizar icono del botón maximizar
+    const btnMax = document.getElementById('lr-btn-maximize');
+    if (btnMax) btnMax.innerHTML = panelMaximized ? '&#9643;' : '&#9633;';
+    if (btnMax) btnMax.title = panelMaximized ? 'Restaurar tamaño' : 'Maximizar';
+  };
+
+  // ═══════════════════════════════════════════════════════════════
+  // INIT
+  // ═══════════════════════════════════════════════════════════════
+  renderPanel();
+  const restoredCount = window.__capturedElements.length;
+
+  // Auto-reanudar grabación si estaba activa antes de la navegación
+  let wasRecording = false;
+  try { wasRecording = sessionStorage.getItem('__lr_recording') === '1'; } catch {}
+
+  if (wasRecording) {
+    window.__lrStartRec(true);
+    showStatus('Grabaci\u00f3n reanudada tras navegaci\u00f3n \u2014 ' + restoredCount + ' pasos previos');
+  } else if (restoredCount > 0) {
+    showStatus('Restauradas ' + restoredCount + ' capturas \u2014 "Limpiar" para empezar de cero');
+  } else {
+    showStatus('Grabador v4.0 activo \u2014 Grabar / Ctrl+Click / clic derecho = assert');
+  }
+  console.log('[LR] Grabador v4.0 inyectado. ' + restoredCount + ' capturas. Recording: ' + wasRecording);
+})();