@jlongo78/agent-spaces 0.7.7 → 0.8.0

package/.next/standalone/src/app/vr/vr-controls.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+import { useFrame, useThree } from '@react-three/fiber';
+import { PointerLockControls } from '@react-three/drei';
+import * as THREE from 'three';
+import { useVR } from './vr-app';
+
+export function VRControls() {
+  return (
+    <>
+      <VRLocomotion />
+      <DesktopControls />
+    </>
+  );
+}
+
+function VRLocomotion() {
+  const { camera } = useThree();
+  const { playerYRef } = useVR();
+  const moveSpeed = 3;
+
+  useFrame((state, delta) => {
+    const xrManager = state.gl.xr;
+    if (!xrManager.isPresenting) return;
+
+    const session = xrManager.getSession();
+    const inputSources = session?.inputSources;
+    if (!inputSources) return;
+
+    for (const source of inputSources) {
+      const gp = source.gamepad;
+      if (!gp) continue;
+
+      // Left controller: thumbstick for horizontal movement
+      if (source.handedness === 'left' && gp.axes.length >= 4) {
+        const moveX = gp.axes[2];
+        const moveY = gp.axes[3];
+
+        if (Math.abs(moveX) > 0.1 || Math.abs(moveY) > 0.1) {
+          // Normal horizontal movement
+          const forward = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion);
+          forward.y = 0;
+          forward.normalize();
+          const right = new THREE.Vector3(1, 0, 0).applyQuaternion(camera.quaternion);
+          right.y = 0;
+          right.normalize();
+
+          const move = new THREE.Vector3()
+            .addScaledVector(forward, -moveY * moveSpeed * delta)
+            .addScaledVector(right, moveX * moveSpeed * delta);
+
+          const refSpace = xrManager.getReferenceSpace();
+          if (refSpace) {
+            const offset = new XRRigidTransform({ x: -move.x, y: 0, z: -move.z, w: 1 });
+            xrManager.setReferenceSpace(refSpace.getOffsetReferenceSpace(offset));
+          }
+        }
+      }
+
+      // Right controller: smooth turn X, fly up/down Y
+      if (source.handedness === 'right' && gp.axes.length >= 4) {
+        const turnX = gp.axes[2];
+        const flyY = gp.axes[3];
+        const turnSpeed = 2; // radians per second
+
+        // Smooth turn — right thumbstick X
+        if (Math.abs(turnX) > 0.1) {
+          const refSpace = xrManager.getReferenceSpace();
+          if (refSpace) {
+            const angle = turnX * turnSpeed * delta;
+            const rot = new XRRigidTransform(
+              { x: 0, y: 0, z: 0, w: 1 },
+              DOMPointReadOnly.fromPoint({
+                x: 0,
+                y: Math.sin(angle / 2),
+                z: 0,
+                w: Math.cos(angle / 2),
+              }),
+            );
+            xrManager.setReferenceSpace(refSpace.getOffsetReferenceSpace(rot));
+          }
+        }
+
+        // Fly up/down — right thumbstick Y
+        if (Math.abs(flyY) > 0.1) {
+          playerYRef.current += flyY * moveSpeed * delta;
+        }
+      }
+    }
+  });
+
+  return null;
+}
+
+function DesktopControls() {
+  const { camera, gl } = useThree();
+  const keys = useRef<Set<string>>(new Set());
+  const speed = 5;
+
+  useFrame((state, delta) => {
+    if (state.gl.xr.isPresenting) return;
+
+    let moveX = 0, moveZ = 0, moveY = 0;
+    if (keys.current.has('w') || keys.current.has('arrowup')) moveZ -= 1;
+    if (keys.current.has('s') || keys.current.has('arrowdown')) moveZ += 1;
+    if (keys.current.has('a') || keys.current.has('arrowleft')) moveX -= 1;
+    if (keys.current.has('d') || keys.current.has('arrowright')) moveX += 1;
+    if (keys.current.has('e') || keys.current.has(' ')) moveY += 1;
+    if (keys.current.has('q') || keys.current.has('shift')) moveY -= 1;
+
+    if (moveY !== 0) camera.position.y += moveY * speed * delta;
+
+    if (moveX !== 0 || moveZ !== 0) {
+      const forward = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion);
+      forward.y = 0;
+      forward.normalize();
+      const right = new THREE.Vector3(1, 0, 0).applyQuaternion(camera.quaternion);
+      right.y = 0;
+      right.normalize();
+
+      camera.position.addScaledVector(forward, moveZ * -speed * delta);
+      camera.position.addScaledVector(right, moveX * speed * delta);
+    }
+  });
+
+  useEffect(() => {
+    const onDown = (e: KeyboardEvent) => keys.current.add(e.key.toLowerCase());
+    const onUp = (e: KeyboardEvent) => keys.current.delete(e.key.toLowerCase());
+    window.addEventListener('keydown', onDown);
+    window.addEventListener('keyup', onUp);
+    return () => {
+      window.removeEventListener('keydown', onDown);
+      window.removeEventListener('keyup', onUp);
+    };
+  }, []);
+
+  return <PointerLockControls />;
+}

