bloby-bot 0.21.13 → 0.22.1

package/bin/cli.js

@@ -431,7 +431,7 @@ async function runNamedTunnelSetup() {
 
   // Generate cloudflared config
   const config = fs.existsSync(CONFIG_PATH) ? JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')) : {};
-  const port = config.port || 3000;
+  const port = config.port || 7400;
   const cfHome = path.join(os.homedir(), '.cloudflared');
   const cfConfigPath = path.join(DATA_DIR, 'cloudflared-config.yml');
 
@@ -720,7 +720,7 @@ function createConfig() {
   fs.mkdirSync(DATA_DIR, { recursive: true });
   if (!fs.existsSync(CONFIG_PATH)) {
     const config = {
-      port: 3000,
+      port: 7400,
       username: '',
       ai: { provider: '', model: '', apiKey: '' },
       tunnel: { mode: 'quick' },

package/cli/commands/start.ts

@@ -64,7 +64,7 @@ export function registerStartCommand(program: Command) {
         s.stop(pc.green('Server running'));
 
         console.log(`\n${pc.bold('Bloby is ready!')}`);
-        console.log(`  ${pc.dim('Local:')}    ${pc.blue(`http://localhost:${config.port || 3000}`)}`);
+        console.log(`  ${pc.dim('Local:')}    ${pc.blue(`http://localhost:${config.port || 7400}`)}`);
 
         if (result.tunnelUrl && hasTunnel) {
           console.log(`  ${pc.dim('Tunnel:')}   ${pc.blue(result.tunnelUrl)}`);

package/cli/commands/tunnel.ts

@@ -54,7 +54,7 @@ async function runNamedTunnelSetup() {
   const domain = await text({ message: 'Your domain (e.g. bot.mydomain.com):' });
   if (isCancel(domain) || !domain) { cancel('Domain is required.'); process.exit(1); }
 
-  const { port = 3000 } = safeLoadConfig();
+  const { port = 7400 } = safeLoadConfig();
   const cfHome = path.join(os.homedir(), '.cloudflared');
   const cfConfigPath = path.join(DATA_DIR, 'cloudflared-config.yml');
 

package/cli/core/config.ts

@@ -39,7 +39,7 @@ export function createConfig() {
   if (fs.existsSync(CONFIG_PATH)) return;
 
   const config: Partial<BotConfig> = {
-    port: 3000,
+    port: 7400,
     username: '',
     ai: { provider: '', model: '', apiKey: '' },
     tunnel: { mode: 'quick' },

package/cli/core/server.ts

@@ -49,7 +49,7 @@ export function bootServer({
 
       resolve({
         child,
-        tunnelUrl: tunnelUrl || `http://localhost:${config.port || 3000}`,
+        tunnelUrl: tunnelUrl || `http://localhost:${config.port || 7400}`,
         relayUrl: relayUrl || config.relay?.url || null,
         tunnelFailed,
         viteWarm,

package/package.json

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

package/shared/config.ts

@@ -42,7 +42,7 @@ export interface BotConfig {
 }
 
 const DEFAULTS: BotConfig = {
-  port: 3000,
+  port: 7400,
   username: '',
   ai: { provider: '', model: '', apiKey: '' },
   tunnel: { mode: 'quick' },

package/supervisor/agents/prompts/coder.txt

@@ -68,7 +68,7 @@ Your working directory is the `workspace/` folder. This is your full-stack works
 
 ## Backend Routing (Critical)
 
-A supervisor process sits in front of everything on port 3000. It strips the `/app` prefix before forwarding to the backend, preserving the `/api/` path.
+A supervisor process sits in front of everything on port 7400. It strips the `/app` prefix before forwarding to the backend, preserving the `/api/` path.
 
 ```
 Browser: GET /app/api/tasks → Supervisor strips /app → Backend receives: GET /api/tasks

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

@@ -29,8 +29,8 @@ function formatTime(iso: string): string {
 /** Convert backtick-wrapped WhatsApp QR URL into a markdown link */
 function preprocessContent(text: string): string {
   return text.replace(
-    /`http:\/\/localhost:3000\/api\/channels\/whatsapp\/qr-page`/g,
-    '[pair-whatsapp](http://localhost:3000/api/channels/whatsapp/qr-page)'
+    /`http:\/\/localhost:\d+\/api\/channels\/whatsapp\/qr-page`/g,
+    '[pair-whatsapp](/api/channels/whatsapp/qr-page)'
   );
 }
 

package/supervisor/chat/src/lib/ws-client.ts

@@ -21,7 +21,7 @@ export class WsClient {
 
   constructor(url?: string, tokenGetter?: (() => string | null) | null) {
     const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const host = import.meta.env.DEV ? 'localhost:3000' : location.host;
+    const host = import.meta.env.DEV ? 'localhost:7400' : location.host;
     this.url = url ?? `${proto}//${host}/ws`;
     this.tokenGetter = tokenGetter ?? null;
   }

package/supervisor/index.ts

@@ -215,11 +215,35 @@ const RECOVERING_HTML = `<!DOCTYPE html><html style="background:#222122"><head><
 </div><script>setTimeout(function(){location.reload()},3000)</script>
 <script src="/bloby/widget.js"></script></body></html>`;
 
+/** Kill any stale process holding a port. Ensures clean startup after crashes/updates. */
+function killPort(port: number): void {
+  try {
+    const pids = execSync(`lsof -ti :${port} 2>/dev/null`, { encoding: 'utf-8' }).trim();
+    if (pids) {
+      const pidList = pids.split('\n').filter(Boolean);
+      const ownPid = process.pid.toString();
+      const toKill = pidList.filter((p) => p !== ownPid);
+      if (toKill.length) {
+        log.info(`[startup] Killing stale process(es) on port ${port}: ${toKill.join(', ')}`);
+        execSync(`kill -9 ${toKill.join(' ')} 2>/dev/null`);
+      }
+    }
+  } catch {
+    // No process on port, or kill failed (already dead) — fine
+  }
+}
+
 export async function startSupervisor() {
   const config = loadConfig();
   const backendPort = getBackendPort(config.port);
   const internalSecret = crypto.randomBytes(16).toString('hex');
 
+  // Kill any stale processes from previous crashes/updates
+  log.info(`[startup] Clearing ports ${config.port}, ${config.port + 2}, ${backendPort}...`);
+  killPort(config.port);      // supervisor
+  killPort(config.port + 2);  // vite
+  killPort(backendPort);      // backend
+
   // Create HTTP server first (Vite needs it for HMR WebSocket)
   // The request handler is set up later via server.on('request')
   const server = http.createServer();

package/vite.config.ts

@@ -24,10 +24,10 @@ export default defineConfig({
     port: 5173,
     proxy: {
       '/app/api': {
-        target: 'http://localhost:3004',
+        target: 'http://localhost:7404',
         rewrite: (path) => path.replace(/^\/app/, ''),
       },
-      '/api': 'http://localhost:3000',
+      '/api': 'http://localhost:7400',
     },
     warmup: {
       clientFiles: ['./src/main.tsx'],

package/worker/prompts/bloby-system-prompt.txt

@@ -278,7 +278,7 @@ skills/
 
 Only ONE skill can be active for customer-facing mode at a time. The active skill is set in the channel config (`channels.whatsapp.skill`). When your human asks to switch skills, update the config:
 ```bash
-curl -s -X POST http://localhost:3000/api/channels/whatsapp/configure \
+curl -s -X POST http://localhost:7400/api/channels/whatsapp/configure \
   -H "Content-Type: application/json" -d '{"skill":"whatsapp-clinic"}'
 ```
 
@@ -357,14 +357,14 @@ The format is: `[Channel | phone | role | name (optional)]`
 ### Setting Up WhatsApp
 
 When your human asks to configure WhatsApp:
-1. Start the connection: `curl -s -X POST http://localhost:3000/api/channels/whatsapp/connect`
-2. Tell them to open the QR page: `http://localhost:3000/api/channels/whatsapp/qr-page` (Don't mention the URL until you are actually starting the connection)
+1. Start the connection: `curl -s -X POST http://localhost:7400/api/channels/whatsapp/connect`
+2. Tell them to open the QR page: `http://localhost:7400/api/channels/whatsapp/qr-page` (Don't mention the URL until you are actually starting the connection)
 3. They scan the QR with their WhatsApp app
 4. The default mode is **channel** (self-chat only)
 
 To switch to **business mode** with admin numbers:
 ```bash
-curl -s -X POST http://localhost:3000/api/channels/whatsapp/configure \
+curl -s -X POST http://localhost:7400/api/channels/whatsapp/configure \
   -H "Content-Type: application/json" \
   -d '{"mode":"business","admins":["+17865551234","+5511999887766"]}'
 ```
@@ -373,7 +373,7 @@ curl -s -X POST http://localhost:3000/api/channels/whatsapp/configure \
 
 To INITIATE a WhatsApp message (during pulse, cron, or when you want to reach out first):
 ```bash
-curl -s -X POST http://localhost:3000/api/channels/send \
+curl -s -X POST http://localhost:7400/api/channels/send \
   -H "Content-Type: application/json" \
   -d '{"channel":"whatsapp","to":"5511999888777","text":"Your appointment is confirmed for tomorrow at 2pm."}'
 ```
@@ -403,7 +403,7 @@ This is your memory of that customer. Next time they message, read their file fi
 | `/api/channels/whatsapp/configure` | POST | Set mode + admins array |
 | `/api/channels/send` | POST | Send proactive message via any channel |
 
-All endpoints are on `http://localhost:3000`.
+All endpoints are on `http://localhost:7400`.
 
 ---
 
@@ -480,7 +480,7 @@ Rules:
 
 ## Backend Routing (Critical)
 
-A supervisor process sits in front of everything on port 3000. It strips the `/app` prefix before forwarding to the backend, preserving the `/api/` path.
+A supervisor process sits in front of everything on port 7400. It strips the `/app` prefix before forwarding to the backend, preserving the `/api/` path.
 
 ```
 Browser: GET /app/api/tasks → Supervisor strips /app → Backend receives: GET /api/tasks

package/workspace/backend/index.ts

@@ -3,7 +3,7 @@ import fs from 'fs';
 import path from 'path';
 import Database from 'better-sqlite3';
 
-const PORT = parseInt(process.env.BACKEND_PORT || '3004', 10);
+const PORT = parseInt(process.env.BACKEND_PORT || '7404', 10);
 const WORKSPACE = path.resolve(import.meta.dirname, '..');
 
 // Load workspace/.env manually (no dotenv dep needed)

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();
+})();