claude-cortex 1.0.0 → 1.1.1

package/dashboard/src/components/chip/MemoryGrid.tsx

@@ -0,0 +1,328 @@
+'use client';
+
+/**
+ * Memory Grid
+ * Organizes memories in a grid layout within each memory bank section
+ * Automatically switches between MemoryCell and QuantumCell based on salience
+ */
+
+import { useMemo } from 'react';
+import { Memory, MemoryType } from '@/types/memory';
+import { MemoryCell } from './MemoryCell';
+import { QuantumCell } from './QuantumCell';
+
+// Salience threshold for quantum cells
+const QUANTUM_THRESHOLD = 0.7;
+
+interface GridConfig {
+  columns: number;
+  cellWidth: number;
+  cellHeight: number;
+  horizontalGap: number;
+  verticalGap: number;
+}
+
+interface MemoryGridProps {
+  memories: Memory[];
+  memoryType: MemoryType;
+  chipWidth: number;
+  chipHeight: number;
+  selectedMemory: Memory | null;
+  onSelectMemory: (memory: Memory | null) => void;
+}
+
+// Calculate grid position for a memory at given index
+function calculateGridPosition(
+  index: number,
+  config: GridConfig,
+  sectionOffset: { x: number; y: number; z: number },
+  sectionWidth: number
+): [number, number, number] {
+  const { columns, cellWidth, horizontalGap, verticalGap } = config;
+
+  const col = index % columns;
+  const row = Math.floor(index / columns);
+
+  // Calculate total grid width
+  const gridWidth = columns * cellWidth + (columns - 1) * horizontalGap;
+  const startX = -gridWidth / 2 + cellWidth / 2;
+
+  const x = sectionOffset.x + startX + col * (cellWidth + horizontalGap);
+  const y = sectionOffset.y - row * (cellWidth * 0.6 + verticalGap);
+  const z = sectionOffset.z;
+
+  return [x, y, z];
+}
+
+export function MemoryGrid({
+  memories,
+  memoryType,
+  chipWidth,
+  chipHeight,
+  selectedMemory,
+  onSelectMemory,
+}: MemoryGridProps) {
+  const sectionHeight = chipHeight / 3;
+  const halfChipHeight = chipHeight / 2;
+
+  // Grid configuration
+  const gridConfig: GridConfig = useMemo(
+    () => ({
+      columns: 8,
+      cellWidth: 1.0,
+      cellHeight: 0.6,
+      horizontalGap: 0.4,
+      verticalGap: 0.3,
+    }),
+    []
+  );
+
+  // Section offset based on memory type
+  const sectionOffset = useMemo(() => {
+    switch (memoryType) {
+      case 'short_term':
+        return {
+          x: 0,
+          y: halfChipHeight - sectionHeight * 0.35,
+          z: 0.2,
+        };
+      case 'long_term':
+        return {
+          x: 0,
+          y: -halfChipHeight + sectionHeight * 0.65,
+          z: 0.2,
+        };
+      case 'episodic':
+      default:
+        return {
+          x: 0,
+          y: 0,
+          z: 0.2,
+        };
+    }
+  }, [memoryType, halfChipHeight, sectionHeight]);
+
+  // Filter memories by type
+  const filteredMemories = useMemo(() => {
+    return memories.filter((m) => m.type === memoryType);
+  }, [memories, memoryType]);
+
+  // Sort memories by salience (highest first) for better visual hierarchy
+  const sortedMemories = useMemo(() => {
+    return [...filteredMemories].sort((a, b) => b.salience - a.salience);
+  }, [filteredMemories]);
+
+  return (
+    <group>
+      {sortedMemories.map((memory, index) => {
+        const position = calculateGridPosition(
+          index,
+          gridConfig,
+          sectionOffset,
+          chipWidth
+        );
+
+        const isQuantum = memory.salience >= QUANTUM_THRESHOLD;
+
+        if (isQuantum) {
+          return (
+            <QuantumCell
+              key={memory.id}
+              memory={memory}
+              position={position}
+              onSelect={onSelectMemory}
+              isSelected={selectedMemory?.id === memory.id}
+              size={1.2}
+            />
+          );
+        }
+
+        return (
+          <MemoryCell
+            key={memory.id}
+            memory={memory}
+            position={position}
+            onSelect={onSelectMemory}
+            isSelected={selectedMemory?.id === memory.id}
+          />
+        );
+      })}
+    </group>
+  );
+}
+
+// Get grid position for a specific memory (used by pulse animations)
+export function getMemoryGridPosition(
+  memory: Memory,
+  memories: Memory[],
+  chipWidth: number,
+  chipHeight: number
+): [number, number, number] | null {
+  const sectionHeight = chipHeight / 3;
+  const halfChipHeight = chipHeight / 2;
+
+  const gridConfig: GridConfig = {
+    columns: 8,
+    cellWidth: 1.0,
+    cellHeight: 0.6,
+    horizontalGap: 0.4,
+    verticalGap: 0.3,
+  };
+
+  // Get section offset
+  let sectionOffset: { x: number; y: number; z: number };
+  switch (memory.type) {
+    case 'short_term':
+      sectionOffset = {
+        x: 0,
+        y: halfChipHeight - sectionHeight * 0.35,
+        z: 0.2,
+      };
+      break;
+    case 'long_term':
+      sectionOffset = {
+        x: 0,
+        y: -halfChipHeight + sectionHeight * 0.65,
+        z: 0.2,
+      };
+      break;
+    case 'episodic':
+    default:
+      sectionOffset = {
+        x: 0,
+        y: 0,
+        z: 0.2,
+      };
+  }
+
+  // Find index of this memory in its section (sorted by salience)
+  const sectionMemories = memories
+    .filter((m) => m.type === memory.type)
+    .sort((a, b) => b.salience - a.salience);
+
+  const index = sectionMemories.findIndex((m) => m.id === memory.id);
+  if (index === -1) return null;
+
+  return calculateGridPosition(index, gridConfig, sectionOffset, chipWidth);
+}
+
+// Episodic memories need special handling since they're split left/right of core
+export function EpisodicMemoryGrid({
+  memories,
+  chipWidth,
+  chipHeight,
+  coreWidth,
+  selectedMemory,
+  onSelectMemory,
+}: {
+  memories: Memory[];
+  chipWidth: number;
+  chipHeight: number;
+  coreWidth: number;
+  selectedMemory: Memory | null;
+  onSelectMemory: (memory: Memory | null) => void;
+}) {
+  const episodicMemories = useMemo(() => {
+    return memories
+      .filter((m) => m.type === 'episodic')
+      .sort((a, b) => b.salience - a.salience);
+  }, [memories]);
+
+  // Split memories between left and right of core
+  const leftMemories = episodicMemories.filter((_, i) => i % 2 === 0);
+  const rightMemories = episodicMemories.filter((_, i) => i % 2 === 1);
+
+  const gridConfig: GridConfig = {
+    columns: 3,
+    cellWidth: 1.0,
+    cellHeight: 0.6,
+    horizontalGap: 0.4,
+    verticalGap: 0.3,
+  };
+
+  const leftOffset = {
+    x: -coreWidth - 2,
+    y: 0.5,
+    z: 0.2,
+  };
+
+  const rightOffset = {
+    x: coreWidth + 2,
+    y: 0.5,
+    z: 0.2,
+  };
+
+  return (
+    <group>
+      {/* Left side */}
+      {leftMemories.map((memory, index) => {
+        const position = calculateGridPosition(
+          index,
+          gridConfig,
+          leftOffset,
+          chipWidth / 2 - coreWidth
+        );
+
+        const isQuantum = memory.salience >= QUANTUM_THRESHOLD;
+
+        if (isQuantum) {
+          return (
+            <QuantumCell
+              key={memory.id}
+              memory={memory}
+              position={position}
+              onSelect={onSelectMemory}
+              isSelected={selectedMemory?.id === memory.id}
+              size={1.2}
+            />
+          );
+        }
+
+        return (
+          <MemoryCell
+            key={memory.id}
+            memory={memory}
+            position={position}
+            onSelect={onSelectMemory}
+            isSelected={selectedMemory?.id === memory.id}
+          />
+        );
+      })}
+
+      {/* Right side */}
+      {rightMemories.map((memory, index) => {
+        const position = calculateGridPosition(
+          index,
+          gridConfig,
+          rightOffset,
+          chipWidth / 2 - coreWidth
+        );
+
+        const isQuantum = memory.salience >= QUANTUM_THRESHOLD;
+
+        if (isQuantum) {
+          return (
+            <QuantumCell
+              key={memory.id}
+              memory={memory}
+              position={position}
+              onSelect={onSelectMemory}
+              isSelected={selectedMemory?.id === memory.id}
+              size={1.2}
+            />
+          );
+        }
+
+        return (
+          <MemoryCell
+            key={memory.id}
+            memory={memory}
+            position={position}
+            onSelect={onSelectMemory}
+            isSelected={selectedMemory?.id === memory.id}
+          />
+        );
+      })}
+    </group>
+  );
+}

