fluxy-bot 0.10.16 → 0.10.17

package/cli/commands/update.ts

@@ -88,6 +88,15 @@ export function registerUpdateCommand(program: Command) {
           fs.cpSync(wsSrc, path.join(DATA_DIR, 'workspace'), { recursive: true });
         }
 
+        // Always update index.html — contains splash screen, SW registration,
+        // and meta tags that ship with each version. Safe to overwrite since
+        // users don't edit this file (their code lives in src/ and backend/).
+        const indexSrc = path.join(extracted, 'workspace', 'client', 'index.html');
+        const indexDst = path.join(DATA_DIR, 'workspace', 'client', 'index.html');
+        if (fs.existsSync(indexSrc)) {
+          fs.cpSync(indexSrc, indexDst, { force: true });
+        }
+
         for (const file of ['package.json', 'vite.config.ts', 'vite.fluxy.config.ts', 'tsconfig.json', 'postcss.config.js', 'components.json']) {
           const src = path.join(extracted, file);
           if (fs.existsSync(src)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluxy-bot",
-  "version": "0.10.16",
+  "version": "0.10.17",
   "releaseNotes": [
     "Adding a way for users to claim their fluxies on the fluxy.bot dashboard",
     "2. ",

package/supervisor/widget.js

@@ -6,11 +6,9 @@
   // ── Styles ──
   var style = document.createElement('style');
   style.textContent = [
-    '#fluxy-widget-bubble{position:fixed;bottom:24px;right:24px;z-index:99998;cursor:pointer;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .15s ease;-webkit-tap-highlight-color:transparent}',
+    '#fluxy-widget-bubble{transition:transform .15s ease;-webkit-tap-highlight-color:transparent}',
     '#fluxy-widget-bubble:hover{transform:scale(1.1)}',
     '#fluxy-widget-bubble:active{transform:scale(0.95)}',
-    '#fluxy-widget-bubble video{height:60px;width:auto;pointer-events:none;-webkit-user-drag:none}',
-    '#fluxy-widget-bubble img{width:60px;height:60px;object-fit:contain;pointer-events:none;-webkit-user-drag:none}',
     '#fluxy-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}',
     '#fluxy-widget-backdrop.open{opacity:1;pointer-events:auto}',
     '#fluxy-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}',
@@ -35,50 +33,374 @@
   iframe.setAttribute('loading', 'lazy');
   panel.appendChild(iframe);
 
-  // ── Bubble ──
-  var bubble = document.createElement('div');
-  bubble.id = 'fluxy-widget-bubble';
-  bubble.setAttribute('role', 'button');
-  bubble.setAttribute('aria-label', 'Open Fluxy chat');
-
-  // Safari doesn't support WebM alpha — fall back to poster image
-  var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
-    || (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream);
-
-  if (isSafari) {
-    var img = document.createElement('img');
-    img.src = '/fluxy_frame1.png';
-    img.alt = 'Fluxy';
-    img.draggable = false;
-    bubble.appendChild(img);
-  } else {
-    var video = document.createElement('video');
-    video.src = '/fluxy_tilts.webm';
-    video.poster = '/fluxy_frame1.png';
-    video.autoplay = true;
-    video.loop = true;
-    video.muted = true;
-    video.playsInline = true;
-    video.setAttribute('playsinline', '');
-    video.draggable = false;
-    bubble.appendChild(video);
+  // ══════════════════════════════════════════════════════════════════
+  // ── Canvas Particle Animation (Splash + Bubble) ──────────────────
+  // ══════════════════════════════════════════════════════════════════
+
+  // ── Config ──
+  var TARGET_HEIGHT = 40;
+  var SAMPLE_RES = 60;
+  var MELT_DURATION = 750;
+  var REFORM_DURATION = 850;
+  var TRAVEL_MIN = 400;
+  var TRAVEL_MAX = 1100;
+  var TRAVEL_PX_PER_MS = 0.9;
+  var MIN_SPLASH_MS = 2000;
+  var BUBBLE_SIZE = 60;
+  var BUBBLE_MARGIN = 24;
+
+  // ── Easing ──
+  function easeInCubic(t) { return t * t * t; }
+  function easeInOutCubic(t) { return t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3) / 2; }
+  function easeOutElastic(t) {
+    if (t === 0 || t === 1) return t;
+    return Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * (2 * Math.PI / 3)) + 1;
+  }
+
+  // ── Canvas setup (starts fullscreen for splash) ──
+  var canvas = document.createElement('canvas');
+  canvas.id = 'fluxy-widget-bubble';
+  canvas.setAttribute('role', 'button');
+  canvas.setAttribute('aria-label', 'Open Fluxy chat');
+  canvas.dataset.fluxyWidget = '1';
+  canvas.style.cssText = 'position:fixed;inset:0;width:100vw;height:100dvh;z-index:9999;pointer-events:none;';
+  document.body.appendChild(canvas);
+
+  var bubble = canvas; // alias for toggle/click compatibility
+  var ctx = canvas.getContext('2d');
+  var dpr = window.devicePixelRatio || 1;
+  var W = 0, H = 0;
+
+  // ── Canvas phase: 'splash' | 'transitioning' | 'bubble' ──
+  var canvasPhase = 'splash';
+  var canvasCreatedAt = Date.now();
+  var appReady = false;
+  var hideAfterTransition = false;
+
+  function resizeCanvas() {
+    if (canvasPhase === 'bubble') {
+      W = BUBBLE_SIZE;
+      H = BUBBLE_SIZE;
+    } else {
+      W = window.innerWidth;
+      H = window.innerHeight;
+    }
+    canvas.width = W * dpr;
+    canvas.height = H * dpr;
+    canvas.style.width = W + 'px';
+    canvas.style.height = H + 'px';
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  }
+  resizeCanvas();
+  window.addEventListener('resize', function () {
+    resizeCanvas();
+    // Recalculate center position during splash
+    if (canvasPhase === 'splash' && animState === 'idle') {
+      center.x = Math.round(W / 2);
+      center.y = Math.round(H / 2);
+    }
+  });
+
+  // ── Particle state ──
+  var particles = [];
+  var preRendered = null;
+  var displayW = 0, displayH = 0;
+  var particleRadius = 0;
+  var animState = 'loading'; // particle animation state
+  var phaseStart = 0;
+  var travelDuration = 0;
+
+  var center  = { x: 0, y: 0 };
+  var travelA = { x: 0, y: 0 };
+  var target  = { x: 0, y: 0 };
+
+  // ── Particle constructor ──
+  function Particle(localX, localY, r, g, b, a) {
+    this.localX = localX;
+    this.localY = localY;
+    this.r = r;
+    this.g = g;
+    this.b = b;
+    this.a = a;
+    this.x = 0;
+    this.y = 0;
+
+    var normalizedY = (localY + displayH / 2) / displayH;
+
+    // Melt into an elliptical blob
+    var angle = Math.random() * Math.PI * 2;
+    var dist = Math.sqrt(Math.random());
+    var blobRX = displayW * 0.28;
+    var blobRY = displayH * 0.18;
+    this.meltLocalX = Math.cos(angle) * dist * blobRX;
+    this.meltLocalY = Math.sin(angle) * dist * blobRY + displayH * 0.3;
+
+    // Stagger: top particles melt first
+    this.meltDelay = normalizedY * 0.35;
+
+    this.wobbleAmp = 0.5 + Math.random() * 1.5;
+    this.wobbleFreq = 3 + Math.random() * 4;
+    this.wobblePhase = Math.random() * Math.PI * 2;
+  }
+
+  // ── Load mascot ──
+  function loadMascot(onDone, onFail) {
+    var img = new Image();
+    img.onload = function () {
+      var aspect = img.width / img.height;
+      displayH = TARGET_HEIGHT;
+      displayW = TARGET_HEIGHT * aspect;
+
+      // Pre-render at high DPR for crisp display
+      var preScale = dpr * 2;
+      var pre = document.createElement('canvas');
+      var preCtx = pre.getContext('2d');
+      pre.width = Math.round(displayW * preScale);
+      pre.height = Math.round(displayH * preScale);
+      preCtx.imageSmoothingEnabled = true;
+      preCtx.imageSmoothingQuality = 'high';
+      preCtx.drawImage(img, 0, 0, pre.width, pre.height);
+      preRendered = pre;
+
+      // Sample pixels for particles
+      var sampleH = SAMPLE_RES;
+      var sampleW = Math.round(SAMPLE_RES * aspect);
+
+      var off = document.createElement('canvas');
+      var offCtx = off.getContext('2d');
+      off.width = sampleW;
+      off.height = sampleH;
+      offCtx.imageSmoothingEnabled = true;
+      offCtx.imageSmoothingQuality = 'high';
+      offCtx.drawImage(img, 0, 0, sampleW, sampleH);
+
+      var data = offCtx.getImageData(0, 0, sampleW, sampleH).data;
+      var scaleX = displayW / sampleW;
+      var scaleY = displayH / sampleH;
+      particleRadius = (scaleX + scaleY) / 2 * 0.7;
+
+      for (var y = 0; y < sampleH; y++) {
+        for (var x = 0; x < sampleW; x++) {
+          var i = (y * sampleW + x) * 4;
+          if (data[i + 3] > 50) {
+            var lx = (x - sampleW / 2) * scaleX;
+            var ly = (y - sampleH / 2) * scaleY;
+            particles.push(new Particle(lx, ly, data[i], data[i+1], data[i+2], data[i+3] / 255));
+          }
+        }
+      }
+
+      // Start idle in center
+      center.x = Math.round(W / 2);
+      center.y = Math.round(H / 2);
+      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.src = '/fluxy.png';
+  }
+
+  // ── Trigger move ──
+  function moveTo(tx, ty) {
+    if (animState !== 'idle') return;
+    target.x = tx;
+    target.y = ty;
+    travelA.x = center.x;
+    travelA.y = center.y;
+    animState = 'melting';
+    phaseStart = performance.now();
+  }
+
+  // ── Update ──
+  function update(now) {
+    var elapsed = now - phaseStart;
+    var i, p, t, e, cx, cy, wx, wy;
+
+    if (animState === 'melting') {
+      var progress = elapsed / MELT_DURATION;
+      if (progress >= 1) {
+        progress = 1;
+        var dx = target.x - travelA.x;
+        var dy = target.y - travelA.y;
+        var dist = Math.sqrt(dx*dx + dy*dy);
+        travelDuration = Math.min(TRAVEL_MAX, Math.max(TRAVEL_MIN, dist / TRAVEL_PX_PER_MS));
+        animState = 'traveling';
+        phaseStart = now;
+      }
+      for (i = 0; i < particles.length; i++) {
+        p = particles[i];
+        t = Math.max(0, Math.min(1, (progress - p.meltDelay) / (1 - p.meltDelay)));
+        e = easeInCubic(t);
+        p.x = center.x + p.localX + (p.meltLocalX - p.localX) * e;
+        p.y = center.y + p.localY + (p.meltLocalY - p.localY) * e;
+      }
+      return;
+    }
+
+    if (animState === 'traveling') {
+      var progress2 = elapsed / travelDuration;
+      if (progress2 >= 1) {
+        progress2 = 1;
+        center.x = target.x;
+        center.y = target.y;
+        animState = 'reforming';
+        phaseStart = now;
+      }
+      e = easeInOutCubic(progress2);
+      cx = travelA.x + (target.x - travelA.x) * e;
+      cy = travelA.y + (target.y - travelA.y) * e;
+      for (i = 0; i < particles.length; i++) {
+        p = particles[i];
+        wx = Math.sin(now * 0.008 * p.wobbleFreq + p.wobblePhase) * p.wobbleAmp;
+        wy = Math.cos(now * 0.006 * p.wobbleFreq + p.wobblePhase) * p.wobbleAmp * 0.5;
+        p.x = cx + p.meltLocalX + wx;
+        p.y = cy + p.meltLocalY + wy;
+      }
+      return;
+    }
+
+    if (animState === 'reforming') {
+      var progress3 = elapsed / REFORM_DURATION;
+      if (progress3 >= 1) {
+        progress3 = 1;
+        animState = 'idle';
+        // Transition canvas to bubble mode
+        if (canvasPhase === 'transitioning') {
+          canvasPhase = 'bubble';
+          canvas.style.cssText = '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%;';
+          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 is now the center of the bubble canvas
+          center.x = BUBBLE_SIZE / 2;
+          center.y = BUBBLE_SIZE / 2;
+          // Handle onboard hide
+          if (hideAfterTransition) {
+            canvas.style.display = 'none';
+          }
+        }
+      }
+      e = easeOutElastic(progress3);
+      for (i = 0; i < particles.length; i++) {
+        p = particles[i];
+        p.x = center.x + p.meltLocalX + (p.localX - p.meltLocalX) * e;
+        p.y = center.y + p.meltLocalY + (p.localY - p.meltLocalY) * e;
+      }
+    }
+  }
+
+  // ── Draw ──
+  function draw(now) {
+    ctx.clearRect(0, 0, W, H);
+
+    if (animState === 'idle' && preRendered) {
+      var bob = Math.sin(now * 0.002) * 1;
+      ctx.imageSmoothingEnabled = true;
+      ctx.imageSmoothingQuality = 'high';
+      ctx.drawImage(
+        preRendered,
+        center.x - displayW / 2,
+        center.y - displayH / 2 + bob,
+        displayW,
+        displayH
+      );
+    } else if (animState !== 'loading') {
+      var r = particleRadius;
+      for (var i = 0; i < particles.length; i++) {
+        var p = particles[i];
+        // In transitioning/bubble phase, offset particles relative to canvas
+        var px = p.x;
+        var py = p.y;
+        if (canvasPhase === 'splash' || canvasPhase === 'transitioning') {
+          // Particles are in screen coordinates during splash/transition
+        }
+        ctx.globalAlpha = p.a;
+        ctx.fillStyle = 'rgb(' + p.r + ',' + p.g + ',' + p.b + ')';
+        ctx.beginPath();
+        ctx.arc(px, py, r, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    }
+  }
+
+  // ── Animation loop ──
+  function loop(now) {
+    if (animState !== 'loading') {
+      update(now);
+      draw(now);
+    }
+    requestAnimationFrame(loop);
+  }
+
+  // ── App-ready coordination ──
+  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() {
+    canvasPhase = 'transitioning';
+    // Target: center of the 60x60 bubble area at bottom-right
+    var tx = W - BUBBLE_MARGIN - BUBBLE_SIZE / 2;
+    var ty = H - BUBBLE_MARGIN - BUBBLE_SIZE / 2;
+    moveTo(tx, ty);
+  }
+
+  window.addEventListener('fluxy:app-ready', function () {
+    appReady = true;
+    maybeTransition();
+  });
+  // Race condition guard: check if main.tsx already fired before we registered
+  if (window.__fluxyAppReady) {
+    appReady = true;
   }
 
-  // Mark widget present
-  bubble.dataset.fluxyWidget = '1';
-  document.body.appendChild(bubble);
+  // ── Start ──
+  loadMascot(
+    function onSuccess() {
+      requestAnimationFrame(loop);
+      // Check if app is already ready
+      maybeTransition();
+    },
+    function onFail() {
+      // Image failed — leave HTML splash visible, hide canvas
+      canvas.style.display = 'none';
+      canvasPhase = 'bubble'; // prevent further transitions
+    }
+  );
+
+  // ══════════════════════════════════════════════════════════════════
+  // ── Widget Interaction (Panel, Toggle, Messages) ─────────────────
+  // ══════════════════════════════════════════════════════════════════
 
-  // ── Toggle ──
   var isOpen = false;
 
   function toggle() {
+    if (canvasPhase !== 'bubble') return; // only allow toggle after animation settles
     isOpen = !isOpen;
     panel.classList.toggle('open', isOpen);
     backdrop.classList.toggle('open', isOpen);
-    bubble.style.display = isOpen ? 'none' : 'flex';
+    canvas.style.display = isOpen ? 'none' : 'block';
   }
 
-  bubble.addEventListener('click', toggle);
+  bubble.addEventListener('click', function () {
+    if (canvasPhase === 'bubble') toggle();
+  });
   backdrop.addEventListener('click', toggle);
 
   // Close on Escape
@@ -118,7 +440,8 @@
   try {
     if (sessionStorage.getItem('fluxy_widget_open') === '1') {
       sessionStorage.removeItem('fluxy_widget_open');
-      toggle();
+      // Only restore if already in bubble phase
+      if (canvasPhase === 'bubble') toggle();
     }
   } catch (e) {}
 
@@ -128,10 +451,15 @@
       .then(function (r) { return r.json(); })
       .then(function (s) {
         if (s.onboard_complete !== 'true') {
-          bubble.style.display = 'none';
+          if (canvasPhase === 'bubble') {
+            canvas.style.display = 'none';
+          } else {
+            hideAfterTransition = true;
+          }
           window.addEventListener('message', function onMsg(e) {
             if (e.data && e.data.type === 'fluxy:onboard-complete') {
-              bubble.style.display = 'flex';
+              hideAfterTransition = false;
+              canvas.style.display = 'block';
               window.removeEventListener('message', onMsg);
             }
           });
@@ -145,29 +473,4 @@
   var awsScript = document.createElement('script');
   awsScript.src = '/fluxy/app-ws.js';
   document.head.appendChild(awsScript);
-
-  // ── Splash / Service Worker upgrade logic ──────────────────────────
-  // This runs from the supervisor (always updated), so it fixes existing
-  // installs whose workspace/client/index.html is still old.
-
-  // Re-show splash before page unloads (manual refresh)
-  window.addEventListener('beforeunload', function () {
-    console.log('[widget] beforeunload — showing splash');
-    var s = document.getElementById('splash');
-    if (s) { s.style.transition = 'none'; s.style.display = 'flex'; s.style.opacity = '1'; }
-  });
-
-  // When a new SW takes control, show splash and reload so the new
-  // caching strategy (stale-while-revalidate) kicks in immediately.
-  if ('serviceWorker' in navigator) {
-    var swRefreshing = false;
-    navigator.serviceWorker.addEventListener('controllerchange', function () {
-      console.log('[widget] controllerchange — new SW took control, refreshing:', swRefreshing);
-      if (swRefreshing) return;
-      swRefreshing = true;
-      var s = document.getElementById('splash');
-      if (s) { s.style.transition = 'none'; s.style.display = 'flex'; s.style.opacity = '1'; }
-      location.reload();
-    });
-  }
 })();

package/workspace/client/index.html

@@ -10,18 +10,11 @@
     <link rel="apple-touch-icon" href="/fluxy-icon-192.png" />
     <link rel="manifest" href="/manifest.json" />
     <title>Fluxy</title>
-    <style>
-      @keyframes _fs{to{transform:rotate(360deg)}}
-    </style>
   </head>
   <body class="bg-background text-foreground" style="background:#222122">
-    <!-- App shell splash — visible instantly, no JS needed.
-         Covers the screen during reload/restore so there's never a white flash.
-         React hides it on mount; shown again before any reload. -->
-    <div id="splash" style="background:#222122;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100dvh;width:100vw;position:fixed;inset:0;z-index:9999;font-family:system-ui,-apple-system,sans-serif;transition:opacity .25s ease-out">
-      <img src="/fluxy-icon-192.png" width="56" height="56" style="border-radius:14px;margin-bottom:20px" alt="" />
-      <div style="width:18px;height:18px;border:2px solid rgba(255,255,255,0.12);border-top-color:rgba(255,255,255,0.7);border-radius:50%;animation:_fs .6s linear infinite"></div>
-    </div>
+    <!-- Dark background fallback — visible instantly while widget.js loads.
+         The canvas animation (in widget.js) takes over as the actual splash. -->
+    <div id="splash" style="background:#222122;position:fixed;inset:0;z-index:9998;transition:opacity .25s ease-out"></div>
 
     <div id="root"></div>
 
@@ -42,13 +35,10 @@
       });
     </script>
     <script>
-    // Re-show splash before page unloads (manual refresh / navigation).
-    // The last painted frame before teardown will be the dark splash
-    // instead of a white gap.
+    // Re-show dark background before page unloads (manual refresh / navigation).
     window.addEventListener('beforeunload', function () {
-      console.log('[splash] beforeunload — showing splash');
       var s = document.getElementById('splash');
-      if (s) { s.style.transition = 'none'; s.style.display = 'flex'; s.style.opacity = '1'; }
+      if (s) { s.style.transition = 'none'; s.style.display = 'block'; s.style.opacity = '1'; }
     });
     </script>
     <script type="module" src="/src/main.tsx"></script>
@@ -63,7 +53,7 @@
         if(swRefreshing)return;
         swRefreshing=true;
         var s=document.getElementById('splash');
-        if(s){s.style.transition='none';s.style.display='flex';s.style.opacity='1'}
+        if(s){s.style.transition='none';s.style.display='block';s.style.opacity='1'}
         console.log('[sw-reg] reloading after new SW took control');
         location.reload();
       });

package/workspace/client/src/App.tsx

@@ -41,10 +41,10 @@ export default function App() {
     const splash = document.getElementById('splash');
     let hiddenAt = 0;
 
-    // Show the splash screen (used before reloads and on resume)
+    // Show the dark background (used before reloads and on resume)
     function showSplash() {
       if (!splash) return;
-      splash.style.display = 'flex';
+      splash.style.display = 'block';
       splash.style.opacity = '1';
     }
 

package/workspace/client/src/main.tsx

@@ -9,18 +9,9 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   </React.StrictMode>,
 );
 
-// Fade out the HTML splash screen once React has actually painted.
-// React 18's createRoot().render() is async — wait for the next frame
-// to ensure the app is visible before removing the splash.
-console.log('[main] React render called, waiting for paint to hide splash');
+// Signal that the app has painted — the canvas animation in widget.js
+// will trigger the melt → travel → reform transition to bubble mode.
 requestAnimationFrame(() => requestAnimationFrame(() => {
-  console.log('[main] double-rAF fired — hiding splash');
-  const splash = document.getElementById('splash');
-  if (splash) {
-    splash.style.opacity = '0';
-    splash.addEventListener('transitionend', () => {
-      splash.style.display = 'none';
-      console.log('[main] splash hidden');
-    }, { once: true });
-  }
+  (window as any).__fluxyAppReady = true;
+  window.dispatchEvent(new Event('fluxy:app-ready'));
 }));