Pup - Puppeteer Bridge

// Adom Pup floaty pencil: the annotate feature's discoverability handle (John 2026-08-10).
// A tiny monochrome pencil in the page's upper-right; click = enter annotate (red pen) mode.
// Rendered by the extension (not pup injection) so the click can route through the worker to
// pup's loopback. Gated by pup's tbFloatyPencil setting (checked once per page load).
(async () => {
  if (window !== window.top) return;
  if (window.__pupFloatyInstalled) return;
  window.__pupFloatyInstalled = true;
  try {
  let cfg = null;
  try { cfg = await chrome.runtime.sendMessage({ t: 'pup-floaty-cfg' }); } catch (e) {}
  if (!cfg || !cfg.enabled) return;

  const host = document.createElement('div');
  host.style.cssText = 'position:fixed;top:14px;right:14px;z-index:2147483645;pointer-events:auto;';
  const root = host.attachShadow({ mode: 'closed' });
  const btn = document.createElement('button');
  btn.setAttribute('aria-label', 'Annotate this page');
  btn.style.cssText = 'width:30px;height:30px;border-radius:8px;display:grid;place-items:center;'
    + 'background:rgba(13,17,23,.72);border:1px solid rgba(0,184,177,.45);cursor:pointer;'
    + 'opacity:.55;transition:opacity .15s ease;padding:0;';
  btn.innerHTML = '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="#e6edf3" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20l1.5-4.5L16 5a2.1 2.1 0 0 1 3 3L8.5 18.5 4 20z"/><path d="M13.5 7.5l3 3"/></svg>';
  btn.onmouseenter = () => { btn.style.opacity = '1'; tipShow(); };
  btn.onmouseleave = () => { btn.style.opacity = '.55'; tipHide(); };
  btn.onclick = () => { tipHide(); chrome.runtime.sendMessage({ t: 'pup-annotate', tool: 'pen' }).catch(() => {}); };
  root.appendChild(btn);

  // great tooltip (tooltips skill: 600ms reveal, 0.18s fade, measured then clamped both axes)
  const tip = document.createElement('div');
  tip.textContent = 'Draw on this page to show your AI exactly what you mean; a red circle says it best. '
    + 'Click to start, or press Alt+Shift+A anytime. The moment you lift the mouse, the marked-up '
    + 'area is copied to your clipboard, ready to paste into any AI chat.';
  tip.style.cssText = 'position:fixed;z-index:2147483647;max-width:280px;background:#21262d;'
    + 'border:1px solid #30363d;border-radius:8px;padding:7px 10px;'
    + 'font:12px Satoshi,system-ui,sans-serif;color:#c9d1d9;box-shadow:0 6px 20px #000b;'
    + 'pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease;';
  root.appendChild(tip);
  let timer = null;
  function tipShow() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      requestAnimationFrame(() => {
        const a = btn.getBoundingClientRect(), M = 8, w = tip.offsetWidth, h = tip.offsetHeight;
        let x = a.right - w, y = a.bottom + 10;
        if (y + h > innerHeight - M) y = a.top - h - 10;
        x = Math.min(Math.max(M, x), innerWidth - w - M);
        y = Math.min(Math.max(M, y), innerHeight - h - M);
        tip.style.left = x + 'px'; tip.style.top = y + 'px';
        tip.style.opacity = '1'; tip.style.transform = 'translateY(0)';
      });
    }, 600);
  }
  function tipHide() { clearTimeout(timer); tip.style.opacity = '0'; tip.style.transform = 'translateY(4px)'; }
  (document.body || document.documentElement).appendChild(host);
  } catch (e) {}
})();