package/.next/standalone/src/app/vr/vr-door.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useRef, useState, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { Text } from '@react-three/drei';
+import * as THREE from 'three';
+
+interface VRDoorProps {
+  name: string;
+  paneCount: number;
+  color: string;
+  position: [number, number, number];
+  rotation: [number, number, number];
+  onSelect: () => void;
+}
+
+export function VRDoor({ name, paneCount, color, position, rotation, onSelect }: VRDoorProps) {
+  const groupRef = useRef<THREE.Group>(null!);
+  const [hovered, setHovered] = useState(false);
+  const gazeTimer = useRef(0);
+  const wsColor = useMemo(() => new THREE.Color(color || '#6366f1'), [color]);
+  const darkColor = useMemo(() => wsColor.clone().multiplyScalar(0.3), [wsColor]);
+
+  // Gaze-to-enter: 1.5s hold while hovered
+  useFrame((_, delta) => {
+    if (hovered) {
+      gazeTimer.current += delta;
+      if (gazeTimer.current >= 1.5) {
+        gazeTimer.current = 0;
+        onSelect();
+      }
+    } else {
+      gazeTimer.current = 0;
+    }
+  });
+
+  return (
+    <group ref={groupRef} position={position} rotation={rotation}>
+      {/* Door frame */}
+      <mesh onClick={onSelect} onPointerEnter={() => setHovered(true)} onPointerLeave={() => setHovered(false)}>
+        <planeGeometry args={[1.2, 2.4]} />
+        <meshStandardMaterial color="#1a1a1e" roughness={0.5} emissive={wsColor} emissiveIntensity={hovered ? 0.15 : 0.05} />
+      </mesh>
+
+      {/* Portal glow */}
+      <mesh position={[0, 0, 0.01]}>
+        <planeGeometry args={[0.95, 2.0]} />
+        <meshStandardMaterial color={darkColor} emissive={wsColor} emissiveIntensity={hovered ? 0.25 : 0.1} toneMapped={false} />
+      </mesh>
+
+      {/* Accent strips */}
+      <AccentStrip position={[0, 1.1, 0.02]} scale={[1.1, 0.015, 1]} color={wsColor} intensity={0.5} />
+      <AccentStrip position={[0, -1.1, 0.02]} scale={[1.1, 0.015, 1]} color={wsColor} intensity={0.5} />
+      <AccentStrip position={[-0.55, 0, 0.02]} scale={[0.015, 2.2, 1]} color={wsColor} intensity={0.3} />
+      <AccentStrip position={[0.55, 0, 0.02]} scale={[0.015, 2.2, 1]} color={wsColor} intensity={0.3} />
+
+      {/* Workspace name */}
+      <Text position={[0, 1.5, 0.02]} fontSize={0.18} color="white" anchorX="center" anchorY="middle" maxWidth={2}>
+        {name}
+      </Text>
+
+      {/* Pane count */}
+      <Text position={[0, -1.35, 0.02]} fontSize={0.12} color={color || '#6366f1'} anchorX="center" anchorY="middle">
+        {paneCount} pane{paneCount !== 1 ? 's' : ''}
+      </Text>
+    </group>
+  );
+}
+
+function AccentStrip({ position, scale, color, intensity }: {
+  position: [number, number, number];
+  scale: [number, number, number];
+  color: THREE.Color;
+  intensity: number;
+}) {
+  return (
+    <mesh position={position} scale={scale}>
+      <planeGeometry args={[1, 1]} />
+      <meshStandardMaterial color={color} emissive={color} emissiveIntensity={intensity} toneMapped={false} />
+    </mesh>
+  );
+}

