bloby-bot 0.18.7 → 0.18.9

package/supervisor/widget.js

@@ -6,9 +6,7 @@
   // ── Styles ──
   var style = document.createElement('style');
   style.textContent = [
-    '#bloby-widget-bubble{transition:transform .15s ease;-webkit-tap-highlight-color:transparent}',
-    '#bloby-widget-bubble:hover{transform:scale(1.1)}',
-    '#bloby-widget-bubble:active{transform:scale(0.95)}',
+    '#bloby-widget-bubble{-webkit-tap-highlight-color:transparent}',
     '#bloby-widget-backdrop{position:fixed;inset:0;z-index:99998;background:rgba(0,0,0,0.4);opacity:0;transition:opacity .2s ease;pointer-events:none}',
     '#bloby-widget-backdrop.open{opacity:1;pointer-events:auto}',
     '#bloby-widget-panel{position:fixed;top:0;right:0;bottom:0;z-index:99999;width:' + PANEL_WIDTH + ';max-width:100vw;transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 24px rgba(0,0,0,0.3);border-left:1px solid #3a3a3a;overflow:hidden}',
@@ -33,7 +31,7 @@
   panel.appendChild(iframe);
 
   // ══════════════════════════════════════════════════════════════════
-  // ── Blob Sprite Sheet Config ─────────────────────────────────────
+  // ── Blob Sprite Sheet Config (splash only) ───────────────────────
   // ══════════════════════════════════════════════════════════════════
 
   var COLS = 16;
@@ -42,13 +40,11 @@
   var DISPLAY_H = 58;
   var DISPLAY_W = DISPLAY_H * (FRAME_W / FRAME_H);
 
-  // Frame ranges (0-indexed)
   var IDLE_START = 0, IDLE_END = 29;
   var MELT_START = 30, MELT_END = 52;
   var TRAVEL_START = 52, TRAVEL_END = 84;
   var REFORM_START = 84, REFORM_END = 191;
 
-  // Timing
   var FPS = 29;
   var FRAME_MS = 1000 / FPS;
   var IDLE_FPS = 22;
@@ -63,47 +59,47 @@
   var BUBBLE_SIZE = 60;
   var BUBBLE_MARGIN = 24;
 
-  // ── Badge element (HTML, not canvas — avoids border-radius clipping) ──
+  // ── Badge element ──
   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 ───────────────────────────────
+  // ── Headphones Sprite Sheet Config (v2 — bubble + recording) ─────
   // ══════════════════════════════════════════════════════════════════
 
   var HP_COLS = 16;
   var HP_FRAME_W = 126;
   var HP_FRAME_H = 84;
-  var HP_DISPLAY_H = 56;
-  var HP_DISPLAY_W = HP_DISPLAY_H * (HP_FRAME_W / HP_FRAME_H);
+  // Bubble display: fill 60px width exactly
+  var HP_BUBBLE_H = 40;
+  var HP_BUBBLE_W = HP_BUBBLE_H * (HP_FRAME_W / HP_FRAME_H); // 60
 
+  // v2 frame ranges
+  var HP_IDLE_FRAME = 10;
   var HP_ACTIVATE_START = 11, HP_ACTIVATE_END = 40;
-  var HP_RECORD_START = 41, HP_RECORD_END = 85;
-  var HP_DEACTIVATE_START = 85, HP_DEACTIVATE_END = 191;
-  var HP_FPS = 24;
-  var HP_FRAME_MS = 1000 / HP_FPS;
+  var HP_RECORD_START = 40, HP_RECORD_END = 85;
 
-  // Expanded canvas for headphones mode
-  var HP_CANVAS_W = 90;
-  var HP_CANVAS_H = 66;
+  // v2 FPS: 2x speed for activate/deactivate, normal for recording
+  var HP_BASE_FPS = 24;
+  var HP_FAST_FPS = 48;
 
-  // Long-press threshold (ms) — 1 second, like WhatsApp
-  var HP_HOLD_MS = 1000;
+  // Long-press threshold
+  var HP_HOLD_MS = 500;
 
-  // ── Bubble CSS (shared — DRY) ──
-  var BUBBLE_CSS = 'position:fixed;bottom:' + BUBBLE_MARGIN + 'px;right:' + BUBBLE_MARGIN + 'px;width:' + BUBBLE_SIZE + 'px;height:' + BUBBLE_SIZE + 'px;z-index:99998;cursor:pointer;border-radius:50%;transition:transform .15s ease;-webkit-tap-highlight-color:transparent;touch-action:none;';
+  // ── Bubble CSS (shared) ──
+  var BUBBLE_CSS = 'position:fixed;bottom:' + BUBBLE_MARGIN + 'px;right:' + BUBBLE_MARGIN + 'px;width:' + BUBBLE_SIZE + 'px;height:' + BUBBLE_SIZE + 'px;z-index:99998;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent;touch-action:none;';
 
   // ── Easing ──
   function easeInOutCubic(t) { return t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3) / 2; }
 
