claude-cortex 1.0.0 → 1.1.0

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, MemoryCategory } 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,
+}: 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>
+  );
+}

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

@@ -0,0 +1,103 @@
+'use client';
+
+/**
+ * Category Labels
+ *
+ * Shows labels around the brain for each category region.
+ * Categories are arranged in a circle like a clock face.
+ */
+
+import { useMemo } from 'react';
+import { Html } from '@react-three/drei';
+import { MemoryCategory } from '@/types/memory';
+import { getCategoryColor } from '@/lib/category-colors';
+
+// Category positions (angles in degrees, matching position-algorithm.ts)
+const CATEGORY_ANGLES: Record<MemoryCategory, number> = {
+  architecture: 0,
+  pattern: 36,
+  preference: 72,
+  error: 108,
+  context: 144,
+  learning: 180,
+  todo: 216,
+  note: 252,
+  relationship: 288,
+  custom: 324,
+};
+
+// Category icons
+const CATEGORY_ICONS: Record<MemoryCategory, string> = {
+  architecture: '🏗️',
+  pattern: '🔄',
+  preference: '⚙️',
+  error: '🐛',
+  context: '📍',
+  learning: '💡',
+  todo: '✅',
+  note: '📝',
+  relationship: '🔗',
+  custom: '📦',
+};
+
+interface CategoryLabelsProps {
+  memoryCounts: Record<string, number>;
+  radius?: number;
+  showCounts?: boolean;
+}
+
+export function CategoryLabels({
+  memoryCounts,
+  radius = 5.5,
+  showCounts = true,
+}: CategoryLabelsProps) {
+  const labels = useMemo(() => {
+    return (Object.keys(CATEGORY_ANGLES) as MemoryCategory[]).map((category) => {
+      const angle = CATEGORY_ANGLES[category] * (Math.PI / 180);
+      const x = radius * Math.cos(angle);
+      const z = radius * Math.sin(angle);
+      const count = memoryCounts[category] || 0;
+      const color = getCategoryColor(category);
+
+      return {
+        category,
+        position: [x, 0, z] as [number, number, number],
+        count,
+        color,
+        icon: CATEGORY_ICONS[category],
+      };
+    });
+  }, [memoryCounts, radius]);
+
+  return (
+    <group name="category-labels">
+      {labels.map(({ category, position, count, color, icon }) => (
+        <Html
+          key={category}
+          position={position}
+          center
+          style={{ pointerEvents: 'none' }}
+          distanceFactor={12}
+        >
+          <div
+            className="flex flex-col items-center gap-0.5 opacity-60 hover:opacity-100 transition-opacity"
+            style={{ color }}
+          >
+            <span className="text-lg">{icon}</span>
+            <span className="text-[10px] font-medium capitalize whitespace-nowrap">
+              {category}
+            </span>
+            {showCounts && count > 0 && (
+              <span
+                className="text-[9px] px-1.5 py-0.5 rounded-full"
+                style={{ backgroundColor: color + '30' }}
+              >
+                {count}
+              </span>
+            )}
+          </div>
+        </Html>
+      ))}
+    </group>
+  );
+}

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

