claude-cortex 1.0.0 → 1.1.0

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

@@ -0,0 +1,229 @@
+'use client';
+
+/**
+ * Activity Pulse System
+ *
+ * Creates visual pulses when memory events occur:
+ * - memory_created: Green expanding pulse at memory position
+ * - memory_accessed: Blue flash at memory position
+ * - link_discovered: Cyan line connecting two memories
+ */
+
+import { useRef, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+
+interface Pulse {
+  id: number;
+  type: 'created' | 'accessed' | 'linked';
+  position: [number, number, number];
+  targetPosition?: [number, number, number]; // For links
+  startTime: number;
+  duration: number;
+  color: string;
+}
+
+interface ActivityPulseSystemProps {
+  pulses: Pulse[];
+  onPulseComplete: (id: number) => void;
+}
+
+// Shared geometry
+const PULSE_GEOMETRY = new THREE.RingGeometry(0.1, 0.15, 32);
+const SPHERE_GEOMETRY = new THREE.SphereGeometry(0.1, 16, 16);
+
+function CreatedPulse({
+  pulse,
+  onComplete,
+}: {
+  pulse: Pulse;
+  onComplete: () => void;
+}) {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const startTimeRef = useRef<number | null>(null);
+
+  useFrame((state) => {
+    if (!meshRef.current) return;
+
+    // Initialize start time on first frame
+    if (startTimeRef.current === null) {
+      startTimeRef.current = state.clock.elapsedTime;
+    }
+
+    const elapsed = state.clock.elapsedTime - startTimeRef.current;
+    const progress = elapsed / (pulse.duration / 1000); // Convert ms to seconds
+
+    if (progress >= 1) {
+      onComplete();
+      return;
+    }
+
+    // Expanding ring that fades out
+    const scale = 0.5 + progress * 3;
+    const opacity = (1 - progress) * 0.8;
+
+    meshRef.current.scale.setScalar(scale);
+    (meshRef.current.material as THREE.MeshBasicMaterial).opacity = opacity;
+  });
+
+  return (
+    <mesh
+      ref={meshRef}
+      position={pulse.position}
+      rotation={[Math.PI / 2, 0, 0]}
+      geometry={PULSE_GEOMETRY}
+    >
+      <meshBasicMaterial
+        color={pulse.color}
+        transparent
+        opacity={0.8}
+        side={THREE.DoubleSide}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+}
+
+function AccessedPulse({
+  pulse,
+  onComplete,
+}: {
+  pulse: Pulse;
+  onComplete: () => void;
+}) {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const startTimeRef = useRef<number | null>(null);
+
+  useFrame((state) => {
+    if (!meshRef.current) return;
+
+    // Initialize start time on first frame
+    if (startTimeRef.current === null) {
+      startTimeRef.current = state.clock.elapsedTime;
+    }
+
+    const elapsed = state.clock.elapsedTime - startTimeRef.current;
+    const progress = elapsed / (pulse.duration / 1000); // Convert ms to seconds
+
+    if (progress >= 1) {
+      onComplete();
+      return;
+    }
+
+    // Flash that expands slightly then fades
+    const flash = Math.sin(progress * Math.PI);
+    const scale = 0.8 + flash * 0.6;
+    const opacity = flash * 0.9;
+
+    meshRef.current.scale.setScalar(scale);
+    (meshRef.current.material as THREE.MeshBasicMaterial).opacity = opacity;
+  });
+
+  return (
+    <mesh ref={meshRef} position={pulse.position} geometry={SPHERE_GEOMETRY}>
+      <meshBasicMaterial
+        color={pulse.color}
+        transparent
+        opacity={0.9}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+}
+
+function LinkedPulse({
+  pulse,
+  onComplete,
+}: {
+  pulse: Pulse;
+  onComplete: () => void;
+}) {
+  const groupRef = useRef<THREE.Group>(null);
+  const startTimeRef = useRef<number | null>(null);
+  const lineRef = useRef<THREE.Line | null>(null);
+
+  // Create line object once
+  const lineObject = useMemo(() => {
+    const points = [
+      new THREE.Vector3(...pulse.position),
+      new THREE.Vector3(...(pulse.targetPosition || pulse.position)),
+    ];
+    const geometry = new THREE.BufferGeometry().setFromPoints(points);
+    const material = new THREE.LineBasicMaterial({
+      color: pulse.color,
+      transparent: true,
+      opacity: 0.8,
+    });
+    return new THREE.Line(geometry, material);
+  }, [pulse.position, pulse.targetPosition, pulse.color]);
+
+  useFrame((state) => {
+    if (!lineRef.current) {
+      // Add line to group on first render
+      if (groupRef.current && !groupRef.current.children.length) {
+        groupRef.current.add(lineObject);
+        lineRef.current = lineObject;
+      }
+      return;
+    }
+
+    // Initialize start time on first frame
+    if (startTimeRef.current === null) {
+      startTimeRef.current = state.clock.elapsedTime;
+    }
+
+    const elapsed = state.clock.elapsedTime - startTimeRef.current;
+    const progress = elapsed / (pulse.duration / 1000); // Convert ms to seconds
+
+    if (progress >= 1) {
+      onComplete();
+      return;
+    }
+
+    // Line that appears then fades
+    const flash = Math.sin(progress * Math.PI);
+    (lineRef.current.material as THREE.LineBasicMaterial).opacity = flash * 0.8;
+  });
+
+  return <group ref={groupRef} />;
+}
+
+export function ActivityPulseSystem({ pulses, onPulseComplete }: ActivityPulseSystemProps) {
+  return (
+    <group name="activity-pulses">
+      {pulses.map((pulse) => {
+        switch (pulse.type) {
+          case 'created':
+            return (
+              <CreatedPulse
+                key={pulse.id}
+                pulse={pulse}
+                onComplete={() => onPulseComplete(pulse.id)}
+              />
+            );
+          case 'accessed':
+            return (
+              <AccessedPulse
+                key={pulse.id}
+                pulse={pulse}
+                onComplete={() => onPulseComplete(pulse.id)}
+              />
+            );
+          case 'linked':
+            return (
+              <LinkedPulse
+                key={pulse.id}
+                pulse={pulse}
+                onComplete={() => onPulseComplete(pulse.id)}
+              />
+            );
+          default:
+            return null;
+        }
+      })}
+    </group>
+  );
+}
+
+// Type export for use in parent components
+export type { Pulse };

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

@@ -0,0 +1,118 @@
+'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 } 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) {
+    let x = positions[i];
+    let y = positions[i + 1];
+    let 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) {
+  // Create geometry once
+  const brainGeometry = useMemo(() => createBrainGeometry(), []);
+
+  // Ghost wireframe material - very faint gray
+  const wireframeMaterial = useMemo(
+    () =>
+      new THREE.MeshBasicMaterial({
+        color: '#333333',
+        wireframe: true,
+        transparent: true,
+        opacity: opacity,
+      }),
+    [opacity]
+  );
+
+  // Cleanup on unmount to prevent GPU memory leaks
+  useEffect(() => {
+    return () => {
+      brainGeometry.dispose();
+      wireframeMaterial.dispose();
+    };
+  }, [brainGeometry, wireframeMaterial]);
+
+  // 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>
+  );
+}