bloby-bot 0.51.0 → 0.51.3

package/dist-bloby/assets/{highlighted-body-OFNGDK62-z8OpDrVr.js → highlighted-body-OFNGDK62-DMeCY5Rc.js}

@@ -1 +1 @@
-import{c as e,r as t,t as n}from"./jsx-runtime-C0W9Wf2W.js";import{n as r,r as i,t as a}from"./bloby-B2Y96IF2.js";var o=e(t(),1),s=n(),c=({code:e,language:t,raw:n,className:c,startLine:l,lineNumbers:u,...d})=>{let{shikiTheme:f}=(0,o.useContext)(i),p=r(),[m,h]=(0,o.useState)(n);return(0,o.useEffect)(()=>{if(!p){h(n);return}let r=p.highlight({code:e,language:t,themes:f},e=>{h(e)});r&&h(r)},[e,t,f,p,n]),(0,s.jsx)(a,{className:c,language:t,lineNumbers:u,result:m,startLine:l,...d})};export{c as HighlightedCodeBlockBody};
+import{c as e,r as t,t as n}from"./jsx-runtime-C0W9Wf2W.js";import{n as r,r as i,t as a}from"./bloby-vi0Xitb-.js";var o=e(t(),1),s=n(),c=({code:e,language:t,raw:n,className:c,startLine:l,lineNumbers:u,...d})=>{let{shikiTheme:f}=(0,o.useContext)(i),p=r(),[m,h]=(0,o.useState)(n);return(0,o.useEffect)(()=>{if(!p){h(n);return}let r=p.highlight({code:e,language:t,themes:f},e=>{h(e)});r&&h(r)},[e,t,f,p,n]),(0,s.jsx)(a,{className:c,language:t,lineNumbers:u,result:m,startLine:l,...d})};export{c as HighlightedCodeBlockBody};

package/dist-bloby/assets/mermaid-GHXKKRXX-BOqNyL14.js

@@ -0,0 +1 @@
+import{i as e}from"./bloby-vi0Xitb-.js";export{e as Mermaid};

package/dist-bloby/bloby.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content" />
     <title>Bloby Chat</title>
-    <script type="module" crossorigin src="/bloby/assets/bloby-B2Y96IF2.js"></script>
+    <script type="module" crossorigin src="/bloby/assets/bloby-vi0Xitb-.js"></script>
     <link rel="modulepreload" crossorigin href="/bloby/assets/jsx-runtime-C0W9Wf2W.js">
     <link rel="modulepreload" crossorigin href="/bloby/assets/globals-DNO3ilRx.js">
     <link rel="stylesheet" crossorigin href="/bloby/assets/globals-D60b-8LY.css">

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "bloby-bot",
-  "version": "0.51.0",
+  "version": "0.51.3",
   "releaseNotes": [
-    "1. Something great..",
-    "2. ",
-    "3. ",
+    "1. New Morphy animation system: config-driven sprites loaded from /morphy/*.json",
+    "2. Swapped teleporting (splash) and headphones (bubble + chat) to the new format",
+    "3. SW cache bumped to v16 to clear old assets",
     "4. "
   ],
   "description": "Self-hosted, self-evolving AI agent with its own dashboard.",

package/supervisor/chat/bloby-main.tsx

@@ -32,7 +32,6 @@ function BlobyApp() {
 
   // Recording state (for header animation)
   const [chatRecording, setChatRecording] = useState(false);
-  const [showHpAnim, setShowHpAnim] = useState(false);
 
   // Push notifications
   const [pushState, setPushState] = useState<'loading' | 'unsupported' | 'denied' | 'subscribed' | 'unsubscribed'>('loading');
@@ -361,15 +360,7 @@ function BlobyApp() {
 
         {/* Mascot / headphones animation */}
         <div className="relative ml-1.5 shrink-0">
-          {showHpAnim ? (
-            <HeadphonesAnimation
-              recording={chatRecording}
-              height={36}
-              onDone={() => setShowHpAnim(false)}
-            />
-          ) : (
-            <img src="/bloby.png" alt={botName} className="h-9 w-auto" />
-          )}
+          <HeadphonesAnimation recording={chatRecording} height={36} />
         </div>
 
         {/* Name + status line */}
@@ -529,10 +520,7 @@ function BlobyApp() {
             });
           }}
           onAudioReady={addPendingAudio}
