claude-cortex 1.0.0 → 1.1.0

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

@@ -0,0 +1,238 @@
+'use client';
+
+/**
+ * Chip Substrate
+ * The base silicon die with grid texture, borders, and corner pins
+ */
+
+import { useMemo, useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+
+interface ChipSubstrateProps {
+  width?: number;
+  height?: number;
+  position?: [number, number, number];
+}
+
+// Shared geometries for performance
+const PIN_GEOMETRY = new THREE.SphereGeometry(0.15, 8, 8);
+const PIN_MATERIAL = new THREE.MeshStandardMaterial({
+  color: '#9ca3af',
+  metalness: 0.8,
+  roughness: 0.2,
+});
+
+export function ChipSubstrate({
+  width = 16,
+  height = 12,
+  position = [0, 0, 0],
+}: ChipSubstrateProps) {
+  const gridRef = useRef<THREE.LineSegments>(null);
+
+  // Create substrate plane with grid texture
+  const substrateMaterial = useMemo(() => {
+    return new THREE.MeshStandardMaterial({
+      color: '#1a1a2e',
+      metalness: 0.1,
+      roughness: 0.8,
+      side: THREE.DoubleSide,
+    });
+  }, []);
+
+  // Create grid lines
+  const gridGeometry = useMemo(() => {
+    const points: THREE.Vector3[] = [];
+    const gridSpacing = 0.5;
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+
+    // Vertical lines
+    for (let x = -halfWidth; x <= halfWidth; x += gridSpacing) {
+      points.push(new THREE.Vector3(x, -halfHeight, 0.01));
+      points.push(new THREE.Vector3(x, halfHeight, 0.01));
+    }
+
+    // Horizontal lines
+    for (let y = -halfHeight; y <= halfHeight; y += gridSpacing) {
+      points.push(new THREE.Vector3(-halfWidth, y, 0.01));
+      points.push(new THREE.Vector3(halfWidth, y, 0.01));
+    }
+
+    const geometry = new THREE.BufferGeometry().setFromPoints(points);
+    return geometry;
+  }, [width, height]);
+
+  // Create border lines
+  const borderGeometry = useMemo(() => {
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    const inset = 0.3;
+
+    const points = [
+      // Outer border
+      new THREE.Vector3(-halfWidth, -halfHeight, 0.02),
+      new THREE.Vector3(halfWidth, -halfHeight, 0.02),
+      new THREE.Vector3(halfWidth, -halfHeight, 0.02),
+      new THREE.Vector3(halfWidth, halfHeight, 0.02),
+      new THREE.Vector3(halfWidth, halfHeight, 0.02),
+      new THREE.Vector3(-halfWidth, halfHeight, 0.02),
+      new THREE.Vector3(-halfWidth, halfHeight, 0.02),
+      new THREE.Vector3(-halfWidth, -halfHeight, 0.02),
+      // Inner border (etched)
+      new THREE.Vector3(-halfWidth + inset, -halfHeight + inset, 0.02),
+      new THREE.Vector3(halfWidth - inset, -halfHeight + inset, 0.02),
+      new THREE.Vector3(halfWidth - inset, -halfHeight + inset, 0.02),
+      new THREE.Vector3(halfWidth - inset, halfHeight - inset, 0.02),
+      new THREE.Vector3(halfWidth - inset, halfHeight - inset, 0.02),
+      new THREE.Vector3(-halfWidth + inset, halfHeight - inset, 0.02),
+      new THREE.Vector3(-halfWidth + inset, halfHeight - inset, 0.02),
+      new THREE.Vector3(-halfWidth + inset, -halfHeight + inset, 0.02),
+    ];
+
+    return new THREE.BufferGeometry().setFromPoints(points);
+  }, [width, height]);
+
+  // Section divider positions (for STM, Episodic, LTM sections)
+  const sectionDividers = useMemo(() => {
+    const halfWidth = width / 2;
+    const sectionHeight = height / 3;
+    const halfHeight = height / 2;
+
+    return [
+      // Top divider (between STM and Episodic)
+      {
+        y: halfHeight - sectionHeight,
+        points: [
+          new THREE.Vector3(-halfWidth + 0.3, halfHeight - sectionHeight, 0.02),
+          new THREE.Vector3(halfWidth - 0.3, halfHeight - sectionHeight, 0.02),
+        ],
+      },
+      // Bottom divider (between Episodic and LTM)
+      {
+        y: -halfHeight + sectionHeight,
+        points: [
+          new THREE.Vector3(-halfWidth + 0.3, -halfHeight + sectionHeight, 0.02),
+          new THREE.Vector3(halfWidth - 0.3, -halfHeight + sectionHeight, 0.02),
+        ],
+      },
+    ];
+  }, [width, height]);
+
+  // Corner pin positions
+  const pinPositions = useMemo(() => {
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    const offset = 0.5;
+
+    return [
+      [-halfWidth + offset, halfHeight - offset, 0.1],
+      [halfWidth - offset, halfHeight - offset, 0.1],
+      [-halfWidth + offset, -halfHeight + offset, 0.1],
+      [halfWidth - offset, -halfHeight + offset, 0.1],
+    ] as [number, number, number][];
+  }, [width, height]);
+
+  // Subtle grid pulse animation
+  useFrame((state) => {
+    if (gridRef.current) {
+      const material = gridRef.current.material as THREE.LineBasicMaterial;
+      material.opacity = 0.08 + Math.sin(state.clock.elapsedTime * 0.5) * 0.02;
+    }
+  });
+
+  return (
+    <group position={position}>
+      {/* Main substrate plane */}
+      <mesh rotation={[-Math.PI / 2, 0, 0]}>
+        <planeGeometry args={[width, height]} />
+        <primitive object={substrateMaterial} />
+      </mesh>
+
+      {/* Grid overlay */}
+      <lineSegments ref={gridRef} rotation={[-Math.PI / 2, 0, 0]}>
+        <primitive object={gridGeometry} />
+        <lineBasicMaterial color="#2d3748" opacity={0.1} transparent />
+      </lineSegments>
+
+      {/* Border lines */}
+      <lineSegments rotation={[-Math.PI / 2, 0, 0]}>
+        <primitive object={borderGeometry} />
+        <lineBasicMaterial color="#4a5568" linewidth={2} />
+      </lineSegments>
+
+      {/* Section dividers */}
+      {sectionDividers.map((divider, i) => (
+        <lineSegments key={i} rotation={[-Math.PI / 2, 0, 0]}>
+          <bufferGeometry>
+            <primitive
+              object={
+                new THREE.BufferAttribute(
+                  new Float32Array(divider.points.flatMap((p) => [p.x, p.y, p.z])),
+                  3
+                )
+              }
+              attach="attributes-position"
+            />
+          </bufferGeometry>
+          <lineBasicMaterial color="#4a5568" opacity={0.6} transparent />
+        </lineSegments>
+      ))}
+
+      {/* Corner pins */}
+      {pinPositions.map((pos, i) => (
+        <mesh key={i} position={pos} geometry={PIN_GEOMETRY} material={PIN_MATERIAL} />
+      ))}
+
+      {/* Decorative edge traces */}
+      <EdgeTraces width={width} height={height} />
+    </group>
+  );
+}
+
+// Decorative circuit traces along edges
+function EdgeTraces({ width, height }: { width: number; height: number }) {
+  const traces = useMemo(() => {
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    const traceLength = 1.5;
+    const points: THREE.Vector3[] = [];
+
+    // Top edge traces
+    for (let i = 0; i < 6; i++) {
+      const x = -halfWidth + 2 + i * 2;
+      points.push(new THREE.Vector3(x, halfHeight - 0.1, 0.02));
+      points.push(new THREE.Vector3(x, halfHeight - 0.1 - traceLength * 0.3, 0.02));
+    }
+
+    // Bottom edge traces
+    for (let i = 0; i < 6; i++) {
+      const x = -halfWidth + 2 + i * 2;
+      points.push(new THREE.Vector3(x, -halfHeight + 0.1, 0.02));
+      points.push(new THREE.Vector3(x, -halfHeight + 0.1 + traceLength * 0.3, 0.02));
+    }
+
+    // Left edge traces
+    for (let i = 0; i < 4; i++) {
+      const y = -halfHeight + 2 + i * 2.5;
+      points.push(new THREE.Vector3(-halfWidth + 0.1, y, 0.02));
+      points.push(new THREE.Vector3(-halfWidth + 0.1 + traceLength * 0.3, y, 0.02));
+    }
+
+    // Right edge traces
+    for (let i = 0; i < 4; i++) {
+      const y = -halfHeight + 2 + i * 2.5;
+      points.push(new THREE.Vector3(halfWidth - 0.1, y, 0.02));
+      points.push(new THREE.Vector3(halfWidth - 0.1 - traceLength * 0.3, y, 0.02));
+    }
+
+    return new THREE.BufferGeometry().setFromPoints(points);
+  }, [width, height]);
+
+  return (
+    <lineSegments rotation={[-Math.PI / 2, 0, 0]}>
+      <primitive object={traces} />
+      <lineBasicMaterial color="#FFB347" opacity={0.3} transparent />
+    </lineSegments>
+  );
+}

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

@@ -0,0 +1,210 @@
+'use client';
+
+/**
+ * Cortex Core
+ * Central processing element with pulsing golden glow
+ * The focal point of the memory chip
+ */
+
+import { useRef, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { Html } from '@react-three/drei';
+import * as THREE from 'three';
+
+interface CortexCoreProps {
+  position?: [number, number, number];
+  size?: number;
+  activity?: number; // 0-1, affects pulse intensity
+  showLabel?: boolean;
+}
+
+export function CortexCore({
+  position = [0, 0, 0],
+  size = 2,
+  activity = 0.5,
+  showLabel = true,
+}: CortexCoreProps) {
+  const coreRef = useRef<THREE.Mesh>(null);
+  const glow1Ref = useRef<THREE.Mesh>(null);
+  const glow2Ref = useRef<THREE.Mesh>(null);
+  const glow3Ref = useRef<THREE.Mesh>(null);
+
+  // Core material - bright gold center
+  const coreMaterial = useMemo(() => {
+    return new THREE.MeshStandardMaterial({
+      color: '#FFD700',
+      emissive: '#FFD700',
+      emissiveIntensity: 0.8,
+      metalness: 0.3,
+      roughness: 0.4,
+    });
+  }, []);
+
+  // Glow materials - progressively fainter
+  const glowMaterials = useMemo(() => {
+    return [
+      new THREE.MeshBasicMaterial({
+        color: '#FFD700',
+        transparent: true,
+        opacity: 0.4,
+        side: THREE.BackSide,
+      }),
+      new THREE.MeshBasicMaterial({
+        color: '#FFB347',
+        transparent: true,
+        opacity: 0.2,
+        side: THREE.BackSide,
+      }),
+      new THREE.MeshBasicMaterial({
+        color: '#FF8C00',
+        transparent: true,
+        opacity: 0.1,
+        side: THREE.BackSide,
+      }),
+    ];
+  }, []);
+
+  // Animate pulse
+  useFrame((state) => {
+    const time = state.clock.elapsedTime;
+    const basePulse = Math.sin(time * 2) * 0.5 + 0.5;
+    const activityBoost = activity * 0.3;
+
+    // Core pulse
+    if (coreRef.current) {
+      const material = coreRef.current.material as THREE.MeshStandardMaterial;
+      material.emissiveIntensity = 0.6 + basePulse * 0.4 + activityBoost;
+    }
+
+    // Glow layers pulse with phase offset
+    if (glow1Ref.current) {
+      const mat = glow1Ref.current.material as THREE.MeshBasicMaterial;
+      mat.opacity = 0.3 + basePulse * 0.2 + activityBoost * 0.5;
+      glow1Ref.current.scale.setScalar(1 + basePulse * 0.05);
+    }
+
+    if (glow2Ref.current) {
+      const phase2 = Math.sin(time * 2 + 0.5) * 0.5 + 0.5;
+      const mat = glow2Ref.current.material as THREE.MeshBasicMaterial;
+      mat.opacity = 0.15 + phase2 * 0.1 + activityBoost * 0.3;
+      glow2Ref.current.scale.setScalar(1 + phase2 * 0.03);
+    }
+
+    if (glow3Ref.current) {
+      const phase3 = Math.sin(time * 2 + 1) * 0.5 + 0.5;
+      const mat = glow3Ref.current.material as THREE.MeshBasicMaterial;
+      mat.opacity = 0.08 + phase3 * 0.05 + activityBoost * 0.2;
+      glow3Ref.current.scale.setScalar(1 + phase3 * 0.02);
+    }
+  });
+
+  return (
+    <group position={position}>
+      {/* Core block - rounded rectangle */}
+      <mesh ref={coreRef} material={coreMaterial}>
+        <boxGeometry args={[size, size * 0.6, 0.3]} />
+      </mesh>
+
+      {/* Inner detail - circuit pattern */}
+      <CoreCircuitPattern size={size} />
+
+      {/* Glow layer 1 */}
+      <mesh ref={glow1Ref}>
+        <boxGeometry args={[size * 1.1, size * 0.7, 0.4]} />
+        <primitive object={glowMaterials[0]} />
+      </mesh>
+
+      {/* Glow layer 2 */}
+      <mesh ref={glow2Ref}>
+        <boxGeometry args={[size * 1.3, size * 0.85, 0.5]} />
+        <primitive object={glowMaterials[1]} />
+      </mesh>
+
+      {/* Glow layer 3 */}
+      <mesh ref={glow3Ref}>
+        <boxGeometry args={[size * 1.5, size, 0.6]} />
+        <primitive object={glowMaterials[2]} />
+      </mesh>
+
+      {/* Activity indicator dot */}
+      <ActivityIndicator activity={activity} size={size} />
+
+      {/* Label */}
+      {showLabel && (
+        <Html
+          position={[0, -size * 0.45, 0.2]}
+          center
+          style={{
+            pointerEvents: 'none',
+            userSelect: 'none',
+          }}
+        >
+          <div className="text-[10px] font-mono text-amber-400/80 whitespace-nowrap tracking-wider">
+            CORTEX CORE
+          </div>
+        </Html>
+      )}
+    </group>
+  );
+}
+
+// Circuit pattern on core surface
+function CoreCircuitPattern({ size }: { size: number }) {
+  const linesGeometry = useMemo(() => {
+    const points: THREE.Vector3[] = [];
+    const halfSize = size / 2;
+    const z = 0.16;
+
+    // Horizontal lines
+    for (let i = -2; i <= 2; i++) {
+      const y = i * 0.12;
+      points.push(new THREE.Vector3(-halfSize * 0.7, y, z));
+      points.push(new THREE.Vector3(halfSize * 0.7, y, z));
+    }
+
+    // Vertical lines
+    for (let i = -4; i <= 4; i++) {
+      const x = i * 0.18;
+      points.push(new THREE.Vector3(x, -size * 0.2, z));
+      points.push(new THREE.Vector3(x, size * 0.2, z));
+    }
+
+    return new THREE.BufferGeometry().setFromPoints(points);
+  }, [size]);
+
+  return (
+    <lineSegments>
+      <primitive object={linesGeometry} />
+      <lineBasicMaterial color="#8B6914" opacity={0.5} transparent />
+    </lineSegments>
+  );
+}
+
+// Pulsing activity indicator
+function ActivityIndicator({ activity, size }: { activity: number; size: number }) {
+  const dotRef = useRef<THREE.Mesh>(null);
+
+  useFrame((state) => {
+    if (dotRef.current) {
+      const pulse = Math.sin(state.clock.elapsedTime * 4) * 0.5 + 0.5;
+      const scale = 0.8 + pulse * 0.4 + activity * 0.3;
+      dotRef.current.scale.setScalar(scale);
+
+      const material = dotRef.current.material as THREE.MeshBasicMaterial;
+      material.opacity = 0.6 + pulse * 0.4;
+    }
+  });
+
+  const isActive = activity > 0.1;
+
+  return (
+    <mesh ref={dotRef} position={[size * 0.35, size * 0.2, 0.2]}>
+      <circleGeometry args={[0.08, 16]} />
+      <meshBasicMaterial
+        color={isActive ? '#22c55e' : '#6b7280'}
+        transparent
+        opacity={0.8}
+      />
+    </mesh>
+  );
+}