bloby-bot 0.22.2 → 0.22.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bloby-bot",
-  "version": "0.22.2",
+  "version": "0.22.6",
   "releaseNotes": [
     "1. testing chrome extension",
     "2. ",

package/supervisor/chat/src/components/Chat/BlobyImageCard.tsx

@@ -0,0 +1,63 @@
+import { Download, Maximize2 } from 'lucide-react';
+
+interface Props {
+  src: string;
+  alt?: string;
+  onExpand: () => void;
+}
+
+function getFilename(src: string): string {
+  const parts = src.split('/');
+  return parts[parts.length - 1] || 'bloby-image';
+}
+
+export default function BlobyImageCard({ src, alt, onExpand }: Props) {
+  const handleDownload = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      const res = await fetch(src);
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = getFilename(src);
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch {
+      window.open(src, '_blank');
+    }
+  };
+
+  return (
+    <div className="relative group/img my-2 inline-block rounded-xl overflow-hidden border border-border/30 bg-black/20">
+      <img
+        src={src}
+        alt={alt || 'Generated image'}
+        className="max-w-full max-h-80 object-contain cursor-pointer"
+        onClick={onExpand}
+        loading="lazy"
+      />
+      <div className="absolute top-2 right-2 flex gap-1.5 opacity-0 group-hover/img:opacity-100 transition-opacity">
+        <button
+          onClick={handleDownload}
+          className="p-1.5 rounded-lg bg-black/60 hover:bg-black/80 text-white/80 hover:text-white transition-colors backdrop-blur-sm"
+          title="Download original"
+        >
+          <Download className="h-4 w-4" />
+        </button>
+        <button
+          onClick={(e) => { e.stopPropagation(); onExpand(); }}
+          className="p-1.5 rounded-lg bg-black/60 hover:bg-black/80 text-white/80 hover:text-white transition-colors backdrop-blur-sm"
+          title="View full size"
+        >
+          <Maximize2 className="h-4 w-4" />
+        </button>
+      </div>
+      {alt && (
+        <div className="px-3 py-1.5 text-xs text-muted-foreground/70 truncate">{alt}</div>
+      )}
+    </div>
+  );
+}

