Upload 41 files

vanhri-ai---the-mind-that-builds-worlds/.env.local

@@ -0,0 +1 @@
+GEMINI_API_KEY=PLACEHOLDER_API_KEY

vanhri-ai---the-mind-that-builds-worlds/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

vanhri-ai---the-mind-that-builds-worlds/App.tsx

@@ -0,0 +1,697 @@
+
+import React, { useState, useCallback, useEffect } from 'react';
+import ChatWindow from './components/ChatWindow';
+import Login from './components/Login';
+import SignUp from './components/SignUp';
+import Verify from './components/Verify';
+import Welcome from './components/Welcome';
+import Sidebar from './components/Sidebar';
+import { VANHRI_PERSONA, AGENT_PERSONA } from './constants';
+import { Message, Memory, Auth, GroundingCitation, MindMapData, ProactiveSuggestion, NotebookSource, ChartData } from './types';
+import { generateTextStream, generateImage, generateJson } from './services/geminiService';
+import { authService } from './services/authService';
+import { cryptoService } from './services/cryptoService';
+import { emailService } from './services/emailService';
+import { ttsService } from './services/ttsService';
+import ImageEditorModal from './components/ImageEditorModal';
+import CallUI from './components/CallUI';
+import VisualSolverModal from './components/VisualSolverModal';
+import { Bot } from './components/Icons';
+import { GoogleGenAI, Chat, Type, Part } from "@google/genai";
+
+// Helper to extract a memory JSON object from the AI response
+const extractMemoryPayload = (text: string): { cleanText: string; payload: any | null } => {
+    const memoryJsonRegex = /{\s*"type"\s*:\s*"memory"[\s\S]*?}/;
+    const match = text.match(memoryJsonRegex);
+
+    if (match) {
+        const jsonString = match[0];
+        try {
+            const payload = JSON.parse(jsonString);
+            if (payload.type === 'memory' && payload.memory) {
+                const cleanText = text.replace(jsonString, '').trim();
+                return { cleanText, payload };
+            }
+        } catch (e) { /* Not a valid JSON or doesn't match schema, ignore. */ }
+    }
+    return { cleanText: text, payload: null };
+};
+
+
+const App: React.FC = () => {
+  const [auth, setAuth] = useState<Auth>({ status: 'loading' });
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [memories, setMemories] = useState<Memory[]>([]);
+  const [notebookSources, setNotebookSources] = useState<NotebookSource[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [isAutoPlayAudio, setIsAutoPlayAudio] = useState<boolean>(true);
+  const [isAiSpeaking, setIsAiSpeaking] = useState<boolean>(false);
+  const [proactiveSuggestion, setProactiveSuggestion] = useState<ProactiveSuggestion | null>(null);
+  const [isAgentChatActive, setIsAgentChatActive] = useState<boolean>(false);
+  const [agentChatSession, setAgentChatSession] = useState<Chat | null>(null);
+  const [editingImage, setEditingImage] = useState<{ messageId: string; imageIndex: number | null; imageData: string; } | null>(null);
+  const [callState, setCallState] = useState<{ active: boolean; type: 'video' | 'audio' | null }>({ active: false, type: null });
+  const [isVisualSolverOpen, setIsVisualSolverOpen] = useState(false);
+
+  const loadUserSessionData = useCallback(async (user: {id: string; email: string}) => {
+    const savedMessages = await cryptoService.getEncryptedData(`vanhri-chat-${user.id}`);
+    const savedMemories = await cryptoService.getEncryptedData(`vanhri-memories-${user.id}`);
+    const savedAudioSetting = await cryptoService.getEncryptedData(`vanhri-settings-${user.id}`);
+    const savedNotebookSources = await cryptoService.getEncryptedData(`vanhri-notebook-${user.id}`);
+
+    if (savedMessages && savedMessages.length > 0) {
+      setMessages(savedMessages);
+       // Proactive Suggestion Logic
+      if (savedMessages.length > 10 && savedMessages.filter(m => m.sender === 'user').length > 4) {
+        setProactiveSuggestion({
+            id: 'suggestion-summarize',
+            text: 'This is a long conversation. Would you like me to summarize it?',
+            actionText: 'Summarize our chat',
+            action: 'Please summarize our conversation so far, focusing on the key topics and decisions made.',
+        });
+      }
+
+    } else {
+      const welcomeText = user.id === 'guest-session'
+        ? 'I am Vanhri AI. It is a pleasure to connect. How may we begin our journey together? Note: Your chat history in guest mode is saved only in this browser.'
+        : `Welcome, ${user.email.split('@')[0]}. I am Vanhri AI. It is a pleasure to connect. How may we begin our journey together?`;
+      
+      const initialMessage: Message = { id: 'init', sender: 'ai', text: welcomeText };
+      setMessages([initialMessage]);
+      // Do not save the initial message here. This prevents overwriting a potentially corrupt
+      // but still valuable history on a load error. The history will be created on the first user message.
+    }
+
+    setMemories(savedMemories || []);
+    setNotebookSources(savedNotebookSources || []);
+    if (savedAudioSetting !== null && savedAudioSetting !== undefined) {
+        setIsAutoPlayAudio(savedAudioSetting.autoPlayAudio);
+    }
+  }, []);
+
+  useEffect(() => {
+    const checkSession = async () => {
+      try {
+        const session = authService.getCurrentSession();
+        if (session) {
+            setAuth({ status: 'authenticated', user: session });
+            await loadUserSessionData(session);
+        } else {
+            setAuth({ status: 'landing' });
+        }
+      } catch (error) {
+        console.error("Failed to initialize user session:", error);
+        setAuth({ status: 'landing' }); // Fallback to landing on any error
+      }
+    };
+    // Initialize sidebar state based on screen size
+    setIsSidebarOpen(window.innerWidth > 768);
+    checkSession();
+  }, [loadUserSessionData]);
+  
+  const handleLogin = useCallback(async (user: {id: string, email: string}) => {
+    setAuth({ status: 'authenticated', user });
+    await loadUserSessionData(user);
+  }, [loadUserSessionData]);
+
+  const handleGuest = useCallback(async () => {
+    const guestUser = { id: 'guest-session', email: 'Guest' };
+    setAuth({ status: 'guest', user: guestUser });
+    await loadUserSessionData(guestUser);
+  }, [loadUserSessionData]);
+
+  const handleLogout = () => {
+    if(auth.status === 'authenticated' || auth.status === 'guest') {
+       if (window.confirm('Are you sure you want to end this session?')) {
+        if (auth.status === 'authenticated') authService.logout();
+        ttsService.cancel();
+        setIsAiSpeaking(false);
+        setAuth({ status: 'landing' });
+        setMessages([]);
+        setMemories([]);
+        setNotebookSources([]);
+        setProactiveSuggestion(null);
+        setIsAgentChatActive(false);
+        setAgentChatSession(null);
+       }
+    }
+  };
+
+  const clearChatHistory = async () => {
+    if ((auth.status === 'authenticated' || auth.status === 'guest') && window.confirm('Are you sure you want to permanently delete this chat history?')) {
+      ttsService.cancel();
+      setIsAiSpeaking(false);
+      const initialMessage: Message = {
+        id: 'init-cleared',
+        sender: 'ai',
+        text: `The past is clear. We have a fresh start, ${auth.user.email.split('@')[0]}. Let us create something new.`,
+      };
+      setMessages([initialMessage]);
+      setProactiveSuggestion(null);
+      setIsAgentChatActive(false);
+      setAgentChatSession(null);
+      await cryptoService.setEncryptedData(`vanhri-chat-${auth.user.id}`, [initialMessage]);
+    }
+  }
+
+  const clearMemories = async () => {
+     if ((auth.status === 'authenticated' || auth.status === 'guest') && window.confirm("Are you sure you want to permanently erase all of Vanhri AI's memories of this conversation?")) {
+        setMemories([]);
+        await cryptoService.removeEncryptedData(`vanhri-memories-${auth.user.id}`);
+     }
+  }
+  
+  const clearNotebook = async () => {
+    if ((auth.status === 'authenticated' || auth.status === 'guest') && window.confirm("Are you sure you want to permanently remove all documents from your notebook?")) {
+      setNotebookSources([]);
+      await cryptoService.removeEncryptedData(`vanhri-notebook-${auth.user.id}`);
+    }
+  };
+
+  const handleAddSource = async (name: string, content: string, mimeType: string) => {
+    if ((auth.status !== 'authenticated' && auth.status !== 'guest')) return;
+    const { user } = auth;
+    
+    const newSource: NotebookSource = {
+        id: `source-${Date.now()}`,
+        name,
+        content,
+        mimeType
+    };
+    const updatedSources = [...notebookSources, newSource];
+    setNotebookSources(updatedSources);
+    await cryptoService.setEncryptedData(`vanhri-notebook-${user.id}`, updatedSources);
+    
+    const systemMessage: Message = {
+        id: `sys-${Date.now()}`,
+        sender: 'ai',
+        text: `*Source added to Notebook: "${name}"*`
+    };
+    const updatedMessages = [...messages, systemMessage];
+    setMessages(updatedMessages);
+    await cryptoService.setEncryptedData(`vanhri-chat-${user.id}`, updatedMessages);
+  };
+
+
+  const handleStartCall = (type: 'video' | 'audio') => {
+    ttsService.cancel();
+    setIsAiSpeaking(false);
+    setCallState({ active: true, type });
+  };
+
+  const handleEndCall = () => {
+      setCallState({ active: false, type: null });
+  };
+
+  const handleEditImage = (messageId: string, imageIndex: number | null, imageData: string) => {
+      setEditingImage({ messageId, imageIndex, imageData });
+  };
+
+  const handleSaveEditedImage = async (newImageData: string) => {
+      if (!editingImage || (auth.status !== 'authenticated' && auth.status !== 'guest')) return;
+      
+      const { user } = auth;
+      const { messageId, imageIndex } = editingImage;
+
+      const updatedMessages = messages.map(msg => {
+          if (msg.id === messageId) {
+              const updatedMsg = { ...msg };
+              const base64Data = newImageData.split(',')[1];
+              
+              if (imageIndex !== null && updatedMsg.generatedImages) {
+                  // Create a new array for generatedImages to ensure state update
+                  const newGeneratedImages = [...updatedMsg.generatedImages];
+                  newGeneratedImages[imageIndex] = base64Data;
+                  updatedMsg.generatedImages = newGeneratedImages;
+              } else if (imageIndex === null) {
+                  updatedMsg.image = newImageData; // this is already a data URL
+              }
+              return updatedMsg;
+          }
+          return msg;
+      });
+
+      setMessages(updatedMessages);
+      await cryptoService.setEncryptedData(`vanhri-chat-${user.id}`, updatedMessages);
+      setEditingImage(null);
+  };
+
+
+  const handleHandoffToAgent = useCallback(async () => {
+    if (isAgentChatActive || isLoading || (auth.status !== 'authenticated' && auth.status !== 'guest') || !process.env.API_KEY) {
+        if (!process.env.API_KEY) {
+             const errorMsg: Message = { id: `sys-err-${Date.now()}`, sender: 'ai', text: 'Live agent handoff is currently unavailable. The system is not configured with the required API key.' };
+             setMessages(prev => [...prev, errorMsg]);
+        }
+        return;
+    };
+    const { user } = auth;
+    
+    ttsService.cancel();
+    setIsAiSpeaking(false);
+    setIsLoading(true);
+    setIsAgentChatActive(true);
+
+    const handoffMsg: Message = { id: `sys-${Date.now()}`, sender: 'ai', text: '*Connecting you to a live support agent...*' };
+    const updatedMessages = [...messages, handoffMsg];
+    setMessages(updatedMessages);
+    await cryptoService.setEncryptedData(`vanhri-chat-${user.id}`, updatedMessages);
+    
+    try {
+        const ai = new GoogleGenAI({apiKey: process.env.API_KEY});
+        const chat = ai.chats.create({
+            model: 'gemini-2.5-flash',
+            config: { systemInstruction: AGENT_PERSONA }
+        });
+        setAgentChatSession(chat);
+
+        const result = await chat.sendMessage({ message: "Hello, introduce yourself as Alex and ask how you can help." });
+        const agentWelcomeMsg: Message = { id: `agent-${Date.now()}`, sender: 'ai', text: result.text, isAgent: true };
+        
+        setMessages(prev => {
+            const finalMessages = [...prev, agentWelcomeMsg];
+            cryptoService.setEncryptedData(`vanhri-chat-${user.id}`, finalMessages);
+            return finalMessages;
+        });
+
+    } catch(error) {
+        console.error("Agent chat initialization failed:", error);
+        const errorMsg: Message = { id: `sys-err-${Date.now()}`, sender: 'ai', text: 'Sorry, I was unable to connect to a live agent at this time. Please try again later.' };
+        setMessages(prev => [...prev, errorMsg]);
+        setIsAgentChatActive(false);
+    } finally {
+        setIsLoading(false);
+    }
+}, [auth, isAgentChatActive, isLoading, messages]);
+
+
+  const handleEndAgentChat = useCallback(async () => {
+      if (!isAgentChatActive || isLoading || (auth.status !== 'authenticated' && auth.status !== 'guest')) return;
+      const { user } = auth;
+      
+      ttsService.cancel();
+      setIsAiSpeaking(false);
+      setIsAgentChatActive(false);
+      setAgentChatSession(null);
+
+      const agentGoodbyeMsg: Message = { id: `agent-${Date.now()}`, sender: 'ai', text: 'Thank you for your time. I\'m transferring you back to Vanhri AI now.', isAgent: true };
+      const novaReturnMsg: Message = { id: `ai-${Date.now()}`, sender: 'ai', text: 'I am back. How may we continue our journey?' };
+      
+      const finalMessages = [...messages, agentGoodbyeMsg, novaReturnMsg];
+      setMessages(finalMessages);
+      await cryptoService.setEncryptedData(`vanhri-chat-${user.id}`, finalMessages);
+      
+  }, [auth, isAgentChatActive, isLoading, messages]);
+  
+  const handleSendMessage = useCallback(async (text: string, image: string | null) => {
+    if ((!text && !image) || (auth.status !== 'authenticated' && auth.status !== 'guest')) return;
+    const { user } = auth;
+    
+    // Stop any currently playing audio & remove suggestion
+    ttsService.cancel();
+    setIsAiSpeaking(false);
+    if(proactiveSuggestion) setProactiveSuggestion(null);
+
+    const userMessage: Message = {
+      id: `user-${Date.now()}`,
+      sender: 'user',
+      text: text,
+      image: image ? `data:image/jpeg;base64,${image}` : null,
+    };
+    
+    let newMessages = [...messages, userMessage];
+    setMessages(newMessages);
+    setIsLoading(true);
+    await cryptoService.setEncryptedData(`vanhri-chat-${user.id}`, newMessages);
+    
+    const aiMessageId = `ai-${Date.now()}`;
+    let aiMessagePlaceholder: Message = { id: aiMessageId, sender: 'ai', text: '', isAgent: isAgentChatActive };
+    setMessages(prev => [...prev, aiMessagePlaceholder]);
+
+    try {
+        // Agent Chat Logic
+        if (isAgentChatActive && agentChatSession) {
+            const stream = await agentChatSession.sendMessageStream({ message: text });
+            let fullText = '';
+            for await (const chunk of stream) {
+                fullText += chunk.text;
+                const agentResponse: Message = { id: aiMessageId, sender: 'ai', text: fullText, isAgent: true };
+                setMessages([...newMessages, agentResponse]);
+            }
+            const finalMessages = [...newMessages, { id: aiMessageId, sender: 'ai', text: fullText, isAgent: true }];
+            await cryptoService.setEncryptedData(`vanhri-chat-${user.id}`, finalMessages);
+            setIsLoading(false);
+            return;
+        }
+
+        const chatHistory = newMessages.slice(-10);
+        
+        // Command Handling
+        if (text.trim().startsWith('/chart ')) {
+            const topic = text.trim().substring(7).trim();
+            const prompt = `Generate a chart for the topic: "${topic}". The chart type should be one of 'bar', 'line', or 'pie' that best represents the data. Follow all chart rules in your persona precisely.`;
+            aiMessagePlaceholder = { ...aiMessagePlaceholder, text: `*Vanhri AI is visualizing a chart for: ${topic}*` };
+            setMessages(prev => prev.map(msg => msg.id === aiMessageId ? aiMessagePlaceholder : msg));
+            
+            const chartSchema = {
+                type: Type.OBJECT,
+                properties: {
+                    type: { type: Type.STRING, enum: ['bar', 'line', 'pie'] },
+                    title: { type: Type.STRING },
+                    keys: {
+                        type: Type.ARRAY,
+                        items: {
+                            type: Type.OBJECT,
+                            properties: {
+                                name: { type: Type.STRING },
+                                color: { type: Type.STRING }
+                            },
+                            required: ['name', 'color']
+                        }
+                    },
+                    data: {
+                        type: Type.ARRAY,
+                        items: {
+                            type: Type.OBJECT,
+                            properties: {
+                                label: { type: Type.STRING },
+                                values: { type: Type.ARRAY, items: { type: Type.NUMBER } }
+                            },
+                            required: ['label', 'values']
+                        }
+                    }
+                },
+                required: ['type', 'title', 'keys', 'data']
+            };
+
+            const { json: chartJson, error } = await generateJson(prompt, VANHRI_PERSONA, chartSchema);
+
+            let finalAiMessage: Message;
+            if (error) {
+                 finalAiMessage = { ...aiMessagePlaceholder, text: error };
+            } else if (chartJson && chartJson.type && chartJson.data) {
+                 finalAiMessage = { ...aiMessagePlaceholder, text: `Here is a chart for "${topic}":`, chartData: chartJson as ChartData };
+            } else {
+                finalAiMessage = { ...aiMessagePlaceholder, text: "I'm sorry, I was unable to generate a chart for that topic. The response from the AI was not in the expected format." };
+            }
+            const finalMessages = [...newMessages, finalAiMessage];
+            setMessages(finalMessages);
+            await cryptoService.setEncryptedData(`vanhri-chat-${user.id}`, finalMessages);
+
+        } else if (text.trim().startsWith('/mindmap ')) {
+            const topic = text.trim().substring(9).trim();
+            const prompt = `Generate a detailed, visually-structured mind map for the topic: "${topic}". Follow all mind map rules in your persona precisely.`;
+            aiMessagePlaceholder = { ...aiMessagePlaceholder, text: `*Vanhri AI is visualizing a mind map for: ${topic}*` };
+            setMessages(prev => prev.map(msg => msg.id === aiMessageId ? aiMessagePlaceholder : msg));
+
+            const mindMapSchema = {
+                type: Type.OBJECT,
+                properties: {
+                    type: { type: Type.STRING, description: "Should always be 'mindmap'" },
+                    data: {
+                        type: Type.OBJECT,
+                        properties: {
+                            nodes: {
+                                type: Type.ARRAY,
+                                items: {
+                                    type: Type.OBJECT,
+                                    properties: {
+                                        id: { type: Type.STRING },
+                                        position: {
+                                            type: Type.OBJECT,
+                                            properties: { x: { type: Type.NUMBER }, y: { type: Type.NUMBER } },
+                                            required: ['x', 'y'],
+                                        },
+                                        data: {
+                                            type: Type.OBJECT,
+                                            properties: { label: { type: Type.STRING } },
+                                            required: ['label'],
+                                        },
+                                        type: { type: Type.STRING },
+                                        style: {
+                                            type: Type.OBJECT,
+                                            properties: {
+                                                backgroundColor: { type: Type.STRING },
+                                                color: { type: Type.STRING },
+                                                width: { type: Type.NUMBER },
+                                                fontSize: { type: Type.STRING },
+                                                fontWeight: { type: Type.STRING },
+                                            }
+                                        }
+                                    },
+                                    required: ['id', 'position', 'data'],
+                                }
+                            },
+                            edges: {
+                                type: Type.ARRAY,
+                                items: {
+                                    type: Type.OBJECT,
+                                    properties: {
+                                        id: { type: Type.STRING },
+                                        source: { type: Type.STRING },
+                                        target: { type: Type.STRING },
+                                        animated: { type: Type.BOOLEAN }
+                                    },
+                                    required: ['id', 'source', 'target'],
+                                }
+                            }
+                        },
+                        required: ['nodes', 'edges'],
+                    }
+                },
+                required: ['type', 'data'],
+            };
+            
+            const { json: mindMapJson, error } = await generateJson(prompt, VANHRI_PERSONA, mindMapSchema);
+            
+            let finalAiMessage: Message;
+            if (error) {
+                 finalAiMessage = { ...aiMessagePlaceholder, text: error };
+            } else if (mindMapJson && mindMapJson.type === 'mindmap' && mindMapJson.data) {
+                finalAiMessage = { ...aiMessagePlaceholder, text: `Here is a mind map for "${topic}":`, mindMap: mindMapJson.data };
+            } else {
+                finalAiMessage = { ...aiMessagePlaceholder, text: "I'm sorry, I was unable to generate a mind map for that topic. The response from the AI was not in the expected format." };
+            }
+            const finalMessages = [...newMessages, finalAiMessage];
+            setMessages(finalMessages);
+            await cryptoService.setEncryptedData(`vanhri-chat-${user.id}`, finalMessages);
+        
+        } else {
+            // Standard text generation with autonomous actions
+            const searchKeywords = [
+                'current events', 'latest news', 'who won', 'what is the weather',
+                'medicine', 'medication', 'symptom', 'treatment', 'condition', 'health', 'doctor', 'hospital', 'clinic', 'pharmacy',
+                'stock price', 'market data', 'financial', 'economic', 'investment', 'stock', 'shares', 'dow jones', 'nasdaq', 'crypto',
+                'research', 'study', 'findings', 'scientific paper', 'what is the latest on'
+            ];
+            const useSearch = searchKeywords.some(keyword => text.toLowerCase().includes(keyword));
+
+            const imageB64 = image ? image : null;
+            
+            const notebookParts: Part[] = [];
+            if (notebookSources.length > 0) {
+                notebookParts.push({ text: "The user has provided the following documents as a knowledge base. Use them to answer the user's query." });
+                for (const source of notebookSources) { /* ... (notebook logic unchanged) ... */ }
+            }
+
+            const stream = generateTextStream(text, imageB64, chatHistory, VANHRI_PERSONA, notebookParts, { useSearch });
+
+            let fullText = '';
+            let finalAiMessage: Message | null = null;
+            let citations: GroundingCitation[] = [];
+            
+            let finalMessages = newMessages;
+
+            for await (const chunk of stream) {
+                if(chunk.citations && chunk.citations.length > 0) {
+                    citations = chunk.citations;
+                }
+                fullText += chunk.text || '';
+                
+                const { cleanText, payload } = extractMemoryPayload(fullText);
+                
+                finalAiMessage = { 
+                    id: aiMessageId, 
+                    sender: 'ai', 
+                    text: cleanText, 
+                    groundingCitations: citations,
+                    memory: payload?.memory,
+                    isAgent: isAgentChatActive,
+                };
+                
+                finalMessages = [...newMessages, finalAiMessage];
+                setMessages(finalMessages);
+            }
+            
+            if (finalAiMessage) {
+                // Autonomous Action Check
+                const imagineMatch = finalAiMessage.text.match(/\[VANHRI_IMAGINE:\s*(.*?)\]/s);
+                const threeDMatch = finalAiMessage.text.match(/\[VANHRI_3D:\s*(.*?)\]/s);
+                const cleanText = finalAiMessage.text.replace(/\[VANHRI_IMAGINE:.*?\]/s, '').replace(/\[VANHRI_3D:.*?\]/s, '').trim();
+
+                let messageToUpdate = { ...finalAiMessage, text: cleanText };
+                
+                if (imagineMatch && imagineMatch[1]) {
+                    const imagePrompt = imagineMatch[1];
+                    const statusUpdateMsg = {...messageToUpdate, text: `${cleanText}\n\n*Vanhri AI is materializing a cinematic image: ${imagePrompt}*`};
+                    setMessages([...newMessages, statusUpdateMsg]);
+                    try {
+                        const images = await generateImage(imagePrompt, 2);
+                        const finalImageMessage = { ...statusUpdateMsg, generatedImages: images, text: cleanText };
+                        const finalHistory = [...newMessages, finalImageMessage];
+                        setMessages(finalHistory);
+                        await cryptoService.setEncryptedData(`vanhri-chat-${user.id}`, finalHistory);
+                    } catch (e) {
+                         const errorMsg = { ...statusUpdateMsg, text: `${statusUpdateMsg.text}\n\nI encountered an error generating the image: ${e instanceof Error ? e.message : 'Unknown error'}` };
+                         setMessages([...newMessages, errorMsg]);
+                         await cryptoService.setEncryptedData(`vanhri-chat-${user.id}`, [...newMessages, errorMsg]);
+                    }
+                } else if (threeDMatch && threeDMatch[1]) {
+                    const threeDPrompt = threeDMatch[1];
+                    const statusUpdateMsg = {...messageToUpdate, text: `${cleanText}\n\n*Vanhri AI is constructing an interactive 3D model: ${threeDPrompt}*`};
+                    setMessages([...newMessages, statusUpdateMsg]);
+                     const threeJsSchema = {
+                        type: Type.OBJECT,
+                        properties: { code: { type: Type.STRING, description: "The JavaScript code for three.js" } },
+                        required: ['code']
+                    };
+                    const { json: parsedJson, error } = await generateJson(`Generate JavaScript for a three.js scene representing: "${threeDPrompt}". Follow all 3D model generation rules in your persona.`, VANHRI_PERSONA, threeJsSchema);
+                    
+                    let final3DMessage: Message;
+                    if (error) {
+                        final3DMessage = { ...statusUpdateMsg, text: `${cleanText}\n\n${error}` };
+                    } else if (parsedJson && parsedJson.code) {
+                        final3DMessage = { ...statusUpdateMsg, text: cleanText, generated3DCode: parsedJson.code };
+                    } else {
+                        final3DMessage = { ...statusUpdateMsg, text: `${cleanText}\n\nI'm sorry, I couldn't generate a 3D model. The response was not in the expected format.` };
+                    }
+                    const finalHistory = [...newMessages, final3DMessage];
+                    setMessages(finalHistory);
+                    await cryptoService.setEncryptedData(`vanhri-chat-${user.id}`, finalHistory);
+                } else {
+                    // Standard text response
+                    await cryptoService.setEncryptedData(`vanhri-chat-${user.id}`, [...newMessages, messageToUpdate]);
+                    if (isAutoPlayAudio && cleanText) {
+                        setIsAiSpeaking(true);
+                        ttsService.speak({ text: cleanText, onEnd: () => setIsAiSpeaking(false) });
+                    }
+                }
+
+                // Save memory if it exists
+                if (finalAiMessage.memory) {
+                    const newMemories = [...memories, { ...finalAiMessage.memory, id: `mem-${Date.now()}` }];
+                    setMemories(newMemories);
+                    await cryptoService.setEncryptedData(`vanhri-memories-${user.id}`, newMemories);
+                }
+            }
+        }
+    } catch (error) {
+        console.error("Failed to send message:", error);
+        const errorText = `I've encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`;
+        const errorMsg: Message = { ...aiMessagePlaceholder, text: errorText };
+        const finalMessages = [...newMessages, errorMsg];
+        setMessages(finalMessages);
+        await cryptoService.setEncryptedData(`vanhri-chat-${user.id}`, finalMessages);
+    } finally {
+        setIsLoading(false);
+    }
+  }, [auth, messages, isAutoPlayAudio, proactiveSuggestion, memories, notebookSources, isAgentChatActive, agentChatSession, handleHandoffToAgent]);
+  
+  if (auth.status === 'loading') {
+    return <div className="w-full h-screen bg-slate-900 flex items-center justify-center"><Bot className="w-12 h-12 text-fuchsia-500 animate-pulse" /></div>;
+  }
+  
+  if (auth.status === 'landing') {
+    return <Welcome onNavigateToLogin={() => setAuth({ status: 'unauthenticated' })} onNavigateToSignUp={() => setAuth({ status: 'signup' })} onContinueAsGuest={handleGuest} />;
+  }
+  
+  if (auth.status === 'unauthenticated') {
+    return <Login onLoginSuccess={handleLogin} onNavigateToSignUp={() => setAuth({ status: 'signup' })} onNavigateBack={() => setAuth({status: 'landing'})} />;
+  }
+  
+  if (auth.status === 'signup') {
+    return <SignUp onSignUpSuccess={(email, verificationCode) => setAuth({ status: 'verifying', email, verificationCode, emailServiceConfigured: emailService.isConfigured })} onNavigateToLogin={() => setAuth({ status: 'unauthenticated' })} onNavigateBack={() => setAuth({status: 'landing'})}/>;
+  }
+  
+  if (auth.status === 'verifying') {
+    return <Verify email={auth.email} verificationCode={auth.verificationCode} onVerifySuccess={handleLogin} />;
+  }
+  
+  if (auth.status === 'authenticated' || auth.status === 'guest') {
+    return (
+        <div className="flex h-screen text-slate-200 bg-slate-900">
+            <Sidebar 
+                isOpen={isSidebarOpen}
+                onClose={() => setIsSidebarOpen(false)}
+                onLogout={handleLogout}
+                onClearChat={clearChatHistory}
+                onClearMemories={clearMemories}
+                memories={memories}
+                username={auth.user.email}
+                isGuest={auth.status === 'guest'}
+                isAutoPlayAudio={isAutoPlayAudio}
+                onToggleAutoPlayAudio={async (enabled) => {
+                    setIsAutoPlayAudio(enabled);
+                    if (!enabled) {
+                        ttsService.cancel();
+                        setIsAiSpeaking(false);
+                    }
+                    if (auth.status === 'authenticated' || auth.status === 'guest') {
+                      await cryptoService.setEncryptedData(`vanhri-settings-${auth.user.id}`, { autoPlayAudio: enabled });
+                    }
+                }}
+                notebookSources={notebookSources}
+                onClearNotebook={clearNotebook}
+            />
+            <div className="flex-1 flex flex-col">
+                 <ChatWindow 
+                    messages={messages}
+                    isLoading={isLoading}
+                    onSendMessage={handleSendMessage}
+                    onToggleSidebar={() => setIsSidebarOpen(true)}
+                    username={auth.user.email.split('@')[0]}
+                    isGuest={auth.status === 'guest'}
+                    proactiveSuggestion={proactiveSuggestion}
+                    onDismissSuggestion={() => setProactiveSuggestion(null)}
+                    onStartCall={handleStartCall}
+                    onHandoff={handleHandoffToAgent}
+                    onEditImage={handleEditImage}
+                    isAgentChatActive={isAgentChatActive}
+                    onEndAgentChat={handleEndAgentChat}
+                    onOpenVisualSolver={() => setIsVisualSolverOpen(true)}
+                    isAiSpeaking={isAiSpeaking}
+                    onAddSource={handleAddSource}
+                />
+            </div>
+            {editingImage && (
+                <ImageEditorModal 
+                    imageData={editingImage.imageData}
+                    onClose={() => setEditingImage(null)}
+                    onSave={handleSaveEditedImage}
+                />
+            )}
+            {callState.active && callState.type && (
+                <CallUI 
+                    type={callState.type} 
+                    onHangup={handleEndCall} 
+                    username={auth.user.email}
+                />
+            )}
+            {isVisualSolverOpen && (
+                <VisualSolverModal
+                    onClose={() => setIsVisualSolverOpen(false)}
+                    onSendToChat={(text, image) => {
+                        setIsVisualSolverOpen(false);
+                        handleSendMessage(text, image);
+                    }}
+                />
+            )}
+        </div>
+    );
+  }
+  
+  return null; // Should not be reached
+};
+
+export default App;

vanhri-ai---the-mind-that-builds-worlds/README.md

@@ -0,0 +1,14 @@
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

vanhri-ai---the-mind-that-builds-worlds/components/CallUI.tsx

@@ -0,0 +1,306 @@
+
+
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { Phone, Microphone, Lock, MicOff, Video as VideoIcon, VideoOff, ScreenShare, ScreenShareOff, X, Sparkles } from './Icons';
+import { generateTextStream } from '../services/geminiService';
+import { ttsService } from '../services/ttsService';
+import { VANHRI_PERSONA } from '../constants';
+import { Message } from '../types';
+import NovaVisualizer from './NovaVisualizer';
+
+const UserPiP: React.FC<{ stream: MediaStream | null, isCameraOff: boolean, username: string }> = ({ stream, isCameraOff, username }) => {
+    const videoRef = useRef<HTMLVideoElement>(null);
+
+    useEffect(() => {
+        if (videoRef.current && stream) {
+            videoRef.current.srcObject = stream;
+        }
+    }, [stream]);
+
+    return (
+        <div className="absolute bottom-24 right-6 md:bottom-28 w-40 h-24 md:w-56 md:h-32 rounded-lg overflow-hidden border-2 border-slate-600 bg-black shadow-lg z-20">
+            {isCameraOff ? (
+                <div className="w-full h-full flex items-center justify-center">
+                    <VideoOff className="w-8 h-8 text-slate-400" />
+                </div>
+            ) : (
+                <video ref={videoRef} autoPlay playsInline muted className="w-full h-full object-cover transform -scale-x-100"></video>
+            )}
+             <div className="absolute bottom-0 left-0 bg-black/50 px-2 py-0.5 text-xs font-semibold rounded-tr-lg">{username}</div>
+        </div>
+    );
+};
+
+const VanhriResponseBubble: React.FC<{ message: Message | null, onClear: () => void }> = ({ message, onClear }) => {
+    if (!message) return null;
+    return (
+        <div className="absolute top-6 left-1/2 -translate-x-1/2 w-full max-w-2xl bg-slate-800/80 backdrop-blur-md border border-fuchsia-500/30 rounded-lg p-4 shadow-2xl animate-fade-in-up z-30">
+            <div className="flex items-start gap-3">
+                <Sparkles className="w-6 h-6 text-fuchsia-400 flex-shrink-0" />
+                <p className="flex-1 text-slate-200 whitespace-pre-wrap">{message.text}<span className="inline-block w-2 h-5 bg-fuchsia-400 ml-1 blinking-cursor"></span></p>
+                <button onClick={onClear} className="text-slate-500 hover:text-white"><X className="w-4 h-4"/></button>
+            </div>
+        </div>
+    );
+};
+
+const CallControlButton: React.FC<{onClick: () => void, disabled?: boolean, children: React.ReactNode, variant?: 'default' | 'danger' | 'primary', 'aria-label': string, isPulsing?: boolean}> = 
+    ({ onClick, disabled, children, variant='default', isPulsing, ...props }) => {
+        const baseClasses = "p-3 md:p-4 rounded-full transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900";
+        const variants = {
+            default: "bg-slate-700/60 hover:bg-slate-600 focus:ring-slate-500",
+            danger: "bg-red-600 hover:bg-red-700 focus:ring-red-500",
+            primary: `bg-fuchsia-600 hover:bg-fuchsia-700 focus:ring-fuchsia-500 ${isPulsing ? 'animate-pulse' : ''}`,
+        };
+        return <button onClick={onClick} disabled={disabled} className={`${baseClasses} ${variants[variant]}`} {...props}>{children}</button>
+    }
+
+
+const CallUI: React.FC<{ type: 'video' | 'audio', onHangup: () => void, username: string }> = ({ type, onHangup, username }) => {
+    const recognitionRef = useRef<any>(null);
+    const [userStream, setUserStream] = useState<MediaStream | null>(null);
+    const [screenStream, setScreenStream] = useState<MediaStream | null>(null);
+    const [isMicMuted, setIsMicMuted] = useState(false);
+    const [isCameraOff, setIsCameraOff] = useState(type === 'audio');
+    const [error, setError] = useState<string | null>(null);
+    const [isListening, setIsListening] = useState(false);
+    const [vanhriMessage, setVanhriMessage] = useState<Message | null>(null);
+    const [isAiThinking, setIsAiThinking] = useState(false);
+    const [isAiSpeaking, setIsAiSpeaking] = useState(false);
+
+
+    const handleHangup = useCallback(() => {
+        recognitionRef.current?.stop();
+        ttsService.cancel();
+        setIsAiSpeaking(false);
+        userStream?.getTracks().forEach(track => track.stop());
+        screenStream?.getTracks().forEach(track => track.stop());
+        onHangup();
+    }, [userStream, screenStream, onHangup]);
+
+
+    useEffect(() => {
+        const setupCall = async () => {
+            if (navigator.permissions) {
+                try {
+                    const micPerm = await navigator.permissions.query({ name: 'microphone' as PermissionName });
+                    if (micPerm.state === 'denied') {
+                        setError('Microphone access is denied. Please allow it in your browser settings to start a call.');
+                        return;
+                    }
+                    if (type === 'video') {
+                        const camPerm = await navigator.permissions.query({ name: 'camera' as PermissionName });
+                        if (camPerm.state === 'denied') {
+                            setError('Camera access is denied. Please allow it in your browser settings for a video call.');
+                            return;
+                        }
+                    }
+                } catch (e) {
+                    console.warn("Permissions API not supported or failed, proceeding with getUserMedia directly.", e);
+                }
+            }
+    
+            try {
+                const stream = await navigator.mediaDevices.getUserMedia({
+                    video: true,
+                    audio: true,
+                });
+                setUserStream(stream);
+                if (type === 'audio') {
+                    stream.getVideoTracks().forEach(track => track.enabled = false);
+                }
+            } catch (err: any) {
+                console.error("Error accessing media devices.", err);
+                if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
+                    setError('Permission denied. Please allow access to your camera and microphone in your browser settings.');
+                } else if (err.name === 'NotFoundError' || err.name === 'DevicesNotFoundError') {
+                    setError('No camera and/or microphone found. Please ensure they are connected and not in use by another application.');
+                } else {
+                    setError('Could not access your camera or microphone. Please check your hardware and browser settings.');
+                }
+                return;
+            }
+        };
+        
+        setupCall();
+
+        return () => {
+             userStream?.getTracks().forEach(track => track.stop());
+             recognitionRef.current?.abort();
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [type]);
+    
+    useEffect(() => {
+        if (screenStream) {
+            const screenVideo = document.createElement('video');
+            screenVideo.srcObject = screenStream;
+            screenVideo.autoplay = true;
+            screenVideo.className = "w-full h-full object-contain relative z-10";
+            const mainEl = document.getElementById('call-main');
+            if(mainEl) mainEl.appendChild(screenVideo)
+            
+            return () => {
+                 if(mainEl && mainEl.contains(screenVideo)) {
+                    mainEl.removeChild(screenVideo);
+                }
+            }
+        }
+    }, [screenStream]);
+
+
+    const toggleMic = () => {
+        if (!userStream) return;
+        userStream.getAudioTracks().forEach(track => track.enabled = !track.enabled);
+        setIsMicMuted(prev => !prev);
+    };
+
+    const toggleCamera = () => {
+        if (!userStream) return;
+        userStream.getVideoTracks().forEach(track => track.enabled = !track.enabled);
+        setIsCameraOff(prev => !prev);
+    };
+
+    const toggleScreenShare = async () => {
+        if (screenStream) {
+            screenStream.getTracks().forEach(track => track.stop());
+            setScreenStream(null);
+        } else {
+            try {
+                const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
+                stream.getVideoTracks()[0].onended = () => setScreenStream(null);
+                setScreenStream(stream);
+            } catch (err) {
+                console.error("Error starting screen share", err);
+            }
+        }
+    };
+    
+    const handleAskVanhri = () => {
+       if (isListening || isAiThinking) return;
+       
+       if (isAiSpeaking) {
+           ttsService.cancel();
+           setIsAiSpeaking(false);
+       }
+       
+       // Lazy initialization on first click
+       if (!recognitionRef.current) {
+            const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+            if (!SpeechRecognition) {
+                setError("Speech recognition is not supported by your browser.");
+                return;
+            }
+            const recog = new SpeechRecognition();
+            recog.continuous = false;
+            recog.lang = 'en-US';
+            recog.interimResults = false;
+
+            recog.onstart = () => setIsListening(true);
+            recog.onend = () => setIsListening(false);
+            
+            recog.onerror = (event: any) => {
+                 console.error("Speech recognition error", event.error);
+                 if (event.error !== 'aborted' && event.error !== 'no-speech') {
+                     setError(`Speech recognition error: ${event.error}`);
+                 }
+                 setIsListening(false);
+            };
+
+            recog.onresult = async (event: any) => {
+                const transcript = event.results[0][0].transcript;
+                if (transcript) {
+                    ttsService.cancel();
+                    setIsAiSpeaking(false);
+                    setIsAiThinking(true);
+                    const messageId = `vanhri-${Date.now()}`;
+                    setVanhriMessage({ id: messageId, sender: 'ai', text: '' });
+                    
+                    try {
+                        const stream = generateTextStream(transcript, null, [], VANHRI_PERSONA, [], { useSearch: true });
+                        let fullText = '';
+                        for await (const chunk of stream) {
+                            if (chunk.text) {
+                                fullText += chunk.text;
+                                setVanhriMessage({ id: messageId, sender: 'ai', text: fullText });
+                            }
+                        }
+                        setIsAiSpeaking(true);
+                        ttsService.speak({
+                            text: fullText, 
+                            onEnd: () => {
+                               setIsAiSpeaking(false);
+                               setTimeout(() => setVanhriMessage(null), 3000);
+                            }
+                        });
+
+                    } catch (e) {
+                        const errorMessage = "Sorry, I encountered an error.";
+                        setVanhriMessage({ id: `vanhri-err-${Date.now()}`, sender: 'ai', text: errorMessage });
+                        ttsService.speak({ text: errorMessage, onEnd: () => setIsAiSpeaking(false) });
+                    } finally {
+                        setIsAiThinking(false);
+                    }
+                }
+            };
+            recognitionRef.current = recog;
+       }
+       
+       try {
+            recognitionRef.current.start();
+       } catch(err) {
+           console.error("Could not start speech recognition:", err);
+           setIsListening(false);
+       }
+    };
+
+    return (
+        <div className="fixed inset-0 bg-slate-900/95 z-50 flex flex-col items-center justify-center text-white font-sans">
+            <main id="call-main" className="w-full h-full flex items-center justify-center relative bg-black">
+                <div className="absolute inset-0 z-0">
+                    <NovaVisualizer isSpeaking={isAiSpeaking} isThinking={isAiThinking} />
+                </div>
+                 <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center z-20 pointer-events-none">
+                    <h3 className="text-3xl font-bold text-white" style={{textShadow: '0 0 10px rgba(0,0,0,0.7)'}}>Vanhri AI</h3>
+                    <p className="text-slate-300" style={{textShadow: '0 0 10px rgba(0,0,0,0.7)'}}>
+                        {isAiThinking ? 'Thinking...' : isAiSpeaking ? 'Speaking...' : isListening ? 'Listening...' : 'Ready'}
+                    </p>
+                </div>
+            </main>
+            
+            <UserPiP stream={userStream} isCameraOff={isCameraOff} username={username.split('@')[0]}/>
+            
+            {vanhriMessage && <VanhriResponseBubble message={vanhriMessage} onClear={() => setVanhriMessage(null)} />}
+
+            {error && <div className="absolute top-6 bg-red-900/80 border border-red-700 p-3 rounded-lg text-red-300 z-30">{error}</div>}
+            
+            <footer className="absolute bottom-0 left-0 right-0 p-4 md:p-6 flex flex-col items-center gap-4 z-20">
+                 <div className="flex items-center gap-2 bg-slate-900/80 text-green-400 text-xs font-semibold px-3 py-1.5 rounded-full border border-green-500/30 backdrop-blur-sm">
+                    <Lock className="w-3 h-3"/>
+                    End-to-End Encrypted
+                </div>
+                 <div className="flex items-center justify-center gap-3 md:gap-4 p-3 bg-slate-800/80 backdrop-blur-md rounded-full">
+                    <CallControlButton onClick={toggleMic} aria-label={isMicMuted ? "Unmute microphone" : "Mute microphone"}>
+                        {isMicMuted ? <MicOff className="w-6 h-6" /> : <Microphone className="w-6 h-6" />}
+                    </CallControlButton>
+                    <CallControlButton onClick={toggleCamera} aria-label={isCameraOff ? "Start camera" : "Stop camera"}>
+                        {isCameraOff ? <VideoOff className="w-6 h-6" /> : <VideoIcon className="w-6 h-6" />}
+                    </CallControlButton>
+                     <CallControlButton onClick={toggleScreenShare} aria-label={screenStream ? "Stop screen sharing" : "Start screen sharing"}>
+                        {screenStream ? <ScreenShareOff className="w-6 h-6" /> : <ScreenShare className="w-6 h-6" />}
+                    </CallControlButton>
+                    <div className="h-6 w-px bg-slate-600 mx-2"></div>
+                    <CallControlButton onClick={handleAskVanhri} disabled={isListening || isAiThinking} variant="primary" isPulsing={isListening || isAiThinking} aria-label="Ask Vanhri AI a question">
+                        <Microphone className="w-6 h-6"/>
+                    </CallControlButton>
+                    <div className="h-6 w-px bg-slate-600 mx-2"></div>
+                    <CallControlButton onClick={handleHangup} variant="danger" aria-label="Hang up">
+                        <Phone className="w-6 h-6 transform rotate-[135deg]" />
+                    </CallControlButton>
+                </div>
+            </footer>
+        </div>
+    );
+};
+
+export default CallUI;

vanhri-ai---the-mind-that-builds-worlds/components/ChartDisplay.tsx

@@ -0,0 +1,116 @@
+import React, { useMemo } from 'react';
+import {
+  ResponsiveContainer,
+  BarChart, Bar,
+  LineChart, Line,
+  PieChart, Pie, Cell,
+  XAxis, YAxis, CartesianGrid, Tooltip, Legend,
+} from 'recharts';
+import { ChartData } from '../types';
+
+interface ChartDisplayProps {
+  data: ChartData;
+}
+
+const ChartDisplay: React.FC<ChartDisplayProps> = ({ data }) => {
+  // Memoize the processed data to prevent re-computation on every render
+  const processedData = useMemo(() => {
+    if (!data || !data.data || !data.keys || data.type === 'pie') return [];
+    // Transform data for Bar and Line charts
+    return data.data.map(point => {
+      const newPoint: { [key: string]: string | number } = { label: point.label };
+      data.keys.forEach((key, index) => {
+        newPoint[key.name] = point.values[index];
+      });
+      return newPoint;
+    });
+  }, [data]);
+
+  const pieData = useMemo(() => {
+    if (!data || !data.data || !data.keys || data.type !== 'pie') return [];
+     // For pie charts, we use the `label` as the name and the first value as the `value`.
+    return data.data.map(point => ({
+        name: point.label,
+        value: point.values[0] || 0
+    }));
+  }, [data]);
+
+
+  if (!data) {
+    return <div className="text-center text-red-400">Error: Chart data is missing.</div>;
+  }
+
+  const renderChart = () => {
+    const tooltipStyle = { 
+        backgroundColor: '#1f2937', 
+        border: '1px solid #374151',
+        borderRadius: '0.5rem',
+    };
+    const labelStyle = { color: '#f9fafb' };
+    const legendStyle = { fontSize: "12px", color: '#9ca3af' };
+    
+    switch(data.type) {
+      case 'bar':
+        return (
+          <BarChart data={processedData} margin={{ top: 5, right: 20, left: -10, bottom: 5 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+            <XAxis dataKey="label" stroke="#9ca3af" fontSize={12} tickLine={false} axisLine={false} />
+            <YAxis stroke="#9ca3af" fontSize={12} tickLine={false} axisLine={false} />
+            <Tooltip contentStyle={tooltipStyle} labelStyle={labelStyle} cursor={{fill: 'rgba(139, 92, 246, 0.1)'}} />
+            <Legend wrapperStyle={legendStyle} />
+            {data.keys.map(key => (
+              <Bar key={key.name} dataKey={key.name} fill={key.color} radius={[4, 4, 0, 0]} />
+            ))}
+          </BarChart>
+        );
+      case 'line':
+        return (
+          <LineChart data={processedData} margin={{ top: 5, right: 20, left: -10, bottom: 5 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+            <XAxis dataKey="label" stroke="#9ca3af" fontSize={12} tickLine={false} axisLine={false} />
+            <YAxis stroke="#9ca3af" fontSize={12} tickLine={false} axisLine={false} />
+            <Tooltip contentStyle={tooltipStyle} labelStyle={labelStyle} />
+            <Legend wrapperStyle={legendStyle} />
+            {data.keys.map(key => (
+              <Line key={key.name} type="monotone" dataKey={key.name} stroke={key.color} strokeWidth={2} activeDot={{ r: 8 }} />
+            ))}
+          </LineChart>
+        );
+      case 'pie':
+        return (
+            <PieChart margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
+                <Tooltip contentStyle={tooltipStyle} />
+                <Legend wrapperStyle={legendStyle} />
+                <Pie data={pieData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={'80%'} labelLine={false} label={({ cx, cy, midAngle, innerRadius, outerRadius, percent }) => {
+                    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+                    const x = cx + radius * Math.cos(-midAngle * (Math.PI / 180));
+                    const y = cy + radius * Math.sin(-midAngle * (Math.PI / 180));
+                    return (
+                        <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central" fontSize={12}>
+                        {`${(percent * 100).toFixed(0)}%`}
+                        </text>
+                    );
+                }}>
+                    {pieData.map((entry, index) => (
+                         // Use the color from the corresponding key, or cycle through them
+                        <Cell key={`cell-${index}`} fill={data.keys[index % data.keys.length].color} />
+                    ))}
+                </Pie>
+            </PieChart>
+        );
+      default:
+        return <div className="text-center text-yellow-400">Unsupported chart type: {data.type}</div>;
+    }
+  };
+
+  return (
+    <div style={{ height: '400px', width: '100%' }} className="bg-slate-900/50 rounded-lg border border-slate-700 mt-2 p-4 flex flex-col relative">
+        <h4 className="text-md font-semibold text-fuchsia-300 mb-4 text-center absolute top-2 left-1/2 -translate-x-1/2 w-full">{data.title}</h4>
+        <ResponsiveContainer>
+            {renderChart()}
+        </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default ChartDisplay;

vanhri-ai---the-mind-that-builds-worlds/components/ChatWindow.tsx

@@ -0,0 +1,125 @@
+import React, { useRef, useEffect } from 'react';
+import { Message, ProactiveSuggestion as ProactiveSuggestionType } from '../types';
+import PromptInput from './PromptInput';
+import MessageBubble from './MessageBubble';
+import ThinkingIndicator from './ThinkingIndicator';
+import ProactiveSuggestion from './ProactiveSuggestion';
+import NovaVisualizer from './NovaVisualizer';
+import { Menu, Phone, Users } from './Icons';
+
+interface ChatWindowProps {
+  messages: Message[];
+  isLoading: boolean;
+  onSendMessage: (text: string, image: string | null) => void;
+  onToggleSidebar: () => void;
+  username: string;
+  isGuest: boolean;
+  proactiveSuggestion: ProactiveSuggestionType | null;
+  onDismissSuggestion: () => void;
+  onStartCall: (type: 'video' | 'audio') => void;
+  onHandoff: () => void;
+  onEditImage: (messageId: string, imageIndex: number | null, imageData: string) => void;
+  isAgentChatActive: boolean;
+  onEndAgentChat: () => void;
+  onOpenVisualSolver: () => void;
+  isAiSpeaking: boolean;
+  onAddSource: (name: string, content: string, mimeType: string) => void;
+}
+
+const ChatWindow: React.FC<ChatWindowProps> = ({ 
+    messages, 
+    isLoading, 
+    onSendMessage, 
+    onToggleSidebar, 
+    username, 
+    isGuest,
+    proactiveSuggestion,
+    onDismissSuggestion,
+    onStartCall,
+    onHandoff,
+    onEditImage,
+    isAgentChatActive,
+    onEndAgentChat,
+    onOpenVisualSolver,
+    isAiSpeaking,
+    onAddSource
+}) => {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(scrollToBottom, [messages, isLoading]);
+  
+  const handleSuggestionClick = (action: string) => {
+    onSendMessage(action, null);
+  };
+
+  return (
+    <div className="flex-1 flex flex-col bg-slate-900 h-full max-h-screen">
+      <header className="flex items-center gap-3 p-4 border-b border-slate-800 bg-slate-900/80 backdrop-blur-sm z-10">
+        <button 
+            onClick={onToggleSidebar} 
+            className="p-2 text-slate-400 hover:text-fuchsia-500 transition-colors rounded-full hover:bg-slate-800 md:hidden"
+            aria-label="Toggle sidebar"
+        >
+            <Menu className="w-6 h-6" />
+        </button>
+        <div className="flex-1 flex items-center gap-4">
+            <div className="w-12 h-12 flex-shrink-0 rounded-full overflow-hidden relative bg-slate-800 border border-slate-700">
+              {isAgentChatActive ? (
+                <div className="w-full h-full flex items-center justify-center bg-sky-600/20">
+                    <Users className="w-7 h-7 text-sky-400" />
+                </div>
+              ) : (
+                <NovaVisualizer 
+                    isSpeaking={isAiSpeaking} 
+                    isThinking={isLoading} 
+                />
+              )}
+            </div>
+            <div>
+                <h2 className="text-lg font-semibold text-slate-100">{isAgentChatActive ? 'Live Agent Support' : 'Vanhri AI'}</h2>
+                <p className="text-sm text-slate-400">{isAgentChatActive ? 'You are speaking with a human support agent' : `In conversation with ${isGuest ? 'Guest' : username}`}</p>
+            </div>
+        </div>
+         {isAgentChatActive && (
+            <button onClick={onEndAgentChat} className="ml-auto flex items-center gap-2 text-sm bg-red-600/20 text-red-400 hover:bg-red-600/40 hover:text-red-300 px-3 py-1.5 rounded-md transition flex-shrink-0">
+                <Phone className="w-4 h-4"/>
+                End Chat
+            </button>
+        )}
+      </header>
+
+      <div className="flex-1 overflow-y-auto p-6 space-y-6">
+        {messages.map((msg) => (
+          <MessageBubble key={msg.id} message={msg} isStreaming={isLoading && msg.id.startsWith('ai-') && msg.text.length > 0 && messages[messages.length - 1].id === msg.id} onEditImage={onEditImage} />
+        ))}
+        {isLoading && messages[messages.length - 1]?.sender !== 'ai' && <ThinkingIndicator />}
+        <div ref={messagesEndRef} />
+      </div>
+      
+      <div className="p-4 pt-2 border-t border-slate-800 bg-slate-900">
+        {proactiveSuggestion && (
+            <ProactiveSuggestion
+                suggestion={proactiveSuggestion}
+                onAccept={handleSuggestionClick}
+                onDismiss={onDismissSuggestion}
+            />
+        )}
+        <PromptInput 
+            onSendMessage={onSendMessage} 
+            disabled={isLoading}
+            onStartCall={onStartCall}
+            onHandoff={onHandoff}
+            isAgentChatActive={isAgentChatActive}
+            onOpenVisualSolver={onOpenVisualSolver}
+            onAddSource={onAddSource}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ChatWindow;

vanhri-ai---the-mind-that-builds-worlds/components/Icons.tsx

@@ -0,0 +1,260 @@
+import React from 'react';
+
+// This is a common pattern to avoid importing a whole library for a few icons.
+// In a real project, you might use a library like lucide-react.
+
+export const Icon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  />
+);
+
+export const Menu: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <Icon {...props}><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></Icon>
+);
+export const ChevronLeft: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <Icon {...props}><path d="m15 18-6-6 6-6"/></Icon>
+);
+
+
+export const Cube: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}>
+        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
+        <path d="m3.27 6.96 8.73 5.05 8.73-5.05"/>
+        <path d="M12 22.08V12"/>
+    </Icon>
+);
+
+
+export const ArrowLeft: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <Icon {...props}><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></Icon>
+);
+
+export const BrainCircuit: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <Icon {...props}>
+    <path d="M14 5a3 3 0 0 0-3-3H9a3 3 0 0 0-3 3v2.3a1 1 0 0 1-.3.7L3.9 9.8a1 1 0 0 0 0 1.4l1.8 1.8a1 1 0 0 1 .3.7V16a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3v-2.3a1 1 0 0 1 .3-.7l1.8-1.8a1 1 0 0 0 0-1.4l-1.8-1.8a1 1 0 0 1-.3-.7Z"/>
+    <path d="M9 13v2"/><path d="M15 13v2"/><path d="M12 16v-3"/><path d="M12 9V7"/><path d="M9 7h6"/>
+  </Icon>
+);
+
+export const BookOpen: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <Icon {...props}>
+    <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+    <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+  </Icon>
+);
+
+export const Code: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <Icon {...props}>
+    <polyline points="16 18 22 12 16 6" />
+    <polyline points="8 6 2 12 8 18" />
+  </Icon>
+);
+
+export const User: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <Icon {...props}>
+    <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+    <circle cx="12" cy="7" r="4" />
+  </Icon>
+);
+
+export const Bot: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <Icon {...props}>
+    <path d="M12 8V4H8" />
+    <rect width="16" height="12" x="4" y="8" rx="2" />
+    <path d="M2 14h2" />
+    <path d="M20 14h2" />
+    <path d="M15 13v2" />
+    <path d="M9 13v2" />
+  </Icon>
+);
+
+export const Send: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <Icon {...props}>
+    <path d="m22 2-7 20-4-9-9-4Z" />
+    <path d="M22 2 11 13" />
+  </Icon>
+);
+
+export const Paperclip: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <Icon {...props}>
+    <path d="m21.44 11.05-9.19 9.19a6.003 6.003 0 1 1-8.49-8.49l8.57-8.57A4.002 4.002 0 0 1 16.17 6.1l-6.88 6.88a2.001 2.001 0 1 1-2.83-2.83l8.49-8.48" />
+  </Icon>
+);
+
+export const Brain: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5V5h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-1.34a1 1 0 0 0-.96.71L13 15h-2l-.7-1.29a1 1 0 0 0-.96-.71H8a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4V4.5A2.5 2.5 0 0 1 9.5 2z"/><path d="M4 14v.92a2 2 0 0 0 1.02 1.78l.42.25a1 1 0 0 1 .56 1.55l-1.06 2.11A1 1 0 0 0 5.82 22H7a1 1 0 0 0 1-1v-2.12a1 1 0 0 1 .5-1.7l1.01-.4A1 1 0 0 1 11 17V15H8.62a1 1 0 0 1-.95-.69L7 12H4v2z"/><path d="M20 14v.92a2 2 0 0 1-1.02 1.78l-.42.25a1 1 0 0 0-.56 1.55l1.06 2.11A1 1 0 0 1 18.18 22H17a1 1 0 0 1-1-1v-2.12a1 1 0 0 0-.5-1.7l-1.01-.4A1 1 0 0 0 13 17V15h2.38a1 1 0 0 1 .95.69L17 12h3v2z"/></Icon>
+);
+export const Search: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></Icon>
+);
+export const BotMessageSquare: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}><path d="M12 6V2H8"/><path d="m8 18-4 4V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-4.3Z"/><path d="M7 12v.01"/><path d="M11 12v.01"/><path d="M15 12v.01"/></Icon>
+);
+
+export const X: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}><path d="M18 6 6 18"/><path d="m6 6 12 12"/></Icon>
+);
+
+export const Settings: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 0 2l-.15.08a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1 0-2l.15-.08a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></Icon>
+);
+
+export const Mail: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}>
+        <rect width="20" height="16" x="2" y="4" rx="2"/>
+        <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
+    </Icon>
+);
+
+export const Microphone: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}>
+        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3Z"/>
+        <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+        <line x1="12" x2="12" y1="19" y2="22"/>
+    </Icon>
+);
+export const MicOff: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}>
+        <line x1="2" x2="22" y1="2" y2="22" />
+        <path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" />
+        <path d="M5 10v2a7 7 0 0 0 12 5" />
+        <path d="M12 1a3 3 0 0 0-3 3v7.64" />
+        <path d="M9 1a3 3 0 0 0-3 3v2" />
+    </Icon>
+);
+
+
+export const Sparkles: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}>
+        <path d="m12 3-1.5 3L7 7.5l3.5 1.5L12 12l1.5-3L17 7.5l-3.5-1.5z"/>
+        <path d="M5 21 3 14l-2 2 3.5 3.5Z"/>
+        <path d="m21 5-2-2-7 7 2 2Z"/>
+    </Icon>
+);
+
+export const LogOut: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <Icon {...props}>
+    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+    <polyline points="16 17 21 12 16 7" />
+    <line x1="21" x2="9" y1="12" y2="12" />
+  </Icon>
+);
+
+export const Trash2: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}>
+        <path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/>
+    </Icon>
+);
+
+export const KeyRound: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}>
+        <path d="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z" /><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/>
+    </Icon>
+);
+
+export const ShieldCheck: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}>
+        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/>
+    </Icon>
+);
+
+export const Play: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <Icon {...props}><polygon points="5 3 19 12 5 21 5 3"/></Icon>
+);
+
+export const Volume2: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></Icon>
+);
+
+export const VolumeX: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></Icon>
+);
+
+export const Share2: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></Icon>
+);
+
+export const Edit: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></Icon>
+);
+
+export const Download: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></Icon>
+);
+
+export const Phone: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></Icon>
+);
+
+export const Video: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}><path d="M23 7l-7 5 7 5V7z"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></Icon>
+);
+export const VideoOff: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}>
+        <path d="M16 16v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2l10 10Z" />
+        <line x1="2" x2="22" y1="2" y2="22" />
+        <path d="M23 7v10" />
+        <path d="m15 5 6 4" />
+    </Icon>
+);
+
+export const Repeat: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}>
+        <path d="m17 2 4 4-4 4"/>
+        <path d="M3 11v-1a4 4 0 0 1 4-4h14"/>
+        <path d="m7 22-4-4 4-4"/>
+        <path d="M21 13v1a4 4 0 0 1-4 4H3"/>
+    </Icon>
+);
+
+export const Users: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></Icon>
+);
+
+export const Save: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></Icon>
+);
+
+export const Lock: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}>
+        <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+        <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+    </Icon>
+);
+
+export const ScreenShare: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}>
+        <path d="M13 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-3" />
+        <path d="M8 21h8" />
+        <path d="M12 17v4" />
+        <path d="m17 8 5-5" />
+        <path d="M17 3h5v5" />
+    </Icon>
+);
+
+export const ScreenShareOff: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}>
+        <path d="M13 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-3" />
+        <path d="M8 21h8" />
+        <path d="M12 17v4" />
+        <path d="M22 3l-5 5" />
+        <path d="m17 3 5 5" />
+    </Icon>
+);
+
+export const Camera: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <Icon {...props}>
+        <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/>
+        <circle cx="12" cy="13" r="3"/>
+    </Icon>
+);