-          onRecordingChange={(r) => {
-            setChatRecording(r);
-            if (r) setShowHpAnim(true);
-          }}
+          onRecordingChange={setChatRecording}
         />
       </div>
 

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

@@ -1,26 +1,40 @@
 import { useEffect, useRef, useCallback } from 'react';
 
-// v2 sprite config
-const HP_COLS = 16;
-const HP_FRAME_W = 126;
-const HP_FRAME_H = 84;
-const HP_IDLE_FRAME = 10;
-const HP_ACTIVATE_START = 11;
-const HP_ACTIVATE_END = 40;
-const HP_RECORD_START = 40;
-const HP_RECORD_END = 85;
-const HP_BASE_FPS = 24;
-const HP_FAST_FPS = 48;
+// Config-driven. Loaded from /morphy/headphones.json.
+// Clips map to states:
+//   idle (hold)      → 'idle'
+//   enter (forward)  → 'activating'
+//   active (pingpong)→ 'recording'
+//   exit (forward)   → 'deactivating'
+const HP_CONFIG_URL = '/morphy/headphones.json';
+const HP_ASSETS_DIR = '/morphy/';
+
+interface HpConfig {
+  spritesheet: string;
+  frame: { w: number; h: number };
+  grid: { cols: number; rows: number };
+  fps: number;
+  clips: {
+    idle: { from: number; to: number; mode: string; fps?: number };
+    enter: { from: number; to: number; mode: string; fps?: number };
+    active: { from: number; to: number; mode: string; fps?: number };
+    exit: { from: number; to: number; mode: string; fps?: number };
+  };
+}
 
 let cachedSprite: HTMLImageElement | null = null;
