chocolatito-code 1.0.0 → 1.2.0

package/extension/content.js

@@ -17,7 +17,245 @@
 
   const IS_TOP = window.top === window;
 
-  // ======================================================== aviso en pagina
+  // ======================================================== overlay visual y borde naranja (#D97757)
+
+  let overlayHost = null;
+  let overlayShadow = null;
+  let overlayFrame = null;
+  let overlayLayers = null;
+  let overlayActivo = false;
+
+  // Icono oficial del zorro de Chocolatito a 16px en base64 para cargar de inmediato
+  // sin depender de peticiones de red ni fallar por políticas CSP de páginas externas.
+  const LOGO_16_DATA_URI =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAC10lEQVR4nI1RS2hUZxT+zv+4uZk7c5MxNk5SiI/4IhZUhIJ2IVnYRbGQUqQU3YhS64OgGxdubDcqWIraldVaSqmIYLGL4mPhA6QUtFIxLlQ0iQnJSHQyjncmM/fe/z/lDplixBY/OItzOOc73/kO8AoYoCSGNnf1DGzs6klqV9dC4X8gZmQ/wCGA2zP4YFlOXA92Lfqo9zpi3g35VgS0BbWez/dKN4o/iyrhbI+qv5e+nLeVjsD8vfPNJNSQ/vTAh2rOyN3VAB8MQn5PKe1PxYysI2J4/kr65t4An4egPtgZCniaxAkm3HIo9hVqojIZ0plSaK5VIi5DsAJP7a5369dObiho4OrXy5rcMe/d1mq+1wWnx628tEBUL85pc0P6dmhxsizx6I0e8A7I3v33aqNDw/mcinbOy9KRdnA1oKZ9qKKE/4CqD5+DoE9hCtuWLM+qqdNBzfQgtFYL/mSc5Y9zY1rKv0ChCMkjiOkQzL8EZzdAJsPV7d1rmmRwIYzIL4bxVFprx1ecLabn83Bx8tjCjYiBeuDVUyhJHm1+X3fqJ4PNSnaOldm0OCS9rEahEG9pOzl6ivs7V8PqNXBlBqT/pMP3LzZIVMIy1JFmb5xvWbbrNSEMGXefTcQ/NUs5Yr7ouoLY9iJRXbGAYxD1z/2Ojg33836IuoJne7r7oqJJF9kMxqGWSkf+LOKPlbBbs46gfMVYJsTMsIogcr50bJhaJY8/uK0SGWUrnqZaza8oRI/IMV6rI3KuBsZKZPOWI0cJp0WRozVQqplEjBE6XAHgtkhkeEcf/vEiNJc72nV3SlJusmo4XzZ4J0Wi0yPH0xQqKW5aS6cJdAOSZAD5pP6Fr6ZdjWa1bcKL4vcphXU1ZtdXFGhX34Gg880Z9RsdevA4GRjcsTwja89PDLTIG9NGznzLyLYFizIi9p8HaqL758f1LY0erIX8a0mHMxr7su/U/ZdJ7R8LXTi7zKe+1AAAAABJRU5ErkJggg==";
+
+  function ensureOverlay() {
+    if (overlayHost && document.documentElement && document.documentElement.contains(overlayHost)) {
+      return overlayShadow;
+    }
+
+    overlayHost = document.createElement("div");
+    overlayHost.id = "__chocolatito_overlay__";
+    // CRÍTICO: pointer-events: none en el host y en todos los hijos para que
+    // JAMÁS capture clics ni altere el flujo de interacción de la página o del agente.
+    // all: initial aísla de las reglas CSS de la página que pudieran pisarlo.
+    overlayHost.style.cssText =
+      "all: initial !important; position: fixed !important; inset: 0 !important; " +
+      "width: 100vw !important; height: 100vh !important; pointer-events: none !important; " +
+      "z-index: 2147483646 !important; overflow: hidden !important;";
+
+    overlayShadow = overlayHost.attachShadow({ mode: "closed" });
+
+    const style = document.createElement("style");
+    style.textContent = `
+      :host {
+        all: initial !important;
+        pointer-events: none !important;
+      }
+      * {
+        box-sizing: border-box !important;
+        pointer-events: none !important;
+      }
+      /* Borde terracota (#D97757) hecho con box-shadow inset: no desplaza el layout ni el scroll */
+      .frame {
+        position: fixed !important;
+        inset: 0 !important;
+        pointer-events: none !important;
+        box-shadow: inset 0 0 0 3px #D97757 !important;
+        z-index: 2147483646 !important;
+        display: none;
+        animation: chocoFramePulse 2s ease-in-out infinite;
+      }
+      .frame.visible {
+        display: block !important;
+      }
+      @keyframes chocoFramePulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.6; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .frame {
+          animation: none !important;
+          opacity: 1 !important;
+        }
+      }
+      /* Etiqueta distintiva en la esquina superior */
+      .badge {
+        position: fixed !important;
+        top: 12px !important;
+        right: 14px !important;
+        display: inline-flex !important;
+        align-items: center !important;
+        gap: 7px !important;
+        padding: 5px 10px !important;
+        background: #D97757 !important;
+        color: #FFFFFF !important;
+        font: 600 12px/1.3 -apple-system, "Segoe UI", system-ui, sans-serif !important;
+        border-radius: 6px !important;
+        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35) !important;
+        pointer-events: none !important;
+        letter-spacing: 0.2px !important;
+        z-index: 2147483647 !important;
+      }
+      .badge-icon {
+        width: 16px !important;
+        height: 16px !important;
+        display: block !important;
+        flex: 0 0 16px !important;
+      }
+      /* Capa de efectos efímeros (recuadros de selección y ondas de clic) */
+      .layers {
+        position: fixed !important;
+        inset: 0 !important;
+        pointer-events: none !important;
+        z-index: 2147483647 !important;
+      }
+      .highlight-box {
+        position: fixed !important;
+        outline: 2px solid #D97757 !important;
+        background: rgba(217, 119, 87, 0.12) !important;
+        border-radius: 3px !important;
+        pointer-events: none !important;
+        transition: opacity 0.6s ease;
+        opacity: 1;
+      }
+      .highlight-box.fade-out {
+        opacity: 0 !important;
+      }
+      .highlight-tag {
+        position: absolute !important;
+        bottom: 100% !important;
+        left: 0 !important;
+        margin-bottom: 3px !important;
+        background: #D97757 !important;
+        color: #FFFFFF !important;
+        font: 600 11px/1.2 -apple-system, system-ui, sans-serif !important;
+        padding: 2px 6px !important;
+        border-radius: 3px !important;
+        white-space: nowrap !important;
+        pointer-events: none !important;
+        box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
+      }
+      .click-ripple {
+        position: fixed !important;
+        width: 20px !important;
+        height: 20px !important;
+        border-radius: 50% !important;
+        background: rgba(217, 119, 87, 0.35) !important;
+        border: 2px solid #D97757 !important;
+        transform: translate(-50%, -50%) scale(0.3);
+        pointer-events: none !important;
+        animation: chocoRipple 0.4s ease-out forwards;
+      }
+      @keyframes chocoRipple {
+        0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
+        100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
+      }
+    `;
+
+    overlayShadow.appendChild(style);
+
+    // Solo el frame principal de la ventana (IS_TOP) dibuja el borde exterior y la insignia
+    // para no llenar de bordes anidados los iframes de la página.
+    if (IS_TOP) {
+      overlayFrame = document.createElement("div");
+      overlayFrame.className = "frame" + (overlayActivo ? " visible" : "");
+      overlayFrame.innerHTML = `
+        <div class="badge">
+          <img class="badge-icon" src="${LOGO_16_DATA_URI}" alt="" />
+          <span>Chocolatito está trabajando</span>
+        </div>
+      `;
+      overlayShadow.appendChild(overlayFrame);
+    }
+
+    overlayLayers = document.createElement("div");
+    overlayLayers.className = "layers";
+    overlayShadow.appendChild(overlayLayers);
+
+    (document.body || document.documentElement).appendChild(overlayHost);
+    return overlayShadow;
+  }
+
+  function setOverlayActive(activo) {
+    overlayActivo = Boolean(activo);
+    ensureOverlay();
+    if (overlayFrame) {
+      if (overlayActivo) overlayFrame.classList.add("visible");
+      else overlayFrame.classList.remove("visible");
+    }
+  }
+
+  function isOverlayActive() {
+    return overlayActivo;
+  }
+
+  /** Dibuja un recuadro sobre el elemento objetivo antes de actuar (C1) */
+  function resaltarElemento(el, ref, role, name) {
+    try {
+      ensureOverlay();
+      if (!overlayLayers) return;
+      const r = el.getBoundingClientRect();
+      if (r.width < 1 && r.height < 1) return;
+
+      const box = document.createElement("div");
+      box.className = "highlight-box";
+      box.style.left = `${Math.round(r.left)}px`;
+      box.style.top = `${Math.round(r.top)}px`;
+      box.style.width = `${Math.round(r.width)}px`;
+      box.style.height = `${Math.round(r.height)}px`;
+
+      const tag = document.createElement("div");
+      tag.className = "highlight-tag";
+      const etiqueta = `[#${ref}] ${role || ""}${name ? ' "' + name.slice(0, 30) + '"' : ""}`;
+      tag.textContent = etiqueta.trim();
+      box.appendChild(tag);
+
+      overlayLayers.appendChild(box);
+
+      setTimeout(() => {
+        box.classList.add("fade-out");
+        setTimeout(() => {
+          try { if (box.parentNode) box.parentNode.removeChild(box); } catch (_) {}
+        }, 600);
+      }, 400);
+    } catch (_) {}
+  }
+
+  /** Dibuja una onda en el punto exacto donde se pulsó (C2) */
+  function mostrarOndaClic(x, y) {
+    try {
+      ensureOverlay();
+      if (!overlayLayers) return;
+      const ripple = document.createElement("div");
+      ripple.className = "click-ripple";
+      ripple.style.left = `${Math.round(x)}px`;
+      ripple.style.top = `${Math.round(y)}px`;
+
+      overlayLayers.appendChild(ripple);
+
+      setTimeout(() => {
+        try { if (ripple.parentNode) ripple.parentNode.removeChild(ripple); } catch (_) {}
+      }, 400);
+    } catch (_) {}
+  }
+
+  // D3: Observador de mutaciones para saber cuándo la pantalla "está quieta" (reposo DOM)
+  let ultimaMutacion = Date.now();
+  try {
+    const mutObs = new MutationObserver(() => {
+      ultimaMutacion = Date.now();
+    });
+    mutObs.observe(document.documentElement || document, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      characterData: true,
+    });
+  } catch (_) {}
+
+  // ======================================================== aviso flotante inferior (banner)
 
   let bannerHost = null;
   let bannerBody = null;
