opencode-agent-flow 0.0.0-stage → 0.1.1

package/public/flow-webgl.js

@@ -0,0 +1,155 @@
+import * as THREE from 'three';
+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 { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+
+// Screen-space ribbon meshes retain their width on GPUs with one-pixel GL lines.
+const STRANDS = 7, STEPS = 56, MAX_PARTICLES = 3000;
+function sample(e, u, strand, time) {
+  const dx = e.b[0] - e.a[0], dy = e.b[1] - e.a[1], len = Math.hypot(dx, dy) || 1, v = 1 - u;
+  const spread = e.bend + (strand - 3) * 8 + Math.sin(time * .65 + strand * 1.7) * 10;
+  const wave = Math.sin(u * Math.PI * 3 + strand * 1.4 + time * .7) * Math.sin(u * Math.PI) * 5;
+  const offset = 3 * v * v * u * spread - 3 * v * u * u * spread * .65 + wave;
+  return [e.a[0] + dx * u - dy / len * offset, e.a[1] + dy * u + dx / len * offset];
+}
+
+export function createFlow(fallbackCanvas, onLost) {
+  const canvas = document.createElement('canvas');
+  canvas.setAttribute('aria-hidden', 'true'); canvas.style.pointerEvents = 'none';
+  let renderer, composer;
+  try {
+    const options = { alpha: true, premultipliedAlpha: true, antialias: false, powerPreference: 'low-power' };
+    const context = canvas.getContext('webgl2', options);
+    if (!context) throw new Error('WebGL2 unavailable; using Canvas 2D');
+    renderer = new THREE.WebGLRenderer({ canvas, context, ...options });
+    renderer.setClearColor(0x000000, 0);
+    renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    renderer.toneMappingExposure = 1.15;
+    const scene = new THREE.Scene();
+    const camera = new THREE.OrthographicCamera(0, 1364, 0, 540, -10, 10);
+    camera.position.z = 1;
+    composer = new EffectComposer(renderer);
+    composer.addPass(new RenderPass(scene, camera));
+    const bloom = new UnrealBloomPass(new THREE.Vector2(1364, 540), 1.3, .65, .3);
+    // The stock truncated Gaussian still has ~60% weight at its edge, making
+    // isolated sparks bloom into boxes. Let each separable kernel decay first.
+    for (const material of bloom.separableBlurMaterials) {
+      const weights = material.uniforms.gaussianCoefficients.value;
+      const sigma = weights.length / 4;
+      for (let i = 0; i < weights.length; i++) weights[i] = Math.exp(-.5 * i * i / (sigma * sigma));
+    }
+    composer.addPass(bloom);
+    composer.addPass(new OutputPass());
+    // UnrealBloomPass writes opaque alpha. Rebuild coverage from the final,
+    // tone-mapped light, with premultiplied RGB for native page compositing.
+    // Black becomes fully transparent; even the faint bloom retains soft edges.
+    composer.addPass(new ShaderPass({
+      uniforms: { tDiffuse: { value: null } },
+      vertexShader: `varying vec2 vUv;
+        void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.); }`,
+      fragmentShader: `uniform sampler2D tDiffuse; varying vec2 vUv;
+        void main() { vec3 light = texture2D(tDiffuse, vUv).rgb;
+          float coverage = clamp(max(light.r, max(light.g, light.b)), 0., 1.);
+          gl_FragColor = vec4(light, coverage); }`
+    }));
+    fallbackCanvas.after(canvas);
+    const ribbons = new THREE.Group(); scene.add(ribbons);
+    const lineMaterial = new THREE.MeshBasicMaterial({ color: 0xff3d8b, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.DoubleSide, toneMapped: false });
+    // Explicit billboard UVs avoid driver-dependent point-sprite coordinates.
+    const particleGeometry = new THREE.InstancedBufferGeometry();
+    particleGeometry.setAttribute('position', new THREE.Float32BufferAttribute([-.5,-.5,0, .5,-.5,0, .5,.5,0, -.5,.5,0], 3));
+    particleGeometry.setIndex([0, 1, 2, 0, 2, 3]);
+    const positions = new Float32Array(MAX_PARTICLES * 3), sizes = new Float32Array(MAX_PARTICLES), intensities = new Float32Array(MAX_PARTICLES), whites = new Float32Array(MAX_PARTICLES);
+    for (const [name, array, size] of [['offset', positions, 3], ['size', sizes, 1], ['intensity', intensities, 1], ['white', whites, 1]]) particleGeometry.setAttribute(name, new THREE.InstancedBufferAttribute(array, size).setUsage(THREE.DynamicDrawUsage));
+    const particleMaterial = new THREE.ShaderMaterial({
+      transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+      side: THREE.DoubleSide,
+      vertexShader: `attribute vec3 offset; attribute float size; attribute float intensity; attribute float white;
+        varying float power; varying float pale; varying vec2 spriteUv;
+        void main() { power = intensity; pale = white; spriteUv = position.xy * 2.;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(offset + position * size, 1.); }`,
+      fragmentShader: `varying float power; varying float pale; varying vec2 spriteUv;
+        void main() { float r = length(spriteUv); if (r >= 1.) discard;
+          float halo = exp(-r*r*5.) * (1. - smoothstep(.55, 1., r));
+          float core = exp(-r*r*36.);
+          vec3 pink = mix(vec3(1., .045, .26), vec3(1., .55, .72), pale);
+          gl_FragColor = vec4((pink * halo * .65 + vec3(1.8) * core) * power, halo); }`
+    });
+    const particles = new THREE.Mesh(particleGeometry, particleMaterial); particles.frustumCulled = false; scene.add(particles);
+    let dpr = 1, count = 0, budget = 1800, slow = 0, dimensions = '';
+    function particle(x, y, size, intensity, white = 0) {
+      if (count >= MAX_PARTICLES) return;
+      positions[count * 3] = x; positions[count * 3 + 1] = y; sizes[count] = size; intensities[count] = intensity; whites[count] = white; count++;
+    }
+    function dispose() {
+      for (const mesh of [...ribbons.children]) { mesh.geometry.dispose(); mesh.material.dispose(); ribbons.remove(mesh); }
+      particleGeometry.dispose(); particleMaterial.dispose(); lineMaterial.dispose(); composer.dispose(); renderer.dispose(); canvas.remove();
+    }
+    canvas.addEventListener('webglcontextlost', event => { event.preventDefault(); dispose(); onLost(); }, { once: true });
+    return {
+      resize(width, height, ratio) {
+        const displayWidth = canvas.parentElement.getBoundingClientRect().width || width;
+        const key = `${width}:${height}:${ratio}:${displayWidth}`;
+        if (dimensions === key) return;
+        dimensions = key;
+        dpr = Math.min(2, ratio); renderer.setPixelRatio(dpr); renderer.setSize(width, height, false);
+        composer.setPixelRatio(dpr); composer.setSize(width, height);
+        camera.right = width; camera.bottom = height; camera.updateProjectionMatrix();
+        budget = displayWidth < 700 || navigator.hardwareConcurrency <= 4 ? 900 : 2400;
+      },
+      draw(edges, hub, visible, time) {
+        const start = performance.now(); count = 0;
+        const needed = edges.length * STRANDS;
+        while (ribbons.children.length > needed) { const mesh = ribbons.children.at(-1); ribbons.remove(mesh); mesh.geometry.dispose(); mesh.material.dispose(); }
+        while (ribbons.children.length < needed) {
+          const geometry = new THREE.BufferGeometry(), vertices = new Float32Array(STEPS * 6 * 3);
+          geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3).setUsage(THREE.DynamicDrawUsage));
+          const mesh = new THREE.Mesh(geometry, lineMaterial.clone()); mesh.frustumCulled = false; ribbons.add(mesh);
+        }
+        edges.forEach((e, index) => {
+          const waiting = e.status === 'waiting', active = e.active;
+          const power = active ? (waiting ? .85 + Math.sin(time * 2.4) * .2 : 1.1) : .19;
+          for (let j = 0; j < STRANDS; j++) {
+            const mesh = ribbons.children[index * STRANDS + j], array = mesh.geometry.attributes.position.array;
+            mesh.material.color.setRGB(power * 1.25, power * (waiting ? .8 : .07), power * (waiting ? 1 : .35));
+            const width = active ? 1.6 : .8;
+            let prev = sample(e, 0, j, time);
+            for (let k = 0; k < STEPS; k++) {
+              const next = sample(e, (k + 1) / STEPS, j, time), dx = next[0] - prev[0], dy = next[1] - prev[1], len = Math.hypot(dx, dy) || 1;
+              const nx = -dy / len * width / 2, ny = dx / len * width / 2;
+              array.set([prev[0]+nx,prev[1]+ny,0, prev[0]-nx,prev[1]-ny,0, next[0]+nx,next[1]+ny,0, next[0]+nx,next[1]+ny,0, prev[0]-nx,prev[1]-ny,0, next[0]-nx,next[1]-ny,0], k * 18);
+              prev = next;
+            }
+            mesh.geometry.attributes.position.needsUpdate = true;
+            const density = Math.max(1, Math.min(active ? 8 : 2, Math.floor((budget - 90) / Math.max(1, needed))));
+            for (let p = 0; p < density; p++) {
+              const phase = (time * (waiting ? .12 : active ? .22 : .035) + p / density + j * .137 + index * .173) % 1;
+              const xy = sample(e, e.returning ? 1 - phase : phase, j, time);
+              particle(...xy, p % 5 ? 8 : 13, active ? 1.65 : .5, waiting ? 1 : .15);
+            }
+          }
+          // Large soft dock flashes, with a hot white nucleus at the card border.
+          for (const xy of [e.a, e.b]) {
+            particle(...xy, active ? 54 : 25, power * .9, waiting ? 1 : 0);
+            particle(...xy, active ? 20 + Math.sin(time * 3 + index) * 3 : 9, power * 3.8, .5);
+          }
+        });
+        if (visible) {
+          particle(...hub, 380, .22, 0);
+          for (let i = 0; i < 70; i++) {
+            const a = i * 2.399 + time * .025, r = 117 + Math.sin(i * 7 + time * .4) * 4;
+            particle(hub[0] + Math.cos(a) * r, hub[1] + Math.sin(a) * r, i % 7 ? 9 : 18, i % 7 ? .65 : 1.2);
+          }
+        }
+        particleGeometry.instanceCount = count;
+        for (const attribute of Object.values(particleGeometry.attributes)) if (attribute.isInstancedBufferAttribute) attribute.needsUpdate = true;
+        composer.render();
+        // Reduce density on sustained slow frames, not on a single shader compilation.
+        if (performance.now() - start > 28) { if (++slow > 25) { budget = Math.max(350, budget * .8); slow = 0; } } else slow = Math.max(0, slow - 1);
+      },
+      dispose
+    };
+  } catch (error) { composer?.dispose(); renderer?.dispose(); canvas.remove(); throw error; }
+}

