@jlongo78/agent-spaces 0.9.6 → 0.9.8

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

@@ -1,131 +1,131 @@
-'use client';
-
-import { useMemo } from 'react';
-import { Text, Line } from '@react-three/drei';
-import * as THREE from 'three';
-import { Orb } from './universe-orb';
-import { seededRandom, matchesSearch } from './universe-utils';
-import type { Workspace } from '@/types/claude';
-
-interface ClusterProps {
-  workspaces: Workspace[];
-  position: [number, number, number];
-  label: string;
-  clusterColor: string;
-  remote?: boolean;
-  nodeId?: string;
-  reducedMotion: boolean;
-  searchQuery: string;
-  onHover: (ws: Workspace | null) => void;
-  onClick: (ws: Workspace) => void;
-}
-
-// Arrange orbs in a loose sphere around center
-function computeOrbPositions(
-  workspaces: Workspace[],
-  center: [number, number, number],
-): [number, number, number][] {
-  if (workspaces.length === 0) return [];
-  if (workspaces.length === 1) return [center];
-
-  // Sort by pane count descending — largest at center
-  const sorted = [...workspaces].sort(
-    (a, b) => (b.paneCount ?? 0) - (a.paneCount ?? 0),
-  );
-
-  return sorted.map((ws, i) => {
-    if (i === 0) return center; // Largest at center
-
-    const ring = Math.ceil(i / 6);
-    const posInRing = (i - 1) % 6;
-    const ringCount = Math.min(6, workspaces.length - 1 - (ring - 1) * 6);
-    const angle = (posInRing / ringCount) * Math.PI * 2;
-    const dist = ring * 2.5;
-
-    // Deterministic jitter
-    const jx = (seededRandom(ws.id * 3) - 0.5) * 0.6;
-    const jy = (seededRandom(ws.id * 7) - 0.5) * 0.6;
-    const jz = (seededRandom(ws.id * 11) - 0.5) * 0.6;
-
-    return [
-      center[0] + Math.cos(angle) * dist + jx,
-      center[1] + jy,
-      center[2] + Math.sin(angle) * dist + jz,
-    ] as [number, number, number];
-  });
-}
-
-export function Cluster({
-  workspaces,
-  position,
-  label,
-  clusterColor,
-  remote,
-  nodeId,
-  reducedMotion,
-  searchQuery,
-  onHover,
-  onClick,
-}: ClusterProps) {
-  const orbPositions = useMemo(
-    () => computeOrbPositions(workspaces, position),
-    [workspaces, position],
-  );
-
-  // Sort same way as computeOrbPositions for index alignment
-  const sorted = useMemo(
-    () =>
-      [...workspaces].sort(
-        (a, b) => (b.paneCount ?? 0) - (a.paneCount ?? 0),
-      ),
-    [workspaces],
-  );
-
-  if (workspaces.length === 0) return null;
-
-  return (
-    <group>
-      {/* Connection lines between center orb and satellites */}
-      {orbPositions.length > 1 &&
-        orbPositions.slice(1).map((pos, i) => (
-          <Line
-            key={`line-${i}`}
-            points={[orbPositions[0], pos]}
-            color={clusterColor}
-            transparent
-            opacity={0.06}
-            lineWidth={0.5}
-          />
-        ))}
-
-      {/* Orbs */}
-      {sorted.map((ws, i) => (
-        <Orb
-          key={ws.id}
-          ws={ws}
-          position={orbPositions[i]}
-          remote={remote}
-          nodeId={nodeId}
-          reducedMotion={reducedMotion}
-          searchMatch={matchesSearch(ws.name, searchQuery)}
-          onHover={onHover}
-          onClick={onClick}
-        />
-      ))}
-
-      {/* Cluster label */}
-      <Text
-        position={[position[0], position[1] - 3, position[2]]}
-        fontSize={0.5}
-        color={clusterColor}
-        anchorX="center"
-        anchorY="top"
-        fillOpacity={0.3}
-        letterSpacing={0.2}
-        font={undefined}
-      >
-        {label.toUpperCase()}
-      </Text>
-    </group>
-  );
-}
+'use client';
+
+import { useMemo } from 'react';
+import { Text, Line } from '@react-three/drei';
+import * as THREE from 'three';
+import { Orb } from './universe-orb';
+import { seededRandom, matchesSearch } from './universe-utils';
+import type { Workspace } from '@/types/claude';
+
+interface ClusterProps {
+  workspaces: Workspace[];
+  position: [number, number, number];
+  label: string;
+  clusterColor: string;
+  remote?: boolean;
+  nodeId?: string;
+  reducedMotion: boolean;
+  searchQuery: string;
+  onHover: (ws: Workspace | null) => void;
+  onClick: (ws: Workspace) => void;
+}
+
+// Arrange orbs in a loose sphere around center
+function computeOrbPositions(
+  workspaces: Workspace[],
+  center: [number, number, number],
+): [number, number, number][] {
+  if (workspaces.length === 0) return [];
+  if (workspaces.length === 1) return [center];
+
+  // Sort by pane count descending — largest at center
+  const sorted = [...workspaces].sort(
+    (a, b) => (b.paneCount ?? 0) - (a.paneCount ?? 0),
+  );
+
+  return sorted.map((ws, i) => {
+    if (i === 0) return center; // Largest at center
+
+    const ring = Math.ceil(i / 6);
+    const posInRing = (i - 1) % 6;
+    const ringCount = Math.min(6, workspaces.length - 1 - (ring - 1) * 6);
+    const angle = (posInRing / ringCount) * Math.PI * 2;
+    const dist = ring * 2.5;
+
+    // Deterministic jitter
+    const jx = (seededRandom(ws.id * 3) - 0.5) * 0.6;
+    const jy = (seededRandom(ws.id * 7) - 0.5) * 0.6;
+    const jz = (seededRandom(ws.id * 11) - 0.5) * 0.6;
+
+    return [
+      center[0] + Math.cos(angle) * dist + jx,
+      center[1] + jy,
+      center[2] + Math.sin(angle) * dist + jz,
+    ] as [number, number, number];
+  });
+}
+
+export function Cluster({
+  workspaces,
+  position,
+  label,
+  clusterColor,
+  remote,
+  nodeId,
+  reducedMotion,
+  searchQuery,
+  onHover,
+  onClick,
+}: ClusterProps) {
+  const orbPositions = useMemo(
+    () => computeOrbPositions(workspaces, position),
+    [workspaces, position],
+  );
+
+  // Sort same way as computeOrbPositions for index alignment
+  const sorted = useMemo(
+    () =>
+      [...workspaces].sort(
+        (a, b) => (b.paneCount ?? 0) - (a.paneCount ?? 0),
+      ),
+    [workspaces],
+  );
+
+  if (workspaces.length === 0) return null;
+
+  return (
+    <group>
+      {/* Connection lines between center orb and satellites */}
+      {orbPositions.length > 1 &&
+        orbPositions.slice(1).map((pos, i) => (
+          <Line
+            key={`line-${i}`}
+            points={[orbPositions[0], pos]}
+            color={clusterColor}
+            transparent
+            opacity={0.06}
+            lineWidth={0.5}
+          />
+        ))}
+
+      {/* Orbs */}
+      {sorted.map((ws, i) => (
+        <Orb
+          key={ws.id}
+          ws={ws}
+          position={orbPositions[i]}
+          remote={remote}
+          nodeId={nodeId}
+          reducedMotion={reducedMotion}
+          searchMatch={matchesSearch(ws.name, searchQuery)}
+          onHover={onHover}
+          onClick={onClick}
+        />
+      ))}
+
+      {/* Cluster label */}
+      <Text
+        position={[position[0], position[1] - 3, position[2]]}
+        fontSize={0.5}
+        color={clusterColor}
+        anchorX="center"
+        anchorY="top"
+        fillOpacity={0.3}
+        letterSpacing={0.2}
+        font={undefined}
+      >
+        {label.toUpperCase()}
+      </Text>
+    </group>
+  );
+}

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

@@ -1,128 +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>
-  );
-}
+'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

@@ -1,22 +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;
-}
+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

@@ -1,11 +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);
-}
+// 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);
+}