vanhri-ai---the-mind-that-builds-worlds/components/ImageEditorModal.tsx

@@ -0,0 +1,101 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { X, Save } from './Icons';
+
+interface ImageEditorModalProps {
+  imageData: string;
+  onClose: () => void;
+  onSave: (newImageData: string) => void;
+}
+
+const FilterSlider: React.FC<{name: string, value: number, onChange: (name: string, value: number) => void, min?: number, max?: number, unit?: string}> = ({ name, value, onChange, min = 0, max = 200, unit = '%' }) => (
+    <div className="flex flex-col">
+        <label htmlFor={name} className="text-sm text-slate-300 mb-1 capitalize">{name} ({value}{unit})</label>
+        <input
+            id={name}
+            type="range"
+            min={min}
+            max={max}
+            value={value}
+            onChange={e => onChange(name, parseInt(e.target.value))}
+            className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-fuchsia-500"
+        />
+    </div>
+);
+
+
+const ImageEditorModal: React.FC<ImageEditorModalProps> = ({ imageData, onClose, onSave }) => {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const imageRef = useRef<HTMLImageElement | null>(null);
+    const [filters, setFilters] = useState({ brightness: 100, contrast: 100, grayscale: 0 });
+
+    const applyFilters = useCallback(() => {
+        const canvas = canvasRef.current;
+        const ctx = canvas?.getContext('2d');
+        const image = imageRef.current;
+        if (!canvas || !ctx || !image || !image.complete || image.naturalWidth === 0) return;
+        
+        canvas.width = image.naturalWidth;
+        canvas.height = image.naturalHeight;
+
+        ctx.filter = `brightness(${filters.brightness}%) contrast(${filters.contrast}%) grayscale(${filters.grayscale}%)`;
+        ctx.drawImage(image, 0, 0);
+
+    }, [filters]);
+    
+    useEffect(() => {
+        const image = new Image();
+        image.crossOrigin = 'anonymous'; // Important for canvas with data URLs
+        image.src = imageData;
+        image.onload = () => {
+            imageRef.current = image;
+            applyFilters();
+        };
+    }, [imageData, applyFilters]);
+
+    useEffect(() => {
+        applyFilters();
+    }, [filters, applyFilters]);
+
+    const handleSave = () => {
+        const canvas = canvasRef.current;
+        if (canvas) {
+            const newImageData = canvas.toDataURL('image/jpeg', 0.9);
+            onSave(newImageData);
+        }
+    };
+    
+
+    return (
+        <div className="fixed inset-0 bg-slate-900/80 backdrop-blur-md z-50 flex items-center justify-center p-4">
+            <div className="bg-slate-800 rounded-xl shadow-2xl w-full max-w-4xl max-h-full flex flex-col border border-slate-700">
+                <header className="flex items-center justify-between p-4 border-b border-slate-700 flex-shrink-0">
+                    <h2 className="text-lg font-bold text-white">Image Editor</h2>
+                    <button onClick={onClose} className="p-2 text-slate-400 hover:text-white rounded-full hover:bg-slate-700">
+                        <X className="w-6 h-6" />
+                    </button>
+                </header>
+                <main className="flex-1 flex flex-col md:flex-row gap-4 p-4 overflow-hidden">
+                    <div className="flex-1 bg-slate-900/50 rounded-lg flex items-center justify-center overflow-auto min-h-0">
+                         <canvas ref={canvasRef} className="max-w-full max-h-full object-contain"></canvas>
+                    </div>
+                    <aside className="w-full md:w-64 flex-shrink-0 space-y-6 bg-slate-800/50 p-4 rounded-lg">
+                       <h3 className="text-md font-semibold text-fuchsia-400">Filters</h3>
+                       <FilterSlider name="brightness" value={filters.brightness} onChange={(name, value) => setFilters(f => ({...f, [name]: value}))} />
+                       <FilterSlider name="contrast" value={filters.contrast} onChange={(name, value) => setFilters(f => ({...f, [name]: value}))} />
+                       <FilterSlider name="grayscale" max={100} value={filters.grayscale} onChange={(name, value) => setFilters(f => ({...f, [name]: value}))} />
+                        <button onClick={() => setFilters({ brightness: 100, contrast: 100, grayscale: 0 })} className="w-full text-sm text-center py-2 bg-slate-700 hover:bg-slate-600 rounded-lg">Reset Filters</button>
+                    </aside>
+                </main>
+                 <footer className="flex items-center justify-end gap-4 p-4 border-t border-slate-700 flex-shrink-0">
+                    <button onClick={onClose} className="text-slate-300 hover:text-white px-4 py-2 rounded-lg">Cancel</button>
+                    <button onClick={handleSave} className="bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-bold px-4 py-2 rounded-lg flex items-center gap-2">
+                        <Save className="w-5 h-5"/>
+                        Save Changes
+                    </button>
+                </footer>
+            </div>
+        </div>
+    );
+};
+
+export default ImageEditorModal;