package/.next/standalone/src/app/vr/vr-environment.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { useMemo } from 'react';
+import * as THREE from 'three';
+
+interface VREnvironmentProps {
+  variant: 'lobby' | 'room';
+  accentColor?: string;
+}
+
+export function VREnvironment({ variant, accentColor = '#6366f1' }: VREnvironmentProps) {
+  const color = useMemo(() => new THREE.Color(accentColor), [accentColor]);
+
+  return (
+    <group>
+      <ambientLight intensity={0.04} color="#0a0a1a" />
+      <pointLight position={[0, 4.5, 0]} intensity={0.6} distance={15} color="#c8b0ff" />
+
+      {/* Floor */}
+      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.05, 0]}>
+        <cylinderGeometry args={[6, 6, 0.1, 32]} />
+        <meshStandardMaterial color="#0d0d0f" roughness={0.2} />
+      </mesh>
+
+      {/* Center platform */}
+      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.01, 0]}>
+        <cylinderGeometry args={[1, 1, 0.02, 32]} />
+        <meshStandardMaterial color="#141418" roughness={0.1} />
+      </mesh>
+
+      {/* Ceiling */}
+      <mesh position={[0, 5, 0]}>
+        <cylinderGeometry args={[6, 6, 0.1, 32]} />
+        <meshStandardMaterial color="#050508" roughness={0.9} />
+      </mesh>
+
+      {/* Glow rings */}
+      <GlowRing radius={1.02} y={0.03} color={color} intensity={0.15} />
+      <GlowRing radius={variant === 'lobby' ? 4.1 : 6.1} y={0.02} color={color} intensity={0.08} />
+
+      {/* Fog */}
+      <fog attach="fog" args={['#04040a', 5, 30]} />
+    </group>
+  );
+}
+
+function GlowRing({ radius, y, color, intensity }: {
+  radius: number; y: number; color: THREE.Color; intensity: number;
+}) {
+  const tubeGeo = useMemo(() => {
+    const segments = 64;
+    const points: THREE.Vector3[] = [];
+    for (let i = 0; i <= segments; i++) {
+      const angle = (i / segments) * Math.PI * 2;
+      points.push(new THREE.Vector3(Math.cos(angle) * radius, y, Math.sin(angle) * radius));
+    }
+    const curve = new THREE.CatmullRomCurve3(points, true);
+    return new THREE.TubeGeometry(curve, segments, 0.015, 8, true);
+  }, [radius, y]);
+
+  return (
+    <mesh geometry={tubeGeo}>
+      <meshStandardMaterial
+        color={color}
+        emissive={color}
+        emissiveIntensity={intensity}
+        toneMapped={false}
+      />
+    </mesh>
+  );
+}

