shieldcortex 2.0.0

package/dashboard/src/components/brain/BrainMesh.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+/**
+ * Brain Mesh
+ * Ghost wireframe outline of a brain shape for subtle context
+ * Uses simplex noise to create organic cortex-like surface folds
+ */
+
+import { useMemo, useEffect, useRef } from 'react';
+import * as THREE from 'three';
+import { fbm3D, ridged3D } from '@/lib/simplex-noise';
+
+interface BrainMeshProps {
+  opacity?: number;
+  showWireframe?: boolean;
+  pulseIntensity?: number;
+}
+
+/**
+ * Creates a brain-like geometry with cortex folds
+ */
+function createBrainGeometry(): THREE.BufferGeometry {
+  // Start with icosahedron for smooth organic base
+  const geo = new THREE.IcosahedronGeometry(3.5, 5);
+  const positions = geo.attributes.position.array as Float32Array;
+  const colors = new Float32Array(positions.length);
+
+  for (let i = 0; i < positions.length; i += 3) {
+    const x = positions[i];
+    const y = positions[i + 1];
+    const z = positions[i + 2];
+
+    // Normalize to get direction
+    const length = Math.sqrt(x * x + y * y + z * z);
+    const nx = x / length;
+    const ny = y / length;
+    const nz = z / length;
+
+    // Multi-scale noise for cortex folds
+    // Large folds (gyri)
+    const largeNoise = fbm3D(nx * 2, ny * 2, nz * 2, 3, 2, 0.5) * 0.4;
+    // Medium detail
+    const mediumNoise = fbm3D(nx * 4, ny * 4, nz * 4, 2, 2, 0.5) * 0.15;
+    // Fine sulci (ridged for sharp creases)
+    const fineNoise = ridged3D(nx * 6, ny * 6, nz * 6, 2, 2, 0.5) * 0.08;
+
+    const totalNoise = largeNoise + mediumNoise + fineNoise * 0.5;
+
+    // Brain shape modifications:
+    // 1. Elongate front-to-back (Z axis) - frontal lobe
+    // 2. Slightly flatten top-bottom (Y axis)
+    // 3. Hemisphere bulges on sides (X axis)
+    const shapeX = 1.2 + Math.abs(nz) * 0.15; // Wider at sides
+    const shapeY = 0.85 + Math.abs(nx) * 0.1;  // Slightly flat
+    const shapeZ = 1.1 - Math.abs(ny) * 0.1;   // Elongated front-back
+
+    // Central fissure (divide hemispheres)
+    const centralFissure = Math.abs(nx) < 0.1 ? -0.15 * (1 - Math.abs(nx) / 0.1) : 0;
+
+    // Temporal lobe bulge
+    const temporalBulge = (Math.abs(nx) > 0.5 && nz < 0) ? 0.15 : 0;
+
+    // Apply all modifications
+    const radius = length * (1 + totalNoise + centralFissure + temporalBulge);
+
+    positions[i] = nx * radius * shapeX;
+    positions[i + 1] = ny * radius * shapeY;
+    positions[i + 2] = nz * radius * shapeZ;
+
+    // Color based on region (for visual depth)
+    // Front (STM) = orange tint, Middle (Episodic) = purple, Back (LTM) = blue
+    const normalizedZ = (nz + 1) / 2; // 0 to 1
+    colors[i] = 0.1 + normalizedZ * 0.2;     // R: more red in front
+    colors[i + 1] = 0.05 + (1 - normalizedZ) * 0.15; // G: more green in back
+    colors[i + 2] = 0.2 + (1 - normalizedZ) * 0.3;   // B: more blue in back
+  }
+
+  geo.computeVertexNormals();
+  geo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+
+  return geo;
+}
+
+export function BrainMesh({
+  opacity = 0.05,
+  showWireframe = true,
+}: BrainMeshProps) {
+  // Use refs to track resources for proper cleanup
+  const geometryRef = useRef<THREE.BufferGeometry | null>(null);
+  const materialRef = useRef<THREE.MeshBasicMaterial | null>(null);
+
+  // Create geometry once
+  const brainGeometry = useMemo(() => {
+    const geo = createBrainGeometry();
+    geometryRef.current = geo;
+    return geo;
+  }, []);
+
+  // Ghost wireframe material - very faint gray
+  const wireframeMaterial = useMemo(() => {
+    const mat = new THREE.MeshBasicMaterial({
+      color: '#333333',
+      wireframe: true,
+      transparent: true,
+      opacity: opacity,
+    });
+    materialRef.current = mat;
+    return mat;
+  }, [opacity]);
+
+  // Cleanup on unmount to prevent GPU memory leaks
+  // Use refs to ensure we always dispose the actual resources
+  useEffect(() => {
+    return () => {
+      if (geometryRef.current) {
+        geometryRef.current.dispose();
+        geometryRef.current = null;
+      }
+      if (materialRef.current) {
+        materialRef.current.dispose();
+        materialRef.current = null;
+      }
+    };
+  }, []);
+
+  // Only render wireframe - no solid surface, no core, no animation
+  if (!showWireframe) return null;
+
+  return (
+    <mesh geometry={brainGeometry} material={wireframeMaterial} />
+  );
+}
+

