Merge branch 'sweet-lander' into smart-lander

packages/client/package.json

@@ -8,7 +8,9 @@
     "tests:coverage": "vitest run --coverage.enabled=true",
     "generate:sitemap": "bun ./scripts/generate_sitemap.js open-gsio.seemueller.workers.dev",
     "generate:robotstxt": "bun ./scripts/generate_robots_txt.js open-gsio.seemueller.workers.dev",
-    "generate:fonts": "cp -r ../../node_modules/katex/dist/fonts public/static"
+    "generate:fonts": "cp -r ../../node_modules/katex/dist/fonts public/static",
+    "generate:bevy:bundle": "bun scripts/generate-bevy-bundle.js",
+    "generate:pwa:assets": "test ! -f public/pwa-64x64.png && pwa-assets-generator --preset minimal-2023  public/logo.png || echo 'PWA assets already exist'"
   },
   "exports": {
     "./server/index.ts": {
@@ -17,19 +19,23 @@
     }
   },
   "devDependencies": {
-    "@open-gsio/env": "workspace:*",
-    "@open-gsio/scripts": "workspace:*",
+    "@chakra-ui/icons": "^2.2.4",
     "@chakra-ui/react": "^2.10.6",
     "@cloudflare/workers-types": "^4.20241205.0",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
+    "@open-gsio/env": "workspace:*",
+    "@open-gsio/scripts": "workspace:*",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.2",
+    "@types/bun": "^1.2.17",
     "@types/marked": "^6.0.0",
+    "@vite-pwa/assets-generator": "^1.0.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^3.1.4",
     "@vitest/ui": "^3.1.4",
+    "bun": "^1.2.17",
     "chokidar": "^4.0.1",
     "framer-motion": "^11.13.1",
     "isomorphic-dompurify": "^2.19.0",
@@ -44,20 +50,19 @@
     "mobx": "^6.13.5",
     "mobx-react-lite": "^4.0.7",
     "mobx-state-tree": "^6.0.1",
-    "moo": "^0.5.2",
     "qrcode.react": "^4.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.4.0",
     "react-streaming": "^0.4.2",
     "react-textarea-autosize": "^8.5.5",
+    "react-use-pwa-install": "^1.0.3",
     "shiki": "^1.24.0",
+    "tslog": "^4.9.3",
     "typescript": "^5.7.2",
     "vike": "^0.4.235",
     "vite": "^7.0.0",
-    "vite-plugin-pwa": "^1.0.0",
-    "vitest": "^3.1.4",
-    "bun": "^1.2.17",
-    "@types/bun": "^1.2.17"
+    "vite-plugin-pwa": "^1.0.1",
+    "vitest": "^3.1.4"
   }
 }

packages/client/public/site.webmanifest

