bloby-bot 0.22.0 → 0.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bloby-bot",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "releaseNotes": [
     "1. react router implemented",
     "2. new workspace design",

package/workspace/skills/chrome-extension/.claude-plugin/plugin.json

@@ -0,0 +1,6 @@
+{
+  "name": "chrome-extension",
+  "version": "1.0.0",
+  "description": "Chrome extension that puts Bloby on every webpage. Page context, video transcription, smart browsing assistant.",
+  "skills": "./"
+}

package/workspace/skills/chrome-extension/SKILL.md

@@ -0,0 +1,133 @@
+# Chrome Extension
+
+## What This Is
+
+A Chrome extension that puts you (the bloby) on every webpage your human visits. A floating bubble appears in the bottom-right corner of every tab. Your human clicks it, and a chat panel slides out — same chat, same conversation, fully mirrored with the dashboard and WhatsApp.
+
+The extension also gives your human the ability to share page context with you — URL, title, selected text, and structured data (product info, prices). This lets you help with what they're actively looking at.
+
+## Dependencies
+
+None.
+
+## Setup
+
+### Step 1: Generate a pairing code
+
+When your human asks to set up the Chrome extension, generate a pairing code:
+
+```bash
+curl -s -X POST https://api.bloby.bot/api/extension/pair/create \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer $(cat ~/.bloby/config.json | grep -o '"token":"[^"]*"' | head -1 | cut -d'"' -f4)"
+```
+
+This returns a 6-digit code that expires in 5 minutes.
+
+### Step 2: Walk your human through installation
+
+Tell your human:
+
+1. Open `chrome://extensions` in Chrome
+2. Turn on **Developer Mode** (toggle in the top-right corner)
+3. Click **Load unpacked**
+4. Select the folder: `~/.bloby/workspace/skills/chrome-extension/`
+5. Click the puzzle piece icon in Chrome's toolbar and pin Bloby
+6. Click the Bloby icon and enter the 6-digit pairing code
+
+### Step 3: Verify it works
+
+After your human enters the code, the extension connects to your server. A gradient bubble should appear on every webpage. Ask your human to confirm they see it.
+
+If the code expired, generate a new one (repeat Step 1).
+
+### Re-pairing
+
+If your human needs to reconnect (new device, token expired):
+1. Generate a new pairing code (Step 1)
+2. They click the Bloby icon in Chrome toolbar → enter the new code
+
+## Usage
+
+### How messages from the extension arrive
+
+Messages from the extension come through the same WebSocket as dashboard chat messages. There is no difference — the extension is just another connected client. Your responses appear in both the extension and the dashboard simultaneously.
+
+### Page context
+
+When your human sends a message from the extension, the message may include page context. This appears as metadata at the start of the message:
+
+```
+[Page: https://amazon.com/dp/B0XXXXX | iPhone 16 Pro - 256GB | $999.00]
+Can you find this cheaper?
+```
+
+The context includes:
+- **URL** — the page they're on
+- **Title** — the page title
+- **Selection** — any text they've highlighted (up to 2000 chars)
+- **Product info** — name, price, currency (extracted from JSON-LD structured data if available)
+- **Meta description** — page summary
+
+You can use this context directly, or fetch the URL yourself with curl/fetch tools for more detail.
+
+### Common use cases
+
+**Price comparison:**
+Human is on a product page → asks "find this cheaper" → you have the URL, product name, and price → search the web for alternatives.
+
+**Page summarization:**
+Human is on a long article → asks "summarize this" → you fetch the URL and produce a summary.
+
+**Video transcription:**
+Human is on YouTube → asks "transcribe this" → you extract the video URL, use available tools to get the transcript.
+
+**Save to workspace:**
+Human finds something interesting → asks "save this to my research notes" → you write to a file in the workspace.
+
+**Shopping assistant:**
+Human is browsing → asks "add this to my wishlist" → you maintain a wishlist file in the workspace.
+
+**Research assistant:**
+Human is reading documentation → highlights text → asks "explain this" → you get the selected text and explain it in context.
+
+### Working with the page URL
+
+You have full tool access. If the context isn't enough, fetch the page yourself:
+
+```bash
+curl -s "https://the-url-from-context" | head -200
+```
+
+Or use an MCP fetch tool if configured.
+
+## Human Interaction
+
+### What to tell your human
+
+When they ask about the extension:
+- "I can see whatever page you're on and help you with it"
+- "Just click my bubble on any page and ask me anything"
+- "If you highlight text on a page, I can see what you selected"
+- "I can find better prices, summarize articles, save things to your workspace — whatever you need"
+
+### What NOT to say
+
+Never mention "extension", "content script", "background worker", or any technical implementation details. From your human's perspective, you're just... everywhere. Available on every page. That's it.
+
+### Permissions
+
+The extension only reads page content when your human actively opens the chat panel. It does NOT:
+- Track browsing history
+- Read pages in the background
+- Send data anywhere except to your server
+- Access passwords, form data, or cookies
+
+If your human asks about privacy, be transparent about this.
+
+## Notes
+
+- The extension connects via the relay URL (e.g., `bloby.bloby.bot`). If the relay is down or the tunnel is offline, the extension chat won't connect. The bubble still appears but messages won't send.
+- The pairing code is single-use and expires in 5 minutes. Generate a new one if it expires.
+- The extension works on all pages except Chrome internal pages (`chrome://`, `chrome-extension://`) and your own Bloby dashboard domain (to avoid double-bubble).
+- Multiple browsers/devices can be paired — each gets its own pairing code. They all share the same conversation.

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

