@jlongo78/agent-spaces 0.7.7 → 0.8.0

package/.next/standalone/src/components/workspace/universe-orb.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { useRef, useState, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import type { Workspace } from '@/types/claude';
+
+interface OrbProps {
+  ws: Workspace;
+  position: [number, number, number];
+  remote?: boolean;
+  nodeId?: string;
+  reducedMotion: boolean;
+  searchMatch: boolean;
+  onHover: (ws: Workspace | null) => void;
+  onClick: (ws: Workspace) => void;
+}
+
+export function Orb({
+  ws,
+  position,
+  remote,
+  nodeId,
+  reducedMotion,
+  searchMatch,
+  onHover,
+  onClick,
+}: OrbProps) {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const dotRef = useRef<THREE.Mesh>(null);
+  const [hovered, setHovered] = useState(false);
+  const mountTime = useRef(Date.now());
+
+  // Deterministic phase offset from workspace ID for float animation
+  const phase = useMemo(() => (ws.id * 2.39996) % (Math.PI * 2), [ws.id]);
+
+  // Orb radius: 0.3 + (paneCount * 0.15), clamped [0.3, 1.2]
+  const radius = useMemo(() => {
+    const r = 0.3 + ((ws.paneCount ?? 0) * 0.15);
+    return Math.min(Math.max(r, 0.3), 1.2);
+  }, [ws.paneCount]);
+
+  // Parse workspace color
+  const color = useMemo(() => new THREE.Color(ws.color), [ws.color]);
+
+  // Emissive intensity — brighter for active, dimmer for remote
+  const emissiveIntensity = ws.isActive ? 0.4 : remote ? 0.15 : 0.25;
+
+  // Opacity based on search match
+  const opacity = searchMatch ? 0.75 : 0.1;
+
+  // Float animation + hover scale + entrance animation
+  useFrame((_, delta) => {
+    if (!meshRef.current) return;
+
+    // Entrance animation: scale from 0 over 600ms
+    const age = Date.now() - mountTime.current;
+    const entranceScale = reducedMotion ? 1 : Math.min(age / 600, 1);
+
+    // Float bob
+    const bobY = reducedMotion
+      ? 0
+      : Math.sin(Date.now() * 0.001 + phase) * 0.15;
+    meshRef.current.position.y = position[1] + bobY;
+
+    // Hover scale (spring-like lerp)
+    const targetScale = (hovered ? 1.15 : 1) * entranceScale;
+    const currentScale = meshRef.current.scale.x;
+    const newScale = reducedMotion
+      ? targetScale
+      : THREE.MathUtils.lerp(currentScale, targetScale, delta * 8);
+    meshRef.current.scale.setScalar(newScale);
+
+    // Active dot floats with the orb
+    if (dotRef.current) {
+      dotRef.current.position.y = position[1] + bobY + radius + 0.25;
+    }
+  });
+
+  return (
+    <group>
+      <mesh
+        ref={meshRef}
+        position={position}
+        onPointerOver={(e) => {
+          e.stopPropagation();
+          setHovered(true);
+          onHover(ws);
+          document.body.style.cursor = 'pointer';
+        }}
+        onPointerOut={() => {
+          setHovered(false);
+          onHover(null);
+          document.body.style.cursor = 'auto';
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick(ws);
+        }}
+      >
+        <sphereGeometry args={[radius, 32, 32]} />
+        <meshPhysicalMaterial
+          color={color}
+          emissive={color}
+          emissiveIntensity={emissiveIntensity}
+          transparent
+          opacity={opacity}
+          roughness={0.1}
+          metalness={0.1}
+          clearcoat={1}
+          clearcoatRoughness={0.1}
+          envMapIntensity={0.5}
+        />
+      </mesh>
+
+      {/* Active workspace indicator dot */}
+      {ws.isActive && (
+        <mesh
+          ref={dotRef}
+          position={[position[0] + radius + 0.2, position[1] + radius + 0.25, position[2]]}
+        >
+          <sphereGeometry args={[0.08, 16, 16]} />
+          <meshBasicMaterial color="#818cf8" />
+        </mesh>
+      )}
+    </group>
+  );
+}

package/.next/standalone/src/components/workspace/universe-types.ts

@@ -0,0 +1,22 @@
+import type { Workspace } from '@/types/claude';
+
+export interface RemoteNode {
+  nodeId: string;
+  nodeName: string;
+  workspaces: Workspace[];
+}
+
+export interface RemoteError {
+  nodeId: string;
+  nodeName: string;
+  error: string;
+}
+
+export interface Template {
+  id: string;
+  name: string;
+  description?: string;
+  color: string;
+  paneCount: number;
+  category?: string;
+}

package/.next/standalone/src/components/workspace/universe-utils.ts

@@ -0,0 +1,11 @@
+// Deterministic pseudo-random from seed
+export function seededRandom(seed: number): number {
+  const x = Math.sin(seed * 9301 + 49297) * 49297;
+  return x - Math.floor(x);
+}
+
+export function matchesSearch(name: string, query: string): boolean {
+  const q = query.toLowerCase().trim();
+  if (!q) return true;
+  return name.toLowerCase().includes(q);
+}

package/.next/standalone/src/components/workspace/universe-view.tsx

@@ -0,0 +1,397 @@
+'use client';
+
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { Canvas, useFrame, useThree } from '@react-three/fiber';
+import { OrbitControls, Stars } from '@react-three/drei';
+import { EffectComposer, Bloom } from '@react-three/postprocessing';
+import * as THREE from 'three';
+import { Search, Plus, X, Loader2, AlertCircle } from 'lucide-react';
+import { Cluster } from './universe-cluster';
+import { matchesSearch } from './universe-utils';
+import type { RemoteNode, RemoteError } from './universe-types';
+import type { Workspace } from '@/types/claude';
+
+// ─── Props ─────────────────────────────────────────────────
+
+export interface UniverseViewProps {
+  workspaces: Workspace[];
+  wsLoading: boolean;
+  hasNetwork: boolean;
+  remoteNodes: RemoteNode[];
+  remoteErrors: RemoteError[];
+  remoteLoading: boolean;
+  filterSource: 'all' | 'local' | 'network';
+  onSwitchWorkspace: (wsId: number) => void;
+  onCreateWorkspace: () => void;
+  onOpenRemote: (nodeId: string, wsId: number) => void;
+}
+
+// ─── Camera Rig (fly-to on click) ──────────────────────────
+
+function CameraRig({
+  target,
+  onArrived,
+  reducedMotion,
+}: {
+  target: THREE.Vector3 | null;
+  onArrived: () => void;
+  reducedMotion: boolean;
+}) {
+  const { camera } = useThree();
+  const arriving = useRef(false);
+
+  useFrame((_, delta) => {
+    if (!target) return;
+
+    if (reducedMotion) {
+      camera.position.set(target.x, target.y, target.z + 3);
+      camera.lookAt(target);
+      onArrived();
+      return;
+    }
+
+    const dest = new THREE.Vector3(target.x, target.y, target.z + 3);
+    camera.position.lerp(dest, delta * 2.5);
+    camera.lookAt(
+      THREE.MathUtils.lerp(camera.position.x, target.x, delta * 3),
+      THREE.MathUtils.lerp(camera.position.y, target.y, delta * 3),
+      THREE.MathUtils.lerp(camera.position.z, target.z, delta * 3),
+    );
+
+    if (camera.position.distanceTo(dest) < 0.5 && !arriving.current) {
+      arriving.current = true;
+      setTimeout(onArrived, 200);
+    }
+  });
+
+  return null;
+}
+
+// ─── Main Component ────────────────────────────────────────
+
+export default function UniverseView({
+  workspaces,
+  wsLoading,
+  hasNetwork,
+  remoteNodes,
+  remoteErrors,
+  remoteLoading,
+  filterSource,
+  onSwitchWorkspace,
+  onCreateWorkspace,
+  onOpenRemote,
+}: UniverseViewProps) {
+  const [search, setSearch] = useState('');
+  const [hoveredWs, setHoveredWs] = useState<Workspace | null>(null);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+  const [flyTarget, setFlyTarget] = useState<{
+    position: THREE.Vector3;
+    ws: Workspace;
+    nodeId?: string;
+  } | null>(null);
+  const [fadeOut, setFadeOut] = useState(false);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  // Detect prefers-reduced-motion
+  const [reducedMotion, setReducedMotion] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setReducedMotion(mq.matches);
+    const handler = (e: MediaQueryListEvent) => setReducedMotion(e.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+
+  // Track mouse for tooltip positioning
+  useEffect(() => {
+    const handler = (e: MouseEvent) => setMousePos({ x: e.clientX, y: e.clientY });
+    window.addEventListener('mousemove', handler);
+    return () => window.removeEventListener('mousemove', handler);
+  }, []);
+
+  // Keyboard: / or Ctrl+K to search, Escape to clear
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.ctrlKey && e.key === 'k') || (e.key === '/' && !(e.target instanceof HTMLInputElement))) {
+        e.preventDefault();
+        searchRef.current?.focus();
+      }
+      if (e.key === 'Escape') {
+        setSearch('');
+        searchRef.current?.blur();
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, []);
+
+  // Filter workspaces by source
+  const filteredLocal = useMemo(
+    () => (filterSource === 'network' ? [] : workspaces),
+    [workspaces, filterSource],
+  );
+
+  const filteredRemoteNodes = useMemo(
+    () => (filterSource === 'local' || !hasNetwork ? [] : remoteNodes),
+    [remoteNodes, filterSource, hasNetwork],
+  );
+
+  // Compute remote cluster positions (circle around origin)
+  const remotePositions = useMemo((): Map<string, [number, number, number]> => {
+    const map = new Map<string, [number, number, number]>();
+    if (filteredRemoteNodes.length === 0) return map;
+    if (filteredRemoteNodes.length === 1) {
+      map.set(filteredRemoteNodes[0].nodeId, [15, 0, 0]);
+      return map;
+    }
+    filteredRemoteNodes.forEach((node, i) => {
+      const angle = (i / filteredRemoteNodes.length) * Math.PI * 2 - Math.PI / 2;
+      map.set(node.nodeId, [
+        Math.cos(angle) * 15,
+        0,
+        Math.sin(angle) * 15,
+      ]);
+    });
+    return map;
+  }, [filteredRemoteNodes]);
+
+  // Click handler: start fly-to animation
+  const handleOrbClick = useCallback(
+    (ws: Workspace, nodeId?: string) => {
+      if (flyTarget) return;
+      let pos: THREE.Vector3;
+      if (nodeId) {
+        const cp = remotePositions.get(nodeId) || [0, 0, 0];
+        pos = new THREE.Vector3(cp[0], cp[1], cp[2]);
+      } else {
+        pos = new THREE.Vector3(0, 0, 0);
+      }
+      setFlyTarget({ position: pos, ws, nodeId });
+      setTimeout(() => setFadeOut(true), 600);
+    },
+    [flyTarget, remotePositions],
+  );
+
+  // When camera arrives at target
+  const handleArrived = useCallback(() => {
+    if (!flyTarget) return;
+    const { ws, nodeId } = flyTarget;
+    if (nodeId) {
+      onOpenRemote(nodeId, ws.id);
+    } else {
+      onSwitchWorkspace(ws.id);
+    }
+    setFlyTarget(null);
+    setFadeOut(false);
+  }, [flyTarget, onSwitchWorkspace, onOpenRemote]);
+
+  // Total counts for aria-label
+  const localCount = filteredLocal.length;
+  const networkCount = filteredRemoteNodes.reduce((s, n) => s + n.workspaces.length, 0);
+
+  return (
+    <div className="relative w-full h-full bg-[#07070f]" style={{ minHeight: '100%' }}>
+      {/* R3F Canvas */}
+      <Canvas
+        camera={{ position: [0, 5, 20], fov: 50 }}
+        gl={{ antialias: true, alpha: false }}
+        style={{ background: '#07070f' }}
+        role="img"
+        aria-label={`Workspace universe: ${localCount} local space${localCount !== 1 ? 's' : ''}${
+          networkCount > 0 ? `, ${networkCount} network space${networkCount !== 1 ? 's' : ''}` : ''
+        }`}
+      >
+        <ambientLight intensity={0.15} />
+        <pointLight position={[10, 10, 10]} intensity={0.3} />
+
+        <Stars
+          radius={100}
+          depth={50}
+          count={200}
+          factor={2}
+          saturation={0}
+          fade
+          speed={reducedMotion ? 0 : 0.3}
+        />
+
+        {/* Local cluster */}
+        {!wsLoading && filteredLocal.length > 0 && (
+          <Cluster
+            workspaces={filteredLocal}
+            position={[0, 0, 0]}
+            label="Local"
+            clusterColor="#6366f1"
+            reducedMotion={reducedMotion}
+            searchQuery={search}
+            onHover={setHoveredWs}
+            onClick={(ws) => handleOrbClick(ws)}
+          />
+        )}
+
+        {/* Remote clusters */}
+        {filteredRemoteNodes.map((node) => {
+          const pos = remotePositions.get(node.nodeId) || [15, 0, 0];
+          return (
+            <Cluster
+              key={node.nodeId}
+              workspaces={node.workspaces}
+              position={pos}
+              label={node.nodeName}
+              clusterColor="#10b981"
+              remote
+              nodeId={node.nodeId}
+              reducedMotion={reducedMotion}
+              searchQuery={search}
+              onHover={setHoveredWs}
+              onClick={(ws) => handleOrbClick(ws, node.nodeId)}
+            />
+          );
+        })}
+
+        <OrbitControls
+          enablePan={false}
+          minDistance={5}
+          maxDistance={60}
+          enableDamping
+          dampingFactor={0.05}
+          enabled={!flyTarget}
+        />
+
+        {flyTarget && (
+          <CameraRig
+            target={flyTarget.position}
+            onArrived={handleArrived}
+            reducedMotion={reducedMotion}
+          />
+        )}
+
+        <EffectComposer>
+          <Bloom
+            luminanceThreshold={0.8}
+            luminanceSmoothing={0.9}
+            intensity={0.3}
+            radius={0.5}
+          />
+        </EffectComposer>
+      </Canvas>
+
+      {/* ─── HTML Overlay ──────────────────────────────────── */}
+
+      {/* Fade-out overlay for fly-in transition */}
+      {fadeOut && (
+        <div
+          className="absolute inset-0 bg-[#07070f] z-30 pointer-events-none"
+          style={{ animation: 'universe-fade-in 300ms ease-in forwards' }}
+        />
+      )}
+
+      {/* Search bar */}
+      <div className="absolute top-4 right-4 z-20">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-zinc-500" />
+          <input
+            ref={searchRef}
+            type="text"
+            placeholder="Search spaces..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-56 pl-9 pr-8 py-2 text-xs bg-black/40 backdrop-blur-sm border border-white/[0.08] rounded-lg focus:outline-none focus:border-white/20 text-white placeholder:text-zinc-600"
+          />
+          {search && (
+            <button
+              onClick={() => setSearch('')}
+              className="absolute right-2.5 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-white"
+            >
+              <X className="w-3 h-3" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Control hints */}
+      <div className="absolute bottom-4 left-4 z-20 flex items-center gap-3 text-[10px] text-zinc-600 select-none">
+        <span>scroll to zoom</span>
+        <span className="text-zinc-800">&middot;</span>
+        <span>drag to orbit</span>
+        <span className="text-zinc-800">&middot;</span>
+        <span>click orb to enter</span>
+      </div>
+
+      {/* New Space button */}
+      <div className="absolute bottom-4 right-4 z-20">
+        <button
+          onClick={onCreateWorkspace}
+          className="flex items-center gap-1.5 px-3 py-1.5 text-[10px] text-zinc-500 border border-white/[0.08] rounded-lg bg-black/30 backdrop-blur-sm hover:text-white hover:border-white/[0.15] transition-colors"
+        >
+          <Plus className="w-3 h-3" />
+          New Space
+        </button>
+      </div>
+
+      {/* Loading indicator */}
+      {(wsLoading || remoteLoading) && (
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 flex items-center gap-2">
+          <Loader2 className="w-4 h-4 animate-spin text-zinc-500" />
+          <span className="text-xs text-zinc-500">Discovering spaces...</span>
+        </div>
+      )}
+
+      {/* Remote errors */}
+      {remoteErrors.length > 0 && (
+        <div className="absolute bottom-12 left-4 z-20 space-y-1">
+          {remoteErrors.map((err) => (
+            <div key={err.nodeId} className="flex items-center gap-1.5 text-[9px] text-zinc-600">
+              <AlertCircle className="w-2.5 h-2.5 text-red-500/40" />
+              <span>{err.nodeName}: {err.error}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Hover tooltip */}
+      {hoveredWs && (
+        <div
+          className="fixed z-50 pointer-events-none"
+          style={{ left: mousePos.x + 16, top: mousePos.y - 10 }}
+        >
+          <div className="bg-black/80 backdrop-blur-sm border border-white/10 rounded-md px-3 py-2 shadow-xl">
+            <div className="text-xs font-medium text-white">{hoveredWs.name}</div>
+            <div className="text-[10px] text-zinc-400 mt-0.5">
+              {hoveredWs.paneCount ?? 0} pane{(hoveredWs.paneCount ?? 0) !== 1 ? 's' : ''}
+            </div>
+            {hoveredWs.isActive && (
+              <div className="text-[10px] text-indigo-400 mt-0.5 flex items-center gap-1">
+                <span className="w-1.5 h-1.5 rounded-full bg-indigo-400" />
+                active
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Screen reader accessible list */}
+      <div className="sr-only" role="list" aria-label="Workspaces">
+        {workspaces.map((ws) => (
+          <div key={ws.id} role="listitem">
+            {ws.name} — {ws.paneCount ?? 0} panes{ws.isActive ? ' (active)' : ''}
+          </div>
+        ))}
+        {remoteNodes.flatMap((node) =>
+          node.workspaces.map((ws) => (
+            <div key={`${node.nodeId}-${ws.id}`} role="listitem">
+              {ws.name} on {node.nodeName} — {ws.paneCount ?? 0} panes
+            </div>
+          )),
+        )}
+      </div>
+
+      {/* Fade keyframe */}
+      <style>{`
+        @keyframes universe-fade-in {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+      `}</style>
+    </div>
+  );
+}