-  // ── Splash guard (skip on soft refresh within same tab) ──
+  // ── Splash guard ──
   var SPLASH_KEY = 'bloby_splash_played';
   var splashSeen = false;
   try { splashSeen = sessionStorage.getItem(SPLASH_KEY) === '1'; } catch(e) {}
 
-  // ── Canvas setup (starts fullscreen for splash) ──
+  // ── Canvas setup ──
   var canvas = document.createElement('canvas');
   canvas.id = 'bloby-widget-bubble';
   canvas.setAttribute('role', 'button');
@@ -117,7 +113,7 @@
   var dpr = window.devicePixelRatio || 1;
   var W = 0, H = 0;
 
-  // ── Canvas phase: 'splash' | 'transitioning' | 'bubble' | 'headphones' | 'disabled' ──
+  // ── Canvas phase: 'splash' | 'transitioning' | 'bubble' | 'disabled' ──
   var canvasPhase = 'splash';
   var canvasCreatedAt = Date.now();
   var appReady = false;
@@ -126,14 +122,9 @@
 
   function resizeCanvas() {
     if (canvasPhase === 'bubble') {
-      W = BUBBLE_SIZE;
-      H = BUBBLE_SIZE;
-    } else if (canvasPhase === 'headphones') {
-      W = HP_CANVAS_W;
-      H = HP_CANVAS_H;
+      W = BUBBLE_SIZE; H = BUBBLE_SIZE;
     } else {
-      W = window.innerWidth;
-      H = window.innerHeight;
+      W = window.innerWidth; H = window.innerHeight;
     }
     canvas.width = W * dpr;
     canvas.height = H * dpr;
@@ -150,7 +141,7 @@
     }
   });
 
-  // ── Blob animation state ──
+  // ── Blob animation state (splash only) ──
   var spriteSheet = null;
   var animState = 'loading';
   var currentFrame = 0;
@@ -161,22 +152,22 @@
   var travelAngle = 0;
   var travelDrawAngle = 0;
   var travelFlip = 1;
-
   var center  = { x: 0, y: 0 };
   var travelA = { x: 0, y: 0 };
   var target  = { x: 0, y: 0 };
 
-  // ── Headphones animation state ──
+  // ── Headphones animation state (bubble) ──
   var hpSpriteSheet = null;
-  var hpState = 'none'; // none | activating | recording | deactivating | activating_then_deactivate
-  var hpFrame = 0;
+  // idle | activating | activating_then_deactivate | recording | deactivating
+  var hpState = 'idle';
+  var hpFrame = HP_IDLE_FRAME;
   var hpPingPong = 1;
   var hpLastFrameTime = 0;
 
   // ── Unread badge ──
   var unreadCount = 0;
 
-  // ── Headphones mic recording state ──
+  // ── Mic recording state ──
   var hpMediaRecorder = null;
   var hpAudioChunks = [];
   var hpStream = null;
@@ -198,69 +189,65 @@
       center.y = Math.round(H / 2);
       currentFrame = IDLE_START;
       animState = 'idle';
-
-      // Hide the HTML splash fallback
       var splash = document.getElementById('splash');
       if (splash) splash.style.display = 'none';
-
       onDone();
     };
-    img.onerror = function () {
-      if (onFail) onFail();
-    };
+    img.onerror = function () { if (onFail) onFail(); };
     img.src = '/spritesheet.webp';
   }
 
-  // ── Load headphones sprite sheet (lazy, called after bubble ready) ──
+  // ── Load headphones sprite sheet ──
   function loadHpSprite(cb) {
     if (hpSpriteSheet) { if (cb) cb(); return; }
     var img = new Image();
     img.onload = function () { hpSpriteSheet = img; if (cb) cb(); };
-    img.onerror = function () { console.error('[widget] headphones spritesheet failed to load'); };
+    img.onerror = function () { console.error('[widget] headphones sprite failed'); };
     img.src = '/headphones_spritesheet.webp';
   }
 
-  // ── Trigger blob move ──
+  // ── Trigger blob move (splash) ──
   function moveTo(tx, ty) {
     if (animState !== 'idle') return;
-    target.x = tx;
-    target.y = ty;
-    travelA.x = center.x;
-    travelA.y = center.y;
-
-    var dx = target.x - center.x;
-    var dy = target.y - center.y;
+    target.x = tx; target.y = ty;
+    travelA.x = center.x; travelA.y = center.y;
+    var dx = target.x - center.x, dy = target.y - center.y;
     var dist = Math.sqrt(dx * dx + dy * dy);
-
     travelAngle = Math.atan2(dy, dx);
     travelDrawAngle = travelAngle;
     travelFlip = 1;
     if (travelDrawAngle > Math.PI / 2) { travelDrawAngle -= Math.PI; travelFlip = -1; }
     else if (travelDrawAngle < -Math.PI / 2) { travelDrawAngle += Math.PI; travelFlip = -1; }
     travelDuration = Math.min(TRAVEL_MAX, Math.max(TRAVEL_MIN, dist / TRAVEL_PX_PER_MS));
-
     currentFrame = MELT_START;
     lastFrameTime = performance.now();
     animState = 'melting';
   }
 
   // ══════════════════════════════════════════════════════════════════