package/.next/standalone/src/app/vr/vr-gaze.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { useRef } from 'react';
+import { useFrame, useThree } from '@react-three/fiber';
+import * as THREE from 'three';
+
+/**
+ * Head-gaze raycaster for VR.
+ * Casts a ray from camera center. Objects with `userData.onGaze` get called
+ * after gazing for `dwellTime` seconds. Objects with `userData.onGazeEnter`
+ * and `userData.onGazeLeave` get hover callbacks.
+ *
+ * Also dispatches standard R3F pointer events (onClick, onPointerEnter, etc.)
+ * by simulating them on the intersected mesh.
+ */
+export function VRGaze({ dwellTime = 1.5 }: { dwellTime?: number }) {
+  const { camera, scene } = useThree();
+  const raycaster = useRef(new THREE.Raycaster());
+  const gazeTarget = useRef<THREE.Object3D | null>(null);
+  const gazeTimer = useRef(0);
+  const center = useRef(new THREE.Vector2(0, 0));
+
+  useFrame((state, delta) => {
+    // Only active in XR mode
+    if (!state.gl.xr.isPresenting) return;
+
+    // Cast ray from camera center (head gaze direction)
+    raycaster.current.setFromCamera(center.current, camera);
+    const intersects = raycaster.current.intersectObjects(scene.children, true);
+
+    // Find first interactive object (one with onClick or userData.onGaze)
+    let hitObject: THREE.Object3D | null = null;
+    for (const intersect of intersects) {
+      let obj: THREE.Object3D | null = intersect.object;
+      while (obj) {
+        if ((obj as any).__r3f?.handlers?.onClick || obj.userData.onGaze) {
+          hitObject = obj;
+          break;
+        }
+        obj = obj.parent;
+      }
+      if (hitObject) break;
+    }
+
+    if (hitObject === gazeTarget.current) {
+      if (hitObject) {
+        gazeTimer.current += delta;
+        if (gazeTimer.current >= dwellTime) {
+          // Trigger click
+          const handlers = (hitObject as any).__r3f?.handlers;
+          if (handlers?.onClick) {
+            handlers.onClick({ stopPropagation: () => {} });
+          }
+          if (hitObject.userData.onGaze) {
+            hitObject.userData.onGaze();
+          }
+          gazeTimer.current = 0;
+          gazeTarget.current = null; // reset to prevent rapid re-fire
+        }
+      }
+    } else {
+      // Gaze moved to new target
+      if (gazeTarget.current) {
+        const oldHandlers = (gazeTarget.current as any).__r3f?.handlers;
+        if (oldHandlers?.onPointerLeave) {
+          oldHandlers.onPointerLeave({ stopPropagation: () => {} });
+        }
+      }
+      gazeTarget.current = hitObject;
+      gazeTimer.current = 0;
+      if (hitObject) {
+        const newHandlers = (hitObject as any).__r3f?.handlers;
+        if (newHandlers?.onPointerEnter) {
+          newHandlers.onPointerEnter({ stopPropagation: () => {} });
+        }
+      }
+    }
+  });
+
+  // Visual gaze reticle — small dot at center of view
+  return (
+    <group>
+      <mesh position={[0, 0, -2]} renderOrder={999}>
+        <circleGeometry args={[0.005, 16]} />
+        <meshBasicMaterial color="#ffffff" opacity={0.5} transparent depthTest={false} />
+      </mesh>
+    </group>
+  );
+}

package/.next/standalone/src/app/vr/vr-layout.ts