@@ -29,8 +267,6 @@
 
     bannerHost = document.createElement("div");
     bannerHost.id = "__chocolatito_banner__";
-    // Shadow DOM: los estilos de la pagina no pueden romper el aviso, ni el
-    // aviso ensuciar la pagina.
     const shadow = bannerHost.attachShadow({ mode: "closed" });
     const style = document.createElement("style");
     style.textContent = `
@@ -84,7 +320,6 @@
       bannerBody.action.textContent = text || "";
       bannerBody.wrap.classList.remove("hide");
       clearTimeout(bannerHideTimer);
-      // Se desvanece solo si el agente deja de trabajar, para no molestar.
       bannerHideTimer = setTimeout(() => {
         if (bannerBody) bannerBody.wrap.classList.add("hide");
       }, 12000);
@@ -155,12 +390,43 @@
   function norm(s) {
     return (s || "")
       .normalize("NFD")
+      // Rango de diacriticos combinantes. Escrito con escapes y no con los
+      // caracteres literales: en el fuente eran invisibles y cualquier editor
+      // que "normalizara" el archivo se los llevaba por delante sin que nadie
+      // lo notara hasta que el filtro dejaba de casar acentos.
       .replace(/[̀-ͯ]/g, "")
       .toLowerCase();
   }
 
-  function buildSnapshot(startIndex, filter) {
-    if (startIndex === 0) refIdentity.clear();
+  /**
+   * Quita las marcas del snapshot anterior.
+   *
+   * data-choco-ref se escribia en los elementos de la pagina del usuario y no
+   * lo borraba nadie: los atributos se acumulaban snapshot tras snapshot, y un
+   * ref viejo podia seguir resolviendo a un elemento que ya no estaba en la
+   * lista actual.
+   */
+  function limpiarMarcas() {
+    for (const root of allRoots()) {
+      let marcados;
+      try {
+        marcados = root.querySelectorAll("[data-choco-ref]");
+      } catch (_) {
+        continue;
+      }
+      for (const el of marcados) el.removeAttribute("data-choco-ref");
+    }
+  }
+
+  function buildSnapshot(startIndex, filter, nuevo) {
+    // Antes esto era `startIndex === 0`, que solo es cierto en el PRIMER frame.
+    // Cada frame tiene su propio content script con su propia tabla, asi que
+    // los subframes no la limpiaban nunca: acumulaban identidades de snapshots
+    // viejos y un ref podia resolver a un boton que ya no era ese.
+    if (nuevo || startIndex === 0) {
+      refIdentity.clear();
+      limpiarMarcas();
+    }
     const out = [];
     let idx = startIndex;
     const f = norm(filter);
@@ -213,19 +479,41 @@
    */
   const refIdentity = new Map();
 
-  function findByRef(ref) {
+  /**
+   * Busca elementos en el DOM que tengan el mismo rol o nombre similar
+   * para dar mensajes de error útiles si un ref no se encuentra (D5).
+   */
+  function buscarSimilares(id) {
+    if (!id) return [];
+    const similares = [];
     for (const root of allRoots()) {
-      const el = root.querySelector('[data-choco-ref="' + ref + '"]');
-      if (el) return el;
+      let nodes;
+      try { nodes = root.querySelectorAll(SELECTOR); } catch (_) { continue; }
+      for (const el of nodes) {
+        const r = roleOf(el);
+        const n = accessibleName(el).slice(0, 60);
+        if (!n && r !== "textbox") continue;
+        const coincideRol = id.role && r === id.role;
+        const coincideNombre = id.name && n && (norm(n).includes(norm(id.name)) || norm(id.name).includes(norm(n)));
+        if (coincideRol || coincideNombre) {
+          similares.push({ role: r, name: n });
+          if (similares.length >= 3) return similares;
+        }
+      }
     }
+    return similares;
+  }
 
-    // El nodo se fue en un re-render: se busca otro con la misma identidad.
-    const id = refIdentity.get(ref);
+  /**
+   * Reubica un elemento tras re-renders de frameworks reactivos (React/Vue/Flow)
+   * buscando candidatos con la misma identidad registrada.
+   */
+  function reubicarPorIdentidad(id, ref) {
     if (!id) return null;
-
     const candidatos = [];
     for (const root of allRoots()) {
-      const nodes = root.querySelectorAll(SELECTOR);
+      let nodes;
+      try { nodes = root.querySelectorAll(SELECTOR); } catch (_) { continue; }
       for (const el of nodes) {
         if (roleOf(el) !== id.role) continue;
         if (accessibleName(el).slice(0, 120) !== id.name) continue;
@@ -235,13 +523,68 @@
       }
     }
     if (candidatos.length === 0) return null;
-
-    // Con varios iguales se elige el que ocupaba la misma posicion en la lista.
     const elegido = candidatos[Math.min(id.idx, candidatos.length - 1)];
     elegido.setAttribute("data-choco-ref", String(ref));
     return elegido;
   }
 
+  /**
+   * Resuelve un ref verificando que el elemento siga siendo el mismo (D4).
+   * Si el DOM mutó drásticamente o el elemento desapareció, devuelve un error
+   * explicativo con sugerencias de elementos similares (D5).
+   */
+  function resolverRef(ref) {
+    const id = refIdentity.get(ref);
+    let el = null;
+    for (const root of allRoots()) {
+      try {
+        el = root.querySelector('[data-choco-ref="' + ref + '"]');
+        if (el) break;
+      } catch (_) {}
+    }
+
+    if (el) {
+      if (id) {
+        const actualRole = roleOf(el);
+        const actualName = accessibleName(el).slice(0, 120);
+        const rolCoincide = actualRole === id.role;
+        const nombreCoincide = !id.name || !actualName || norm(actualName).includes(norm(id.name)) || norm(id.name).includes(norm(actualName));
+        if (!rolCoincide && !nombreCoincide) {
+          // El elemento fue reciclado por otro componente del framework; reintentar por identidad
+          const reubicado = reubicarPorIdentidad(id, ref);
+          if (reubicado) return { ok: true, el: reubicado, id };
+          const similares = buscarSimilares(id);
+          const simTxt = similares.length > 0 ? ` Elementos parecidos: ${similares.map(s => `<${s.role}> "${s.name}"`).join(", ")}.` : "";
+          return {
+            ok: false,
+            error: `El DOM cambió desde el último snapshot: el ref [${ref}] apuntaba a <${id.role}> "${id.name}", pero ahora hay <${actualRole}> "${actualName}".${simTxt} Reház el snapshot antes de continuar.`,
+          };
+        }
+      }
+      return { ok: true, el, id };
+    }
+
+    // Si el nodo desapareció en un re-render, se busca por identidad
+    if (id) {
+      const reubicado = reubicarPorIdentidad(id, ref);
+      if (reubicado) return { ok: true, el: reubicado, id };
+    }
+
+    const similares = buscarSimilares(id);
+    const simTxt = similares.length > 0
+      ? ` Elementos similares disponibles: ${similares.map(s => `<${s.role}> "${s.name}"`).join(", ")}.`
+      : " No se encontraron elementos similares en el DOM.";
+    return {
+      ok: false,
+      error: `Ref [${ref}] no encontrado en este frame. Se buscaba: <${id?.role || "elemento"}> "${id?.name || ""}".${simTxt} Reház el snapshot para actualizar los refs.`,
+    };
+  }
+
+  function findByRef(ref) {
+    const res = resolverRef(ref);
+    return res.ok ? res.el : null;
+  }
+
   // ======================================================== acciones
 
   function centerOf(el) {
@@ -249,9 +592,52 @@
     return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
   }
 
+  /** Maneja de forma nativa la selección en menús desplegables <select> (D6) */
+  function seleccionarOpcion(selectEl, textoOValor) {
+    const needle = norm(textoOValor);
+    let elegidoIdx = -1;
+    for (let i = 0; i < selectEl.options.length; i++) {
+      const opt = selectEl.options[i];
+      if (norm(opt.value) === needle || norm(opt.text).includes(needle) || norm(opt.label).includes(needle)) {
+        elegidoIdx = i;
+        break;
+      }
+    }
+    if (elegidoIdx === -1) {
+      const num = Number(textoOValor);
+      if (!isNaN(num) && num >= 0 && num < selectEl.options.length) elegidoIdx = num;
+    }
+    if (elegidoIdx !== -1) {
+      selectEl.selectedIndex = elegidoIdx;
+      const valor = selectEl.options[elegidoIdx].value;
+      const proto = HTMLSelectElement.prototype;
+      const desc = Object.getOwnPropertyDescriptor(proto, "value");
+      if (desc && desc.set) desc.set.call(selectEl, valor);
+      else selectEl.value = valor;
+    }
+    selectEl.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    selectEl.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    return selectEl.value;
+  }
+
+  /** Conmuta casillas de verificación y radios usando descriptors nativos y eventos (D6) */
+  function conmutarCasilla(inputEl, estadoDeseado) {
+    const proximo = estadoDeseado !== undefined ? Boolean(estadoDeseado) : (inputEl.type === "checkbox" ? !inputEl.checked : true);
+    const proto = HTMLInputElement.prototype;
+    const desc = Object.getOwnPropertyDescriptor(proto, "checked");
+    if (desc && desc.set) desc.set.call(inputEl, proximo);
+    else inputEl.checked = proximo;
+
+    inputEl.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, composed: true }));
+    inputEl.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    inputEl.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    return inputEl.checked;
+  }
+
   /**
-   * Pulsa sin raton real. Se emite la secuencia completa de eventos porque
+   * Pulsa sin ratón real. Se emite la secuencia completa de eventos porque
    * muchos componentes escuchan pointerdown/mouseup y no solo click.
+   * Realiza scroll al centro antes de pulsar (C3) y muestra onda de clic (C2).
    */
   function clickElement(el) {
     try {
@@ -260,6 +646,12 @@
       try { el.scrollIntoView(); } catch (_) {}
     }
     const c = centerOf(el);
+    mostrarOndaClic(c.x, c.y);
+
+    if (el.type === "checkbox" || el.type === "radio") {
+      return conmutarCasilla(el);
+    }
+
     const base = { bubbles: true, cancelable: true, composed: true, view: window, clientX: c.x, clientY: c.y, button: 0 };
     const ptr = Object.assign({ pointerId: 1, isPrimary: true, pointerType: "mouse" }, base);
 
@@ -277,7 +669,7 @@
   }
 
   /**
-   * Escribe de forma que React se entere.
+   * Escribe de forma que React/Vue se enteren.
    *
    * Asignar el.value directamente NO sirve: React guarda su propio estado y no
    * ve el cambio, asi que el campo parece relleno pero el boton de enviar sigue
@@ -299,6 +691,16 @@
     try { el.scrollIntoView({ block: "center", behavior: "instant" }); } catch (_) {}
     try { el.focus({ preventScroll: true }); } catch (_) {}
 
+    // Soporte nativo para <select> (D6)
+    if (el.tagName.toLowerCase() === "select") {
+      return seleccionarOpcion(el, text);
+    }
+
+    // Soporte para checkboxes y radios (D6)
+    if (el.type === "checkbox" || el.type === "radio") {
+      return conmutarCasilla(el);
+    }
+
     if (el.isContentEditable) {
       if (replace) {
         const sel = window.getSelection();
@@ -307,7 +709,6 @@
         sel.removeAllRanges();
         sel.addRange(range);
       }
-      // execCommand emite beforeinput/input igual que si se hubiera tecleado.
       const ok = document.execCommand("insertText", false, text);
       if (!ok) {
         el.textContent = replace ? text : (el.textContent || "") + text;
@@ -324,15 +725,46 @@
     return true;
   }
 
+  /**
+   * Codigos de tecla.
+   */
+  const CODIGOS = {
+    Enter: 13, Escape: 27, Esc: 27, Tab: 9, Backspace: 8, Delete: 46,
+    ArrowUp: 38, ArrowDown: 40, ArrowLeft: 37, ArrowRight: 39,
+    Home: 36, End: 35, PageUp: 33, PageDown: 34, Insert: 45,
+    " ": 32, Space: 32, Shift: 16, Control: 17, Alt: 18,
+    F1: 112, F2: 113, F3: 114, F4: 115, F5: 116, F6: 117,
+    F7: 118, F8: 119, F9: 120, F10: 121, F11: 122, F12: 123,
+  };
+
+  /** Nombre DOM del codigo fisico ("KeyA", "Digit1", "Space"...). */
+  function codigoFisico(key) {
+    if (key === " " || key === "Space") return "Space";
+    if (/^[a-zA-Z]$/.test(key)) return "Key" + key.toUpperCase();
+    if (/^[0-9]$/.test(key)) return "Digit" + key;
+    return key;
+  }
+
   function pressKey(el, key) {
     const target = el || document.activeElement || document.body;
-    const map = { Enter: 13, Escape: 27, Tab: 9, Backspace: 8, Delete: 46, ArrowUp: 38, ArrowDown: 40 };
-    const code = map[key] || 0;
-    const init = { key, code: key, keyCode: code, which: code, bubbles: true, cancelable: true, composed: true };
+    const nombre = key === "Space" ? " " : key;
+    const code = CODIGOS[key] !== undefined
+      ? CODIGOS[key]
+      : nombre.length === 1
+        ? nombre.toUpperCase().charCodeAt(0)
+        : 0;
+    const init = {
+      key: nombre,
+      code: codigoFisico(key),
+      keyCode: code,
+      which: code,
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    };
     target.dispatchEvent(new KeyboardEvent("keydown", init));
-    target.dispatchEvent(new KeyboardEvent("keypress", init));
+    if (nombre.length === 1) target.dispatchEvent(new KeyboardEvent("keypress", init));
     target.dispatchEvent(new KeyboardEvent("keyup", init));
-    // Si es un formulario y la tecla es Enter, se intenta enviar de verdad.
     if (key === "Enter" && target.form && typeof target.form.requestSubmit === "function") {
       try { target.form.requestSubmit(); } catch (_) {}
     }
@@ -343,9 +775,16 @@
 
   chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
     try {
-      switch (msg.cmd) {
+      const comando = msg.cmd || msg.tipo;
+      switch (comando) {
+        case "overlay": {
+          setOverlayActive(msg.activo === true);
+          sendResponse({ ok: true, activo: isOverlayActive() });
+          break;
+        }
+
         case "ping":
-          sendResponse({ ok: true, top: IS_TOP, url: location.href });
+          sendResponse({ ok: true, top: IS_TOP, url: location.href, overlay: isOverlayActive() });
           break;
 
         case "banner":
@@ -355,52 +794,57 @@
           break;
 
         case "snapshot": {
-          const items = buildSnapshot(msg.startIndex || 0, msg.filter || "");
+          const items = buildSnapshot(msg.startIndex || 0, msg.filter || "", msg.nuevo === true);
           sendResponse({ ok: true, items, url: location.href, title: document.title, top: IS_TOP });
           break;
         }
 
         case "click": {
-          const el = findByRef(msg.ref);
-          if (!el) { sendResponse({ ok: false, error: "ref no encontrado en este frame" }); break; }
+          const resolucion = resolverRef(msg.ref);
+          if (!resolucion.ok) { sendResponse(resolucion); break; }
+          const el = resolucion.el;
           const label = accessibleName(el).slice(0, 60);
+          resaltarElemento(el, msg.ref, resolucion.id?.role, label);
           clickElement(el);
           sendResponse({ ok: true, label });
           break;
         }
 
         case "type": {
-          const el = findByRef(msg.ref);
-          if (!el) { sendResponse({ ok: false, error: "ref no encontrado en este frame" }); break; }
+          const resolucion = resolverRef(msg.ref);
+          if (!resolucion.ok) { sendResponse(resolucion); break; }
+          const el = resolucion.el;
+          const label = accessibleName(el).slice(0, 60);
+          resaltarElemento(el, msg.ref, resolucion.id?.role, label);
           typeInto(el, msg.text, msg.replace !== false);
-          // Se devuelve el valor real tras escribir, para poder verificar.
           const after = el.isContentEditable ? (el.textContent || "") : (el.value || "");
           if (msg.submit) pressKey(el, "Enter");
-          sendResponse({ ok: true, value: String(after).slice(0, 200) });
+          sendResponse({ ok: true, value: String(after).slice(0, 200), label });
           break;
         }
 
-        // Devuelve el centro del elemento en coordenadas del viewport, que es lo
-        // que necesita el protocolo DevTools para entregar un clic real.
         case "rect": {
-          const el = findByRef(msg.ref);
-          if (!el) { sendResponse({ ok: false, error: "ref no encontrado en este frame" }); break; }
-          try { el.scrollIntoView({ block: "center", behavior: "instant" }); } catch (_) {}
+          const resolucion = resolverRef(msg.ref);
+          if (!resolucion.ok) { sendResponse(resolucion); break; }
+          const el = resolucion.el;
+          try { el.scrollIntoView({ block: "center", inline: "center", behavior: "instant" }); } catch (_) {}
+          const label = accessibleName(el).slice(0, 60);
+          resaltarElemento(el, msg.ref, resolucion.id?.role, label);
           const r = el.getBoundingClientRect();
           sendResponse({
             ok: true,
             x: Math.round(r.left + r.width / 2),
             y: Math.round(r.top + r.height / 2),
-            label: accessibleName(el).slice(0, 60),
-            editable: el.isContentEditable || "value" in el,
+            label,
+            editable: el.isContentEditable || "value" in el || el.tagName.toLowerCase() === "select",
           });
           break;
         }
 
-        // Solo lee el valor actual, para verificar despues de escribir.
         case "value": {
-          const el = findByRef(msg.ref);
-          if (!el) { sendResponse({ ok: false, error: "ref no encontrado" }); break; }
+          const resolucion = resolverRef(msg.ref);
+          if (!resolucion.ok) { sendResponse(resolucion); break; }
+          const el = resolucion.el;
           sendResponse({
             ok: true,
             value: String(el.isContentEditable ? el.textContent || "" : el.value || "").slice(0, 300),
@@ -409,12 +853,39 @@
         }
 
         case "press": {
-          const el = msg.ref ? findByRef(msg.ref) : null;
+          let el = null;
+          if (msg.ref !== undefined && msg.ref !== null) {
+            const resolucion = resolverRef(msg.ref);
+            if (resolucion.ok) {
+              el = resolucion.el;
+              resaltarElemento(el, msg.ref, resolucion.id?.role, accessibleName(el));
+            }
+          }
           pressKey(el, msg.keys || "Enter");
           sendResponse({ ok: true });
           break;
         }
 
+        case "waitForCondition": {
+          if (msg.selector) {
+            let found = false;
+            for (const root of allRoots()) {
+              try {
+                if (root.querySelector(msg.selector)) { found = true; break; }
+              } catch (_) {}
+            }
+            sendResponse({ ok: true, conditionMet: found });
+            break;
+          }
+          if (msg.stable) {
+            const quietFor = Date.now() - ultimaMutacion;
+            sendResponse({ ok: true, conditionMet: quietFor >= (msg.quietMs || 400) });
+            break;
+          }
+          sendResponse({ ok: true, conditionMet: true });
+          break;
+        }
+
         case "getText":
           sendResponse({
             ok: true,
@@ -427,16 +898,26 @@
         case "eval": {
           let out;
           try {
-            out = String(eval(msg.script));
+            const valor = eval(msg.script);
+            if (valor === undefined) out = "undefined";
+            else if (valor === null) out = "null";
+            else if (typeof valor === "object") {
+              try {
+                out = JSON.stringify(valor, null, 2);
+                if (out === undefined) out = String(valor);
+              } catch (_) {
+                out = String(valor);
+              }
+            } else out = String(valor);
           } catch (e) {
             out = "Error JS: " + (e && e.message ? e.message : e);
           }
-          sendResponse({ ok: true, result: out });
+          sendResponse({ ok: true, result: String(out).slice(0, 20000) });
           break;
         }
 
         default:
-          sendResponse({ ok: false, error: "comando desconocido: " + msg.cmd });
+          sendResponse({ ok: false, error: "comando desconocido: " + (msg.cmd || msg.tipo) });
       }
     } catch (err) {
       sendResponse({ ok: false, error: String((err && err.message) || err) });