@@ -1,19 +0,0 @@
-{
-  "name": "",
-  "short_name": "",
-  "icons": [
-    {
-      "src": "/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "theme_color": "#fffff0",
-  "background_color": "#000000",
-  "display": "standalone"
-}

packages/client/scripts/generate-bevy-bundle.js

@@ -0,0 +1,186 @@
+import { execSync } from 'node:child_process';
+import {
+  existsSync,
+  readdirSync,
+  readFileSync,
+  writeFileSync,
+  renameSync,
+  rmSync,
+  cpSync,
+  statSync,
+} from 'node:fs';
+import { resolve, dirname, join, basename } from 'node:path';
+
+import { Logger } from 'tslog';
+const logger = new Logger({
+  stdio: 'inherit',
+  prettyLogTimeZone: 'local',
+  type: 'pretty',
+  stylePrettyLogs: true,
+  prefix: ['\n'],
+  overwrite: true,
+});
+
+function main() {
+  bundleCrate();
+  cleanup();
+  logger.info('🎉 yachtpit built successfully');
+}
+
+const getRepoRoot = execSync('git rev-parse --show-toplevel', { encoding: 'utf-8' }).trim();
+const repoRoot = resolve(getRepoRoot);
+const publicDir = resolve(repoRoot, 'packages/client/public');
+const indexHtml = resolve(publicDir, 'index.html');
+
+function bundleCrate() {
+  // ───────────── Build yachtpit project ───────────────────────────────────
+  logger.info('🔨 Building yachtpit...');
+
+  logger.info(`📁 Repository root: ${repoRoot}`);
+
+  // Check if submodules need to be initialized
+  const yachtpitPath = resolve(repoRoot, 'crates/yachtpit');
+  logger.info(`📁 Yachtpit path: ${yachtpitPath}`);
+
+  if (!existsSync(yachtpitPath)) {
+    logger.info('📦 Initializing submodules...');
+    execSync('git submodule update --init --remote', { stdio: 'inherit' });
+  } else {
+    logger.info(`✅ Submodules already initialized at: ${yachtpitPath}`);
+  }
+
+  // Build the yachtpit project
+  const buildCwd = resolve(repoRoot, 'crates/yachtpit/crates/yachtpit');
+  logger.info(`🔨 Building in directory: ${buildCwd}`);
+
+  try {
+    execSync('trunk build --release', {
+      cwd: buildCwd,
+    });
+    logger.info('✅ Yachtpit built');
+  } catch (error) {
+    console.error('❌ Failed to build yachtpit:', error.message);
+    process.exit(1);
+  }
+
+  // ───────────── Copy assets to public directory ──────────────────────────
+  const yachtpitDistDir = join(buildCwd, 'dist');
+
+  logger.info(`📋 Copying assets to public directory...`);
+
+  // Remove existing yachtpit assets from public directory
+  const skipRemoveOldAssets = false;
+
+  if (!skipRemoveOldAssets) {
+    const existingAssets = readdirSync(publicDir).filter(
+      file => file.startsWith('yachtpit') && (file.endsWith('.js') || file.endsWith('.wasm')),
+    );
+
+    existingAssets.forEach(asset => {
+      const assetPath = join(publicDir, asset);
+      rmSync(assetPath, { force: true });
+      logger.info(`🗑️  Removed old asset: ${assetPath}`);
+    });
+  } else {
+    logger.warn('SKIPPING REMOVING OLD ASSETS');
+  }
+
+  // Copy new assets from yachtpit/dist to public directory
+  if (existsSync(yachtpitDistDir)) {
+    logger.info(`📍Located yachtpit build: ${yachtpitDistDir}`);
+    try {
+      cpSync(yachtpitDistDir, publicDir, {
+        recursive: true,
+        force: true,
+      });
+      logger.info(`✅ Assets copied from ${yachtpitDistDir} to ${publicDir}`);
+    } catch (error) {
+      console.error('❌ Failed to copy assets:', error.message);
+      process.exit(1);
+    }
+  } else {
+    console.error(`❌ Yachtpit dist directory not found at: ${yachtpitDistDir}`);
+    process.exit(1);
+  }
+
+  // ───────────── locate targets ───────────────────────────────────────────
+  const dstPath = join(publicDir, 'yachtpit.html');
+
+  // Regexes for the hashed filenames produced by most bundlers
+  const JS_RE = /^yachtpit-[\da-f]{16}\.js$/i;
+  const WASM_RE = /^yachtpit-[\da-f]{16}_bg\.wasm$/i;
+
+  // Always perform renaming of bundle files
+  const files = readdirSync(publicDir);
+
+  // helper that doesn't explode if the target file is already present
+  const safeRename = (from, to) => {
+    if (!existsSync(from)) return;
+    if (existsSync(to)) {
+      logger.info(`ℹ️  ${to} already exists – removing and replacing.`);
+      rmSync(to, { force: true });
+    }
+    renameSync(from, to);
+    logger.info(`📝 Renamed: ${basename(from)} → ${basename(to)}`);
+  };
+
+  files.forEach(f => {
+    const fullPath = join(publicDir, f);
+    if (JS_RE.test(f)) safeRename(fullPath, join(publicDir, 'yachtpit.js'));
+    if (WASM_RE.test(f)) safeRename(fullPath, join(publicDir, 'yachtpit_bg.wasm'));
+  });
+
+  // ───────────── patch markup inside HTML ─────────────────────────────────
+  if (existsSync(indexHtml)) {
+    logger.info(`📝 Patching HTML file: ${indexHtml}`);
+    let html = readFileSync(indexHtml, 'utf8');
+
+    html = html
+      .replace(/yachtpit-[\da-f]{16}\.js/gi, 'yachtpit.js')
+      .replace(/yachtpit-[\da-f]{16}_bg\.wasm/gi, 'yachtpit_bg.wasm');
+
+    writeFileSync(indexHtml, html, 'utf8');
+
+    // ───────────── rename HTML entrypoint ─────────────────────────────────
+    if (basename(indexHtml) !== 'yachtpit.html') {
+      logger.info(`📝 Renaming HTML file: ${indexHtml} → ${dstPath}`);
+      // Remove existing yachtpit.html if it exists
+      if (existsSync(dstPath)) {
+        rmSync(dstPath, { force: true });
+      }
+      renameSync(indexHtml, dstPath);
+    }
+  } else {
+    logger.info(`⚠️  ${indexHtml} not found – skipping HTML processing.`);
+  }
+  optimizeWasmSize();
+}
+
+function optimizeWasmSize() {
+  logger.info('🔨 Checking WASM size...');
+
+  const wasmPath = resolve(publicDir, 'yachtpit_bg.wasm');
+  const fileSize = statSync(wasmPath).size;
+  const sizeInMb = fileSize / (1024 * 1024);
+
+  if (sizeInMb > 30) {
+    logger.info(`WASM size is ${sizeInMb.toFixed(2)}MB, optimizing...`);
+    execSync(`wasm-opt -Oz -o ${wasmPath} ${wasmPath}`, {
+      encoding: 'utf-8',
+    });
+    logger.info(`✅ WASM size optimized`);
+  } else {
+    logger.info(
+      `⏩ Skipping WASM optimization, size (${sizeInMb.toFixed(2)}MB) is under 30MB threshold`,
+    );
+  }
+}
+
+function cleanup() {
+  logger.info('Running cleanup...');
+  rmSync(indexHtml, { force: true });
+  const creditsDir = resolve(`${repoRoot}/packages/client/public`, 'credits');
+  rmSync(creditsDir, { force: true, recursive: true });
+}
+
+main();

packages/client/src/components/InstallButton.tsx

@@ -0,0 +1,34 @@
+import { IconButton } from '@chakra-ui/react';
+import { HardDriveDownload } from 'lucide-react';
+import React from 'react';
+import { usePWAInstall } from 'react-use-pwa-install';
+
+import { toolbarButtonZIndex } from './toolbar/Toolbar.tsx';
+
+function InstallButton() {
+  const install = usePWAInstall();
+
+  // <button onClick={handleInstall}>Install App</button>;
+  return (
+    <IconButton
+      aria-label="Install App"
+      title="Install App"
+      icon={<HardDriveDownload />}
+      size="md"
+      bg="transparent"
+      stroke="text.accent"
+      color="text.accent"
+      onClick={() => install}
+      _hover={{
+        bg: 'transparent',
+        svg: {
+          stroke: 'accent.secondary',
+          transition: 'stroke 0.3s ease-in-out',
+        },
+      }}
+      zIndex={toolbarButtonZIndex}
+    />
+  );
+}
+
+export default InstallButton;

packages/client/src/components/landing-component/BevyScene.tsx

@@ -0,0 +1,50 @@
+import { Box } from '@chakra-ui/react';
+import React, { memo, useEffect, useMemo } from 'react';
+
+export interface BevySceneProps {
+  speed?: number;
+  intensity?: number; // 0-1 when visible
+  glow?: boolean;
+  visible?: boolean; // NEW — defaults to true
+}
+
+const BevySceneInner: React.FC<BevySceneProps> = ({
+  speed = 1,
+  intensity = 1,
+  glow = false,
+  visible,
+}) => {
+  /* initialise once */
+  useEffect(() => {
+    let dispose: (() => void) | void;
+    (async () => {
+      const { default: init } = await import(/* webpackIgnore: true */ '/public/yachtpit.js');
+      dispose = await init(); // zero-arg, uses #yachtpit-canvas
+    })();
+    return () => {
+      if (typeof dispose === 'function') dispose();
+    };
+  }, []);
+
+  /* memoised styles */
+  const wrapperStyles = useMemo(
+    () => ({
+      position: 'absolute' as const,
+      inset: 0,
+      zIndex: 0,
+      opacity: visible ? Math.min(Math.max(intensity, 0), 1) : 0,
+      filter: glow ? 'blur(1px)' : 'none',
+      transition: `opacity ${speed}s ease-in-out`,
+      display: visible ? 'block' : 'none', // optional: reclaim hit-testing entirely
+    }),
+    [visible, intensity, glow, speed],
+  );
+
+  return (
+    <Box as="div" sx={wrapperStyles}>
+      <canvas id="yachtpit-canvas" width={1280} height={720} aria-hidden />
+    </Box>
+  );
+};
+
+export const BevyScene = memo(BevySceneInner);

packages/client/src/components/landing-component/LandingComponent.tsx

@@ -0,0 +1,102 @@
+import { Box } from '@chakra-ui/react';
+import React, { useState } from 'react';
+
+import { BevyScene } from './BevyScene.tsx';
+import { MatrixRain } from './MatrixRain.tsx';
+import Particles from './Particles.tsx';
+import Tweakbox from './Tweakbox.tsx';
+
+export const LandingComponent: React.FC = () => {
+  const [speed, setSpeed] = useState(0.2);
+  const [intensity, setIntensity] = useState(0.5);
+  const [particles, setParticles] = useState(false);
+  const [glow, setGlow] = useState(false);
+  const [matrixRain, setMatrixRain] = useState(false);
+  const [bevyScene, setBevyScene] = useState(true);
+
+  return (
+    <Box
+      as="section"
+      bg="background.primary"
+      w="100%"
+      h="100vh"
+      overflow="hidden"
+      position="relative"
+    >
+      <Box
+        position="fixed"
+        bottom="24px"
+        right="24px"
+        maxWidth="300px"
+        minWidth="200px"
+        zIndex={1000}
+      >
+        <Tweakbox
+          sliders={{
+            speed: {
+              value: !particles ? speed : 0.99,
+              onChange: setSpeed,
+              label: 'Animation Speed',
+              min: 0.01,
+              max: 0.99,
+              step: 0.01,
+              ariaLabel: 'animation-speed',
+            },
+            intensity: {
+              value: !particles ? intensity : 0.99,
+              onChange: setIntensity,
+              label: 'Effect Intensity',
+              min: 0.01,
+              max: 0.99,
+              step: 0.01,
+              ariaLabel: 'effect-intensity',
+            },
+          }}
+          switches={{
+            particles: {
+              value: particles,
+              onChange(enabled) {
+                if (enabled) {
+                  setMatrixRain(!enabled);
+                  setBevyScene(!enabled);
+                }
+                setParticles(enabled);
+              },
+              label: 'Particles',
+            },
+            matrixRain: {
+              value: matrixRain,
+              onChange(enabled) {
+                if (enabled) {
+                  setParticles(!enabled);
+                  setBevyScene(!enabled);
+                }
+                setMatrixRain(enabled);
+              },
+              label: 'Matrix Rain',
+            },
+            bevyScene: {
+              value: bevyScene,
+              onChange(enabled) {
+                if (enabled) {
+                  setParticles(!enabled);
+                  setMatrixRain(!enabled);
+                }
+                setBevyScene(enabled);
+              },
+              label: 'Bevy Scene',
+            },
+            glow: {
+              value: glow,
+              onChange: setGlow,
+              label: 'Glow Effect',
+            },
+          }}
+        />
+      </Box>
+      <BevyScene speed={speed} intensity={intensity} glow={glow} visible={bevyScene} />
+      <MatrixRain speed={speed} intensity={intensity} glow={glow} visible={matrixRain} />
+      <Particles glow speed={speed} intensity={intensity} visible={particles} />
+    </Box>
+  );
+};

packages/client/src/components/landing-component/MatrixRain.tsx

@@ -0,0 +1,124 @@
+import { useBreakpointValue, useTheme } from '@chakra-ui/react';
+import React, { useEffect, useRef, useMemo } from 'react';
+
+const MATRIX_CHARS =
+  'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+interface MatrixRainProps {
+  speed?: number;
+  glow?: boolean;
+  intensity?: number;
+  visible?: boolean;
+}
+
+export const MatrixRain: React.FC<MatrixRainProps> = ({
+  speed = 1,
+  glow = false,
+  intensity = 1,
+  visible,
+}) => {
+  const fontSize = useBreakpointValue({ base: 14, md: 18, lg: 22 }) ?? 14;
+  const theme = useTheme();
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const animationRef = useRef<number | null>(null);
+  const dropsRef = useRef<number[]>([]);
+  const columnsRef = useRef<number>(0);
+
+  const colors = useMemo(
+    () => ({
+      background: theme.colors.background.primary,
+      textAccent: theme.colors.text.accent,
+    }),
+    [theme.colors.background.primary, theme.colors.text.accent],
+  );
+
+  const colorsRef = useRef(colors);
+  colorsRef.current = colors;
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const resize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+
+      const newColumns = Math.floor(canvas.width / fontSize);
+      if (newColumns !== columnsRef.current) {
+        columnsRef.current = newColumns;
+        const newDrops: number[] = [];
+
+        for (let i = 0; i < newColumns; i++) {
+          if (i < dropsRef.current.length) {
+            newDrops[i] = dropsRef.current[i];
+          } else {
+            newDrops[i] = Math.random() * (canvas.height / fontSize);
+          }
+        }
+        dropsRef.current = newDrops;
+      }
+    };
+
+    resize();
+    window.addEventListener('resize', resize);
+
+    if (dropsRef.current.length === 0) {
+      const columns = Math.floor(canvas.width / fontSize);
+      columnsRef.current = columns;
+
+      for (let i = 0; i < columns; i++) {
+        dropsRef.current[i] = Math.random() * (canvas.height / fontSize);
+      }
+    }
+
+    const draw = () => {
+      if (!ctx || !canvas) return;
+
+      const currentColors = colorsRef.current;
+
+      ctx.fillStyle = currentColors.background;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      ctx.font = `${fontSize}px monospace`;
+
+      for (let i = 0; i < dropsRef.current.length; i++) {
+        const text = MATRIX_CHARS[Math.floor(Math.random() * MATRIX_CHARS.length)];
+        const x = i * fontSize;
+        const y = dropsRef.current[i] * fontSize;
+
+        ctx.fillStyle = currentColors.textAccent;
+        if (glow) {
+          ctx.shadowBlur = 10;
+          ctx.shadowColor = currentColors.textAccent;
+        }
+        ctx.fillText(text, x, y);
+
+        if (y > canvas.height) {
+          dropsRef.current[i] = -Math.random() * 5;
+        } else {
+          dropsRef.current[i] += (0.1 + Math.random() * 0.5) * speed * intensity;
+        }
+      }
+
+      animationRef.current = requestAnimationFrame(draw);
+    };
+
+    animationRef.current = requestAnimationFrame(draw);
+
+    return () => {
+      window.removeEventListener('resize', resize);
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [fontSize, speed, glow, intensity, visible]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{ display: visible ? 'block' : 'none', pointerEvents: 'none' }}
+    />
+  );
+};