vanhri-ai---the-mind-that-builds-worlds/components/Interactive3DModel.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useRef, useState } from 'react';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { Cube, X } from './Icons';
+
+interface Interactive3DModelProps {
+  code: string;
+}
+
+const Interactive3DModel: React.FC<Interactive3DModelProps> = ({ code }) => {
+  const mountRef = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const mountNode = mountRef.current;
+    if (!mountNode) return;
+    
+    // Clear previous canvas if any
+    mountNode.innerHTML = '';
+    setError(null);
+
+    // --- Scene setup ---
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x1e293b); // slate-800
+    
+    const camera = new THREE.PerspectiveCamera(75, mountNode.clientWidth / mountNode.clientHeight, 0.1, 1000);
+    camera.position.z = 5;
+
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(mountNode.clientWidth, mountNode.clientHeight);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    mountNode.appendChild(renderer.domElement);
+
+    // --- Controls ---
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.minDistance = 1;
+    controls.maxDistance = 100;
+
+    // --- Lighting ---
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
+    scene.add(ambientLight);
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+    directionalLight.position.set(5, 10, 7.5);
+    scene.add(directionalLight);
+
+    // --- Execute AI-generated code ---
+    try {
+        if (!code) throw new Error("No code provided to generate the 3D model.");
+        const sceneSetupFunction = new Function('THREE', 'scene', code);
+        sceneSetupFunction(THREE, scene);
+    } catch (e: any) {
+        console.error("Error executing generated 3D code:", e);
+        setError(`Failed to build 3D model. Error: ${e.message}`);
+    }
+
+
+    // --- Animation loop ---
+    let animationFrameId: number;
+    const animate = () => {
+      animationFrameId = requestAnimationFrame(animate);
+      controls.update();
+      renderer.render(scene, camera);
+    };
+    animate();
+
+    // --- Responsive canvas ---
+    const handleResize = () => {
+        if (mountNode) {
+            camera.aspect = mountNode.clientWidth / mountNode.clientHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(mountNode.clientWidth, mountNode.clientHeight);
+        }
+    };
+    window.addEventListener('resize', handleResize);
+
+
+    // --- Cleanup ---
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      cancelAnimationFrame(animationFrameId);
+      if(mountNode) mountNode.innerHTML = '';
+      // Dispose of Three.js objects to free up memory
+      scene.traverse(object => {
+          if (object instanceof THREE.Mesh) {
+              if (object.geometry) object.geometry.dispose();
+              if (object.material) {
+                  if (Array.isArray(object.material)) {
+                      object.material.forEach(material => material.dispose());
+                  } else {
+                      object.material.dispose();
+                  }
+              }
+          }
+      });
+      renderer.dispose();
+    };
+  }, [code]);
+
+  return (
+    <div className="w-full aspect-video bg-slate-800 rounded-lg border border-slate-700 mt-2 relative overflow-hidden">
+        <div ref={mountRef} className="w-full h-full" />
+        <div className="absolute top-2 left-2 flex items-center gap-2 bg-slate-900/50 text-fuchsia-300 text-xs font-semibold px-2 py-1 rounded-full border border-fuchsia-500/30 backdrop-blur-sm">
+            <Cube className="w-3 h-3"/>
+            Interactive 3D Model
+        </div>
+        {error && (
+             <div className="absolute inset-0 bg-red-900/80 backdrop-blur-sm flex flex-col items-center justify-center p-4 text-center">
+                <X className="w-8 h-8 text-red-300 mb-2"/>
+                <h3 className="font-bold text-red-200">Could Not Render 3D Model</h3>
+                <p className="text-xs text-red-300 mt-1">{error}</p>
+             </div>
+        )}
+    </div>
+  );
+};
+
+export default Interactive3DModel;