-function getSprite(): Promise<HTMLImageElement> {
-  if (cachedSprite) return Promise.resolve(cachedSprite);
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.onload = () => { cachedSprite = img; resolve(img); };
-    img.onerror = reject;
-    img.src = '/headphones_spritesheet.webp';
-  });
+let cachedConfig: HpConfig | null = null;
+
+function loadConfigAndSprite(): Promise<{ img: HTMLImageElement; cfg: HpConfig }> {
+  if (cachedSprite && cachedConfig) return Promise.resolve({ img: cachedSprite, cfg: cachedConfig });
+  return fetch(HP_CONFIG_URL)
+    .then((r) => { if (!r.ok) throw new Error('hp config ' + r.status); return r.json() as Promise<HpConfig>; })
+    .then((cfg) => new Promise<{ img: HTMLImageElement; cfg: HpConfig }>((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => { cachedSprite = img; cachedConfig = cfg; resolve({ img, cfg }); };
+      img.onerror = reject;
+      img.src = HP_ASSETS_DIR + cfg.spritesheet;
+    }));
 }
 
 interface Props {
@@ -34,8 +48,9 @@ type HpState = 'idle' | 'activating' | 'activating_then_deactivate' | 'recording
 export default function HeadphonesAnimation({ recording, height = 36, onDone }: Props) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const spriteRef = useRef<HTMLImageElement | null>(cachedSprite);
+  const configRef = useRef<HpConfig | null>(cachedConfig);
   const stateRef = useRef<HpState>('idle');
-  const frameRef = useRef(HP_ACTIVATE_START);
+  const frameRef = useRef(0);
   const pingPongRef = useRef(1);
   const lastRef = useRef(0);
   const rafRef = useRef(0);
@@ -43,16 +58,28 @@ export default function HeadphonesAnimation({ recording, height = 36, onDone }:
   const onDoneRef = useRef(onDone);
   onDoneRef.current = onDone;
 
+  // Aspect ratio from config (defaults to 1:1 — matches new sprite).
+  const cfg = configRef.current;
+  const aspectW = cfg ? cfg.frame.w : 180;
+  const aspectH = cfg ? cfg.frame.h : 180;
   const displayH = height;
-  const displayW = Math.round(displayH * (HP_FRAME_W / HP_FRAME_H));
+  const displayW = Math.round(displayH * (aspectW / aspectH));
 
-  useEffect(() => { getSprite().then((img) => { spriteRef.current = img; }); }, []);
+  useEffect(() => {
+    loadConfigAndSprite().then(({ img, cfg }) => {
+      spriteRef.current = img;
+      configRef.current = cfg;
+      if (stateRef.current === 'idle') frameRef.current = cfg.clips.idle.from;
+    });
+  }, []);
 
   // React to recording prop
   useEffect(() => {
+    const cfg = configRef.current;
+    if (!cfg) return;
     if (recording && !prevRecording.current) {
       stateRef.current = 'activating';
-      frameRef.current = HP_ACTIVATE_START;
+      frameRef.current = cfg.clips.enter.from;
       pingPongRef.current = 1;
       lastRef.current = performance.now();
     } else if (!recording && prevRecording.current) {
@@ -60,7 +87,7 @@ export default function HeadphonesAnimation({ recording, height = 36, onDone }:
         stateRef.current = 'activating_then_deactivate';
       } else if (stateRef.current === 'recording') {
         stateRef.current = 'deactivating';
-        frameRef.current = HP_ACTIVATE_END;
+        frameRef.current = cfg.clips.exit.from;
         lastRef.current = performance.now();
       }
     }
@@ -70,17 +97,40 @@ export default function HeadphonesAnimation({ recording, height = 36, onDone }:
   const tick = useCallback((now: number) => {
     const canvas = canvasRef.current;
     const sprite = spriteRef.current;
+    const cfg = configRef.current;
     if (!canvas) { rafRef.current = requestAnimationFrame(tick); return; }
     const ctx = canvas.getContext('2d')!;
     const state = stateRef.current;
 
-    if (state === 'idle' || !sprite) {
+    if (!sprite || !cfg) {
+      ctx.clearRect(0, 0, displayW, displayH);
+      rafRef.current = requestAnimationFrame(tick);
+      return;
+    }
+
+    if (state === 'idle') {
+      // Hold the configured idle frame so the chat header shows a real visual at rest.
+      const cols = cfg.grid.cols;
+      const fw = cfg.frame.w;
+      const fh = cfg.frame.h;
+      const idleFrame = cfg.clips.idle.from;
+      const col = idleFrame % cols;
+      const row = Math.floor(idleFrame / cols);
       ctx.clearRect(0, 0, displayW, displayH);
+      ctx.imageSmoothingEnabled = true;
+      ctx.imageSmoothingQuality = 'high';
+      ctx.drawImage(sprite, col * fw, row * fh, fw, fh, 0, 0, displayW, displayH);
       rafRef.current = requestAnimationFrame(tick);
       return;
     }
 
-    const fps = (state === 'activating' || state === 'activating_then_deactivate' || state === 'deactivating') ? HP_FAST_FPS : HP_BASE_FPS;
+    const baseFps = cfg.fps;
+    const fps =
+      state === 'activating' || state === 'activating_then_deactivate'
+        ? (cfg.clips.enter.fps ?? baseFps)
+        : state === 'deactivating'
+          ? (cfg.clips.exit.fps ?? baseFps)
+          : (cfg.clips.active.fps ?? baseFps);
     const frameMs = 1000 / fps;
     const delta = now - lastRef.current;
     if (delta >= frameMs) {
@@ -88,24 +138,25 @@ export default function HeadphonesAnimation({ recording, height = 36, onDone }:
 
       if (state === 'activating' || state === 'activating_then_deactivate') {
         frameRef.current++;
-        if (frameRef.current > HP_ACTIVATE_END) {
+        if (frameRef.current > cfg.clips.enter.to) {
           if (state === 'activating_then_deactivate') {
             stateRef.current = 'deactivating';
-            frameRef.current = HP_ACTIVATE_END;
+            frameRef.current = cfg.clips.exit.from;
           } else {
             stateRef.current = 'recording';
-            frameRef.current = HP_RECORD_START;
+            frameRef.current = cfg.clips.active.from;
             pingPongRef.current = 1;
           }
         }
       } else if (state === 'recording') {
         frameRef.current += pingPongRef.current;
-        if (frameRef.current >= HP_RECORD_END) { frameRef.current = HP_RECORD_END; pingPongRef.current = -1; }
-        else if (frameRef.current <= HP_RECORD_START) { frameRef.current = HP_RECORD_START; pingPongRef.current = 1; }
+        if (frameRef.current >= cfg.clips.active.to) { frameRef.current = cfg.clips.active.to; pingPongRef.current = -1; }
+        else if (frameRef.current <= cfg.clips.active.from) { frameRef.current = cfg.clips.active.from; pingPongRef.current = 1; }
       } else if (state === 'deactivating') {
-        frameRef.current--;
-        if (frameRef.current < HP_ACTIVATE_START) {
+        frameRef.current++;
+        if (frameRef.current > cfg.clips.exit.to) {
           stateRef.current = 'idle';
+          frameRef.current = cfg.clips.idle.from;
           ctx.clearRect(0, 0, displayW, displayH);
           onDoneRef.current?.();
           rafRef.current = requestAnimationFrame(tick);
@@ -114,12 +165,15 @@ export default function HeadphonesAnimation({ recording, height = 36, onDone }:
       }
     }
 
-    const col = frameRef.current % HP_COLS;
-    const row = Math.floor(frameRef.current / HP_COLS);
+    const cols = cfg.grid.cols;
+    const fw = cfg.frame.w;
+    const fh = cfg.frame.h;
+    const col = frameRef.current % cols;
+    const row = Math.floor(frameRef.current / cols);
     ctx.clearRect(0, 0, displayW, displayH);
     ctx.imageSmoothingEnabled = true;
     ctx.imageSmoothingQuality = 'high';
-    ctx.drawImage(sprite, col * HP_FRAME_W, row * HP_FRAME_H, HP_FRAME_W, HP_FRAME_H, 0, 0, displayW, displayH);
+    ctx.drawImage(sprite, col * fw, row * fh, fw, fh, 0, 0, displayW, displayH);
 
     rafRef.current = requestAnimationFrame(tick);
   }, [displayW, displayH]);

package/supervisor/index.ts

@@ -90,7 +90,7 @@ const SW_JS = `// Service worker — app-shell caching + push notifications
 //   JS/CSS modules                      → stale-while-revalidate
 //   API, WebSocket, Vite internals      → network-only (no cache)
 
-var CACHE = 'bloby-v15';
+var CACHE = 'bloby-v16';
 var HASHED_RE = new RegExp('/assets/.+-[a-zA-Z0-9]{6,}[.](js|css)$');
 
 // Precache the HTML shell on install so the cache is never empty.

package/supervisor/public/morphy/headphones.json

@@ -0,0 +1,40 @@
+{
+  "name": "headphones",
+  "spritesheet": "headphones.png",
+  "frame": {
+    "w": 174,
+    "h": 180
+  },
+  "grid": {
+    "cols": 16,
+    "rows": 8
+  },
+  "totalFrames": 121,
+  "fps": 24,
+  "clips": {
+    "idle": {
+      "from": 15,
+      "to": 15,
+      "mode": "hold",
+      "fps": 38
+    },
+    "enter": {
+      "from": 16,
+      "to": 25,
+      "mode": "forward",
+      "fps": 48,
+      "next": "active"
+    },
+    "active": {
+      "from": 26,
+      "to": 94,
+      "mode": "pingpong"
+    },
+    "exit": {
+      "from": 96,
+      "to": 105,
+      "mode": "forward",
+      "next": "idle"
+    }
+  }
+}

package/supervisor/widget.js

@@ -77,24 +77,31 @@
   document.body.appendChild(badgeEl);
 
   // ══════════════════════════════════════════════════════════════════
-  // ── Headphones Sprite Sheet Config (v2 — bubble + recording) ─────
+  // ── Headphones Sprite Sheet Config (loaded from JSON) ────────────
+  // Clips map to hpStates:
+  //   idle (hold)      → hpState 'idle'
+  //   enter (forward)  → hpState 'activating'
+  //   active (pingpong)→ hpState 'recording'
+  //   exit (forward)   → hpState 'deactivating'
   // ══════════════════════════════════════════════════════════════════
 
+  var HP_CONFIG_URL = '/morphy/headphones.json';
+
+  // Defaults mirror the shipped JSON so animation works even if fetch is cached.
   var HP_COLS = 16;
-  var HP_FRAME_W = 126;
-  var HP_FRAME_H = 84;
-  // Bubble display: fill 60px width exactly
+  var HP_FRAME_W = 180;
+  var HP_FRAME_H = 180;
   var HP_BUBBLE_H = 40;
-  var HP_BUBBLE_W = HP_BUBBLE_H * (HP_FRAME_W / HP_FRAME_H); // 60
+  var HP_BUBBLE_W = HP_BUBBLE_H * (HP_FRAME_W / HP_FRAME_H);
 
-  // v2 frame ranges
-  var HP_IDLE_FRAME = 10;
-  var HP_ACTIVATE_START = 11, HP_ACTIVATE_END = 40;
-  var HP_RECORD_START = 40, HP_RECORD_END = 85;
+  var HP_IDLE_FRAME = 15;
+  var HP_ACTIVATE_START = 16, HP_ACTIVATE_END = 25;
+  var HP_RECORD_START = 26, HP_RECORD_END = 94;
+  var HP_EXIT_START = 96, HP_EXIT_END = 105;
 
-  // v2 FPS: 2x speed for activate/deactivate, normal for recording
-  var HP_BASE_FPS = 24;
-  var HP_FAST_FPS = 48;
+  var HP_BASE_FPS = 24;       // active / record default
+  var HP_ACTIVATE_FPS = 48;   // enter clip fps
+  var HP_EXIT_FPS = 24;       // exit clip fps
 
   // Long-press threshold
   var HP_HOLD_MS = 500;
@@ -229,13 +236,33 @@
       .catch(function () { if (onFail) onFail(); });
   }
 
-  // ── Load headphones sprite sheet ──
+  // ── Load headphones sprite sheet (config + image) ──
+  function applyHpConfig(cfg) {
+    HP_COLS = cfg.grid.cols;
+    HP_FRAME_W = cfg.frame.w;
+    HP_FRAME_H = cfg.frame.h;
+    HP_BUBBLE_W = HP_BUBBLE_H * (HP_FRAME_W / HP_FRAME_H);
+    HP_IDLE_FRAME = cfg.clips.idle.from;
+    HP_ACTIVATE_START = cfg.clips.enter.from; HP_ACTIVATE_END = cfg.clips.enter.to;
+    HP_RECORD_START = cfg.clips.active.from;  HP_RECORD_END = cfg.clips.active.to;
+    HP_EXIT_START = cfg.clips.exit.from;      HP_EXIT_END = cfg.clips.exit.to;
+    HP_BASE_FPS = (cfg.clips.active.fps != null ? cfg.clips.active.fps : cfg.fps);
+    HP_ACTIVATE_FPS = (cfg.clips.enter.fps  != null ? cfg.clips.enter.fps  : cfg.fps);
+    HP_EXIT_FPS = (cfg.clips.exit.fps   != null ? cfg.clips.exit.fps   : cfg.fps);
+  }
+
   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 sprite failed'); };
-    img.src = '/headphones_spritesheet.webp';
+    fetch(HP_CONFIG_URL)
+      .then(function (r) { if (!r.ok) throw new Error('hp config ' + r.status); return r.json(); })
+      .then(function (cfg) {
+        applyHpConfig(cfg);
+        var img = new Image();
+        img.onload = function () { hpSpriteSheet = img; hpFrame = HP_IDLE_FRAME; if (cb) cb(); };
+        img.onerror = function () { console.error('[widget] headphones sprite failed'); };
+        img.src = BLOB_ASSETS_DIR + cfg.spritesheet;
+      })
+      .catch(function (err) { console.error('[widget] headphones config failed', err); });
   }
 
   // ── Trigger blob move (splash) ──
@@ -261,7 +288,8 @@
   // ══════════════════════════════════════════════════════════════════
 
   function hpFps() {
-    if (hpState === 'activating' || hpState === 'activating_then_deactivate' || hpState === 'deactivating') return HP_FAST_FPS;
+    if (hpState === 'activating' || hpState === 'activating_then_deactivate') return HP_ACTIVATE_FPS;
+    if (hpState === 'deactivating') return HP_EXIT_FPS;
     return HP_BASE_FPS;
   }
 
@@ -277,9 +305,8 @@
           hpFrame++;
           if (hpFrame > HP_ACTIVATE_END) {
             if (hpState === 'activating_then_deactivate') {
-              // Reverse back to idle
               hpState = 'deactivating';
-              hpFrame = HP_ACTIVATE_END;
+              hpFrame = HP_EXIT_START;
             } else {
               hpState = 'recording';
               hpFrame = HP_RECORD_START;
@@ -291,9 +318,8 @@
           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') {
-          // v2: reverse 40→11
-          hpFrame--;
-          if (hpFrame < HP_ACTIVATE_START) {
+          hpFrame++;
+          if (hpFrame > HP_EXIT_END) {
             hpState = 'idle';
             hpFrame = HP_IDLE_FRAME;
           }
@@ -572,12 +598,11 @@
     canvas.style.transition = 'transform 0.2s ease';
     canvas.style.transform = '';
 
-    // v2 deactivation: reverse 40→11 (activate played backwards)
     if (hpState === 'activating') {
       hpState = 'activating_then_deactivate';
     } else if (hpState === 'recording') {
       hpState = 'deactivating';
-      hpFrame = HP_ACTIVATE_END;
+      hpFrame = HP_EXIT_START;
       hpLastFrameTime = performance.now();
     }
   }

package/workspace/client/public/morphy/headphones.json

@@ -0,0 +1,40 @@
+{
+  "name": "headphones",
+  "spritesheet": "headphones.png",
+  "frame": {
+    "w": 174,
+    "h": 180
+  },
+  "grid": {
+    "cols": 16,
+    "rows": 8
+  },
+  "totalFrames": 121,
+  "fps": 24,
+  "clips": {
+    "idle": {
+      "from": 15,
+      "to": 15,
+      "mode": "hold",
+      "fps": 38
+    },
+    "enter": {
+      "from": 16,
+      "to": 25,
+      "mode": "forward",
+      "fps": 48,
+      "next": "active"
+    },
+    "active": {
+      "from": 26,
+      "to": 94,
+      "mode": "pingpong"
+    },
+    "exit": {
+      "from": 96,
+      "to": 105,
+      "mode": "forward",
+      "next": "idle"
+    }
+  }
+}

package/workspace/client/public/sw.js

@@ -6,7 +6,7 @@
 //   JS/CSS modules                      → stale-while-revalidate
 //   API, WebSocket, Vite internals      → network-only (no cache)
 
-const CACHE = 'bloby-v6';
+const CACHE = 'bloby-v7';
 
 // Precache the HTML shell on install so the cache is never empty.
 // Without this, the first navigation isn't intercepted (SW wasn't

package/dist-bloby/assets/mermaid-GHXKKRXX-DAQ7dBvr.js

@@ -1 +0,0 @@
-import{i as e}from"./bloby-B2Y96IF2.js";export{e as Mermaid};