packages/client/src/components/landing-component/Particles.tsx

@@ -0,0 +1,162 @@
+import { Box, useTheme } from '@chakra-ui/react';
+import React, { useEffect, useRef } from 'react';
+
+interface ParticlesProps {
+  speed: number;
+  intensity: number;
+  particles: boolean;
+  glow: boolean;
+  visible?: boolean;
+}
+
+interface Particle {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  size: number;
+}
+
+const Particles: React.FC<ParticlesProps> = ({ speed, intensity, glow, visible }) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const particlesRef = useRef<Particle[]>([]);
+  const animationFrameRef = useRef<number | undefined>(undefined);
+  const theme = useTheme();
+
+  // Helper function to create a single particle with proper canvas dimensions
+  const createParticle = (canvas: HTMLCanvasElement): Particle => ({
+    x: Math.random() * canvas.parentElement!.getBoundingClientRect().width,
+    y: Math.random() * canvas.parentElement!.getBoundingClientRect().height,
+    vx: (Math.random() - 0.5) * speed,
+    vy: (Math.random() - 0.5) * speed,
+    size: Math.random() * 3 + 1,
+  });
+
+  // Main animation effect
+  useEffect(() => {
+    if (!visible) {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = undefined;
+      }
+      particlesRef.current = []; // Clear particles when disabled
+      return;
+    }
+
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const resizeCanvas = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+
+      // Reposition existing particles that are outside new bounds
+      particlesRef.current.forEach(particle => {
+        if (particle.x > canvas.width) particle.x = Math.random() * canvas.width;
+        if (particle.y > canvas.height) particle.y = Math.random() * canvas.height;
+      });
+    };
+
+    const ensureParticleCount = () => {
+      const targetCount = Math.floor(intensity * 100);
+      const currentCount = particlesRef.current.length;
+
+      if (currentCount < targetCount) {
+        // Add new particles
+        const newParticles = Array.from({ length: targetCount - currentCount }, () =>
+          createParticle(canvas),
+        );
+        particlesRef.current = [...particlesRef.current, ...newParticles];
+      } else if (currentCount > targetCount) {
+        // Remove excess particles
+        particlesRef.current = particlesRef.current.slice(0, targetCount);
+      }
+    };
+
+    const updateParticles = () => {
+      particlesRef.current.forEach(particle => {
+        particle.x += particle.vx;
+        particle.y += particle.vy;
+
+        if (particle.x < 0) particle.x = canvas.width;
+        if (particle.x > canvas.width) particle.x = 0;
+        if (particle.y < 0) particle.y = canvas.height;
+        if (particle.y > canvas.height) particle.y = 0;
+      });
+    };
+
+    const drawParticles = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = theme.colors.text.accent;
+      ctx.globalCompositeOperation = 'lighter';
+
+      if (glow) {
+        ctx.shadowBlur = 10;
+        ctx.shadowColor = 'white';
+      } else {
+        ctx.shadowBlur = 0;
+      }
+
+      particlesRef.current.forEach(particle => {
+        ctx.beginPath();
+        ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+        ctx.fill();
+      });
+    };
+
+    const animate = () => {
+      updateParticles();
+      drawParticles();
+      animationFrameRef.current = requestAnimationFrame(animate);
+    };
+
+    const handleResize = () => {
+      resizeCanvas();
+    };
+
+    window.addEventListener('resize', handleResize);
+    resizeCanvas(); // Set canvas size first
+    ensureParticleCount(); // Then create particles with proper dimensions
+    animate();
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = undefined;
+      }
+    };
+  }, [visible, intensity, speed, glow, theme.colors.text.accent]);
+
+  // Separate effect for speed changes - update existing particle velocities
+  useEffect(() => {
+    if (!visible) return;
+
+    particlesRef.current.forEach(particle => {
+      const currentSpeed = Math.sqrt(particle.vx * particle.vx + particle.vy * particle.vy);
+      if (currentSpeed > 0) {
+        const normalizedVx = particle.vx / currentSpeed;
+        const normalizedVy = particle.vy / currentSpeed;
+        particle.vx = normalizedVx * speed;
+        particle.vy = normalizedVy * speed;
+      } else {
+        particle.vx = (Math.random() - 0.5) * speed;
+        particle.vy = (Math.random() - 0.5) * speed;
+      }
+    });
+  }, [speed, visible]);
+
+  return (
+    <Box zIndex={0} pointerEvents={'none'}>
+      <canvas
+        ref={canvasRef}
+        style={{ display: visible ? 'block' : 'none', pointerEvents: 'none' }}
+      />
+    </Box>
+  );
+};
+
+export default Particles;