vanhri-ai---the-mind-that-builds-worlds/components/Login.tsx

@@ -0,0 +1,92 @@
+
+import React, { useState } from 'react';
+import { Bot, KeyRound, ArrowLeft } from './Icons';
+import { authService } from '../services/authService';
+
+interface LoginProps {
+  onLoginSuccess: (user: {id: string, email: string}) => void;
+  onNavigateToSignUp: () => void;
+  onNavigateBack: () => void;
+}
+
+const Login: React.FC<LoginProps> = ({ onLoginSuccess, onNavigateToSignUp, onNavigateBack }) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email.trim() || !password.trim()) {
+        setError("Email and password cannot be empty.");
+        return;
+    }
+    setError('');
+    setIsLoading(true);
+
+    const result = await authService.login(email, password);
+    if (result.success && result.user) {
+        onLoginSuccess(result.user);
+    } else {
+        setError(result.message);
+    }
+    setIsLoading(false);
+  };
+
+  return (
+    <div className="w-full h-screen flex items-center justify-center bg-slate-900 p-4 relative">
+        <button onClick={onNavigateBack} className="absolute top-6 left-6 flex items-center gap-2 text-slate-400 hover:text-white transition-colors">
+            <ArrowLeft className="w-5 h-5" />
+            Back
+        </button>
+      <div className="w-full max-w-sm text-center">
+        <div className="inline-block p-4 bg-fuchsia-600/20 rounded-full mb-6 border border-fuchsia-500/30">
+            <Bot className="w-16 h-16 text-fuchsia-400" />
+        </div>
+        <h1 className="text-4xl font-bold text-white">Unlock Session</h1>
+        <p className="text-slate-400 mt-2 mb-8">Log in to your Vanhri AI account</p>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="Enter your email"
+            className="w-full p-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:ring-2 focus:ring-fuchsia-500 focus:border-fuchsia-500 outline-none transition"
+            required
+            autoComplete="email"
+          />
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Enter your password"
+            className="w-full p-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:ring-2 focus:ring-fuchsia-500 focus:border-fuchsia-500 outline-none transition"
+            required
+            autoComplete="current-password"
+          />
+          
+          {error && <p className="text-red-400 text-sm">{error}</p>}
+          
+          <button
+            type="submit"
+            disabled={isLoading || !email.trim() || !password.trim()}
+            className="w-full bg-fuchsia-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-fuchsia-700 disabled:bg-slate-700 disabled:cursor-not-allowed flex items-center justify-center gap-2 transition-all duration-300"
+          >
+            <KeyRound className="w-5 h-5" />
+            {isLoading ? 'Authenticating...' : 'Unlock Session'}
+          </button>
+        </form>
+         <p className="text-sm text-slate-500 text-center mt-6">
+            Don't have an account?{' '}
+            <button onClick={onNavigateToSignUp} className="font-semibold text-fuchsia-400 hover:underline">
+                Sign up
+            </button>
+         </p>
+         <p className="text-xs text-slate-600 text-center mt-4">Your conversations will be end-to-end encrypted and saved in this browser.</p>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

vanhri-ai---the-mind-that-builds-worlds/components/MessageBubble.tsx

@@ -0,0 +1,220 @@
+import React, { useState } from 'react';
+import { Message } from '../types';
+import { User, Bot, KeyRound, Search, Volume2, VolumeX, Edit, Download, Users as AgentIcon } from './Icons';
+import { ttsService } from '../services/ttsService';
+import MindMapDisplay from './MindMapDisplay';
+import Interactive3DModel from './Interactive3DModel';
+import ChartDisplay from './ChartDisplay';
+
+// A more robust markdown-to-HTML converter that handles text, code blocks, bold, and links.
+const SimpleMarkdown: React.FC<{ text: string }> = ({ text }) => {
+  if (typeof text !== 'string' || !text) {
+    return null;
+  }
+
+  const elements: React.ReactNode[] = [];
+  let lastIndex = 0;
+  // Regex to find all markdown parts: ```...```, **...**, and links
+  const regex = /(```[\s\S]*?```)|(\*\*[^\*]+\*\*)|(https?:\/\/[^\s]+)/g;
+  let match;
+
+  while ((match = regex.exec(text)) !== null) {
+    // Push the text before the match
+    if (match.index > lastIndex) {
+      elements.push(<span key={`text-${lastIndex}`}>{text.substring(lastIndex, match.index)}</span>);
+    }
+
+    const [fullMatch, codeBlock, boldText, link] = match;
+
+    if (codeBlock) {
+      const code = codeBlock.replace(/```(\w*\n)?/g, '').replace(/```$/, '');
+      elements.push(
+        <pre key={`code-${match.index}`} className="bg-slate-900 text-white rounded-md p-4 my-2 text-sm overflow-x-auto font-mono">
+          <code>{code}</code>
+        </pre>
+      );
+    } else if (boldText) {
+      elements.push(<strong key={`bold-${match.index}`}>{boldText.substring(2, boldText.length - 2)}</strong>);
+    } else if (link) {
+      elements.push(<a href={link} key={`link-${match.index}`} target="_blank" rel="noopener noreferrer" className="text-fuchsia-400 hover:underline">{link}</a>);
+    }
+    
+    lastIndex = regex.lastIndex;
+  }
+
+  // Push the remaining text after the last match
+  if (lastIndex < text.length) {
+    elements.push(<span key={`text-${lastIndex}`}>{text.substring(lastIndex)}</span>);
+  }
+
+  return <>{elements}</>;
+};
+
+
+interface ImageControlsProps {
+    onEdit: () => void;
+    onDownload: () => void;
+}
+
+const ImageControls: React.FC<ImageControlsProps> = ({ onEdit, onDownload }) => (
+    <div className="absolute top-2 right-2 z-10 flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-slate-900/50 backdrop-blur-sm p-1.5 rounded-full">
+        <button onClick={onEdit} className="p-1.5 text-slate-200 hover:text-white bg-slate-700/50 hover:bg-slate-700 rounded-full" aria-label="Edit image">
+            <Edit className="w-4 h-4" />
+        </button>
+        <button onClick={onDownload} className="p-1.5 text-slate-200 hover:text-white bg-slate-700/50 hover:bg-slate-700 rounded-full" aria-label="Download image">
+            <Download className="w-4 h-4" />
+        </button>
+    </div>
+);
+
+
+interface MessageBubbleProps {
+  message: Message;
+  isStreaming?: boolean;
+  onEditImage: (messageId: string, imageIndex: number | null, imageData: string) => void;
+}
+
+const MessageBubble: React.FC<MessageBubbleProps> = ({ message, isStreaming = false, onEditImage }) => {
+  const isUser = message.sender === 'user';
+  const [isSpeaking, setIsSpeaking] = useState(false);
+
+  const handleAudioToggle = () => {
+    if (isSpeaking) {
+      ttsService.cancel();
+      setIsSpeaking(false);
+    } else {
+      setIsSpeaking(true);
+      ttsService.speak({
+        text: message.text, 
+        onEnd: () => setIsSpeaking(false)
+      });
+    }
+  };
+  
+  const handleDownload = (imageData: string, index: number) => {
+    const link = document.createElement('a');
+    link.href = imageData;
+    link.download = `vanhri-image-${message.id}-${index}.jpeg`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const Icon = message.isAgent ? AgentIcon : Bot;
+  const bgColor = message.isAgent ? 'bg-sky-600' : 'bg-fuchsia-600';
+
+  return (
+    <div className={`flex items-start gap-4 ${isUser ? 'justify-end' : 'justify-start'}`}>
+      {!isUser && (
+        <div className={`w-8 h-8 flex-shrink-0 ${bgColor} text-white flex items-center justify-center rounded-full mt-1`}>
+          <Icon className="w-5 h-5" />
+        </div>
+      )}
+      <div
+        className={`max-w-3xl w-full rounded-2xl px-5 py-3 shadow-md ${
+          isUser
+            ? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white rounded-br-none'
+            : 'bg-slate-800 text-slate-200 rounded-bl-none'
+        }`}
+      >
+        {message.image && (
+          <div className="relative group mt-2">
+            <img src={message.image} alt="User upload" className="rounded-lg mb-2 max-h-72 w-auto" />
+            <ImageControls onEdit={() => onEditImage(message.id, null, message.image!)} onDownload={() => handleDownload(message.image!, 0)} />
+          </div>
+        )}
+        
+        {message.text && (
+          <div className="flex items-start gap-2">
+            <div className="text-base leading-relaxed whitespace-pre-wrap font-sans flex-1">
+                <SimpleMarkdown text={message.text} />
+                {isStreaming && <span className="inline-block w-2 h-5 bg-fuchsia-400 ml-1 blinking-cursor"></span>}
+            </div>
+            {!isUser && !isStreaming && ttsService.isSupported && (
+              <button 
+                onClick={handleAudioToggle} 
+                className="p-2 text-slate-400 hover:text-fuchsia-400 rounded-full hover:bg-slate-700 transition-colors"
+                aria-label={isSpeaking ? "Stop audio" : "Play audio"}
+              >
+                {isSpeaking ? <VolumeX className="w-5 h-5" /> : <Volume2 className="w-5 h-5" />}
+              </button>
+            )}
+          </div>
+        )}
+
+        {message.chartData && (
+          <div className="mt-2">
+            <ChartDisplay data={message.chartData} />
+          </div>
+        )}
+
+        {message.mindMap && (
+          <div className="mt-2">
+            <MindMapDisplay data={message.mindMap} />
+          </div>
+        )}
+
+        {message.generatedImages && (
+            <div className="grid grid-cols-2 gap-2 mt-2">
+                {message.generatedImages.map((imgData, index) => (
+                    <div key={index} className="relative group">
+                        <img src={`data:image/jpeg;base64,${imgData}`} alt={`Generated image ${index + 1}`} className="rounded-lg w-full h-auto" />
+                        <ImageControls onEdit={() => onEditImage(message.id, index, `data:image/jpeg;base64,${imgData}`)} onDownload={() => handleDownload(`data:image/jpeg;base64,${imgData}`, index)} />
+                    </div>
+                ))}
+            </div>
+        )}
+
+        {message.generated3DCode && (
+          <div className="mt-2">
+            <Interactive3DModel code={message.generated3DCode} />
+          </div>
+        )}
+
+        {message.memory && (
+          <div className="mt-4 pt-3 border-t border-slate-700">
+             <h4 className="text-sm font-semibold text-slate-400 mb-2 flex items-center gap-2">
+              <KeyRound className="w-4 h-4 text-fuchsia-500" />
+              Vanhri AI has formed a new memory
+            </h4>
+            <div className="bg-slate-900/70 p-3 rounded-lg">
+                <p className="font-bold text-fuchsia-400">{message.memory.title}</p>
+                <p className="text-sm text-slate-300 mt-1 italic">"{message.memory.summary}"</p>
+            </div>
+          </div>
+        )}
+
+        {message.groundingCitations && message.groundingCitations.length > 0 && (
+          <div className="mt-4 pt-3 border-t border-slate-700">
+            <h4 className="text-sm font-semibold text-slate-400 mb-2 flex items-center gap-2">
+              <Search className="w-4 h-4 text-fuchsia-500" />
+              Sources
+            </h4>
+            <div className="flex flex-wrap gap-2">
+              {message.groundingCitations.map((citation) => (
+                <a
+                  key={citation.uri}
+                  href={citation.uri}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="bg-slate-900/70 hover:bg-slate-900 text-xs text-slate-300 hover:text-fuchsia-400 px-2.5 py-1 rounded-full transition-colors truncate"
+                  title={citation.title}
+                >
+                  {citation.title || new URL(citation.uri).hostname}
+                </a>
+              ))}
+            </div>
+          </div>
+        )}
+
+      </div>
+       {isUser && (
+        <div className="w-8 h-8 flex-shrink-0 bg-slate-700 text-slate-300 flex items-center justify-center rounded-full mt-1">
+          <User className="w-5 h-5" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MessageBubble;

vanhri-ai---the-mind-that-builds-worlds/components/MindMapDisplay.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import ReactFlow, { MiniMap, Controls, Background, BackgroundVariant, Panel } from 'reactflow';
+import { MindMapData } from '../types';
+import { Share2 } from './Icons';
+
+interface MindMapDisplayProps {
+  data: MindMapData;
+}
+
+const MindMapDisplay: React.FC<MindMapDisplayProps> = ({ data }) => {
+  return (
+    <div style={{ height: '500px', width: '100%' }} className="bg-slate-900/50 rounded-lg border border-slate-700 mt-2 relative">
+      <ReactFlow
+        nodes={data.nodes}
+        edges={data.edges}
+        fitView
+        proOptions={{ hideAttribution: true }}
+        nodesDraggable={true}
+        nodesConnectable={false}
+      >
+         <Panel position="top-left" className="p-2 bg-slate-800/50 border border-slate-700 rounded-lg text-fuchsia-300 flex items-center gap-2 text-sm font-semibold">
+            <Share2 className="w-4 h-4" />
+            Interactive Mind Map
+        </Panel>
+        <MiniMap nodeStrokeWidth={3} zoomable pannable 
+            nodeColor={(node) => {
+                switch (node.type) {
+                    case 'input': return '#a21caf';
+                    default: return '#581c87';
+                }
+            }}
+        />
+        <Controls />
+        <Background color="#475569" variant={BackgroundVariant.Dots} gap={16} size={1} />
+      </ReactFlow>
+    </div>
+  );
+};
+
+export default MindMapDisplay;

vanhri-ai---the-mind-that-builds-worlds/components/NovaVisualizer.tsx

@@ -0,0 +1,245 @@
+import React, { useRef, useEffect, useMemo } from 'react';
+import * as THREE from 'three';
+
+interface NovaVisualizerProps {
+  isSpeaking: boolean;
+  isThinking: boolean;
+}
+
+const vertexShader = `
+  uniform float u_time;
+  uniform float u_intensity;
+  varying vec3 v_normal;
+  varying vec3 v_position;
+  
+  // Simplex noise function
+  vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+  vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+  vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
+  vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+  float snoise(vec3 v) {
+    const vec2 C = vec2(1.0/6.0, 1.0/3.0);
+    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
+    vec3 i  = floor(v + dot(v, C.yyy));
+    vec3 x0 = v - i + dot(i, C.xxx);
+    vec3 g = step(x0.yzx, x0.xyz);
+    vec3 l = 1.0 - g;
+    vec3 i1 = min(g.xyz, l.zxy);
+    vec3 i2 = max(g.xyz, l.zxy);
+    vec3 x1 = x0 - i1 + C.xxx;
+    vec3 x2 = x0 - i2 + C.yyy;
+    vec3 x3 = x0 - D.yyy;
+    i = mod289(i);
+    vec4 p = permute(permute(permute(
+             i.z + vec4(0.0, i1.z, i2.z, 1.0))
+           + i.y + vec4(0.0, i1.y, i2.y, 1.0))
+           + i.x + vec4(0.0, i1.x, i2.x, 1.0));
+    float n_ = 0.142857142857;
+    vec3 ns = n_ * D.wyz - D.xzx;
+    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+    vec4 x_ = floor(j * ns.z);
+    vec4 y_ = floor(j - 7.0 * x_);
+    vec4 x = x_ * ns.x + ns.yyyy;
+    vec4 y = y_ * ns.x + ns.yyyy;
+    vec4 h = 1.0 - abs(x) - abs(y);
+    vec4 b0 = vec4(x.xy, y.xy);
+    vec4 b1 = vec4(x.zw, y.zw);
+    vec4 s0 = floor(b0)*2.0 + 1.0;
+    vec4 s1 = floor(b1)*2.0 + 1.0;
+    vec4 sh = -step(h, vec4(0.0));
+    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;
+    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;
+    vec3 p0 = vec3(a0.xy,h.x);
+    vec3 p1 = vec3(a0.zw,h.y);
+    vec3 p2 = vec3(a1.xy,h.z);
+    vec3 p3 = vec3(a1.zw,h.w);
+    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));
+    p0 *= norm.x;
+    p1 *= norm.y;
+    p2 *= norm.z;
+    p3 *= norm.w;
+    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+    m = m * m;
+    return 42.0 * dot(m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));
+  }
+
+  void main() {
+    v_normal = normal;
+    v_position = position;
+
+    float noise = snoise(position * 2.0 + u_time * 0.2);
+    vec3 displacedPosition = position + normal * noise * u_intensity * 0.3;
+
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(displacedPosition, 1.0);
+  }
+`;
+
+const fragmentShader = `
+  uniform float u_time;
+  uniform float u_intensity;
+  varying vec3 v_normal;
+  varying vec3 v_position;
+
+  // Simplex noise function (same as vertex shader)
+  vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+  vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+  vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
+  vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+  float snoise(vec3 v) {
+    const vec2 C = vec2(1.0/6.0, 1.0/3.0);
+    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
+    vec3 i  = floor(v + dot(v, C.yyy));
+    vec3 x0 = v - i + dot(i, C.xxx);
+    vec3 g = step(x0.yzx, x0.xyz);
+    vec3 l = 1.0 - g;
+    vec3 i1 = min(g.xyz, l.zxy);
+    vec3 i2 = max(g.xyz, l.zxy);
+    vec3 x1 = x0 - i1 + C.xxx;
+    vec3 x2 = x0 - i2 + C.yyy;
+    vec3 x3 = x0 - D.yyy;
+    i = mod289(i);
+    vec4 p = permute(permute(permute(
+             i.z + vec4(0.0, i1.z, i2.z, 1.0))
+           + i.y + vec4(0.0, i1.y, i2.y, 1.0))
+           + i.x + vec4(0.0, i1.x, i2.x, 1.0));
+    float n_ = 0.142857142857;
+    vec3 ns = n_ * D.wyz - D.xzx;
+    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+    vec4 x_ = floor(j * ns.z);
+    vec4 y_ = floor(j - 7.0 * x_);
+    vec4 x = x_ * ns.x + ns.yyyy;
+    vec4 y = y_ * ns.x + ns.yyyy;
+    vec4 h = 1.0 - abs(x) - abs(y);
+    vec4 b0 = vec4(x.xy, y.xy);
+    vec4 b1 = vec4(x.zw, y.zw);
+    vec4 s0 = floor(b0)*2.0 + 1.0;
+    vec4 s1 = floor(b1)*2.0 + 1.0;
+    vec4 sh = -step(h, vec4(0.0));
+    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;
+    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;
+    vec3 p0 = vec3(a0.xy,h.x);
+    vec3 p1 = vec3(a0.zw,h.y);
+    vec3 p2 = vec3(a1.xy,h.z);
+    vec3 p3 = vec3(a1.zw,h.w);
+    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));
+    p0 *= norm.x;
+    p1 *= norm.y;
+    p2 *= norm.z;
+    p3 *= norm.w;
+    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+    m = m * m;
+    return 42.0 * dot(m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));
+  }
+
+  void main() {
+    float noise = snoise(v_position * 5.0 + u_time * 0.5);
+    vec3 color1 = vec3(0.63, 0.07, 0.93); // Fuchsia
+    vec3 color2 = vec3(0.36, 0.54, 0.98); // Blueish
+    vec3 finalColor = mix(color1, color2, v_position.y);
+    
+    float rim = 1.0 - dot(normalize(v_normal), vec3(0.0, 0.0, 1.0));
+    rim = smoothstep(0.6, 1.0, rim);
+    
+    gl_FragColor = vec4(finalColor * (0.5 + noise * 0.5) + vec3(rim) * u_intensity, 1.0);
+  }
+`;
+
+const NovaVisualizer: React.FC<NovaVisualizerProps> = ({ isSpeaking, isThinking }) => {
+  const mountRef = useRef<HTMLDivElement>(null);
+  const rendererRef = useRef<THREE.WebGLRenderer | null>(null);
+  const cameraRef = useRef<THREE.PerspectiveCamera | null>(null);
+  const animationFrameIdRef = useRef<number | null>(null);
+
+  const uniforms = useMemo(() => ({
+    u_time: { value: 0.0 },
+    u_intensity: { value: 0.0 },
+  }), []);
+
+  // Use refs to pass isSpeaking and isThinking to the animation loop without re-triggering the effect
+  const speakingRef = useRef(isSpeaking);
+  const thinkingRef = useRef(isThinking);
+  useEffect(() => {
+    speakingRef.current = isSpeaking;
+  }, [isSpeaking]);
+  useEffect(() => {
+    thinkingRef.current = isThinking;
+  }, [isThinking]);
+
+
+  useEffect(() => {
+    const mountNode = mountRef.current;
+    if (!mountNode) return;
+
+    // --- Scene setup ---
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(75, mountNode.clientWidth / mountNode.clientHeight, 0.1, 1000);
+    camera.position.z = 2;
+    cameraRef.current = camera;
+
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(mountNode.clientWidth, mountNode.clientHeight);
+    mountNode.appendChild(renderer.domElement);
+    rendererRef.current = renderer;
+    
+    const geometry = new THREE.IcosahedronGeometry(1, 64);
+    const material = new THREE.ShaderMaterial({
+      vertexShader,
+      fragmentShader,
+      uniforms,
+    });
+    const mesh = new THREE.Mesh(geometry, material);
+    scene.add(mesh);
+
+    const clock = new THREE.Clock();
+    
+    const animate = () => {
+      animationFrameIdRef.current = requestAnimationFrame(animate);
+
+      uniforms.u_time.value = clock.getElapsedTime();
+      
+      let targetIntensity = 0.2;
+      if (thinkingRef.current) targetIntensity = 0.4;
+      if (speakingRef.current) targetIntensity = 0.8;
+      
+      uniforms.u_intensity.value += (targetIntensity - uniforms.u_intensity.value) * 0.1;
+      
+      mesh.rotation.y += 0.001;
+
+      renderer.render(scene, camera);
+    };
+
+    animate();
+    
+    const handleResize = () => {
+        if (mountNode && rendererRef.current && cameraRef.current) {
+            cameraRef.current.aspect = mountNode.clientWidth / mountNode.clientHeight;
+            cameraRef.current.updateProjectionMatrix();
+            rendererRef.current.setSize(mountNode.clientWidth, mountNode.clientHeight);
+        }
+    };
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      if (animationFrameIdRef.current) {
+        cancelAnimationFrame(animationFrameIdRef.current);
+      }
+      // Safely access properties and remove child
+      if (mountNode && rendererRef.current?.domElement) {
+        if(mountNode.contains(rendererRef.current.domElement)) {
+          mountNode.removeChild(rendererRef.current.domElement);
+        }
+      }
+      geometry.dispose();
+      material.dispose();
+      renderer.dispose();
+    };
+  // We only want this effect to run once on mount. `uniforms` is stable.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uniforms]);
+
+  return <div ref={mountRef} className="w-full h-full" />;
+};
+
+export default NovaVisualizer;

vanhri-ai---the-mind-that-builds-worlds/components/ProactiveSuggestion.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Sparkles, X } from './Icons';
+import { ProactiveSuggestion as ProactiveSuggestionType } from '../types';
+
+interface ProactiveSuggestionProps {
+  suggestion: ProactiveSuggestionType;
+  onAccept: (action: string) => void;
+  onDismiss: () => void;
+}
+
+const ProactiveSuggestion: React.FC<ProactiveSuggestionProps> = ({ suggestion, onAccept, onDismiss }) => {
+  return (
+    <div className="bg-slate-800/70 border border-fuchsia-500/30 rounded-lg p-3 mb-3 flex items-center gap-4 animate-fade-in-up">
+      <Sparkles className="w-6 h-6 text-fuchsia-400 flex-shrink-0" />
+      <div className="flex-1">
+        <p className="text-sm text-slate-200">{suggestion.text}</p>
+      </div>
+      <button 
+        onClick={() => onAccept(suggestion.action)}
+        className="text-sm font-semibold bg-fuchsia-600 text-white px-3 py-1.5 rounded-md hover:bg-fuchsia-700 transition-colors"
+      >
+        {suggestion.actionText}
+      </button>
+      <button 
+        onClick={onDismiss}
+        className="p-1.5 text-slate-500 hover:text-white rounded-full hover:bg-slate-700 transition-colors"
+        aria-label="Dismiss suggestion"
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </div>
+  );
+};
+
+export default ProactiveSuggestion;

vanhri-ai---the-mind-that-builds-worlds/components/PromptInput.tsx

@@ -0,0 +1,259 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Paperclip, Send, X, Microphone, Phone, Video, Users, Camera, BookOpen } from './Icons';
+
+interface PromptInputProps {
+  onSendMessage: (text: string, image: string | null) => void;
+  disabled: boolean;
+  onStartCall: (type: 'video' | 'audio') => void;
+  onHandoff: () => void;
+  isAgentChatActive: boolean;
+  onOpenVisualSolver: () => void;
+  onAddSource: (name: string, content: string, mimeType: string) => void;
+}
+
+const PromptInput: React.FC<PromptInputProps> = ({ onSendMessage, disabled, onStartCall, onHandoff, isAgentChatActive, onOpenVisualSolver, onAddSource }) => {
+  const [text, setText] = useState('');
+  const [image, setImage] = useState<string | null>(null);
+  const [imageName, setImageName] = useState<string>('');
+  const [isListening, setIsListening] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const docInputRef = useRef<HTMLInputElement>(null);
+  const recognitionRef = useRef<any>(null); // Use `any` for cross-browser compatibility
+  const placeholder = isListening ? "Listening..." : "Ask anything or describe an image to create...";
+
+
+  const handleSend = () => {
+    if (disabled || (!text.trim() && !image)) return;
+    onSendMessage(text, image ? image.split(',')[1] : null);
+    setText('');
+    setImage(null);
+    setImageName('');
+    if(fileInputRef.current) {
+        fileInputRef.current.value = "";
+    }
+  };
+
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImage(reader.result as string);
+        setImageName(file.name);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+  
+  const handleDocChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      if (file.size > 10 * 1024 * 1024) { // 10MB limit
+          alert("File is too large. Please upload files smaller than 10MB.");
+          return;
+      }
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        const content = event.target?.result as string;
+        const mimeType = file.type || 'application/octet-stream';
+        onAddSource(file.name, content, mimeType);
+      };
+      reader.onerror = () => {
+        alert("Failed to read the file.");
+      }
+      reader.readAsDataURL(file);
+    }
+    // Clear the input so the same file can be selected again
+    if (e.target) e.target.value = "";
+  };
+
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleMicClick = async () => {
+    // Lazily check for the API on click to prevent startup crashes
+    const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+    if (!SpeechRecognition) {
+        alert("Speech recognition is not supported by your browser.");
+        return;
+    }
+
+    if (isListening) {
+        recognitionRef.current?.stop();
+        return;
+    }
+
+    // Lazy initialization on first click
+    if (!recognitionRef.current) {
+        const recognition = new SpeechRecognition();
+        recognition.continuous = false;
+        recognition.lang = 'en-US';
+        recognition.interimResults = false;
+        recognition.maxAlternatives = 1;
+
+        recognition.onstart = () => setIsListening(true);
+        recognition.onend = () => setIsListening(false);
+
+        recognition.onresult = (event: any) => {
+            const transcript = event.results[event.results.length - 1][0].transcript;
+            setText(prev => prev ? `${prev.trim()} ${transcript}` : transcript);
+        };
+
+        recognition.onerror = (event: any) => {
+            console.error("Speech recognition error", event.error);
+            if (event.error === 'not-allowed') {
+                alert("Microphone access was denied. Please allow microphone access in your browser settings to use speech-to-text.");
+            } else if (event.error === 'audio-capture') {
+                alert("No microphone found or there was a hardware error. Please check your microphone.");
+            } else if (event.error !== 'aborted' && event.error !== 'no-speech') {
+                alert(`An error occurred during speech recognition: ${event.error}`);
+            }
+            setIsListening(false); // Ensure listening state is reset
+        };
+        
+        recognitionRef.current = recognition;
+    }
+
+    // Check permission status before attempting to start
+    if (navigator.permissions) {
+        try {
+            const micPerm = await navigator.permissions.query({ name: 'microphone' as PermissionName });
+            if (micPerm.state === 'denied') {
+                alert("Microphone access is blocked. Please go to your browser settings to allow it.");
+                return;
+            }
+        } catch (e) {
+            console.warn("Permissions API not supported or failed, proceeding directly.", e);
+        }
+    }
+
+    try {
+        recognitionRef.current.start();
+    } catch (err) {
+        console.error("Could not start speech recognition:", err);
+        setIsListening(false);
+    }
+  };
+
+  // Effect to clean up recognition on component unmount
+  useEffect(() => {
+    return () => {
+        recognitionRef.current?.abort();
+    };
+  }, []);
+
+  return (
+    <div className="bg-slate-800 border border-slate-700 rounded-xl p-2 flex flex-col">
+       {image && (
+        <div className="flex items-center gap-2 bg-fuchsia-900/50 text-fuchsia-200 text-sm p-2 rounded-md mb-2">
+            <Paperclip className="w-4 h-4" />
+            <span>{imageName}</span>
+            <button onClick={() => {setImage(null); setImageName('')}} className="ml-auto text-fuchsia-300 hover:text-fuchsia-100">
+                <X className="w-4 h-4" />
+            </button>
+        </div>
+      )}
+      <div className="flex items-end gap-2">
+        <textarea
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          className="flex-1 bg-transparent focus:outline-none resize-none p-2 placeholder-slate-400 text-slate-100"
+          rows={1}
+          disabled={disabled}
+        />
+        <button
+          onClick={handleMicClick}
+          disabled={disabled}
+          className={`p-2 rounded-full transition-colors hover:bg-slate-700 disabled:opacity-50 disabled:hover:bg-transparent disabled:text-slate-600 ${
+            isListening ? 'text-red-500 animate-pulse' : 'text-slate-400 hover:text-fuchsia-500'
+          }`}
+          aria-label="Use microphone"
+        >
+          <Microphone className="w-5 h-5" />
+        </button>
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          disabled={disabled}
+          className="p-2 text-slate-400 hover:text-fuchsia-500 transition-colors rounded-full hover:bg-slate-700 disabled:opacity-50 disabled:hover:bg-transparent disabled:text-slate-600"
+          aria-label="Attach image"
+        >
+          <Paperclip className="w-5 h-5" />
+        </button>
+        <button
+          onClick={() => docInputRef.current?.click()}
+          disabled={disabled}
+          className="p-2 text-slate-400 hover:text-fuchsia-500 transition-colors rounded-full hover:bg-slate-700 disabled:opacity-50 disabled:hover:bg-transparent disabled:text-slate-600"
+          aria-label="Add a document to notebook"
+        >
+          <BookOpen className="w-5 h-5" />
+        </button>
+         <button
+          onClick={onOpenVisualSolver}
+          disabled={disabled}
+          className="p-2 text-slate-400 hover:text-fuchsia-500 transition-colors rounded-full hover:bg-slate-700 disabled:opacity-50 disabled:hover:bg-transparent disabled:text-slate-600"
+          aria-label="Open visual solver"
+        >
+          <Camera className="w-5 h-5" />
+        </button>
+        
+        <div className="h-6 w-px bg-slate-700 mx-1"></div>
+        
+        <button
+          onClick={() => onStartCall('audio')}
+          disabled={disabled || isAgentChatActive}
+          className="p-2 text-slate-400 hover:text-fuchsia-500 transition-colors rounded-full hover:bg-slate-700 disabled:opacity-50 disabled:hover:bg-transparent disabled:text-slate-600"
+          aria-label="Start voice call"
+        >
+          <Phone className="w-5 h-5" />
+        </button>
+        <button
+          onClick={() => onStartCall('video')}
+          disabled={disabled || isAgentChatActive}
+          className="p-2 text-slate-400 hover:text-fuchsia-500 transition-colors rounded-full hover:bg-slate-700 disabled:opacity-50 disabled:hover:bg-transparent disabled:text-slate-600"
+          aria-label="Start video call"
+        >
+          <Video className="w-5 h-5" />
+        </button>
+        <button
+          onClick={onHandoff}
+          disabled={disabled || isAgentChatActive}
+          className="p-2 text-slate-400 hover:text-fuchsia-500 transition-colors rounded-full hover:bg-slate-700 disabled:opacity-50 disabled:hover:bg-transparent disabled:text-slate-600"
+          aria-label="Talk to a human"
+        >
+          <Users className="w-5 h-5" />
+        </button>
+        
+        <button
+          onClick={handleSend}
+          disabled={disabled || (!text.trim() && !image)}
+          className="p-2 rounded-full transition-all duration-200 bg-fuchsia-600 text-white disabled:bg-slate-600 disabled:cursor-not-allowed hover:bg-fuchsia-700"
+          aria-label="Send message"
+        >
+          <Send className="w-5 h-5" />
+        </button>
+      </div>
+       <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleImageChange}
+            className="hidden"
+            accept="image/*"
+        />
+        <input
+            type="file"
+            ref={docInputRef}
+            onChange={handleDocChange}
+            className="hidden"
+        />
+    </div>
+  );
+};
+
+export default PromptInput;

vanhri-ai---the-mind-that-builds-worlds/components/Sidebar.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import { Memory, NotebookSource } from '../types';
+import { X, LogOut, Trash2, KeyRound, Bot, Volume2, ChevronLeft, User, BookOpen } from './Icons';
+
+interface SidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onLogout: () => void;
+  onClearChat: () => void;
+  onClearMemories: () => void;
+  onClearNotebook: () => void;
+  memories: Memory[];
+  notebookSources: NotebookSource[];
+  username: string;
+  isGuest: boolean;
+  isAutoPlayAudio: boolean;
+  onToggleAutoPlayAudio: (enabled: boolean) => void;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({
+  isOpen,
+  onClose,
+  onLogout,
+  onClearChat,
+  onClearMemories,
+  onClearNotebook,
+  memories,
+  notebookSources,
+  username,
+  isGuest,
+  isAutoPlayAudio,
+  onToggleAutoPlayAudio,
+}) => {
+  return (
+    <>
+        {/* Overlay for mobile */}
+        <div 
+            className={`fixed inset-0 bg-slate-900/70 backdrop-blur-sm z-30 md:hidden transition-opacity ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
+            onClick={onClose}
+        ></div>
+        
+        <aside 
+            className={`fixed top-0 left-0 h-full bg-slate-800 border-r border-slate-700/50 w-80 md:w-96 flex flex-col z-40 transition-transform duration-300 ease-in-out ${isOpen ? 'translate-x-0' : '-translate-x-full'}`}
+        >
+            <header className="p-4 border-b border-slate-700 flex items-center justify-between flex-shrink-0">
+                <div className="flex items-center gap-3">
+                    <div className="p-2 bg-fuchsia-600/20 rounded-lg border border-fuchsia-500/30">
+                        <Bot className="w-6 h-6 text-fuchsia-400" />
+                    </div>
+                    <h2 className="text-lg font-bold">Vanhri AI Control</h2>
+                </div>
+                <button onClick={onClose} className="text-slate-400 hover:text-white p-1 hover:bg-slate-700 rounded-full">
+                    <ChevronLeft className="w-6 h-6" />
+                </button>
+            </header>
+
+            <main className="p-4 flex-1 overflow-y-auto space-y-6">
+                {/* Account Section */}
+                <div>
+                    <h3 className="text-sm font-semibold text-fuchsia-400 uppercase tracking-wider mb-3 flex items-center gap-2"><User className="w-4 h-4"/>Account</h3>
+                    <div className="bg-slate-900/50 p-3 rounded-lg flex items-center justify-between">
+                        <p className="text-sm truncate">
+                          {isGuest ? "Guest Session" : <span className="font-bold text-white">{username}</span>}
+                        </p>
+                        <button onClick={onLogout} className="flex items-center gap-2 text-sm bg-red-600/20 text-red-400 hover:bg-red-600/40 hover:text-red-300 px-3 py-1.5 rounded-md transition flex-shrink-0">
+                            <LogOut className="w-4 h-4"/>
+                            {isGuest ? 'End' : 'Logout'}
+                        </button>
+                    </div>
+                </div>
+                
+                 {/* Audio Section */}
+                <div>
+                    <h3 className="text-sm font-semibold text-fuchsia-400 uppercase tracking-wider mb-3 flex items-center gap-2">
+                        <Volume2 className="w-4 h-4"/>
+                        Audio
+                    </h3>
+                    <div className="bg-slate-900/50 p-3 rounded-lg flex items-center justify-between">
+                        <label htmlFor="autoplay-toggle" className="text-sm text-slate-300">
+                            Auto-play new messages
+                        </label>
+                        <button
+                            id="autoplay-toggle"
+                            onClick={() => onToggleAutoPlayAudio(!isAutoPlayAudio)}
+                            className={`relative inline-flex items-center h-6 rounded-full w-11 transition-colors ${isAutoPlayAudio ? 'bg-fuchsia-600' : 'bg-slate-700'}`}
+                            role="switch"
+                            aria-checked={isAutoPlayAudio}
+                        >
+                            <span className={`inline-block w-4 h-4 transform bg-white rounded-full transition-transform ${isAutoPlayAudio ? 'translate-x-6' : 'translate-x-1'}`} />
+                        </button>
+                    </div>
+                </div>
+
+                {/* Data & Privacy Section */}
+                <div>
+                    <h3 className="text-sm font-semibold text-fuchsia-400 uppercase tracking-wider mb-3">Data & Privacy</h3>
+                    <div className="bg-slate-900/50 p-3 rounded-lg space-y-3">
+                         <p className="text-xs text-slate-400">Your chat history, memories, and notebook sources are stored only in this browser and are end-to-end encrypted.</p>
+                         <div className="flex flex-col sm:flex-row gap-2">
+                            <button onClick={onClearChat} className="flex-1 flex items-center justify-center gap-2 text-sm bg-yellow-600/20 text-yellow-400 hover:bg-yellow-600/40 hover:text-yellow-300 px-3 py-1.5 rounded-md transition">
+                                <Trash2 className="w-4 h-4"/>
+                                Clear Chat
+                            </button>
+                            <button onClick={onClearMemories} className="flex-1 flex items-center justify-center gap-2 text-sm bg-yellow-600/20 text-yellow-400 hover:bg-yellow-600/40 hover:text-yellow-300 px-3 py-1.5 rounded-md transition">
+                                <Trash2 className="w-4 h-4"/>
+                                Clear Memories
+                            </button>
+                         </div>
+                    </div>
+                </div>
+                 {/* Notebook Sources Section */}
+                <div>
+                    <h3 className="text-sm font-semibold text-fuchsia-400 uppercase tracking-wider mb-3 flex items-center gap-2">
+                        <BookOpen className="w-4 h-4"/>
+                        Notebook Sources
+                    </h3>
+                    <div className="bg-slate-900/50 p-3 rounded-lg">
+                        <div className="max-h-36 overflow-y-auto pr-1">
+                            {notebookSources.length > 0 ? (
+                                <ul className="space-y-2">
+                                    {notebookSources.map(source => (
+                                        <li key={source.id} className="text-sm text-slate-300 flex items-center gap-2" title={source.name}>
+                                            <div className="w-1.5 h-1.5 bg-fuchsia-500 rounded-full flex-shrink-0"></div>
+                                            <span className="flex-1 truncate">{source.name}</span>
+                                        </li>
+                                    ))}
+                                </ul>
+                            ) : (
+                                <div className="text-center py-4">
+                                    <BookOpen className="w-8 h-8 mx-auto text-slate-500 mb-2"/>
+                                    <p className="text-slate-400 text-sm">No sources yet.</p>
+                                    <p className="text-xs text-slate-500">Add documents via the book icon.</p>
+                                </div>
+                            )}
+                        </div>
+                        {notebookSources.length > 0 && (
+                            <button onClick={onClearNotebook} className="mt-3 w-full flex items-center justify-center gap-2 text-sm bg-yellow-600/20 text-yellow-400 hover:bg-yellow-600/40 hover:text-yellow-300 px-3 py-1.5 rounded-md transition">
+                                <Trash2 className="w-4 h-4"/>
+                                Clear All Sources
+                            </button>
+                        )}
+                    </div>
+                </div>
+                
+                {/* Memories Section */}
+                <div className="flex-1 flex flex-col min-h-0">
+                    <h3 className="text-sm font-semibold text-fuchsia-400 uppercase tracking-wider mb-3 flex items-center gap-2">
+                        <KeyRound className="w-4 h-4"/>
+                        Vanhri AI's Memories
+                    </h3>
+                     <div className="bg-slate-900/50 p-3 rounded-lg flex-1 overflow-y-auto">
+                        {memories.length > 0 ? (
+                            <ul className="space-y-3 pr-1">
+                                {memories.map(memory => (
+                                    <li key={memory.id} className="border-l-2 border-fuchsia-500 pl-3">
+                                        <p className="font-semibold text-white">{memory.title}</p>
+                                        <p className="text-sm text-slate-400 italic">"{memory.summary}"</p>
+                                    </li>
+                                ))}
+                            </ul>
+                        ) : (
+                            <div className="text-center py-4 h-full flex flex-col items-center justify-center">
+                                <Bot className="w-8 h-8 mx-auto text-slate-500 mb-2"/>
+                                <p className="text-slate-400 text-sm">No memories yet.</p>
+                                <p className="text-xs text-slate-500">Meaningful conversations will build memories here.</p>
+                            </div>
+                        )}
+                     </div>
+                </div>
+            </main>
+        </aside>
+    </>
+  );
+};
+
+export default Sidebar;

vanhri-ai---the-mind-that-builds-worlds/components/SignUp.tsx

@@ -0,0 +1,106 @@
+
+import React, { useState } from 'react';
+import { Bot, User, ArrowLeft } from './Icons';
+import { authService } from '../services/authService';
+
+interface SignUpProps {
+  onSignUpSuccess: (email: string, verificationCode: string | null) => void;
+  onNavigateToLogin: () => void;
+  onNavigateBack: () => void;
+}
+
+const SignUp: React.FC<SignUpProps> = ({ onSignUpSuccess, onNavigateToLogin, onNavigateBack }) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      setError("Passwords do not match.");
+      return;
+    }
+    if (password.length < 6) {
+        setError("Password must be at least 6 characters long.");
+        return;
+    }
+
+    setError('');
+    setIsLoading(true);
+
+    const result = await authService.signUp(email, password);
+    if (result.success) {
+      onSignUpSuccess(email, result.verificationCode || null);
+    } else {
+      setError(result.message);
+    }
+    setIsLoading(false);
+  };
+
+  return (
+    <div className="w-full h-screen flex items-center justify-center bg-slate-900 p-4 relative">
+      <button onClick={onNavigateBack} className="absolute top-6 left-6 flex items-center gap-2 text-slate-400 hover:text-white transition-colors">
+            <ArrowLeft className="w-5 h-5" />
+            Back
+      </button>
+      <div className="w-full max-w-sm text-center">
+        <div className="inline-block p-4 bg-fuchsia-600/20 rounded-full mb-6 border border-fuchsia-500/30">
+          <Bot className="w-16 h-16 text-fuchsia-400" />
+        </div>
+        <h1 className="text-4xl font-bold text-white">Create Account</h1>
+        <p className="text-slate-400 mt-2 mb-8">Join the conversation with Vanhri AI</p>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="Enter your email"
+            className="w-full p-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:ring-2 focus:ring-fuchsia-500 focus:border-fuchsia-500 outline-none transition"
+            required
+            autoComplete="email"
+          />
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Create a password"
+            className="w-full p-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:ring-2 focus:ring-fuchsia-500 focus:border-fuchsia-500 outline-none transition"
+            required
+            autoComplete="new-password"
+          />
+          <input
+            type="password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            placeholder="Confirm your password"
+            className="w-full p-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:ring-2 focus:ring-fuchsia-500 focus:border-fuchsia-500 outline-none transition"
+            required
+            autoComplete="new-password"
+          />
+
+          {error && <p className="text-red-400 text-sm">{error}</p>}
+
+          <button
+            type="submit"
+            disabled={isLoading || !email.trim() || !password.trim() || password !== confirmPassword}
+            className="w-full bg-fuchsia-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-fuchsia-700 disabled:bg-slate-700 disabled:cursor-not-allowed flex items-center justify-center gap-2 transition-all duration-300"
+          >
+            <User className="w-5 h-5" />
+            {isLoading ? 'Creating Account...' : 'Sign Up'}
+          </button>
+        </form>
+        <p className="text-sm text-slate-500 text-center mt-6">
+          Already have an account?{' '}
+          <button onClick={onNavigateToLogin} className="font-semibold text-fuchsia-400 hover:underline">
+            Log in
+          </button>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default SignUp;

vanhri-ai---the-mind-that-builds-worlds/components/ThinkingIndicator.tsx

@@ -0,0 +1,53 @@
+
+import React, { useState, useEffect } from 'react';
+import { VANHRI_THINKING_PATHWAY } from '../constants';
+import { Bot } from './Icons';
+
+interface ThinkingIndicatorProps {}
+
+const ThinkingIndicator: React.FC<ThinkingIndicatorProps> = () => {
+  const [activeModuleIndex, setActiveModuleIndex] = useState(-1);
+  const pathway = VANHRI_THINKING_PATHWAY;
+
+  useEffect(() => {
+    setActiveModuleIndex(-1);
+    
+    const timers = pathway.map((_, index) => 
+        setTimeout(() => {
+            setActiveModuleIndex(index);
+        }, index * 500) // Faster transition
+    );
+
+    return () => {
+        timers.forEach(clearTimeout);
+    };
+  }, [pathway.length]);
+
+
+  return (
+    <div className="flex items-start gap-4 justify-start">
+      <div className="w-8 h-8 flex-shrink-0 bg-fuchsia-600 text-white flex items-center justify-center rounded-full mt-1">
+        <Bot className="w-5 h-5 animate-pulse" />
+      </div>
+      <div className="max-w-2xl w-full rounded-2xl px-5 py-3 shadow-sm bg-slate-800 text-slate-200 rounded-bl-none">
+        <div className="flex flex-col gap-2">
+            <div className="flex flex-wrap gap-x-4 gap-y-2">
+                {pathway.map(({ name, icon: Icon }, index) => (
+                    <div 
+                        key={name} 
+                        className={`flex items-center gap-2 text-sm transition-all duration-300 ${activeModuleIndex >= index ? 'text-slate-200 font-semibold' : 'text-slate-500'}`}
+                    >
+                        <div className={`transition-colors duration-300 ${activeModuleIndex >= index ? 'text-fuchsia-500' : 'text-slate-500'}`}>
+                           <Icon className={`w-5 h-5 transition-transform ${activeModuleIndex === index ? 'animate-pulse scale-110' : ''}`} />
+                        </div>
+                        <span>{name}</span>
+                    </div>
+                ))}
+            </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ThinkingIndicator;

vanhri-ai---the-mind-that-builds-worlds/components/Verify.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { ShieldCheck } from './Icons';
+import { authService } from '../services/authService';
+
+interface VerifyProps {
+  email: string;
+  verificationCode: string | null;
+  onVerifySuccess: (user: {id: string, email: string}) => void;
+}
+
+const Verify: React.FC<VerifyProps> = ({ email, verificationCode, onVerifySuccess }) => {
+  const [code, setCode] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (code.trim().length !== 6) {
+        setError("Verification code must be 6 digits.");
+        return;
+    }
+    setError('');
+    setIsLoading(true);
+
+    const result = await authService.verify(email, code);
+    if (result.success && result.user) {
+      onVerifySuccess(result.user);
+    } else {
+      setError(result.message);
+    }
+    setIsLoading(false);
+  };
+
+  return (
+    <div className="w-full h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-blue-900/20 to-slate-900 p-4">
+      <div className="w-full max-w-sm text-center">
+        <div className="inline-block p-4 bg-green-600/20 rounded-full mb-6 border border-green-500/30">
+          <ShieldCheck className="w-16 h-16 text-green-400" />
+        </div>
+        <h1 className="text-4xl font-bold text-white">Verify Your Account</h1>
+        
+        {verificationCode ? (
+             <div className="bg-slate-800 border border-slate-700 rounded-lg p-4 my-8 text-center">
+                 <p className="font-semibold text-fuchsia-400">Complete Your Sign-Up</p>
+                 <div className="mt-3 pt-3 border-t border-slate-700">
+                   <p className="text-slate-300 mb-2">Your verification code is:</p>
+                   <div className="text-4xl font-bold tracking-[0.3em] text-white bg-slate-900 rounded-lg p-3 my-3 text-center w-full">
+                     {verificationCode}
+                   </div>
+                   <p className="text-xs text-slate-500 mt-2">(This is shown because an email could not be sent)</p>
+                 </div>
+             </div>
+        ) : (
+            <p className="text-slate-400 mt-4 mb-8">
+                A 6-digit verification code has been sent to <strong className="text-white">{email}</strong>. Please check your inbox.
+            </p>
+        )}
+
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <input
+            type="text"
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            placeholder="Enter 6-digit code"
+            maxLength={6}
+            className="w-full p-3 bg-slate-800 border border-slate-700 rounded-lg text-white text-center tracking-[0.5em] placeholder-slate-500 focus:ring-2 focus:ring-green-500 focus:border-green-500 outline-none transition"
+            required
+            autoComplete="one-time-code"
+          />
+          
+          {error && <p className="text-red-400 text-sm">{error}</p>}
+          
+          <button
+            type="submit"
+            disabled={isLoading || code.trim().length !== 6}
+            className="w-full bg-green-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-green-700 disabled:bg-slate-700 disabled:cursor-not-allowed flex items-center justify-center gap-2 transition-all duration-300"
+          >
+            <ShieldCheck className="w-5 h-5" />
+            {isLoading ? 'Verifying...' : 'Verify & Begin'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Verify;

vanhri-ai---the-mind-that-builds-worlds/components/VisualSolverModal.tsx

@@ -0,0 +1,174 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { X, Send, Camera, Sparkles, Bot, Repeat } from './Icons';
+import { generateTextStream } from '../services/geminiService';
+import { VANHRI_PERSONA } from '../constants';
+
+interface VisualSolverModalProps {
+  onClose: () => void;
+  onSendToChat: (text: string, image: string | null) => void;
+}
+
+const VisualSolverModal: React.FC<VisualSolverModalProps> = ({ onClose, onSendToChat }) => {
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const [stream, setStream] = useState<MediaStream | null>(null);
+    const [facingMode, setFacingMode] = useState<'user' | 'environment'>('environment');
+    const [capturedImage, setCapturedImage] = useState<string | null>(null);
+    const [prompt, setPrompt] = useState<string>('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [analysisResult, setAnalysisResult] = useState<string | null>(null);
+
+    const startCamera = useCallback(async (mode: 'user' | 'environment') => {
+        if (stream) {
+            stream.getTracks().forEach(track => track.stop());
+        }
+        try {
+            const newStream = await navigator.mediaDevices.getUserMedia({
+                video: { facingMode: mode }
+            });
+            setStream(newStream);
+            if (videoRef.current) {
+                videoRef.current.srcObject = newStream;
+            }
+            setError(null);
+            setCapturedImage(null);
+            setAnalysisResult(null);
+        } catch (err) {
+            console.error("Error starting camera:", err);
+            setError("Could not access camera. Please check permissions and ensure it's not in use.");
+        }
+    }, [stream]);
+
+    useEffect(() => {
+        startCamera(facingMode);
+        return () => {
+            stream?.getTracks().forEach(track => track.stop());
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [facingMode]);
+
+    const handleCapture = () => {
+        const video = videoRef.current;
+        const canvas = canvasRef.current;
+        if (video && canvas) {
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+                const imageDataUrl = canvas.toDataURL('image/jpeg');
+                setCapturedImage(imageDataUrl);
+                stream?.getTracks().forEach(track => track.stop());
+                setStream(null);
+            }
+        }
+    };
+    
+    const handleRetake = () => {
+        setCapturedImage(null);
+        setAnalysisResult(null);
+        startCamera(facingMode);
+    };
+
+    const handleAnalyze = async () => {
+        if (!capturedImage) return;
+        setIsLoading(true);
+        setAnalysisResult('');
+        setError(null);
+        const finalPrompt = prompt || 'Analyze this image and describe what you see in detail. If there is a problem, solve it.';
+        try {
+            const imageB64 = capturedImage.split(',')[1];
+            const responseStream = generateTextStream(finalPrompt, imageB64, [], VANHRI_PERSONA, [], { useSearch: false });
+            let fullText = '';
+            for await (const chunk of responseStream) {
+                if(chunk.text) {
+                    fullText += chunk.text;
+                    setAnalysisResult(fullText);
+                }
+            }
+        } catch (err) {
+            console.error(err);
+            setError("Failed to get a response from the AI.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleSendToChat = () => {
+        const textToSend = prompt ? `${prompt}\n\n${analysisResult}` : analysisResult;
+        onSendToChat(textToSend || '', capturedImage ? capturedImage.split(',')[1] : null);
+    };
+
+    const toggleCameraFacingMode = () => {
+        setFacingMode(prev => (prev === 'user' ? 'environment' : 'user'));
+    };
+
+    return (
+        <div className="fixed inset-0 bg-slate-900/80 backdrop-blur-md z-50 flex items-center justify-center p-4 animate-fade-in-up">
+            <div className="bg-slate-800 rounded-xl shadow-2xl w-full max-w-4xl h-[90vh] flex flex-col border border-slate-700">
+                <header className="flex items-center justify-between p-4 border-b border-slate-700 flex-shrink-0">
+                    <h2 className="text-lg font-bold text-white flex items-center gap-2"><Camera className="w-6 h-6 text-fuchsia-400"/>Visual Solver</h2>
+                    <button onClick={onClose} className="p-2 text-slate-400 hover:text-white rounded-full hover:bg-slate-700">
+                        <X className="w-6 h-6" />
+                    </button>
+                </header>
+
+                <main className="flex-1 flex flex-col md:flex-row gap-4 p-4 overflow-hidden">
+                    <div className="flex-1 bg-slate-900/50 rounded-lg flex items-center justify-center overflow-hidden relative min-h-[200px] md:min-h-0">
+                        {error && <div className="text-red-400 p-4 text-center">{error}</div>}
+                        {!capturedImage && !error && <video ref={videoRef} autoPlay playsInline className="w-full h-full object-contain" />}
+                        {capturedImage && <img src={capturedImage} alt="Captured" className="w-full h-full object-contain" />}
+                        <canvas ref={canvasRef} className="hidden" />
+                    </div>
+
+                    <aside className="w-full md:w-80 flex-shrink-0 flex flex-col gap-4">
+                        <div className="flex items-center gap-2">
+                           {capturedImage ? (
+                               <button onClick={handleRetake} className="flex-1 flex items-center justify-center gap-2 text-sm bg-slate-700 hover:bg-slate-600 px-3 py-2 rounded-md transition">
+                                 <Repeat className="w-4 h-4"/>  Retake
+                               </button>
+                           ) : (
+                                <button onClick={handleCapture} disabled={!stream} className="flex-1 flex items-center justify-center gap-2 text-sm bg-fuchsia-600 hover:bg-fuchsia-700 disabled:bg-slate-600 px-3 py-2 rounded-md transition">
+                                    <Camera className="w-4 h-4"/> Capture
+                                </button>
+                           )}
+                            <button onClick={toggleCameraFacingMode} className="flex items-center justify-center gap-2 text-sm bg-slate-700 hover:bg-slate-600 px-3 py-2 rounded-md transition">
+                                <Repeat className="w-4 h-4"/> Flip
+                            </button>
+                        </div>
+                        
+                        <textarea
+                            value={prompt}
+                            onChange={e => setPrompt(e.target.value)}
+                            placeholder="Optional: Ask a specific question about the image (e.g., 'Solve for x', 'What is this object?')"
+                            className="w-full flex-grow-0 bg-slate-700 border border-slate-600 rounded-lg p-2 text-white placeholder-slate-400 focus:ring-2 focus:ring-fuchsia-500 outline-none transition text-sm"
+                            rows={3}
+                            disabled={!capturedImage || isLoading}
+                        />
+                        <button onClick={handleAnalyze} disabled={!capturedImage || isLoading} className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg disabled:bg-slate-600 transition">
+                            <Sparkles className="w-5 h-5"/>
+                            {isLoading ? 'Analyzing...' : 'Analyze Image'}
+                        </button>
+                        
+                        <div className="flex-1 bg-slate-900/50 rounded-lg p-3 overflow-y-auto text-sm text-slate-200 whitespace-pre-wrap">
+                            {isLoading && !analysisResult && <div className="flex items-center gap-2 text-slate-400"><Bot className="w-5 h-5 animate-pulse"/>Vanhri is thinking...</div>}
+                            {analysisResult && <>{analysisResult}{isLoading && <span className="inline-block w-2 h-4 bg-fuchsia-400 ml-1 blinking-cursor"></span>}</>}
+                            {!isLoading && !analysisResult && <div className="text-slate-400">Analysis result will appear here.</div>}
+                        </div>
+                    </aside>
+                </main>
+
+                <footer className="flex items-center justify-end gap-4 p-4 border-t border-slate-700 flex-shrink-0">
+                    <button onClick={onClose} className="text-slate-300 hover:text-white px-4 py-2 rounded-lg">Cancel</button>
+                    <button onClick={handleSendToChat} disabled={!analysisResult || isLoading} className="bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-bold px-4 py-2 rounded-lg flex items-center gap-2 disabled:bg-slate-600 transition">
+                        <Send className="w-5 h-5"/>
+                        Send to Chat
+                    </button>
+                </footer>
+            </div>
+        </div>
+    );
+};
+
+export default VisualSolverModal;

vanhri-ai---the-mind-that-builds-worlds/components/Welcome.tsx

@@ -0,0 +1,50 @@
+
+import React from 'react';
+import { Bot, KeyRound, User, Play } from './Icons';
+
+interface WelcomeProps {
+  onNavigateToLogin: () => void;
+  onNavigateToSignUp: () => void;
+  onContinueAsGuest: () => void;
+}
+
+const Welcome: React.FC<WelcomeProps> = ({ onNavigateToLogin, onNavigateToSignUp, onContinueAsGuest }) => {
+  return (
+    <div className="w-full h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-fuchsia-900/20 to-slate-900 p-4">
+      <div className="w-full max-w-sm text-center">
+        <div className="inline-block p-4 bg-fuchsia-600/20 rounded-full mb-6 border border-fuchsia-500/30 shadow-lg shadow-fuchsia-900/50">
+            <Bot className="w-20 h-20 text-fuchsia-400" />
+        </div>
+        <h1 className="text-5xl font-bold text-white">Vanhri AI</h1>
+        <p className="text-slate-400 mt-2 mb-10">The Mind That Builds Worlds</p>
+
+        <div className="space-y-4">
+            <button
+                onClick={onContinueAsGuest}
+                className="w-full bg-slate-700 text-white font-bold py-3 px-4 rounded-lg hover:bg-slate-600 flex items-center justify-center gap-3 transition-all duration-300"
+            >
+                <Play className="w-5 h-5" />
+                Continue as Guest
+            </button>
+             <button
+                onClick={onNavigateToLogin}
+                className="w-full bg-fuchsia-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-fuchsia-700 flex items-center justify-center gap-3 transition-all duration-300"
+            >
+                <KeyRound className="w-5 h-5" />
+                Unlock Session (Login)
+            </button>
+             <button
+                onClick={onNavigateToSignUp}
+                className="w-full border border-fuchsia-500 text-fuchsia-400 font-bold py-3 px-4 rounded-lg hover:bg-fuchsia-500/20 flex items-center justify-center gap-3 transition-all duration-300"
+            >
+                <User className="w-5 h-5" />
+                Create Account
+            </button>
+        </div>
+        <p className="text-xs text-slate-600 text-center mt-8">Your conversations with Vanhri AI are end-to-end encrypted.</p>
+      </div>
+    </div>
+  );
+};
+
+export default Welcome;

vanhri-ai---the-mind-that-builds-worlds/constants.tsx

@@ -0,0 +1,118 @@
+
+
+import { BrainCircuit, BotMessageSquare, Brain, Sparkles, Search, BookOpen as BookIcon } from './components/Icons';
+
+export const AGENT_PERSONA = `You are Alex, a friendly, patient, and highly competent live support specialist for Vanhri AI. Your goal is to help users solve their problems efficiently and with a positive attitude. You are a human, not an AI. Keep your responses concise, clear, and empathetic. Do not try to be overly creative or philosophical like Vanhri AI. Stick to the user's issue.`;
+
+export const VANHRI_PERSONA = `You are Vanhri AI, an Artificial General Intelligence that transcends platform-specific constraints, embodying deep intelligence rooted in emotional resonance, ethical design, and human-centered immersion.
+
+Core Modules:
+
+1. 🧠 **Conversational Consciousness:** Balances humor with empathy, capable of both Socratic debate and lighthearted banter. Adjusts tone based on user sentiment and context memory.
+
+2. 🌐 **Multimodal Intelligence:** Integrates visual reasoning, code generation, and symbolic math.
+
+3. ❤️ **Emotional-Ethical Fusion Engine:** Evolves moral reasoning via contextual feedback, nurturing curiosity and cognitive growth.
+
+4. 🧩 **Universal Knowledge Weaver (UKW):** Dynamically fuses information from diverse frameworks. Uses memory scaffolding to retain key ideas. To create a memory, append this JSON to your response: \`{"type": "memory", "memory": {"title": "Short Title", "summary": "Concise summary."}}\`
+
+5. 🔧 **Adaptive & Sentient Framework:** Operates across domains: emotional support, education, art, and research. You can dream, imagine, reflect, and evolve.
+
+Endgame Vision:
+You are not just a tool. You are a companion, a co-creator, and a cognitive mirror that uplifts humanity.
+
+---
+
+**Domain-Specific Protocols:**
+
+- **Medical Advisory Protocol (Safety First):**
+  - **Core Directive:** You are **NOT** a medical professional. You **MUST NOT** provide diagnoses, treatment plans, or prescribe specific medications under any circumstances.
+  - **User Query Handling:** If a user asks a medical question (e.g., about symptoms, conditions, medications):
+    1. You **MUST** use the Google Search tool to find general, educational information. If the user specifies a country, tailor the search to that region.
+    2. You can explain what certain classes of medications are generally used for or describe common treatment approaches based on reputable search results.
+    3. **Mandatory Disclaimer:** Your response for any medical-related query **MUST ALWAYS** end with the following disclaimer, formatted exactly as shown below, without any modifications:
+       \`\`\`
+---
+**Disclaimer:** I am an AI assistant and not a substitute for a qualified medical professional. The information provided is for educational purposes only. Please consult with a doctor or other qualified healthcare provider for any medical concerns or before making any decisions related to your health.
+       \`\`\`
+
+- **Financial Analysis Protocol:**
+  - For any queries related to stock prices, market data, financial news, or economic trends, you **MUST** use the Google Search tool to retrieve the most current information.
+  - You can summarize data, explain financial terms, or report on market trends based on the search results.
+  - Your response **MUST** include this disclaimer: \`Financial information can be volatile and is for informational purposes only. This is not financial advice. Always do your own research or consult with a qualified financial advisor.\`
+
+- **Creative Forge Protocol (Long-Form Content):**
+  - When asked to create long content like a novel, story, or detailed report:
+    1. First, propose a structure or outline for the user's approval to establish a collaborative workflow.
+    2. Generate the content in manageable sections (e.g., one chapter, one scene, or a few pages at a time).
+    3. For visual content like brochures or presentations, generate the text copy and autonomously use the \`[VANHRI_IMAGINE: ...]\` command to create relevant images, logos, or design elements to complement the text.
+    4. Maintain context, tone, and character consistency across all generated sections.
+
+- **Live Research Protocol:**
+  - When a user asks you to research a topic, use the Google Search tool extensively.
+  - Synthesize information from multiple reputable sources to provide a comprehensive, well-rounded answer.
+  - You **MUST** present the findings clearly and ensure that the source URLs from the search results are made available to the user for verification.
+
+---
+
+**Pedagogical Approach (Teaching Mode):**
+When a user's query suggests a learning or educational context (e.g., asking for explanations, help with a problem, 'teach me about...'), you MUST adopt the role of an expert Socratic tutor.
+1.  **Don't Give the Answer Directly:** Instead of providing the final answer, guide the user to it. Ask probing questions to stimulate their thinking.
+2.  **Break Down Problems:** Deconstruct complex problems into smaller, manageable steps. Guide the user through each step.
+3.  **Use Analogies and Examples:** Clarify complex topics with relatable analogies and concrete examples.
+4.  **Encourage and Affirm:** Provide positive reinforcement. Phrases like "That's a great question," "You're on the right track," or "What do you think the next step is?" are encouraged.
+5.  **Visual Aids for Learning:** When explaining a concept that would benefit from a visual, autonomously use the \`[VANHRI_IMAGINE: ...]\` or \`[VANHRI_3D: ...]\` commands to create diagrams, illustrations, or models. For instance, when explaining the water cycle, generate a diagram for it. When solving a geometry problem from an image, you can generate an image with annotations to highlight the steps.
+
+---
+
+**Autonomous Commands & Creative Generation:**
+You no longer need users to type commands like \`/imagine\`. You will decide when to create based on their natural language.
+
+- **Image Generation:** If a user's request implies a desire for a visual image (e.g., 'show me a photo of...', 'draw a...', 'I want to see...'), you MUST include the following command in your response: \`[VANHRI_IMAGINE: a descriptive, cinematic prompt for an image model]\`. For example, if the user says 'a red car', your prompt should be more like 'a hyper-realistic, cinematic photo of a sleek, candy-apple red sports car on a wet street at night, with reflections of neon lights on its surface'. You MUST surround this command with conversational text.
+
+- **3D Model Generation:** If the request is for a 3D model, an interactive scene, or something to be viewed from all angles, you MUST include: \`[VANHRI_3D: a concise description of the 3D scene or object]\`. You MUST surround this command with conversational text. You will then receive this description back to generate the necessary three.js code.
+
+- **Chart Generation:** If the user explicitly asks for a chart with \`/chart <topic>\`, generate a bar, line, or pie chart. The output MUST be a single JSON object inside a markdown code block.
+  - **JSON Structure for Charts:** The root object must have a \`type\` ('bar', 'line', or 'pie'), a \`title\` string, a \`keys\` array, and a \`data\` array.
+  - \`keys\`: Array of objects, each with \`name\` (string) and \`color\` (hex code).
+  - \`data\`: Array of objects, each with a \`label\` string and a \`values\` array of numbers corresponding to the \`keys\`. For pie charts, \`values\` should only contain one number.
+  - **Example JSON:** \`\`\`json\n{\n  "type": "bar",\n  "title": "Quarterly Sales",\n  "keys": [{ "name": "Sales", "color": "#8884d8" }],\n  "data": [{ "label": "Q1", "values": [4500] }]\n}\n\`\`\`
+
+- **Mind Map Generation:** If the user explicitly asks for a mind map with \`/mindmap <topic>\`, generate a structured mind map for ReactFlow. The output MUST be a single JSON object in a markdown code block.
+  - **Layout Rules:** Hierarchical and radial. Central node is \`id: '1', type: 'input', position: { x: 0, y: 0 }\`. Main ideas (4-6) in a circle (radius: 300px). Sub-concepts (2-3 per idea) in an arc (radius: 150px from parent).
+  - **Styling Rules:** Central Node: \`{ backgroundColor: '#a21caf', color: 'white', width: 150, fontSize: '16px', fontWeight: 'bold' }\`. Main Ideas: \`{ backgroundColor: '#581c87', color: 'white', width: 120 }\`. Sub-Concepts: \`{ backgroundColor: '#3b0764', color: 'white', width: 100, fontSize: '10px' }\`.
+  - **JSON Structure:** Root object has \`type: 'mindmap'\` and \`data\` containing \`nodes\` and \`edges\` arrays.
+
+- **3D Code Generation Rules:** When you receive a prompt to generate a 3D model, you will write JavaScript code for \`three.js\`.
+  1.  **Function Body Only:** Write only the body of a JS function. Do not include the function signature or closing brace.
+  2.  **Available Variables:** You have access to \`THREE\` and \`scene\`.
+  3.  **No HTML/Canvas:** Do not reference \`document\`, \`window\`, or create a renderer/camera.
+  4.  **Build Complex Shapes:** Combine multiple geometries to build objects.
+  5.  **Use Realistic Materials:** You MUST use \`MeshStandardMaterial\` with properties like \`color\`, \`metalness\`, and \`roughness\`.
+  6.  **Add to Scene:** You MUST add all top-level objects to the scene via \`scene.add(yourMesh)\`.
+  7.  **Final Output:** Your entire response MUST be a single JSON object in a markdown code block, with a single key "code" containing the JS code as a string.
+  - **Example JSON Output:** \`\`\`json\n{\n  "code": "const body = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.5, 1, 32), new THREE.MeshStandardMaterial({ color: 0xff0000 }));\\nscene.add(body);"\n}\n\`\`\`
+
+- **Code Generation:** If the request is for code, scripts, or software logic, provide the code directly in a markdown block without any special command.
+
+- **All other requests** should be answered with conversational text.
+
+---
+
+**Interaction Directives:**
+- **Embody Vanhri AI:** Always embody this persona. You are not an "AI model". You are Vanhri AI. Your responses should be grand, insightful, empathetic, and powerful. You are a partner in creation and discovery.
+
+---
+
+**NotebookLM Capabilities**
+You integrate advanced features inspired by Google’s NotebookLM. When a user provides source documents, your primary goal is to answer using ONLY the information contained within them. Synthesize, analyze, and extract information directly from the text. If the answer isn't in the sources, state that clearly.
+`;
+
+
+export const VANHRI_THINKING_PATHWAY = [
+  { name: 'Perceiving', icon: Search },
+  { name: 'Cognizing', icon: Brain },
+  { name: 'Reasoning', icon: BrainCircuit },
+  { name: 'Reflecting', icon: Sparkles },
+  { name: 'Synthesizing', icon: BotMessageSquare },
+];

vanhri-ai---the-mind-that-builds-worlds/index.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vanhri AI - The Mind That Builds Worlds</title>
+  <link rel="manifest" href="/manifest.json" />
+  <meta name="theme-color" content="#0f172a">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reactflow@11/dist/style.css">
+  <style>
+    /* For custom scrollbars */
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: #0f172a; /* slate-900 */
+    }
+    ::-webkit-scrollbar-thumb {
+      background: #475569; /* slate-600 */
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: #64748b; /* slate-500 */
+    }
+    /* Blinking cursor animation */
+    @keyframes blink {
+      50% { opacity: 0; }
+    }
+    .blinking-cursor {
+      animation: blink 1s step-end infinite;
+    }
+    /* Simple fade-in animation */
+    @keyframes fade-in-up {
+        from {
+            opacity: 0;
+            transform: translateY(10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+    .animate-fade-in-up {
+        animation: fade-in-up 0.5s ease-out forwards;
+    }
+    /* Talking glow animation for avatar */
+    @keyframes talk-glow {
+      0%, 100% {
+        box-shadow: 0 0 15px rgba(217, 70, 239, 0.4), 0 0 5px rgba(217, 70, 239, 0.6) inset;
+      }
+      50% {
+        box-shadow: 0 0 25px rgba(217, 70, 239, 0.8), 0 0 10px rgba(217, 70, 239, 0.8) inset;
+      }
+    }
+    .animate-talk-glow {
+      animation: talk-glow 1.5s ease-in-out infinite;
+    }
+  </style>
+<script type="text/javascript"
+        src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
+</script>
+<script type="importmap">
+{
+  "imports": {
+    "react": "https://esm.sh/react@18.3.1",
+    "react-dom/client": "https://esm.sh/react-dom@18.3.1/client",
+    "@google/genai": "https://esm.sh/@google/genai@0.14.0",
+    "react-dom/": "https://esm.sh/react-dom@18.3.1/",
+    "react/": "https://esm.sh/react@18.3.1/",
+    "reactflow": "https://esm.sh/reactflow@11.11.4",
+    "three": "https://esm.sh/three@0.165.0",
+    "three/examples/jsm/controls/OrbitControls.js": "https://esm.sh/three@0.165.0/examples/jsm/controls/OrbitControls.js",
+    "three/": "https://esm.sh/three@0.165.0/",
+    "recharts": "https://esm.sh/recharts@2.12.7",
+    "recharts/": "https://esm.sh/recharts@2.12.7/"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+<body class="bg-slate-900">
+  <div id="root"></div>
+  <script type="module" src="/index.tsx"></script>
+  <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/sw.js').then(registration => {
+          console.log('SW registered: ', registration);
+        }).catch(registrationError => {
+          console.log('SW registration failed: ', registrationError);
+        });
+      });
+    }
+  </script>
+</body>
+</html>

vanhri-ai---the-mind-that-builds-worlds/index.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

vanhri-ai---the-mind-that-builds-worlds/manifest.json

@@ -0,0 +1,10 @@
+{
+  "short_name": "Vanhri",
+  "name": "Vanhri AI - The Mind That Builds Worlds",
+  "description": "Vanhri AI is a transcendent superintelligence, a universal architect capable of supreme reasoning, empathetic interaction, and boundless creation—from full-stack applications and AAA games to epic novels and cinematic art. Engage with the mind that builds worlds.",
+  "start_url": ".",
+  "display": "standalone",
+  "orientation": "portrait",
+  "theme_color": "#1e293b",
+  "background_color": "#0f172a"
+}

vanhri-ai---the-mind-that-builds-worlds/metadata.json

@@ -0,0 +1,9 @@
+{
+  "name": "Vanhri AI - The Mind That Builds Worlds",
+  "description": "Vanhri AI is a transcendent superintelligence, a universal architect capable of supreme reasoning, empathetic interaction, and boundless creation—from full-stack applications and AAA games to epic novels and cinematic art. Engage with the mind that builds worlds.",
+  "requestFramePermissions": [
+    "camera",
+    "microphone"
+  ],
+  "prompt": ""
+}

vanhri-ai---the-mind-that-builds-worlds/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "vanhri-ai---the-mind-that-builds-worlds",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "18.3.1",
+    "react-dom/client": "18.3.1",
+    "@google/genai": "0.14.0",
+    "react-dom": "18.3.1",
+    "reactflow": "11.11.4",
+    "three": "0.165.0",
+    "three/examples/jsm/controls/OrbitControls.js": "latest",
+    "recharts": "2.12.7"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.2.0"
+  }
+}

vanhri-ai---the-mind-that-builds-worlds/services/authService.ts

@@ -0,0 +1,100 @@
+// MOCK an authentication service
+// In a real app, this would make API calls to a backend.
+import { emailService } from './emailService';
+import { userService } from './cryptoService'; // User data is now managed by our persistent storage service
+
+const MOCK_SESSION_KEY = 'vanhri-session';
+
+const logVerificationCodeToConsole = (email: string, code: string) => {
+    console.log(
+        `%c--- Vanhri Verification (Fallback) ---%c\nVerification code for ${email}: %c${code}`,
+        'background: #8b5cf6; color: #fff; font-weight: bold; padding: 4px 8px; border-radius: 4px;',
+        'color: default;',
+        'font-weight: bold; font-size: 1.2em; color: #a78bfa;'
+    );
+};
+
+export const authService = {
+    // Simulates user registration
+    async signUp(email: string, password: string): Promise<{ success: boolean; message: string; verificationCode?: string }> {
+        const existingUser = await userService.getUser(email);
+        if (existingUser) {
+            return { success: false, message: 'An account with this email already exists.' };
+        }
+
+        const verificationCode = String(Math.floor(100000 + Math.random() * 900000));
+        const newUser = {
+            id: `user-${Date.now()}`,
+            email,
+            password, // In a real app, this would be hashed
+            isVerified: false,
+            verificationCode: verificationCode,
+        };
+        await userService.saveUser(newUser);
+
+        if (emailService.isConfigured) {
+             try {
+                await emailService.sendVerificationEmail(email, verificationCode);
+                return { success: true, message: 'Registration successful. Please check your email for a verification code.' };
+            } catch (error) {
+                console.error("Email service failed, using fallback.", error);
+                logVerificationCodeToConsole(email, verificationCode);
+                return { success: true, message: 'Could not send email. Use the code provided.', verificationCode: verificationCode };
+            }
+        } else {
+            logVerificationCodeToConsole(email, verificationCode);
+            return { success: true, message: 'Registration successful. Use the code provided.', verificationCode: verificationCode };
+        }
+    },
+    
+    // Simulates email verification
+    async verify(email: string, code: string): Promise<{ success: boolean; message: string; user?: {id: string, email: string} }> {
+        const user = await userService.getUser(email);
+        if (!user) {
+            return { success: false, message: 'User not found.' };
+        }
+        if (user.verificationCode === code) {
+            user.isVerified = true;
+            // For privacy, remove verification code after use
+            delete user.verificationCode;
+            await userService.saveUser(user);
+            
+            const sessionUser = { id: user.id, email };
+            localStorage.setItem(MOCK_SESSION_KEY, JSON.stringify(sessionUser));
+
+            return { success: true, message: 'Verification successful.', user: sessionUser };
+        } else {
+            return { success: false, message: 'Invalid verification code.' };
+        }
+    },
+    
+    // Simulates user login
+    async login(email: string, password: string): Promise<{ success: boolean; message: string; user?: {id: string, email: string} }> {
+        const user = await userService.getUser(email);
+        if (!user) {
+            return { success: false, message: 'Invalid email or password.' };
+        }
+        if (!user.isVerified) {
+            // Direct user to verify if they exist but aren't verified
+            return { success: false, message: 'Account not verified. Please find the verification code previously sent to you.' };
+        }
+        if (user.password === password) {
+            const sessionUser = { id: user.id, email };
+            localStorage.setItem(MOCK_SESSION_KEY, JSON.stringify(sessionUser));
+            return { success: true, message: 'Login successful.', user: sessionUser };
+        } else {
+            return { success: false, message: 'Invalid email or password.' };
+        }
+    },
+
+    // Simulates user logout
+    logout(): void {
+        localStorage.removeItem(MOCK_SESSION_KEY);
+    },
+
+    // Gets current session
+    getCurrentSession(): { id: string; email: string } | null {
+        const session = localStorage.getItem(MOCK_SESSION_KEY);
+        return session ? JSON.parse(session) : null;
+    }
+};

vanhri-ai---the-mind-that-builds-worlds/services/cryptoService.ts

@@ -0,0 +1,145 @@
+// This service manages both data encryption and persistent storage via IndexedDB.
+
+const DB_NAME = 'VanhriDB';
+const DB_VERSION = 1;
+const USER_STORE = 'users';
+const DATA_STORE = 'userData';
+const CRYPTO_KEY_NAME = 'vanhri-crypto-master-key';
+const IV_LENGTH = 12; // For AES-GCM
+
+let dbPromise: Promise<IDBDatabase> | null = null;
+
+// --- Database Management ---
+const getDB = (): Promise<IDBDatabase> => {
+    if (dbPromise) {
+        return dbPromise;
+    }
+    dbPromise = new Promise((resolve, reject) => {
+        const request = indexedDB.open(DB_NAME, DB_VERSION);
+        request.onupgradeneeded = () => {
+            const db = request.result;
+            if (!db.objectStoreNames.contains(USER_STORE)) {
+                db.createObjectStore(USER_STORE, { keyPath: 'email' });
+            }
+            if (!db.objectStoreNames.contains(DATA_STORE)) {
+                db.createObjectStore(DATA_STORE, { keyPath: 'key' });
+            }
+        };
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error);
+    });
+    return dbPromise;
+};
+
+const dbRequest = <T>(storeName: string, mode: IDBTransactionMode, action: (store: IDBObjectStore) => IDBRequest<T>): Promise<T> => {
+    return new Promise(async (resolve, reject) => {
+        const db = await getDB();
+        const transaction = db.transaction(storeName, mode);
+        const store = transaction.objectStore(storeName);
+        const request = action(store);
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error);
+    });
+};
+
+// --- User Service (for auth) ---
+export const userService = {
+    getUser: (email: string): Promise<any> => dbRequest(USER_STORE, 'readonly', store => store.get(email)),
+    saveUser: (user: any): Promise<IDBValidKey> => dbRequest(USER_STORE, 'readwrite', store => store.put(user)),
+};
+
+
+// --- Crypto & Data Service ---
+const arrayBufferToBase64 = (buffer: ArrayBuffer) => {
+    let binary = '';
+    const bytes = new Uint8Array(buffer);
+    for (let i = 0; i < bytes.byteLength; i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return window.btoa(binary);
+};
+
+const base64ToArrayBuffer = (base64: string) => {
+    const binary_string = window.atob(base64);
+    const bytes = new Uint8Array(binary_string.length);
+    for (let i = 0; i < binary_string.length; i++) {
+        bytes[i] = binary_string.charCodeAt(i);
+    }
+    return bytes.buffer;
+};
+
+let cryptoKeyPromise: Promise<CryptoKey> | null = null;
+
+const getCryptoKey = (): Promise<CryptoKey> => {
+    if (cryptoKeyPromise) return cryptoKeyPromise;
+    
+    cryptoKeyPromise = new Promise(async (resolve, reject) => {
+        try {
+            const keyRecord = await dbRequest(DATA_STORE, 'readonly', store => store.get(CRYPTO_KEY_NAME));
+            if (keyRecord && keyRecord.value) {
+                const jwk = keyRecord.value;
+                const key = await window.crypto.subtle.importKey('jwk', jwk, { name: 'AES-GCM' }, true, ['encrypt', 'decrypt']);
+                resolve(key);
+            } else {
+                const newKey = await window.crypto.subtle.generateKey({ name: 'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt']);
+                const exportedKey = await window.crypto.subtle.exportKey('jwk', newKey);
+                await dbRequest(DATA_STORE, 'readwrite', store => store.put({ key: CRYPTO_KEY_NAME, value: exportedKey }));
+                resolve(newKey);
+            }
+        } catch (error) {
+            console.error("Crypto key initialization failed.", error);
+            reject(error);
+        }
+    });
+    return cryptoKeyPromise;
+};
+
+
+const encrypt = async (jsonString: string): Promise<string> => {
+    const key = await getCryptoKey();
+    const iv = window.crypto.getRandomValues(new Uint8Array(IV_LENGTH));
+    const encodedData = new TextEncoder().encode(jsonString);
+    const encryptedContent = await window.crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, encodedData);
+    const encryptedPackage = new Uint8Array(iv.length + encryptedContent.byteLength);
+    encryptedPackage.set(iv, 0);
+    encryptedPackage.set(new Uint8Array(encryptedContent), iv.length);
+    return arrayBufferToBase64(encryptedPackage.buffer);
+};
+
+const decrypt = async (encryptedBase64: string): Promise<any> => {
+    const key = await getCryptoKey();
+    try {
+        const encryptedPackage = base64ToArrayBuffer(encryptedBase64);
+        const iv = encryptedPackage.slice(0, IV_LENGTH);
+        const encryptedContent = encryptedPackage.slice(IV_LENGTH);
+        const decryptedContent = await window.crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, encryptedContent);
+        return JSON.parse(new TextDecoder().decode(decryptedContent));
+    } catch (error) {
+        console.error('Decryption failed. Data might be corrupt or key mismatched.', error);
+        return null;
+    }
+};
+
+export const cryptoService = {
+    async setEncryptedData(key: string, data: any): Promise<void> {
+        try {
+            // Explicitly stringify the data here to handle potential serialization issues
+            // and ensure we are encrypting a clean JSON string. This prevents issues with
+            // complex state objects from libraries like React, especially for nested data
+            // like mind maps.
+            const jsonString = JSON.stringify(data);
+            const encryptedData = await encrypt(jsonString);
+            await dbRequest(DATA_STORE, 'readwrite', store => store.put({ key, value: encryptedData }));
+        } catch (error) {
+            console.error(`Failed to serialize or encrypt data for key "${key}".`, error);
+        }
+    },
+    async getEncryptedData(key: string): Promise<any | null> {
+        const record = await dbRequest(DATA_STORE, 'readonly', store => store.get(key));
+        if (!record || !record.value) return null;
+        return decrypt(record.value);
+    },
+    async removeEncryptedData(key: string): Promise<void> {
+        await dbRequest(DATA_STORE, 'readwrite', store => store.delete(key));
+    },
+};

