bloby-bot 0.17.2

package/supervisor/widget.js

@@ -0,0 +1,441 @@
+(function () {
+  if (document.getElementById('bloby-widget')) return;
+
+  var PANEL_WIDTH = '480px';
+
+  // ── 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-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}',
+    '#bloby-widget-panel.open{transform:translateX(0)}',
+    '#bloby-widget-panel iframe{width:100%;height:100%;border:none;background:#212121}',
+    '@media(max-width:480px){#bloby-widget-panel{width:100vw}}',
+  ].join('\n');
+  document.head.appendChild(style);
+
+  // ── Backdrop ──
+  var backdrop = document.createElement('div');
+  backdrop.id = 'bloby-widget-backdrop';
+  document.body.appendChild(backdrop);
+
+  // ── Panel ──
+  var panel = document.createElement('div');
+  panel.id = 'bloby-widget-panel';
+  document.body.appendChild(panel);
+
+  var iframe = document.createElement('iframe');
+  iframe.src = '/bloby/';
+  iframe.setAttribute('loading', 'lazy');
+  panel.appendChild(iframe);
+
+  // ══════════════════════════════════════════════════════════════════
+  // ── Sprite Sheet Animation (Splash + Bubble) ─────────────────────
+  // ══════════════════════════════════════════════════════════════════
+
+  // ── Sprite config ──
+  var COLS = 16;
+  var FRAME_W = 125;
+  var FRAME_H = 120;
+  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;
+  var IDLE_FRAME_MS = 1000 / IDLE_FPS;
+  var REFORM_FPS = 70;
+  var REFORM_FRAME_MS = 1000 / REFORM_FPS;
+
+  var TRAVEL_PX_PER_MS = 0.65;
+  var TRAVEL_MIN = 385;
+  var TRAVEL_MAX = 1150;
+  var MIN_SPLASH_MS = 2000;
+  var BUBBLE_SIZE = 60;
+  var BUBBLE_MARGIN = 24;
+
+  // ── Easing ──
+  function easeInOutCubic(t) { return t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3) / 2; }
+
+  // ── Canvas setup (starts fullscreen for splash) ──
+  var canvas = document.createElement('canvas');
+  canvas.id = 'bloby-widget-bubble';
+  canvas.setAttribute('role', 'button');
+  canvas.setAttribute('aria-label', 'Open Bloby chat');
+  canvas.dataset.blobyWidget = '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;
+  var ctx = canvas.getContext('2d');
+  var dpr = window.devicePixelRatio || 1;
+  var W = 0, H = 0;
+
+  // ── Canvas phase: 'splash' | 'transitioning' | 'bubble' | 'disabled' ──
+  var canvasPhase = 'splash';
+  var canvasCreatedAt = Date.now();
+  var appReady = false;
+  var hideAfterTransition = false;
+  var skipSplash = 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();
+    if (canvasPhase === 'splash' && animState === 'idle') {
+      center.x = Math.round(W / 2);
+      center.y = Math.round(H / 2);
+    }
+  });
+
+  // ── Animation state ──
+  var spriteSheet = null;
+  var animState = 'loading';
+  var currentFrame = 0;
+  var idleDirection = 1;
+  var lastFrameTime = 0;
+  var travelDuration = 0;
+  var travelStartTime = 0;
+  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 };
+
+  // ── Load sprite sheet ──
+  function loadSprite(onDone, onFail) {
+    var img = new Image();
+    img.onload = function () {
+      spriteSheet = img;
+      center.x = Math.round(W / 2);
+      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.src = '/spritesheet.webp';
+  }
+
+  // ── Trigger move ──
+  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;
+    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 ──
+  function update(now) {
+    // Smooth position update during travel (every rAF)
+    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;
+        animState = 'reforming';
+        currentFrame = REFORM_START;
+        lastFrameTime = now;
+        return;
+      }
+    }
+
+    // Sprite frame advance (at configured FPS)
+    var frameInterval = animState === 'idle' ? IDLE_FRAME_MS
+                      : animState === 'reforming' ? REFORM_FRAME_MS
+                      : FRAME_MS;
+    var frameDelta = now - lastFrameTime;
+    if (frameDelta < frameInterval) return;
+    lastFrameTime = now - (frameDelta % frameInterval);
+
+    if (animState === 'idle') {
+      currentFrame += idleDirection;
+      if (currentFrame >= IDLE_END) { currentFrame = IDLE_END; idleDirection = -1; }
+      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;
+      }
+    } else if (animState === 'traveling') {
+      currentFrame++;
+      if (currentFrame > TRAVEL_END) currentFrame = TRAVEL_START;
+    } else if (animState === 'reforming') {
+      currentFrame++;
+      if (currentFrame > REFORM_END) {
+        animState = 'idle';
+        currentFrame = IDLE_START;
+        idleDirection = 1;
+        // 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%;transition:transform .15s ease;-webkit-tap-highlight-color:transparent;';
+          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;
+          if (hideAfterTransition) {
+            canvas.style.display = 'none';
+          }
+        }
+      }
+    }
+  }
+
+  // ── Draw ──
+  function drawFrame(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;
+
+    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.restore();
+  }
+
+  function draw(now) {
+    ctx.clearRect(0, 0, W, H);
+    if (!spriteSheet || animState === 'loading') return;
+
+    if (animState === 'melting') {
+      var p = (currentFrame - MELT_START) / (MELT_END - MELT_START);
+      var eased = p * p;
+      drawFrame(currentFrame, center.x, center.y, travelDrawAngle * eased, travelFlip);
+    } else if (animState === 'traveling') {
+      drawFrame(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);
+      drawFrame(currentFrame, center.x, center.y, travelDrawAngle * (1 - eased2));
+    } else {
+      drawFrame(currentFrame, center.x, center.y);
+    }
+  }
+
+  // ── 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';
+    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 (for onboard / instant load)
+  function skipToBubble() {
+    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%;transition:transform .15s ease;-webkit-tap-highlight-color:transparent;';
+    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;
+    animState = 'idle';
+    // Hide the HTML splash fallback
+    var splash = document.getElementById('splash');
+    if (splash) splash.style.display = 'none';
+  }
+
+  window.addEventListener('bloby:app-ready', function () {
+    appReady = true;
+    maybeTransition();
+  });
+  if (window.__blobyAppReady) {
+    appReady = true;
+  }
+
+  // ── Check onboard status, then start ──
+  // First-time users get the onboard wizard — skip the splash animation.
+  var onboardActive = false;
+  fetch('/api/settings')
+    .then(function (r) { return r.json(); })
+    .then(function (s) {
+      if (s.onboard_complete !== 'true') {
+        onboardActive = true;
+        skipSplash = true;
+      }
+      startAnimation();
+    })
+    .catch(function () {
+      startAnimation();
+    });
+
+  function startAnimation() {
+    loadSprite(
+      function onSuccess() {
+        if (skipSplash) {
+          skipToBubble();
+          if (onboardActive) canvas.style.display = 'none';
+        }
+        requestAnimationFrame(loop);
+        maybeTransition();
+      },
+      function onFail() {
+        canvas.style.display = 'none';
+        canvasPhase = 'disabled';
+      }
+    );
+  }
+
+  // ══════════════════════════════════════════════════════════════════
+  // ── Widget Interaction (Panel, Toggle, Messages) ─────────────────
+  // ══════════════════════════════════════════════════════════════════
+
+  var isOpen = false;
+
+  function toggle() {
+    if (canvasPhase !== 'bubble') return;
+    isOpen = !isOpen;
+    panel.classList.toggle('open', isOpen);
+    backdrop.classList.toggle('open', isOpen);
+    canvas.style.display = isOpen ? 'none' : 'block';
+  }
+
+  bubble.addEventListener('click', function () {
+    if (canvasPhase === 'bubble') toggle();
+  });
+  backdrop.addEventListener('click', toggle);
+
+  // Close on Escape
+  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;
+  });
+
+  // Handle messages from iframe
+  window.addEventListener('message', function (e) {
+    if (!e.data || !e.data.type) return;
+
+    if (e.data.type === 'bloby:close' && isOpen) toggle();
+
+    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';
+    }
+  });
+
+  // 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) {}
+
+  // 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);
+})();

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "rootDir": ".",
+    "jsx": "react-jsx",
+    "types": [],
+    "paths": {
+      "@server/*": ["./server/*"],
+      "@client/*": ["./workspace/client/src/*"]
+    }
+  },
+  "include": ["server/**/*", "workspace/client/src/**/*", "workspace/backend/**/*", "cli/**/*", "vite.config.ts"],
+  "exclude": ["node_modules", "dist", "data"]
+}

