claude-cortex 1.0.0 → 1.1.1

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

@@ -0,0 +1,306 @@
+'use client';
+
+/**
+ * Synapse Nodes
+ * Glowing junction points where neural connections meet
+ * Activity level affects glow intensity and pulsing speed
+ */
+
+import { useRef, useMemo, useEffect } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+
+// Jarvis-style golden/orange color palette
+const JARVIS_GOLD = '#FFD700';
+const JARVIS_ORANGE = '#FF8C00';
+const JARVIS_AMBER = '#FFB347';
+
+// Shared geometries to prevent memory leaks (created once, reused by all nodes)
+const SYNAPSE_OUTER_GEOMETRY = new THREE.SphereGeometry(1, 8, 8);
+const SYNAPSE_INNER_GEOMETRY = new THREE.SphereGeometry(1, 12, 12);
+const SYNAPSE_CORE_GEOMETRY = new THREE.SphereGeometry(1, 16, 16);
+const SPARK_GEOMETRY = new THREE.SphereGeometry(1, 6, 6);
+
+interface SynapseNodeProps {
+  position: [number, number, number];
+  activity?: number; // 0-1, affects visual intensity
+  color?: string;
+  size?: number;
+  label?: string;
+}
+
+/**
+ * Individual synapse junction point
+ */
+export function SynapseNode({
+  position,
+  activity = 0.5,
+  color,
+  size = 0.15,
+}: SynapseNodeProps) {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const glowRef = useRef<THREE.Mesh>(null);
+  const outerGlowRef = useRef<THREE.Mesh>(null);
+
+  // Determine color based on activity if not specified - Jarvis golden theme
+  const synapseColor = useMemo(() => {
+    if (color) return color;
+    if (activity > 0.7) return JARVIS_GOLD; // High activity - bright gold
+    if (activity > 0.4) return JARVIS_AMBER; // Medium activity - warm gold
+    return JARVIS_ORANGE; // Low activity - deep orange
+  }, [color, activity]);
+
+  useFrame((state) => {
+    if (!meshRef.current) return;
+
+    const time = state.clock.elapsedTime;
+
+    // Pulsing speed based on activity (more active = faster pulse)
+    const pulseSpeed = 2 + activity * 4;
+    const pulse = Math.sin(time * pulseSpeed) * 0.5 + 0.5;
+
+    // Scale pulsing
+    const scale = size * (1 + pulse * 0.3 * activity);
+    meshRef.current.scale.setScalar(scale);
+
+    // Core opacity
+    (meshRef.current.material as THREE.MeshBasicMaterial).opacity =
+      0.7 + pulse * 0.3;
+
+    // Inner glow
+    if (glowRef.current) {
+      glowRef.current.scale.setScalar(scale * 2);
+      (glowRef.current.material as THREE.MeshBasicMaterial).opacity =
+        (0.3 + pulse * 0.2) * activity;
+    }
+
+    // Outer glow (slower pulse)
+    if (outerGlowRef.current) {
+      const outerPulse = Math.sin(time * pulseSpeed * 0.5) * 0.5 + 0.5;
+      outerGlowRef.current.scale.setScalar(scale * 3.5 * (1 + outerPulse * 0.2));
+      (outerGlowRef.current.material as THREE.MeshBasicMaterial).opacity =
+        (0.1 + outerPulse * 0.1) * activity;
+    }
+  });
+
+  // Materials are created per-node since color varies, but geometries are shared
+  const outerMaterial = useMemo(
+    () => new THREE.MeshBasicMaterial({
+      color: synapseColor,
+      transparent: true,
+      opacity: 0.1,
+      depthWrite: false,
+    }),
+    [synapseColor]
+  );
+
+  const innerMaterial = useMemo(
+    () => new THREE.MeshBasicMaterial({
+      color: synapseColor,
+      transparent: true,
+      opacity: 0.3,
+      depthWrite: false,
+    }),
+    [synapseColor]
+  );
+
+  const coreMaterial = useMemo(
+    () => new THREE.MeshBasicMaterial({
+      color: synapseColor,
+      transparent: true,
+      opacity: 0.9,
+    }),
+    [synapseColor]
+  );
+
+  // Cleanup materials on unmount
+  useEffect(() => {
+    return () => {
+      outerMaterial.dispose();
+      innerMaterial.dispose();
+      coreMaterial.dispose();
+    };
+  }, [outerMaterial, innerMaterial, coreMaterial]);
+
+  return (
+    <group position={position}>
+      {/* Outer glow halo - uses shared geometry */}
+      <mesh ref={outerGlowRef} geometry={SYNAPSE_OUTER_GEOMETRY} material={outerMaterial} />
+
+      {/* Inner glow - uses shared geometry */}
+      <mesh ref={glowRef} geometry={SYNAPSE_INNER_GEOMETRY} material={innerMaterial} />
+
+      {/* Core node - uses shared geometry */}
+      <mesh ref={meshRef} geometry={SYNAPSE_CORE_GEOMETRY} material={coreMaterial} />
+    </group>
+  );
+}
+
+/**
+ * Action potential burst - triggered when a memory is accessed
+ */
+interface ActionPotentialProps {
+  position: [number, number, number];
+  onComplete?: () => void;
+  color?: string;
+}
+
+export function ActionPotential({
+  position,
+  onComplete,
+  color = JARVIS_GOLD, // Changed from white to Jarvis gold
+}: ActionPotentialProps) {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const progressRef = useRef(0);
+
+  useFrame((_, delta) => {
+    if (!meshRef.current) return;
+
+    progressRef.current += delta * 2;
+
+    if (progressRef.current >= 1) {
+      onComplete?.();
+      return;
+    }
+
+    // Expand and fade
+    const scale = 0.1 + progressRef.current * 2;
+    meshRef.current.scale.setScalar(scale);
+    (meshRef.current.material as THREE.MeshBasicMaterial).opacity =
+      (1 - progressRef.current) * 0.8;
+  });
+
+  const material = useMemo(
+    () => new THREE.MeshBasicMaterial({
+      color,
+      transparent: true,
+      opacity: 0.8,
+      depthWrite: false,
+    }),
+    [color]
+  );
+
+  useEffect(() => {
+    return () => material.dispose();
+  }, [material]);
+
+  return (
+    <mesh ref={meshRef} position={position} geometry={SYNAPSE_CORE_GEOMETRY} material={material} />
+  );
+}
+
+/**
+ * Synaptic spark - small burst effect
+ */
+export function SynapticSpark({
+  position,
+  direction,
+  color = JARVIS_AMBER, // Changed from cyan to Jarvis amber
+}: {
+  position: [number, number, number];
+  direction: [number, number, number];
+  color?: string;
+}) {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const progressRef = useRef(0);
+
+  useFrame((_, delta) => {
+    if (!meshRef.current) return;
+
+    progressRef.current += delta * 3;
+
+    if (progressRef.current >= 1) {
+      meshRef.current.visible = false;
+      return;
+    }
+
+    // Move in direction
+    meshRef.current.position.set(
+      position[0] + direction[0] * progressRef.current * 0.5,
+      position[1] + direction[1] * progressRef.current * 0.5,
+      position[2] + direction[2] * progressRef.current * 0.5
+    );
+
+    // Shrink and fade
+    meshRef.current.scale.setScalar(0.1 * (1 - progressRef.current));
+    (meshRef.current.material as THREE.MeshBasicMaterial).opacity =
+      (1 - progressRef.current) * 0.9;
+  });
+
+  const material = useMemo(
+    () => new THREE.MeshBasicMaterial({
+      color,
+      transparent: true,
+      opacity: 0.9,
+    }),
+    [color]
+  );
+
+  useEffect(() => {
+    return () => material.dispose();
+  }, [material]);
+
+  return (
+    <mesh ref={meshRef} position={position} geometry={SPARK_GEOMETRY} material={material} />
+  );
+}
+
+/**
+ * Collection of synapse nodes for the brain visualization
+ */
+interface SynapseNetworkProps {
+  nodes?: Array<{
+    position: [number, number, number];
+    activity: number;
+    color?: string;
+  }>;
+}
+
+type SynapseNodeData = {
+  position: [number, number, number];
+  activity: number;
+  color?: string;
+};
+
+export function SynapseNetwork({ nodes }: SynapseNetworkProps) {
+  // Default synapse positions throughout the brain
+  const defaultNodes = useMemo<SynapseNodeData[]>(
+    () => [
+      // Frontal region (STM)
+      { position: [0.5, 0.3, 2.5], activity: 0.8 },
+      { position: [-0.5, 0.2, 2.3], activity: 0.7 },
+      { position: [0, 0.5, 2.8], activity: 0.9 },
+
+      // Middle region (Episodic)
+      { position: [1, 0.3, 0.5], activity: 0.6 },
+      { position: [-1, 0.2, 0.3], activity: 0.5 },
+      { position: [0, 0.8, 0], activity: 0.7 },
+      { position: [1.5, 0, -0.5], activity: 0.4 },
+      { position: [-1.5, 0.1, -0.3], activity: 0.5 },
+
+      // Back region (LTM)
+      { position: [0.3, 0.2, -2.5], activity: 0.3 },
+      { position: [-0.5, 0.3, -2.3], activity: 0.4 },
+      { position: [0, 0.4, -2.8], activity: 0.3 },
+      { position: [1, 0.1, -2], activity: 0.2 },
+      { position: [-1, 0.2, -2.2], activity: 0.25 },
+    ],
+    []
+  );
+
+  const synapseNodes: SynapseNodeData[] = nodes || defaultNodes;
+
+  return (
+    <group name="synapse-network">
+      {synapseNodes.map((node, i) => (
+        <SynapseNode
+          key={i}
+          position={node.position}
+          activity={node.activity}
+          color={node.color}
+          size={0.08 + node.activity * 0.04}
+        />
+      ))}
+    </group>
+  );
+}

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