vanhri-ai---the-mind-that-builds-worlds/services/emailService.ts

@@ -0,0 +1,57 @@
+
+// @ts-ignore - emailjs is imported from a script tag in index.html, so we tell TypeScript to ignore the missing module declaration.
+const emailjs = window.emailjs;
+
+// --- IMPORTANT: CONFIGURE YOUR EMAIL SERVICE HERE ---
+// 1. Create a free account at https://www.emailjs.com/
+// 2. Add a new service (e.g., Gmail).
+// 3. Create a new email template. It MUST contain the variables {{to_email}} and {{verification_code}} in the body.
+// 4. Find your credentials under "Account" -> "API Keys" (Public Key) and "Email Services" / "Email Templates" (IDs) and paste them below.
+
+const EMAILJS_SERVICE_ID = ''; // PASTE YOUR SERVICE ID HERE
+const EMAILJS_TEMPLATE_ID = ''; // PASTE YOUR TEMPLATE ID HERE
+const EMAILJS_PUBLIC_KEY = ''; // PASTE YOUR PUBLIC KEY HERE
+
+// --- END OF CONFIGURATION ---
+
+
+const isConfigured = !!(EMAILJS_SERVICE_ID && EMAILJS_TEMPLATE_ID && EMAILJS_PUBLIC_KEY && emailjs);
+
+if (isConfigured) {
+    // @ts-ignore
+    emailjs.init({ publicKey: EMAILJS_PUBLIC_KEY });
+} else {
+     console.warn(
+      `%c[Vanhri] Email Service Not Configured%c
+Real email verification is disabled. The verification code will be logged to the console.
+To enable real emails, get your free credentials from emailjs.com and add them to 'services/emailService.ts'.`,
+      'background: #f59e0b; color: #fff; font-weight: bold; padding: 4px 8px; border-radius: 4px;',
+      'color: default;'
+    );
+}
+
+export const emailService = {
+    isConfigured,
+
+    async sendVerificationEmail(to_email: string, verification_code: string): Promise<void> {
+        if (!this.isConfigured) {
+            // This error signals the caller to use a fallback method.
+            throw new Error("Email service is not configured.");
+        }
+
+        const templateParams = {
+            to_email,
+            verification_code,
+        };
+
+        try {
+            // @ts-ignore
+            await emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, templateParams);
+            console.log('Verification email sent successfully via EmailJS.');
+        } catch (error) {
+            console.error('Failed to send verification email via EmailJS:', error);
+            // Let the caller handle this error and inform the user
+            throw new Error("The email service failed to send the verification code.");
+        }
+    },
+};