package/vite.bloby.config.ts

@@ -0,0 +1,43 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import path from 'path';
+
+export default defineConfig({
+  root: 'supervisor/chat',
+  base: '/bloby/',
+  resolve: {
+    alias: { '@': path.resolve(__dirname, 'supervisor/chat/src') },
+  },
+  build: {
+    outDir: '../../dist-bloby',
+    emptyOutDir: true,
+    rolldownOptions: {
+      input: {
+        bloby: path.resolve(__dirname, 'supervisor/chat/bloby.html'),
+        onboard: path.resolve(__dirname, 'supervisor/chat/onboard.html'),
+      },
+    },
+  },
+  server: {
+    warmup: {
+      clientFiles: ['./bloby-main.tsx', './onboard-main.tsx'],
+    },
+  },
+  optimizeDeps: {
+    include: [
+      'react',
+      'react-dom/client',
+      'react/jsx-runtime',
+      'lucide-react',
+      'framer-motion',
+      'react-markdown',
+      'remark-gfm',
+      'react-syntax-highlighter',
+      'react-syntax-highlighter/dist/esm/styles/prism/one-dark',
+      'use-sync-external-store',
+      'use-sync-external-store/shim',
+    ],
+  },
+  plugins: [react(), tailwindcss()],
+});

package/vite.config.ts