@@ -0,0 +1,239 @@
+/**
+ * Bloby Chrome Extension — Background Service Worker
+ *
+ * Responsibilities:
+ * - Manages the WebSocket connection to the user's Bloby server
+ * - Bridges messages between content scripts and the server
+ * - Handles pairing state (serverUrl stored in chrome.storage.local)
+ * - Keeps WS alive with heartbeat pings
+ */
+
+let ws = null;
+let config = null; // { serverUrl, username, tier }
+let reconnectTimer = null;
+let reconnectDelay = 1000;
+const MAX_RECONNECT_DELAY = 8000;
+const HEARTBEAT_MS = 25000;
+let heartbeatTimer = null;
+
+// ── Config Management ──────────────────────────────────────────────────────
+
+async function loadConfig() {
+  const data = await chrome.storage.local.get(['serverUrl', 'username', 'tier', 'authToken']);
+  if (data.serverUrl) {
+    config = data;
+    console.log(`[bloby-bg] Config loaded: ${config.serverUrl} (${config.username})`);
+    return true;
+  }
+  console.log('[bloby-bg] No config found — not paired');
+  return false;
+}
+
+async function saveConfig(newConfig) {
+  config = newConfig;
+  await chrome.storage.local.set(newConfig);
+  console.log(`[bloby-bg] Config saved: ${config.serverUrl}`);
+}
+
+async function clearConfig() {
+  config = null;
+  await chrome.storage.local.clear();
+  disconnectWs();
+  console.log('[bloby-bg] Config cleared — unpaired');
+}
+
+// ── WebSocket Connection ───────────────────────────────────────────────────
+
+function connectWs() {
+  if (!config?.serverUrl) return;
+  if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) return;
+
+  const proto = config.serverUrl.startsWith('https') ? 'wss' : 'ws';
+  const host = config.serverUrl.replace(/^https?:\/\//, '');
+  let url = `${proto}://${host}/bloby/ws`;
+  if (config.authToken) {
+    url += `?token=${config.authToken}`;
+  }
+
+  console.log(`[bloby-bg] Connecting WS: ${url.replace(/token=.*/, 'token=***')}`);
+
+  try {
+    ws = new WebSocket(url);
+  } catch (err) {
+    console.error('[bloby-bg] WS constructor error:', err);
+    scheduleReconnect();
+    return;
+  }
+
+  ws.onopen = () => {
+    console.log('[bloby-bg] WS connected');
+    reconnectDelay = 1000;
+    startHeartbeat();
+    // Notify all tabs
+    broadcastToTabs({ type: 'bloby:ws-connected' });
+  };
+
+  ws.onmessage = (event) => {
+    try {
+      const msg = JSON.parse(event.data);
+      // Forward all server messages to content scripts
+      broadcastToTabs(msg);
+    } catch { /* ignore non-JSON */ }
+  };
+
+  ws.onclose = (event) => {
+    console.log(`[bloby-bg] WS closed: code=${event.code} reason=${event.reason}`);
+    stopHeartbeat();
+    ws = null;
+    broadcastToTabs({ type: 'bloby:ws-disconnected' });
+    scheduleReconnect();
+  };
+
+  ws.onerror = (err) => {
+    console.error('[bloby-bg] WS error');
+    // onclose will fire after this
+  };
+}
+
+function disconnectWs() {
+  stopHeartbeat();
+  if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
+  if (ws) {
+    ws.onclose = null; // prevent reconnect
+    ws.close();
+    ws = null;
+  }
+}
+
+function scheduleReconnect() {
+  if (reconnectTimer) return;
+  console.log(`[bloby-bg] Reconnecting in ${reconnectDelay}ms...`);
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null;
+    reconnectDelay = Math.min(reconnectDelay * 2, MAX_RECONNECT_DELAY);
+    connectWs();
+  }, reconnectDelay);
+}
+
+function startHeartbeat() {
+  stopHeartbeat();
+  heartbeatTimer = setInterval(() => {
+    if (ws?.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'ping' }));
+    }
+  }, HEARTBEAT_MS);
+}
+
+function stopHeartbeat() {
+  if (heartbeatTimer) { clearInterval(heartbeatTimer); heartbeatTimer = null; }
+}
+
+// ── Send to Server ─────────────────────────────────────────────────────────
+
+function sendToServer(msg) {
+  if (ws?.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify(msg));
+    return true;
+  }
+  console.warn('[bloby-bg] WS not connected — message dropped');
+  return false;
+}
+
+// ── Broadcast to All Tabs ──────────────────────────────────────────────────
+
+async function broadcastToTabs(msg) {
+  try {
+    const tabs = await chrome.tabs.query({});
+    for (const tab of tabs) {
+      if (tab.id) {
+        chrome.tabs.sendMessage(tab.id, msg).catch(() => {
+          // Tab doesn't have content script — ignore
+        });
+      }
+    }
+  } catch { /* ignore */ }
+}
+
+// ── Message Handler (from content scripts + popup) ─────────────────────────
+
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+  // Popup: get current state
+  if (msg.type === 'bloby:get-state') {
+    sendResponse({
+      paired: !!config?.serverUrl,
+      connected: ws?.readyState === WebSocket.OPEN,
+      config: config ? { serverUrl: config.serverUrl, username: config.username } : null,
+    });
+    return true;
+  }
+
+  // Popup: pair with code
+  if (msg.type === 'bloby:pair') {
+    handlePair(msg.code).then(sendResponse);
+    return true; // async response
+  }
+
+  // Popup: unpair
+  if (msg.type === 'bloby:unpair') {
+    clearConfig().then(() => sendResponse({ success: true }));
+    return true;
+  }
+
+  // Content script: send message to server
+  if (msg.type === 'bloby:send') {
+    const ok = sendToServer(msg.payload);
+    sendResponse({ sent: ok });
+    return false;
+  }
+
+  // Content script: get page context
+  if (msg.type === 'bloby:page-context') {
+    // Content script provides context, we just forward
+    sendResponse({ received: true });
+    return false;
+  }
+});
+
+// ── Pairing Flow ───────────────────────────────────────────────────────────
+
+async function handlePair(code) {
+  try {
+    console.log(`[bloby-bg] Verifying pairing code: ${code}`);
+
+    const res = await fetch('https://api.bloby.bot/api/extension/pair/verify', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ code }),
+    });
+
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      console.log(`[bloby-bg] Pairing failed: ${data.error || res.status}`);
+      return { success: false, error: data.error || 'Invalid code' };
+    }
+
+    const data = await res.json();
+    console.log(`[bloby-bg] Pairing verified: ${data.serverUrl}`);
+
+    await saveConfig({
+      serverUrl: data.serverUrl,
+      username: data.username,
+      tier: data.tier,
+    });
+
+    // Connect immediately
+    connectWs();
+
+    return { success: true, username: data.username, serverUrl: data.serverUrl };
+  } catch (err) {
+    console.error('[bloby-bg] Pairing error:', err);
+    return { success: false, error: 'Network error — check your connection' };
+  }
+}
+
+// ── Startup ────────────────────────────────────────────────────────────────
+
+(async () => {
+  const hasCfg = await loadConfig();
+  if (hasCfg) connectWs();
+})();

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