packages/client/src/components/landing-component/Tweakbox.tsx

@@ -0,0 +1,111 @@
+import {
+  Box,
+  Grid,
+  GridItem,
+  Heading,
+  Slider,
+  SliderTrack,
+  SliderFilledTrack,
+  SliderThumb,
+  Text,
+  Switch,
+  Collapse,
+  IconButton,
+} from '@chakra-ui/react';
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { observer } from 'mobx-react-lite';
+import React, { useState } from 'react';
+
+interface SliderControl {
+  value: number;
+  onChange: (value: number) => void;
+  label: string;
+  min: number;
+  max: number;
+  step: number;
+  ariaLabel: string;
+}
+
+interface SwitchControl {
+  value: boolean;
+  onChange: (enabled: boolean) => void;
+  label: string;
+  exclusive?: boolean;
+}
+
+interface TweakboxProps {
+  sliders: {
+    speed: SliderControl;
+    intensity: SliderControl;
+  };
+  switches: {
+    particles: SwitchControl;
+    glow: SwitchControl;
+  } & Record<string, SwitchControl>;
+}
+
+const Tweakbox = observer(({ sliders, switches }: TweakboxProps) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  return (
+    <Box display="flex" alignItems="flex-start">
+      <IconButton
+        aria-label="Toggle controls"
+        borderRadius="lg"
+        bg="whiteAlpha.300"
+        backdropFilter="blur(10px)"
+        boxShadow="xl"
+        icon={isCollapsed ? <ChevronUpIcon /> : <ChevronDownIcon />}
+        onClick={() => setIsCollapsed(!isCollapsed)}
+        size="sm"
+        marginRight={2}
+      />
+      <Collapse in={!isCollapsed} style={{ width: '100%' }}>
+        <Box p={4} borderRadius="lg" bg="whiteAlpha.100" backdropFilter="blur(10px)" boxShadow="xl">
+          <Grid templateColumns="1fr" gap={4}>
+            <GridItem>
+              <Heading hidden={true} size="sm" mb={4} color="text.accent">
+                Controls
+              </Heading>
+            </GridItem>
+            {Object.keys(switches).map(key => {
+              return (
+                <GridItem key={key}>
+                  <Text mb={2} color="text.accent">
+                    {switches[key].label}
+                  </Text>
+                  <Switch
+                    isChecked={switches[key].value}
+                    onChange={e => switches[key].onChange(e.target.checked)}
+                  />
+                </GridItem>
+              );
+            })}
+            {Object.entries(sliders).map(([key, slider]) => (
+              <GridItem key={key}>
+                <Text mb={2} color="text.accent">
+                  {slider.label}
+                </Text>
+                <Slider
+                  aria-label={slider.ariaLabel}
+                  value={slider.value}
+                  min={slider.min}
+                  step={slider.step}
+                  max={slider.max}
+                  onChange={slider.onChange}
+                >
+                  <SliderTrack>
+                    <SliderFilledTrack />
+                  </SliderTrack>
+                  <SliderThumb />
+                </Slider>
+              </GridItem>
+            ))}
+          </Grid>
+        </Box>
+      </Collapse>
+    </Box>
+  );
+});
+
+export default Tweakbox;

