bloby-bot 0.22.1 → 0.22.2

package/workspace/skills/chrome-extension/content-script.js

@@ -4,7 +4,8 @@
  * Injected into every page. Responsibilities:
  * - Renders the Bloby bubble (bottom-right corner)
  * - Opens/closes the chat panel (iframe to extension's panel.html)
- * - Extracts page context (URL, title, selection) for the agent
+ * - Extracts page context (URL, title, selection, structured data)
+ * - Handles ExtensionAction commands from the agent (screenshot, fill form, type)
  * - Bridges messages between the panel iframe and the background worker
  */
 
@@ -13,10 +14,6 @@
   if (document.getElementById('bloby-ext-bubble')) return;
   if (location.hostname.endsWith('bloby.bot')) return;
 
-  const BUBBLE_SIZE = 60;
-  const BUBBLE_MARGIN = 24;
-  const PANEL_WIDTH = 420;
-
   let panelOpen = false;
   let paired = false;
 
@@ -30,7 +27,20 @@
     }
   });
 
-  // Listen for pairing changes
+  // Listen for pairing from background worker
+  chrome.runtime.onMessage.addListener((msg) => {
+    if (msg.type === 'bloby:paired') {
+      console.log('[bloby-ext] Paired! Showing bubble.');
+      paired = true;
+      if (!document.getElementById('bloby-ext-bubble')) createBubble();
+    }
+    if (msg.type === 'bloby:unpaired') {
+      paired = false;
+      removeBubble();
+    }
+  });
+
+  // Listen for pairing changes via storage
   chrome.storage.onChanged.addListener((changes) => {
     if (changes.serverUrl) {
       if (changes.serverUrl.newValue) {
@@ -52,48 +62,37 @@
     bubble.addEventListener('click', togglePanel);
     document.body.appendChild(bubble);
 
-    // Inner dot (gradient)
     const dot = document.createElement('div');
     dot.className = 'bloby-ext-bubble-dot';
     bubble.appendChild(dot);
   }
 
   function removeBubble() {
-    const bubble = document.getElementById('bloby-ext-bubble');
-    if (bubble) bubble.remove();
-    const panel = document.getElementById('bloby-ext-panel');
-    if (panel) panel.remove();
-    const backdrop = document.getElementById('bloby-ext-backdrop');
-    if (backdrop) backdrop.remove();
+    document.getElementById('bloby-ext-bubble')?.remove();
+    document.getElementById('bloby-ext-panel')?.remove();
+    document.getElementById('bloby-ext-backdrop')?.remove();
+    panelOpen = false;
   }
 
   // ── Panel ──────────────────────────────────────────────────────────────────
 
   function togglePanel() {
-    if (panelOpen) {
-      closePanel();
-    } else {
-      openPanel();
-    }
+    panelOpen ? closePanel() : openPanel();
   }
 
   function openPanel() {
     if (document.getElementById('bloby-ext-panel')) {
-      const panel = document.getElementById('bloby-ext-panel');
-      panel.classList.add('bloby-ext-panel-open');
+      document.getElementById('bloby-ext-panel').classList.add('bloby-ext-panel-open');
       panelOpen = true;
       showBackdrop();
       return;
     }
 
-    // Create backdrop
     showBackdrop();
 
-    // Create panel
     const panel = document.createElement('div');
     panel.id = 'bloby-ext-panel';
 
-    // Create iframe — loads the extension's own panel page
     const iframe = document.createElement('iframe');
     iframe.id = 'bloby-ext-iframe';
     iframe.src = chrome.runtime.getURL('panel/panel.html');
@@ -102,13 +101,11 @@
 
     document.body.appendChild(panel);
 
-    // Trigger slide-in animation on next frame
     requestAnimationFrame(() => {
       panel.classList.add('bloby-ext-panel-open');
       panelOpen = true;
     });
 
-    // Listen for messages from the panel iframe
     window.addEventListener('message', handlePanelMessage);
   }
 
@@ -134,49 +131,36 @@
 
   function hideBackdrop() {
     const backdrop = document.getElementById('bloby-ext-backdrop');
-    if (backdrop) {
-      backdrop.classList.remove('bloby-ext-backdrop-visible');
-    }
+    if (backdrop) backdrop.classList.remove('bloby-ext-backdrop-visible');
   }
 
-  // ── Panel ↔ Background Message Bridge ──────────────────────────────────────
+  // ── Message Bridge (panel ↔ content script) ────────────────────────────────
 
   function handlePanelMessage(event) {
-    if (event.source !== document.getElementById('bloby-ext-iframe')?.contentWindow) return;
+    const iframe = document.getElementById('bloby-ext-iframe');
+    if (!iframe || event.source !== iframe.contentWindow) return;
 
     const msg = event.data;
     if (!msg?.type) return;
 
-    // Close panel request
     if (msg.type === 'bloby:close') {
       closePanel();
       return;
     }
 
-    // Forward chat messages to background worker → server
-    if (msg.type === 'bloby:send') {
-      chrome.runtime.sendMessage({ type: 'bloby:send', payload: msg.payload });
-      return;
-    }
-
     // Panel requests page context
     if (msg.type === 'bloby:get-page-context') {
       const context = getPageContext();
-      const iframe = document.getElementById('bloby-ext-iframe');
-      if (iframe?.contentWindow) {
-        iframe.contentWindow.postMessage({ type: 'bloby:page-context', context }, '*');
-      }
+      iframe.contentWindow.postMessage({ type: 'bloby:page-context', context }, '*');
       return;
     }
-  }
 
-  // Forward server messages from background to panel iframe
-  chrome.runtime.onMessage.addListener((msg) => {
-    const iframe = document.getElementById('bloby-ext-iframe');
-    if (iframe?.contentWindow && panelOpen) {
-      iframe.contentWindow.postMessage(msg, '*');
+    // Agent requests an action on the page
+    if (msg.type === 'bloby:extension-action') {
+      handleExtensionAction(msg.action, msg.data);
+      return;
     }
-  });
+  }
 
   // ── Page Context Extraction ────────────────────────────────────────────────
 
@@ -187,32 +171,139 @@
       selection: window.getSelection()?.toString()?.slice(0, 2000) || '',
     };
 
-    // Try to extract structured data (JSON-LD)
-    const jsonLd = document.querySelector('script[type="application/ld+json"]');
-    if (jsonLd) {
-      try {
-        const data = JSON.parse(jsonLd.textContent);
-        if (data.name) context.productName = data.name;
-        if (data.offers?.price) context.price = data.offers.price;
-        if (data.offers?.priceCurrency) context.currency = data.offers.priceCurrency;
-        if (data.description) context.description = data.description?.slice(0, 500);
-      } catch { /* ignore malformed JSON-LD */ }
-    }
+    // Extract structured data (JSON-LD) — product info, articles, etc.
+    try {
+      const scripts = document.querySelectorAll('script[type="application/ld+json"]');
+      for (const script of scripts) {
+        const data = JSON.parse(script.textContent);
+        // Handle arrays (some sites wrap in array)
+        const items = Array.isArray(data) ? data : [data];
+        for (const item of items) {
+          if (item.name && !context.productName) context.productName = item.name;
+          if (item.offers?.price) context.price = item.offers.price;
+          if (item.offers?.priceCurrency) context.currency = item.offers.priceCurrency;
+          if (item.description && !context.description) context.description = item.description?.slice(0, 500);
+          if (item['@type'] === 'VideoObject' && item.name) context.videoTitle = item.name;
+        }
+      }
+    } catch { /* ignore */ }
 
     // Meta description fallback
-    const metaDesc = document.querySelector('meta[name="description"]');
-    if (metaDesc && !context.description) {
-      context.description = metaDesc.content?.slice(0, 500);
+    if (!context.description) {
+      const meta = document.querySelector('meta[name="description"]');
+      if (meta) context.description = meta.content?.slice(0, 500);
     }
 
+    // Detect forms on the page
+    const forms = document.querySelectorAll('form');
+    if (forms.length > 0) {
+      context.hasForms = true;
+      context.formCount = forms.length;
+      // Extract visible form field labels/names
+      const fields = [];
+      forms.forEach((form) => {
+        form.querySelectorAll('input, select, textarea').forEach((el) => {
+          const name = el.getAttribute('name') || el.getAttribute('id') || el.getAttribute('placeholder') || '';
+          const type = el.getAttribute('type') || el.tagName.toLowerCase();
+          if (name && type !== 'hidden' && type !== 'submit') {
+            fields.push({ name, type });
+          }
+        });
+      });
+      if (fields.length > 0) context.formFields = fields.slice(0, 20); // cap at 20
+    }
+
+    console.log('[bloby-ext] Page context:', context);
     return context;
   }
 
+  // ── Extension Actions (agent → page) ───────────────────────────────────────
+
+  function handleExtensionAction(action, data) {
+    console.log(`[bloby-ext] Action: ${action}`, data);
+    const iframe = document.getElementById('bloby-ext-iframe');
+
+    switch (action) {
+      case 'screenshot': {
+        // Request screenshot via background worker (needs chrome.tabs API)
+        chrome.runtime.sendMessage({ type: 'bloby:screenshot' }, (response) => {
+          if (response?.dataUrl && iframe?.contentWindow) {
+            iframe.contentWindow.postMessage({
+              type: 'bloby:action-result',
+              action: 'screenshot',
+              result: response.dataUrl,
+            }, '*');
+          }
+        });
+        break;
+      }
+
+      case 'read-page': {
+        // Extract main text content from the page
+        const text = document.body.innerText?.slice(0, 10000) || '';
+        if (iframe?.contentWindow) {
+          iframe.contentWindow.postMessage({
+            type: 'bloby:action-result',
+            action: 'read-page',
+            result: text,
+          }, '*');
+        }
+        break;
+      }
+
+      case 'fill-form': {
+        // Fill form fields from agent-provided data
+        if (data?.fields && typeof data.fields === 'object') {
+          for (const [selector, value] of Object.entries(data.fields)) {
+            const el = document.querySelector(selector) ||
+                       document.querySelector(`[name="${selector}"]`) ||
+                       document.querySelector(`[id="${selector}"]`);
+            if (el) {
+              el.value = value;
+              el.dispatchEvent(new Event('input', { bubbles: true }));
+              el.dispatchEvent(new Event('change', { bubbles: true }));
+            }
+          }
+          if (iframe?.contentWindow) {
+            iframe.contentWindow.postMessage({
+              type: 'bloby:action-result',
+              action: 'fill-form',
+              result: 'done',
+            }, '*');
+          }
+        }
+        break;
+      }
+
+      case 'click': {
+        // Click an element by selector
+        if (data?.selector) {
+          const el = document.querySelector(data.selector);
+          if (el) el.click();
+        }
+        break;
+      }
+
+      case 'type': {
+        // Type into the currently focused input or a targeted selector
+        const target = data?.selector
+          ? document.querySelector(data.selector)
+          : document.activeElement;
+        if (target && data?.text) {
+          target.value = data.text;
+          target.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+        break;
+      }
+
+      default:
+        console.warn(`[bloby-ext] Unknown action: ${action}`);
+    }
+  }
+
   // ── Keyboard shortcut ──────────────────────────────────────────────────────
 
   document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape' && panelOpen) {
-      closePanel();
-    }
+    if (e.key === 'Escape' && panelOpen) closePanel();
   });
 })();