package/dashboard/src/components/brain/BrainRegions.tsx

@@ -0,0 +1,254 @@
+'use client';
+
+/**
+ * Brain Regions
+ * Volumetric cloud-like regions representing different memory types
+ * - Short-term (front/orange): Active working memory
+ * - Episodic (middle/purple): Session and event memories
+ * - Long-term (back/blue): Consolidated stable memories
+ */
+
+import { useRef, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { Html } from '@react-three/drei';
+import * as THREE from 'three';
+
+interface MemoryRegionProps {
+  type: 'short_term' | 'episodic' | 'long_term';
+  position: [number, number, number];
+  color: string;
+  memoryCount?: number;
+  label: string;
+  showLabel?: boolean;
+}
+
+/**
+ * Single volumetric memory region
+ * Uses multiple overlapping transparent spheres for cloud effect
+ */
+function MemoryRegion({
+  type,
+  position,
+  color,
+  memoryCount = 0,
+  label,
+  showLabel = true,
+}: MemoryRegionProps) {
+  const groupRef = useRef<THREE.Group>(null);
+  const innerRef = useRef<THREE.Mesh>(null);
+
+  // Scale based on memory count (more memories = larger region)
+  const scale = useMemo(() => {
+    const baseScale = 1;
+    const countScale = Math.min(memoryCount / 30, 0.5); // Max 50% increase
+    return baseScale + countScale;
+  }, [memoryCount]);
+
+  // Create multiple sphere layers for volumetric effect
+  const layers = useMemo(() => {
+    return [
+      { radius: 1.8, opacity: 0.03, offset: [0, 0, 0] },
+      { radius: 1.5, opacity: 0.04, offset: [0.2, 0.1, 0.1] },
+      { radius: 1.2, opacity: 0.05, offset: [-0.1, 0.15, -0.1] },
+      { radius: 0.9, opacity: 0.06, offset: [0.1, -0.1, 0.15] },
+      { radius: 0.6, opacity: 0.08, offset: [0, 0.05, 0] },
+    ];
+  }, []);
+
+  // Animation
+  useFrame((state) => {
+    if (!groupRef.current) return;
+
+    const time = state.clock.elapsedTime;
+    const typeOffset = type === 'short_term' ? 0 : type === 'episodic' ? 1 : 2;
+
+    // Gentle floating motion
+    groupRef.current.position.y =
+      position[1] + Math.sin(time * 0.3 + typeOffset) * 0.15;
+
+    // Subtle rotation
+    groupRef.current.rotation.y = Math.sin(time * 0.2 + typeOffset) * 0.1;
+
+    // Inner core pulsing
+    if (innerRef.current) {
+      const pulse = Math.sin(time * 1.5 + typeOffset * 2) * 0.15 + 0.85;
+      innerRef.current.scale.setScalar(pulse);
+      (innerRef.current.material as THREE.MeshBasicMaterial).opacity =
+        0.15 + pulse * 0.1;
+    }
+  });
+
+  return (
+    <group ref={groupRef} position={position}>
+      {/* Volumetric cloud layers */}
+      {layers.map((layer, i) => (
+        <mesh
+          key={i}
+          position={[
+            layer.offset[0] * scale,
+            layer.offset[1] * scale,
+            layer.offset[2] * scale,
+          ]}
+          scale={scale}
+        >
+          <sphereGeometry args={[layer.radius, 24, 24]} />
+          <meshStandardMaterial
+            color={color}
+            transparent
+            opacity={layer.opacity}
+            emissive={color}
+            emissiveIntensity={0.15}
+            side={THREE.DoubleSide}
+            depthWrite={false}
+          />
+        </mesh>
+      ))}
+
+      {/* Bright inner core */}
+      <mesh ref={innerRef} scale={scale * 0.4}>
+        <sphereGeometry args={[1, 16, 16]} />
+        <meshBasicMaterial
+          color={color}
+          transparent
+          opacity={0.2}
+          depthWrite={false}
+        />
+      </mesh>
+
+      {/* Region label */}
+      {showLabel && (
+        <Html position={[0, 2.2 * scale, 0]} center style={{ pointerEvents: 'none' }}>
+          <div
+            className="px-3 py-1.5 rounded-full text-xs font-bold whitespace-nowrap backdrop-blur-sm"
+            style={{
+              backgroundColor: `${color}25`,
+              color: color,
+              border: `1px solid ${color}40`,
+              boxShadow: `0 0 20px ${color}30`,
+            }}
+          >
+            {label}
+            {memoryCount > 0 && (
+              <span className="ml-2 opacity-70">({memoryCount})</span>
+            )}
+          </div>
+        </Html>
+      )}
+    </group>
+  );
+}
+
+/**
+ * Energy field connecting regions
+ */
+function EnergyField() {
+  const meshRef = useRef<THREE.Mesh>(null);
+
+  useFrame((state) => {
+    if (!meshRef.current) return;
+    const time = state.clock.elapsedTime;
+
+    // Slow rotation
+    meshRef.current.rotation.y = time * 0.05;
+    meshRef.current.rotation.x = Math.sin(time * 0.1) * 0.1;
+
+    // Pulsing opacity
+    (meshRef.current.material as THREE.MeshBasicMaterial).opacity =
+      0.02 + Math.sin(time * 0.5) * 0.01;
+  });
+
+  return (
+    <mesh ref={meshRef}>
+      <torusGeometry args={[3.5, 0.8, 8, 48]} />
+      <meshBasicMaterial
+        color="#6366f1"
+        transparent
+        opacity={0.025}
+        side={THREE.DoubleSide}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+}
+
+/**
+ * Orbital ring around the brain
+ */
+function OrbitalRing({ radius = 4.5, color = '#4488ff' }: { radius?: number; color?: string }) {
+  const ringRef = useRef<THREE.Mesh>(null);
+
+  useFrame((state) => {
+    if (!ringRef.current) return;
+    ringRef.current.rotation.z = state.clock.elapsedTime * 0.1;
+  });
+
+  return (
+    <mesh ref={ringRef} rotation={[Math.PI / 2, 0, 0]}>
+      <torusGeometry args={[radius, 0.015, 8, 64]} />
+      <meshBasicMaterial color={color} transparent opacity={0.3} />
+    </mesh>
+  );
+}
+
+interface BrainRegionsProps {
+  shortTermCount?: number;
+  episodicCount?: number;
+  longTermCount?: number;
+  showLabels?: boolean;
+}
+
+/**
+ * All brain regions combined
+ */
+export function BrainRegions({
+  shortTermCount = 0,
+  episodicCount = 0,
+  longTermCount = 0,
+  showLabels = false,
+}: BrainRegionsProps) {
+  return (
+    <group name="brain-regions">
+      {/* Short-term memory region (front) */}
+      <MemoryRegion
+        type="short_term"
+        position={[0, 0, 2.8]}
+        color="#F97316"
+        memoryCount={shortTermCount}
+        label="Short-Term"
+        showLabel={showLabels}
+      />
+
+      {/* Episodic memory region (middle) */}
+      <MemoryRegion
+        type="episodic"
+        position={[0, 0.3, 0]}
+        color="#8B5CF6"
+        memoryCount={episodicCount}
+        label="Episodic"
+        showLabel={showLabels}
+      />
+
+      {/* Long-term memory region (back) */}
+      <MemoryRegion
+        type="long_term"
+        position={[0, 0, -2.8]}
+        color="#3B82F6"
+        memoryCount={longTermCount}
+        label="Long-Term"
+        showLabel={showLabels}
+      />
+
+      {/* Energy field connecting regions */}
+      <EnergyField />
+
+      {/* Orbital rings for sci-fi effect */}
+      <OrbitalRing radius={4.2} color="#3B82F6" />
+      <group rotation={[0, 0, Math.PI / 6]}>
+        <OrbitalRing radius={4.5} color="#8B5CF6" />
+      </group>
+      <group rotation={[0, 0, -Math.PI / 6]}>
+        <OrbitalRing radius={4.8} color="#F97316" />
+      </group>
+    </group>
+  );
+}

package/dashboard/src/components/brain/BrainScene.tsx

@@ -0,0 +1,255 @@
+'use client';
+
+/**
+ * Brain Scene
+ * Main 3D visualization of the memory brain
+ * Composes all brain visualization components into a cohesive scene
+ *
+ * Features:
+ * - Real-time activity pulses on memory events
+ * - Category region labels
+ * - Color modes: category, health (decay), age
+ * - Timeline filtering
+ */
+
+import { Suspense, useMemo, useState, useCallback } from 'react';
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls } from '@react-three/drei';
+// Post-processing disabled for cleaner appearance
+// import { EffectComposer, Bloom, Vignette, ChromaticAberration, Noise } from '@react-three/postprocessing';
+import { Memory, MemoryLink } from '@/types/memory';
+import { MemoryNode } from './MemoryNode';
+import { MemoryLinks } from './MemoryLinks';
+import { BrainMesh } from './BrainMesh';
+import { ActivityPulseSystem, Pulse } from './ActivityPulseSystem';
+import { TimelineControls } from './TimelineControls';
+// Removed for cleaner design: BrainRegions, Stars
+import { calculateMemoryPosition } from '@/lib/position-algorithm';
+import { useMemoryWebSocket } from '@/lib/websocket';
+
+type ColorMode = 'category' | 'health' | 'age' | 'holographic';
+
+interface BrainSceneProps {
+  memories: Memory[];
+  links?: MemoryLink[];
+  selectedMemory: Memory | null;
+  onSelectMemory: (memory: Memory | null) => void;
+}
+
+interface BrainContentProps extends BrainSceneProps {
+  colorMode: ColorMode;
+  pulses: Pulse[];
+  onPulseComplete: (id: number) => void;
+  memoryCategoryCounts: Record<string, number>;
+}
+
+function BrainContent({
+  memories = [],
+  links = [],
+  selectedMemory,
+  onSelectMemory,
+  colorMode,
+  pulses,
+  onPulseComplete,
+  memoryCategoryCounts: _memoryCategoryCounts,
+}: BrainContentProps) {
+  // Calculate positions for all memories (deduplicate by ID to prevent React key errors)
+  const memoryPositions = useMemo(() => {
+    if (!memories || memories.length === 0) return [];
+    // Use Map to deduplicate by memory ID
+    const uniqueMemories = new Map(memories.map(m => [m.id, m]));
+    return Array.from(uniqueMemories.values()).map((memory) => ({
+      memory,
+      position: calculateMemoryPosition(memory),
+    }));
+  }, [memories]);
+
+  // Create a map for quick position lookup by memory ID
+  const positionMap = useMemo(() => {
+    const map = new Map<number, { x: number; y: number; z: number }>();
+    memoryPositions.forEach(({ memory, position }) => {
+      map.set(memory.id, position);
+    });
+    return map;
+  }, [memoryPositions]);
+
+  return (
+    <>
+      {/* Simple, even lighting for maximum clarity */}
+      <ambientLight intensity={0.6} color="#ffffff" />
+      <directionalLight position={[5, 5, 5]} intensity={0.3} color="#ffffff" />
+
+      {/* Ghost brain outline - barely visible context */}
+      <BrainMesh opacity={0.05} showWireframe={true} pulseIntensity={0} />
+
+      {/* Neural connections - the main visual feature */}
+      <MemoryLinks
+        memories={memories}
+        links={links}
+        memoryPositions={positionMap}
+      />
+
+      {/* Memory nodes - clear, colored spheres */}
+      {memoryPositions.map(({ memory, position }) => (
+        <MemoryNode
+          key={memory.id}
+          memory={memory}
+          position={[position.x, position.y, position.z]}
+          onSelect={onSelectMemory}
+          isSelected={selectedMemory?.id === memory.id}
+          colorMode={colorMode}
+        />
+      ))}
+
+      {/* Activity pulses for real-time events */}
+      <ActivityPulseSystem pulses={pulses} onPulseComplete={onPulseComplete} />
+
+      {/* Camera controls - user controlled, no auto-rotate */}
+      <OrbitControls
+        enablePan={true}
+        enableZoom={true}
+        enableRotate={true}
+        minDistance={5}
+        maxDistance={25}
+        autoRotate={false}
+        dampingFactor={0.05}
+        enableDamping
+      />
+    </>
+  );
+}
+
+export function BrainScene({
+  memories = [],
+  links = [],
+  selectedMemory,
+  onSelectMemory,
+}: BrainSceneProps) {
+  const [colorMode, setColorMode] = useState<ColorMode>('category');
+  const [pulses, setPulses] = useState<Pulse[]>([]);
+  const [timeRange, setTimeRange] = useState<{ start: Date | null; end: Date | null }>({
+    start: null,
+    end: null,
+  });
+  const pulseIdRef = { current: 0 };
+
+  // Calculate memory counts by category
+  const memoryCategoryCounts = useMemo(() => {
+    const counts: Record<string, number> = {};
+    memories.forEach((m) => {
+      counts[m.category] = (counts[m.category] || 0) + 1;
+    });
+    return counts;
+  }, [memories]);
+
+  // Filter memories by time range
+  const filteredMemories = useMemo(() => {
+    if (!timeRange.start && !timeRange.end) return memories;
+
+    return memories.filter((m) => {
+      const createdAt = new Date(m.createdAt).getTime();
+      if (timeRange.start && createdAt < timeRange.start.getTime()) return false;
+      if (timeRange.end && createdAt > timeRange.end.getTime()) return false;
+      return true;
+    });
+  }, [memories, timeRange]);
+
+  // Create position map for pulse positioning
+  const positionMap = useMemo(() => {
+    const map = new Map<number, { x: number; y: number; z: number }>();
+    memories.forEach((memory) => {
+      map.set(memory.id, calculateMemoryPosition(memory));
+    });
+    return map;
+  }, [memories]);
+
+  // Create a pulse for memory events
+  const createPulse = useCallback(
+    (type: Pulse['type'], memoryId: number, targetMemoryId?: number) => {
+      const position = positionMap.get(memoryId);
+      if (!position) return;
+
+      const targetPosition = targetMemoryId ? positionMap.get(targetMemoryId) : undefined;
+
+      const pulse: Pulse = {
+        id: pulseIdRef.current++,
+        type,
+        position: [position.x, position.y, position.z],
+        targetPosition: targetPosition
+          ? [targetPosition.x, targetPosition.y, targetPosition.z]
+          : undefined,
+        startTime: Date.now(),
+        duration: type === 'created' ? 2000 : type === 'accessed' ? 1000 : 1500,
+        color: type === 'created' ? '#22c55e' : type === 'accessed' ? '#3b82f6' : '#a855f7',
+      };
+
+      setPulses((prev) => [...prev, pulse]);
+    },
+    [positionMap]
+  );
+
+  // Handle pulse completion
+  const handlePulseComplete = useCallback((id: number) => {
+    setPulses((prev) => prev.filter((p) => p.id !== id));
+  }, []);
+
+  // Listen for WebSocket events to trigger pulses
+  useMemoryWebSocket({
+    onMessage: (event) => {
+      const data = event.data as Record<string, unknown> | undefined;
+      switch (event.type) {
+        case 'memory_created':
+          if (data?.memoryId) createPulse('created', data.memoryId as number);
+          break;
+        case 'memory_accessed':
+          if (data?.memoryId) createPulse('accessed', data.memoryId as number);
+          break;
+        case 'link_discovered':
+          if (data?.sourceId && data?.targetId)
+            createPulse('linked', data.sourceId as number, data.targetId as number);
+          break;
+      }
+    },
+  });
+
+  return (
+    <div className="w-full h-full bg-slate-950">
+      <Canvas
+        camera={{ position: [0, 2, 12], fov: 55 }}
+        gl={{ antialias: true, alpha: true }}
+        onClick={() => onSelectMemory(null)}
+      >
+        <Suspense fallback={null}>
+          <BrainContent
+            memories={filteredMemories}
+            links={links}
+            selectedMemory={selectedMemory}
+            onSelectMemory={onSelectMemory}
+            colorMode={colorMode}
+            pulses={pulses}
+            onPulseComplete={handlePulseComplete}
+            memoryCategoryCounts={memoryCategoryCounts}
+          />
+        </Suspense>
+      </Canvas>
+
+      {/* Simple info overlay */}
+      <div className="absolute bottom-4 left-4 bg-slate-900/90 border border-slate-700 rounded-lg p-3 text-xs backdrop-blur-sm">
+        <p className="text-slate-300">
+          {filteredMemories.length} memories
+        </p>
+        <p className="text-slate-500 mt-1">
+          Click to select • Drag to rotate
+        </p>
+      </div>
+
+      {/* Timeline and color controls */}
+      <TimelineControls
+        memories={memories}
+        onTimeRangeChange={setTimeRange}
+        colorMode={colorMode}
+        onColorModeChange={setColorMode}
+      />
+    </div>
+  );
+}