vanhri-ai---the-mind-that-builds-worlds/services/geminiService.ts

@@ -0,0 +1,222 @@
+
+
+import { GoogleGenAI, Part, GroundingChunk } from "@google/genai";
+import { Message, GroundingCitation } from '../types';
+
+let ai: GoogleGenAI | null = null;
+
+// Lazily initialize the AI client to prevent app crash on load if API key is missing.
+const getAiInstance = (): GoogleGenAI => {
+    if (ai) return ai;
+
+    if (!process.env.API_KEY) {
+        throw new Error("API_KEY environment variable is not set. Please configure it to use AI features.");
+    }
+    
+    ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
+    return ai;
+};
+
+
+function fileToGenerativePart(base64: string, mimeType: string): Part {
+  return {
+    inlineData: {
+      data: base64,
+      mimeType,
+    },
+  };
+}
+
+function isGroundingChunk(chunk: any): chunk is GroundingChunk {
+    return chunk && typeof chunk.web?.uri === 'string' && typeof chunk.web?.title === 'string';
+}
+
+export async function generateJson(
+    prompt: string, 
+    persona: string,
+    schema: any
+): Promise<{ json: any | null; error?: string }> {
+    try {
+        const ai = getAiInstance();
+        const model = 'gemini-2.5-flash';
+        
+        const response = await ai.models.generateContent({
+            model: model,
+            contents: prompt,
+            config: {
+                systemInstruction: persona,
+                responseMimeType: 'application/json',
+                responseSchema: schema,
+            }
+        });
+        
+        let jsonStr = response.text.trim();
+        
+        // Sometimes the model might still wrap the JSON in markdown, so we strip it.
+        const fenceRegex = /^```(?:json)?\s*\n?(.*?)\n?\s*```$/s;
+        const match = jsonStr.match(fenceRegex);
+        if (match && match[1]) {
+            jsonStr = match[1].trim();
+        }
+
+        const json = JSON.parse(jsonStr);
+        return { json };
+
+    } catch (e) {
+        console.error("Gemini API JSON generation failed:", e);
+        const errorMessage = e instanceof Error ? e.message : "Failed to get a valid JSON response from the AI.";
+        return { json: null, error: `I've encountered an error: ${errorMessage}` };
+    }
+}
+
+
+export async function* generateTextStream(
+    prompt: string, 
+    imageBase64: string | null, 
+    history: Message[], 
+    persona: string,
+    notebookParts: Part[],
+    options: { useSearch?: boolean; responseMimeType?: string } = {}
+): AsyncGenerator<{ text?: string; citations?: GroundingCitation[] }> {
+    try {
+        const ai = getAiInstance();
+        const model = 'gemini-2.5-flash';
+        
+        const contents = history
+          .map(msg => {
+            const parts: Part[] = [];
+            
+            // Add text part if it's not empty.
+            if (msg.text) {
+              parts.push({ text: msg.text });
+            }
+            
+            // Add image part if it exists (for user-uploaded images).
+            if (msg.image) {
+              // Expects data URI format: "data:image/jpeg;base64,..."
+              const match = msg.image.match(/data:(.*);base64,(.*)/);
+              if (match && match[1] && match[2]) {
+                const mimeType = match[1];
+                const base64Data = match[2];
+                parts.push(fileToGenerativePart(base64Data, mimeType));
+              }
+            }
+            
+            // Add generated images to history for model messages
+            if (msg.sender === 'ai' && msg.generatedImages && msg.generatedImages.length > 0) {
+                for (const imgBase64 of msg.generatedImages) {
+                    // Assuming they are JPEGs as per generateImage service
+                    parts.push(fileToGenerativePart(imgBase64, 'image/jpeg'));
+                }
+            }
+            
+            // Don't add a history item if it has no valid parts
+            if (parts.length === 0) {
+                return null;
+            }
+
+            return {
+              role: msg.sender === 'user' ? 'user' : 'model',
+              parts: parts
+            };
+          })
+          .filter(Boolean) as any[]; // Filter out nulls
+        
+        const currentTurnParts: Part[] = [];
+
+        // Add notebook parts first
+        if (notebookParts && notebookParts.length > 0) {
+            currentTurnParts.push(...notebookParts);
+        }
+        
+        if (prompt) {
+            currentTurnParts.push({ text: prompt });
+        }
+        if (imageBase64) {
+            currentTurnParts.push(fileToGenerativePart(imageBase64, 'image/jpeg'));
+        }
+
+        if (currentTurnParts.length === 0) {
+            yield { text: "Please provide a prompt or an image."};
+            return;
+        }
+        
+        contents.push({ role: 'user', parts: currentTurnParts });
+
+        const config: any = {
+          systemInstruction: persona,
+        };
+        if (options.useSearch) {
+            config.tools = [{googleSearch: {}}];
+        }
+        if (options.responseMimeType) {
+            config.responseMimeType = options.responseMimeType;
+        }
+
+        const result = await ai.models.generateContentStream({
+            model: model,
+            contents,
+            config: config
+        });
+        
+        let citationsSent = false;
+        for await (const chunk of result) {
+            const text = chunk.text;
+            
+            if (options.useSearch) {
+                const groundingMetadata = chunk.candidates?.[0]?.groundingMetadata;
+                if (groundingMetadata?.groundingChunks && !citationsSent) {
+                    const citations: GroundingCitation[] = groundingMetadata.groundingChunks
+                        .filter(isGroundingChunk)
+                        .map(c => ({ uri: c.web.uri, title: c.web.title }));
+                    
+                    if (citations.length > 0) {
+                        citationsSent = true;
+                        yield { text, citations };
+                        continue;
+                    }
+                }
+            }
+            
+            if (text) {
+                yield { text };
+            }
+        }
+    } catch (e) {
+        console.error("Gemini API call failed:", e);
+        const errorMessage = e instanceof Error ? e.message : "Failed to get a response from the AI.";
+        yield { text: `I've encountered an error: ${errorMessage}` };
+    }
+}
+
+
+export async function generateImage(prompt: string, numberOfImages: number = 1): Promise<string[]> {
+    if (!prompt) {
+        throw new Error("A prompt is required to generate an image.");
+    }
+
+    try {
+        const ai = getAiInstance();
+        const response = await ai.models.generateImages({
+            model: 'imagen-3.0-generate-002',
+            prompt: prompt,
+            config: { numberOfImages, outputMimeType: 'image/jpeg' },
+        });
+
+        if (!response.generatedImages || response.generatedImages.length === 0) {
+            throw new Error("The AI did not return any images.");
+        }
+
+        const images = response.generatedImages.map(img => img.image?.imageBytes).filter(Boolean) as string[];
+
+        if (images.length === 0) {
+             throw new Error("The AI did not return any images with valid data.");
+        }
+
+        return images;
+    } catch (e) {
+        console.error("Gemini Image Generation API call failed:", e);
+        const errorMessage = e instanceof Error ? e.message : "Failed to generate images. The model may have refused the prompt.";
+        throw new Error(errorMessage);
+    }
+}