-  // ── Update (blob + headphones) ───────────────────────────────────
+  // ── Update ───────────────────────────────────────────────────────
   // ══════════════════════════════════════════════════════════════════
 
+  function hpFps() {
+    if (hpState === 'activating' || hpState === 'activating_then_deactivate' || hpState === 'deactivating') return HP_FAST_FPS;
+    return HP_BASE_FPS;
+  }
+
   function update(now) {
-    // ── Headphones animation ──
-    if (hpState !== 'none') {
+    // ── Headphones animation (bubble mode) ──
+    if (canvasPhase === 'bubble' && hpState !== 'idle') {
+      var hpInterval = 1000 / hpFps();
       var hpDelta = now - hpLastFrameTime;
-      if (hpDelta >= HP_FRAME_MS) {
-        hpLastFrameTime = now - (hpDelta % HP_FRAME_MS);
+      if (hpDelta >= hpInterval) {
+        hpLastFrameTime = now - (hpDelta % hpInterval);
 
         if (hpState === 'activating' || hpState === 'activating_then_deactivate') {
           hpFrame++;
           if (hpFrame > HP_ACTIVATE_END) {
             if (hpState === 'activating_then_deactivate') {
+              // Reverse back to idle
               hpState = 'deactivating';
-              hpFrame = HP_DEACTIVATE_START;
+              hpFrame = HP_ACTIVATE_END;
             } else {
               hpState = 'recording';
               hpFrame = HP_RECORD_START;
@@ -272,28 +259,26 @@
           if (hpFrame >= HP_RECORD_END) { hpFrame = HP_RECORD_END; hpPingPong = -1; }
           else if (hpFrame <= HP_RECORD_START) { hpFrame = HP_RECORD_START; hpPingPong = 1; }
         } else if (hpState === 'deactivating') {
-          hpFrame++;
-          if (hpFrame > HP_DEACTIVATE_END) {
-            hpState = 'none';
-            endHpCanvasMode();
+          // v2: reverse 40→11
+          hpFrame--;
+          if (hpFrame < HP_ACTIVATE_START) {
+            hpState = 'idle';
+            hpFrame = HP_IDLE_FRAME;
           }
         }
       }
-      return; // Skip blob update while headphones active
+      return; // skip blob update
     }
 
-    // ── Blob animation ──
-    // Smooth position during travel (every rAF)
+    // ── Blob animation (splash/transition only) ──
     if (animState === 'traveling') {
       var elapsed = now - travelStartTime;
       var progress = Math.min(1, elapsed / travelDuration);
       var e = easeInOutCubic(progress);
       center.x = travelA.x + (target.x - travelA.x) * e;
       center.y = travelA.y + (target.y - travelA.y) * e;
-
       if (progress >= 1) {
-        center.x = target.x;
-        center.y = target.y;
+        center.x = target.x; center.y = target.y;
         animState = 'reforming';
         currentFrame = REFORM_START;
         lastFrameTime = now;
@@ -301,7 +286,6 @@
       }
     }
 
-    // Sprite frame advance (at configured FPS)
     var frameInterval = animState === 'idle' ? IDLE_FRAME_MS
                       : animState === 'reforming' ? REFORM_FRAME_MS
                       : FRAME_MS;
@@ -315,11 +299,7 @@
       else if (currentFrame <= IDLE_START) { currentFrame = IDLE_START; idleDirection = 1; }
     } else if (animState === 'melting') {
       currentFrame++;
-      if (currentFrame > MELT_END) {
-        animState = 'traveling';
-        currentFrame = TRAVEL_START;
-        travelStartTime = now;
-      }
+      if (currentFrame > MELT_END) { animState = 'traveling'; currentFrame = TRAVEL_START; travelStartTime = now; }
     } else if (animState === 'traveling') {
       currentFrame++;
       if (currentFrame > TRAVEL_END) currentFrame = TRAVEL_START;
@@ -329,73 +309,37 @@
         animState = 'idle';
         currentFrame = IDLE_START;
         idleDirection = 1;
-        // Transition canvas to bubble mode
         if (canvasPhase === 'transitioning') {
-          canvasPhase = 'bubble';
-          canvas.style.cssText = BUBBLE_CSS;
-          W = BUBBLE_SIZE;
-          H = BUBBLE_SIZE;
-          canvas.width = BUBBLE_SIZE * dpr;
-          canvas.height = BUBBLE_SIZE * dpr;
-          ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-          center.x = BUBBLE_SIZE / 2;
-          center.y = BUBBLE_SIZE / 2;
-          // Mark splash as played for this session
-          try { sessionStorage.setItem(SPLASH_KEY, '1'); } catch(e) {}
-          // Preload headphones sprite in background
-          loadHpSprite();
-          if (hideAfterTransition) {
-            canvas.style.display = 'none';
-          }
+          enterBubbleMode();
         }
       }
     }
   }
 
   // ══════════════════════════════════════════════════════════════════
-  // ── Draw (blob + headphones) ─────────────────────────────────────
+  // ── Draw ─────────────────────────────────────────────────────────
   // ══════════════════════════════════════════════════════════════════
 
   function drawBlobFrame(frame, x, y, rotate, flipX) {
     if (!spriteSheet) return;
-    var col = frame % COLS;
-    var row = Math.floor(frame / COLS);
-    var sx = col * FRAME_W;
-    var sy = row * FRAME_H;
-
+    var col = frame % COLS, row = Math.floor(frame / COLS);
     ctx.save();
     ctx.translate(x, y);
     if (rotate) ctx.rotate(rotate);
     if (flipX === -1) ctx.scale(-1, 1);
     ctx.imageSmoothingEnabled = true;
     ctx.imageSmoothingQuality = 'high';
-    ctx.drawImage(
-      spriteSheet,
-      sx, sy, FRAME_W, FRAME_H,
-      -DISPLAY_W / 2, -DISPLAY_H / 2,
-      DISPLAY_W, DISPLAY_H
-    );
+    ctx.drawImage(spriteSheet, col * FRAME_W, row * FRAME_H, FRAME_W, FRAME_H, -DISPLAY_W / 2, -DISPLAY_H / 2, DISPLAY_W, DISPLAY_H);
     ctx.restore();
   }
 
   function drawHpFrame(frame) {
     if (!hpSpriteSheet) return;
-    var col = frame % HP_COLS;
-    var row = Math.floor(frame / HP_COLS);
-    var sx = col * HP_FRAME_W;
-    var sy = row * HP_FRAME_H;
-
-    ctx.save();
-    ctx.translate(W / 2, H / 2);
+    var col = frame % HP_COLS, row = Math.floor(frame / HP_COLS);
+    var dx = (W - HP_BUBBLE_W) / 2, dy = (H - HP_BUBBLE_H) / 2;
     ctx.imageSmoothingEnabled = true;
     ctx.imageSmoothingQuality = 'high';
-    ctx.drawImage(
-      hpSpriteSheet,
-      sx, sy, HP_FRAME_W, HP_FRAME_H,
-      -HP_DISPLAY_W / 2, -HP_DISPLAY_H / 2,
-      HP_DISPLAY_W, HP_DISPLAY_H
-    );
-    ctx.restore();
+    ctx.drawImage(hpSpriteSheet, col * HP_FRAME_W, row * HP_FRAME_H, HP_FRAME_W, HP_FRAME_H, dx, dy, HP_BUBBLE_W, HP_BUBBLE_H);
   }
 
   function updateBadge() {
@@ -407,28 +351,25 @@
     badgeEl.style.display = 'block';
   }
 
-  function draw(now) {
+  function draw() {
     ctx.clearRect(0, 0, W, H);
 
-    // Headphones mode
-    if (hpState !== 'none') {
+    // Bubble mode → headphones sprite
+    if (canvasPhase === 'bubble') {
       drawHpFrame(hpFrame);
       return;
     }
 
-    // Blob mode
+    // Splash / transition → blob sprite
     if (!spriteSheet || animState === 'loading') return;
-
     if (animState === 'melting') {
       var p = (currentFrame - MELT_START) / (MELT_END - MELT_START);
-      var eased = p * p;
-      drawBlobFrame(currentFrame, center.x, center.y, travelDrawAngle * eased, travelFlip);
+      drawBlobFrame(currentFrame, center.x, center.y, travelDrawAngle * p * p, travelFlip);
     } else if (animState === 'traveling') {
       drawBlobFrame(currentFrame, center.x, center.y, travelDrawAngle, travelFlip);
     } else if (animState === 'reforming') {
       var p2 = (currentFrame - REFORM_START) / (REFORM_END - REFORM_START);
-      var eased2 = 1 - (1 - p2) * (1 - p2);
-      drawBlobFrame(currentFrame, center.x, center.y, travelDrawAngle * (1 - eased2));
+      drawBlobFrame(currentFrame, center.x, center.y, travelDrawAngle * (1 - (1 - (1 - p2) * (1 - p2))));
     } else {
       drawBlobFrame(currentFrame, center.x, center.y);
     }
@@ -436,73 +377,49 @@
 
   // ── Animation loop ──
   function loop(now) {
-    if (animState !== 'loading' || hpState !== 'none') {
+    if (animState !== 'loading' || canvasPhase === 'bubble') {
       update(now);
-      draw(now);
+      draw();
     }
     requestAnimationFrame(loop);
   }
 
   // ══════════════════════════════════════════════════════════════════
-  // ── Headphones Canvas Mode ───────────────────────────────────────
+  // ── Bubble Mode ──────────────────────────────────────────────────
   // ══════════════════════════════════════════════════════════════════
 
-  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;
-    var hpRight = Math.round(bubbleCenterFromRight - HP_CANVAS_W / 2);
-    var hpBottom = Math.round(bubbleCenterFromBottom - HP_CANVAS_H / 2);
-    canvas.style.cssText = 'position:fixed;bottom:' + hpBottom + 'px;right:' + hpRight + 'px;width:' + HP_CANVAS_W + 'px;height:' + HP_CANVAS_H + 'px;z-index:99998;cursor:pointer;border-radius:12px;pointer-events:auto;touch-action:none;';
-    W = HP_CANVAS_W;
-    H = HP_CANVAS_H;
-    canvas.width = HP_CANVAS_W * dpr;
-    canvas.height = HP_CANVAS_H * dpr;
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-
-    hpState = 'activating';
-    hpFrame = HP_ACTIVATE_START;
-    hpLastFrameTime = performance.now();
-  }
-
-  function endHpCanvasMode() {
+  function enterBubbleMode() {
     canvasPhase = 'bubble';
     canvas.style.cssText = BUBBLE_CSS;
-    W = BUBBLE_SIZE;
-    H = BUBBLE_SIZE;
+    W = BUBBLE_SIZE; H = BUBBLE_SIZE;
     canvas.width = BUBBLE_SIZE * dpr;
     canvas.height = BUBBLE_SIZE * dpr;
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    center.x = BUBBLE_SIZE / 2;
-    center.y = BUBBLE_SIZE / 2;
-    animState = 'idle';
-    currentFrame = IDLE_START;
-    idleDirection = 1;
+    hpState = 'idle';
+    hpFrame = HP_IDLE_FRAME;
+    try { sessionStorage.setItem(SPLASH_KEY, '1'); } catch(e) {}
+    loadHpSprite();
+    if (hideAfterTransition) canvas.style.display = 'none';
   }
 
   // ══════════════════════════════════════════════════════════════════
-  // ── Headphones Mic Recording ─────────────────────────────────────
+  // ── Mic Recording ────────────────────────────────────────────────
   // ══════════════════════════════════════════════════════════════════
 
-  /** Check mic permission state without triggering a prompt */
   function checkMicPermission() {
     if (hpMicPermitted) return Promise.resolve('granted');
     if (navigator.permissions && navigator.permissions.query) {
-      return navigator.permissions.query({ name: 'microphone' }).then(function(status) {
-        if (status.state === 'granted') { hpMicPermitted = true; return 'granted'; }
-        return status.state; // 'prompt' or 'denied'
+      return navigator.permissions.query({ name: 'microphone' }).then(function(s) {
+        if (s.state === 'granted') { hpMicPermitted = true; return 'granted'; }
+        return s.state;
       }).catch(function() { return 'unknown'; });
     }
     return Promise.resolve('unknown');
   }
 
-  /** Start mic capture (shared by initial recording and re-activation) */
   function startMicCapture() {
     if (hpWhisperEnabled) {
       navigator.mediaDevices.getUserMedia({ audio: true }).then(function(stream) {
-        // If user released while getUserMedia was pending, clean up
         if (!hpPointerDown) {
           stream.getTracks().forEach(function(t) { t.stop(); });
           if (hpState === 'activating') hpState = 'activating_then_deactivate';
@@ -513,9 +430,7 @@
           ? 'audio/webm;codecs=opus' : 'audio/webm';
         var recorder = new MediaRecorder(stream, { mimeType: mimeType });
         hpAudioChunks = [];
-        recorder.ondataavailable = function(ev) {
-          if (ev.data.size > 0) hpAudioChunks.push(ev.data);
-        };
+        recorder.ondataavailable = function(ev) { if (ev.data.size > 0) hpAudioChunks.push(ev.data); };
         hpMediaRecorder = recorder;
         recorder.start();
       }).catch(function(err) {
@@ -529,62 +444,45 @@
       recognition.lang = navigator.language || 'en-US';
       hpSpeechTranscript = '';
       hpSpeechInstance = recognition;
-
-      recognition.onresult = function(event) {
-        var last = event.results[event.results.length - 1];
-        hpSpeechTranscript = last[0].transcript;
-      };
+      recognition.onresult = function(event) { hpSpeechTranscript = event.results[event.results.length - 1][0].transcript; };
       recognition.onend = function() { hpSpeechInstance = null; };
-      recognition.onerror = function(event) {
-        console.error('[widget] speech error:', event.error);
-        hpSpeechInstance = null;
-      };
-      try { recognition.start(); } catch(e) {
-        console.error('[widget] speech start failed:', e);
-      }
+      recognition.onerror = function(ev) { console.error('[widget] speech error:', ev.error); hpSpeechInstance = null; };
+      try { recognition.start(); } catch(e) {}
     }
   }
 
-  /** Entry point: permission check → sprite load → begin recording */
   function startHpRecording() {
-    // Need at least one voice backend
     if (!hpWhisperEnabled && !hpWebSpeechCtor) return;
 
     checkMicPermission().then(function(permState) {
       if (permState === 'denied') return;
-
       if (permState === 'prompt' || permState === 'unknown') {
-        // Request permission — this may show a dialog
         navigator.mediaDevices.getUserMedia({ audio: true }).then(function(testStream) {
           testStream.getTracks().forEach(function(t) { t.stop(); });
           hpMicPermitted = true;
-          // User may have released to click Allow — check before proceeding
           if (!hpPointerDown) return;
-          finishStartHpRecording();
-        }).catch(function() { /* denied */ });
+          beginHpAnimation();
+        }).catch(function() {});
         return;
       }
-
-      // Permission already granted
-      finishStartHpRecording();
+      beginHpAnimation();
     });
   }
 
-  function finishStartHpRecording() {
+  function beginHpAnimation() {
     if (!hpPointerDown) return;
     if (!hpSpriteSheet) {
-      loadHpSprite(function() {
-        if (!hpPointerDown) return;
-        enterHpCanvasMode();
-        startMicCapture();
-      });
+      loadHpSprite(function() { if (hpPointerDown) beginHpAnimation(); });
       return;
     }
-    enterHpCanvasMode();
+    badgeEl.style.display = 'none';
+    hpState = 'activating';
+    hpFrame = HP_ACTIVATE_START;
+    hpPingPong = 1;
+    hpLastFrameTime = performance.now();
     startMicCapture();
   }
 
-  /** Stop recording and optionally send audio to iframe */
   function stopHpRecording(cancelled) {
     if (cancelled) {
       if (hpStream) { hpStream.getTracks().forEach(function(t) { t.stop(); }); hpStream = null; }
@@ -593,25 +491,18 @@
       if (hpSpeechInstance) { try { hpSpeechInstance.abort(); } catch(e) {} hpSpeechInstance = null; }
       hpSpeechTranscript = '';
     } else {
-      // Normal stop — send the recorded audio/transcript to the iframe
       if (hpWhisperEnabled && hpMediaRecorder && hpMediaRecorder.state !== 'inactive') {
         var recorder = hpMediaRecorder;
         var stream = hpStream;
         recorder.onstop = function() {
           if (stream) stream.getTracks().forEach(function(t) { t.stop(); });
           var blob = new Blob(hpAudioChunks, { type: 'audio/webm' });
-          hpAudioChunks = [];
-          hpMediaRecorder = null;
-          hpStream = null;
+          hpAudioChunks = []; hpMediaRecorder = null; hpStream = null;
           if (blob.size < 1000) return;
-
           var reader = new FileReader();
           reader.onloadend = function() {
-            var dataUrl = reader.result;
-            var base64 = dataUrl.split(',')[1];
-            if (base64 && iframe.contentWindow) {
-              iframe.contentWindow.postMessage({ type: 'bloby:voice-record', audio: base64 }, '*');
-            }
+            var base64 = reader.result.split(',')[1];
+            if (base64 && iframe.contentWindow) iframe.contentWindow.postMessage({ type: 'bloby:voice-record', audio: base64 }, '*');
           };
           reader.readAsDataURL(blob);
         };
@@ -620,38 +511,25 @@
         var instance = hpSpeechInstance;
         var sent = false;
         var sendTranscript = function() {
-          if (sent) return;
-          sent = true;
+          if (sent) return; sent = true;
           var text = hpSpeechTranscript.trim();
           hpSpeechTranscript = '';
-          if (text && iframe.contentWindow) {
-            iframe.contentWindow.postMessage({ type: 'bloby:voice-record', transcript: text }, '*');
-          }
-        };
-        instance.onend = function() {
-          hpSpeechInstance = null;
-          sendTranscript();
+          if (text && iframe.contentWindow) iframe.contentWindow.postMessage({ type: 'bloby:voice-record', transcript: text }, '*');
         };
-        try { instance.stop(); } catch(e) {
-          hpSpeechInstance = null;
-          sendTranscript();
-        }
-        // Safety timeout
-        setTimeout(function() {
-          if (hpSpeechInstance === instance) hpSpeechInstance = null;
-          sendTranscript();
-        }, 2000);
+        instance.onend = function() { hpSpeechInstance = null; sendTranscript(); };
+        try { instance.stop(); } catch(e) { hpSpeechInstance = null; sendTranscript(); }
+        setTimeout(function() { if (hpSpeechInstance === instance) hpSpeechInstance = null; sendTranscript(); }, 2000);
       } else {
         if (hpStream) { hpStream.getTracks().forEach(function(t) { t.stop(); }); hpStream = null; }
       }
     }
 
-    // Trigger deactivation animation
+    // v2 deactivation: reverse 40→11 (activate played backwards)
     if (hpState === 'activating') {
       hpState = 'activating_then_deactivate';
     } else if (hpState === 'recording') {
       hpState = 'deactivating';
-      hpFrame = HP_DEACTIVATE_START;
+      hpFrame = HP_ACTIVATE_END;
       hpLastFrameTime = performance.now();
     }
   }
@@ -663,100 +541,71 @@
   function maybeTransition() {
     if (!appReady || animState !== 'idle' || canvasPhase !== 'splash') return;
     var elapsed = Date.now() - canvasCreatedAt;
-    if (elapsed < MIN_SPLASH_MS) {
-      setTimeout(maybeTransition, MIN_SPLASH_MS - elapsed);
-      return;
-    }
-    triggerTransition();
-  }
-
-  function triggerTransition() {
+    if (elapsed < MIN_SPLASH_MS) { setTimeout(maybeTransition, MIN_SPLASH_MS - elapsed); return; }
     canvasPhase = 'transitioning';
     var tx = W - BUBBLE_MARGIN - BUBBLE_SIZE / 2;
     var ty = H - BUBBLE_MARGIN - BUBBLE_SIZE / 2;
     moveTo(tx, ty);
   }
 
-  // Skip splash and go straight to bubble mode (onboard, soft refresh, etc.)
   function skipToBubble() {
     canvasPhase = 'bubble';
     canvas.style.cssText = BUBBLE_CSS;
-    W = BUBBLE_SIZE;
-    H = BUBBLE_SIZE;
+    W = BUBBLE_SIZE; H = BUBBLE_SIZE;
     canvas.width = BUBBLE_SIZE * dpr;
     canvas.height = BUBBLE_SIZE * dpr;
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    center.x = BUBBLE_SIZE / 2;
-    center.y = BUBBLE_SIZE / 2;
-    currentFrame = IDLE_START;
-    idleDirection = 1;
+    hpState = 'idle';
+    hpFrame = HP_IDLE_FRAME;
     animState = 'idle';
-    // Hide the HTML splash fallback
     var splash = document.getElementById('splash');
     if (splash) splash.style.display = 'none';
-    // Preload headphones sprite in background
     loadHpSprite();
   }
 
-  window.addEventListener('bloby:app-ready', function () {
-    appReady = true;
-    maybeTransition();
-  });
-  if (window.__blobyAppReady) {
-    appReady = true;
-  }
+  window.addEventListener('bloby:app-ready', function () { appReady = true; maybeTransition(); });
+  if (window.__blobyAppReady) appReady = true;
 
-  // ── Check onboard status + settings, then start ──
   var onboardActive = false;
   fetch('/api/settings')
     .then(function (r) { return r.json(); })
     .then(function (s) {
-      if (s.onboard_complete !== 'true') {
-        onboardActive = true;
-        skipSplash = true;
-      }
-      if (s.whisper_enabled === 'true') {
-        hpWhisperEnabled = true;
-      }
-      // Skip splash if already played this session
+      if (s.onboard_complete !== 'true') { onboardActive = true; skipSplash = true; }
+      if (s.whisper_enabled === 'true') hpWhisperEnabled = true;
       if (splashSeen) skipSplash = true;
       startAnimation();
     })
-    .catch(function () {
-      if (splashSeen) skipSplash = true;
-      startAnimation();
-    });
+    .catch(function () { if (splashSeen) skipSplash = true; startAnimation(); });
 
   function startAnimation() {
     loadSprite(
-      function onSuccess() {
-        if (skipSplash) {
-          skipToBubble();
-          if (onboardActive) canvas.style.display = 'none';
-        }
+      function () {
+        if (skipSplash) { skipToBubble(); if (onboardActive) canvas.style.display = 'none'; }
         requestAnimationFrame(loop);
         maybeTransition();
       },
-      function onFail() {
-        canvas.style.display = 'none';
-        canvasPhase = 'disabled';
-      }
+      function () { canvas.style.display = 'none'; canvasPhase = 'disabled'; }
     );
   }
 
   // ══════════════════════════════════════════════════════════════════
-  // ── Widget Interaction (Panel, Toggle, Bubble Pointer) ───────────
+  // ── Widget Interaction ───────────────────────────────────────────
   // ══════════════════════════════════════════════════════════════════
 
   var isOpen = false;
 
   function toggle() {
-    // If clicked during splash or travel animation, skip straight to bubble first
     if (canvasPhase === 'splash' || canvasPhase === 'transitioning') {
       skipToBubble();
       try { sessionStorage.setItem(SPLASH_KEY, '1'); } catch(e) {}
     }
     if (canvasPhase !== 'bubble') return;
+    // If headphones animation is running, reset to idle
+    if (hpState !== 'idle') {
+      stopHpRecording(true);
+      hpState = 'idle';
+      hpFrame = HP_IDLE_FRAME;
+    }
     isOpen = !isOpen;
     panel.classList.toggle('open', isOpen);
     backdrop.classList.toggle('open', isOpen);
@@ -765,18 +614,13 @@
     updateBadge();
   }
 
-  // ── Bubble pointer handlers (tap → open panel, long-press → headphones mic) ──
-  // Uses setPointerCapture so finger can move slightly without losing the touch.
+  // ── Bubble pointer handlers ──
+  // Tap = open chat (always, any state). Hold ≥500ms = record.
   var hpPointerId = -1;
 
   bubble.addEventListener('pointerdown', function(e) {
+    if (canvasPhase !== 'bubble') return;
     e.preventDefault();
-
-    // During headphones deactivation or activating, a tap opens chat
-    if (canvasPhase === 'headphones') return;
-
-    if (canvasPhase !== 'bubble' || hpState !== 'none') return;
-
     hpPointerId = e.pointerId;
     bubble.setPointerCapture(e.pointerId);
     hpPointerDown = true;
@@ -784,27 +628,22 @@
 
     hpHoldTimer = setTimeout(function() {
       hpWasHold = true;
-      startHpRecording();
+      if (hpState === 'idle' || hpState === 'deactivating') {
+        startHpRecording();
+      }
     }, HP_HOLD_MS);
   });
 
-  bubble.addEventListener('pointerup', function(e) {
+  bubble.addEventListener('pointerup', function() {
     hpPointerDown = false;
     if (hpHoldTimer) { clearTimeout(hpHoldTimer); hpHoldTimer = null; }
-    if (hpPointerId !== -1) {
-      try { bubble.releasePointerCapture(hpPointerId); } catch(ex) {}
-      hpPointerId = -1;
-    }
+    if (hpPointerId !== -1) { try { bubble.releasePointerCapture(hpPointerId); } catch(ex) {} hpPointerId = -1; }
 
     if (hpState === 'activating' || hpState === 'recording') {
+      // Release during recording → stop & deactivate
       stopHpRecording(false);
     } else if (!hpWasHold) {
-      // Short tap — open chat (works from bubble and during deactivation)
-      if (canvasPhase === 'headphones') {
-        // Skip deactivation animation, go straight to bubble, then open
-        hpState = 'none';
-        endHpCanvasMode();
-      }
+      // Short tap → open chat (works from any state)
       toggle();
     }
   });
@@ -812,83 +651,42 @@
   bubble.addEventListener('pointercancel', function() {
     hpPointerDown = false;
     if (hpHoldTimer) { clearTimeout(hpHoldTimer); hpHoldTimer = null; }
-    if (hpPointerId !== -1) {
-      try { bubble.releasePointerCapture(hpPointerId); } catch(ex) {}
-      hpPointerId = -1;
-    }
-    if (hpState !== 'none' && hpState !== 'deactivating') stopHpRecording(true);
+    if (hpPointerId !== -1) { try { bubble.releasePointerCapture(hpPointerId); } catch(ex) {} hpPointerId = -1; }
+    if (hpState === 'activating' || hpState === 'recording') stopHpRecording(true);
   });
 
-  // ── Click on blob during splash/travel → skip animation and open chat ──
+  // Click on blob during splash → skip and open
   document.addEventListener('click', function(e) {
     if (canvasPhase !== 'splash' && canvasPhase !== 'transitioning') return;
     if (animState === 'loading') return;
-    var dx = e.clientX - center.x;
-    var dy = e.clientY - center.y;
-    if (Math.sqrt(dx * dx + dy * dy) < DISPLAY_H / 2 + 15) {
-      toggle();
-    }
-  });
-
-  // Prevent context menu on long-press (mobile)
-  bubble.addEventListener('contextmenu', function(e) {
-    e.preventDefault();
+    var dx = e.clientX - center.x, dy = e.clientY - center.y;
+    if (Math.sqrt(dx * dx + dy * dy) < DISPLAY_H / 2 + 15) toggle();
   });
 
+  bubble.addEventListener('contextmenu', function(e) { e.preventDefault(); });
   backdrop.addEventListener('click', toggle);
-
-  // Close on Escape
-  document.addEventListener('keydown', function (e) {
-    if (e.key === 'Escape' && isOpen) toggle();
-  });
+  document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && isOpen) toggle(); });
 
   // ── PWA Install ──
   var deferredInstallPrompt = null;
-  window.addEventListener('beforeinstallprompt', function (e) {
-    e.preventDefault();
-    deferredInstallPrompt = e;
-  });
+  window.addEventListener('beforeinstallprompt', function (e) { e.preventDefault(); deferredInstallPrompt = e; });
 
   // Handle messages from iframe
   window.addEventListener('message', function (e) {
     if (!e.data || !e.data.type) return;
-
     if (e.data.type === 'bloby:close' && isOpen) toggle();
-
-    // 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:new-message' && !isOpen) { unreadCount++; updateBadge(); }
     if (e.data.type === 'bloby:install-app') {
       if (deferredInstallPrompt) {
         deferredInstallPrompt.prompt();
-        deferredInstallPrompt.userChoice.then(function (result) {
-          if (result.outcome === 'accepted') deferredInstallPrompt = null;
-        });
-      } else {
-        iframe.contentWindow.postMessage({ type: 'bloby:show-ios-install' }, '*');
-      }
-    }
-
-    // Onboard complete — show the bubble
-    if (e.data.type === 'bloby:onboard-complete') {
-      onboardActive = false;
-      hideAfterTransition = false;
-      canvas.style.display = 'block';
+        deferredInstallPrompt.userChoice.then(function (r) { if (r.outcome === 'accepted') deferredInstallPrompt = null; });
+      } else { iframe.contentWindow.postMessage({ type: 'bloby:show-ios-install' }, '*'); }
     }
+    if (e.data.type === 'bloby:onboard-complete') { onboardActive = false; hideAfterTransition = false; canvas.style.display = 'block'; }
   });
 
-  // Restore open state after HMR reload
-  try {
-    if (sessionStorage.getItem('bloby_widget_open') === '1') {
-      sessionStorage.removeItem('bloby_widget_open');
-      if (canvasPhase === 'bubble') toggle();
-    }
-  } catch (e) {}
+  try { if (sessionStorage.getItem('bloby_widget_open') === '1') { sessionStorage.removeItem('bloby_widget_open'); if (canvasPhase === 'bubble') toggle(); } } catch (e) {}
 
-  // Inject app-ws.js — proxies /app/api/* fetch calls through WebSocket
   var awsScript = document.createElement('script');
   awsScript.src = '/bloby/app-ws.js';
   document.head.appendChild(awsScript);