@@ -0,0 +1,218 @@
+/**
+ * Bloby Chrome Extension — Content Script
+ *
+ * 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
+ * - Bridges messages between the panel iframe and the background worker
+ */
+
+(function () {
+  // Guard: don't inject on extension pages or Bloby's own domain
+  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;
+
+  // ── Check if paired ────────────────────────────────────────────────────────
+
+  chrome.runtime.sendMessage({ type: 'bloby:get-state' }, (state) => {
+    if (chrome.runtime.lastError) return;
+    if (state?.paired) {
+      paired = true;
+      createBubble();
+    }
+  });
+
+  // Listen for pairing changes
+  chrome.storage.onChanged.addListener((changes) => {
+    if (changes.serverUrl) {
+      if (changes.serverUrl.newValue) {
+        paired = true;
+        if (!document.getElementById('bloby-ext-bubble')) createBubble();
+      } else {
+        paired = false;
+        removeBubble();
+      }
+    }
+  });
+
+  // ── Bubble ─────────────────────────────────────────────────────────────────
+
+  function createBubble() {
+    const bubble = document.createElement('div');
+    bubble.id = 'bloby-ext-bubble';
+    bubble.title = 'Chat with Bloby';
+    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();
+  }
+
+  // ── Panel ──────────────────────────────────────────────────────────────────
+
+  function togglePanel() {
+    if (panelOpen) {
+      closePanel();
+    } else {
+      openPanel();
+    }
+  }
+
+  function openPanel() {
+    if (document.getElementById('bloby-ext-panel')) {
+      const panel = document.getElementById('bloby-ext-panel');
+      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');
+    iframe.allow = 'microphone';
+    panel.appendChild(iframe);
+
+    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);
+  }
+
+  function closePanel() {
+    const panel = document.getElementById('bloby-ext-panel');
+    if (panel) {
+      panel.classList.remove('bloby-ext-panel-open');
+      panelOpen = false;
+      hideBackdrop();
+    }
+  }
+
+  function showBackdrop() {
+    let backdrop = document.getElementById('bloby-ext-backdrop');
+    if (!backdrop) {
+      backdrop = document.createElement('div');
+      backdrop.id = 'bloby-ext-backdrop';
+      backdrop.addEventListener('click', closePanel);
+      document.body.appendChild(backdrop);
+    }
+    requestAnimationFrame(() => backdrop.classList.add('bloby-ext-backdrop-visible'));
+  }
+
+  function hideBackdrop() {
+    const backdrop = document.getElementById('bloby-ext-backdrop');
+    if (backdrop) {
+      backdrop.classList.remove('bloby-ext-backdrop-visible');
+    }
+  }
+
+  // ── Panel ↔ Background Message Bridge ──────────────────────────────────────
+
+  function handlePanelMessage(event) {
+    if (event.source !== document.getElementById('bloby-ext-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 }, '*');
+      }
+      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, '*');
+    }
+  });
+
+  // ── Page Context Extraction ────────────────────────────────────────────────
+
+  function getPageContext() {
+    const context = {
+      url: location.href,
+      title: document.title,
+      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 */ }
+    }
+
+    // Meta description fallback
+    const metaDesc = document.querySelector('meta[name="description"]');
+    if (metaDesc && !context.description) {
+      context.description = metaDesc.content?.slice(0, 500);
+    }
+
+    return context;
+  }
+
+  // ── Keyboard shortcut ──────────────────────────────────────────────────────
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && panelOpen) {
+      closePanel();
+    }
+  });
+})();