@@ -0,0 +1,205 @@
+'use client';
+
+/**
+ * Timeline Controls
+ *
+ * Provides timeline-based filtering and age visualization for memories.
+ * Shows a slider to filter by time range and displays age distribution.
+ */
+
+import { useMemo, useState, useCallback } from 'react';
+import { Memory } from '@/types/memory';
+
+type ColorMode = 'category' | 'health' | 'age' | 'holographic';
+
+interface TimelineControlsProps {
+  memories: Memory[];
+  onTimeRangeChange: (range: { start: Date | null; end: Date | null }) => void;
+  colorMode: ColorMode;
+  onColorModeChange: (mode: ColorMode) => void;
+}
+
+// Time presets for quick filtering
+const TIME_PRESETS = [
+  { label: 'All', hours: null },
+  { label: '1h', hours: 1 },
+  { label: '24h', hours: 24 },
+  { label: '7d', hours: 24 * 7 },
+  { label: '30d', hours: 24 * 30 },
+];
+
+export function TimelineControls({
+  memories,
+  onTimeRangeChange,
+  colorMode,
+  onColorModeChange,
+}: TimelineControlsProps) {
+  const [activePreset, setActivePreset] = useState<number | null>(null);
+
+  // Calculate memory age distribution for the histogram
+  const ageDistribution = useMemo(() => {
+    if (!memories.length) return [];
+
+    const now = Date.now();
+    const buckets = [
+      { label: '<1h', max: 60 * 60 * 1000, count: 0 },
+      { label: '1-24h', max: 24 * 60 * 60 * 1000, count: 0 },
+      { label: '1-7d', max: 7 * 24 * 60 * 60 * 1000, count: 0 },
+      { label: '7-30d', max: 30 * 24 * 60 * 60 * 1000, count: 0 },
+      { label: '>30d', max: Infinity, count: 0 },
+    ];
+
+    memories.forEach((memory) => {
+      const age = now - new Date(memory.createdAt).getTime();
+      for (const bucket of buckets) {
+        if (age < bucket.max) {
+          bucket.count++;
+          break;
+        }
+      }
+    });
+
+    const maxCount = Math.max(...buckets.map((b) => b.count), 1);
+    return buckets.map((b) => ({ ...b, height: (b.count / maxCount) * 100 }));
+  }, [memories]);
+
+  // Calculate oldest and newest memory dates
+  const dateRange = useMemo(() => {
+    if (!memories.length) return { oldest: null, newest: null };
+    const dates = memories.map((m) => new Date(m.createdAt).getTime());
+    return {
+      oldest: new Date(Math.min(...dates)),
+      newest: new Date(Math.max(...dates)),
+    };
+  }, [memories]);
+
+  const handlePresetClick = useCallback(
+    (hours: number | null, index: number) => {
+      setActivePreset(index);
+      if (hours === null) {
+        onTimeRangeChange({ start: null, end: null });
+      } else {
+        const end = new Date();
+        const start = new Date(end.getTime() - hours * 60 * 60 * 1000);
+        onTimeRangeChange({ start, end });
+      }
+    },
+    [onTimeRangeChange]
+  );
+
+  return (
+    <div className="absolute bottom-4 right-4 bg-slate-900/90 border border-slate-700 rounded-lg p-3 backdrop-blur-sm min-w-[200px]">
+      {/* Color Mode Toggle */}
+      <div className="mb-3">
+        <div className="text-xs text-slate-400 mb-1.5">Color Mode</div>
+        <div className="flex gap-1">
+          {[
+            { value: 'category', label: 'Category', icon: '🎨' },
+            { value: 'health', label: 'Health', icon: '💚' },
+            { value: 'age', label: 'Age', icon: '⏰' },
+            { value: 'holographic', label: 'Holo', icon: '✨' },
+          ].map((mode) => (
+            <button
+              key={mode.value}
+              onClick={() => onColorModeChange(mode.value as ColorMode)}
+              className={`flex-1 px-2 py-1 text-[10px] rounded transition-colors ${
+                colorMode === mode.value
+                  ? mode.value === 'holographic' ? 'bg-amber-500 text-white' : 'bg-blue-600 text-white'
+                  : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
+              }`}
+            >
+              <span className="mr-0.5">{mode.icon}</span>
+              {mode.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Time Filter Presets */}
+      <div className="mb-3">
+        <div className="text-xs text-slate-400 mb-1.5">Time Filter</div>
+        <div className="flex gap-1">
+          {TIME_PRESETS.map((preset, i) => (
+            <button
+              key={preset.label}
+              onClick={() => handlePresetClick(preset.hours, i)}
+              className={`flex-1 px-2 py-1 text-[10px] rounded transition-colors ${
+                activePreset === i
+                  ? 'bg-cyan-600 text-white'
+                  : 'bg-slate-800 text-slate-400 hover:bg-slate-700'
+              }`}
+            >
+              {preset.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Age Distribution Histogram */}
+      <div>
+        <div className="text-xs text-slate-400 mb-1.5">Age Distribution</div>
+        <div className="flex items-end gap-0.5 h-8">
+          {ageDistribution.map((bucket) => (
+            <div key={bucket.label} className="flex-1 flex flex-col items-center">
+              <div
+                className="w-full bg-gradient-to-t from-cyan-600 to-cyan-400 rounded-t transition-all"
+                style={{ height: `${Math.max(bucket.height, 4)}%` }}
+                title={`${bucket.label}: ${bucket.count} memories`}
+              />
+            </div>
+          ))}
+        </div>
+        <div className="flex gap-0.5 mt-0.5">
+          {ageDistribution.map((bucket) => (
+            <div
+              key={bucket.label}
+              className="flex-1 text-[8px] text-slate-500 text-center truncate"
+            >
+              {bucket.label}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Date Range Info */}
+      {dateRange.oldest && dateRange.newest && (
+        <div className="mt-2 pt-2 border-t border-slate-700 text-[9px] text-slate-500">
+          <div className="flex justify-between">
+            <span>Oldest:</span>
+            <span>{dateRange.oldest.toLocaleDateString()}</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Newest:</span>
+            <span>{dateRange.newest.toLocaleDateString()}</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Get age-based color for a memory
+ * New (cyan) → Recent (green) → Old (amber) → Ancient (red)
+ */
+export function getAgeColor(createdAt: string | Date): string {
+  const age = Date.now() - new Date(createdAt).getTime();
+  const hours = age / (60 * 60 * 1000);
+
+  if (hours < 1) {
+    // Very new - bright cyan
+    return '#22d3ee';
+  } else if (hours < 24) {
+    // Recent - green
+    return '#22c55e';
+  } else if (hours < 24 * 7) {
+    // This week - yellow
+    return '#eab308';
+  } else if (hours < 24 * 30) {
+    // This month - amber/orange
+    return '#f97316';
+  } else {
+    // Old - red
+    return '#ef4444';
+  }
+}