shieldcortex 2.1.1 → 2.1.3

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

@@ -1,416 +0,0 @@
-'use client';
-
-/**
- * Data Bus
- * Trace lines connecting the Cortex Core to memory banks
- * Supports pulse animations for access events
- */
-
-import { useMemo, useRef } from 'react';
-import { useFrame } from '@react-three/fiber';
-import * as THREE from 'three';
-
-interface DataBusProps {
-  chipWidth?: number;
-  chipHeight?: number;
-  coreWidth?: number;
-  coreHeight?: number;
-}
-
-interface BusLineProps {
-  start: [number, number, number];
-  end: [number, number, number];
-  color?: string;
-}
-
-// Single bus trace line
-function BusLine({ start, end, color = '#FFB347' }: BusLineProps) {
-  const geometry = useMemo(() => {
-    const points = [new THREE.Vector3(...start), new THREE.Vector3(...end)];
-    return new THREE.BufferGeometry().setFromPoints(points);
-  }, [start, end]);
-
-  return (
-    <line>
-      <primitive object={geometry} />
-      <lineBasicMaterial color={color} opacity={0.6} transparent linewidth={2} />
-    </line>
-  );
-}
-
-// Branching bus traces (main trunk + branches)
-function BusBranch({
-  trunk,
-  branches,
-  color = '#FFB347',
-}: {
-  trunk: { start: [number, number, number]; end: [number, number, number] };
-  branches: { start: [number, number, number]; end: [number, number, number] }[];
-  color?: string;
-}) {
-  return (
-    <group>
-      <BusLine start={trunk.start} end={trunk.end} color={color} />
-      {branches.map((branch, i) => (
-        <BusLine key={i} start={branch.start} end={branch.end} color={color} />
-      ))}
-    </group>
-  );
-}
-
-export function DataBus({
-  chipWidth = 16,
-  chipHeight = 12,
-  coreWidth = 2,
-  coreHeight = 1.2,
-}: DataBusProps) {
-  const sectionHeight = chipHeight / 3;
-  const halfChipHeight = chipHeight / 2;
-  const halfCoreHeight = coreHeight / 2;
-  const halfCoreWidth = coreWidth / 2;
-
-  // Z position for all traces (slightly above substrate)
-  const z = 0.05;
-
-  // Generate bus traces
-  const busTraces = useMemo(() => {
-    // Main vertical trunk to STM (top)
-    const stmTrunk = {
-      start: [0, halfCoreHeight + 0.1, z] as [number, number, number],
-      end: [0, halfChipHeight - sectionHeight * 0.3, z] as [number, number, number],
-    };
-
-    // Branches to STM grid columns
-    const stmBranches: { start: [number, number, number]; end: [number, number, number] }[] = [];
-    const branchY = halfChipHeight - sectionHeight * 0.5;
-    for (let i = -3; i <= 3; i++) {
-      if (i !== 0) {
-        const x = i * 1.5;
-        stmBranches.push({
-          start: [0, branchY, z],
-          end: [x, branchY, z],
-        });
-        // Vertical segment to grid
-        stmBranches.push({
-          start: [x, branchY, z],
-          end: [x, halfChipHeight - sectionHeight * 0.2, z],
-        });
-      }
-    }
-
-    // Main vertical trunk to LTM (bottom)
-    const ltmTrunk = {
-      start: [0, -halfCoreHeight - 0.1, z] as [number, number, number],
-      end: [0, -halfChipHeight + sectionHeight * 0.3, z] as [number, number, number],
-    };
-
-    // Branches to LTM grid columns
-    const ltmBranches: { start: [number, number, number]; end: [number, number, number] }[] = [];
-    const ltmBranchY = -halfChipHeight + sectionHeight * 0.5;
-    for (let i = -3; i <= 3; i++) {
-      if (i !== 0) {
-        const x = i * 1.5;
-        ltmBranches.push({
-          start: [0, ltmBranchY, z],
-          end: [x, ltmBranchY, z],
-        });
-        // Vertical segment to grid
-        ltmBranches.push({
-          start: [x, ltmBranchY, z],
-          end: [x, -halfChipHeight + sectionHeight * 0.2, z],
-        });
-      }
-    }
-
-    // Horizontal traces to Episodic (left)
-    const episodicLeftTrunk = {
-      start: [-halfCoreWidth - 0.1, 0, z] as [number, number, number],
-      end: [-chipWidth / 2 + 1.5, 0, z] as [number, number, number],
-    };
-
-    const episodicLeftBranches: { start: [number, number, number]; end: [number, number, number] }[] = [];
-    for (let i = 0; i < 3; i++) {
-      const x = -halfCoreWidth - 1 - i * 1.5;
-      episodicLeftBranches.push({
-        start: [x, 0, z],
-        end: [x, sectionHeight * 0.3, z],
-      });
-      episodicLeftBranches.push({
-        start: [x, 0, z],
-        end: [x, -sectionHeight * 0.3, z],
-      });
-    }
-
-    // Horizontal traces to Episodic (right)
-    const episodicRightTrunk = {
-      start: [halfCoreWidth + 0.1, 0, z] as [number, number, number],
-      end: [chipWidth / 2 - 1.5, 0, z] as [number, number, number],
-    };
-
-    const episodicRightBranches: { start: [number, number, number]; end: [number, number, number] }[] = [];
-    for (let i = 0; i < 3; i++) {
-      const x = halfCoreWidth + 1 + i * 1.5;
-      episodicRightBranches.push({
-        start: [x, 0, z],
-        end: [x, sectionHeight * 0.3, z],
-      });
-      episodicRightBranches.push({
-        start: [x, 0, z],
-        end: [x, -sectionHeight * 0.3, z],
-      });
-    }
-
-    return {
-      stm: { trunk: stmTrunk, branches: stmBranches },
-      ltm: { trunk: ltmTrunk, branches: ltmBranches },
-      episodicLeft: { trunk: episodicLeftTrunk, branches: episodicLeftBranches },
-      episodicRight: { trunk: episodicRightTrunk, branches: episodicRightBranches },
-    };
-  }, [chipWidth, chipHeight, halfChipHeight, halfCoreHeight, halfCoreWidth, sectionHeight]);
-
-  return (
-    <group>
-      {/* STM bus (top) */}
-      <BusBranch trunk={busTraces.stm.trunk} branches={busTraces.stm.branches} color="#FFB347" />
-
-      {/* LTM bus (bottom) */}
-      <BusBranch trunk={busTraces.ltm.trunk} branches={busTraces.ltm.branches} color="#FFB347" />
-
-      {/* Episodic bus (left) */}
-      <BusBranch trunk={busTraces.episodicLeft.trunk} branches={busTraces.episodicLeft.branches} color="#FFB347" />
-
-      {/* Episodic bus (right) */}
-      <BusBranch trunk={busTraces.episodicRight.trunk} branches={busTraces.episodicRight.branches} color="#FFB347" />
-
-      {/* Junction nodes at branch points */}
-      <JunctionNodes chipWidth={chipWidth} chipHeight={chipHeight} coreWidth={coreWidth} />
-    </group>
-  );
-}
-
-// Small glowing nodes at bus junctions
-function JunctionNodes({
-  chipWidth,
-  chipHeight,
-  coreWidth,
-}: {
-  chipWidth: number;
-  chipHeight: number;
-  coreWidth: number;
-}) {
-  const nodesRef = useRef<THREE.InstancedMesh>(null);
-  const nodeGeometry = useMemo(() => new THREE.CircleGeometry(0.06, 8), []);
-  const nodeMaterial = useMemo(
-    () =>
-      new THREE.MeshBasicMaterial({
-        color: '#FFD700',
-        transparent: true,
-        opacity: 0.8,
-      }),
-    []
-  );
-
-  const positions = useMemo(() => {
-    const sectionHeight = chipHeight / 3;
-    const halfChipHeight = chipHeight / 2;
-    const halfCoreWidth = coreWidth / 2;
-    const z = 0.06;
-
-    const nodes: [number, number, number][] = [
-      // Core connection points
-      [0, halfCoreWidth * 0.6 + 0.1, z],
-      [0, -halfCoreWidth * 0.6 - 0.1, z],
-      [-halfCoreWidth - 0.1, 0, z],
-      [halfCoreWidth + 0.1, 0, z],
-    ];
-
-    // STM branch junctions
-    const stmBranchY = halfChipHeight - sectionHeight * 0.5;
-    for (let i = -3; i <= 3; i++) {
-      if (i !== 0) {
-        nodes.push([i * 1.5, stmBranchY, z]);
-      }
-    }
-
-    // LTM branch junctions
-    const ltmBranchY = -halfChipHeight + sectionHeight * 0.5;
-    for (let i = -3; i <= 3; i++) {
-      if (i !== 0) {
-        nodes.push([i * 1.5, ltmBranchY, z]);
-      }
-    }
-
-    // Episodic branch junctions
-    for (let i = 0; i < 3; i++) {
-      nodes.push([-halfCoreWidth - 1 - i * 1.5, 0, z]);
-      nodes.push([halfCoreWidth + 1 + i * 1.5, 0, z]);
-    }
-
-    return nodes;
-  }, [chipHeight, coreWidth]);
-
-  // Animate junction glow
-  useFrame((state) => {
-    if (nodesRef.current) {
-      const material = nodesRef.current.material as THREE.MeshBasicMaterial;
-      const pulse = Math.sin(state.clock.elapsedTime * 3) * 0.5 + 0.5;
-      material.opacity = 0.5 + pulse * 0.3;
-    }
-  });
-
-  return (
-    <instancedMesh
-      ref={nodesRef}
-      args={[nodeGeometry, nodeMaterial, positions.length]}
-    >
-      {positions.map((pos, i) => {
-        const matrix = new THREE.Matrix4().setPosition(...pos);
-        nodesRef.current?.setMatrixAt(i, matrix);
-        return null;
-      })}
-    </instancedMesh>
-  );
-}
-
-// Pulse that travels along the data bus
-export interface AccessPulseData {
-  id: number;
-  memoryId: number;
-  section: 'stm' | 'episodic' | 'ltm';
-  gridPosition: [number, number]; // Column, row in grid
-  color: string;
-  startTime: number;
-}
-
-interface DataBusPulseProps {
-  pulse: AccessPulseData;
-  chipWidth: number;
-  chipHeight: number;
-  onComplete: (id: number) => void;
-}
-
-export function DataBusPulse({
-  pulse,
-  chipWidth,
-  chipHeight,
-  onComplete,
-}: DataBusPulseProps) {
-  const pulseRef = useRef<THREE.Mesh>(null);
-  const trailRef = useRef<THREE.Mesh>(null);
-  const startTimeRef = useRef(pulse.startTime);
-
-  const sectionHeight = chipHeight / 3;
-  const halfChipHeight = chipHeight / 2;
-
-  // Calculate path based on section
-  const path = useMemo(() => {
-    const z = 0.1;
-    const [col] = pulse.gridPosition;
-    const targetX = (col - 3) * 1.5; // Map grid column to x position
-
-    let targetY: number;
-    let midY: number;
-
-    switch (pulse.section) {
-      case 'stm':
-        targetY = halfChipHeight - sectionHeight * 0.3;
-        midY = halfChipHeight - sectionHeight * 0.5;
-        return [
-          [0, 0, z], // Start at core
-          [0, midY, z], // Up the trunk
-          [targetX, midY, z], // Along branch
-          [targetX, targetY, z], // To memory
-        ];
-      case 'ltm':
-        targetY = -halfChipHeight + sectionHeight * 0.3;
-        midY = -halfChipHeight + sectionHeight * 0.5;
-        return [
-          [0, 0, z],
-          [0, midY, z],
-          [targetX, midY, z],
-          [targetX, targetY, z],
-        ];
-      case 'episodic':
-      default:
-        const side = col < 3 ? -1 : 1;
-        targetX;
-        return [
-          [0, 0, z],
-          [side * (Math.abs(targetX) + 1), 0, z],
-          [side * (Math.abs(targetX) + 1), pulse.gridPosition[1] * 0.8, z],
-        ];
-    }
-  }, [pulse, halfChipHeight, sectionHeight]);
-
-  const duration = 500; // ms
-
-  useFrame(() => {
-    if (!pulseRef.current) return;
-
-    const elapsed = Date.now() - startTimeRef.current;
-    const progress = Math.min(elapsed / duration, 1);
-
-    if (progress >= 1) {
-      onComplete(pulse.id);
-      return;
-    }
-
-    // Interpolate position along path
-    const totalSegments = path.length - 1;
-    const segmentProgress = progress * totalSegments;
-    const segmentIndex = Math.floor(segmentProgress);
-    const segmentT = segmentProgress - segmentIndex;
-
-    const currentIdx = Math.min(segmentIndex, totalSegments - 1);
-    const start = path[currentIdx];
-    const end = path[Math.min(currentIdx + 1, path.length - 1)];
-
-    pulseRef.current.position.set(
-      start[0] + (end[0] - start[0]) * segmentT,
-      start[1] + (end[1] - start[1]) * segmentT,
-      start[2] + (end[2] - start[2]) * segmentT
-    );
-
-    // Scale down as it travels
-    const scale = 1 - progress * 0.3;
-    pulseRef.current.scale.setScalar(scale);
-
-    // Trail follows slightly behind
-    if (trailRef.current && progress > 0.1) {
-      const trailProgress = Math.max(0, progress - 0.1);
-      const trailSegmentProgress = trailProgress * totalSegments;
-      const trailSegmentIndex = Math.floor(trailSegmentProgress);
-      const trailSegmentT = trailSegmentProgress - trailSegmentIndex;
-
-      const trailIdx = Math.min(trailSegmentIndex, totalSegments - 1);
-      const trailStart = path[trailIdx];
-      const trailEnd = path[Math.min(trailIdx + 1, path.length - 1)];
-
-      trailRef.current.position.set(
-        trailStart[0] + (trailEnd[0] - trailStart[0]) * trailSegmentT,
-        trailStart[1] + (trailEnd[1] - trailStart[1]) * trailSegmentT,
-        trailStart[2] + (trailEnd[2] - trailStart[2]) * trailSegmentT
-      );
-      trailRef.current.scale.setScalar(scale * 0.6);
-
-      const trailMaterial = trailRef.current.material as THREE.MeshBasicMaterial;
-      trailMaterial.opacity = 0.4 * (1 - progress);
-    }
-  });
-
-  return (
-    <group>
-      {/* Main pulse */}
-      <mesh ref={pulseRef} position={[0, 0, 0.1]}>
-        <circleGeometry args={[0.12, 16]} />
-        <meshBasicMaterial color={pulse.color} transparent opacity={0.9} />
-      </mesh>
-
-      {/* Trail */}
-      <mesh ref={trailRef} position={[0, 0, 0.1]}>
-        <circleGeometry args={[0.08, 12]} />
-        <meshBasicMaterial color={pulse.color} transparent opacity={0.4} />
-      </mesh>
-    </group>
-  );
-}

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