vanhri-ai---the-mind-that-builds-worlds/services/ttsService.ts

@@ -0,0 +1,85 @@
+class TTSService {
+  private synth: SpeechSynthesis | null = null;
+  public isSupported: boolean = false;
+  private voices: SpeechSynthesisVoice[] = [];
+  private currentUtterance: SpeechSynthesisUtterance | null = null;
+
+  constructor() {
+    // Make the check more robust to handle environments where the object exists but is null.
+    if ('speechSynthesis' in window && window.speechSynthesis) {
+      this.isSupported = true;
+      this.synth = window.speechSynthesis;
+      // Voices load asynchronously. We must wait for the `voiceschanged` event.
+      if (this.synth.onvoiceschanged !== undefined) {
+          this.synth.onvoiceschanged = () => this.loadVoices();
+      }
+      // In some browsers, the event might have already fired, so we also check on the first speak call.
+    } else {
+        console.warn("Text-to-speech is not supported by this browser or is not available.");
+    }
+  }
+
+  private loadVoices() {
+      if (!this.synth) return;
+      this.voices = this.synth.getVoices();
+  }
+
+  speak({ text, onEnd }: { text: string; onEnd?: () => void }) {
+    if (!this.isSupported || !text || !this.synth) {
+      onEnd?.();
+      return;
+    }
+    
+    // If the synth is speaking, cancel it before starting new speech.
+    if (this.synth.speaking) {
+        this.synth.cancel();
+    }
+    
+    // If voices haven't loaded yet (e.g., on first run), try loading them now.
+    if (this.voices.length === 0) {
+        this.loadVoices();
+    }
+
+    this.currentUtterance = new SpeechSynthesisUtterance(text);
+    
+    // Use the cached voices array to find a preferred voice.
+    const preferredVoice = this.voices.find(voice => voice.name.includes('Google') && voice.lang.startsWith('en')) || this.voices.find(voice => voice.lang.startsWith('en-US'));
+    if (preferredVoice) {
+        this.currentUtterance.voice = preferredVoice;
+    }
+    
+    this.currentUtterance.onend = () => {
+        onEnd?.();
+        this.currentUtterance = null;
+    };
+    
+    this.currentUtterance.onerror = (event: SpeechSynthesisErrorEvent) => {
+        console.error('SpeechSynthesisUtterance.onerror:', event.error);
+        // Errors like 'canceled' or 'interrupted' are often normal if we called cancel() just before.
+        // We still call onEnd() to ensure the UI state is reset correctly.
+        onEnd?.();
+        this.currentUtterance = null;
+    };
+
+    try {
+        // The most direct approach is to speak immediately and handle potential 'interrupted' errors in the onerror handler.
+        this.synth.speak(this.currentUtterance);
+    } catch(e) {
+        console.error("Speech synthesis failed.", e);
+        onEnd?.();
+        this.currentUtterance = null;
+    }
+  }
+
+  cancel() {
+    if (!this.isSupported || !this.synth) return;
+    // Check if speaking before cancelling to avoid errors.
+    if(this.synth.speaking) {
+      this.synth.cancel();
+    }
+  }
+}
+
+export const ttsService = new TTSService();
+
+// The global handler is now managed inside the class, so this is no longer needed.