package/public/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>agent flow</title><link rel="stylesheet" href="/style.css"><script type="importmap">{"imports":{"three":"/vendor/three/three.module.min.js","three/addons/":"/vendor/three/"}}</script><script src="/app.js" defer></script></head>
+<body>
+<header><div class="heading"><h1>agent flow<span> / </span><span id="title">connecting…</span></h1><small id="subtitle">opencode · orchestration topology</small></div><div class="controls"><div class="view-switch" role="group" aria-label="View mode"><button id="view-all" type="button">all sessions</button><button id="view-session" type="button">session</button></div><input id="session-search" type="search" placeholder="search sessions…" aria-label="Search sessions" hidden><label for="root">session</label><select id="root" aria-label="Root session"></select><button id="motion" type="button" aria-pressed="false">pause motion</button><div class="status"><i></i><span id="connection">connecting</span><span id="counts"></span></div></div></header>
+<section id="session-picker" hidden aria-label="Select session"><h2>// select a session</h2><p>One root. Every agent in its subtree. Live metrics, scoped to your session.</p><div id="session-cards"></div></section>
+<main><section class="scene"><div class="scene-label">// execution graph <span id="graphMeta"></span></div><div class="viewport"><div class="network"><canvas id="wires" aria-label="Agent connections"></canvas><div id="nodes"></div><div class="hub" hidden><svg viewBox="0 0 236 236" aria-hidden="true"><circle cx="118" cy="118" r="114" fill="none" stroke="#c470983f" stroke-dasharray="2 7"/><circle cx="118" cy="118" r="101" fill="none" stroke="#573044" stroke-width="3"/><circle id="contextRing" cx="118" cy="118" r="101" fill="none" stroke="#ff5c9d" stroke-width="3" transform="rotate(-90 118 118)"/></svg><h2 id="lead"></h2><p id="context"></p><b id="model"></b><small id="leadTool"></small></div></div></div><div id="empty" hidden></div><div class="scene-foot"><span id="sceneSummary"></span><span id="transport">white → pink / token transport</span></div></section>
+<section class="dash" aria-label="Metrics"><article class="panel"><h3>// event log</h3><div id="events" class="scroll"></div></article><article class="panel"><h3>// tokens / hour</h3><div id="hourly" class="scroll"></div></article><article class="panel"><h3>// cache hit</h3><div class="gauge"><svg viewBox="0 0 100 100" aria-hidden="true"><circle cx="50" cy="50" r="43" fill="none" stroke="#442032" stroke-width="5"/><circle id="cacheRing" cx="50" cy="50" r="43" fill="none" stroke="#ff6fae" stroke-width="5"/></svg><div class="value"><span id="cacheValue">—</span><small>hit / window</small></div></div></article><article class="panel"><h3>// activity heat</h3><div id="heat" class="scroll"></div><div class="legend">quiet ░▒▓█ active · 12 × 5 min</div></article><article class="panel"><h3>// tokens today</h3><div class="big" id="total">—</div><div class="estimate" id="estimate"></div><div id="today" class="breakdown scroll"></div></article><article class="panel"><h3>// ledger</h3><div id="ledger" class="ledger scroll"></div></article></section></main>
+<footer><span id="health">transport / public HTTP + SSE · read-only</span><span id="clock"></span></footer>
+</body></html>