@@ -0,0 +1,215 @@
+'use client';
+
+/**
+ * Core Sphere
+ * Glowing central energy core - the "heart" of the AI brain
+ *
+ * Features:
+ * - Bright central sphere with multiple glow layers
+ * - Pulsing animation tied to activity level
+ * - Color gradient from deep orange (#FF8C00) to bright gold (#FFD700)
+ * - Additive blending for realistic glow effect
+ */
+
+import { useRef, useMemo, useEffect } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+
+// Shared geometries to prevent memory leaks
+const CORE_GEOMETRY = new THREE.SphereGeometry(1, 32, 32);
+const GLOW_GEOMETRY = new THREE.SphereGeometry(1, 24, 24);
+
+interface CoreSphereProps {
+  /** Activity level 0-1, affects pulse intensity and speed */
+  activity?: number;
+  /** Base radius of the core sphere */
+  radius?: number;
+  /** Position of the core */
+  position?: [number, number, number];
+}
+
+export function CoreSphere({
+  activity = 0.5,
+  radius = 0.4,
+  position = [0, 0, 0],
+}: CoreSphereProps) {
+  const coreRef = useRef<THREE.Mesh>(null);
+  const glow1Ref = useRef<THREE.Mesh>(null);
+  const glow2Ref = useRef<THREE.Mesh>(null);
+  const glow3Ref = useRef<THREE.Mesh>(null);
+  const glow4Ref = useRef<THREE.Mesh>(null);
+
+  // Core material - brightest, deep orange
+  const coreMaterial = useMemo(
+    () =>
+      new THREE.MeshBasicMaterial({
+        color: '#FF8C00',
+        transparent: true,
+        opacity: 0.95,
+        depthWrite: false,
+      }),
+    []
+  );
+
+  // Inner glow layer 1 - orange-gold
+  const glow1Material = useMemo(
+    () =>
+      new THREE.MeshBasicMaterial({
+        color: '#FFA500',
+        transparent: true,
+        opacity: 0.15,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+      }),
+    []
+  );
+
+  // Glow layer 2 - transitioning to gold
+  const glow2Material = useMemo(
+    () =>
+      new THREE.MeshBasicMaterial({
+        color: '#FFB700',
+        transparent: true,
+        opacity: 0.08,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+      }),
+    []
+  );
+
+  // Glow layer 3 - lighter gold
+  const glow3Material = useMemo(
+    () =>
+      new THREE.MeshBasicMaterial({
+        color: '#FFC500',
+        transparent: true,
+        opacity: 0.04,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+      }),
+    []
+  );
+
+  // Outer glow layer 4 - brightest gold, most diffuse
+  const glow4Material = useMemo(
+    () =>
+      new THREE.MeshBasicMaterial({
+        color: '#FFD700',
+        transparent: true,
+        opacity: 0.02,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+      }),
+    []
+  );
+
+  // Cleanup materials on unmount
+  useEffect(() => {
+    return () => {
+      coreMaterial.dispose();
+      glow1Material.dispose();
+      glow2Material.dispose();
+      glow3Material.dispose();
+      glow4Material.dispose();
+    };
+  }, [coreMaterial, glow1Material, glow2Material, glow3Material, glow4Material]);
+
+  // Animation - pulsing "breathing" effect
+  useFrame((state) => {
+    if (!coreRef.current) return;
+
+    const time = state.clock.elapsedTime;
+
+    // Base pulse speed increases with activity (0.8 to 3.0 Hz)
+    const pulseSpeed = 0.8 + activity * 2.2;
+
+    // Primary breathing pulse
+    const primaryPulse = Math.sin(time * pulseSpeed) * 0.5 + 0.5;
+
+    // Secondary faster micro-pulse for energy feel
+    const microPulse = Math.sin(time * pulseSpeed * 3) * 0.15 + 0.85;
+
+    // Combined pulse with activity influence
+    const combinedPulse = primaryPulse * (0.7 + activity * 0.3) * microPulse;
+
+    // Core sphere - subtle scale pulsing
+    const coreScale = radius * (1 + combinedPulse * 0.15);
+    coreRef.current.scale.setScalar(coreScale);
+    coreMaterial.opacity = 0.85 + combinedPulse * 0.1;
+
+    // Glow layer 1 - larger, synced with core
+    if (glow1Ref.current) {
+      const glow1Scale = radius * 1.6 * (1 + combinedPulse * 0.1);
+      glow1Ref.current.scale.setScalar(glow1Scale);
+      glow1Material.opacity = (0.1 + combinedPulse * 0.06) * (0.6 + activity * 0.4);
+    }
+
+    // Glow layer 2 - slightly phase-shifted for depth
+    if (glow2Ref.current) {
+      const phase2 = Math.sin(time * pulseSpeed - 0.3) * 0.5 + 0.5;
+      const glow2Scale = radius * 2.0 * (1 + phase2 * 0.08);
+      glow2Ref.current.scale.setScalar(glow2Scale);
+      glow2Material.opacity = (0.05 + phase2 * 0.04) * (0.5 + activity * 0.5);
+    }
+
+    // Glow layer 3 - more phase shift, slower feel
+    if (glow3Ref.current) {
+      const phase3 = Math.sin(time * pulseSpeed * 0.7 - 0.6) * 0.5 + 0.5;
+      const glow3Scale = radius * 2.4 * (1 + phase3 * 0.06);
+      glow3Ref.current.scale.setScalar(glow3Scale);
+      glow3Material.opacity = (0.025 + phase3 * 0.02) * (0.4 + activity * 0.6);
+    }
+
+    // Glow layer 4 - outermost, slowest, most ethereal
+    if (glow4Ref.current) {
+      const phase4 = Math.sin(time * pulseSpeed * 0.5 - 0.9) * 0.5 + 0.5;
+      const glow4Scale = radius * 3.0 * (1 + phase4 * 0.05);
+      glow4Ref.current.scale.setScalar(glow4Scale);
+      glow4Material.opacity = (0.01 + phase4 * 0.015) * (0.3 + activity * 0.7);
+    }
+  });
+
+  return (
+    <group position={position} name="core-sphere">
+      {/* Outermost glow layer 4 - brightest gold, most diffuse */}
+      <mesh
+        ref={glow4Ref}
+        geometry={GLOW_GEOMETRY}
+        material={glow4Material}
+        scale={radius * 3.0}
+      />
+
+      {/* Glow layer 3 - lighter gold */}
+      <mesh
+        ref={glow3Ref}
+        geometry={GLOW_GEOMETRY}
+        material={glow3Material}
+        scale={radius * 2.4}
+      />
+
+      {/* Glow layer 2 - transitioning gold */}
+      <mesh
+        ref={glow2Ref}
+        geometry={GLOW_GEOMETRY}
+        material={glow2Material}
+        scale={radius * 2.0}
+      />
+
+      {/* Inner glow layer 1 - orange-gold */}
+      <mesh
+        ref={glow1Ref}
+        geometry={GLOW_GEOMETRY}
+        material={glow1Material}
+        scale={radius * 1.6}
+      />
+
+      {/* Core sphere - brightest, deep orange center */}
+      <mesh
+        ref={coreRef}
+        geometry={CORE_GEOMETRY}
+        material={coreMaterial}
+        scale={radius}
+      />
+    </group>
+  );
+}

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

