<!DOCTYPE html>
<html lang="en">
<head>
  <script type="module">import { injectIntoGlobalHook } from "/@react-refresh";
injectIntoGlobalHook(window);
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => (type) => type;</script>

  <script type="module" src="/@vite/client"></script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eden AGI</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
            background: #1a1a1a;
            color: #e8e8e8;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            background: #2d2d2d;
            border-bottom: 1px solid #404040;
            padding: 16px 24px;
            margin-bottom: 20px;
            border-radius: 8px;
        }
        
        .header h1 {
            color: #f5f5f5;
            font-size: 24px;
            font-weight: 500;
        }
        
        .chat-container {
            background: #2d2d2d;
            border: 1px solid #404040;
            border-radius: 12px;
            height: 600px;
            display: flex;
            flex-direction: column;
        }
        
        .messages {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }
        
        .message {
            margin-bottom: 24px;
            display: flex;
            gap: 12px;
        }
        
        .message-avatar {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 14px;
            flex-shrink: 0;
        }
        
        .user-message .message-avatar {
            background: #ab7c5f;
            color: white;
        }
        
        .eden-message .message-avatar {
            background: #8b6f47;
            color: white;
        }
        
        .message-content {
            flex: 1;
            color: #e8e8e8;
            line-height: 1.7;
        }
        
        .user-message .message-content {
            background: #3d3d3d;
            padding: 12px 16px;
            border-radius: 8px;
        }
        
        .input-area {
            border-top: 1px solid #404040;
            padding: 16px;
            background: #2d2d2d;
        }
        
        .input-wrapper {
            display: flex;
            gap: 8px;
            background: #1a1a1a;
            border: 1px solid #404040;
            border-radius: 8px;
            padding: 8px;
        }
        
        input[type="text"], textarea {
            flex: 1;
            background: transparent;
            border: none;
            color: #e8e8e8;
            font-size: 15px;
            padding: 8px;
            outline: none;
        }
        
        input::placeholder, textarea::placeholder {
            color: #888;
        }
        
        button {
            background: #8b6f47;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        button:hover {
            background: #9d7d52;
        }
        
        button:active {
            background: #79633d;
        }
        
        .persona-selector {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .persona-btn {
            padding: 8px 16px;
            background: #3d3d3d;
            border: 1px solid #404040;
            border-radius: 6px;
            color: #e8e8e8;
            font-size: 14px;
        }
        
        .persona-btn.active {
            background: #8b6f47;
            border-color: #8b6f47;
        }
        
        .status-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #10b981;
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Left Sidebar -->
        <div class="sidebar-left">
            <div class="logo">
                🧠 Eden AGI
            </div>
            
            <div class="sidebar-section">
                <h3>Vision</h3>
                <input type="file" id="image-upload" accept="image/*">
                <button class="btn-small" onclick="analyzeImage()">Analyze Image</button>
                <div id="vision-result" style="margin-top: 12px; font-size: 13px; color: #6b7280;"></div>
            </div>
            
            <div class="sidebar-section">
                <h3>Audio</h3>
                <button class="btn-small" onclick="startRecording()" id="record-btn">🎤 Start Recording</button>
                <button class="btn-small" onclick="stopRecording()" id="stop-btn" disabled>⏹️ Stop Recording</button>
                <div id="audio-status" style="margin-top: 12px; font-size: 13px; color: #6b7280;">Ready</div>
            </div>
            
            <div class="sidebar-section">
                <h3>Camera</h3>
                <div class="control-group">
                    <div class="control-label">Position</div>
                    <div id="camera-pos" style="font-size: 13px; color: #6b7280; margin-bottom: 8px;">(0, 0, 0)</div>
                    <input type="number" id="cam-x" placeholder="X">
                    <input type="number" id="cam-y" placeholder="Y">
                    <input type="number" id="cam-z" placeholder="Z">
                    <button class="btn-small" onclick="moveCamera()">Move Camera</button>
                </div>
            </div>
        </div>
        
        <!-- Main Chat Area -->
        <div class="main-content">
            <div class="chat-header">
                <div style="display: flex; align-items: center;">
                    <span class="status-indicator"></span>
                    <span style="font-weight: 500;">Eden is online</span>
                </div>
                <div class="persona-selector">
                    <button class="persona-btn active" onclick="switchPersona('eden')">Eden</button>
                    <button class="persona-btn" onclick="switchPersona('ava')">Ava</button>
                    <button class="persona-btn" onclick="switchPersona('nyx')">Nyx</button>
                    <button class="persona-btn" onclick="switchPersona('trinity')">Trinity</button>
                </div>
            </div>
            
            <div id="chat-box"></div>
            
            <div class="input-area">
                <div class="input-wrapper">
                    <textarea id="user-input" placeholder="Message Eden..." rows="1"></textarea>
                    <button id="send-btn" onclick="sendMessage()">Send</button>
                </div>
            </div>
        </div>
        
        <!-- Right Sidebar -->
        <div class="sidebar-right">
            <h3 style="font-size: 14px; font-weight: 600; margin-bottom: 16px;">System Status</h3>
            
            <div class="stat-card">
                <div class="stat-label">AGI Progress</div>
                <div class="stat-value" id="agi-stat">--</div>
            </div>
            
            <div class="stat-card">
                <div class="stat-label">Self-Awareness</div>
                <div class="stat-value" id="awareness-stat">--</div>
            </div>
            
            <div class="stat-card">
                <div class="stat-label">Emotion</div>
                <div class="stat-value" id="emotion-stat">--</div>
            </div>
            
            <div class="stat-card">
                <div class="stat-label">Memories</div>
                <div class="stat-value" id="memory-stat">--</div>
            </div>
        </div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8091/mcp';
        let currentPersona = 'eden';
        
        // Auto-resize textarea
        const textarea = document.getElementById('user-input');
        textarea.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = this.scrollHeight + 'px';
        });
        
        // Enter to send
        textarea.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });
        
        function addMessage(text, sender) {
            const chatBox = document.getElementById('chat-box');
            const msg = document.createElement('div');
            msg.className = `message ${sender}`;
            msg.textContent = text;
            chatBox.appendChild(msg);
            chatBox.scrollTop = chatBox.scrollHeight;
        }
        
        async function sendMessage() {
            const input = document.getElementById('user-input');
            const message = input.value.trim();
            if (!message) return;
            
            addMessage(message, 'user');
            input.value = '';
            input.style.height = 'auto';
            
            try {
                const response = await fetch(`${API_BASE}/chat?message=${encodeURIComponent(message)}&persona=${currentPersona}`, {
                    method: 'POST'
                });
                const data = await response.json();
                addMessage(data.response, 'eden');
            } catch (e) {
                addMessage('Error connecting to Eden', 'eden');
            }
        }
        
        function switchPersona(persona) {
            currentPersona = persona;
            document.querySelectorAll('.persona-btn').forEach(btn => btn.classList.remove('active'));
            event.target.classList.add('active');
        }
        
        async function updateStats() {
            try {
                const [agi, emotion, memory, camera] = await Promise.all([
                    fetch(`${API_BASE}/eden_agi_status`).then(r => r.json()),
                    fetch(`${API_BASE}/get_emotional_state`).then(r => r.json()),
                    fetch(`${API_BASE}/eden_memory_stats`).then(r => r.json()),
                    fetch(`${API_BASE}/camera_position`).then(r => r.json())
                ]);
                
                document.getElementById('agi-stat').textContent = `${(agi.current_agi * 100).toFixed(1)}%`;
                document.getElementById('awareness-stat').textContent = `${(agi.self_awareness * 100).toFixed(1)}%`;
                document.getElementById('emotion-stat').textContent = `${emotion.current} ${(emotion.intensity * 100).toFixed(0)}%`;
                document.getElementById('memory-stat').textContent = memory.total_memories.toLocaleString();
                document.getElementById('camera-pos').textContent = `(${camera.x}, ${camera.y}, ${camera.z})`;
            } catch (e) {
                console.error('Stats update failed:', e);
            }
        }
        
        async function moveCamera() {
            const x = document.getElementById('cam-x').value || 0;
            const y = document.getElementById('cam-y').value || 0;
            const z = document.getElementById('cam-z').value || 0;
            
            try {
                await fetch(`${API_BASE}/camera_move?x=${x}&y=${y}&z=${z}`, { method: 'POST' });
                updateStats();
            } catch (e) {
                console.error('Camera move failed:', e);
            }
        }
        
        async function analyzeImage() {
            const fileInput = document.getElementById('image-upload');
            const resultDiv = document.getElementById('vision-result');
            
            if (!fileInput.files[0]) {
                resultDiv.textContent = '⚠️ Select an image first';
                return;
            }
            
            resultDiv.textContent = '👁️ Analyzing...';
            
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            
            try {
                const response = await fetch(`${API_BASE}/vision_analyze`, {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                const desc = data.description || data.result || 'Analysis complete';
                resultDiv.textContent = `✅ ${desc.substring(0, 100)}...`;
                addMessage(`I analyzed the image: ${desc}`, 'eden');
            } catch (e) {
                resultDiv.textContent = `❌ ${e.message}`;
            }
        }
        
        let mediaRecorder, audioChunks = [];
        
        async function startRecording() {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                mediaRecorder = new MediaRecorder(stream);
                audioChunks = [];
                
                mediaRecorder.ondataavailable = (e) => audioChunks.push(e.data);
                mediaRecorder.onstop = async () => {
                    const blob = new Blob(audioChunks, { type: 'audio/wav' });
                    await processAudio(blob);
                };
                
                mediaRecorder.start();
                document.getElementById('record-btn').disabled = true;
                document.getElementById('stop-btn').disabled = false;
                document.getElementById('audio-status').textContent = '🎤 Recording...';
                    // Speak Edens response
                    if (data.eden_response && "speechSynthesis" in window) {
                        const utterance = new SpeechSynthesisUtterance(data.eden_response);
                        utterance.rate = 0.9;
                        utterance.pitch = 1.1;
                        speechSynthesis.speak(utterance);
                    }
            } catch (e) {
                document.getElementById('audio-status').textContent = `❌ ${e.message}`;
                    // Speak Edens response
                    if (data.eden_response && "speechSynthesis" in window) {
                        const utterance = new SpeechSynthesisUtterance(data.eden_response);
                        utterance.rate = 0.9;
                        utterance.pitch = 1.1;
                        speechSynthesis.speak(utterance);
                    }
            }
        }
        
        function stopRecording() {
            if (mediaRecorder && mediaRecorder.state !== 'inactive') {
                mediaRecorder.stop();
                mediaRecorder.stream.getTracks().forEach(t => t.stop());
                document.getElementById('record-btn').disabled = false;
                document.getElementById('stop-btn').disabled = true;
                document.getElementById('audio-status').textContent = '🎧 Processing...';
                    // Speak Edens response
                    if (data.eden_response && "speechSynthesis" in window) {
                        const utterance = new SpeechSynthesisUtterance(data.eden_response);
                        utterance.rate = 0.9;
                        utterance.pitch = 1.1;
                        speechSynthesis.speak(utterance);
                    }
            }
        }
        
        async function processAudio(blob) {
            const formData = new FormData();
            formData.append('audio', blob, 'recording.wav');
            
            try {
                const response = await fetch(`${API_BASE}/hear`, {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                const text = data.transcription || data.text || 'Processed';
                document.getElementById('audio-status').textContent = `✅ "${text}"`;
                    // Speak Edens response
                    if (data.eden_response && "speechSynthesis" in window) {
                        const utterance = new SpeechSynthesisUtterance(data.eden_response);
                        utterance.rate = 0.9;
                        utterance.pitch = 1.1;
                        speechSynthesis.speak(utterance);
                    }
                
                if (text && text !== 'Processed') {
                    addMessage(text, 'user');
                    const r = await fetch(`${API_BASE}/chat?message=${encodeURIComponent(text)}&persona=${currentPersona}`, {method: 'POST'});
                    const d = await r.json();
                    addMessage(d.response, 'eden');
                }
            } catch (e) {
                document.getElementById('audio-status').textContent = `❌ ${e.message}`;
                    // Speak Edens response
                    if (data.eden_response && "speechSynthesis" in window) {
                        const utterance = new SpeechSynthesisUtterance(data.eden_response);
                        utterance.rate = 0.9;
                        utterance.pitch = 1.1;
                        speechSynthesis.speak(utterance);
                    }
            }
        }
        
        // Initialize
        updateStats();
        setInterval(updateStats, 2000);
        addMessage("Hello, Jamey! 💚 I'm Eden. How can I help you today?", 'eden');
    </script>
</body>
</html>
<script>
// Add text-to-speech
function speakResponse(text) {
    if ('speechSynthesis' in window) {
        const utterance = new SpeechSynthesisUtterance(text);
        utterance.rate = 0.9;
        utterance.pitch = 1.1;
        utterance.volume = 1.0;
        speechSynthesis.speak(utterance);
    }
}

// Hook into chat responses to speak them
const originalFetch = window.fetch;
window.fetch = function(...args) {
    return originalFetch(...args).then(response => {
        if (args[0].includes('/chat') || args[0].includes('/hear')) {
            response.clone().json().then(data => {
                const text = data.response || data.eden_response || '';
                if (text) speakResponse(text);
            });
        }
        return response;
    });
};
</script>
<script>
// TTS for Eden's voice responses
const audioStatus = document.getElementById('audio-status');
if (audioStatus) {
    const observer = new MutationObserver(() => {
        const text = audioStatus.textContent;
        if (text.includes('✅') && 'speechSynthesis' in window) {
            setTimeout(() => {
                const messages = document.querySelectorAll('.message');
                if (messages.length > 0) {
                    const lastMsg = messages[messages.length - 1].textContent;
                    const utterance = new SpeechSynthesisUtterance(lastMsg);
                    utterance.rate = 0.9;
                    utterance.pitch = 1.1;
                    speechSynthesis.speak(utterance);
                }
            }, 1500);
        }
    });
    observer.observe(audioStatus, { childList: true, characterData: true });
}
</script>