package/dashboard/src/components/chip/QuantumCell.tsx

@@ -0,0 +1,316 @@
+'use client';
+
+/**
+ * Quantum Cell
+ * High-salience memories rendered as rotating Bloch spheres
+ * Represents "quantum" memories with special visual treatment
+ */
+
+import { useRef, useMemo, useState, useCallback } from 'react';
+import { useFrame, ThreeEvent } from '@react-three/fiber';
+import { Html } from '@react-three/drei';
+import * as THREE from 'three';
+import { Memory, MemoryCategory } from '@/types/memory';
+
+// Category color mapping (same as MemoryCell)
+const CATEGORY_COLORS: Record<MemoryCategory, string> = {
+  architecture: '#06b6d4',
+  pattern: '#22c55e',
+  preference: '#eab308',
+  error: '#ef4444',
+  context: '#f97316',
+  learning: '#84cc16',
+  todo: '#a855f7',
+  note: '#3b82f6',
+  relationship: '#6366f1',
+  custom: '#ec4899',
+};
+
+// Category angles for state vector direction (in radians)
+const CATEGORY_ANGLES: Record<MemoryCategory, number> = {
+  architecture: 0,
+  pattern: Math.PI / 5,
+  preference: (2 * Math.PI) / 5,
+  error: (3 * Math.PI) / 5,
+  context: (4 * Math.PI) / 5,
+  learning: Math.PI,
+  todo: (6 * Math.PI) / 5,
+  note: (7 * Math.PI) / 5,
+  relationship: (8 * Math.PI) / 5,
+  custom: (9 * Math.PI) / 5,
+};
+
+interface QuantumCellProps {
+  memory: Memory;
+  position: [number, number, number];
+  onSelect?: (memory: Memory | null) => void;
+  isSelected?: boolean;
+  size?: number;
+}
+
+export function QuantumCell({
+  memory,
+  position,
+  onSelect,
+  isSelected = false,
+  size = 1,
+}: QuantumCellProps) {
+  const groupRef = useRef<THREE.Group>(null);
+  const sphereRef = useRef<THREE.LineSegments>(null);
+  const arrowRef = useRef<THREE.Group>(null);
+  const glowRef = useRef<THREE.Mesh>(null);
+  const interferenceRef = useRef<THREE.Points>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const color = CATEGORY_COLORS[memory.category] || CATEGORY_COLORS.custom;
+  const stateAngle = CATEGORY_ANGLES[memory.category] || 0;
+
+  // Sphere wireframe geometry
+  const sphereGeometry = useMemo(() => {
+    const sphere = new THREE.SphereGeometry(0.4, 16, 12);
+    return new THREE.EdgesGeometry(sphere);
+  }, []);
+
+  // Wireframe material
+  const wireMaterial = useMemo(() => {
+    return new THREE.LineBasicMaterial({
+      color: color,
+      transparent: true,
+      opacity: 0.6,
+    });
+  }, [color]);
+
+  // Glow sphere material
+  const glowMaterial = useMemo(() => {
+    return new THREE.MeshBasicMaterial({
+      color: color,
+      transparent: true,
+      opacity: 0.15,
+      side: THREE.BackSide,
+    });
+  }, [color]);
+
+  // Interference pattern particles
+  const interferenceGeometry = useMemo(() => {
+    const positions = new Float32Array(60 * 3);
+    for (let i = 0; i < 60; i++) {
+      const theta = Math.random() * Math.PI * 2;
+      const phi = Math.acos(2 * Math.random() - 1);
+      const r = 0.35 + Math.random() * 0.1;
+      positions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
+      positions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
+      positions[i * 3 + 2] = r * Math.cos(phi);
+    }
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+    return geometry;
+  }, []);
+
+  // Animate rotation and effects
+  useFrame((state) => {
+    if (!groupRef.current) return;
+
+    const time = state.clock.elapsedTime;
+    const rotationSpeed = 0.3 + memory.salience * 0.3;
+
+    // Continuous rotation
+    groupRef.current.rotation.y = time * rotationSpeed;
+    groupRef.current.rotation.x = Math.sin(time * 0.5) * 0.1;
+
+    // Hover/select: speed up rotation
+    if (isHovered || isSelected) {
+      groupRef.current.rotation.y = time * rotationSpeed * 2;
+    }
+
+    // Wireframe pulse
+    if (sphereRef.current) {
+      const mat = sphereRef.current.material as THREE.LineBasicMaterial;
+      const pulse = Math.sin(time * 2) * 0.5 + 0.5;
+      mat.opacity = 0.4 + pulse * 0.3 + memory.salience * 0.2;
+      if (isHovered || isSelected) {
+        mat.opacity += 0.2;
+      }
+    }
+
+    // Glow pulse
+    if (glowRef.current) {
+      const mat = glowRef.current.material as THREE.MeshBasicMaterial;
+      const pulse = Math.sin(time * 1.5) * 0.5 + 0.5;
+      mat.opacity = 0.1 + pulse * 0.15;
+      glowRef.current.scale.setScalar(1.2 + pulse * 0.1);
+    }
+
+    // Interference shimmer
+    if (interferenceRef.current) {
+      const positions = interferenceRef.current.geometry.attributes.position.array as Float32Array;
+      for (let i = 0; i < positions.length / 3; i++) {
+        const idx = i * 3;
+        const shimmer = Math.sin(time * 3 + i * 0.5) * 0.02;
+        // Just modify radius slightly for shimmer effect
+        const x = positions[idx];
+        const y = positions[idx + 1];
+        const z = positions[idx + 2];
+        const r = Math.sqrt(x * x + y * y + z * z);
+        const newR = 0.38 + shimmer;
+        const scale = newR / r;
+        positions[idx] = x * scale;
+        positions[idx + 1] = y * scale;
+        positions[idx + 2] = z * scale;
+      }
+      interferenceRef.current.geometry.attributes.position.needsUpdate = true;
+    }
+  });
+
+  const handleClick = useCallback(
+    (e: ThreeEvent<MouseEvent>) => {
+      e.stopPropagation();
+      onSelect?.(isSelected ? null : memory);
+    },
+    [memory, onSelect, isSelected]
+  );
+
+  const handlePointerOver = useCallback((e: ThreeEvent<PointerEvent>) => {
+    e.stopPropagation();
+    setIsHovered(true);
+    document.body.style.cursor = 'pointer';
+  }, []);
+
+  const handlePointerOut = useCallback(() => {
+    setIsHovered(false);
+    document.body.style.cursor = 'auto';
+  }, []);
+
+  return (
+    <group position={position} scale={size}>
+      <group
+        ref={groupRef}
+        onClick={handleClick}
+        onPointerOver={handlePointerOver}
+        onPointerOut={handlePointerOut}
+      >
+        {/* Wireframe Bloch sphere */}
+        <lineSegments ref={sphereRef} geometry={sphereGeometry} material={wireMaterial} />
+
+        {/* Axis lines */}
+        <AxisLines color={color} />
+
+        {/* State vector arrow */}
+        <group ref={arrowRef} rotation={[0, stateAngle, Math.PI / 4]}>
+          <StateVector color={color} />
+        </group>
+
+        {/* Glow sphere */}
+        <mesh ref={glowRef}>
+          <sphereGeometry args={[0.5, 12, 8]} />
+          <primitive object={glowMaterial} />
+        </mesh>
+
+        {/* Interference pattern particles */}
+        <points ref={interferenceRef} geometry={interferenceGeometry}>
+          <pointsMaterial
+            color={color}
+            size={0.03}
+            transparent
+            opacity={0.4}
+            sizeAttenuation
+          />
+        </points>
+
+        {/* Clickable invisible sphere */}
+        <mesh visible={false}>
+          <sphereGeometry args={[0.5, 8, 6]} />
+          <meshBasicMaterial transparent opacity={0} />
+        </mesh>
+      </group>
+
+      {/* Selection ring */}
+      {isSelected && (
+        <mesh rotation={[Math.PI / 2, 0, 0]} position={[0, 0, 0]}>
+          <ringGeometry args={[0.55, 0.6, 32]} />
+          <meshBasicMaterial color="#ffffff" transparent opacity={0.7} side={THREE.DoubleSide} />
+        </mesh>
+      )}
+
+      {/* Quantum label */}
+      <Html
+        position={[0, -0.6, 0]}
+        center
+        style={{ pointerEvents: 'none' }}
+      >
+        <div className="text-[8px] font-mono text-amber-400/60 whitespace-nowrap">
+          |Q{memory.id}⟩
+        </div>
+      </Html>
+
+      {/* Tooltip on hover */}
+      {isHovered && (
+        <Html
+          position={[0, 0.7, 0]}
+          center
+          style={{
+            pointerEvents: 'none',
+            transform: 'translateY(-100%)',
+          }}
+        >
+          <div className="bg-slate-900/95 border border-amber-600/50 rounded-lg px-3 py-2 text-xs max-w-[220px] backdrop-blur-sm shadow-lg">
+            <div className="flex items-center gap-2 mb-1">
+              <span className="text-amber-400 text-[10px]">QUANTUM</span>
+              <span className="text-slate-500">|</span>
+              <span className="text-slate-400">{Math.round(memory.salience * 100)}% salience</span>
+            </div>
+            <div className="font-semibold text-white truncate">{memory.title}</div>
+            <div className="text-slate-400 mt-1 flex items-center gap-2">
+              <span
+                className="w-2 h-2 rounded-full"
+                style={{ backgroundColor: color }}
+              />
+              <span className="capitalize">{memory.category}</span>
+            </div>
+          </div>
+        </Html>
+      )}
+    </group>
+  );
+}
+
+// Axis lines (x, y, z) inside the Bloch sphere
+function AxisLines({ color }: { color: string }) {
+  const geometry = useMemo(() => {
+    const points = [
+      // X axis
+      new THREE.Vector3(-0.35, 0, 0),
+      new THREE.Vector3(0.35, 0, 0),
+      // Y axis
+      new THREE.Vector3(0, -0.35, 0),
+      new THREE.Vector3(0, 0.35, 0),
+      // Z axis
+      new THREE.Vector3(0, 0, -0.35),
+      new THREE.Vector3(0, 0, 0.35),
+    ];
+    return new THREE.BufferGeometry().setFromPoints(points);
+  }, []);
+
+  return (
+    <lineSegments geometry={geometry}>
+      <lineBasicMaterial color={color} transparent opacity={0.3} />
+    </lineSegments>
+  );
+}
+
+// State vector arrow pointing in a direction
+function StateVector({ color }: { color: string }) {
+  return (
+    <group>
+      {/* Arrow shaft */}
+      <mesh position={[0, 0.15, 0]}>
+        <cylinderGeometry args={[0.02, 0.02, 0.3, 8]} />
+        <meshBasicMaterial color={color} />
+      </mesh>
+      {/* Arrow head */}
+      <mesh position={[0, 0.32, 0]}>
+        <coneGeometry args={[0.05, 0.1, 8]} />
+        <meshBasicMaterial color={color} />
+      </mesh>
+    </group>
+  );
+}