@@ -0,0 +1,49 @@
+export interface Vec3 {
+  x: number;
+  y: number;
+  z: number;
+}
+
+interface LayoutOptions {
+  radius?: number;
+  eyeHeight?: number;
+}
+
+/**
+ * Compute pane positions in a semicircle IN FRONT of the camera.
+ * Three.js camera looks down -Z, so panes go at negative Z.
+ */
+export function computePanePositions(
+  paneCount: number,
+  options: LayoutOptions = {}
+): Vec3[] {
+  const { radius = 6, eyeHeight = 1.6 } = options;
+
+  if (paneCount <= 0) return [];
+
+  if (paneCount === 1) {
+    return [{ x: 0, y: eyeHeight, z: -radius }];
+  }
+
+  const totalArcDeg =
+    paneCount <= 2 ? 70 :
+    paneCount <= 4 ? 140 :
+    paneCount <= 6 ? 180 : 220;
+
+  // Center the arc at 270° (facing -Z)
+  const startAngle = 270 - totalArcDeg / 2;
+  const step = totalArcDeg / (paneCount - 1);
+
+  const positions: Vec3[] = [];
+  for (let i = 0; i < paneCount; i++) {
+    const angleDeg = startAngle + step * i;
+    const angleRad = (angleDeg * Math.PI) / 180;
+    positions.push({
+      x: Math.cos(angleRad) * radius,
+      y: eyeHeight,
+      z: Math.sin(angleRad) * radius,
+    });
+  }
+
+  return positions;
+}

package/.next/standalone/src/app/vr/vr-lobby.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { Text } from '@react-three/drei';
+import { useVR } from './vr-app';
+import { VRDoor } from './vr-door';
+import { VREnvironment } from './vr-environment';
+import type { WorkspaceData } from './vr-app';
+
+export function VRLobby() {
+  const { enterWorkspace } = useVR();
+  const [workspaces, setWorkspaces] = useState<WorkspaceData[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchWorkspaces = useCallback(() => {
+    setLoading(true);
+    setError(null);
+    fetch('/api/workspaces')
+      .then(r => r.json())
+      .then(data => {
+        if (Array.isArray(data)) {
+          setWorkspaces(data);
+        } else {
+          setError('Unexpected response');
+        }
+        setLoading(false);
+      })
+      .catch(err => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, []);
+
+  useEffect(() => { fetchWorkspaces(); }, [fetchWorkspaces]);
+
+  const doorRadius = 4;
+
+  return (
+    <group>
+      <VREnvironment variant="lobby" />
+
+      {/* Title */}
+      <Text position={[0, 3, 0]} fontSize={0.8} color="#9985e0" anchorX="center" anchorY="middle">
+        SPACES
+      </Text>
+
+      {/* Status text */}
+      {loading && (
+        <Text position={[0, 1.6, 3]} fontSize={0.15} color="#888" anchorX="center">
+          Loading workspaces...
+        </Text>
+      )}
+
+      {error && (
+        <group position={[0, 1.6, 3]}>
+          <Text position={[0, 0.15, 0]} fontSize={0.15} color="#f66" anchorX="center">
+            {error}
+          </Text>
+          <mesh position={[0, -0.15, 0]} onClick={fetchWorkspaces}>
+            <planeGeometry args={[0.8, 0.2]} />
+            <meshStandardMaterial color="#1a1a2e" emissive="#6366f1" emissiveIntensity={0.15} />
+          </mesh>
+          <Text position={[0, -0.15, 0.01]} fontSize={0.1} color="white" anchorX="center">
+            Retry
+          </Text>
+        </group>
+      )}
+
+      {!loading && !error && workspaces.length === 0 && (
+        <Text position={[0, 1.6, 3]} fontSize={0.15} color="#888" anchorX="center">
+          No workspaces. Create one from the desktop app.
+        </Text>
+      )}
+
+      {/* Workspace doors in circle */}
+      {workspaces.map((ws, i) => {
+        const angle = ((Math.PI * 2) / workspaces.length) * i;
+        const x = Math.sin(angle) * doorRadius;
+        const z = Math.cos(angle) * doorRadius;
+        const rotY = Math.atan2(x, z);
+
+        return (
+          <VRDoor
+            key={ws.id}
+            name={ws.name}
+            paneCount={ws.paneCount}
+            color={ws.color}
+            position={[x, 1.2, z]}
+            rotation={[0, rotY + Math.PI, 0]}
+            onSelect={() => enterWorkspace(ws)}
+          />
+        );
+      })}
+    </group>
+  );
+}