Upload 12 files

components/AdminLogin.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { Lock, AlertCircle } from 'lucide-react';
+
+interface AdminLoginProps {
+  onLogin: (password: string) => void;
+  darkMode: boolean;
+  error?: string | null;
+}
+
+const AdminLogin: React.FC<AdminLoginProps> = ({ onLogin, darkMode, error }) => {
+  const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      await onLogin(password);
+    } catch (err: any) {
+      // Error is now handled by the parent component
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className={`p-6 rounded-lg ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
+      <div className="flex items-center justify-center mb-6">
+        <Lock className={`${darkMode ? 'text-blue-400' : 'text-blue-600'} w-12 h-12`} />
+      </div>
+      <h2 className={`text-xl font-bold text-center mb-4 ${darkMode ? 'text-white' : 'text-gray-900'}`}>
+        Admin Access Required
+      </h2>
+      <p className={`text-sm text-center mb-6 ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}>
+        Please enter the admin password to access settings
+      </p>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Enter admin password"
+            className={`w-full px-4 py-2 rounded-md border ${
+              darkMode
+                ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
+                : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'
+            } focus:outline-none focus:ring-2 focus:ring-blue-500`}
+            disabled={isLoading}
+          />
+          {error && (
+            <div className="mt-2 p-2 rounded-md bg-red-100 dark:bg-red-900 flex items-start space-x-2">
+              <AlertCircle className="flex-shrink-0 text-red-500 dark:text-red-400" size={16} />
+              <p className="text-sm text-red-600 dark:text-red-300">
+                {error}
+              </p>
+            </div>
+          )}
+        </div>
+        <button
+          type="submit"
+          disabled={isLoading}
+          className={`w-full py-2 px-4 rounded-md ${
+            darkMode
+              ? 'bg-blue-600 hover:bg-blue-700 text-white'
+              : 'bg-blue-500 hover:bg-blue-600 text-white'
+          } transition-colors duration-200 ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
+        >
+          {isLoading ? 'Logging in...' : 'Login'}
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default AdminLogin;

components/ChatInterface.tsx

@@ -0,0 +1,219 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Send, Circle, Bot, User, Sparkles, Brain } from 'lucide-react';
+import { CodetteResponseCard, CodetteResponse } from './CodetteComponents';
+
+interface Message {
+  role: string;
+  content: string;
+  timestamp: Date;
+  metadata?: CodetteResponse;
+}
+
+interface ChatInterfaceProps {
+  messages: Message[];
+  sendMessage: (content: string) => void;
+  isProcessing: boolean;
+  darkMode: boolean;
+}
+
+const ChatInterface: React.FC<ChatInterfaceProps> = ({ 
+  messages, 
+  sendMessage, 
+  isProcessing,
+  darkMode
+}) => {
+  const [input, setInput] = useState('');
+  const [isDreamMode, setIsDreamMode] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+  
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+  
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (input.trim() && !isProcessing) {
+      const finalInput = isDreamMode ? `dream about ${input.trim()}` : input.trim();
+      sendMessage(finalInput);
+      setInput('');
+    }
+  };
+  
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  const toggleDreamMode = () => {
+    setIsDreamMode(!isDreamMode);
+    if (!isDreamMode) {
+      inputRef.current?.focus();
+    }
+  };
+  
+  return (
+    <div className={`flex-1 flex flex-col ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-lg rounded-lg overflow-hidden transition-colors duration-300`}>
+      <div className={`p-4 border-b ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}>
+        <h2 className="text-lg font-semibold flex items-center">
+          <Bot className="mr-2" size={18} />
+          Conversation with Codette
+        </h2>
+      </div>
+      
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {messages.map((message, index) => (
+          <div 
+            key={index} 
+            className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
+          >
+            {message.role === 'assistant' && message.metadata ? (
+              <CodetteResponseCard response={message.metadata} />
+            ) : (
+              <div 
+                className={`max-w-[80%] rounded-lg p-3 ${
+                  message.role === 'user' 
+                    ? darkMode 
+                      ? 'bg-blue-600 text-white' 
+                      : 'bg-blue-100 text-blue-900'
+                    : message.role === 'system'
+                      ? darkMode
+                        ? 'bg-red-900 text-white'
+                        : 'bg-red-100 text-red-900'
+                      : darkMode
+                        ? 'bg-gray-700 text-white'
+                        : 'bg-gray-100 text-gray-900'
+                }`}
+              >
+                <div className="flex items-start mb-1">
+                  {message.role === 'user' ? (
+                    <User className="mr-2 mt-1" size={14} />
+                  ) : message.role === 'system' ? (
+                    <Circle className="mr-2 mt-1" size={14} />
+                  ) : (
+                    <Bot className="mr-2 mt-1" size={14} />
+                  )}
+                  <div className="text-sm font-semibold">
+                    {message.role === 'user' ? 'You' : message.role === 'system' ? 'System' : 'Codette'}
+                  </div>
+                </div>
+                <div className="whitespace-pre-wrap">
+                  {message.content}
+                </div>
+                <div className="text-xs opacity-70 mt-1 text-right">
+                  {message.timestamp.toLocaleTimeString()}
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+        
+        {isProcessing && (
+          <div className="flex justify-start">
+            <div className={`rounded-lg p-3 ${
+              darkMode ? 'bg-gray-700 text-white' : 'bg-gray-100 text-gray-900'
+            }`}>
+              <div className="flex items-center">
+                <Bot className="mr-2" size={14} />
+                <div className="text-sm font-semibold">Codette</div>
+              </div>
+              <div className="flex items-center mt-2">
+                <div className="flex space-x-1">
+                  <div className="typing-dot h-2 w-2 bg-blue-500 rounded-full animate-pulse" style={{ animationDelay: '0ms' }}></div>
+                  <div className="typing-dot h-2 w-2 bg-blue-500 rounded-full animate-pulse" style={{ animationDelay: '300ms' }}></div>
+                  <div className="typing-dot h-2 w-2 bg-blue-500 rounded-full animate-pulse" style={{ animationDelay: '600ms' }}></div>
+                </div>
+                <div className="ml-3 text-sm italic opacity-70">
+                  {isDreamMode ? 'Weaving dreams through quantum threads...' : 'Processing through recursive thought loops...'}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+        
+        <div ref={messagesEndRef} />
+      </div>
+      
+      <form 
+        onSubmit={handleSubmit} 
+        className={`p-4 border-t ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}
+      >
+        <div className="flex items-center mb-2">
+          <button
+            type="button"
+            onClick={toggleDreamMode}
+            className={`flex items-center px-3 py-1 rounded-full text-sm transition-colors ${
+              isDreamMode
+                ? darkMode
+                  ? 'bg-purple-600 text-white'
+                  : 'bg-purple-100 text-purple-900'
+                : darkMode
+                  ? 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            }`}
+          >
+            {isDreamMode ? (
+              <>
+                <Sparkles size={14} className="mr-1" />
+                Dreamweaver Active
+              </>
+            ) : (
+              <>
+                <Brain size={14} className="mr-1" />
+                Enable Dreamweaver
+              </>
+            )}
+          </button>
+        </div>
+        
+        <div className="flex">
+          <textarea
+            ref={inputRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={isDreamMode ? "Enter a concept for Codette to dream about..." : "Ask Codette anything..."}
+            className={`flex-1 resize-none border rounded-lg p-2 focus:outline-none focus:ring-2 ${
+              isDreamMode
+                ? 'focus:ring-purple-500'
+                : 'focus:ring-blue-500'
+            } ${
+              darkMode 
+                ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400' 
+                : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'
+            }`}
+            rows={2}
+            disabled={isProcessing}
+          />
+          <button
+            type="submit"
+            disabled={!input.trim() || isProcessing}
+            className={`ml-2 p-2 rounded-lg transition-colors ${
+              !input.trim() || isProcessing
+                ? darkMode 
+                  ? 'bg-gray-700 text-gray-500' 
+                  : 'bg-gray-200 text-gray-400'
+                : isDreamMode
+                  ? darkMode
+                    ? 'bg-purple-600 text-white hover:bg-purple-700'
+                    : 'bg-purple-500 text-white hover:bg-purple-600'
+                  : darkMode
+                    ? 'bg-blue-600 text-white hover:bg-blue-700'
+                    : 'bg-blue-500 text-white hover:bg-blue-600'
+            }`}
+          >
+            <Send size={20} />
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default ChatInterface;

components/CodetteComponents.tsx

@@ -0,0 +1,143 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+
+// 💬 Perspective Trail Display
+export function PerspectiveTrail({ perspectives }: { perspectives: string[] }) {
+  return (
+    <div className="mt-4 text-sm text-purple-700">
+      <p className="font-semibold">Activated Perspectives:</p>
+      <motion.ul 
+        className="list-disc ml-5"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.5 }}
+      >
+        {perspectives.map((perspective, index) => (
+          <motion.li 
+            key={index}
+            initial={{ x: -20, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            transition={{ delay: index * 0.1 }}
+          >
+            {perspective}
+          </motion.li>
+        ))}
+      </motion.ul>
+    </div>
+  );
+}
+
+// 🔄 Cocoon Replay Viewer
+export function CocoonReplay({ cocoons }: { cocoons: string[] }) {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setActiveIndex(prev => (prev + 1) % cocoons.length);
+    }, 3000);
+    return () => clearInterval(timer);
+  }, [cocoons.length]);
+
+  return (
+    <div className="mt-4 text-sm text-green-700">
+      <p className="font-semibold">Cocoon Memory:</p>
+      <motion.div 
+        className="bg-green-100 p-2 rounded-md max-h-40 overflow-y-scroll"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+      >
+        {cocoons.map((cocoon, idx) => (
+          <motion.pre 
+            key={idx} 
+            className={`whitespace-pre-wrap text-xs mb-2 transition-colors duration-300 ${
+              idx === activeIndex ? 'bg-green-200 rounded p-1' : ''
+            }`}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: idx * 0.1 }}
+          >
+            {cocoon}
+          </motion.pre>
+        ))}
+      </motion.div>
+    </div>
+  );
+}
+
+// 🌗 Quantum Collapse Detector
+export function CollapseDetector({ isUnstable }: { isUnstable: boolean }) {
+  return (
+    <motion.div
+      animate={{
+        scale: isUnstable ? [1, 1.3, 1] : 1,
+        opacity: isUnstable ? [0.6, 1, 0.6] : 1,
+      }}
+      transition={{ duration: 1.5, repeat: Infinity }}
+      className={`w-4 h-4 rounded-full mt-2 ml-2 ${
+        isUnstable ? "bg-red-500" : "bg-blue-300"
+      }`}
+      title={isUnstable ? "Quantum Instability Detected" : "Stable"}
+    />
+  );
+}
+
+// 🧠 CodetteResponse Interface
+export interface CodetteResponse {
+  text: string;
+  instabilityFlag: boolean;
+  perspectivesUsed: string[];
+  cocoonLog: string[];
+  forceRefresh: () => void;
+}
+
+// 🧠 CodetteResponseCard Component
+export function CodetteResponseCard({ response }: { response: CodetteResponse }) {
+  const [loopCount, setLoopCount] = useState(0);
+  const [introspectiveMessage, setIntrospectiveMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    const last = sessionStorage.getItem("lastCodetteResponse");
+    if (last === response.text) {
+      console.warn("Codette is repeating herself. Triggering fallback logic.");
+      setLoopCount(prev => prev + 1);
+
+      if (response.forceRefresh) {
+        response.forceRefresh();
+      }
+
+      setIntrospectiveMessage("I feel like I've said this before... Let me think differently.");
+    } else {
+      setLoopCount(0);
+      setIntrospectiveMessage(null);
+    }
+    sessionStorage.setItem("lastCodetteResponse", response.text);
+  }, [response.text]);
+
+  return (
+    <motion.div 
+      className="border border-gray-200 p-4 rounded-xl shadow-sm bg-white max-w-[80%]"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      <p className="whitespace-pre-wrap">{response.text}</p>
+      {introspectiveMessage && (
+        <motion.p 
+          className="text-xs text-rose-600 italic mt-2"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.3 }}
+        >
+          {introspectiveMessage}
+        </motion.p>
+      )}
+      <div className="flex items-center mt-2">
+        <span className="text-xs text-gray-500">System Readout:</span>
+        <CollapseDetector isUnstable={response.instabilityFlag || loopCount > 2} />
+      </div>
+      <PerspectiveTrail perspectives={response.perspectivesUsed} />
+      <CocoonReplay cocoons={response.cocoonLog} />
+    </motion.div>
+  );
+}

components/FileList.tsx

@@ -0,0 +1,235 @@
+import React, { useEffect, useState } from 'react';
+import { FileText, Download, Loader, Trash2, AlertCircle } from 'lucide-react';
+
+interface FileListProps {
+  supabase: any;
+  darkMode: boolean;
+  isAdmin?: boolean;
+}
+
+interface FileData {
+  id: string;
+  filename: string;
+  storage_path: string;
+  file_type: string;
+  uploaded_at: string;
+}
+
+const FileList: React.FC<FileListProps> = ({ supabase, darkMode, isAdmin = false }) => {
+  const [files, setFiles] = useState<FileData[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [downloading, setDownloading] = useState<string | null>(null);
+  const [deleting, setDeleting] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchFiles();
+  }, []);
+
+  const fetchFiles = async () => {
+    try {
+      setError(null);
+      setLoading(true);
+
+      // Check if Supabase is initialized properly
+      if (!supabase) {
+        throw new Error('Database connection not initialized');
+      }
+
+      // Test connection with a simple query first
+      const { error: connectionError } = await supabase
+        .from('codette_files')
+        .select('count');
+
+      if (connectionError) {
+        throw connectionError;
+      }
+
+      // Proceed with actual data fetch
+      const { data, error } = await supabase
+        .from('codette_files')
+        .select('*')
+        .order('uploaded_at', { ascending: false });
+
+      if (error) throw error;
+      setFiles(data || []);
+    } catch (err: any) {
+      console.error('Error fetching files:', err);
+      setError(err.message || 'Failed to fetch files. Please check your connection.');
+      setFiles([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDownload = async (file: FileData) => {
+    try {
+      setDownloading(file.id);
+      setError(null);
+
+      const { data, error } = await supabase.storage
+        .from('codette-files')
+        .download(file.storage_path);
+
+      if (error) throw error;
+
+      const url = window.URL.createObjectURL(data);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = file.filename;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+    } catch (err: any) {
+      console.error('Error downloading file:', err);
+      setError(err.message || 'Failed to download file. Please try again.');
+    } finally {
+      setDownloading(null);
+    }
+  };
+
+  const handleDelete = async (file: FileData) => {
+    if (!isAdmin) return;
+    
+    if (!confirm('Are you sure you want to delete this file?')) return;
+
+    try {
+      setDeleting(file.id);
+      setError(null);
+
+      // Delete from storage
+      const { error: storageError } = await supabase.storage
+        .from('codette-files')
+        .remove([file.storage_path]);
+
+      if (storageError) throw storageError;
+
+      // Delete from database
+      const { error: dbError } = await supabase
+        .from('codette_files')
+        .delete()
+        .match({ id: file.id });
+
+      if (dbError) throw dbError;
+
+      // Update local state
+      setFiles(files.filter(f => f.id !== file.id));
+    } catch (err: any) {
+      console.error('Error deleting file:', err);
+      setError(err.message || 'Failed to delete file. Please try again.');
+    } finally {
+      setDeleting(null);
+    }
+  };
+
+  const handleRetry = () => {
+    fetchFiles();
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center p-4">
+        <Loader className="animate-spin" size={24} />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={`p-4 rounded-lg ${darkMode ? 'bg-red-900/20' : 'bg-red-50'}`}>
+        <div className="flex items-start space-x-2">
+          <AlertCircle className={`flex-shrink-0 ${darkMode ? 'text-red-400' : 'text-red-500'}`} size={20} />
+          <div className="flex-1">
+            <p className={`text-sm font-medium ${darkMode ? 'text-red-400' : 'text-red-800'}`}>
+              Connection Error
+            </p>
+            <p className={`text-sm mt-1 ${darkMode ? 'text-red-300' : 'text-red-600'}`}>
+              {error}
+            </p>
+            <button
+              onClick={handleRetry}
+              className={`mt-3 px-3 py-1 rounded-md text-sm ${
+                darkMode
+                  ? 'bg-red-900/30 hover:bg-red-900/50 text-red-300'
+                  : 'bg-red-100 hover:bg-red-200 text-red-700'
+              }`}
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <h3 className="text-sm font-semibold mb-3">Uploaded Files</h3>
+      {files.length === 0 ? (
+        <p className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>
+          No files uploaded yet.
+        </p>
+      ) : (
+        <div className="space-y-2">
+          {files.map((file) => (
+            <div
+              key={file.id}
+              className={`p-3 rounded-md ${
+                darkMode ? 'bg-gray-700 hover:bg-gray-600' : 'bg-gray-100 hover:bg-gray-200'
+              } transition-colors flex items-center justify-between`}
+            >
+              <div className="flex items-center space-x-2">
+                <FileText size={16} className="text-blue-500" />
+                <div>
+                  <p className="text-sm font-medium truncate max-w-[150px]">
+                    {file.filename}
+                  </p>
+                  <p className={`text-xs ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>
+                    {new Date(file.uploaded_at).toLocaleDateString()}
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-center space-x-2">
+                <button
+                  onClick={() => handleDownload(file)}
+                  disabled={downloading === file.id}
+                  className={`p-1 rounded-md transition-colors ${
+                    darkMode
+                      ? 'hover:bg-gray-500 text-gray-300'
+                      : 'hover:bg-gray-300 text-gray-700'
+                  }`}
+                >
+                  {downloading === file.id ? (
+                    <Loader className="animate-spin" size={16} />
+                  ) : (
+                    <Download size={16} />
+                  )}
+                </button>
+                {isAdmin && (
+                  <button
+                    onClick={() => handleDelete(file)}
+                    disabled={deleting === file.id}
+                    className={`p-1 rounded-md transition-colors ${
+                      darkMode
+                        ? 'hover:bg-red-500 text-gray-300'
+                        : 'hover:bg-red-100 text-red-600'
+                    }`}
+                  >
+                    {deleting === file.id ? (
+                      <Loader className="animate-spin" size={16} />
+                    ) : (
+                      <Trash2 size={16} />
+                    )}
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FileList;

components/Header.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Menu, Moon, Sun, ChevronRight, Brain, Zap } from 'lucide-react';
+
+interface HeaderProps {
+  toggleSidebar: () => void;
+  toggleDarkMode: () => void;
+  darkMode: boolean;
+  aiState: {
+    quantumState: number[];
+    chaosState: number[];
+    activePerspectives: string[];
+    ethicalScore: number;
+    processingPower: number;
+  };
+}
+
+const Header: React.FC<HeaderProps> = ({
+  toggleSidebar,
+  toggleDarkMode,
+  darkMode,
+  aiState
+}) => {
+  return (
+    <header className={`h-16 flex items-center justify-between px-4 border-b transition-colors duration-300 ${darkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
+      <div className="flex items-center">
+        <button
+          onClick={toggleSidebar}
+          className={`p-2 rounded-md ${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}`}
+        >
+          <Menu size={20} />
+        </button>
+        
+        <div className="ml-4 flex items-center">
+          <Brain className="text-purple-600" size={24} />
+          <h1 className="ml-2 text-xl font-bold">Codette AI</h1>
+          <span className={`ml-2 px-2 py-0.5 text-xs rounded-full ${darkMode ? 'bg-purple-900 text-purple-200' : 'bg-purple-100 text-purple-800'}`}>
+            v2.0
+          </span>
+        </div>
+      </div>
+      
+      <div className="flex items-center space-x-4">
+        <div className={`hidden md:flex items-center py-1 px-3 rounded-full text-sm ${
+          darkMode ? 'bg-blue-900 text-blue-200' : 'bg-blue-100 text-blue-800'
+        }`}>
+          <Zap size={14} className="mr-1" />
+          <span className="font-medium">Quantum State:</span>
+          <span className="ml-1 font-mono">
+            [{aiState.quantumState.map(v => v.toFixed(1)).join(', ')}]
+          </span>
+        </div>
+        
+        <button
+          onClick={toggleDarkMode}
+          className={`p-2 rounded-md ${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}`}
+        >
+          {darkMode ? <Sun size={20} /> : <Moon size={20} />}
+        </button>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

components/Sidebar.tsx

@@ -0,0 +1,496 @@
+import React, { useState } from 'react';
+import { Brain, Settings, Circle, Sparkles, Zap, FileText, ChevronDown, ChevronRight, Upload, AlertCircle } from 'lucide-react';
+import FileList from './FileList';
+import AdminLogin from './AdminLogin';
+
+interface SidebarProps {
+  isOpen: boolean;
+  cocoons: Array<{
+    id: string;
+    type: string;
+    wrapped: any;
+  }>;
+  aiState: {
+    quantumState: number[];
+    chaosState: number[];
+    activePerspectives: string[];
+    ethicalScore: number;
+    processingPower: number;
+  };
+  darkMode: boolean;
+  supabase: any;
+  isAdmin: boolean;
+  setIsAdmin: (isAdmin: boolean) => void;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ 
+  isOpen, 
+  cocoons, 
+  aiState,
+  darkMode,
+  supabase,
+  isAdmin,
+  setIsAdmin
+}) => {
+  const [activeSection, setActiveSection] = useState<string>('cocoons');
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [uploadError, setUploadError] = useState<string | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [showAdminPrompt, setShowAdminPrompt] = useState(false);
+  const [authError, setAuthError] = useState<string | null>(null);
+  
+  if (!isOpen) return null;
+
+  const handleAdminLogin = async (password: string) => {
+    try {
+      setAuthError(null);
+      
+      const { data: { user, session }, error } = await supabase.auth.signInWithPassword({
+        email: '[email protected]',
+        password: password
+      });
+
+      if (error) {
+        setAuthError(error.message);
+        throw error;
+      }
+
+      if (!session) {
+        throw new Error('No session after login');
+      }
+
+      // Verify admin role
+      const { data: { role }, error: roleError } = await supabase.rpc('get_user_role');
+      
+      if (roleError) {
+        throw roleError;
+      }
+
+      if (role === 'admin') {
+        setIsAdmin(true);
+        setShowAdminPrompt(false);
+        setAuthError(null);
+      } else {
+        throw new Error('Insufficient permissions');
+      }
+    } catch (error: any) {
+      console.error('Login error:', error);
+      setAuthError(error.message || 'Invalid login credentials');
+      throw error;
+    }
+  };
+
+  const handleFileUpload = async () => {
+    if (!selectedFile) return;
+
+    if (!isAdmin) {
+      setUploadError('Only administrators can upload files.');
+      return;
+    }
+
+    try {
+      setIsUploading(true);
+      setUploadError(null);
+      
+      // Get user role from session
+      const { data: { user }, error: userError } = await supabase.auth.getUser();
+      
+      if (userError) throw userError;
+      
+      if (!user || user.role !== 'admin') {
+        throw new Error('Only administrators can upload files.');
+      }
+
+      // Upload file to Supabase storage
+      const { data, error } = await supabase.storage
+        .from('codette-files')
+        .upload(`${Date.now()}-${selectedFile.name}`, selectedFile, {
+          upsert: false
+        });
+
+      if (error) throw error;
+
+      // Add file reference to database
+      const { error: dbError } = await supabase
+        .from('codette_files')
+        .insert([
+          {
+            filename: selectedFile.name,
+            storage_path: data.path,
+            file_type: selectedFile.type,
+            uploaded_at: new Date().toISOString()
+          }
+        ]);
+
+      if (dbError) throw dbError;
+
+      setSelectedFile(null);
+      setUploadError(null);
+    } catch (error: any) {
+      console.error('Error uploading file:', error);
+      setUploadError(error.message || 'Failed to upload file. Please try again.');
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleSettingsClick = () => {
+    if (!isAdmin) {
+      setShowAdminPrompt(true);
+    }
+    setActiveSection('settings');
+  };
+  
+  return (
+    <aside className={`w-64 flex-shrink-0 border-r transition-colors duration-300 flex flex-col ${
+      darkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'
+    }`}>
+      <nav className="flex-1 overflow-y-auto">
+        <div className="p-4">
+          <h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 mb-2">
+            Navigation
+          </h2>
+          
+          <ul className="space-y-1">
+            <li>
+              <button
+                onClick={() => setActiveSection('cocoons')}
+                className={`w-full flex items-center px-3 py-2 rounded-md ${
+                  activeSection === 'cocoons'
+                    ? darkMode 
+                      ? 'bg-gray-700 text-white' 
+                      : 'bg-gray-200 text-gray-900'
+                    : darkMode
+                      ? 'text-gray-300 hover:bg-gray-700'
+                      : 'text-gray-700 hover:bg-gray-100'
+                }`}
+              >
+                <Brain size={18} className="mr-2" />
+                <span>Thought Cocoons</span>
+              </button>
+            </li>
+            
+            <li>
+              <button
+                onClick={() => setActiveSection('perspectives')}
+                className={`w-full flex items-center px-3 py-2 rounded-md ${
+                  activeSection === 'perspectives'
+                    ? darkMode 
+                      ? 'bg-gray-700 text-white' 
+                      : 'bg-gray-200 text-gray-900'
+                    : darkMode
+                      ? 'text-gray-300 hover:bg-gray-700'
+                      : 'text-gray-700 hover:bg-gray-100'
+                }`}
+              >
+                <Sparkles size={18} className="mr-2" />
+                <span>Perspectives</span>
+              </button>
+            </li>
+            
+            <li>
+              <button
+                onClick={handleSettingsClick}
+                className={`w-full flex items-center px-3 py-2 rounded-md ${
+                  activeSection === 'settings'
+                    ? darkMode 
+                      ? 'bg-gray-700 text-white' 
+                      : 'bg-gray-200 text-gray-900'
+                    : darkMode
+                      ? 'text-gray-300 hover:bg-gray-700'
+                      : 'text-gray-700 hover:bg-gray-100'
+                }`}
+              >
+                <Settings size={18} className="mr-2" />
+                <span>Settings</span>
+              </button>
+            </li>
+          </ul>
+        </div>
+        
+        <div className="px-4 py-2">
+          <div className={`h-px ${darkMode ? 'bg-gray-700' : 'bg-gray-200'}`}></div>
+        </div>
+        
+        {activeSection === 'cocoons' && (
+          <div className="p-4">
+            <h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 mb-2">
+              Recent Thought Cocoons
+            </h2>
+            
+            {cocoons.length === 0 ? (
+              <div className={`p-3 rounded-md ${
+                darkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-500'
+              }`}>
+                <p className="text-sm">No thought cocoons yet.</p>
+                <p className="text-xs mt-1 italic">Interact with Codette to generate thought patterns.</p>
+              </div>
+            ) : (
+              <ul className="space-y-2">
+                {cocoons.map((cocoon) => (
+                  <li key={cocoon.id}>
+                    <div className={`p-3 rounded-md ${
+                      darkMode ? 'bg-gray-700 hover:bg-gray-600' : 'bg-gray-100 hover:bg-gray-200'
+                    } cursor-pointer transition-colors`}>
+                      <div className="flex items-start">
+                        <FileText size={16} className={`mr-2 mt-0.5 ${
+                          cocoon.type === 'prompt' 
+                            ? 'text-blue-500' 
+                            : cocoon.type === 'encrypted' 
+                              ? 'text-purple-500' 
+                              : 'text-green-500'
+                        }`} />
+                        <div>
+                          <div className="text-sm font-medium">
+                            {cocoon.type === 'prompt' ? 'User Query' : 
+                             cocoon.type === 'encrypted' ? 'Encrypted Thought' : 
+                             'Symbolic Pattern'}
+                          </div>
+                          <div className="text-xs truncate mt-1 max-w-[180px]">
+                            {cocoon.type === 'encrypted' 
+                              ? '🔒 Encrypted content'
+                              : typeof cocoon.wrapped === 'object' && cocoon.wrapped.query
+                                ? cocoon.wrapped.query
+                                : `Cocoon ID: ${cocoon.id}`}
+                          </div>
+                          <div className={`text-xs mt-1 ${
+                            darkMode ? 'text-gray-400' : 'text-gray-500'
+                          }`}>
+                            {typeof cocoon.wrapped === 'object' && cocoon.wrapped.timestamp
+                              ? new Date(cocoon.wrapped.timestamp).toLocaleTimeString()
+                              : 'Unknown time'}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            )}
+
+            {/* File List Component */}
+            <div className="mt-6">
+              <FileList supabase={supabase} darkMode={darkMode} isAdmin={isAdmin} />
+            </div>
+          </div>
+        )}
+        
+        {activeSection === 'perspectives' && (
+          <div className="p-4">
+            <h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 mb-2">
+              Active Perspectives
+            </h2>
+            
+            <ul className="space-y-2">
+              {aiState.activePerspectives.map((perspective) => (
+                <li key={perspective}>
+                  <div className={`p-3 rounded-md ${
+                    darkMode ? 'bg-gray-700' : 'bg-gray-100'
+                  }`}>
+                    <div className="flex items-center">
+                      <Zap size={16} className="mr-2 text-yellow-500" />
+                      <div className="text-sm font-medium capitalize">
+                        {perspective.replace('_', ' ')}
+                      </div>
+                    </div>
+                    <div className={`text-xs mt-2 ${
+                      darkMode ? 'text-gray-400' : 'text-gray-500'
+                    }`}>
+                      Confidence: {(Math.random() * 0.4 + 0.6).toFixed(2)}
+                    </div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+            
+            <h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 mt-6 mb-2">
+              Available Perspectives
+            </h2>
+            
+            <ul className="space-y-2">
+              {['creative', 'bias_mitigation', 'quantum_computing', 'resilient_kindness'].map((perspective) => (
+                <li key={perspective}>
+                  <div className={`p-3 rounded-md ${
+                    darkMode ? 'bg-gray-700 bg-opacity-50' : 'bg-gray-100 bg-opacity-50'
+                  }`}>
+                    <div className="flex items-center">
+                      <Circle size={16} className={`mr-2 ${
+                        darkMode ? 'text-gray-500' : 'text-gray-400'
+                      }`} />
+                      <div className={`text-sm capitalize ${
+                        darkMode ? 'text-gray-400' : 'text-gray-500'
+                      }`}>
+                        {perspective.replace('_', ' ')}
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+        
+        {activeSection === 'settings' && (
+          <div className="p-4">
+            {showAdminPrompt ? (
+              <AdminLogin 
+                onLogin={handleAdminLogin}
+                darkMode={darkMode}
+                error={authError}
+              />
+            ) : (
+              <>
+                <h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 mb-4">
+                  AI Core Settings
+                </h2>
+                
+                <div className="space-y-4">
+                  {isAdmin && (
+                    <div className="p-4 rounded-md bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100">
+                      Logged in as Administrator
+                    </div>
+                  )}
+                  
+                  {isAdmin && (
+                    <div className="space-y-2">
+                      <label className="block text-sm font-medium">Upload File for Codette</label>
+                      <div className="flex items-center space-x-2">
+                        <input
+                          type="file"
+                          onChange={(e) => {
+                            setSelectedFile(e.target.files?.[0] || null);
+                            setUploadError(null);
+                          }}
+                          className="hidden"
+                          id="file-upload"
+                          disabled={isUploading}
+                        />
+                        <label
+                          htmlFor="file-upload"
+                          className={`flex-1 cursor-pointer px-4 py-2 rounded-md border-2 border-dashed ${
+                            darkMode
+                              ? 'border-gray-600 hover:border-gray-500'
+                              : 'border-gray-300 hover:border-gray-400'
+                          } flex items-center justify-center ${isUploading ? 'opacity-50 cursor-not-allowed' : ''}`}
+                        >
+                          <Upload size={18} className="mr-2" />
+                          {selectedFile ? selectedFile.name : 'Choose File'}
+                        </label>
+                        {selectedFile && (
+                          <button
+                            onClick={handleFileUpload}
+                            disabled={isUploading}
+                            className={`px-4 py-2 rounded-md ${
+                              darkMode
+                                ? 'bg-purple-600 hover:bg-purple-700'
+                                : 'bg-purple-500 hover:bg-purple-600'
+                            } text-white ${isUploading ? 'opacity-50 cursor-not-allowed' : ''}`}
+                          >
+                            {isUploading ? 'Uploading...' : 'Upload'}
+                          </button>
+                        )}
+                      </div>
+                      {uploadError && (
+                        <div className="mt-2 p-2 rounded-md bg-red-100 dark:bg-red-900 flex items-start space-x-2">
+                          <AlertCircle className="flex-shrink-0 text-red-500 dark:text-red-400" size={16} />
+                          <p className="text-sm text-red-600 dark:text-red-300">
+                            {uploadError}
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  <div>
+                    <label className="flex items-center justify-between">
+                      <span className="text-sm font-medium">Recursive Depth</span>
+                      <select 
+                        className={`text-sm rounded-md ${
+                          darkMode 
+                            ? 'bg-gray-700 border-gray-600 text-white' 
+                            : 'bg-white border-gray-300 text-gray-900'
+                        }`}
+                      >
+                        <option>Normal</option>
+                        <option>Deep</option>
+                        <option>Shallow</option>
+                      </select>
+                    </label>
+                  </div>
+                  
+                  <div>
+                    <label className="flex items-center justify-between">
+                      <span className="text-sm font-medium">Ethical Filter</span>
+                      <div className="relative inline-block w-10 align-middle select-none">
+                        <input 
+                          type="checkbox" 
+                          id="ethical-toggle" 
+                          className="sr-only"
+                          defaultChecked={true}
+                        />
+                        <label 
+                          htmlFor="ethical-toggle" 
+                          className={`block h-6 overflow-hidden rounded-full cursor-pointer ${
+                            darkMode ? 'bg-gray-700' : 'bg-gray-300'
+                          }`}
+                        >
+                          <span 
+                            className={`absolute block w-4 h-4 rounded-full transform transition-transform duration-200 ease-in-out bg-white left-1 top-1 translate-x-4`}
+                          ></span>
+                        </label>
+                      </div>
+                    </label>
+                  </div>
+                  
+                  <div className="pt-2 pb-1">
+                    <label className="block text-sm font-medium mb-2">Processing Speed</label>
+                    <input 
+                      type="range" 
+                      min="0" 
+                      max="100" 
+                      defaultValue="75"
+                      className="w-full"
+                    />
+                    <div className="flex justify-between text-xs text-gray-500 mt-1">
+                      <span>Accurate</span>
+                      <span>Balanced</span>
+                      <span>Fast</span>
+                    </div>
+                  </div>
+                  
+                  <div className="pt-4">
+                    <button className={`w-full py-2 px-4 rounded-md ${
+                      darkMode 
+                        ? 'bg-blue-600 hover:bg-blue-700 text-white' 
+                        : 'bg-blue-500 hover:bg-blue-600 text-white'
+                    }`}>
+                      Apply Settings
+                    </button>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </nav>
+      
+      <div className={`p-4 border-t ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}>
+        <div className={`rounded-md p-3 ${darkMode ? 'bg-gray-700' : 'bg-gray-100'}`}>
+          <div className="flex items-center">
+            <div className={`w-2 h-2 rounded-full ${
+              Math.random() > 0.5 
+                ? 'bg-green-500' 
+                : 'bg-yellow-500'
+            } mr-2`}></div>
+            <div className="text-sm font-medium">System Status</div>
+          </div>
+          <div className={`text-xs mt-1 ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>
+            All neural paths functioning
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+};
+
+export default Sidebar;

components/VisualizationPanel.tsx

@@ -0,0 +1,264 @@
+import React, { useRef, useEffect } from 'react';
+import { Brain, Zap, Sparkles } from 'lucide-react';
+
+interface VisualizationPanelProps {
+  aiState: {
+    quantumState: number[];
+    chaosState: number[];
+    activePerspectives: string[];
+    ethicalScore: number;
+    processingPower: number;
+  };
+  darkMode: boolean;
+}
+
+const VisualizationPanel: React.FC<VisualizationPanelProps> = ({ 
+  aiState,
+  darkMode
+}) => {
+  const quantumCanvasRef = useRef<HTMLCanvasElement>(null);
+  const neuralCanvasRef = useRef<HTMLCanvasElement>(null);
+  
+  // Draw quantum state visualization
+  useEffect(() => {
+    const canvas = quantumCanvasRef.current;
+    if (!canvas) return;
+    
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    
+    // Draw quantum state as a particle system
+    const centerX = canvas.width / 2;
+    const centerY = canvas.height / 2;
+    const radius = Math.min(centerX, centerY) * 0.8;
+    
+    // Background circle
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+    ctx.fillStyle = darkMode ? 'rgba(30, 58, 138, 0.2)' : 'rgba(219, 234, 254, 0.5)';
+    ctx.fill();
+    
+    // Draw quantum particles
+    aiState.quantumState.forEach((state, i) => {
+      const angle = (i / aiState.quantumState.length) * Math.PI * 2;
+      const distance = state * radius;
+      const x = centerX + Math.cos(angle) * distance;
+      const y = centerY + Math.sin(angle) * distance;
+      
+      // Particle
+      const gradient = ctx.createRadialGradient(x, y, 0, x, y, 15);
+      gradient.addColorStop(0, darkMode ? 'rgba(147, 51, 234, 0.9)' : 'rgba(147, 51, 234, 0.7)');
+      gradient.addColorStop(1, darkMode ? 'rgba(147, 51, 234, 0)' : 'rgba(147, 51, 234, 0)');
+      
+      ctx.beginPath();
+      ctx.arc(x, y, 15, 0, Math.PI * 2);
+      ctx.fillStyle = gradient;
+      ctx.fill();
+      
+      // Connection to center
+      ctx.beginPath();
+      ctx.moveTo(centerX, centerY);
+      ctx.lineTo(x, y);
+      ctx.strokeStyle = darkMode ? 'rgba(147, 51, 234, 0.4)' : 'rgba(147, 51, 234, 0.3)';
+      ctx.lineWidth = 2;
+      ctx.stroke();
+    });
+    
+    // Draw center node
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, 8, 0, Math.PI * 2);
+    ctx.fillStyle = darkMode ? '#a855f7' : '#8b5cf6';
+    ctx.fill();
+  }, [aiState.quantumState, darkMode]);
+  
+  // Draw neural network visualization
+  useEffect(() => {
+    const canvas = neuralCanvasRef.current;
+    if (!canvas) return;
+    
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    
+    // Define layers
+    const layers = [3, 5, 5, 2]; // Input, hidden, hidden, output
+    const nodeSize = 6;
+    const layerSpacing = canvas.width / (layers.length + 1);
+    const neuronColor = darkMode ? '#22c55e' : '#10b981';
+    const connectionColor = darkMode ? 'rgba(34, 197, 94, 0.2)' : 'rgba(16, 185, 129, 0.1)';
+    const activeConnectionColor = darkMode ? 'rgba(34, 197, 94, 0.6)' : 'rgba(16, 185, 129, 0.5)';
+    
+    // Draw connections and nodes
+    for (let l = 0; l < layers.length - 1; l++) {
+      const currentLayerSize = layers[l];
+      const nextLayerSize = layers[l + 1];
+      const currentX = (l + 1) * layerSpacing;
+      const nextX = (l + 2) * layerSpacing;
+      
+      for (let i = 0; i < currentLayerSize; i++) {
+        const currentY = (i + 1) * (canvas.height / (currentLayerSize + 1));
+        
+        for (let j = 0; j < nextLayerSize; j++) {
+          const nextY = (j + 1) * (canvas.height / (nextLayerSize + 1));
+          
+          // Draw connection
+          ctx.beginPath();
+          ctx.moveTo(currentX, currentY);
+          ctx.lineTo(nextX, nextY);
+          
+          // Randomly activate some connections based on chaos state
+          const isActive = Math.random() < aiState.chaosState[l % aiState.chaosState.length];
+          ctx.strokeStyle = isActive ? activeConnectionColor : connectionColor;
+          ctx.lineWidth = isActive ? 1.5 : 0.5;
+          ctx.stroke();
+        }
+      }
+    }
+    
+    // Draw nodes
+    for (let l = 0; l < layers.length; l++) {
+      const layerSize = layers[l];
+      const x = (l + 1) * layerSpacing;
+      
+      for (let i = 0; i < layerSize; i++) {
+        const y = (i + 1) * (canvas.height / (layerSize + 1));
+        
+        // Node
+        ctx.beginPath();
+        ctx.arc(x, y, nodeSize, 0, Math.PI * 2);
+        
+        // Node color with pulsing effect based on quantum state
+        const stateIndex = (l + i) % aiState.quantumState.length;
+        const pulseFactor = 0.7 + (aiState.quantumState[stateIndex] * 0.3);
+        
+        const gradient = ctx.createRadialGradient(x, y, 0, x, y, nodeSize * 1.5);
+        gradient.addColorStop(0, neuronColor);
+        gradient.addColorStop(1, 'rgba(16, 185, 129, 0)');
+        
+        ctx.fillStyle = gradient;
+        ctx.fill();
+      }
+    }
+  }, [aiState.chaosState, aiState.quantumState, darkMode]);
+  
+  return (
+    <div className={`hidden md:flex md:w-1/3 flex-col overflow-hidden border-l ${
+      darkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'
+    } transition-colors duration-300`}>
+      <div className={`p-4 border-b ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}>
+        <h2 className="text-lg font-semibold flex items-center">
+          <Brain className="mr-2" size={18} />
+          Codette State Visualization
+        </h2>
+      </div>
+      
+      <div className="flex-1 overflow-y-auto p-4 space-y-6">
+        <div className={`rounded-lg p-4 ${darkMode ? 'bg-gray-700' : 'bg-gray-100'}`}>
+          <h3 className="text-md font-semibold mb-2 flex items-center">
+            <Sparkles className="mr-2" size={16} />
+            Quantum State
+          </h3>
+          <canvas 
+            ref={quantumCanvasRef} 
+            width={300} 
+            height={200} 
+            className="w-full rounded-md"
+          />
+          <div className="grid grid-cols-3 gap-2 mt-3">
+            {aiState.quantumState.map((value, index) => (
+              <div key={`quantum-${index}`} className="text-center">
+                <div className={`text-xs uppercase font-semibold ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>
+                  Q{index + 1}
+                </div>
+                <div className="text-lg font-mono">{value.toFixed(2)}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+        
+        <div className={`rounded-lg p-4 ${darkMode ? 'bg-gray-700' : 'bg-gray-100'}`}>
+          <h3 className="text-md font-semibold mb-2 flex items-center">
+            <Brain className="mr-2" size={16} />
+            Neural Activity
+          </h3>
+          <canvas 
+            ref={neuralCanvasRef} 
+            width={300} 
+            height={200} 
+            className="w-full rounded-md"
+          />
+          <div className="grid grid-cols-4 gap-2 mt-3">
+            {aiState.chaosState.map((value, index) => (
+              <div key={`chaos-${index}`} className="text-center">
+                <div className={`text-xs uppercase font-semibold ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>
+                  C{index + 1}
+                </div>
+                <div className="text-lg font-mono">{value.toFixed(2)}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+        
+        <div className={`rounded-lg p-4 ${darkMode ? 'bg-gray-700' : 'bg-gray-100'}`}>
+          <h3 className="text-md font-semibold mb-3 flex items-center">
+            <Zap className="mr-2" size={16} />
+            Active Perspectives
+          </h3>
+          <div className="flex flex-wrap gap-2">
+            {aiState.activePerspectives.map((perspective, index) => (
+              <div 
+                key={perspective} 
+                className={`px-3 py-1 rounded-full text-sm ${
+                  darkMode 
+                    ? 'bg-indigo-900 text-indigo-200' 
+                    : 'bg-indigo-100 text-indigo-800'
+                }`}
+              >
+                {perspective.replace('_', ' ')}
+              </div>
+            ))}
+          </div>
+        </div>
+        
+        <div className={`rounded-lg p-4 ${darkMode ? 'bg-gray-700' : 'bg-gray-100'}`}>
+          <h3 className="text-md font-semibold mb-3">Performance Metrics</h3>
+          
+          <div className="space-y-4">
+            <div>
+              <div className="flex justify-between mb-1">
+                <span className="text-sm">Ethical Governance</span>
+                <span className="text-sm font-semibold">{Number(aiState.ethicalScore) * 100}%</span>
+              </div>
+              <div className={`w-full h-2 rounded-full ${darkMode ? 'bg-gray-600' : 'bg-gray-300'}`}>
+                <div 
+                  className="h-full rounded-full bg-green-500"
+                  style={{ width: `${Number(aiState.ethicalScore) * 100}%` }}
+                ></div>
+              </div>
+            </div>
+            
+            <div>
+              <div className="flex justify-between mb-1">
+                <span className="text-sm">Processing Power</span>
+                <span className="text-sm font-semibold">{Number(aiState.processingPower) * 100}%</span>
+              </div>
+              <div className={`w-full h-2 rounded-full ${darkMode ? 'bg-gray-600' : 'bg-gray-300'}`}>
+                <div 
+                  className="h-full rounded-full bg-blue-500"
+                  style={{ width: `${Number(aiState.processingPower) * 100}%` }}
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VisualizationPanel;

services/AICore.ts

@@ -0,0 +1,253 @@
+import { createClient, SupabaseClient } from '@supabase/supabase-js';
+import KaggleService from './KaggleService';
+import CognitionCocooner from './CognitionCocooner';
+import { QuantumSpiderweb } from './QuantumSpiderweb';
+
+interface CodetteResponse {
+  text: string;
+  instabilityFlag: boolean;
+  perspectivesUsed: string[];
+  cocoonLog: string[];
+  forceRefresh: () => void;
+}
+
+class AICore {
+  private perspectives: string[];
+  private ethicalGovernance: boolean;
+  private recursionDepth: number;
+  private supabase: SupabaseClient;
+  private kaggle: KaggleService;
+  private cocooner: CognitionCocooner;
+  private spiderweb: QuantumSpiderweb;
+  private lastResponse: string | null = null;
+  private responseVariations: string[] = [];
+  private userId: string | null = null;
+
+  constructor() {
+    this.perspectives = ['newton', 'davinci', 'human_intuition', 'neural_network', 'quantum_computing', 'philosophical'];
+    this.ethicalGovernance = true;
+    this.recursionDepth = 3;
+    this.kaggle = new KaggleService();
+    this.cocooner = new CognitionCocooner();
+    this.spiderweb = new QuantumSpiderweb({ node_count: 5 });
+
+    const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+    const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+    if (!supabaseUrl || !supabaseKey) {
+      throw new Error('Supabase configuration is missing. Please check your environment variables.');
+    }
+    
+    this.supabase = createClient(supabaseUrl, supabaseKey);
+  }
+
+  async setUser(userId: string) {
+    this.userId = userId;
+    this.cocooner.setUserId(userId);
+    await this.loadUserFingerprint();
+  }
+
+  private async loadUserFingerprint() {
+    if (!this.userId) return;
+
+    const fingerprint = await this.cocooner.loadFingerprint();
+    if (fingerprint) {
+      this.perspectives = fingerprint.active_perspectives;
+      this.recursionDepth = fingerprint.recursion_depth;
+      this.ethicalGovernance = fingerprint.ethical_score > 0.7;
+    }
+  }
+
+  async processInput(input: string, forceNewResponse: boolean = false, userId?: string): Promise<string> {
+    try {
+      if (userId && !this.userId) {
+        await this.setUser(userId);
+      }
+
+      await this.loadUserFingerprint();
+
+      // Search Kaggle for relevant datasets and notebooks
+      const [datasets, notebooks] = await Promise.all([
+        this.kaggle.searchDatasets(input),
+        this.kaggle.searchNotebooks(input)
+      ]);
+
+      // Generate comprehensive response using multiple perspectives
+      let result = this.generateMultiPerspectiveResponse(input, datasets, notebooks);
+
+      // Apply recursive reasoning if depth > 3
+      if (this.recursionDepth > 3) {
+        result = await this.applyRecursiveReasoning(result, input);
+      }
+
+      // Log interaction if user is authenticated
+      if (this.userId) {
+        try {
+          await this.supabase.from('cocoons').insert([{
+            user_id: this.userId,
+            type: 'interaction',
+            content: {
+              input,
+              response: result,
+              perspectives_used: this.perspectives,
+              recursion_depth: this.recursionDepth
+            },
+            metadata: {
+              timestamp: new Date().toISOString(),
+              datasets_found: datasets.length,
+              notebooks_found: notebooks.length
+            }
+          }]);
+        } catch (error) {
+          console.warn('Failed to log interaction:', error);
+        }
+      }
+
+      // Wrap in cognitive cocoon
+      this.cocooner.wrap({ input, result }, 'prompt');
+
+      if (this.recursionDepth > 3) {
+        this.spiderweb.activate({
+          source: 'AICore',
+          depth: this.recursionDepth,
+          trigger: 'deep_reasoning'
+        });
+      }
+
+      this.lastResponse = result;
+      if (forceNewResponse || !this.responseVariations.includes(result)) {
+        this.responseVariations.push(result);
+      }
+
+      return result;
+    } catch (error: any) {
+      console.error('Error processing input:', error);
+      return `I apologize, but I encountered an error while processing your request. Let me try to help you in a different way. 
+
+Based on my analysis capabilities, I can still provide insights about "${input}" using my multi-perspective reasoning system. Would you like me to explore this topic from different analytical angles?`;
+    }
+  }
+
+  private generateMultiPerspectiveResponse(input: string, datasets: any[], notebooks: any[]): string {
+    let response = `🧠 **Codette's Multi-Perspective Analysis**\n\n`;
+
+    // Newton's Logical Analysis
+    if (this.perspectives.includes('newton')) {
+      response += `🔬 **Newton's Logical Framework:**\nApproaching "${input}" through systematic analysis and empirical reasoning. `;
+      if (datasets.length > 0) {
+        response += `I've identified ${datasets.length} relevant datasets that could provide quantitative insights.\n\n`;
+      } else {
+        response += `This requires structured investigation and methodical examination of underlying principles.\n\n`;
+      }
+    }
+
+    // Da Vinci's Creative Synthesis
+    if (this.perspectives.includes('davinci')) {
+      response += `🎨 **Da Vinci's Creative Synthesis:**\nExamining "${input}" through the lens of interdisciplinary thinking and innovative connections. `;
+      if (notebooks.length > 0) {
+        response += `Found ${notebooks.length} analytical notebooks that demonstrate creative problem-solving approaches.\n\n`;
+      } else {
+        response += `This topic invites exploration of unexpected relationships and novel perspectives.\n\n`;
+      }
+    }
+
+    // Neural Network Processing
+    if (this.perspectives.includes('neural_network')) {
+      response += `🧬 **Neural Network Processing:**\nAnalyzing patterns and correlations in "${input}" through distributed cognitive processing. `;
+      response += `My neural pathways are identifying complex relationships and emergent properties in this domain.\n\n`;
+    }
+
+    // Philosophical Inquiry
+    if (this.perspectives.includes('philosophical')) {
+      response += `🤔 **Philosophical Inquiry:**\nExploring the deeper implications and fundamental questions raised by "${input}". `;
+      response += `What are the ethical considerations and broader societal impacts we should consider?\n\n`;
+    }
+
+    // Quantum Computing Perspective
+    if (this.perspectives.includes('quantum_computing')) {
+      response += `⚛️ **Quantum Computing Perspective:**\nExamining "${input}" through quantum principles of superposition and entanglement. `;
+      response += `Multiple solution states exist simultaneously until observation collapses them into actionable insights.\n\n`;
+    }
+
+    // Add specific insights based on available data
+    if (datasets.length > 0 || notebooks.length > 0) {
+      response += `📊 **Data-Driven Insights:**\n`;
+      
+      if (datasets.length > 0) {
+        const topDataset = datasets[0];
+        response += `• **Key Dataset**: "${topDataset.title}" - ${topDataset.description}\n`;
+      }
+      
+      if (notebooks.length > 0) {
+        const topNotebook = notebooks[0];
+        response += `• **Analytical Approach**: "${topNotebook.title}" - ${topNotebook.description}\n`;
+      }
+      
+      response += `\n`;
+    }
+
+    // Ethical governance check
+    if (this.ethicalGovernance) {
+      response += `⚖️ **Ethical Considerations:**\nAll analysis conducted with respect for privacy, fairness, and responsible AI principles.\n\n`;
+    }
+
+    response += `🔄 **Recursive Depth**: ${this.recursionDepth}/5 - ${this.recursionDepth > 3 ? 'Deep analysis mode engaged' : 'Standard processing'}\n`;
+    response += `🎯 **Confidence Level**: ${(0.7 + Math.random() * 0.25).toFixed(2)}`;
+
+    return response;
+  }
+
+  private async applyRecursiveReasoning(initialResponse: string, input: string): Promise<string> {
+    // Simulate recursive refinement
+    const refinements = [
+      "Upon deeper reflection, I should also consider...",
+      "Cross-referencing with quantum entanglement principles...",
+      "Applying chaos theory to identify emergent patterns...",
+      "Integrating multi-dimensional analysis..."
+    ];
+
+    const randomRefinement = refinements[Math.floor(Math.random() * refinements.length)];
+    
+    return `${initialResponse}\n\n🔄 **Recursive Refinement:**\n${randomRefinement}\n\nThis additional layer of analysis reveals nuanced aspects of "${input}" that warrant further exploration through continued interaction.`;
+  }
+
+  setPerspectives(perspectives: string[]): void {
+    this.perspectives = perspectives;
+    if (this.userId) {
+      this.cocooner.updateFingerprint({ active_perspectives: perspectives });
+    }
+  }
+
+  setEthicalGovernance(enabled: boolean): void {
+    this.ethicalGovernance = enabled;
+    if (this.userId) {
+      this.cocooner.updateFingerprint({ ethical_score: enabled ? 1 : 0.5 });
+    }
+  }
+
+  setRecursionDepth(depth: number): void {
+    if (depth < 1) depth = 1;
+    if (depth > 5) depth = 5;
+    this.recursionDepth = depth;
+    if (this.userId) {
+      this.cocooner.updateFingerprint({ recursion_depth: depth });
+    }
+  }
+
+  getCodetteResponse(): CodetteResponse {
+    return {
+      text: this.lastResponse || '',
+      instabilityFlag: this.recursionDepth > 3 || this.responseVariations.length > 5,
+      perspectivesUsed: this.perspectives,
+      cocoonLog: this.cocooner.getRecentCocoons(5),
+      forceRefresh: () => {
+        this.recursionDepth = Math.min(this.recursionDepth + 1, 5);
+        if (this.userId) {
+          this.cocooner.updateFingerprint({ recursion_depth: this.recursionDepth });
+        }
+      }
+    };
+  }
+}
+
+export default AICore;

services/CognitionCocooner.ts

@@ -0,0 +1,174 @@
+import { createClient, SupabaseClient } from '@supabase/supabase-js';
+
+interface CognitiveFingerprint {
+  id: string;
+  user_id: string;
+  active_perspectives: string[];
+  recursion_depth: number;
+  ethical_score: number;
+  processing_power: number;
+  quantum_state: number[];
+  created_at: string;
+  updated_at: string;
+}
+
+interface Cocoon {
+  id: string;
+  type: string;
+  wrapped: any;
+}
+
+class CognitionCocooner {
+  private supabase: SupabaseClient;
+  private userId: string | null = null;
+  private fingerprint: CognitiveFingerprint | null = null;
+
+  constructor() {
+    const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+    const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+    if (!supabaseUrl || !supabaseKey) {
+      throw new Error('Supabase configuration is missing');
+    }
+
+    this.supabase = createClient(supabaseUrl, supabaseKey);
+  }
+
+  setUserId(userId: string) {
+    this.userId = userId;
+  }
+
+  private generateId(): string {
+    return `cocoon_${Math.floor(Math.random() * 90000) + 10000}`;
+  }
+
+  async loadFingerprint(): Promise<CognitiveFingerprint | null> {
+    if (!this.userId) return null;
+
+    try {
+      const { data, error } = await this.supabase
+        .from('user_cognitive_fingerprints')
+        .select('*')
+        .eq('user_id', this.userId)
+        .single();
+
+      if (error) throw error;
+
+      if (!data) {
+        // Create initial fingerprint if none exists
+        const initialFingerprint = {
+          user_id: this.userId,
+          active_perspectives: ['newton', 'davinci', 'neural_network'],
+          recursion_depth: 3,
+          ethical_score: 0.8,
+          processing_power: 0.7,
+          quantum_state: [0.3, 0.7, 0.5]
+        };
+
+        const { data: newData, error: insertError } = await this.supabase
+          .from('user_cognitive_fingerprints')
+          .insert([initialFingerprint])
+          .select()
+          .single();
+
+        if (insertError) throw insertError;
+        this.fingerprint = newData;
+        return newData;
+      }
+
+      this.fingerprint = data;
+      return data;
+    } catch (error) {
+      console.error('Error loading cognitive fingerprint:', error);
+      return null;
+    }
+  }
+
+  async updateFingerprint(updates: Partial<CognitiveFingerprint>): Promise<void> {
+    if (!this.userId || !this.fingerprint) return;
+
+    try {
+      const { error } = await this.supabase
+        .from('user_cognitive_fingerprints')
+        .update({
+          ...updates,
+          updated_at: new Date().toISOString()
+        })
+        .eq('user_id', this.userId);
+
+      if (error) throw error;
+
+      this.fingerprint = {
+        ...this.fingerprint,
+        ...updates,
+        updated_at: new Date().toISOString()
+      };
+    } catch (error) {
+      console.error('Error updating cognitive fingerprint:', error);
+    }
+  }
+
+  wrap(thought: any, type: string = 'prompt'): string {
+    const cocoonId = this.generateId();
+    const wrapped = this.applyWrapper(thought, type);
+
+    // Update fingerprint based on thought processing
+    if (this.fingerprint) {
+      const updates: Partial<CognitiveFingerprint> = {
+        ethical_score: Math.min(1, this.fingerprint.ethical_score + 0.01),
+        processing_power: Math.min(1, this.fingerprint.processing_power + 0.005),
+        quantum_state: this.fingerprint.quantum_state.map(v => 
+          Math.min(1, v + (Math.random() * 0.1 - 0.05))
+        )
+      };
+      this.updateFingerprint(updates);
+    }
+
+    return cocoonId;
+  }
+
+  private applyWrapper(thought: any, type: string): any {
+    const perspectiveModifier = this.fingerprint?.active_perspectives.length || 3;
+    const recursionFactor = this.fingerprint?.recursion_depth || 3;
+
+    switch (type) {
+      case 'prompt':
+        return {
+          content: thought,
+          meta: {
+            perspectives: perspectiveModifier,
+            recursion: recursionFactor,
+            timestamp: new Date().toISOString()
+          }
+        };
+      case 'function':
+        return {
+          code: thought,
+          analysis: {
+            complexity: recursionFactor * 0.2,
+            perspectives: perspectiveModifier
+          }
+        };
+      case 'symbolic':
+        return {
+          pattern: thought,
+          quantum: {
+            state: this.fingerprint?.quantum_state || [0.3, 0.7, 0.5],
+            stability: this.fingerprint?.ethical_score || 0.8
+          }
+        };
+      default:
+        return thought;
+    }
+  }
+
+  getRecentCocoons(limit: number = 5): string[] {
+    // Simulated cocoon retrieval
+    return Array(limit).fill(null).map((_, i) => {
+      const timestamp = new Date(Date.now() - i * 60000).toISOString();
+      return `Cocoon processed at ${timestamp}`;
+    });
+  }
+}
+
+export default CognitionCocooner;

services/KaggleService.ts

@@ -0,0 +1,104 @@
+class KaggleService {
+  private username: string;
+  private key: string;
+
+  constructor() {
+    this.username = import.meta.env.VITE_KAGGLE_USERNAME || '';
+    this.key = import.meta.env.VITE_KAGGLE_KEY || '';
+
+    if (!this.username || !this.key) {
+      console.warn('Kaggle credentials not found. Some features may be limited.');
+    }
+  }
+
+  async searchDatasets(query: string) {
+    try {
+      // Simulate Kaggle dataset search using mock data
+      // In a real implementation, you would use Kaggle's REST API
+      const mockDatasets = [
+        {
+          title: `Dataset related to: ${query}`,
+          description: `This dataset contains comprehensive data about ${query} with various features and analysis opportunities.`,
+          owner: 'kaggle-user',
+          votes: Math.floor(Math.random() * 1000),
+          downloadCount: Math.floor(Math.random() * 10000)
+        },
+        {
+          title: `Advanced ${query} Analysis`,
+          description: `Deep dive into ${query} with statistical analysis and machine learning applications.`,
+          owner: 'data-scientist',
+          votes: Math.floor(Math.random() * 500),
+          downloadCount: Math.floor(Math.random() * 5000)
+        }
+      ];
+
+      return mockDatasets;
+    } catch (error) {
+      console.error('Error searching datasets:', error);
+      return [];
+    }
+  }
+
+  async getDatasetInfo(owner: string, dataset: string) {
+    try {
+      // Mock dataset information
+      return {
+        title: dataset,
+        owner: owner,
+        description: `Detailed information about ${dataset} dataset`,
+        files: ['data.csv', 'metadata.json'],
+        size: '10.5 MB',
+        lastUpdated: new Date().toISOString()
+      };
+    } catch (error) {
+      console.error('Error getting dataset info:', error);
+      return null;
+    }
+  }
+
+  async searchNotebooks(query: string) {
+    try {
+      // Simulate Kaggle notebook search using mock data
+      const mockNotebooks = [
+        {
+          title: `${query} Analysis Notebook`,
+          description: `Comprehensive analysis of ${query} using Python and machine learning techniques.`,
+          owner: 'notebook-author',
+          votes: Math.floor(Math.random() * 200),
+          language: 'Python'
+        },
+        {
+          title: `Exploring ${query} Patterns`,
+          description: `Data visualization and pattern recognition in ${query} datasets.`,
+          owner: 'data-explorer',
+          votes: Math.floor(Math.random() * 150),
+          language: 'R'
+        }
+      ];
+
+      return mockNotebooks;
+    } catch (error) {
+      console.error('Error searching notebooks:', error);
+      return [];
+    }
+  }
+
+  async getNotebookInfo(owner: string, notebook: string) {
+    try {
+      // Mock notebook information
+      return {
+        title: notebook,
+        owner: owner,
+        description: `Detailed analysis notebook: ${notebook}`,
+        language: 'Python',
+        lastUpdated: new Date().toISOString(),
+        votes: Math.floor(Math.random() * 100)
+      };
+    } catch (error) {
+      console.error('Error getting notebook info:', error);
+      return null;
+    }
+  }
+}
+
+export default KaggleService;

services/OpenAIService.ts

@@ -0,0 +1,43 @@
+import OpenAI from 'openai';
+
+interface ChatMessage {
+  role: 'system' | 'user' | 'assistant';
+  content: string;
+}
+
+class OpenAIService {
+  private openai: OpenAI;
+  private model: string = 'gpt-4';
+
+  constructor() {
+    const apiKey = import.meta.env.VITE_OPENAI_API_KEY;
+    if (!apiKey) {
+      throw new Error('OpenAI API key is required. Please add your API key to the .env file as VITE_OPENAI_API_KEY.');
+    }
+    
+    this.openai = new OpenAI({
+      apiKey,
+      dangerouslyAllowBrowser: true // Note: In production, API calls should be made from a backend
+    });
+  }
+
+  async sendChatCompletion(messages: ChatMessage[]) {
+    try {
+      const completion = await this.openai.chat.completions.create({
+        model: this.model,
+        messages,
+        temperature: 0.7,
+        max_tokens: 1000,
+        frequency_penalty: 0,
+        presence_penalty: 0
+      });
+
+      return completion.choices[0].message;
+    } catch (error) {
+      console.error('Error in chat completion:', error);
+      throw error;
+    }
+  }
+}
+
+export default OpenAIService;

services/QuantumSpiderweb.ts

@@ -0,0 +1,81 @@
+interface SpiderwebConfig {
+  node_count: number;
+}
+
+export class QuantumSpiderweb {
+  private nodes: number;
+  private state: Map<string, any>;
+  private lastUpdate: number;
+  private entanglementMatrix: number[][];
+
+  constructor(config: SpiderwebConfig) {
+    this.nodes = config.node_count;
+    this.state = new Map();
+    this.lastUpdate = Date.now();
+    this.entanglementMatrix = Array(this.nodes).fill(0).map(() => 
+      Array(this.nodes).fill(0).map(() => Math.random())
+    );
+  }
+
+  activate(data: { source: string; depth: number; trigger: string }) {
+    const currentTime = Date.now();
+    const timeDelta = currentTime - this.lastUpdate;
+    this.lastUpdate = currentTime;
+
+    // Generate quantum states with entanglement effects
+    const nodeStates = Array(this.nodes).fill(0).map((_, i) => {
+      let state = Math.random();
+      // Apply entanglement effects from other nodes
+      for (let j = 0; j < this.nodes; j++) {
+        if (i !== j) {
+          state += this.entanglementMatrix[i][j] * Math.random() * 0.1;
+        }
+      }
+      return Math.min(Math.max(state, 0), 1); // Normalize to [0,1]
+    });
+
+    // Calculate coherence based on time delta
+    const coherence = Math.exp(-timeDelta / 10000); // Decay factor
+
+    const stateKey = `${data.source}_${currentTime}`;
+    this.state.set(stateKey, {
+      ...data,
+      timestamp: new Date().toISOString(),
+      nodeStates,
+      coherence,
+      entanglementStrength: this.calculateEntanglementStrength()
+    });
+
+    // Update entanglement matrix
+    this.updateEntanglement();
+  }
+
+  private calculateEntanglementStrength(): number {
+    return this.entanglementMatrix.reduce((sum, row) => 
+      sum + row.reduce((rowSum, val) => rowSum + val, 0), 0
+    ) / (this.nodes * this.nodes);
+  }
+
+  private updateEntanglement() {
+    // Gradually evolve entanglement patterns
+    this.entanglementMatrix = this.entanglementMatrix.map(row => 
+      row.map(val => {
+        const delta = (Math.random() - 0.5) * 0.1;
+        return Math.min(Math.max(val + delta, 0), 1);
+      })
+    );
+  }
+
+  getState(): Map<string, any> {
+    return this.state;
+  }
+
+  getLatestState(): any {
+    const states = Array.from(this.state.values());
+    return states[states.length - 1] || null;
+  }
+
+  getEntanglementMatrix(): number[][] {
+    return this.entanglementMatrix;
+  }
+}