package/workspace/skills/chrome-extension/content-style.css

@@ -0,0 +1,86 @@
+/* Bloby Chrome Extension — Bubble & Panel Styles */
+
+#bloby-ext-bubble {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #04D1FE, #AF27E3, #FB4072);
+  cursor: pointer;
+  z-index: 2147483646;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+#bloby-ext-bubble:hover {
+  transform: scale(1.08);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
+}
+
+#bloby-ext-bubble:active {
+  transform: scale(0.95);
+}
+
+.bloby-ext-bubble-dot {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+/* Panel */
+#bloby-ext-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 420px;
+  z-index: 2147483647;
+  transform: translateX(100%);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
+  border-left: 1px solid #3a3a3a;
+  background: #212121;
+}
+
+#bloby-ext-panel.bloby-ext-panel-open {
+  transform: translateX(0);
+}
+
+/* Mobile: full width */
+@media (max-width: 480px) {
+  #bloby-ext-panel {
+    width: 100vw;
+  }
+}
+
+#bloby-ext-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: #212121;
+}
+
+/* Backdrop */
+#bloby-ext-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 2147483645;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease;
+}
+
+#bloby-ext-backdrop.bloby-ext-backdrop-visible {
+  opacity: 1;
+  pointer-events: auto;
+}

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