package/public/style.css

@@ -0,0 +1,6 @@
+:root{--pink:#ff3d8b;--soft:#ff6fae;--muted:#ac8d9d;--line:#4c2537}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:#0d0609;color:#f5e5ec;font:11px 'JetBrains Mono','SFMono-Regular',Consolas,monospace;background-image:linear-gradient(#ff80b005 1px,transparent 1px),linear-gradient(90deg,#ff80b005 1px,transparent 1px);background-size:40px 40px}header{min-height:96px;margin:0 38px;border-bottom:1px solid #472033;display:flex;justify-content:space-between;align-items:center;gap:24px}.heading{min-width:0;flex:1}h1{font-size:17px;font-weight:500;letter-spacing:-.6px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}h1>span:first-child{color:var(--soft)}header small{display:block;margin-top:9px;color:var(--muted);font-size:10px}.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:520px}.controls label{color:var(--muted);font-size:9px}select,button{font:10px monospace;background:#1b0d16;color:#ddbdce;border:1px solid #654152;padding:7px;max-width:230px;cursor:pointer}select:focus-visible,button:focus-visible{outline:2px solid var(--soft);outline-offset:3px}button:hover{background:#392032}.status{color:var(--soft);font-size:10px;width:100%;text-align:right;display:flex;justify-content:flex-end;align-items:center;gap:10px}.status i{display:inline-block;width:5px;height:5px;background:var(--pink);box-shadow:0 0 12px var(--pink);border-radius:50%}.status.offline{color:#bba1cb}.status.offline i{background:#aaa;box-shadow:none}.scene{height:540px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#8c174e22,transparent 60%)}.viewport{position:absolute;inset:0;overflow:hidden}.network{position:absolute;width:1364px;height:540px;left:50%;transform:translateX(-50%);transform-origin:50% 0}canvas{position:absolute;inset:0;width:100%;height:100%}.node{position:absolute;width:200px;background:#160b12f5;border:1px solid #654152;z-index:2;box-shadow:0 8px 30px #0005;transition:opacity .25s,border-color .25s,transform .3s cubic-bezier(.2,0,0,1);animation:enter .3s ease-out}.cap{height:27px;background:#392b34;color:#e1d3db;padding:5px 9px;display:flex;justify-content:space-between;gap:8px;align-items:center;font-weight:600}.cap strong{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag{font-size:8px;font-weight:500;opacity:.8;flex-shrink:0}.rows{padding:8px 9px;line-height:21px;color:#b194a4;font-size:9px}.row{display:flex;gap:10px;justify-content:space-between}.row span:last-child{color:#f5d4e4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:132px}.node.working{border-color:#b63b70}.node.working .cap{background:#ff508f;color:#240d18}.node.waiting{border-color:#f5eaf0;box-shadow:0 0 26px #ff3d8b16}.node.waiting .cap{background:#f5eaf0;color:#25121c}.node.done{opacity:.67}.hub{position:absolute;left:564px;top:152px;width:236px;height:236px;z-index:3;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:50%;background:radial-gradient(circle,#30101f 5%,#180c15 65%,transparent 66%)}.hub svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}#contextRing{filter:drop-shadow(0 0 5px #ff3d8b);transition:stroke-dasharray .35s}.hub h2{font-size:35px;max-width:185px;overflow:hidden;text-overflow:ellipsis;letter-spacing:-2px;margin:0 0 9px;font-weight:800;text-shadow:0 0 32px #ff77ae66}.hub p{font-size:9px;color:#d3a9bb;margin:0}.hub b{font-weight:400;font-size:9px;color:var(--soft);margin-top:15px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub small{font-size:8px;color:var(--muted);margin-top:10px;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scene-label{position:absolute;left:38px;top:20px;color:#af8a9d;font-size:9px;letter-spacing:1px;z-index:4}.scene-foot{position:absolute;bottom:16px;left:38px;right:38px;display:flex;gap:20px;justify-content:space-between;color:#ba8fa2;font-size:9px;z-index:4}.dash{display:grid;grid-template-columns:1.35fr 1fr .86fr 1fr 1.05fr 1fr;gap:10px;margin:0 28px 25px}.panel{height:221px;min-width:0;border:1px solid #492335;background:#160b11d9;padding:16px 13px;overflow:hidden}.panel h3{color:#c09aab;font-size:10px;font-weight:400;margin:0 0 20px}.scroll{overflow:auto;max-height:158px;scrollbar-width:thin;scrollbar-color:#65314b transparent}.event{font-size:9px;margin-bottom:11px;white-space:nowrap;color:#c3a7b7;overflow:hidden;text-overflow:ellipsis}.event em{font-style:normal;color:var(--soft);display:inline-block;width:42px}.event time{font-size:8px;color:var(--muted);margin-right:7px}.bars{display:flex;align-items:center;margin-bottom:6px;gap:7px;color:#bd94a8;font-size:8px}.bars time{min-width:14px}.bars .track{flex:1}.bars i{display:block;height:5px;background:linear-gradient(90deg,#782549,#ff6ba7);box-shadow:0 0 10px #ff3d8b22;min-width:1px}.bars b{font-weight:400;width:37px;text-align:right}.gauge{width:111px;height:111px;margin:0 auto;position:relative}.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}.gauge .value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:25px}.gauge small{font-size:8px;color:#b28b9d;margin-top:4px}.heat-row{display:grid;grid-template-columns:43px repeat(12,1fr);gap:3px;margin-bottom:5px;align-items:center}.heat-row span{font-size:7px;overflow:hidden;text-overflow:ellipsis;color:#bc98ab}.heat-row i{height:10px;background:#ff3d8b}.legend{color:#b38ca0;font-size:8px;margin-top:12px}#heat{max-height:128px}.big{font-size:30px;color:#ffe7f1;letter-spacing:-2px;margin-top:-4px}.estimate{color:var(--soft);font-size:10px;margin:7px 0}.breakdown{font-size:8px;color:#c09aae;line-height:19px;max-height:90px}.breakdown div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ledger{font-size:9px;color:#c4a3b5;line-height:25px;white-space:nowrap}.ledger b{font-weight:400;color:#ff6fae}.ledger .idle,.ledger .done{color:#bba1cb}.ledger .waiting{color:#fff}footer{margin:0 38px 22px;color:#a07c8f;display:flex;gap:20px;justify-content:space-between;font-size:9px}#empty{position:absolute;inset:0;display:grid;place-items:center;color:#c19aaf;font-size:13px}.muted{color:var(--muted);font-size:10px}.approval .cap{background:#f5eaf0;color:#25121c}@keyframes enter{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@media(max-width:1100px){.dash{grid-template-columns:repeat(3,1fr)}header{margin:0 24px}.scene-label{left:24px}}@media(max-width:650px){header{padding:18px 0;align-items:flex-start;flex-direction:column;gap:16px}.controls{justify-content:flex-start;max-width:100%}.status{justify-content:flex-start;text-align:left}h1{font-size:14px;max-width:calc(100vw - 48px)}select{max-width:190px}.scene{height:460px}.viewport{overflow-x:auto}.network{left:0;transform:none}.dash{grid-template-columns:1fr;margin:0 18px 20px}.panel{height:215px}.scene-foot{left:24px;right:24px;flex-direction:column;gap:6px}footer{margin:0 24px 20px;flex-direction:column}.scene-label{font-size:8px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
+@media(min-width:651px){header{min-height:76px}}
+.bars{height:8px;line-height:8px;margin-bottom:5px}
+.view-switch{display:flex;flex-shrink:0}.view-switch button{border-radius:0}.view-switch button+button{border-left:0}.view-switch button[aria-pressed=true]{color:#fff;background:#64243f;border-color:#d36b99}#session-search{font:10px monospace;width:145px;min-width:0;padding:7px;color:#f5e5ec;background:#1b0d16;border:1px solid #654152}#session-search:focus-visible{outline:2px solid var(--soft);outline-offset:3px}.controls{max-width:690px}body[data-view=session] header{min-height:102px}#session-picker{padding:35px 38px;min-height:70vh}#session-picker h2{font-size:15px;font-weight:500;color:var(--soft)}#session-picker>p{color:#c9abbc;line-height:1.6}#session-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:16px;margin-top:24px}.session-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:13px;max-width:none;width:100%;padding:20px;background:#160b12;line-height:1.5}.session-card strong{font-size:12px;font-weight:500;overflow-wrap:anywhere}.session-card span{color:#c9abbc;overflow-wrap:anywhere}.session-card .working{color:#ff85b9}@media(max-width:900px){header{flex-wrap:wrap;padding:16px 0;gap:14px}.controls{max-width:100%;justify-content:flex-start}.status{justify-content:flex-start;text-align:left}#session-picker{padding:24px}}
+#group-sessions:popover-open{max-height:min(320px,calc(100vh - 24px))}
+.node[role=button]{cursor:pointer}.node[role=button]:focus-visible{outline:2px solid var(--soft);outline-offset:4px}.cap strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cap strong small{font-size:10px;white-space:nowrap}.cap .tag{flex-shrink:0}#group-sessions{position:fixed;inset:auto;margin:0;width:min(410px,calc(100vw - 24px));max-height:min(420px,calc(100vh - 24px));padding:14px;border:1px solid #ac567c;background:#1b0d16;color:#f5e5ec;box-shadow:0 14px 60px #000c;font:11px monospace;overflow:auto}#group-sessions::backdrop{background:transparent}.popover-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.popover-heading button{padding:4px 10px}.session-item{padding:12px 0;border-top:1px solid var(--line)}.session-item>strong{display:block;overflow-wrap:anywhere;font-weight:500;line-height:1.5}.session-item>div{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px;color:#c9abbc}.session-item .working{color:#ff85b9}.session-item .waiting{color:white}.session-item .done,.session-item .idle{color:#c9abbc}

package/public/vendor/three/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright © 2010-2025 three.js authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/public/vendor/three/postprocessing/EffectComposer.js

@@ -0,0 +1,363 @@
+import {
+	Clock,
+	HalfFloatType,
+	NoBlending,
+	Vector2,
+	WebGLRenderTarget
+} from 'three';
+import { CopyShader } from '../shaders/CopyShader.js';
+import { ShaderPass } from './ShaderPass.js';
+import { ClearMaskPass, MaskPass } from './MaskPass.js';
+
+/**
+ * Used to implement post-processing effects in three.js.
+ * The class manages a chain of post-processing passes to produce the final visual result.
+ * Post-processing passes are executed in order of their addition/insertion.
+ * The last pass is automatically rendered to screen.
+ *
+ * This module can only be used with {@link WebGLRenderer}.
+ *
+ * ```js
+ * const composer = new EffectComposer( renderer );
+ *
+ * // adding some passes
+ * const renderPass = new RenderPass( scene, camera );
+ * composer.addPass( renderPass );
+ *
+ * const glitchPass = new GlitchPass();
+ * composer.addPass( glitchPass );
+ *
+ * const outputPass = new OutputPass()
+ * composer.addPass( outputPass );
+ *
+ * function animate() {
+ *
+ * 	composer.render(); // instead of renderer.render()
+ *
+ * }
+ * ```
+ *
+ * @three_import import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+ */
+class EffectComposer {
+
+	/**
+	 * Constructs a new effect composer.
+	 *
+	 * @param {WebGLRenderer} renderer - The renderer.
+	 * @param {WebGLRenderTarget} [renderTarget] - This render target and a clone will
+	 * be used as the internal read and write buffers. If not given, the composer creates
+	 * the buffers automatically.
+	 */
+	constructor( renderer, renderTarget ) {
+
+		/**
+		 * The renderer.
+		 *
+		 * @type {WebGLRenderer}
+		 */
+		this.renderer = renderer;
+
+		this._pixelRatio = renderer.getPixelRatio();
+
+		if ( renderTarget === undefined ) {
+
+			const size = renderer.getSize( new Vector2() );
+			this._width = size.width;
+			this._height = size.height;
+
+			renderTarget = new WebGLRenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio, { type: HalfFloatType } );
+			renderTarget.texture.name = 'EffectComposer.rt1';
+
+		} else {
+
+			this._width = renderTarget.width;
+			this._height = renderTarget.height;
+
+		}
+
+		this.renderTarget1 = renderTarget;
+		this.renderTarget2 = renderTarget.clone();
+		this.renderTarget2.texture.name = 'EffectComposer.rt2';
+
+		/**
+		 * A reference to the internal write buffer. Passes usually write
+		 * their result into this buffer.
+		 *
+		 * @type {WebGLRenderTarget}
+		 */
+		this.writeBuffer = this.renderTarget1;
+
+		/**
+		 * A reference to the internal read buffer. Passes usually read
+		 * the previous render result from this buffer.
+		 *
+		 * @type {WebGLRenderTarget}
+		 */
+		this.readBuffer = this.renderTarget2;
+
+		/**
+		 * Whether the final pass is rendered to the screen (default framebuffer) or not.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
+		this.renderToScreen = true;
+
+		/**
+		 * An array representing the (ordered) chain of post-processing passes.
+		 *
+		 * @type {Array<Pass>}
+		 */
+		this.passes = [];
+
+		/**
+		 * A copy pass used for internal swap operations.
+		 *
+		 * @private
+		 * @type {ShaderPass}
+		 */
+		this.copyPass = new ShaderPass( CopyShader );
+		this.copyPass.material.blending = NoBlending;
+
+		/**
+		 * The internal clock for managing time data.
+		 *
+		 * @private
+		 * @type {Clock}
+		 */
+		this.clock = new Clock();
+
+	}
+
+	/**
+	 * Swaps the internal read/write buffers.
+	 */
+	swapBuffers() {
+
+		const tmp = this.readBuffer;
+		this.readBuffer = this.writeBuffer;
+		this.writeBuffer = tmp;
+
+	}
+
+	/**
+	 * Adds the given pass to the pass chain.
+	 *
+	 * @param {Pass} pass - The pass to add.
+	 */
+	addPass( pass ) {
+
+		this.passes.push( pass );
+		pass.setSize( this._width * this._pixelRatio, this._height * this._pixelRatio );
+
+	}
+
+	/**
+	 * Inserts the given pass at a given index.
+	 *
+	 * @param {Pass} pass - The pass to insert.
+	 * @param {number} index - The index into the pass chain.
+	 */
+	insertPass( pass, index ) {
+
+		this.passes.splice( index, 0, pass );
+		pass.setSize( this._width * this._pixelRatio, this._height * this._pixelRatio );
+
+	}
+
+	/**
+	 * Removes the given pass from the pass chain.
+	 *
+	 * @param {Pass} pass - The pass to remove.
+	 */
+	removePass( pass ) {
+
+		const index = this.passes.indexOf( pass );
+
+		if ( index !== - 1 ) {
+
+			this.passes.splice( index, 1 );
+
+		}
+
+	}
+
+	/**
+	 * Returns `true` if the pass for the given index is the last enabled pass in the pass chain.
+	 *
+	 * @param {number} passIndex - The pass index.
+	 * @return {boolean} Whether the pass for the given index is the last pass in the pass chain.
+	 */
+	isLastEnabledPass( passIndex ) {
+
+		for ( let i = passIndex + 1; i < this.passes.length; i ++ ) {
+
+			if ( this.passes[ i ].enabled ) {
+
+				return false;
+
+			}
+
+		}
+
+		return true;
+
+	}
+
+	/**
+	 * Executes all enabled post-processing passes in order to produce the final frame.
+	 *
+	 * @param {number} deltaTime - The delta time in seconds. If not given, the composer computes
+	 * its own time delta value.
+	 */
+	render( deltaTime ) {
+
+		// deltaTime value is in seconds
+
+		if ( deltaTime === undefined ) {
+
+			deltaTime = this.clock.getDelta();
+
+		}
+
+		const currentRenderTarget = this.renderer.getRenderTarget();
+
+		let maskActive = false;
+
+		for ( let i = 0, il = this.passes.length; i < il; i ++ ) {
+
+			const pass = this.passes[ i ];
+
+			if ( pass.enabled === false ) continue;
+
+			pass.renderToScreen = ( this.renderToScreen && this.isLastEnabledPass( i ) );
+			pass.render( this.renderer, this.writeBuffer, this.readBuffer, deltaTime, maskActive );
+
+			if ( pass.needsSwap ) {
+
+				if ( maskActive ) {
+
+					const context = this.renderer.getContext();
+					const stencil = this.renderer.state.buffers.stencil;
+
+					//context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
+					stencil.setFunc( context.NOTEQUAL, 1, 0xffffffff );
+
+					this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, deltaTime );
+
+					//context.stencilFunc( context.EQUAL, 1, 0xffffffff );
+					stencil.setFunc( context.EQUAL, 1, 0xffffffff );
+
+				}
+
+				this.swapBuffers();
+
+			}
+
+			if ( MaskPass !== undefined ) {
+
+				if ( pass instanceof MaskPass ) {
+
+					maskActive = true;
+
+				} else if ( pass instanceof ClearMaskPass ) {
+
+					maskActive = false;
+
+				}
+
+			}
+
+		}
+
+		this.renderer.setRenderTarget( currentRenderTarget );
+
+	}
+
+	/**
+	 * Resets the internal state of the EffectComposer.
+	 *
+	 * @param {WebGLRenderTarget} [renderTarget] - This render target has the same purpose like
+	 * the one from the constructor. If set, it is used to setup the read and write buffers.
+	 */
+	reset( renderTarget ) {
+
+		if ( renderTarget === undefined ) {
+
+			const size = this.renderer.getSize( new Vector2() );
+			this._pixelRatio = this.renderer.getPixelRatio();
+			this._width = size.width;
+			this._height = size.height;
+
+			renderTarget = this.renderTarget1.clone();
+			renderTarget.setSize( this._width * this._pixelRatio, this._height * this._pixelRatio );
+
+		}
+
+		this.renderTarget1.dispose();
+		this.renderTarget2.dispose();
+		this.renderTarget1 = renderTarget;
+		this.renderTarget2 = renderTarget.clone();
+
+		this.writeBuffer = this.renderTarget1;
+		this.readBuffer = this.renderTarget2;
+
+	}
+
+	/**
+	 * Resizes the internal read and write buffers as well as all passes. Similar to {@link WebGLRenderer#setSize},
+	 * this method honors the current pixel ration.
+	 *
+	 * @param {number} width - The width in logical pixels.
+	 * @param {number} height - The height in logical pixels.
+	 */
+	setSize( width, height ) {
+
+		this._width = width;
+		this._height = height;
+
+		const effectiveWidth = this._width * this._pixelRatio;
+		const effectiveHeight = this._height * this._pixelRatio;
+
+		this.renderTarget1.setSize( effectiveWidth, effectiveHeight );
+		this.renderTarget2.setSize( effectiveWidth, effectiveHeight );
+
+		for ( let i = 0; i < this.passes.length; i ++ ) {
+
+			this.passes[ i ].setSize( effectiveWidth, effectiveHeight );
+
+		}
+
+	}
+
+	/**
+	 * Sets device pixel ratio. This is usually used for HiDPI device to prevent blurring output.
+	 * Setting the pixel ratio will automatically resize the composer.
+	 *
+	 * @param {number} pixelRatio - The pixel ratio to set.
+	 */
+	setPixelRatio( pixelRatio ) {
+
+		this._pixelRatio = pixelRatio;
+
+		this.setSize( this._width, this._height );
+
+	}
+
+	/**
+	 * Frees the GPU-related resources allocated by this instance. Call this
+	 * method whenever the composer is no longer used in your app.
+	 */
+	dispose() {
+
+		this.renderTarget1.dispose();
+		this.renderTarget2.dispose();
+
+		this.copyPass.dispose();
+
+	}
+
+}
+
+export { EffectComposer };