'use client'; /** * Section Label * Labels for memory bank sections (STM, Episodic, LTM) * Includes count display */ import { Html } from '@react-three/drei'; import { MemoryType } from '@/types/memory'; interface SectionLabelProps { type: MemoryType; count: number; maxCount: number; position: [number, number, number]; } const SECTION_CONFIG: Record = { short_term: { label: 'STM BANK', color: '#f97316', // orange bgColor: 'rgba(249, 115, 22, 0.1)', }, episodic: { label: 'EPISODIC BANK', color: '#a855f7', // purple bgColor: 'rgba(168, 85, 247, 0.1)', }, long_term: { label: 'LONG-TERM BANK', color: '#3b82f6', // blue bgColor: 'rgba(59, 130, 246, 0.1)', }, }; export function SectionLabel({ type, count, maxCount, position }: SectionLabelProps) { const config = SECTION_CONFIG[type]; return (

{config.label} | {count}/{maxCount}

); } // All section labels together interface AllSectionLabelsProps { stmCount: number; episodicCount: number; ltmCount: number; chipWidth: number; chipHeight: number; } export function AllSectionLabels({ stmCount, episodicCount, ltmCount, chipWidth, chipHeight, }: AllSectionLabelsProps) { const sectionHeight = chipHeight / 3; const halfChipHeight = chipHeight / 2; const halfChipWidth = chipWidth / 2; return ( {/* STM label (top) */} {/* Episodic label (middle left) */} {/* LTM label (bottom) */} ); }