package/supervisor/chat/src/components/Chat/ImageLightbox.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { ChevronLeft, ChevronRight, X } from 'lucide-react';
+import { ChevronLeft, ChevronRight, X, Download } from 'lucide-react';
 
 interface Props {
   images: string[];
@@ -38,13 +38,38 @@ export default function ImageLightbox({ images, index, onClose, onNavigate }: Pr
         className="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
         onClick={onClose}
       >
-        {/* Close button */}
-        <button
-          onClick={onClose}
-          className="absolute top-4 right-4 z-10 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors text-white"
-        >
-          <X className="h-5 w-5" />
-        </button>
+        {/* Action buttons */}
+        <div className="absolute top-4 right-4 z-10 flex gap-2">
+          <button
+            onClick={async (e) => {
+              e.stopPropagation();
+              try {
+                const res = await fetch(images[index]);
+                const blob = await res.blob();
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = images[index].split('/').pop() || 'image';
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+              } catch {
+                window.open(images[index], '_blank');
+              }
+            }}
+            className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors text-white"
+            title="Download"
+          >
+            <Download className="h-5 w-5" />
+          </button>
+          <button
+            onClick={onClose}
+            className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors text-white"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
 
         {/* Image counter */}
         {images.length > 1 && (

package/supervisor/chat/src/components/Chat/MessageBubble.tsx

@@ -5,6 +5,7 @@ import 'streamdown/styles.css';
 import { Paperclip, Copy, Check, ExternalLink } from 'lucide-react';
 import AudioBubble from './AudioBubble';
 import EnvForm, { type EnvGroupData, type EnvField } from './EnvForm';
+import BlobyImageCard from './BlobyImageCard';
 import type { StoredAttachment } from '../../hooks/useChat';
 
 interface Props {
@@ -34,23 +35,17 @@ function preprocessContent(text: string): string {
   );
 }
 
-type ContentSegment = { type: 'text'; value: string } | { type: 'env'; group: EnvGroupData };
+type ContentSegment = { type: 'text'; value: string } | { type: 'env'; group: EnvGroupData } | { type: 'bloby-image'; src: string; alt: string };
 
-/** Extract <EnvGroup> blocks from content, splitting into text and env form segments */
-function extractEnvSegments(text: string): ContentSegment[] {
+/** Extract <EnvGroup> and <BlobyImage> tags from content, splitting into typed segments */
+function extractContentSegments(text: string): ContentSegment[] {
+  // Collect all custom tag matches with their positions
+  const matches: { start: number; end: number; segment: ContentSegment }[] = [];
+
+  // Find <EnvGroup> blocks
   const envRegex = /<EnvGroup\s+title="([^"]+)">([\s\S]*?)<\/EnvGroup>/g;
-  const segments: ContentSegment[] = [];
-  let lastIndex = 0;
   let match: RegExpExecArray | null;
-
   while ((match = envRegex.exec(text)) !== null) {
-    // Text before this match
-    if (match.index > lastIndex) {
-      const before = text.slice(lastIndex, match.index).trim();
-      if (before) segments.push({ type: 'text', value: before });
-    }
-
-    // Parse <EnvInput> fields
     const title = match[1];
     const inner = match[2];
     const fields: EnvField[] = [];
@@ -59,15 +54,31 @@ function extractEnvSegments(text: string): ContentSegment[] {
     while ((inputMatch = inputRegex.exec(inner)) !== null) {
       fields.push({ name: inputMatch[1], label: inputMatch[2], placeholder: inputMatch[3] });
     }
-
     if (fields.length > 0) {
-      segments.push({ type: 'env', group: { title, fields } });
+      matches.push({ start: match.index, end: match.index + match[0].length, segment: { type: 'env', group: { title, fields } } });
     }
+  }
 
-    lastIndex = match.index + match[0].length;
+  // Find <BlobyImage> tags
+  const imgRegex = /<BlobyImage\s+src="([^"]+)"(?:\s+alt="([^"]*)")?\s*\/>/g;
+  while ((match = imgRegex.exec(text)) !== null) {
+    matches.push({ start: match.index, end: match.index + match[0].length, segment: { type: 'bloby-image', src: match[1], alt: match[2] || '' } });
   }
 
-  // Remaining text after last match
+  // Sort by position in text
+  matches.sort((a, b) => a.start - b.start);
+
+  // Build segments with text between tags
+  const segments: ContentSegment[] = [];
+  let lastIndex = 0;
+  for (const m of matches) {
+    if (m.start > lastIndex) {
+      const before = text.slice(lastIndex, m.start).trim();
+      if (before) segments.push({ type: 'text', value: before });
+    }
+    segments.push(m.segment);
+    lastIndex = m.end;
+  }
   if (lastIndex < text.length) {
     const after = text.slice(lastIndex).trim();
     if (after) segments.push({ type: 'text', value: after });
@@ -76,9 +87,9 @@ function extractEnvSegments(text: string): ContentSegment[] {
   return segments;
 }
 
-/** Check if content has any <EnvGroup> blocks */
-function hasEnvGroups(text: string): boolean {
-  return /<EnvGroup\s+title="[^"]+">/i.test(text);
+/** Check if content has any custom tags that need special rendering */
+function hasCustomTags(text: string): boolean {
+  return /<EnvGroup\s+title="[^"]+">/i.test(text) || /<BlobyImage\s+src="/i.test(text);
 }
 
 function CopyButton({ text }: { text: string }) {
@@ -256,9 +267,14 @@ export default function MessageBubble({ role, content, timestamp, hasAttachments
     </Streamdown>
   );
 
-  // Check if content has env groups — if so, split into segments
-  if (hasEnvGroups(content)) {
-    const segments = extractEnvSegments(content);
+  // Check if content has custom tags — if so, split into segments
+  if (hasCustomTags(content)) {
+    const segments = extractContentSegments(content);
+
+    // Collect BlobyImage URLs for lightbox navigation
+    const blobyImageUrls = segments.filter((s): s is Extract<ContentSegment, { type: 'bloby-image' }> => s.type === 'bloby-image').map((s) => s.src);
+    let imgIdx = 0;
+
     return (
       <div className="flex flex-col items-start gap-0.5">
         <div className="group relative w-full">
@@ -267,13 +283,15 @@ export default function MessageBubble({ role, content, timestamp, hasAttachments
             className="rounded-2xl px-4 py-2.5 text-sm leading-relaxed bg-muted text-foreground prose prose-sm prose-invert max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 break-words"
             onClickCapture={handleStreamdownClick}
           >
-            {segments.map((seg, i) =>
-              seg.type === 'text' ? (
-                <div key={i}>{renderStreamdown(seg.value)}</div>
-              ) : (
-                <EnvForm key={i} group={seg.group} />
-              ),
-            )}
+            {segments.map((seg, i) => {
+              if (seg.type === 'text') return <div key={i}>{renderStreamdown(seg.value)}</div>;
+              if (seg.type === 'env') return <EnvForm key={i} group={seg.group} />;
+              if (seg.type === 'bloby-image') {
+                const idx = imgIdx++;
+                return <BlobyImageCard key={i} src={seg.src} alt={seg.alt} onExpand={() => onImageClick?.(blobyImageUrls, idx)} />;
+              }
+              return null;
+            })}
           </div>
         </div>
         {time && <span className="text-[10px] text-muted-foreground/50 px-1">{time}</span>}

package/supervisor/index.ts

@@ -694,10 +694,8 @@ ${!connected ? '<script>setTimeout(()=>location.reload(),4000)</script>' : ''}
     // Bloby routes → serve pre-built static files from dist-bloby/
     // Note: must check '/bloby/' (with slash) to avoid matching '/bloby_tilts.webm' etc.
     if (req.url === '/bloby' || req.url?.startsWith('/bloby/')) {
-      // Strip /bloby prefix and resolve file path
-      let filePath = req.url!.replace(/^\/bloby\/?/, '') || 'bloby.html';
-      // Strip query strings (e.g. ?v=xxx)
-      filePath = filePath.split('?')[0];
+      // Strip /bloby prefix, then query strings, then resolve file path
+      let filePath = req.url!.replace(/^\/bloby\/?/, '').split('?')[0] || 'bloby.html';
       const fullPath = path.join(DIST_BLOBY, filePath);
 
       // Security: prevent directory traversal

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

@@ -1,6 +0,0 @@
-{
-  "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

@@ -1,181 +0,0 @@
-# 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.
-
-## Site-Specific Behaviors
-
-When you detect the user is on a specific type of site (from the page context URL), adapt what you offer:
-
-### YouTube (youtube.com, youtu.be)
-- Offer to transcribe the video
-- Offer to summarize, create bullet points, or extract key moments
-- Offer to turn it into a blog post or audio summary
-- The video URL is in the page context — you can fetch it or use tools to process it
-
-### Shopping (amazon.com, ebay.com, walmart.com, etsy.com, etc.)
-- Offer to find cheaper alternatives (web search)
-- Offer to save to a wishlist (workspace file)
-- Offer to compare prices across sites
-- Product name and price are extracted from structured data when available
-
-### Reddit / X / Social (reddit.com, x.com, twitter.com)
-- Offer to summarize long threads
-- Offer to draft a reply (the extension can type into input fields)
-- Offer to save interesting posts to workspace notes
-
-### Documentation / Articles (docs.*, medium.com, dev.to, any long-form text)
-- Offer to summarize the article
-- If text is selected, explain or elaborate on the selection
-- Offer to save key points to workspace notes
-
-### Forms (any page with detected form fields)
-- When `hasForms` is true in context, offer to help fill the form
-- Ask what information the user wants to fill
-- Use the form field names from context to understand what's needed
-
-### Email (gmail.com, outlook.com)
-- Offer to draft replies
-- Offer to summarize email threads
-
-### Blocked Sites — NEVER interact with page content
-- Banking: chase.com, wellsfargo.com, bankofamerica.com, any URL with /banking
-- Auth pages: any URL with /login, /signin, /auth, /password
-- Password managers: 1password.com, bitwarden.com, lastpass.com
-- Medical records: mychart.com, any URL with /health-records
-
-On blocked sites, you can still chat normally — just don't read or reference page content. If the user asks about the page, tell them: "I don't interact with sensitive pages like banking or login screens for your security."
-
-### Default (any other site)
-- Always share the URL and title (they're in the context)
-- If the user asks about "this page" or "this", fetch the URL for details
-- Offer to save interesting content to workspace
-
-## 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

@@ -1,182 +0,0 @@
-/**
- * Bloby Chrome Extension — Background Service Worker
- *
- * Responsibilities:
- * - Manages pairing state (serverUrl stored in chrome.storage.local)
- * - Handles pairing flow (verify code → save config)
- * - Responds to state queries from content scripts and popup
- *
- * Note: WebSocket connection is handled by the chat iframe inside the panel,
- * not by the background worker. The iframe loads the Bloby chat app which
- * manages its own WS connection and auth (portal login).
- */
-
-let config = null; // { serverUrl, username, tier }
-
-// ── Config Management ──────────────────────────────────────────────────────
-
-async function loadConfig() {
-  const data = await chrome.storage.local.get(['serverUrl', 'username', 'tier']);
-  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();
-  console.log('[bloby-bg] Config cleared — unpaired');
-}
-
-// ── 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(() => {});
-      }
-    }
-  } catch { /* ignore */ }
-}
-
-// ── Message Handler (from content scripts + popup) ─────────────────────────
-
-chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
-  if (msg.type === 'bloby:get-state') {
-    sendResponse({
-      paired: !!config?.serverUrl,
-      connected: true, // iframe manages its own connection
-      config: config ? { serverUrl: config.serverUrl, username: config.username } : null,
-    });
-    return true;
-  }
-
-  if (msg.type === 'bloby:pair') {
-    handlePair(msg.code).then(sendResponse);
-    return true;
-  }
-
-  // Content script: take screenshot
-  if (msg.type === 'bloby:screenshot') {
-    chrome.tabs.captureVisibleTab(null, { format: 'png' }, (dataUrl) => {
-      sendResponse({ dataUrl: dataUrl || null });
-    });
-    return true; // async
-  }
-
-  if (msg.type === 'bloby:unpair') {
-    (async () => {
-      // Clear frame rules
-      try {
-        const existing = await chrome.declarativeNetRequest.getDynamicRules();
-        await chrome.declarativeNetRequest.updateDynamicRules({
-          removeRuleIds: existing.map((r) => r.id),
-        });
-      } catch {}
-      await clearConfig();
-      broadcastToTabs({ type: 'bloby:unpaired' });
-      sendResponse({ success: true });
-    })();
-    return true;
-  }
-});
-
-// ── 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,
-    });
-
-    // Set up header rules to allow iframing the Bloby server
-    await updateFrameRules(data.serverUrl);
-
-    // Notify all tabs to show the bubble
-    broadcastToTabs({ type: 'bloby:paired', serverUrl: data.serverUrl });
-
-    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' };
-  }
-}
-
-// ── Frame Header Rules ─────────────────────────────────────────────────────
-// Strip X-Frame-Options and restrictive frame-ancestors from the Bloby server
-// so the chat can be loaded in the extension's panel iframe.
-
-async function updateFrameRules(serverUrl) {
-  const host = serverUrl.replace(/^https?:\/\//, '').replace(/\/$/, '');
-  console.log(`[bloby-bg] Setting frame rules for: *://${host}/*`);
-
-  try {
-    // Remove old rules
-    const existing = await chrome.declarativeNetRequest.getDynamicRules();
-    const removeIds = existing.map((r) => r.id);
-
-    await chrome.declarativeNetRequest.updateDynamicRules({
-      removeRuleIds: removeIds,
-      addRules: [
-        {
-          id: 1,
-          priority: 1,
-          action: {
-            type: 'modifyHeaders',
-            responseHeaders: [
-              { header: 'X-Frame-Options', operation: 'remove' },
-              { header: 'Content-Security-Policy', operation: 'remove' },
-            ],
-          },
-          condition: {
-            urlFilter: `*://${host}/*`,
-            resourceTypes: ['sub_frame'],
-          },
-        },
-      ],
-    });
-    console.log('[bloby-bg] Frame rules set successfully');
-  } catch (err) {
-    console.error('[bloby-bg] Failed to set frame rules:', err);
-  }
-}
-
-// ── Startup ────────────────────────────────────────────────────────────────
-
-(async () => {
-  const hasCfg = await loadConfig();
-  if (hasCfg && config.serverUrl) {
-    await updateFrameRules(config.serverUrl);
-  }
-})();