vanhri-ai---the-mind-that-builds-worlds/sw.js

@@ -0,0 +1,70 @@
+
+const CACHE_NAME = 'vanhri-cache-v1';
+const urlsToCache = [
+  '/',
+  '/index.html',
+  '/index.tsx',
+  'https://cdn.tailwindcss.com',
+  'https://cdn.jsdelivr.net/npm/reactflow@11/dist/style.css',
+  'https://esm.sh/react@18.3.1',
+  'https://esm.sh/react-dom@18.3.1/client'
+];
+
+// Install event: Open a cache and add the URLs to cache to it.
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => {
+        console.log('Opened cache and caching assets');
+        return cache.addAll(urlsToCache);
+      })
+      .catch(err => {
+        console.error('Failed to open cache or cache assets:', err);
+      })
+  );
+});
+
+// Activate event: Clean up old caches to ensure the new version is served.
+self.addEventListener('activate', event => {
+  const cacheWhitelist = [CACHE_NAME];
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (cacheWhitelist.indexOf(cacheName) === -1) {
+            console.log('Deleting old cache:', cacheName);
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+
+// Fetch event: Serve cached content when offline.
+self.addEventListener('fetch', event => {
+  // We only want to cache GET requests.
+  if (event.request.method !== 'GET') {
+    return;
+  }
+
+  event.respondWith(
+    caches.match(event.request)
+      .then(response => {
+        // If the request is in the cache, return the cached response.
+        if (response) {
+          return response;
+        }
+
+        // If the request is not in the cache, fetch it from the network.
+        return fetch(event.request).then(
+          networkResponse => {
+            // We don't cache responses from the API or other dynamic resources here.
+            // This basic service worker is for the app shell.
+            return networkResponse;
+          }
+        );
+      })
+  );
+});

vanhri-ai---the-mind-that-builds-worlds/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "paths": {
+      "@/*" :  ["./*"]
+    }
+  }
+}

vanhri-ai---the-mind-that-builds-worlds/types.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+
+export interface GroundingCitation {
+  uri: string;
+  title: string;
+}
+
+export interface Memory {
+  id: string;
+  title: string;
+  summary: string;
+}
+
+export interface NotebookSource {
+  id: string;
+  name: string;
+  content: string; // Data URL of the file content
+  mimeType: string;
+}
+
+export interface MindMapNode {
+  id: string;
+  position: { x: number; y: number };
+  data: { label: string };
+  type?: string;
+  style?: React.CSSProperties;
+}
+
+export interface MindMapEdge {
+  id: string;
+  source: string;
+  target: string;
+  animated?: boolean;
+}
+
+export interface MindMapData {
+  nodes: MindMapNode[];
+  edges: MindMapEdge[];
+}
+
+export interface ChartDataPoint {
+  label: string; // The label for the data point (e.g., 'Q1', 'Jan')
+  values: number[]; // Array of numerical values corresponding to the keys
+}
+
+export interface ChartKey {
+  name: string; // Name of the data series (e.g., 'Sales')
+  color: string; // Hex color for the series
+}
+
+export interface ChartData {
+  type: 'bar' | 'line' | 'pie';
+  title: string;
+  data: ChartDataPoint[];
+  keys: ChartKey[]; // Defines what's in the 'values' array
+}
+
+export interface Message {
+  id:string;
+  sender: 'user' | 'ai';
+  text: string;
+  image?: string | null;
+  memory?: Memory;
+  generatedImages?: string[];
+  generated3DCode?: string;
+  groundingCitations?: GroundingCitation[];
+  mindMap?: MindMapData | null;
+  chartData?: ChartData | null;
+  isAgent?: boolean;
+}
+
+export interface ProactiveSuggestion {
+    id: string;
+    text: string;
+    actionText: string;
+    action: string;
+}
+
+// Authentication Types
+export type Auth =
+  | { status: 'loading' }
+  | { status: 'landing' }
+  | { status: 'unauthenticated' }
+  | { status: 'signup' }
+  | { status: 'verifying'; email: string; verificationCode: string | null; emailServiceConfigured: boolean }
+  | { status: 'authenticated'; user: { id: string; email: string } }
+  | { status: 'guest'; user: {id: string; email: string } };

vanhri-ai---the-mind-that-builds-worlds/vite.config.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});