@@ -0,0 +1,123 @@
+'use client';
+
+/**
+ * Data Flow Particles
+ * Animated particles flowing between brain regions
+ */
+
+import { useRef, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+
+interface DataFlowParticlesProps {
+  count?: number;
+  speed?: number;
+}
+
+export function DataFlowParticles({
+  count = 150,
+  speed = 0.5,
+}: DataFlowParticlesProps) {
+  const pointsRef = useRef<THREE.Points>(null);
+
+  // Initialize particle data
+  const { positions, velocities, colors, opacities } = useMemo(() => {
+    const pos = new Float32Array(count * 3);
+    const vel = new Float32Array(count * 3);
+    const col = new Float32Array(count * 3);
+    const opa = new Float32Array(count);
+
+    for (let i = 0; i < count; i++) {
+      const i3 = i * 3;
+
+      // Random position within brain bounds
+      pos[i3] = (Math.random() - 0.5) * 8;
+      pos[i3 + 1] = (Math.random() - 0.5) * 6;
+      pos[i3 + 2] = (Math.random() - 0.5) * 7;
+
+      // Velocity - flowing from front to back (STM to LTM direction)
+      vel[i3] = (Math.random() - 0.5) * 0.01;
+      vel[i3 + 1] = (Math.random() - 0.5) * 0.01;
+      vel[i3 + 2] = -0.015 - Math.random() * 0.02;
+
+      // Initial opacity
+      opa[i] = 0.3 + Math.random() * 0.4;
+
+      // Color based on z-position
+      updateColor(col, i3, pos[i3 + 2]);
+    }
+
+    return { positions: pos, velocities: vel, colors: col, opacities: opa };
+  }, [count]);
+
+  function updateColor(col: Float32Array, i3: number, z: number) {
+    if (z > 1.5) {
+      // Short-term region - orange
+      col[i3] = 0.976;
+      col[i3 + 1] = 0.451;
+      col[i3 + 2] = 0.086;
+    } else if (z < -1.5) {
+      // Long-term region - blue
+      col[i3] = 0.231;
+      col[i3 + 1] = 0.51;
+      col[i3 + 2] = 0.965;
+    } else {
+      // Episodic region - purple
+      col[i3] = 0.545;
+      col[i3 + 1] = 0.361;
+      col[i3 + 2] = 0.965;
+    }
+  }
+
+  useFrame(() => {
+    if (!pointsRef.current) return;
+
+    const posAttr = pointsRef.current.geometry.attributes.position;
+    const colAttr = pointsRef.current.geometry.attributes.color;
+
+    for (let i = 0; i < count; i++) {
+      const i3 = i * 3;
+
+      // Update position
+      posAttr.array[i3] += velocities[i3] * speed;
+      posAttr.array[i3 + 1] += velocities[i3 + 1] * speed;
+      posAttr.array[i3 + 2] += velocities[i3 + 2] * speed;
+
+      // Reset if out of bounds (wrap around)
+      if (posAttr.array[i3 + 2] < -4) {
+        posAttr.array[i3 + 2] = 4;
+        posAttr.array[i3] = (Math.random() - 0.5) * 8;
+        posAttr.array[i3 + 1] = (Math.random() - 0.5) * 6;
+      }
+
+      // Update color based on new position
+      updateColor(colAttr.array as Float32Array, i3, posAttr.array[i3 + 2]);
+    }
+
+    posAttr.needsUpdate = true;
+    colAttr.needsUpdate = true;
+  });
+
+  return (
+    <points ref={pointsRef}>
+      <bufferGeometry>
+        <bufferAttribute
+          attach="attributes-position"
+          args={[positions, 3]}
+        />
+        <bufferAttribute
+          attach="attributes-color"
+          args={[colors, 3]}
+        />
+      </bufferGeometry>
+      <pointsMaterial
+        size={0.06}
+        vertexColors
+        transparent
+        opacity={0.6}
+        sizeAttenuation
+        depthWrite={false}
+      />
+    </points>
+  );
+}