bloby-bot 0.18.1 → 0.18.2

package/package.json

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

package/supervisor/widget.js

@@ -63,6 +63,12 @@
   var BUBBLE_SIZE = 60;
   var BUBBLE_MARGIN = 24;
 
+  // ── Badge element (HTML, not canvas — avoids border-radius clipping) ──
+  var badgeEl = document.createElement('div');
+  badgeEl.id = 'bloby-widget-badge';
+  badgeEl.style.cssText = 'display:none;position:fixed;bottom:' + (BUBBLE_MARGIN + BUBBLE_SIZE - 14) + 'px;right:' + (BUBBLE_MARGIN - 5) + 'px;z-index:99999;min-width:20px;height:20px;border-radius:10px;background:#F04D68;color:#fff;font:bold 11px -apple-system,BlinkMacSystemFont,sans-serif;text-align:center;line-height:20px;padding:0 5px;box-sizing:border-box;pointer-events:none;';
+  document.body.appendChild(badgeEl);
+
   // ══════════════════════════════════════════════════════════════════
   // ── Headphones Sprite Sheet Config ───────────────────────────────
   // ══════════════════════════════════════════════════════════════════
@@ -389,23 +395,13 @@
     ctx.restore();
   }
 
-  function drawBadge() {
-    if (unreadCount <= 0 || canvasPhase !== 'bubble') return;
-    var text = unreadCount > 9 ? '9+' : String(unreadCount);
-    var size = 18;
-    var x = W - size / 2 - 1;
-    var y = size / 2 + 1;
-
-    ctx.beginPath();
-    ctx.arc(x, y, size / 2, 0, Math.PI * 2);
-    ctx.fillStyle = '#F04D68';
-    ctx.fill();
-
-    ctx.fillStyle = '#fff';
-    ctx.font = 'bold 11px -apple-system, BlinkMacSystemFont, sans-serif';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(text, x, y + 0.5);
+  function updateBadge() {
+    if (unreadCount <= 0 || canvasPhase !== 'bubble' || isOpen) {
+      badgeEl.style.display = 'none';
+      return;
+    }
+    badgeEl.textContent = unreadCount > 9 ? '9+' : String(unreadCount);
+    badgeEl.style.display = 'block';
   }
 
   function draw(now) {
@@ -433,8 +429,6 @@
     } else {
       drawBlobFrame(currentFrame, center.x, center.y);
     }
-
-    drawBadge();
   }
 
   // ── Animation loop ──
@@ -452,6 +446,7 @@
 
   function enterHpCanvasMode() {
     canvasPhase = 'headphones';
+    badgeEl.style.display = 'none';
     // Expand canvas, keeping center roughly aligned with the bubble center
     var bubbleCenterFromRight = BUBBLE_MARGIN + BUBBLE_SIZE / 2;
     var bubbleCenterFromBottom = BUBBLE_MARGIN + BUBBLE_SIZE / 2;
@@ -764,6 +759,7 @@
     backdrop.classList.toggle('open', isOpen);
     canvas.style.display = isOpen ? 'none' : 'block';
     if (isOpen) unreadCount = 0;
+    updateBadge();
   }
 
   // ── Bubble pointer handlers (tap → open panel, long-press → headphones mic) ──
@@ -845,6 +841,7 @@
     // New message from agent — badge the bubble if panel is closed
     if (e.data.type === 'bloby:new-message' && !isOpen) {
       unreadCount++;
+      updateBadge();
     }
 
     if (e.data.type === 'bloby:install-app') {