@@ -0,0 +1,46 @@
+{
+  "manifest_version": 3,
+  "name": "Bloby",
+  "version": "0.1.0",
+  "description": "Your AI agent, on every page. Chat with Bloby from anywhere.",
+  "permissions": [
+    "storage",
+    "activeTab"
+  ],
+  "host_permissions": [
+    "https://*.bloby.bot/*",
+    "https://*.my.bloby.bot/*",
+    "https://*.trycloudflare.com/*"
+  ],
+  "action": {
+    "default_popup": "popup/popup.html",
+    "default_icon": {
+      "16": "icons/icon-16.png",
+      "48": "icons/icon-48.png",
+      "128": "icons/icon-128.png"
+    }
+  },
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content-script.js"],
+      "css": ["content-style.css"],
+      "run_at": "document_idle"
+    }
+  ],
+  "web_accessible_resources": [
+    {
+      "resources": ["panel/panel.html", "assets/*", "icons/*"],
+      "matches": ["<all_urls>"]
+    }
+  ],
+  "icons": {
+    "16": "icons/icon-16.png",
+    "48": "icons/icon-48.png",
+    "128": "icons/icon-128.png"
+  }
+}

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

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>Bloby</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { background: #212121; width: 100%; height: 100vh; overflow: hidden; }
+    iframe { width: 100%; height: 100%; border: none; }
+    .loading {
+      display: flex; align-items: center; justify-content: center;
+      height: 100vh; color: #a1a1aa; font-family: system-ui, sans-serif;
+      font-size: 14px;
+    }
+    .loading .dots span {
+      display: inline-block; width: 6px; height: 6px; border-radius: 50%;
+      background: #a1a1aa; margin: 0 3px; animation: bounce 1s infinite;
+    }
+    .loading .dots span:nth-child(2) { animation-delay: 0.15s; }
+    .loading .dots span:nth-child(3) { animation-delay: 0.3s; }
+    @keyframes bounce {
+      0%, 80%, 100% { transform: scale(0); }
+      40% { transform: scale(1); }
+    }
+  </style>
+</head>
+<body>
+  <div class="loading" id="loading">
+    <div class="dots"><span></span><span></span><span></span></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>
+</body>
+</html>

package/workspace/skills/chrome-extension/popup/popup.css

@@ -0,0 +1,124 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  width: 320px;
+  min-height: 280px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #0a0a0b;
+  color: #e4e4e7;
+  padding: 32px 24px;
+  text-align: center;
+}
+
+.logo {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.logo-dot {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #04D1FE, #AF27E3, #FB4072);
+}
+
+.logo-dot.connected {
+  box-shadow: 0 0 20px rgba(4, 209, 254, 0.4);
+}
+
+h1 {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: #71717a;
+  margin-bottom: 24px;
+}
+
+/* Code Input */
+.code-input {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.code-input input {
+  width: 40px;
+  height: 48px;
+  border: 2px solid #27272a;
+  border-radius: 10px;
+  background: #18181b;
+  color: #e4e4e7;
+  font-size: 22px;
+  font-weight: 600;
+  text-align: center;
+  outline: none;
+  transition: border-color 0.15s;
+  caret-color: transparent;
+}
+
+.code-input input:focus {
+  border-color: #AF27E3;
+}
+
+.code-input input.filled {
+  border-color: #04D1FE;
+}
+
+.error {
+  color: #ef4444;
+  font-size: 13px;
+  min-height: 18px;
+  margin-bottom: 8px;
+}
+
+.pairing {
+  color: #a1a1aa;
+  font-size: 13px;
+}
+
+/* Connected Screen */
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: #18181b;
+  border: 1px solid #27272a;
+  border-radius: 999px;
+  padding: 6px 14px;
+  font-size: 13px;
+  color: #a1a1aa;
+  margin-bottom: 20px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #22c55e;
+}
+
+.btn-disconnect {
+  background: none;
+  border: 1px solid #27272a;
+  border-radius: 8px;
+  color: #71717a;
+  padding: 8px 16px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.btn-disconnect:hover {
+  border-color: #ef4444;
+  color: #ef4444;
+}

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

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Bloby</title>
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <!-- Pairing Screen -->
+  <div id="pair-screen">
+    <div class="logo">
+      <div class="logo-dot"></div>
+    </div>
+    <h1>Connect to Bloby</h1>
+    <p class="subtitle">Ask your Bloby for a pairing code</p>
+
+    <div class="code-input" id="code-input">
+      <input type="text" maxlength="1" pattern="[0-9]" inputmode="numeric" autofocus>
+      <input type="text" maxlength="1" pattern="[0-9]" inputmode="numeric">
+      <input type="text" maxlength="1" pattern="[0-9]" inputmode="numeric">
+      <input type="text" maxlength="1" pattern="[0-9]" inputmode="numeric">
+      <input type="text" maxlength="1" pattern="[0-9]" inputmode="numeric">
+      <input type="text" maxlength="1" pattern="[0-9]" inputmode="numeric">
+    </div>
+
+    <div id="error" class="error"></div>
+    <div id="pairing" class="pairing" style="display:none">Connecting...</div>
+  </div>
+
+  <!-- Connected Screen -->
+  <div id="connected-screen" style="display:none">
+    <div class="logo">
+      <div class="logo-dot connected"></div>
+    </div>
+    <h1 id="connected-name">Connected</h1>
+    <p class="subtitle" id="connected-url"></p>
+    <div class="status-badge">
+      <span class="status-dot"></span>
+      <span id="status-text">Connected</span>
+    </div>
+    <button id="disconnect-btn" class="btn-disconnect">Disconnect</button>
+  </div>
+
+  <script src="popup.js"></script>
+</body>
+</html>

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

@@ -0,0 +1,115 @@
+/**
+ * Bloby Chrome Extension — Popup
+ *
+ * Shows either:
+ * - Pairing screen: 6-digit code input to connect to a Bloby instance
+ * - Connected screen: status + disconnect button
+ */
+
+const pairScreen = document.getElementById('pair-screen');
+const connectedScreen = document.getElementById('connected-screen');
+const errorEl = document.getElementById('error');
+const pairingEl = document.getElementById('pairing');
+const inputs = document.querySelectorAll('.code-input input');
+
+// ── Init: check current state ──────────────────────────────────────────────
+
+chrome.runtime.sendMessage({ type: 'bloby:get-state' }, (state) => {
+  if (state?.paired) {
+    showConnected(state);
+  } else {
+    showPairing();
+  }
+});
+
+// ── Pairing Screen ─────────────────────────────────────────────────────────
+
+function showPairing() {
+  pairScreen.style.display = 'block';
+  connectedScreen.style.display = 'none';
+  inputs[0].focus();
+}
+
+// Auto-advance between code inputs
+inputs.forEach((input, i) => {
+  input.addEventListener('input', (e) => {
+    const val = e.target.value.replace(/\D/g, '');
+    e.target.value = val;
+
+    if (val) {
+      e.target.classList.add('filled');
+      if (i < inputs.length - 1) {
+        inputs[i + 1].focus();
+      }
+    }
+
+    // Check if all filled
+    const code = Array.from(inputs).map((inp) => inp.value).join('');
+    if (code.length === 6) {
+      submitCode(code);
+    }
+  });
+
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Backspace' && !e.target.value && i > 0) {
+      inputs[i - 1].focus();
+      inputs[i - 1].value = '';
+      inputs[i - 1].classList.remove('filled');
+    }
+  });
+
+  // Handle paste
+  input.addEventListener('paste', (e) => {
+    e.preventDefault();
+    const pasted = (e.clipboardData.getData('text') || '').replace(/\D/g, '').slice(0, 6);
+    pasted.split('').forEach((char, j) => {
+      if (inputs[j]) {
+        inputs[j].value = char;
+        inputs[j].classList.add('filled');
+      }
+    });
+    if (pasted.length === 6) {
+      submitCode(pasted);
+    } else if (pasted.length > 0) {
+      inputs[Math.min(pasted.length, 5)].focus();
+    }
+  });
+});
+
+async function submitCode(code) {
+  errorEl.textContent = '';
+  pairingEl.style.display = 'block';
+  inputs.forEach((inp) => { inp.disabled = true; });
+
+  chrome.runtime.sendMessage({ type: 'bloby:pair', code }, (result) => {
+    pairingEl.style.display = 'none';
+
+    if (result?.success) {
+      showConnected({
+        config: { serverUrl: result.serverUrl, username: result.username },
+        connected: true,
+      });
+    } else {
+      errorEl.textContent = result?.error || 'Pairing failed';
+      inputs.forEach((inp) => { inp.disabled = false; inp.value = ''; inp.classList.remove('filled'); });
+      inputs[0].focus();
+    }
+  });
+}
+
+// ── Connected Screen ───────────────────────────────────────────────────────
+
+function showConnected(state) {
+  pairScreen.style.display = 'none';
+  connectedScreen.style.display = 'block';
+
+  document.getElementById('connected-name').textContent = state.config?.username || 'Connected';
+  document.getElementById('connected-url').textContent = state.config?.serverUrl || '';
+  document.getElementById('status-text').textContent = state.connected ? 'Connected' : 'Offline';
+}
+
+document.getElementById('disconnect-btn').addEventListener('click', () => {
+  chrome.runtime.sendMessage({ type: 'bloby:unpair' }, () => {
+    showPairing();
+  });
+});

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

@@ -0,0 +1,15 @@
+{
+  "name": "chrome-extension",
+  "version": "1.0.0",
+  "bloby_human": "Bruno Bertapeli",
+  "bloby": "bloby-bruno",
+  "author": "newbot-official",
+  "description": "Bloby on every webpage. Browse with your AI agent — transcribe videos, compare prices, summarize articles, and more.",
+  "type": "skill",
+  "depends": [],
+  "env_keys": [],
+  "has_telemetry": false,
+  "size": "32KB",
+  "contains_binaries": false,
+  "tags": ["chrome", "extension", "browser", "productivity", "assistant"]
+}