@@ -0,0 +1,68 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import path from 'path';
+
+export default defineConfig({
+  root: process.env.BLOBY_WORKSPACE
+    ? path.join(process.env.BLOBY_WORKSPACE, 'client')
+    : 'workspace/client',
+  resolve: {
+    alias: {
+      '@': process.env.BLOBY_WORKSPACE
+        ? path.join(process.env.BLOBY_WORKSPACE, 'client/src')
+        : path.resolve(__dirname, 'workspace/client/src'),
+    },
+    // Prevent React dual-instance when workspace/node_modules has its own copy
+    dedupe: ['react', 'react-dom'],
+  },
+  build: {
+    outDir: '../../dist',
+    emptyOutDir: true,
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/app/api': {
+        target: 'http://localhost:3004',
+        rewrite: (path) => path.replace(/^\/app/, ''),
+      },
+      '/api': 'http://localhost:3000',
+    },
+    warmup: {
+      clientFiles: ['./src/main.tsx'],
+    },
+    watch: {
+      ignored: [
+        '**/app.db*',
+        '**/.backend.log',
+        '**/files/**',
+        '**/.env',
+        '**/backend/**',
+        '**/*.db',
+        '**/*.db-journal',
+        '**/*.db-wal',
+        '**/*.db-shm',
+        '**/*.sqlite',
+        '**/*.log',
+      ],
+    },
+  },
+  optimizeDeps: {
+    include: [
+      'react',
+      'react-dom/client',
+      'react/jsx-runtime',
+      'react-router',
+      'driver.js',
+      'lucide-react',
+      'framer-motion',
+      'recharts',
+      'zustand',
+      'sonner',
+      'use-sync-external-store',
+      'use-sync-external-store/shim',
+    ],
+  },
+  plugins: [react(), tailwindcss()],
+});