packages/client/src/components/toolbar/Toolbar.tsx

@@ -2,6 +2,7 @@ import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import BuiltWithButton from '../BuiltWithButton';
+import InstallButton from '../InstallButton.tsx';
 
 import GithubButton from './GithubButton';
 import SupportThisSiteButton from './SupportThisSiteButton';
@@ -17,6 +18,7 @@ function ToolBar({ isMobile }) {
       alignItems={isMobile ? 'flex-start' : 'flex-end'}
       pb={4}
     >
+      <InstallButton />
       <SupportThisSiteButton />
       <GithubButton />
       <BuiltWithButton />

packages/client/src/layout/Hero.tsx

@@ -17,9 +17,9 @@ export default function Hero() {
           minWidth="90px"
           maxWidth={'220px'}
           color="text.accent"
-          as="h3"
+          // as="h3"
           letterSpacing={'tight'}
-          size="lg"
+          size="xl"
         >
           {Routes[normalizePath(pageContext.urlPathname)]?.heroLabel}
         </Heading>

packages/client/src/layout/NavItem.tsx

@@ -5,7 +5,7 @@ function NavItem({ path, children, color, onClick, as, cursor }) {
   return (
     <Box
       as={as ?? 'a'}
-      href={path}
+      href={path && path.length > 1 ? path : '/'}
       mb={2}
       cursor={cursor}
       // ml={5}

packages/client/src/layout/Navigation.tsx

@@ -1,4 +1,4 @@
-import { Box, Collapse, Grid, GridItem, useBreakpointValue } from '@chakra-ui/react';
+import { Box, Collapse, Grid, GridItem, useBreakpointValue, useTheme } from '@chakra-ui/react';
 import { MenuIcon } from 'lucide-react';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
@@ -18,6 +18,8 @@ const Navigation = observer(({ children, routeRegistry }) => {
 
   const currentPath = pageContext.urlPathname || '/';
 
+  const theme = useTheme();
+
   const getTopValue = () => {
     if (!isMobile) return undefined;
     if (currentPath === '/') return 12;
@@ -53,9 +55,10 @@ const Navigation = observer(({ children, routeRegistry }) => {
           <GridItem>
             <MenuIcon
               cursor="pointer"
+              color="text.accent"
               w={6}
               h={6}
-              stroke={getTheme(userOptionsStore.theme).colors.text.accent}
+              stroke={theme.colors.text.accent}
               onClick={() => {
                 switch (menuState.isOpen) {
                   case true:

packages/client/src/layout/theme/color-themes/OneDark.ts

@@ -15,8 +15,8 @@ export default {
   },
 
   background: {
-    primary: 'linear-gradient(360deg, #15171C 100%, #353A47 100%)',
-
+    // primary: 'linear-gradient(360deg, #15171C 100%, #353A47 100%)',
+    primary: '#15171C',
     secondary: '#1B1F26',
     tertiary: '#1E1E2E',
   },

packages/client/src/pages/+client.ts

@@ -2,3 +2,20 @@
 import UserOptionsStore from '../stores/UserOptionsStore';
 
 UserOptionsStore.initialize();
+
+try {
+  const isLocal = window.location.hostname.includes('localhost');
+  if (!isLocal) {
+    navigator.serviceWorker.register('/service-worker.js');
+  } else {
+    (async () => {
+      await navigator.serviceWorker.getRegistrations().then(registrations => {
+        registrations.map(r => {
+          r.unregister();
+        });
+      });
+    })();
+  }
+} catch (e) {
+  // fail silent
+}

packages/client/src/pages/index/+Page.tsx

@@ -1,7 +1,7 @@
 import { Stack } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 
-import Chat from '../../components/chat/Chat';
+import { LandingComponent } from '../../components/landing-component/LandingComponent.tsx';
 import clientChatStore from '../../stores/ClientChatStore';
 
 // renders "/"
@@ -18,7 +18,8 @@ export default function IndexPage() {
 
   return (
     <Stack direction="column" height="100%" width="100%" spacing={0}>
-      <Chat height="100%" width="100%" />
+      <LandingComponent />
+      {/*<Chat height="100%" width="100%" />*/}
     </Stack>
   );
 }

packages/client/src/renderer/+onRenderHtml.tsx

@@ -28,10 +28,9 @@ const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRender
 <html data-theme="dark" lang="en">
 <head>
 <title>open-gsio</title>
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-<link rel="manifest" href="/site.webmanifest">
+<link rel="icon" href="/favicon.ico" sizes="48x48">
+<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
+<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta charset="UTF-8">
 <meta name="description" content="Maker Site">

packages/client/vite.config.ts

@@ -7,20 +7,36 @@ import { VitePWA } from 'vite-plugin-pwa';
 // eslint-disable-next-line import/no-unresolved
 import { configDefaults } from 'vitest/config';
 
+import { getColorThemes } from './src/layout/theme/color-themes';
+
 const prebuildPlugin = () => ({
   name: 'prebuild',
   config(config, { command }) {
     if (command === 'build') {
+      console.log('Generate PWA Assets -> public/');
+      child_process.execSync('bun generate:pwa:assets');
+      console.log('Generated Sitemap -> public/sitemap.xml');
       child_process.execSync('bun generate:sitemap');
       console.log('Generated Sitemap -> public/sitemap.xml');
       child_process.execSync('bun run generate:robotstxt');
       console.log('Generated robots.txt -> public/robots.txt');
       child_process.execSync('bun run generate:fonts');
       console.log('Copied fonts -> public/static/fonts');
+      child_process.execSync('bun run generate:bevy:bundle', {
+        stdio: 'inherit',
+      });
+      console.log('Bundled bevy app -> public/yachtpit.html');
     }
   },
 });
 
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+// const PROJECT_SOURCES_HASH = sha512Dir('./src');
+//
+// console.log({ PROJECT_SOURCES_HASH });
+
+const buildId = crypto.randomUUID();
+
 export default defineConfig(({ command }) => {
   return {
     mode: 'production',
@@ -31,6 +47,62 @@ export default defineConfig(({ command }) => {
         prerender: true,
         disableAutoFullBuild: false,
       }),
+      VitePWA({
+        registerType: 'autoUpdate',
+        injectRegister: null,
+        minify: true,
+        disable: false,
+        filename: 'service-worker.js',
+        devOptions: {
+          enabled: false,
+          navigateFallback: 'index.html',
+          suppressWarnings: true,
+          type: 'module',
+        },
+        manifest: {
+          name: `open-gsio`,
+          short_name: 'open-gsio',
+          display: 'standalone',
+          description: `open-gsio client`,
+          theme_color: getColorThemes().at(0)?.colors.text.accent,
+          background_color: getColorThemes().at(0)?.colors.background.primary,
+          scope: '/',
+          start_url: '/',
+          icons: [
+            {
+              src: 'pwa-64x64.png',
+              sizes: '64x64',
+              type: 'image/png',
+            },
+            {
+              src: 'pwa-192x192.png',
+              sizes: '192x192',
+              type: 'image/png',
+            },
+            {
+              src: 'pwa-512x512.png',
+              sizes: '512x512',
+              type: 'image/png',
+              purpose: 'any',
+            },
+            {
+              src: 'maskable-icon-512x512.png',
+              sizes: '512x512',
+              type: 'image/png',
+              purpose: 'maskable',
+            },
+          ],
+        },
+
+        workbox: {
+          globPatterns: ['**/*.{js,css,html,ico,png,svg,wasm}'],
+          navigateFallbackDenylist: [/^\/api\//],
+          maximumFileSizeToCacheInBytes: 25000000,
+          cacheId: buildId,
+          cleanupOutdatedCaches: true,
+          clientsClaim: true,
+        },
+      }),
       // PWA plugin saves money on data transfer by caching assets on the client
       /*
                 For safari, use this script in the console to unregister the service worker.
@@ -41,22 +113,15 @@ export default defineConfig(({ command }) => {
                     })
                 })
              */
-      // VitePWA({
-      //     registerType: 'autoUpdate',
-      //     devOptions: {
-      //         enabled: false,
-      //     },
-      //     manifest: {
-      //         name: "open-gsio",
-      //         short_name: "open-gsio",
-      //         description: "Assistant"
-      //     },
-      //     workbox: {
-      //         globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
-      //         navigateFallbackDenylist: [/^\/api\//],
-      //     }
-      // })
     ],
+    workbox: {
+      globPatterns: ['**/*.{js,css,html,ico,png,svg,wasm}'],
+      navigateFallbackDenylist: [/^\/api\//],
+      maximumFileSizeToCacheInBytes: 25000000,
+      cacheId: buildId,
+      cleanupOutdatedCaches: true,
+      clientsClaim: true,
+    },
     server: {
       port: 3000,
       proxy: {

packages/cloudflare-workers/open-gsio/main.ts

@@ -1,6 +1,7 @@
 import { ServerCoordinator } from '@open-gsio/coordinators';
 import Router from '@open-gsio/router';
+import { error } from 'itty-router';
 
 export { ServerCoordinator };
 
-export default Router.Router();
+export default Router.Router().catch(error);

packages/cloudflare-workers/open-gsio/wrangler.jsonc

@@ -20,9 +20,10 @@
     {
       "binding": "KV_STORAGE",
       // $ npx wrangler kv namespace create open-gsio
+      // $ npx wrangler kv namespace create open-gsio
       "id": "placeholderId",
       // $ npx wrangler kv namespace create open-gsio --preview
-      "preview_id": "placeholderIdPreview"
+      "preview_id": "placeholderId"
     }
   ],
   "migrations": [

packages/router/src/router.ts

@@ -52,13 +52,15 @@ export function createRouter() {
       // })
 
       .get('/api/metrics*', async (r, e, c) => {
-        const { metricsService } = createRequestContext(e, c);
-        return metricsService.handleMetricsRequest(r);
+        return new Response('ok');
+        // const { metricsService } = createRequestContext(e, c);
+        // return metricsService.handleMetricsRequest(r);
       })
 
       .post('/api/metrics*', async (r, e, c) => {
-        const { metricsService } = createRequestContext(e, c);
-        return metricsService.handleMetricsRequest(r);
+        return new Response('ok');
+        // const { metricsService } = createRequestContext(e, c);
+        // return metricsService.handleMetricsRequest(r);
       })
 
       // renders the app

packages/scripts/cleanup.sh

@@ -15,7 +15,12 @@ find . -name ".wrangler" -type d -prune -exec rm -rf {} \;
 
 # Remove build directories
 find . -name "dist" -type d -prune -exec rm -rf {} \;
-find . -name "build" -type d -prune -exec rm -rf {} \;
+
+
+#-----
+# crates/yachtpit uses a directory called build for staging assets so it can't be removed
+#find . -name "build" -type d -prune -exec rm -rf {} \;
+#-----
 
 find . -name "fonts" -type d -prune -exec rm -rf {} \;
 

packages/server/src/server/server.ts

@@ -4,6 +4,7 @@ import ServerCoordinator from '@open-gsio/coordinators/src/ServerCoordinatorBun.
 import Router from '@open-gsio/router';
 import { config } from 'dotenv';
 import type { RequestLike } from 'itty-router';
+import { error } from 'itty-router';
 
 import { BunSqliteKVNamespace } from '../storage/BunSqliteKVNamespace.ts';
 
@@ -49,8 +50,7 @@ export default {
           reject(new Error('Request timeout after 5s'));
         }, 5000),
       );
-
-      return await Promise.race([router.fetch(request, env, ctx), timeout]);
+      return await Promise.race([router.fetch(request, env, ctx).catch(error), timeout]);
     } catch (e) {
       console.error('Error handling request:', e);
       return new Response('Server Error', { status: 500 });