package/workspace/skills/chrome-extension/manifest.json

@@ -5,7 +5,8 @@
   "description": "Your AI agent, on every page. Chat with Bloby from anywhere.",
   "permissions": [
     "storage",
-    "activeTab"
+    "activeTab",
+    "declarativeNetRequest"
   ],
   "host_permissions": [
     "https://*.bloby.bot/*",
@@ -34,7 +35,7 @@
   ],
   "web_accessible_resources": [
     {
-      "resources": ["panel/panel.html", "assets/*", "icons/*"],
+      "resources": ["panel/panel.html", "panel/panel.js", "assets/*", "icons/*"],
       "matches": ["<all_urls>"]
     }
   ],

package/workspace/skills/chrome-extension/panel/panel.html

@@ -11,7 +11,7 @@
     .loading {
       display: flex; align-items: center; justify-content: center;
       height: 100vh; color: #a1a1aa; font-family: system-ui, sans-serif;
-      font-size: 14px;
+      font-size: 14px; flex-direction: column; gap: 8px;
     }
     .loading .dots span {
       display: inline-block; width: 6px; height: 6px; border-radius: 50%;
@@ -23,52 +23,14 @@
       0%, 80%, 100% { transform: scale(0); }
       40% { transform: scale(1); }
     }
+    .debug { font-size: 11px; color: #52525b; max-width: 90%; word-break: break-all; }
   </style>
 </head>
 <body>
   <div class="loading" id="loading">
     <div class="dots"><span></span><span></span><span></span></div>
+    <div class="debug" id="debug"></div>
   </div>
-
-  <script>
-    /**
-     * Panel page — loads the user's Bloby chat in an iframe.
-     * Reads serverUrl from chrome.storage.local.
-     */
-    (async () => {
-      const data = await chrome.storage.local.get(['serverUrl', 'authToken']);
-
-      if (!data.serverUrl) {
-        document.getElementById('loading').innerHTML =
-          '<span style="color:#ef4444">Not paired. Click the Bloby icon in the toolbar to set up.</span>';
-        return;
-      }
-
-      // Build the chat URL — same as the dashboard chat iframe
-      let chatUrl = `${data.serverUrl}/bloby/`;
-      if (data.authToken) {
-        chatUrl += `?token=${data.authToken}`;
-      }
-
-      // Create iframe to the user's Bloby server
-      const iframe = document.createElement('iframe');
-      iframe.src = chatUrl;
-      iframe.allow = 'microphone';
-      iframe.style.cssText = 'width:100%;height:100%;border:none;';
-
-      iframe.onload = () => {
-        document.getElementById('loading').style.display = 'none';
-      };
-
-      document.body.appendChild(iframe);
-
-      // Forward close events from chat iframe to content script (parent of this panel)
-      window.addEventListener('message', (e) => {
-        if (e.data?.type === 'bloby:close') {
-          window.parent.postMessage({ type: 'bloby:close' }, '*');
-        }
-      });
-    })();
-  </script>
+  <script src="panel.js"></script>
 </body>
 </html>

package/workspace/skills/chrome-extension/panel/panel.js

@@ -0,0 +1,123 @@
+/**
+ * Panel page — loads the Bloby chat in an iframe and bridges page context.
+ *
+ * Architecture:
+ *   Content script (host page) ↔ Panel (this page) ↔ Chat iframe (Bloby server)
+ *
+ * The panel:
+ * 1. Loads the Bloby chat in an iframe
+ * 2. Requests page context from the content script
+ * 3. Injects context into outgoing chat messages
+ * 4. Forwards ExtensionAction commands from chat to content script
+ */
+
+const debug = document.getElementById('debug');
+function log(msg) {
+  console.log('[bloby-panel] ' + msg);
+  if (debug) debug.textContent = msg;
+}
+
+let chatIframe = null;
+let currentPageContext = null;
+
+(async () => {
+  try {
+    log('Reading config...');
+    const data = await chrome.storage.local.get(['serverUrl', 'authToken']);
+
+    if (!data.serverUrl) {
+      document.getElementById('loading').innerHTML =
+        '<span style="color:#ef4444">Not paired. Click the Bloby icon in the toolbar to set up.</span>';
+      return;
+    }
+
+    let chatUrl = data.serverUrl + '/bloby/';
+    if (data.authToken) {
+      chatUrl += '?token=' + data.authToken;
+    }
+
+    // Add a marker so the chat app knows it's inside the extension
+    chatUrl += (chatUrl.includes('?') ? '&' : '?') + 'ext=1';
+
+    log('Loading: ' + chatUrl);
+
+    chatIframe = document.createElement('iframe');
+    chatIframe.id = 'bloby-chat-iframe';
+    chatIframe.src = chatUrl;
+    chatIframe.allow = 'microphone';
+    chatIframe.style.cssText = 'width:100%;height:100%;border:none;';
+
+    chatIframe.onload = () => {
+      log('Chat loaded!');
+      document.getElementById('loading').style.display = 'none';
+      // Request initial page context from content script
+      requestPageContext();
+    };
+
+    document.body.appendChild(chatIframe);
+
+    setTimeout(() => {
+      if (document.getElementById('loading').style.display !== 'none') {
+        log('Timeout loading chat');
+      }
+    }, 15000);
+
+  } catch (err) {
+    log('Error: ' + err.message);
+  }
+})();
+
+// ── Page Context ───────────────────────────────────────────────────────────
+
+function requestPageContext() {
+  // Ask the content script (parent of this panel) for page context
+  window.parent.postMessage({ type: 'bloby:get-page-context' }, '*');
+}
+
+// ── Message Handling ───────────────────────────────────────────────────────
+
+window.addEventListener('message', (event) => {
+  const msg = event.data;
+  if (!msg?.type) return;
+
+  // Context response from content script
+  if (msg.type === 'bloby:page-context') {
+    currentPageContext = msg.context;
+    log('Page context received: ' + (msg.context?.url || 'none'));
+
+    // Forward to chat iframe so it can use it
+    if (chatIframe?.contentWindow) {
+      chatIframe.contentWindow.postMessage({
+        type: 'bloby:page-context',
+        context: msg.context,
+      }, '*');
+    }
+    return;
+  }
+
+  // Action result from content script → forward to chat
+  if (msg.type === 'bloby:action-result') {
+    if (chatIframe?.contentWindow) {
+      chatIframe.contentWindow.postMessage(msg, '*');
+    }
+    return;
+  }
+
+  // Close request from chat iframe → forward to content script
+  if (msg.type === 'bloby:close') {
+    window.parent.postMessage({ type: 'bloby:close' }, '*');
+    return;
+  }
+
+  // Extension action from chat iframe → forward to content script
+  if (msg.type === 'bloby:extension-action') {
+    window.parent.postMessage(msg, '*');
+    return;
+  }
+
+  // Chat requests fresh page context
+  if (msg.type === 'bloby:request-context') {
+    requestPageContext();
+    return;
+  }
+});

package/dist-bloby/assets/mermaid-GHXKKRXX-BX4zpcbf.js

@@ -1 +0,0 @@
-import{i as e}from"./bloby-8izT4vax.js";export{e as Mermaid};