@@ -1,225 +0,0 @@
-'use client';
-
-/**
- * Memory Cell
- * Standard rectangular memory node for the chip grid
- * Color-coded by category with glow based on salience
- */
-
-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
-const CATEGORY_COLORS: Record<MemoryCategory, string> = {
-  architecture: '#06b6d4', // cyan
-  pattern: '#22c55e', // green
-  preference: '#eab308', // yellow
-  error: '#ef4444', // red
-  context: '#f97316', // orange
-  learning: '#84cc16', // lime
-  todo: '#a855f7', // purple
-  note: '#3b82f6', // blue
-  relationship: '#6366f1', // indigo
-  custom: '#ec4899', // pink
-};
-
-interface MemoryCellProps {
-  memory: Memory;
-  position: [number, number, number];
-  onSelect?: (memory: Memory | null) => void;
-  isSelected?: boolean;
-  size?: number;
-}
-
-// Shared geometry for performance
-const CELL_GEOMETRY = new THREE.BoxGeometry(0.8, 0.5, 0.15);
-
-export function MemoryCell({
-  memory,
-  position,
-  onSelect,
-  isSelected = false,
-  size = 1,
-}: MemoryCellProps) {
-  const meshRef = useRef<THREE.Mesh>(null);
-  const glowRef = useRef<THREE.Mesh>(null);
-  const [isHovered, setIsHovered] = useState(false);
-
-  const color = CATEGORY_COLORS[memory.category] || CATEGORY_COLORS.custom;
-
-  // Main material
-  const material = useMemo(() => {
-    return new THREE.MeshStandardMaterial({
-      color: color,
-      emissive: color,
-      emissiveIntensity: 0.3 + memory.salience * 0.4,
-      metalness: 0.2,
-      roughness: 0.6,
-    });
-  }, [color, memory.salience]);
-
-  // Glow material
-  const glowMaterial = useMemo(() => {
-    return new THREE.MeshBasicMaterial({
-      color: color,
-      transparent: true,
-      opacity: 0.15 + memory.salience * 0.2,
-      side: THREE.BackSide,
-    });
-  }, [color, memory.salience]);
-
-  // Selection ring material
-  const selectionMaterial = useMemo(() => {
-    return new THREE.MeshBasicMaterial({
-      color: '#ffffff',
-      transparent: true,
-      opacity: 0.8,
-      side: THREE.DoubleSide,
-    });
-  }, []);
-
-  // Animate pulse
-  useFrame((state) => {
-    if (!meshRef.current) return;
-
-    const time = state.clock.elapsedTime;
-    const mat = meshRef.current.material as THREE.MeshStandardMaterial;
-
-    // Base pulse based on salience (higher salience = faster pulse)
-    const pulseSpeed = 1 + memory.salience * 2;
-    const pulse = Math.sin(time * pulseSpeed) * 0.5 + 0.5;
-
-    // Adjust emissive intensity
-    mat.emissiveIntensity = 0.2 + memory.salience * 0.3 + pulse * 0.15;
-
-    // Hover effect
-    if (isHovered || isSelected) {
-      mat.emissiveIntensity += 0.3;
-    }
-
-    // Glow pulse
-    if (glowRef.current) {
-      const glowMat = glowRef.current.material as THREE.MeshBasicMaterial;
-      glowMat.opacity = 0.1 + pulse * 0.1 + memory.salience * 0.15;
-      if (isHovered || isSelected) {
-        glowMat.opacity += 0.15;
-      }
-    }
-  });
-
-  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}>
-      {/* Main cell */}
-      <mesh
-        ref={meshRef}
-        geometry={CELL_GEOMETRY}
-        material={material}
-        onClick={handleClick}
-        onPointerOver={handlePointerOver}
-        onPointerOut={handlePointerOut}
-      />
-
-      {/* Glow layer */}
-      <mesh ref={glowRef} scale={1.15}>
-        <boxGeometry args={[0.85, 0.55, 0.2]} />
-        <primitive object={glowMaterial} />
-      </mesh>
-
-      {/* Selection indicator */}
-      {isSelected && (
-        <mesh rotation={[Math.PI / 2, 0, 0]} position={[0, 0, 0.1]}>
-          <ringGeometry args={[0.5, 0.55, 4]} />
-          <primitive object={selectionMaterial} />
-        </mesh>
-      )}
-
-      {/* Tooltip on hover */}
-      {isHovered && (
-        <Html
-          position={[0, 0.5, 0]}
-          center
-          style={{
-            pointerEvents: 'none',
-            transform: 'translateY(-100%)',
-          }}
-        >
-          <div className="bg-slate-900/95 border border-slate-600 rounded-lg px-3 py-2 text-xs max-w-[200px] backdrop-blur-sm shadow-lg">
-            <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>
-              <span className="text-slate-500">|</span>
-              <span>{Math.round(memory.salience * 100)}%</span>
-            </div>
-          </div>
-        </Html>
-      )}
-    </group>
-  );
-}
-
-// Flash effect when memory is accessed
-export function MemoryCellFlash({
-  position,
-  color,
-  onComplete,
-}: {
-  position: [number, number, number];
-  color: string;
-  onComplete: () => void;
-}) {
-  const meshRef = useRef<THREE.Mesh>(null);
-  const startTime = useRef(Date.now());
-
-  useFrame(() => {
-    if (!meshRef.current) return;
-
-    const elapsed = Date.now() - startTime.current;
-    const duration = 400;
-    const progress = elapsed / duration;
-
-    if (progress >= 1) {
-      onComplete();
-      return;
-    }
-
-    // Expand and fade
-    const scale = 1 + progress * 0.5;
-    meshRef.current.scale.setScalar(scale);
-
-    const mat = meshRef.current.material as THREE.MeshBasicMaterial;
-    mat.opacity = 0.8 * (1 - progress);
-  });
-
-  return (
-    <mesh ref={meshRef} position={position}>
-      <boxGeometry args={[0.9, 0.6, 0.2]} />
-      <meshBasicMaterial color={color} transparent opacity={0.8} />
-    </mesh>
-  );
-}