From d2bc1773769ce6937e2a44cf58d429c399f7ae86 Mon Sep 17 00:00:00 2001
From: Carlos Narro <carlos@relabtive.com>
Date: Thu, 4 Jun 2026 14:38:32 +0200
Subject: [PATCH] =?UTF-8?q?Instrumentar=20FAB=E2=86=92overlay:=20logs=20[C?=
 =?UTF-8?q?UT-DIAG]=20y=20=5F=5FclaudeUsageTracker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

El FAB se ve y muestra datos cacheados (47%/40%) pero el click no abre
el overlay. Añado:
- console.log en cada paso del camino click→cache→openOverlayPanel
- try/catch en onFabClick y openOverlayPanel para cazar fallos silenciosos
- pointerdown listener en FAB para diferenciar "click cancelado por
  Claude" de "handler nunca conectado"
- window.__claudeUsageTracker con loadCache, openOverlayPanel,
  forceShowOverlay, etc. para reproducir cada paso desde la consola

Cambios temporales: una vez identificada la causa se retiran.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 content.js | 57 +++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/content.js b/content.js
index 2079bcd..f0478f8 100644
--- a/content.js
+++ b/content.js
@@ -815,7 +815,12 @@
       <span class="claude-usage-tracker-fab-text">…</span>
     `;
     fab.addEventListener('click', onFabClick);
+    // DIAG: si pointerdown fira pero click no, algo está cancelando el click
+    fab.addEventListener('pointerdown', () => {
+      console.log('[CUT-DIAG] FAB pointerdown recibido');
+    });
     document.body.appendChild(fab);
+    console.log('[CUT-DIAG] FAB inyectado en DOM. id:', fab.id, 'parent:', fab.parentElement?.tagName);
     loadCache().then(updateFabState);
   }
 
@@ -837,18 +842,28 @@
     else fab.classList.remove('claude-usage-tracker-fab--hidden');
   }
 
-  async function onFabClick() {
-    const cache = await loadCache();
-    openOverlayPanel(cache);
-    // Auto-refresh si la caché está rancia
-    const ageMin = cache ? cacheAgeMin(cache.scrapedAt) : Infinity;
-    if (ageMin > CACHE_TTL_MS / 60000) {
-      refreshInBackground('overlay-stale');
+  async function onFabClick(event) {
+    console.log('[CUT-DIAG] onFabClick entrada, event:', event?.type, 'target:', event?.target?.tagName);
+    try {
+      const cache = await loadCache();
+      console.log('[CUT-DIAG] cache cargada:', cache ? 'OK pageData=' + !!cache.pageData + ' dailyData=' + !!cache.dailyData : 'null');
+      openOverlayPanel(cache);
+      const ov = document.getElementById(OVERLAY_ID);
+      console.log('[CUT-DIAG] overlay tras openOverlayPanel: existe=' + !!ov,
+        ov ? 'display=' + getComputedStyle(ov).display + ' zIndex=' + getComputedStyle(ov).zIndex + ' opacity=' + getComputedStyle(ov).opacity : '');
+      const ageMin = cache ? cacheAgeMin(cache.scrapedAt) : Infinity;
+      if (ageMin > CACHE_TTL_MS / 60000) {
+        refreshInBackground('overlay-stale');
+      }
+    } catch (e) {
+      console.error('[CUT-DIAG] onFabClick ERROR:', e);
     }
   }
 
   // -------- Overlay propio --------
   function openOverlayPanel(cache) {
+    console.log('[CUT-DIAG] openOverlayPanel called, cache válida:', !!(cache && cache.pageData));
+    try {
     closeOverlayPanel();
     const overlay = document.createElement('div');
     overlay.id = OVERLAY_ID;
@@ -889,6 +904,10 @@
     document.body.appendChild(overlay);
 
     document.addEventListener('keydown', overlayEscapeHandler);
+    console.log('[CUT-DIAG] overlay appended OK. body.lastChild.id=', document.body.lastChild?.id);
+    } catch (e) {
+      console.error('[CUT-DIAG] openOverlayPanel ERROR:', e);
+    }
   }
 
   function overlayEscapeHandler(e) {
@@ -1054,6 +1073,30 @@
     }, 500);
   }
 
+  // Exposición para depuración manual desde la consola
+  window.__claudeUsageTracker = {
+    version: 'debug-fab-click',
+    loadCache,
+    saveCache,
+    openOverlayPanel,
+    closeOverlayPanel,
+    refreshInBackground,
+    findUsageDialog,
+    isUsageDialogOpen,
+    parsePageData,
+    injectFloatingButton,
+    updateFabState,
+    fabExists: () => !!document.getElementById(FAB_ID),
+    overlayExists: () => !!document.getElementById(OVERLAY_ID),
+    forceShowOverlay: async () => {
+      const cache = await loadCache();
+      console.log('[CUT-DIAG forceShowOverlay] cache:', cache);
+      openOverlayPanel(cache);
+      return !!document.getElementById(OVERLAY_ID);
+    }
+  };
+  console.log('[CUT-DIAG] window.__claudeUsageTracker expuesto. Métodos:', Object.keys(window.__claudeUsageTracker).join(', '));
+
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', bootstrap);
   } else {