agent-office 0.5.0 → 0.6.1

package/dist/commands/screensaver.js

@@ -1,1280 +0,0 @@
-import express from "express";
-export async function appScreensaver(options) {
-    const { url: agentUrl, password, host, port: portStr } = options;
-    const port = parseInt(portStr, 10);
-    if (isNaN(port) || port < 1 || port > 65535) {
-        console.error(`Error: invalid port "${portStr}"`);
-        process.exit(1);
-    }
-    try {
-        new URL(agentUrl);
-    }
-    catch {
-        console.error(`Error: invalid --url "${agentUrl}"`);
-        process.exit(1);
-    }
-    console.log(`Screensaver: visualizing mail activity from ${agentUrl}/watch`);
-    const app = express();
-    app.use(express.json());
-    // ── GET /coworkers — proxies coworker list from agent-office ───────────────
-    app.get("/coworkers", async (_req, res) => {
-        res.setHeader("Content-Type", "application/json");
-        try {
-            const response = await fetch(`${agentUrl}/coworkers`, {
-                headers: {
-                    "Authorization": `Bearer ${password}`,
-                },
-            });
-            if (!response.ok) {
-                res.json([]);
-                return;
-            }
-            const data = await response.json();
-            res.json(data);
-        }
-        catch {
-            res.json([]);
-        }
-    });
-    // ── GET / — Three.js ring visualization ─────────────────────────────────────
-    app.get("/", (_req, res) => {
-        res.setHeader("Content-Type", "text/html; charset=utf-8");
-        res.send(renderScreensaverPage());
-    });
-    // ── GET /watch-stream — proxies SSE from agent-office /watch ───────────────
-    app.get("/watch-stream", async (req, res) => {
-        // Set up SSE headers
-        res.setHeader("Content-Type", "text/event-stream");
-        res.setHeader("Cache-Control", "no-cache");
-        res.setHeader("Connection", "keep-alive");
-        const abortController = new AbortController();
-        // Handle client disconnect
-        req.on("close", () => {
-            abortController.abort();
-            res.end();
-        });
-        req.on("error", () => {
-            abortController.abort();
-        });
-        try {
-            // Connect to the agent-office /watch endpoint
-            const response = await fetch(`${agentUrl}/watch`, {
-                headers: {
-                    "Authorization": `Bearer ${password}`,
-                },
-                signal: abortController.signal,
-            });
-            if (!response.ok) {
-                res.write(`event: error\n`);
-                res.write(`data: ${JSON.stringify({ error: `HTTP ${response.status}` })}\n\n`);
-                res.end();
-                return;
-            }
-            // Stream data from agent-office to client
-            const reader = response.body?.getReader();
-            if (!reader) {
-                res.write(`event: error\n`);
-                res.write(`data: ${JSON.stringify({ error: "No response body" })}\n\n`);
-                res.end();
-                return;
-            }
-            // Read and forward chunks
-            while (!abortController.signal.aborted) {
-                const { done, value } = await reader.read();
-                if (done)
-                    break;
-                // Forward the raw SSE data
-                const chunk = new TextDecoder().decode(value);
-                res.write(chunk);
-            }
-        }
-        catch (err) {
-            if (!abortController.signal.aborted) {
-                res.write(`event: error\n`);
-                res.write(`data: ${JSON.stringify({ error: String(err) })}\n\n`);
-            }
-        }
-        finally {
-            res.end();
-        }
-    });
-    const server = app.listen(port, host, () => {
-        console.log(`Screensaver running at http://${host}:${port}`);
-        console.log(`Press Ctrl+C to stop.`);
-    });
-    server.on('error', (err) => {
-        if (err.code === 'EADDRINUSE') {
-            console.error(`Error: Port ${port} is already in use. Is another instance running?`);
-        }
-        else {
-            console.error(`Error: ${err.message}`);
-        }
-        process.exit(1);
-    });
-    // Keep process alive
-    await new Promise(() => { });
-}
-// ── HTML page with Three.js ring visualization ───────────────────────────────
-function renderScreensaverPage() {
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Agent Office Screensaver</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;300&display=swap" rel="stylesheet">
-  <style>
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      background: #000;
-      height: 100vh;
-      overflow: hidden;
-    }
-    canvas { display: block; }
-  </style>
-</head>
-<body>
-
-  <script type="importmap">
-  {
-    "imports": {
-      "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
-      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
-    }
-  }
-  </script>
-
-  <script type="module">
-    import * as THREE from 'three'
-    import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
-    import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'
-    import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'
-    import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'
-    import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'
-    import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'
-    import { Reflector } from 'three/addons/objects/Reflector.js'
-
-    // ── Constants ──────────────────────────────────────────────────────────
-    const RING_RADIUS = 8
-    const NODE_SIZE = 0.35
-    const ARROW_DECAY_SECONDS = 5     // arrows fully fade after this many seconds
-    const ARROW_COLOR = 0xff3333
-    const ARROW_CURVE_HEIGHT = 2.5
-    const ARROW_HEAD_SIZE = 0.25
-    const LABEL_SCALE = 0.012
-
-    // ── State ──────────────────────────────────────────────────────────────
-    let agentNames = []          // sorted list of agent names
-    let agentNodes = new Map()   // name -> { mesh, label, angle }
-    let arrowObjects = []        // { from, to, mesh, arrowHead, createdAt, opacity }
-    let watchState = {}          // latest state from SSE
-    let coworkersSet = new Set() // valid coworker names from /coworkers endpoint
-
-    // Track all messages we've seen: key = "from->to", value = lastSent ISO string
-    let messageEdges = new Map() // "from->to" -> { lastSent: Date }
-
-    // Wait for IBM Plex Sans to load before rendering text sprites
-    let fontReady = false
-    document.fonts.load('200 48px "IBM Plex Sans"').then(() => {
-      fontReady = true
-      // Re-layout agents so labels render with the loaded font
-      if (agentNames.length > 0) layoutAgents(agentNames)
-    })
-
-    // ── Three.js setup ─────────────────────────────────────────────────────
-    const scene = new THREE.Scene()
-
-    const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 2000)
-    camera.position.set(0, 14, 14)
-    camera.lookAt(0, 0, 0)
-
-    const renderer = new THREE.WebGLRenderer({ antialias: true })
-    renderer.setSize(window.innerWidth, window.innerHeight)
-    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
-    renderer.toneMapping = THREE.ACESFilmicToneMapping
-    renderer.toneMappingExposure = 1.0
-    document.body.appendChild(renderer.domElement)
-
-    const controls = new OrbitControls(camera, renderer.domElement)
-    controls.enableDamping = true
-    controls.dampingFactor = 0.05
-    controls.minDistance = 5
-    controls.maxDistance = 40
-    controls.maxPolarAngle = Math.PI / 2.1
-
-    // ── Bloom post-processing ──────────────────────────────────────────────
-    const composer = new EffectComposer(renderer)
-
-    // First pass: render the starfield background into the composer buffer
-    // (we create bgScene/bgCamera above the composer, referenced here)
-    let bgRenderPass  // assigned after bgScene is created below
-
-    const renderPass = new RenderPass(scene, camera)
-    renderPass.clear = false       // don't clear - stars are already in the buffer
-    renderPass.clearDepth = true   // but do clear depth so scene renders on top
-    composer.addPass(renderPass)
-
-    const bloomPass = new UnrealBloomPass(
-      new THREE.Vector2(window.innerWidth, window.innerHeight),
-      1.0,    // strength
-      0.5,    // radius
-      0.2     // threshold - low so the red arrows and emissive objects bloom
-    )
-    composer.addPass(bloomPass)
-    composer.addPass(new OutputPass())
-
-    // ── Starfield background (fullscreen shader) ───────────────────────────
-    // Procedural stars with varying brightness, color temperature, and twinkling
-    const starVertexShader = \`
-      varying vec2 vUv;
-      void main() {
-        vUv = uv;
-        gl_Position = vec4(position, 1.0);
-      }
-    \`
-    const starFragmentShader = \`
-      precision highp float;
-      varying vec2 vUv;
-      uniform float uTime;
-      uniform vec2 uResolution;
-
-      // Hash functions for pseudo-random values
-      float hash(vec2 p) {
-        p = fract(p * vec2(443.897, 441.423));
-        p += dot(p, p.yx + 19.19);
-        return fract((p.x + p.y) * p.x);
-      }
-
-      float hash3(vec3 p) {
-        p = fract(p * vec3(443.897, 441.423, 437.195));
-        p += dot(p, p.yzx + 19.19);
-        return fract((p.x + p.y + p.z) * p.x);
-      }
-
-      // Smooth noise
-      float noise(vec2 p) {
-        vec2 i = floor(p);
-        vec2 f = fract(p);
-        f = f * f * (3.0 - 2.0 * f);
-        float a = hash(i);
-        float b = hash(i + vec2(1.0, 0.0));
-        float c = hash(i + vec2(0.0, 1.0));
-        float d = hash(i + vec2(1.0, 1.0));
-        return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
-      }
-
-      // Star layer - each cell may contain a star
-      float starLayer(vec2 uv, float scale, float seed) {
-        vec2 gv = fract(uv * scale) - 0.5;
-        vec2 id = floor(uv * scale);
-
-        float d = length(gv);
-        float r = hash(id + seed);
-
-        // Only rare cells have stars (realistic sparse density)
-        if (r > 0.08) return 0.0;
-
-        // Star brightness varies
-        float brightness = pow(hash(id + seed + 100.0), 3.0) * 2.0;
-
-        // Twinkling: each star twinkles at its own frequency and phase
-        float twinkleFreq = 0.5 + hash(id + seed + 200.0) * 3.0;
-        float twinklePhase = hash(id + seed + 300.0) * 6.28;
-        float twinkle = 0.7 + 0.3 * sin(uTime * twinkleFreq + twinklePhase);
-        brightness *= twinkle;
-
-        // Star size varies
-        float starSize = 0.005 + hash(id + seed + 400.0) * 0.015;
-
-        // Soft circular falloff
-        float star = smoothstep(starSize, starSize * 0.1, d) * brightness;
-
-        // Add subtle diffraction spikes on brighter stars
-        if (brightness > 0.8) {
-          float spike = max(
-            exp(-abs(gv.x) * 80.0) * exp(-abs(gv.y) * 8.0),
-            exp(-abs(gv.y) * 80.0) * exp(-abs(gv.x) * 8.0)
-          ) * brightness * 0.15;
-          star += spike;
-        }
-
-        return star;
-      }
-
-      void main() {
-        vec2 uv = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
-
-        // Very dark blue-black base
-        vec3 bg = vec3(0.005, 0.007, 0.015);
-
-        // Extremely subtle nebula-like color variation
-        float n1 = noise(uv * 2.0 + uTime * 0.01);
-        float n2 = noise(uv * 3.0 - uTime * 0.015 + 50.0);
-        bg += vec3(0.008, 0.004, 0.015) * n1;
-        bg += vec3(0.003, 0.008, 0.012) * n2;
-
-        // Accumulate multiple star layers at different scales (depth)
-        float stars = 0.0;
-        vec3 starColor = vec3(0.0);
-
-        for (float i = 0.0; i < 2.0; i++) {
-          float scale = 40.0 + i * 50.0;
-          float layerStars = starLayer(uv, scale, i * 73.156);
-
-          // Color temperature varies per star (white, blue-white, warm yellow)
-          vec2 id = floor(uv * scale);
-          float temp = hash(id + i * 73.156 + 500.0);
-          vec3 col;
-          if (temp < 0.25) {
-            col = vec3(0.8, 0.85, 1.0);   // blue-white (hot)
-          } else if (temp < 0.45) {
-            col = vec3(0.7, 0.8, 1.0);    // blue
-          } else if (temp < 0.75) {
-            col = vec3(1.0, 0.97, 0.92);  // white-warm
-          } else if (temp < 0.9) {
-            col = vec3(1.0, 0.9, 0.7);    // warm yellow
-          } else {
-            col = vec3(1.0, 0.75, 0.6);   // orange-ish (cool star)
-          }
-
-          starColor += layerStars * col;
-          stars += layerStars;
-        }
-
-        vec3 finalColor = bg + starColor;
-
-        // Very faint milky way band across the diagonal
-        float band = exp(-pow((uv.x + uv.y) * 1.5, 2.0) * 3.0);
-        float bandNoise = noise(uv * 8.0 + 100.0) * noise(uv * 16.0 + 200.0);
-        finalColor += vec3(0.012, 0.015, 0.025) * band * bandNoise * 3.0;
-
-        gl_FragColor = vec4(finalColor, 1.0);
-      }
-    \`
-
-    const starUniforms = {
-      uTime: { value: 0.0 },
-      uResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
-    }
-
-    // Fullscreen quad rendered behind everything
-    const starMaterial = new THREE.ShaderMaterial({
-      vertexShader: starVertexShader,
-      fragmentShader: starFragmentShader,
-      uniforms: starUniforms,
-      depthWrite: false,
-      depthTest: false,
-    })
-    const starQuad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), starMaterial)
-    starQuad.frustumCulled = false
-
-    // Render stars as a separate background scene so they're always behind
-    const bgScene = new THREE.Scene()
-    const bgCamera = new THREE.Camera()
-    bgScene.add(starQuad)
-
-    // Insert the bg render pass at the start of the composer chain
-    bgRenderPass = new RenderPass(bgScene, bgCamera)
-    bgRenderPass.clear = true
-    composer.insertPass(bgRenderPass, 0)
-
-    // ── Lighting ───────────────────────────────────────────────────────────
-    const ambientLight = new THREE.AmbientLight(0x334466, 0.6)
-    scene.add(ambientLight)
-
-    const pointLight = new THREE.PointLight(0x6c8eff, 1.5, 50)
-    pointLight.position.set(0, 8, 0)
-    scene.add(pointLight)
-
-    // Subtle ground glow
-    const groundGlow = new THREE.PointLight(0x1a3a5a, 0.5, 30)
-    groundGlow.position.set(0, -1, 0)
-    scene.add(groundGlow)
-
-    // ── Procedural environment cubemap for metal reflections ─────────────
-    // Without an envMap, MeshStandardMaterial with metalness looks flat black.
-    // Generate a simple dark gradient cubemap so the metal has something to reflect.
-    function generateEnvMap() {
-      const size = 128
-      const faces = []
-      for (let f = 0; f < 6; f++) {
-        const canvas = document.createElement('canvas')
-        canvas.width = size
-        canvas.height = size
-        const ctx = canvas.getContext('2d')
-        // Dark gradient: bluish at top, near-black at bottom
-        const grad = ctx.createLinearGradient(0, 0, 0, size)
-        if (f === 2) { // +Y (top)
-          grad.addColorStop(0, '#0a1828')
-          grad.addColorStop(1, '#162540')
-        } else if (f === 3) { // -Y (bottom)
-          grad.addColorStop(0, '#020408')
-          grad.addColorStop(1, '#050a10')
-        } else {
-          grad.addColorStop(0, '#0c1a2a')
-          grad.addColorStop(0.5, '#081018')
-          grad.addColorStop(1, '#040810')
-        }
-        ctx.fillStyle = grad
-        ctx.fillRect(0, 0, size, size)
-
-        // Scatter a few dim specks to give the reflections some texture
-        for (let i = 0; i < 40; i++) {
-          const x = Math.random() * size
-          const y = Math.random() * size
-          const brightness = Math.floor(20 + Math.random() * 30)
-          ctx.fillStyle = \`rgb(\${brightness}, \${brightness + 5}, \${brightness + 15})\`
-          ctx.beginPath()
-          ctx.arc(x, y, 0.5 + Math.random() * 1.0, 0, Math.PI * 2)
-          ctx.fill()
-        }
-
-        faces.push(canvas)
-      }
-
-      const cubeTexture = new THREE.CubeTexture(faces)
-      cubeTexture.needsUpdate = true
-      return cubeTexture
-    }
-
-    const envMap = generateEnvMap()
-    scene.environment = envMap
-
-    // ── Ground ring (the platform) — dark brushed metal ────────────────────
-    const ringGeo = new THREE.RingGeometry(RING_RADIUS - 1.8, RING_RADIUS + 1.8, 128, 4)
-    const ringMat = new THREE.MeshStandardMaterial({
-      color: 0x1a1e28,
-      roughness: 0.55,
-      metalness: 0.92,
-      envMap: envMap,
-      envMapIntensity: 1.5,
-      side: THREE.DoubleSide,
-    })
-    const ringMesh = new THREE.Mesh(ringGeo, ringMat)
-    ringMesh.rotation.x = -Math.PI / 2
-    ringMesh.position.y = -0.05
-    scene.add(ringMesh)
-
-    // ── Glass fence on outer edge ─────────────────────────────────────────
-    const fenceRadius = RING_RADIUS + 1.75
-    const fenceHeight = 1.8
-
-    // Single thin cylinder for the glass wall
-    const glassGeo = new THREE.CylinderGeometry(fenceRadius, fenceRadius, fenceHeight, 128, 1, true)
-    const glassMat = new THREE.MeshPhysicalMaterial({
-      color: 0x88aabb,
-      transparent: true,
-      opacity: 0.1,
-      roughness: 0.05,
-      metalness: 0.2,
-      transmission: 0.9,
-      thickness: 0.03,
-      ior: 1.5,
-      envMap: envMap,
-      envMapIntensity: 3.0,
-      side: THREE.DoubleSide,
-      depthWrite: false,
-    })
-    const glassWall = new THREE.Mesh(glassGeo, glassMat)
-    glassWall.position.y = fenceHeight / 2
-    scene.add(glassWall)
-
-    // Metal rail around the top
-    const railMat = new THREE.MeshStandardMaterial({
-      color: 0x3a3e48,
-      roughness: 0.3,
-      metalness: 0.95,
-      envMap: envMap,
-      envMapIntensity: 2.0,
-    })
-    const rail = new THREE.Mesh(
-      new THREE.TorusGeometry(fenceRadius, 0.02, 6, 128),
-      railMat
-    )
-    rail.rotation.x = -Math.PI / 2
-    rail.position.y = fenceHeight
-    scene.add(rail)
-
-    // Thin metal poles evenly spaced
-    const poleMat = new THREE.MeshStandardMaterial({
-      color: 0x3a3e48,
-      roughness: 0.35,
-      metalness: 0.95,
-      envMap: envMap,
-      envMapIntensity: 2.0,
-    })
-    const poleCount = 12
-    for (let i = 0; i < poleCount; i++) {
-      const angle = (i / poleCount) * Math.PI * 2
-      const pole = new THREE.Mesh(
-        new THREE.CylinderGeometry(0.02, 0.02, fenceHeight, 6),
-        poleMat
-      )
-      pole.position.set(
-        Math.cos(angle) * fenceRadius,
-        fenceHeight / 2,
-        Math.sin(angle) * fenceRadius
-      )
-      scene.add(pole)
-    }
-
-    // ── Reflective water pool in the center ───────────────────────────────
-    const poolGeo = new THREE.CircleGeometry(RING_RADIUS - 1.85, 64)
-    const pool = new Reflector(poolGeo, {
-      color: 0x445566,
-      textureWidth: 1024,
-      textureHeight: 1024,
-      clipBias: 0.003,
-    })
-    pool.rotation.x = -Math.PI / 2
-    pool.position.y = -0.04
-    scene.add(pool)
-
-    // Dark water surface shader overlay
-    const waterUniforms = {
-      uTime: { value: 0.0 },
-      uReflectTex: { value: pool.getRenderTarget().texture },
-    }
-    const waterMat = new THREE.ShaderMaterial({
-      uniforms: waterUniforms,
-      transparent: true,
-      depthWrite: false,
-      vertexShader: \`
-        varying vec2 vUv;
-        varying vec3 vWorldPos;
-        varying vec3 vNormal;
-        void main() {
-          vUv = uv;
-          vNormal = normalize(normalMatrix * normal);
-          vec4 wp = modelMatrix * vec4(position, 1.0);
-          vWorldPos = wp.xyz;
-          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-        }
-      \`,
-      fragmentShader: \`
-        precision highp float;
-        varying vec2 vUv;
-        varying vec3 vWorldPos;
-        varying vec3 vNormal;
-        uniform float uTime;
-        uniform sampler2D uReflectTex;
-
-        // --- Noise functions ---
-        vec2 hash2(vec2 p) {
-          p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
-          return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);
-        }
-
-        float noise(vec2 p) {
-          vec2 i = floor(p);
-          vec2 f = fract(p);
-          vec2 u = f * f * (3.0 - 2.0 * f);
-          return mix(mix(dot(hash2(i + vec2(0,0)), f - vec2(0,0)),
-                         dot(hash2(i + vec2(1,0)), f - vec2(1,0)), u.x),
-                     mix(dot(hash2(i + vec2(0,1)), f - vec2(0,1)),
-                         dot(hash2(i + vec2(1,1)), f - vec2(1,1)), u.x), u.y);
-        }
-
-        float fbm(vec2 p) {
-          float v = 0.0;
-          float a = 0.5;
-          vec2 shift = vec2(100.0);
-          mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.5));
-          for (int i = 0; i < 5; i++) {
-            v += a * noise(p);
-            p = rot * p * 2.0 + shift;
-            a *= 0.5;
-          }
-          return v;
-        }
-
-        void main() {
-          vec2 p = (vUv - 0.5) * 2.0;
-          float r = length(p);
-
-          // Edge fade so water doesn't touch the ring hard
-          float edgeFade = smoothstep(1.0, 0.85, r);
-          if (edgeFade < 0.001) discard;
-
-          // Animated FBM water surface
-          float t = uTime * 0.15;
-          vec2 q = vec2(fbm(p * 3.0 + vec2(t, 0.0)),
-                        fbm(p * 3.0 + vec2(0.0, t)));
-          vec2 rr = vec2(fbm(p * 3.0 + 4.0 * q + vec2(1.7, 9.2) + vec2(t * 0.3)),
-                         fbm(p * 3.0 + 4.0 * q + vec2(8.3, 2.8) + vec2(0.0, t * 0.2)));
-          float f = fbm(p * 3.0 + 4.0 * rr);
-
-          // Perturbed normal for subtle light interaction
-          float dx = fbm((p + vec2(0.01, 0.0)) * 3.0 + 4.0 * rr) - f;
-          float dy = fbm((p + vec2(0.0, 0.01)) * 3.0 + 4.0 * rr) - f;
-          vec3 perturbedNormal = normalize(vec3(-dx * 8.0, 1.0, -dy * 8.0));
-
-          // Fresnel - more reflective at glancing angles
-          vec3 viewDir = normalize(cameraPosition - vWorldPos);
-          float fresnel = pow(1.0 - max(dot(viewDir, perturbedNormal), 0.0), 3.0);
-          fresnel = 0.15 + 0.85 * fresnel;
-
-          // Deep water color with subtle variation
-          vec3 deepColor = vec3(0.01, 0.025, 0.04);
-          vec3 midColor  = vec3(0.02, 0.05, 0.08);
-          vec3 waterCol = mix(deepColor, midColor, f * 0.5 + 0.5);
-
-          // Subtle caustic-like bright spots from the FBM pattern
-          float caustic = pow(max(f * 0.5 + 0.5, 0.0), 6.0) * 0.3;
-          waterCol += vec3(0.05, 0.12, 0.15) * caustic;
-
-          // Reflection lookup (screen-space UV from the reflector)
-          vec2 reflUv = gl_FragCoord.xy / vec2(\${Math.round(1024)}.0);
-          reflUv += perturbedNormal.xz * 0.02; // distort reflection
-          vec3 reflColor = texture2D(uReflectTex, clamp(reflUv, 0.0, 1.0)).rgb;
-
-          // Blend water color with reflection via fresnel
-          vec3 color = mix(waterCol, waterCol + reflColor * 0.3, fresnel);
-
-          // Very subtle surface highlights (specular)
-          vec3 lightDir = normalize(vec3(0.0, 1.0, 0.0));
-          vec3 halfDir = normalize(lightDir + viewDir);
-          float spec = pow(max(dot(perturbedNormal, halfDir), 0.0), 120.0);
-          color += vec3(0.15, 0.25, 0.3) * spec * 0.5;
-
-          gl_FragColor = vec4(color, edgeFade * 0.85);
-        }
-      \`,
-    })
-    const waterOverlay = new THREE.Mesh(
-      new THREE.CircleGeometry(RING_RADIUS - 1.84, 64),
-      waterMat
-    )
-    waterOverlay.rotation.x = -Math.PI / 2
-    waterOverlay.position.y = -0.025
-    scene.add(waterOverlay)
-
-    // ── Center wireframe icosahedron ───────────────────────────────────────
-    const icoGeo = new THREE.IcosahedronGeometry(1.8, 1)
-    const icoWire = new THREE.WireframeGeometry(icoGeo)
-    const icoMat = new THREE.LineBasicMaterial({ color: 0x5ae0c0, transparent: true, opacity: 0.7 })
-    const icoLines = new THREE.LineSegments(icoWire, icoMat)
-    icoLines.position.y = 2.5
-    scene.add(icoLines)
-
-    // Inner glow sphere
-    const glowSphereGeo = new THREE.SphereGeometry(1.5, 32, 32)
-    const glowSphereMat = new THREE.MeshBasicMaterial({
-      color: 0x2a8a7a,
-      transparent: true,
-      opacity: 0.12,
-    })
-    const glowSphere = new THREE.Mesh(glowSphereGeo, glowSphereMat)
-    glowSphere.position.y = 2.5
-    scene.add(glowSphere)
-
-    // Core point light inside the icosahedron to cast glow on nearby objects
-    const icoLight = new THREE.PointLight(0x4ae0b0, 1.2, 12)
-    icoLight.position.y = 2.5
-    scene.add(icoLight)
-
-    // ── Text label helper (Canvas-based sprites) ───────────────────────────
-    const FONT_FAMILY = '"IBM Plex Sans", sans-serif'
-
-    function createTextSprite(text, fontSize = 48, color = '#b0c4de') {
-      const canvas = document.createElement('canvas')
-      const ctx = canvas.getContext('2d')
-      ctx.font = \`200 \${fontSize}px \${FONT_FAMILY}\`
-      const metrics = ctx.measureText(text)
-      const width = metrics.width + 20
-      const height = fontSize * 1.4
-
-      canvas.width = width
-      canvas.height = height
-
-      ctx.font = \`200 \${fontSize}px \${FONT_FAMILY}\`
-      ctx.textAlign = 'center'
-      ctx.textBaseline = 'middle'
-      ctx.fillStyle = color
-      ctx.fillText(text, width / 2, height / 2)
-
-      const texture = new THREE.CanvasTexture(canvas)
-      texture.minFilter = THREE.LinearFilter
-      const spriteMat = new THREE.SpriteMaterial({ map: texture, transparent: true, depthTest: false })
-      const sprite = new THREE.Sprite(spriteMat)
-      sprite.scale.set(width * LABEL_SCALE, height * LABEL_SCALE, 1)
-      return sprite
-    }
-
-    // ── Agent node helper ──────────────────────────────────────────────────
-    // Shared materials for all agent figures
-    const figureMat = new THREE.MeshStandardMaterial({
-      color: 0x8090a0,
-      roughness: 0.6,
-      metalness: 0.3,
-      envMap: envMap,
-    })
-    const deskMat = new THREE.MeshStandardMaterial({
-      color: 0x3a2a1a,
-      roughness: 0.7,
-      metalness: 0.1,
-      envMap: envMap,
-    })
-    const chairMat = new THREE.MeshStandardMaterial({
-      color: 0x1a1a22,
-      roughness: 0.8,
-      metalness: 0.2,
-      envMap: envMap,
-    })
-    // Monitor screen material -- emissive so it glows and responds to pulse
-    const screenMat = new THREE.MeshStandardMaterial({
-      color: 0x4488aa,
-      emissive: 0x2a4a7a,
-      emissiveIntensity: 0.5,
-      roughness: 0.1,
-      metalness: 0.5,
-    })
-    const monitorFrameMat = new THREE.MeshStandardMaterial({
-      color: 0x151518,
-      roughness: 0.4,
-      metalness: 0.8,
-      envMap: envMap,
-    })
-
-    function createAgentNode(name, angle) {
-      const group = new THREE.Group()
-
-      // Everything is built in local space facing +Z (inward),
-      // then the group is rotated to face the center.
-      const figureGroup = new THREE.Group()
-
-      // ── Desk ──
-      // Tabletop
-      const tabletop = new THREE.Mesh(
-        new THREE.BoxGeometry(0.9, 0.04, 0.45),
-        deskMat
-      )
-      tabletop.position.set(0, 0.38, 0.25)
-      figureGroup.add(tabletop)
-
-      // Desk legs (4)
-      const legGeo = new THREE.CylinderGeometry(0.02, 0.02, 0.38, 6)
-      const legPositions = [[-0.4, 0.19, 0.05], [0.4, 0.19, 0.05], [-0.4, 0.19, 0.45], [0.4, 0.19, 0.45]]
-      for (const [lx, ly, lz] of legPositions) {
-        const leg = new THREE.Mesh(legGeo, monitorFrameMat)
-        leg.position.set(lx, ly, lz)
-        figureGroup.add(leg)
-      }
-
-      // ── Monitor ──
-      // Monitor frame (thin box)
-      const monitorFrame = new THREE.Mesh(
-        new THREE.BoxGeometry(0.5, 0.35, 0.025),
-        monitorFrameMat
-      )
-      monitorFrame.position.set(0, 0.60, 0.35)
-      figureGroup.add(monitorFrame)
-
-      // Monitor screen (slightly inset, emissive) — unique per agent for pulse
-      const agentScreenMat = screenMat.clone()
-      const screen = new THREE.Mesh(
-        new THREE.BoxGeometry(0.44, 0.29, 0.005),
-        agentScreenMat
-      )
-      screen.position.set(0, 0.60, 0.336)
-      figureGroup.add(screen)
-
-      // Monitor stand (thin cylinder)
-      const stand = new THREE.Mesh(
-        new THREE.CylinderGeometry(0.02, 0.03, 0.18, 6),
-        monitorFrameMat
-      )
-      stand.position.set(0, 0.42, 0.35)
-      figureGroup.add(stand)
-
-      // ── Chair ──
-      // Seat
-      const seat = new THREE.Mesh(
-        new THREE.BoxGeometry(0.4, 0.04, 0.38),
-        chairMat
-      )
-      seat.position.set(0, 0.30, -0.2)
-      figureGroup.add(seat)
-
-      // Chair back
-      const chairBack = new THREE.Mesh(
-        new THREE.BoxGeometry(0.4, 0.4, 0.04),
-        chairMat
-      )
-      chairBack.position.set(0, 0.50, -0.37)
-      figureGroup.add(chairBack)
-
-      // Chair pedestal
-      const pedestal = new THREE.Mesh(
-        new THREE.CylinderGeometry(0.03, 0.03, 0.28, 6),
-        monitorFrameMat
-      )
-      pedestal.position.set(0, 0.16, -0.2)
-      figureGroup.add(pedestal)
-
-      // Chair base (5 legs radiating out)
-      for (let i = 0; i < 5; i++) {
-        const a = (i / 5) * Math.PI * 2
-        const cLeg = new THREE.Mesh(
-          new THREE.CylinderGeometry(0.012, 0.012, 0.18, 4),
-          monitorFrameMat
-        )
-        cLeg.position.set(
-          Math.sin(a) * 0.09,
-          0.02,
-          -0.2 + Math.cos(a) * 0.09
-        )
-        cLeg.rotation.z = Math.sin(a) * 0.8
-        cLeg.rotation.x = -Math.cos(a) * 0.8
-        figureGroup.add(cLeg)
-      }
-
-      // ── Person (seated figure) ──
-      // Torso
-      const torso = new THREE.Mesh(
-        new THREE.CylinderGeometry(0.12, 0.10, 0.28, 8),
-        figureMat
-      )
-      torso.position.set(0, 0.50, -0.2)
-      figureGroup.add(torso)
-
-      // Head
-      const head = new THREE.Mesh(
-        new THREE.SphereGeometry(0.09, 12, 10),
-        figureMat
-      )
-      head.position.set(0, 0.73, -0.2)
-      figureGroup.add(head)
-
-      // Upper arms (angled forward toward desk)
-      const armGeo = new THREE.CylinderGeometry(0.035, 0.03, 0.22, 6)
-      for (const side of [-1, 1]) {
-        const upperArm = new THREE.Mesh(armGeo, figureMat)
-        upperArm.position.set(side * 0.16, 0.48, -0.05)
-        upperArm.rotation.x = -0.9
-        upperArm.rotation.z = side * 0.15
-        figureGroup.add(upperArm)
-
-        // Forearm resting on desk
-        const forearm = new THREE.Mesh(
-          new THREE.CylinderGeometry(0.03, 0.025, 0.2, 6),
-          figureMat
-        )
-        forearm.position.set(side * 0.2, 0.40, 0.15)
-        forearm.rotation.x = -1.5
-        figureGroup.add(forearm)
-      }
-
-      // Upper legs (seated, going forward)
-      const legGeoFig = new THREE.CylinderGeometry(0.05, 0.04, 0.3, 6)
-      for (const side of [-1, 1]) {
-        const thigh = new THREE.Mesh(legGeoFig, figureMat)
-        thigh.position.set(side * 0.08, 0.30, -0.05)
-        thigh.rotation.x = -1.45
-        figureGroup.add(thigh)
-
-        // Lower legs (hanging down)
-        const shin = new THREE.Mesh(
-          new THREE.CylinderGeometry(0.04, 0.035, 0.28, 6),
-          figureMat
-        )
-        shin.position.set(side * 0.08, 0.14, 0.08)
-        figureGroup.add(shin)
-      }
-
-      // ── Subtle screen glow light ──
-      const nodeLight = new THREE.PointLight(0x6c8eff, 0.4, 3)
-      nodeLight.position.set(0, 0.6, 0.3)
-      figureGroup.add(nodeLight)
-
-      // Rotate the whole figure to face inward (toward center)
-      figureGroup.rotation.y = angle + Math.PI
-      group.add(figureGroup)
-
-      // Name label above
-      const label = createTextSprite(name, 36, '#8ab4f8')
-      label.position.y = 1.05
-      group.add(label)
-
-      // Position on ring
-      const x = Math.cos(angle) * RING_RADIUS
-      const z = Math.sin(angle) * RING_RADIUS
-      group.position.set(x, 0, z)
-
-      return { group, sphereMat: agentScreenMat, label, angle }
-    }
-
-    // ── Standing scientists along the inner ring edge ─────────────────────
-    {
-      const innerEdgeRadius = RING_RADIUS - 1.4
-      const scientistCount = 2
-      // Spread them at irregular angles so they look casually placed
-      const baseAngles = [0.8, 3.6]
-
-      for (let i = 0; i < scientistCount; i++) {
-        const angle = baseAngles[i]
-        const group = new THREE.Group()
-
-        // Slight random rotation so they're not all identical
-        const facingJitter = (Math.random() - 0.5) * 0.3
-
-        // ── Standing body ──
-        // Legs
-        const legGeo = new THREE.CylinderGeometry(0.035, 0.03, 0.45, 6)
-        for (const side of [-1, 1]) {
-          const leg = new THREE.Mesh(legGeo, figureMat)
-          leg.position.set(side * 0.06, 0.225, 0)
-          group.add(leg)
-        }
-
-        // Torso
-        const torso = new THREE.Mesh(
-          new THREE.CylinderGeometry(0.11, 0.09, 0.35, 8),
-          figureMat
-        )
-        torso.position.y = 0.625
-        group.add(torso)
-
-        // Head - tilted slightly downward (looking at water)
-        const headGroup = new THREE.Group()
-        headGroup.position.y = 0.88
-        const head = new THREE.Mesh(
-          new THREE.SphereGeometry(0.08, 10, 8),
-          figureMat
-        )
-        headGroup.add(head)
-        headGroup.rotation.x = 0.25  // tilted down, looking at water
-        group.add(headGroup)
-
-        // Arms - one arm down, one arm up near chin (thoughtful pose)
-        // Left arm: hanging at side
-        const armDown = new THREE.Mesh(
-          new THREE.CylinderGeometry(0.03, 0.025, 0.32, 6),
-          figureMat
-        )
-        armDown.position.set(-0.14, 0.50, 0)
-        armDown.rotation.z = 0.08
-        group.add(armDown)
-
-        // Right arm: bent up toward chin
-        const upperArmR = new THREE.Mesh(
-          new THREE.CylinderGeometry(0.03, 0.025, 0.2, 6),
-          figureMat
-        )
-        upperArmR.position.set(0.14, 0.58, 0.02)
-        upperArmR.rotation.z = -0.3
-        upperArmR.rotation.x = -0.5
-        group.add(upperArmR)
-
-        const forearmR = new THREE.Mesh(
-          new THREE.CylinderGeometry(0.025, 0.022, 0.18, 6),
-          figureMat
-        )
-        forearmR.position.set(0.10, 0.74, -0.06)
-        forearmR.rotation.x = -1.2
-        group.add(forearmR)
-
-        // Position on the inner edge, facing inward (toward center/water)
-        const x = Math.cos(angle) * innerEdgeRadius
-        const z = Math.sin(angle) * innerEdgeRadius
-        group.position.set(x, 0, z)
-        group.rotation.y = angle + Math.PI + facingJitter  // face center
-
-        scene.add(group)
-      }
-    }
-
-    // ── Curved arrow helper ────────────────────────────────────────────────
-    function createCurvedArrow(fromPos, toPos, opacity) {
-      const mid = new THREE.Vector3().addVectors(fromPos, toPos).multiplyScalar(0.5)
-      mid.y += ARROW_CURVE_HEIGHT
-
-      // Push the midpoint outward from center slightly for visual separation
-      const centerToMid = new THREE.Vector3(mid.x, 0, mid.z)
-      const dist = centerToMid.length()
-      if (dist > 0.01) {
-        centerToMid.normalize().multiplyScalar(dist * 0.3)
-        mid.x += centerToMid.x
-        mid.z += centerToMid.z
-      }
-
-      const curve = new THREE.QuadraticBezierCurve3(fromPos.clone(), mid, toPos.clone())
-      const points = curve.getPoints(40)
-      const geometry = new THREE.BufferGeometry().setFromPoints(points)
-
-      const group = new THREE.Group()
-
-      // Core line
-      const material = new THREE.LineBasicMaterial({
-        color: ARROW_COLOR,
-        transparent: true,
-        opacity: opacity,
-      })
-      const line = new THREE.Line(geometry, material)
-      group.add(line)
-
-      // Directional cones along the curve (at 25%, 50%, 75%)
-      const coneMaterials = []
-      const conePositions = [0.25, 0.5, 0.75]
-      const up = new THREE.Vector3(0, 1, 0)
-
-      for (const t of conePositions) {
-        const pos = curve.getPointAt(t)
-        const tangent = curve.getTangentAt(t).normalize()
-
-        const coneGeo = new THREE.ConeGeometry(ARROW_HEAD_SIZE * 0.35, ARROW_HEAD_SIZE * 2.5, 8)
-        const coneMat = new THREE.MeshBasicMaterial({
-          color: ARROW_COLOR,
-          transparent: true,
-          opacity: opacity,
-        })
-        const cone = new THREE.Mesh(coneGeo, coneMat)
-        cone.position.copy(pos)
-
-        const quat = new THREE.Quaternion().setFromUnitVectors(up, tangent)
-        cone.setRotationFromQuaternion(quat)
-
-        group.add(cone)
-        coneMaterials.push(coneMat)
-      }
-
-      return { group, lineMaterial: material, coneMaterials }
-    }
-
-    // ── Layout agents in a ring ────────────────────────────────────────────
-    function layoutAgents(names) {
-      // Remove old nodes
-      for (const [, node] of agentNodes) {
-        scene.remove(node.group)
-      }
-      agentNodes.clear()
-
-      const count = names.length
-      if (count === 0) return
-
-      for (let i = 0; i < count; i++) {
-        const angle = (i / count) * Math.PI * 2 - Math.PI / 2
-        const name = names[i]
-        const node = createAgentNode(name, angle)
-        scene.add(node.group)
-        agentNodes.set(name, node)
-      }
-    }
-
-    // ── Update arrows based on message state ───────────────────────────────
-    function updateArrows() {
-      // Remove old arrows
-      for (const arrow of arrowObjects) {
-        scene.remove(arrow.group)
-        arrow.group.traverse(child => {
-          if (child.geometry) child.geometry.dispose()
-          if (child.material) child.material.dispose()
-        })
-      }
-      arrowObjects = []
-
-      const now = Date.now()
-
-      for (const [key, edge] of messageEdges) {
-        const [fromName, toName] = key.split('->')
-        const fromNode = agentNodes.get(fromName)
-        const toNode = agentNodes.get(toName)
-        if (!fromNode || !toNode) continue
-
-        const ageSec = (now - edge.lastSent.getTime()) / 1000
-        if (ageSec > ARROW_DECAY_SECONDS) continue
-
-        // Opacity: 1.0 at time 0, fading to 0.0 at ARROW_DECAY_SECONDS
-        const opacity = Math.max(0, 1.0 - (ageSec / ARROW_DECAY_SECONDS))
-        if (opacity <= 0.01) continue
-
-        const fromPos = fromNode.group.position.clone()
-        fromPos.y += 0.3
-        const toPos = toNode.group.position.clone()
-        toPos.y += 0.3
-
-        const arrow = createCurvedArrow(fromPos, toPos, opacity)
-        scene.add(arrow.group)
-        arrowObjects.push({
-          group: arrow.group,
-          lineMaterial: arrow.lineMaterial,
-          coneMaterials: arrow.coneMaterials,
-          fromName,
-          toName,
-          lastSent: edge.lastSent,
-        })
-      }
-    }
-
-    // ── Process incoming watch state ───────────────────────────────────────
-    function processWatchState(state) {
-      watchState = state
-      const nameSet = new Set()
-
-      // Collect all agent names and message edges (only for valid coworkers)
-      for (const agentName in state) {
-        // Only include if this is a known coworker
-        if (!coworkersSet.has(agentName)) continue
-        nameSet.add(agentName)
-        const senders = state[agentName] || {}
-        for (const senderName in senders) {
-          // Only include sender if they're also a known coworker
-          if (!coworkersSet.has(senderName)) continue
-          nameSet.add(senderName)
-          const edgeKey = senderName + '->' + agentName
-          const lastSent = new Date(senders[senderName].lastSent)
-          messageEdges.set(edgeKey, { lastSent })
-        }
-      }
-
-      const newNames = Array.from(nameSet).sort()
-
-      // Re-layout only if agents changed
-      if (JSON.stringify(newNames) !== JSON.stringify(agentNames)) {
-        agentNames = newNames
-        layoutAgents(agentNames)
-      }
-
-      // Pulse nodes that just received messages
-      const now = Date.now()
-      for (const [, node] of agentNodes) {
-        // Reset emissive
-        node.sphereMat.emissive.setHex(0x2a4a7a)
-        node.sphereMat.emissiveIntensity = 0.5
-      }
-      for (const [key, edge] of messageEdges) {
-        const ageSec = (now - edge.lastSent.getTime()) / 1000
-        if (ageSec < 5) {
-          // Recently active - pulse the receiver
-          const toName = key.split('->')[1]
-          const node = agentNodes.get(toName)
-          if (node) {
-            node.sphereMat.emissive.setHex(0x6c8eff)
-            node.sphereMat.emissiveIntensity = 1.5
-          }
-        }
-      }
-
-      updateArrows()
-    }
-
-    // ── Fetch coworkers list on startup ──────────────────────────────────────
-    async function fetchCoworkers() {
-      try {
-        const response = await fetch('/coworkers')
-        const coworkers = await response.json()
-        coworkersSet = new Set(coworkers.map(c => c.name))
-        console.log('Loaded coworkers:', Array.from(coworkersSet))
-        // Re-process watch state if we already have data
-        if (Object.keys(watchState).length > 0) {
-          processWatchState(watchState)
-        }
-      } catch (err) {
-        console.error('Failed to fetch coworkers:', err)
-      }
-    }
-
-    // Fetch coworkers immediately
-    fetchCoworkers()
-
-    // ── SSE connection ─────────────────────────────────────────────────────
-    const es = new EventSource('/watch-stream')
-
-    es.addEventListener('open', () => {
-      console.log('SSE connected')
-    })
-
-    es.addEventListener('state', (event) => {
-      try {
-        const state = JSON.parse(event.data)
-        processWatchState(state)
-      } catch (err) {
-        console.error('Failed to parse state:', err)
-      }
-    })
-
-    es.addEventListener('error', () => {
-      console.warn('SSE disconnected, retrying...')
-    })
-
-    // ── Animation loop ─────────────────────────────────────────────────────
-    const clock = new THREE.Clock()
-    let arrowUpdateTimer = 0
-
-    function animate() {
-      requestAnimationFrame(animate)
-      const delta = clock.getDelta()
-      const elapsed = clock.getElapsedTime()
-
-      // Update shader uniforms
-      starUniforms.uTime.value = elapsed
-      waterUniforms.uTime.value = elapsed
-
-      // Slowly rotate icosahedron
-      icoLines.rotation.y = elapsed * 0.15
-      icoLines.rotation.x = Math.sin(elapsed * 0.1) * 0.2
-      glowSphere.rotation.y = elapsed * 0.15
-
-      // Pulse the center glow subtly
-      const icoPulse = 0.10 + Math.sin(elapsed * 0.8) * 0.04
-      glowSphereMat.opacity = icoPulse
-      icoLight.intensity = 1.0 + Math.sin(elapsed * 0.8) * 0.4
-
-      // Update arrow opacities periodically (every 0.5s to avoid thrash)
-      arrowUpdateTimer += delta
-      if (arrowUpdateTimer > 0.5) {
-        arrowUpdateTimer = 0
-        updateArrowOpacities()
-      }
-
-      // Pulse recently-active nodes
-      const now = Date.now()
-      for (const [key, edge] of messageEdges) {
-        const ageSec = (now - edge.lastSent.getTime()) / 1000
-        if (ageSec < 5) {
-          const toName = key.split('->')[1]
-          const node = agentNodes.get(toName)
-          if (node) {
-            const pulse = 0.8 + Math.sin(elapsed * 6) * 0.7
-            node.sphereMat.emissiveIntensity = pulse
-          }
-        }
-      }
-
-      controls.update()
-
-      // Render: bg pass -> scene pass -> bloom -> output (all via composer)
-      composer.render()
-    }
-
-    function updateArrowOpacities() {
-      const now = Date.now()
-      for (const arrow of arrowObjects) {
-        const edge = messageEdges.get(arrow.fromName + '->' + arrow.toName)
-        if (!edge) continue
-
-        const ageSec = (now - edge.lastSent.getTime()) / 1000
-        const opacity = Math.max(0, 1.0 - (ageSec / ARROW_DECAY_SECONDS))
-        arrow.lineMaterial.opacity = opacity
-        for (const mat of arrow.coneMaterials) mat.opacity = opacity
-      }
-    }
-
-    // ── Window resize ──────────────────────────────────────────────────────
-    window.addEventListener('resize', () => {
-      camera.aspect = window.innerWidth / window.innerHeight
-      camera.updateProjectionMatrix()
-      renderer.setSize(window.innerWidth, window.innerHeight)
-      composer.setSize(window.innerWidth, window.innerHeight)
-      bloomPass.resolution.set(window.innerWidth, window.innerHeight)
-      starUniforms.uResolution.value.set(window.innerWidth, window.innerHeight)
-    })
-
-    // ── Start ──────────────────────────────────────────────────────────────
-    animate()
-  </script>
-</body>
-</html>`;
-}