fix my app

components/modals.js

@@ -26,14 +26,21 @@ class CustomModals extends HTMLElement {
                     transform: translateY(-2.5rem);
                     transition: transform 0.25s ease;
                 }
+                .modal:not(.opacity-0) {
+                    opacity: 1;
+                    pointer-events: auto;
+                }
+                .modal-content:not(.translate-y-10) {
+                    transform: translateY(0);
+                }
             </style>
             
             <!-- Loading Modal -->
             <div id="loading-modal" class="modal">
                 <div class="modal-content text-center">
                     <div class="animate-spin h-12 w-12 text-indigo-600 mx-auto">
-                        <svg xmlns="http://www.gstatic.com/firebasejs/11.6.1/firebase-app.js" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
-</div>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                    </div>
                     <p id="loading-message" class="text-sm font-medium text-slate-700 mt-4">Loading...</p>
                 </div>
             </div>

index.html

@@ -87,1120 +87,12 @@
     <script src="components/sidebar.js"></script>
     <script src="components/modals.js"></script>
     <script src="script.js"></script>
-    
-    <script>
-        // --- App State & Firebase Globals ---
-        let app, db, auth, userId, agentConfigDocRef;
-        let isProfileSidebarOpen = false;
-        let testChatHistory = []; // State for test chat
-
-        const defaultAppState = {
-            agentName: "Creative Writer",
-            description: "A helpful assistant for Python code.",
-            instructions: "You are a helpful AI assistant...",
-            modelConfig: {
-                selectedModel: 'llama3-70b',
-                apiKeys: { 'qhy-pro': '', 'gemini-2.5': '' }
-            },
-            knowledge: {
-                prioritize: false,
-                urls: ['https://qhy.sync/docs/main']
-            },
-            capabilities: {
-                codeInterpreter: false,
-                imageGenerator: true
-            },
-            prompts: [
-                { title: "Explain a concept", message: "\"Explain quantum computing...\"" },
-                { title: "Write some code", message: "\"Write a Python function...\"" }
-            ],
-            bio: "",
-            displayName: "",
-            photoURL: ""
-        };
-
-        let appState = JSON.parse(JSON.stringify(defaultAppState));
-// --- DOM Selectors (will be assigned in selectDOMElements) ---
-        let agentNameInput, agentDescriptionInput, agentInstructionsInput,
-            listenInstructionsBtn, ttsPlayer, // NEW
-            modelConfigContainer, knowledgeListContainer, knowledgeEmptyState,
-            knowledgeUrlInput, addKnowledgeUrlBtn, prioritizeKnowledgeToggle,
-            codeInterpreterToggle, testCodeInterpreterBtn, // MODIFIED
-            imageGeneratorToggle, testImageGenBtn,
-            promptListContainer, promptEmptyState, addPromptBtn, 
-            saveChangesBtn, deleteAgentBtn, suggestNameBtn, 
-            suggestDescriptionBtn, generateInstructionsBtn, suggestPromptsBtn, 
-            loadingModal, loadingMessage, promptModal, promptModalTitle, 
-            promptModalCloseBtn, promptModalCancelBtn, promptModalForm, 
-            promptModalSaveBtn, promptModalEditIndex, promptModalTitleInput, 
-            promptModalMessageInput, deleteAgentModal, deleteAgentCancelBtn, 
-            deleteAgentConfirmBtn,
-            // UI Elements
-            menuBtn, profileToggleBtn, profileHeaderIcon, profileHeaderImg,
-            profileSidebar, sidebarOverlay, profileSidebarCloseBtn,
-            profileImgPreview, profileImgUrlInput, profileDisplayNameInput,
-            profileBioInput, suggestBioBtn, saveProfileBtn, googleSigninBtn, 
-            githubSigninBtn, signOutBtn, socialLoginContainer, signOutContainer,
-            geminiSettingsModal, geminiSettingsCloseBtn, geminiSettingsSaveBtn,
-            // Test Agent Elements
-            testAgentBtn, testAgentModal, testAgentCloseBtn, testAgentHistory,
-            testAgentForm, testAgentInput,
-            // Image Gen Modal Elements
-            imageGenModal, imageGenCloseBtn, imageGenForm, imageGenInput, 
-            imageGenResultContainer, imageGenSpinner, imageGenResult, imageGenError,
-            // NEW: Code Test Modal Elements
-            codeTestModal, codeTestCloseBtn, codeTestGenerateBtn, 
-            codeTestResultContainer, codeTestSpinner, codeTestResult;
-/**
-         * Assign all DOM elements to their variables.
-         */
-        function selectDOMElements() {
-            // Existing Elements
-            agentNameInput = document.getElementById('agent-name');
-            agentDescriptionInput = document.getElementById('agent-description');
-            agentInstructionsInput = document.getElementById('agent-instructions');
-            listenInstructionsBtn = document.getElementById('listen-instructions-btn'); // NEW
-            ttsPlayer = document.getElementById('tts-player'); // NEW
-            modelConfigContainer = document.getElementById('model-config-container');
-            knowledgeListContainer = document.getElementById('knowledge-list-container');
-            knowledgeEmptyState = document.getElementById('knowledge-empty-state');
-            knowledgeUrlInput = document.getElementById('knowledge-url-input');
-            addKnowledgeUrlBtn = document.getElementById('add-knowledge-url-btn');
-            prioritizeKnowledgeToggle = document.getElementById('prioritize-knowledge');
-            codeInterpreterToggle = document.getElementById('code-interpreter');
-            testCodeInterpreterBtn = document.getElementById('test-code-interpreter-btn'); // NEW
-            imageGeneratorToggle = document.getElementById('image-generator');
-            testImageGenBtn = document.getElementById('test-image-gen-btn');
-            promptListContainer = document.getElementById('prompt-list-container');
-            promptEmptyState = document.getElementById('prompt-empty-state');
-            addPromptBtn = document.getElementById('add-prompt-btn');
-            saveChangesBtn = document.getElementById('save-changes-btn');
-            deleteAgentBtn = document.getElementById('delete-agent-btn');
-            suggestNameBtn = document.getElementById('suggest-name-btn');
-            suggestDescriptionBtn = document.getElementById('suggest-description-btn');
-            generateInstructionsBtn = document.getElementById('generate-instructions-btn');
-            suggestPromptsBtn = document.getElementById('suggest-prompts-btn');
-            loadingModal = document.getElementById('loading-modal');
-            loadingMessage = document.getElementById('loading-message');
-            promptModal = document.getElementById('prompt-modal');
-            promptModalTitle = document.getElementById('prompt-modal-title');
-            promptModalCloseBtn = document.getElementById('prompt-modal-close-btn');
-            promptModalCancelBtn = document.getElementById('prompt-modal-cancel-btn');
-            promptModalForm = document.getElementById('prompt-modal-form');
-            promptModalSaveBtn = document.getElementById('prompt-modal-save-btn');
-            promptModalEditIndex = document.getElementById('prompt-modal-edit-index');
-            promptModalTitleInput = document.getElementById('prompt-modal-title-input');
-            promptModalMessageInput = document.getElementById('prompt-modal-message-input');
-            deleteAgentModal = document.getElementById('delete-agent-modal');
-            deleteAgentCancelBtn = document.getElementById('delete-agent-cancel-btn');
-            deleteAgentConfirmBtn = document.getElementById('delete-agent-confirm-btn');
-
-            // Profile & Menu Elements
-            menuBtn = document.getElementById('menu-btn');
-            profileToggleBtn = document.getElementById('profile-toggle-btn');
-            profileHeaderIcon = document.getElementById('profile-header-icon');
-            profileHeaderImg = document.getElementById('profile-header-img');
-            profileSidebar = document.getElementById('profile-sidebar');
-            sidebarOverlay = document.getElementById('sidebar-overlay');
-            profileSidebarCloseBtn = document.getElementById('profile-sidebar-close-btn');
-            profileImgPreview = document.getElementById('profile-img-preview');
-            profileImgUrlInput = document.getElementById('profile-img-url-input');
-            profileDisplayNameInput = document.getElementById('profile-display-name-input');
-            profileBioInput = document.getElementById('profile-bio-input');
-            suggestBioBtn = document.getElementById('suggest-bio-btn');
-            saveProfileBtn = document.getElementById('save-profile-btn');
-            googleSigninBtn = document.getElementById('google-signin-btn');
-            githubSigninBtn = document.getElementById('github-signin-btn');
-            signOutBtn = document.getElementById('sign-out-btn');
-            socialLoginContainer = document.getElementById('social-login-container');
-            signOutContainer = document.getElementById('sign-out-container');
-            geminiSettingsModal = document.getElementById('gemini-settings-modal');
-            geminiSettingsCloseBtn = document.getElementById('gemini-settings-close-btn');
-            geminiSettingsSaveBtn = document.getElementById('gemini-settings-save-btn');
-            
-            // Test Agent Elements
-            testAgentBtn = document.getElementById('test-agent-btn');
-            testAgentModal = document.getElementById('test-agent-modal');
-            testAgentCloseBtn = document.getElementById('test-agent-close-btn');
-            testAgentHistory = document.getElementById('test-agent-history');
-            testAgentForm = document.getElementById('test-agent-form');
-            testAgentInput = document.getElementById('test-agent-input');
-            
-            // Image Gen Modal Elements
-            imageGenModal = document.getElementById('image-gen-modal');
-            imageGenCloseBtn = document.getElementById('image-gen-close-btn');
-            imageGenForm = document.getElementById('image-gen-form');
-            imageGenInput = document.getElementById('image-gen-input');
-            imageGenResultContainer = document.getElementById('image-gen-result-container');
-            imageGenSpinner = document.getElementById('image-gen-spinner');
-            imageGenResult = document.getElementById('image-gen-result');
-            imageGenError = document.getElementById('image-gen-error');
-
-            // NEW: Code Test Modal Elements
-            codeTestModal = document.getElementById('code-test-modal');
-            codeTestCloseBtn = document.getElementById('code-test-close-btn');
-            codeTestGenerateBtn = document.getElementById('code-test-generate-btn');
-            codeTestResultContainer = document.getElementById('code-test-result-container');
-            codeTestSpinner = document.getElementById('code-test-spinner');
-            codeTestResult = document.getElementById('code-test-result');
-        }
-
-
-        // --- Render Functions ---
-
-        /** Initializes the UI from the current appState */
-        function initializeAppUI() {
-            if (!agentNameInput) {
-                console.warn("DOM elements not ready, skipping UI init.");
-                return; // Guard clause
-            }
-
-            // 1. Populate Agent Config Form
-            agentNameInput.value = appState.agentName;
-            agentDescriptionInput.value = appState.description;
-            agentInstructionsInput.value = appState.instructions;
-            prioritizeKnowledgeToggle.checked = appState.knowledge.prioritize;
-            
-            // Handle Code Interpreter Toggle and Test Button
-            codeInterpreterToggle.checked = appState.capabilities.codeInterpreter;
-            if (appState.capabilities.codeInterpreter) {
-                testCodeInterpreterBtn.disabled = false;
-                testCodeInterpreterBtn.classList.remove('btn-disabled', 'text-slate-400');
-                testCodeInterpreterBtn.classList.add('text-indigo-600', 'hover:bg-indigo-50');
-            } else {
-                testCodeInterpreterBtn.disabled = true;
-                testCodeInterpreterBtn.classList.add('btn-disabled', 'text-slate-400');
-                testCodeInterpreterBtn.classList.remove('text-indigo-600', 'hover:bg-indigo-50');
-            }
-            
-            // Handle Image Generator Toggle and Test Button
-            imageGeneratorToggle.checked = appState.capabilities.imageGenerator;
-            if (appState.capabilities.imageGenerator) {
-                testImageGenBtn.disabled = false;
-                testImageGenBtn.classList.remove('btn-disabled', 'text-slate-400');
-                testImageGenBtn.classList.add('text-indigo-600', 'hover:bg-indigo-50');
-            } else {
-                testImageGenBtn.disabled = true;
-                testImageGenBtn.classList.add('btn-disabled', 'text-slate-400');
-                testImageGenBtn.classList.remove('text-indigo-600', 'hover:bg-indigo-50');
-            }
-
-
-            if (appState.modelConfig?.selectedModel) {
-                 const modelInput = document.querySelector(`input[name="model-selection"][value="${appState.modelConfig.selectedModel}"]`);
-                 if (modelInput) modelInput.checked = true;
-            }
-            document.getElementById('api-key-qhy-pro-input').value = appState.modelConfig?.apiKeys?.['qhy-pro'] || '';
-            document.getElementById('api-key-gemini-2.5-input').value = appState.modelConfig?.apiKeys?.['gemini-2.5'] || '';
-            
-            renderModelConfig();
-            renderKnowledgeList();
-            renderPromptList();
-
-            // 2. Populate Profile Sidebar
-            const currentUser = auth.currentUser;
-            const displayName = currentUser?.displayName || appState.displayName || '';
-            const photoURL = currentUser?.photoURL || appState.photoURL || '';
-            const bio = appState.bio || '';
-
-            profileDisplayNameInput.value = displayName;
-            profileImgUrlInput.value = photoURL;
-            profileBioInput.value = bio;
-
-            // Update image previews
-            updateImagePreviews(photoURL);
-
-            // 3. Update Auth-dependent UI
-            if (currentUser) {
-                if (currentUser.isAnonymous) {
-                    socialLoginContainer.classList.remove('hidden');
-                    signOutContainer.classList.add('hidden');
-                    saveProfileBtn.classList.add('btn-disabled');
-                    saveProfileBtn.disabled = true;
-                    saveProfileBtn.title = "Sign in to save profile";
-                } else {
-                    socialLoginContainer.classList.add('hidden');
-                    signOutContainer.classList.remove('hidden');
-                    saveProfileBtn.classList.remove('btn-disabled');
-                    saveProfileBtn.disabled = false;
-                    saveProfileBtn.title = "";
-                }
-            }
-        }
-        // ... (other render functions: updateImagePreviews, renderKnowledgeList, etc. - unchanged) ...
-        function updateImagePreviews(url) {
-            const validUrl = url && (url.startsWith('http') || url.startsWith('data:image'));
-            const userIconSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>`;
-            if (validUrl) {
-                profileHeaderImg.src = url;
-                profileHeaderImg.classList.remove('hidden');
-                profileHeaderIcon.classList.add('hidden');
-            } else {
-                profileHeaderImg.classList.add('hidden');
-                profileHeaderIcon.classList.remove('hidden');
-            }
-            if (validUrl) {
-                profileImgPreview.src = url;
-                profileImgPreview.classList.remove('bg-slate-200', 'text-slate-400');
-                profileImgPreview.innerHTML = '';
-            } else {
-                profileImgPreview.src = '';
-                profileImgPreview.classList.add('bg-slate-200', 'text-slate-400');
-                profileImgPreview.innerHTML = userIconSvg;
-            }
-        }
-        function renderKnowledgeList() {
-            if (!knowledgeListContainer) return;
-            const items = knowledgeListContainer.querySelectorAll('.knowledge-item');
-            items.forEach(item => item.remove());
-            const urls = appState.knowledge?.urls || [];
-            if (urls.length === 0) {
-                if (knowledgeEmptyState) knowledgeEmptyState.classList.remove('hidden');
-            } else {
-                if (knowledgeEmptyState) knowledgeEmptyState.classList.add('hidden');
-                urls.forEach((url, index) => {
-                    const div = document.createElement('div');
-                    div.className = 'knowledge-item flex items-center justify-between rounded-md border border-slate-200 bg-white p-3';
-                    div.innerHTML = `<span class="text-sm text-slate-800 truncate" title="${url}">${url}</span><button class="ml-4 flex-shrink-0 p-1 text-slate-400 hover:text-red-600 rounded-full hover:bg-red-50" data-index="${index}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none"><polyline points="3 6 5 6 21 6"></polyline><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"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></button>`;
-                    knowledgeListContainer.appendChild(div);
-                });
-            }
-        }
-        function renderPromptList() {
-            if (!promptListContainer) return;
-            const items = promptListContainer.querySelectorAll('.prompt-item');
-            items.forEach(item => item.remove());
-            const prompts = appState.prompts || [];
-            if (prompts.length === 0) {
-                if (promptEmptyState) promptEmptyState.classList.remove('hidden');
-            } else {
-                if (promptEmptyState) promptEmptyState.classList.add('hidden');
-                prompts.forEach((prompt, index) => {
-                    const div = document.createElement('div');
-                    div.className = 'prompt-item rounded-md border border-slate-200 p-4';
-                    div.innerHTML = `<div class="flex justify-between items-center mb-2"><p class="text-sm font-semibold text-slate-800">${prompt.title}</p><div><button class="edit-prompt-btn p-1 text-slate-400 hover:text-slate-700 rounded-full hover:bg-slate-100" data-index="${index}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button><button class="delete-prompt-btn ml-1 p-1 text-slate-400 hover:text-red-600 rounded-full hover:bg-red-50" data-index="${index}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none"><polyline points="3 6 5 6 21 6"></polyline><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"></path></svg></button></div></div><p class="text-sm text-slate-600 bg-slate-50 p-3 rounded">${prompt.message}</p>`;
-                    promptListContainer.appendChild(div);
-                });
-            }
-        }
-        function renderModelConfig() {
-            const qhyProEl = document.getElementById('api-key-qhy-pro');
-            const geminiEl = document.getElementById('api-key-gemini-2.5');
-            if (!qhyProEl || !geminiEl) return;
-            
-            qhyProEl.classList.add('hidden');
-            geminiEl.classList.add('hidden');
-            const selected = appState.modelConfig?.selectedModel;
-            if (selected === 'qhy-pro') {
-                qhyProEl.classList.remove('hidden');
-            } else if (selected === 'gemini-2.5') {
-                geminiEl.classList.remove('hidden');
-            }
-        }
-function renderTestChatMessage(sender, text) {
-            const messageDiv = document.createElement('div');
-            messageDiv.className = `chat-message ${sender} mb-2`;
-            let html = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
-            html = html.replace(/`(.*?)`/g, '<code class="bg-slate-200 px-1 py-0.5 rounded text-sm">$1</code>');
-            html = html.replace(/\n/g, '<br>');
-            messageDiv.innerHTML = html;
-            testAgentHistory.appendChild(messageDiv);
-            testAgentHistory.scrollTop = testAgentHistory.scrollHeight;
-        }
-        function setChatTyping(isTyping) {
-            let typingEl = document.getElementById('typing-indicator');
-            if (isTyping) {
-                if (!typingEl) {
-                    typingEl = document.createElement('div');
-                    typingEl.id = 'typing-indicator';
-                    typingEl.className = 'chat-message model typing';
-                    typingEl.textContent = 'typing...';
-                    testAgentHistory.appendChild(typingEl);
-                    testAgentHistory.scrollTop = testAgentHistory.scrollHeight;
-                }
-            } else {
-                if (typingEl) {
-                    typingEl.remove();
-                }
-            }
-        }
-
-        // --- Modal & Sidebar Functions ---
-
-        function showModal(modalEl) {
-            modalEl.classList.remove('opacity-0', 'pointer-events-none');
-            modalEl.querySelector('.modal-content').classList.remove('-translate-y-10');
-        }
-        function hideModal(modalEl) {
-            modalEl.classList.add('opacity-0', 'pointer-events-none');
-            modalEl.querySelector('.modal-content').classList.add('-translate-y-10');
-        }
-        function showLoading(message = "Generating...") {
-            loadingMessage.textContent = message;
-            loadingModal.classList.remove('opacity-0', 'pointer-events-none');
-        }
-        function hideLoading() {
-            loadingModal.classList.add('opacity-0', 'pointer-events-none');
-        }
-        function showPromptModal(mode = 'add', index = -1) {
-            if (mode === 'edit' && index > -1) {
-                const prompt = appState.prompts[index];
-                promptModalTitle.textContent = 'Edit Prompt';
-                promptModalSaveBtn.textContent = 'Save Changes';
-                promptModalEditIndex.value = index;
-                promptModalTitleInput.value = prompt.title;
-                promptModalMessageInput.value = prompt.message;
-            } else {
-                promptModalTitle.textContent = 'Add New Prompt';
-                promptModalSaveBtn.textContent = 'Save Prompt';
-                promptModalForm.reset();
-                promptModalEditIndex.value = -1;
-            }
-            showModal(promptModal);
-        }
-        
-        function toggleProfileSidebar() {
-            isProfileSidebarOpen = !isProfileSidebarOpen;
-            if (isProfileSidebarOpen) {
-                profileSidebar.classList.add('open');
-                sidebarOverlay.classList.remove('opacity-0', 'pointer-events-none');
-            } else {
-                profileSidebar.classList.remove('open');
-                sidebarOverlay.classList.add('opacity-0', 'pointer-events-none');
-            }
-        }
-        
-        function openTestAgentModal() {
-            testChatHistory = []; // Reset history
-            testAgentHistory.innerHTML = ''; // Clear UI
-            renderTestChatMessage('model', 'Hi! I\'m ready to test. My instructions are set. Ask me anything.');
-            showModal(testAgentModal);
-        }
-        
-        function openImageGenModal() {
-            imageGenInput.value = '';
-            imageGenResult.src = '';
-            imageGenResult.alt = '';
-            imageGenError.textContent = '';
-            imageGenResultContainer.classList.remove('loading');
-            imageGenResult.classList.add('hidden');
-            imageGenError.classList.add('hidden');
-            showModal(imageGenModal);
-        }
-
-        // NEW: Open Code Test Modal
-        function openCodeTestModal() {
-            codeTestResultContainer.classList.remove('loading');
-            codeTestResult.textContent = '// Click "Generate Example" to see a code snippet...';
-            codeTestSpinner.style.display = 'none';
-            codeTestResult.style.display = 'block';
-            showModal(codeTestModal);
-        }
-        // --- Gemini API Callers ---
-        
-        // Text Generation
-        async function callGeminiApi(payload, maxRetries = 5) {
-            const apiKey = "";
-            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;
-            let attempt = 0, delay = 1000;
-            while (attempt < maxRetries) {
-                try {
-                    const response = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
-                    if (response.status === 429 || response.status >= 500) throw new Error(`API Error: ${response.status}`);
-                    if (!response.ok) { const errorResult = await response.json(); console.error("Gemini API Error:", errorResult); throw new Error(`Gemini API Error: ${errorResult.error?.message || response.statusText}`); }
-                    const result = await response.json();
-                    const candidate = result.candidates?.[0];
-                    if (!candidate) throw new Error("Invalid API response: No candidates found.");
-                    if (payload.generationConfig?.responseMimeType === "application/json") {
-                        const text = candidate.content?.parts?.[0]?.text;
-                        if (!text) throw new Error("Invalid API response: No text part found for JSON.");
-                        return text;
-                    }
-                    const text = candidate.content?.parts?.[0]?.text;
-                    if (typeof text !== 'string') throw new Error("Invalid API response: No text content found.");
-                    return text;
-                } catch (error) {
-                    console.warn(`Gemini API call attempt ${attempt + 1} failed: ${error.message}`);
-                    attempt++;
-                    if (attempt >= maxRetries) throw new Error(`Gemini API failed after ${maxRetries} attempts: ${error.message}`);
-                    await new Promise(resolve => setTimeout(resolve, delay));
-                    delay *= 2;
-                }
-            }
-        }
-        // Image Generation
-        async function callImagenApi(userPrompt, maxRetries = 5) {
-            const apiKey = ""; // API key is handled by the environment
-            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/imagen-3.0-generate-002:predict?key=${apiKey}`;
-            
-            const payload = { 
-                instances: { prompt: userPrompt }, 
-                parameters: { "sampleCount": 1 } 
-            };
-            
-            let attempt = 0, delay = 1000;
-            while (attempt < maxRetries) {
-                try {
-                    const response = await fetch(apiUrl, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify(payload)
-                    });
-
-                    if (response.status === 429 || response.status >= 500) {
-                        throw new Error(`API Error: ${response.status}`);
-                    }
-                    if (!response.ok) {
-                        const errorResult = await response.json();
-                        console.error("Imagen API Error:", errorResult);
-                        throw new Error(`Imagen API Error: ${errorResult.error?.message || response.statusText}`);
-                    }
-                    
-                    const result = await response.json();
-                    
-                    if (result.predictions && result.predictions.length > 0 && result.predictions[0].bytesBase64Encoded) {
-                        return `data:image/png;base64,${result.predictions[0].bytesBase64Encoded}`;
-                    } else {
-                        throw new Error("Invalid API response: No image data found.");
-                    }
-
-                } catch (error) {
-                    console.warn(`Imagen API call attempt ${attempt + 1} failed: ${error.message}`);
-                    attempt++;
-                    if (attempt >= maxRetries) {
-                        throw new Error(`Imagen API failed after ${maxRetries} attempts: ${error.message}`);
-                    }
-                    await new Promise(resolve => setTimeout(resolve, delay));
-                    delay *= 2;
-                }
-            }
-        }
-// NEW: TTS Generation
-        async function callTtsApi(textToSpeak, maxRetries = 5) {
-            const apiKey = "";
-            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-tts:generateContent?key=${apiKey}`;
-            
-            const payload = {
-                contents: [{
-                    parts: [{ text: textToSpeak }]
-                }],
-                generationConfig: {
-                    responseModalities: ["AUDIO"],
-                    speechConfig: {
-                        voiceConfig: {
-                            prebuiltVoiceConfig: { voiceName: "Kore" } // Using 'Kore' voice
-                        }
-                    }
-                },
-                model: "gemini-2.5-flash-preview-tts"
-            };
-
-            let attempt = 0, delay = 1000;
-            while (attempt < maxRetries) {
-                try {
-                    const response = await fetch(apiUrl, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify(payload)
-                    });
-
-                    if (response.status === 429 || response.status >= 500) throw new Error(`API Error: ${response.status}`);
-                    if (!response.ok) { const errorResult = await response.json(); console.error("TTS API Error:", errorResult); throw new Error(`TTS API Error: ${errorResult.error?.message || response.statusText}`); }
-                    
-                    const result = await response.json();
-                    const part = result?.candidates?.[0]?.content?.parts?.[0];
-                    const audioData = part?.inlineData?.data;
-                    const mimeType = part?.inlineData?.mimeType;
-
-                    if (audioData && mimeType && mimeType.startsWith("audio/")) {
-                        const sampleRate = parseInt(mimeType.match(/rate=(\d+)/)[1], 10) || 24000;
-                        return { audioData, sampleRate };
-                    } else {
-                        throw new Error("Invalid API response: No audio data found.");
-                    }
-                } catch (error) {
-                    console.warn(`TTS API call attempt ${attempt + 1} failed: ${error.message}`);
-                    attempt++;
-                    if (attempt >= maxRetries) throw new Error(`TTS API failed after ${maxRetries} attempts: ${error.message}`);
-                    await new Promise(resolve => setTimeout(resolve, delay));
-                    delay *= 2;
-                }
-            }
-        }
-        
-        // --- TTS Audio Helpers ---
-        
-        // NEW: Decodes base64 string to ArrayBuffer
-        function base64ToArrayBuffer(base64) {
-            const binaryString = window.atob(base64);
-            const len = binaryString.length;
-            const bytes = new Uint8Array(len);
-            for (let i = 0; i < len; i++) {
-                bytes[i] = binaryString.charCodeAt(i);
-            }
-            return bytes.buffer;
-        }
-
-        // NEW: Wraps raw PCM data in a WAV header
-        function pcmToWav(pcmData, sampleRate) {
-            const numChannels = 1;
-            const bitsPerSample = 16;
-            const byteRate = sampleRate * numChannels * (bitsPerSample / 8);
-            const blockAlign = numChannels * (bitsPerSample / 8);
-            const dataSize = pcmData.byteLength;
-            const fileSize = 36 + dataSize;
-
-            const buffer = new ArrayBuffer(44 + dataSize);
-            const view = new DataView(buffer);
-
-            // RIFF header
-            writeString(view, 0, 'RIFF');
-            view.setUint32(4, fileSize, true);
-            writeString(view, 8, 'WAVE');
-            
-            // fmt chunk
-            writeString(view, 12, 'fmt ');
-            view.setUint32(16, 16, true); // chunk size
-            view.setUint16(20, 1, true);  // audio format (1 = PCM)
-            view.setUint16(22, numChannels, true);
-            view.setUint32(24, sampleRate, true);
-            view.setUint32(28, byteRate, true);
-            view.setUint16(32, blockAlign, true);
-            view.setUint16(34, bitsPerSample, true);
-            
-            // data chunk
-            writeString(view, 36, 'data');
-            view.setUint32(40, dataSize, true);
-
-            // Write PCM data
-            new Uint8Array(buffer, 44).set(new Uint8Array(pcmData));
-
-            return new Blob([buffer], { type: 'audio/wav' });
-        }
-        
-        // NEW: Helper for pcmToWav
-        function writeString(view, offset, string) {
-            for (let i = 0; i < string.length; i++) {
-                view.setUint8(offset + i, string.charCodeAt(i));
-            }
-        }
-
-        /**
-         * Loads the agent configuration from Firestore.
-         */
-        async function loadAgentConfig() {
-            if (!agentConfigDocRef) return;
-            try {
-                const docSnap = await getDoc(agentConfigDocRef);
-                if (docSnap.exists()) {
-                    console.log("Loaded data from Firestore:", docSnap.data());
-                    appState = { ...defaultAppState, ...docSnap.data() };
-                } else {
-                    console.log("No saved config found, using default.");
-                    appState = { ...defaultAppState };
-                }
-            } catch (error) {
-                console.error("Error loading agent config:", error);
-                appState = { ...defaultAppState };
-            }
-        }
-        
-        // --- Auth Functions (unchanged) ---
-        async function signInWithGoogle() {
-            const provider = new GoogleAuthProvider();
-            try {
-                await signInWithPopup(auth, provider);
-                toggleProfileSidebar();
-            } catch (error) { console.error("Google Sign-In Error:", error); }
-        }
-        async function signInWithGitHub() {
-            const provider = new GithubAuthProvider();
-            try {
-                await signInWithPopup(auth, provider);
-                toggleProfileSidebar();
-            } catch (error) { console.error("GitHub Sign-In Error:", error); }
-        }
-        async function handleSignOut() {
-            try {
-                await signOut(auth);
-                toggleProfileSidebar();
-            } catch (error) { console.error("Sign-Out Error:", error); }
-        }
-        async function handleSaveProfile() {
-            const currentUser = auth.currentUser;
-            if (!currentUser || currentUser.isAnonymous) return;
-            const displayName = profileDisplayNameInput.value.trim();
-            const photoURL = profileImgUrlInput.value.trim();
-            const bio = profileBioInput.value.trim();
-            saveProfileBtn.textContent = "Saving...";
-            saveProfileBtn.disabled = true;
-            saveProfileBtn.classList.add('btn-disabled');
-            try {
-                await updateProfile(currentUser, { displayName, photoURL });
-                const profileData = { displayName, photoURL, bio };
-                await setDoc(agentConfigDocRef, profileData, { merge: true });
-                appState.displayName = displayName;
-                appState.photoURL = photoURL;
-                appState.bio = bio;
-                updateImagePreviews(photoURL);
-                saveProfileBtn.textContent = "Profile Saved!";
-                saveProfileBtn.classList.add('bg-green-600');
-                setTimeout(() => {
-                    saveProfileBtn.textContent = "Save Profile";
-                    saveProfileBtn.disabled = false;
-                    saveProfileBtn.classList.remove('btn-disabled', 'bg-green-600');
-                }, 2000);
-            } catch (error) {
-                console.error("Error saving profile:", error);
-                saveProfileBtn.textContent = "Save Failed";
-                saveProfileBtn.classList.add('bg-red-600');
-                setTimeout(() => {
-                    saveProfileBtn.textContent = "Save Profile";
-                    saveProfileBtn.disabled = false;
-                    saveProfileBtn.classList.remove('btn-disabled', 'bg-red-600');
-                }, 2000);
-            }
-        }
-        
-        // --- AI Feature Handlers ---
-        
-        async function handleSuggestBio() {
-            const agentRole = profileDisplayNameInput.value.trim();
-            if (!agentRole) {
-                profileBioInput.placeholder = "Please enter a Display Name first, then click ✨ Suggest.";
-                return;
-            }
-            const userQuery = `Based on the following name or role, write a short, professional bio (1-2 sentences). Role: "${agentRole}" Return ONLY the bio text, with no preamble or quotes.`;
-            const payload = {
-                contents: [{ parts: [{ text: userQuery }] }],
-                systemInstruction: { parts: [{ text: "You are a professional profile writer. You return only the bio text." }] }
-            };
-            showLoading("Generating bio...");
-            try {
-                const generatedText = await callGeminiApi(payload);
-                const cleanText = generatedText.replace(/["*]/g, "").trim();
-                profileBioInput.value = cleanText;
-            } catch (error) {
-                console.error(error);
-                profileBioInput.value = `Error: ${error.message}`;
-            } finally {
-                hideLoading();
-            }
-        }
-        
-        async function handleTestAgentSend(e) {
-            e.preventDefault();
-            const userMessage = testAgentInput.value.trim();
-            if (!userMessage) return;
-            testAgentInput.value = '';
-            renderTestChatMessage('user', userMessage);
-            setChatTyping(true);
-            testChatHistory.push({ role: "user", parts: [{ text: userMessage }] });
-            let finalSystemInstructions = appState.instructions || "You are a helpful assistant.";
-            let payloadTools = [];
-            if (appState.knowledge.urls.length > 0 && appState.knowledge.prioritize) {
-                finalSystemInstructions += `\n\nCRITICAL KNOWLEDGE: You MUST use the provided Google Search tool to find information to answer the user's query. You must prioritize information from these specific websites: ${appState.knowledge.urls.join(', ')}. If the answer cannot be found in those sources, you should state that.`;
-                payloadTools.push({ "google_search": {} });
-            }
-            const payload = {
-                contents: testChatHistory,
-                systemInstruction: { parts: [{ text: finalSystemInstructions }] }
-            };
-            if (payloadTools.length > 0) {
-                payload.tools = payloadTools;
-            }
-            try {
-                const modelResponse = await callGeminiApi(payload);
-                testChatHistory.push({ role: "model", parts: [{ text: modelResponse }] });
-                setChatTyping(false);
-                renderTestChatMessage('model', modelResponse);
-            } catch (error) {
-                console.error("Test Agent Chat Error:", error);
-                setChatTyping(false);
-                renderTestChatMessage('model', `Sorry, an error occurred: ${error.message}`);
-            }
-        }
-        
-        async function handleImageGenTest(e) {
-            e.preventDefault();
-            const userPrompt = imageGenInput.value.trim();
-            if (!userPrompt) return;
-
-            imageGenResultContainer.classList.add('loading');
-            imageGenError.textContent = '';
-            imageGenError.classList.add('hidden');
-            imageGenResult.classList.add('hidden');
-
-            try {
-                const imageUrl = await callImagenApi(userPrompt);
-                imageGenResult.src = imageUrl;
-                imageGenResult.alt = userPrompt;
-                imageGenResult.classList.remove('hidden');
-            } catch (error) {
-                console.error("Image Gen Test Error:", error);
-                imageGenError.textContent = `Error: ${error.message}`;
-                imageGenError.classList.remove('hidden');
-            } finally {
-                imageGenResultContainer.classList.remove('loading');
-            }
-        }
-        
-        // NEW: Handle TTS for instructions
-        async function handleListenInstructions() {
-            const text = agentInstructionsInput.value.trim();
-            if (!text) return;
-            
-            const icon = listenInstructionsBtn.querySelector('svg');
-            listenInstructionsBtn.disabled = true;
-            icon.classList.add('spinner');
-
-            try {
-                const { audioData, sampleRate } = await callTtsApi(text);
-                const pcmBuffer = base64ToArrayBuffer(audioData);
-                const wavBlob = pcmToWav(pcmBuffer, sampleRate);
-                const audioUrl = URL.createObjectURL(wavBlob);
-                
-                ttsPlayer.src = audioUrl;
-                ttsPlayer.play();
-
-            } catch (error) {
-                console.error("TTS Error:", error);
-            } finally {
-                listenInstructionsBtn.disabled = false;
-                icon.classList.remove('spinner');
-            }
-        }
-        
-        // NEW: Handle Code Interpreter Test
-        async function handleCodeInterpreterTest() {
-            codeTestResultContainer.classList.add('loading');
-            codeTestSpinner.style.display = 'flex';
-            codeTestResult.style.display = 'none';
-
-            const agentRole = appState.agentName.trim() || "a helpful assistant";
-            const userQuery = `You are a code interpreter. Your agent role is "${agentRole}". 
-Generate a simple Python code snippet that demonstrates this role.
-Return ONLY the Python code, inside \`\`\`python ... \`\`\` tags.`;
-            const payload = { 
-                contents: [{ parts: [{ text: userQuery }] }], 
-                systemInstruction: { parts: [{ text: "You are a helpful code generation assistant. You only return code." }] } 
-            };
-            
-            try {
-                const generatedText = await callGeminiApi(payload);
-                // Clean up markdown fences
-                const cleanCode = generatedText.replace(/^```python\n|```$/g, "").trim();
-                codeTestResult.textContent = cleanCode;
-            } catch (error) {
-                console.error("Code Gen Test Error:", error);
-                codeTestResult.textContent = `# Error generating code: ${error.message}`;
-            } finally {
-                codeTestResultContainer.classList.remove('loading');
-                codeTestSpinner.style.display = 'none';
-                codeTestResult.style.display = 'block';
-            }
-        }
-
-
-        /**
-         * Attaches all application event listeners.
-         */
-        function attachEventListeners() {
-            // Agent Config Listeners
-            agentNameInput.addEventListener('input', (e) => appState.agentName = e.target.value);
-            agentDescriptionInput.addEventListener('input', (e) => appState.description = e.target.value);
-            agentInstructionsInput.addEventListener('input', (e) => appState.instructions = e.target.value);
-            listenInstructionsBtn.addEventListener('click', handleListenInstructions); // NEW
-            prioritizeKnowledgeToggle.addEventListener('change', (e) => appState.knowledge.prioritize = e.target.checked);
-            
-            // Code Interpreter Toggle
-            codeInterpreterToggle.addEventListener('change', (e) => { // MODIFIED
-                appState.capabilities.codeInterpreter = e.target.checked;
-                if (e.target.checked) {
-                    testCodeInterpreterBtn.disabled = false;
-                    testCodeInterpreterBtn.classList.remove('btn-disabled', 'text-slate-400');
-                    testCodeInterpreterBtn.classList.add('text-indigo-600', 'hover:bg-indigo-50');
-                } else {
-                    testCodeInterpreterBtn.disabled = true;
-                    testCodeInterpreterBtn.classList.add('btn-disabled', 'text-slate-400');
-                    testCodeInterpreterBtn.classList.remove('text-indigo-600', 'hover:bg-indigo-50');
-                }
-            });
-            
-            // Image Gen Toggle
-            imageGeneratorToggle.addEventListener('change', (e) => {
-                appState.capabilities.imageGenerator = e.target.checked;
-                if (e.target.checked) {
-                    testImageGenBtn.disabled = false;
-                    testImageGenBtn.classList.remove('btn-disabled', 'text-slate-400');
-                    testImageGenBtn.classList.add('text-indigo-600', 'hover:bg-indigo-50');
-                } else {
-                    testImageGenBtn.disabled = true;
-                    testImageGenBtn.classList.add('btn-disabled', 'text-slate-400');
-                    testImageGenBtn.classList.remove('text-indigo-600', 'hover:bg-indigo-50');
-                }
-            });
-            
-            // ... (rest of listeners: model config, knowledge, prompts - unchanged) ...
-            modelConfigContainer.addEventListener('change', (e) => {
-                if (e.target.name === 'model-selection') {
-                    appState.modelConfig.selectedModel = e.target.value;
-                    renderModelConfig();
-                }
-            });
-            modelConfigContainer.addEventListener('input', (e) => {
-                if (e.target.id === 'api-key-qhy-pro-input') appState.modelConfig.apiKeys['qhy-pro'] = e.target.value;
-                else if (e.target.id === 'api-key-gemini-2.5-input') appState.modelConfig.apiKeys['gemini-2.5'] = e.target.value;
-            });
-            addKnowledgeUrlBtn.addEventListener('click', () => {
-                const url = knowledgeUrlInput.value.trim();
-                if (url) {
-                    try {
-                        new URL(url); 
-                        if (!appState.knowledge.urls.includes(url)) {
-                            appState.knowledge.urls.push(url);
-                            renderKnowledgeList();
-                            knowledgeUrlInput.value = '';
-                        }
-                    } catch (error) { console.warn("Invalid URL."); }
-                }
-            });
-            knowledgeListContainer.addEventListener('click', (e) => {
-                if (e.target.closest('button')) {
-                    const index = parseInt(e.target.closest('button').dataset.index, 10);
-                    appState.knowledge.urls.splice(index, 1);
-                    renderKnowledgeList();
-                }
-            });
-            promptListContainer.addEventListener('click', (e) => {
-                const deleteBtn = e.target.closest('.delete-prompt-btn');
-                if (deleteBtn) {
-                    const index = parseInt(deleteBtn.dataset.index, 10);
-                    appState.prompts.splice(index, 1);
-                    renderPromptList();
-                }
-                const editBtn = e.target.closest('.edit-prompt-btn');
-                if (editBtn) {
-                    const index = parseInt(editBtn.dataset.index, 10);
-                    showPromptModal('edit', index);
-                }
-            });
-            addPromptBtn.addEventListener('click', () => showPromptModal('add'));
-            promptModalCloseBtn.addEventListener('click', () => hideModal(promptModal));
-            promptModalCancelBtn.addEventListener('click', () => hideModal(promptModal));
-            promptModalForm.addEventListener('submit', (e) => {
-                e.preventDefault();
-                const title = promptModalTitleInput.value.trim();
-                const message = promptModalMessageInput.value.trim();
-                const editIndex = parseInt(promptModalEditIndex.value, 10);
-                if (title && message) {
-                    if (editIndex > -1) appState.prompts[editIndex] = { title, message };
-                    else appState.prompts.push({ title, message });
-                    renderPromptList();
-                    hideModal(promptModal);
-                }
-            });
-
-            // Gemini API Buttons (Agent Config)
-            suggestNameBtn.addEventListener('click', async () => { 
-                const agentDescription = appState.description.trim();
-                if (!agentDescription) { console.warn("Please enter a Description first."); return; }
-                const userQuery = `Based on the agent description: "${agentDescription}", suggest one creative agent name. Return ONLY the name.`;
-                const payload = { contents: [{ parts: [{ text: userQuery }] }], systemInstruction: { parts: [{ text: "You are an expert marketer." }] } };
-                showLoading("Suggesting name...");
-                try {
-                    const generatedText = await callGeminiApi(payload);
-                    const cleanText = generatedText.replace(/["*]/g, "").trim();
-                    agentNameInput.value = cleanText;
-                    appState.agentName = cleanText;
-                } catch (error) { console.error(error); } finally { hideLoading(); }
-            });
-            suggestDescriptionBtn.addEventListener('click', async () => {
-                const agentRole = appState.agentName.trim();
-                if (!agentRole) { console.warn("Please enter an Agent Name first."); return; }
-                const userQuery = `Based on the agent name: "${agentRole}", write a concise one-sentence description. Return ONLY the description.`;
-                const payload = { contents: [{ parts: [{ text: userQuery }] }], systemInstruction: { parts: [{ text: "You are a concise technical writer." }] } };
-                showLoading("Suggesting description...");
-                try {
-                    const generatedText = await callGeminiApi(payload);
-                    const cleanText = generatedText.replace(/["*]/g, "").trim();
-                    agentDescriptionInput.value = cleanText;
-                    appState.description = cleanText;
-                } catch (error) { console.error(error); } finally { hideLoading(); }
-            });
-            generateInstructionsBtn.addEventListener('click', async () => {
-                const agentRole = appState.agentName.trim();
-                if (!agentRole) { console.warn("Please enter an Agent Name first."); return; }
-                const userQuery = `Write a detailed system prompt for an AI agent with the role: "${agentRole}". Include a persona, rules, and guidelines. Return ONLY the prompt text.`;
-                const payload = { contents: [{ parts: [{ text: userQuery }] }], systemInstruction: { parts: [{ text: "You are a world-class prompt engineer." }] } };
-                showLoading("Generating instructions...");
-                try {
-                    const generatedText = await callGeminiApi(payload);
-                    const cleanText = generatedText.replace(/^(```(markdown|text)?\n)|(```)$/g, "").trim();
-                    agentInstructionsInput.value = cleanText;
-                    appState.instructions = cleanText;
-                } catch (error) { console.error(error); } finally { hideLoading(); }
-            });
-            suggestPromptsBtn.addEventListener('click', async () => {
-                const { agentName, description } = appState;
-                if (!agentName || !description) { console.warn("Please enter an Agent Name and Description first."); return; }
-                const userQuery = `Generate 3 unique suggested prompts for an agent named "${agentName}" described as "${description}". Return ONLY the JSON array.`;
-                const promptSchema = { type: "ARRAY", items: { type: "OBJECT", properties: { "title": { "type": "STRING" }, "message": { "type": "STRING" } }, required: ["title", "message"] } };
-                const payload = { contents: [{ parts: [{ text: userQuery }] }], systemInstruction: { parts: [{ text: "You generate example prompts as a JSON array." }] }, generationConfig: { responseMimeType: "application/json", responseSchema: promptSchema } };
-                showLoading("Suggesting prompts...");
-                try {
-                    const jsonText = await callGeminiApi(payload);
-                    const newPrompts = JSON.parse(jsonText);
-                    if (Array.isArray(newPrompts) && newPrompts.length > 0) {
-                        newPrompts.forEach(p => { if (!appState.prompts.some(ap => ap.title === p.title)) appState.prompts.push(p); });
-                        renderPromptList();
-                    }
-                } catch (error) { console.error(error); } finally { hideLoading(); }
-            });
-
-            // Save/Delete Agent
-            deleteAgentBtn.addEventListener('click', () => showModal(deleteAgentModal));
-            deleteAgentCancelBtn.addEventListener('click', () => hideModal(deleteAgentModal));
-            deleteAgentConfirmBtn.addEventListener('click', async () => {
-                try {
-                    if (agentConfigDocRef) await deleteDoc(agentConfigDocRef);
-                    const { bio, displayName, photoURL } = appState;
-                    appState = { ...defaultAppState, bio, displayName, photoURL };
-                    initializeAppUI();
-                } catch (error) { console.error("Error deleting agent:", error); } finally { hideModal(deleteAgentModal); }
-            });
-            saveChangesBtn.addEventListener('click', async () => {
-                if (!agentConfigDocRef) return;
-                saveChangesBtn.textContent = "Saving...";
-                saveChangesBtn.disabled = true;
-                saveChangesBtn.classList.add('btn-disabled');
-                try {
-                    await setDoc(agentConfigDocRef, appState);
-                    saveChangesBtn.textContent = "Changes Saved!";
-                    saveChangesBtn.classList.add('bg-green-600');
-                    setTimeout(() => {
-                        saveChangesBtn.textContent = "Save Changes";
-                        saveChangesBtn.disabled = false;
-                        saveChangesBtn.classList.remove('btn-disabled', 'bg-green-600');
-                    }, 2000);
-                } catch (error) {
-                    console.error("Error saving to Firestore:", error);
-                    saveChangesBtn.textContent = "Save Failed";
-                    saveChangesBtn.classList.add('bg-red-600');
-                    setTimeout(() => {
-                        saveChangesBtn.textContent = "Save Changes";
-                        saveChangesBtn.disabled = false;
-                        saveChangesBtn.classList.remove('btn-disabled', 'bg-red-600');
-                    }, 2000);
-                }
-            });
-
-            // New UI Listeners
-            menuBtn.addEventListener('click', () => showModal(geminiSettingsModal));
-            geminiSettingsCloseBtn.addEventListener('click', () => hideModal(geminiSettingsModal));
-            geminiSettingsSaveBtn.addEventListener('click', () => {
-                console.log("Gemini settings saved (placeholder).");
-                hideModal(geminiSettingsModal);
-            });
-            profileToggleBtn.addEventListener('click', toggleProfileSidebar);
-            profileSidebarCloseBtn.addEventListener('click', toggleProfileSidebar);
-            sidebarOverlay.addEventListener('click', toggleProfileSidebar);
-            
-            // Profile Sidebar Listeners
-            profileImgUrlInput.addEventListener('input', (e) => updateImagePreviews(e.target.value));
-            suggestBioBtn.addEventListener('click', handleSuggestBio);
-            saveProfileBtn.addEventListener('click', handleSaveProfile);
-            googleSigninBtn.addEventListener('click', signInWithGoogle);
-            githubSigninBtn.addEventListener('click', signInWithGitHub);
-            signOutBtn.addEventListener('click', handleSignOut);
-            
-            // Test Agent Listeners
-            testAgentBtn.addEventListener('click', openTestAgentModal);
-            testAgentCloseBtn.addEventListener('click', () => hideModal(testAgentModal));
-            testAgentForm.addEventListener('submit', handleTestAgentSend);
-            
-            // Image Gen Test Listeners
-            testImageGenBtn.addEventListener('click', openImageGenModal);
-            imageGenCloseBtn.addEventListener('click', () => hideModal(imageGenModal));
-            imageGenForm.addEventListener('submit', handleImageGenTest);
-            
-            // NEW: Code Test Listeners
-            testCodeInterpreterBtn.addEventListener('click', openCodeTestModal);
-            codeTestCloseBtn.addEventListener('click', () => hideModal(codeTestModal));
-            codeTestGenerateBtn.addEventListener('click', handleCodeInterpreterTest);
-        }
-
-        // --- App Entry Point ---
-        document.addEventListener('DOMContentLoaded', () => {
-            selectDOMElements();
-            attachEventListeners();
-            
-            const firebaseConfig = JSON.parse(typeof __firebase_config !== 'undefined' ? __firebase_config : '{}');
-            const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
-
-            try {
-                app = initializeApp(firebaseConfig);
-                db = getFirestore(app);
-                auth = getAuth(app);
-                setLogLevel('Debug');
-                console.log("Firebase Initialized. Waiting for auth...");
-
-                onAuthStateChanged(auth, async (user) => {
-                    if (user) {
-                        userId = user.uid;
-                        console.log(`User authenticated. UserID: ${userId}, Anonymous: ${user.isAnonymous}`);
-                        agentConfigDocRef = doc(db, 'artifacts', appId, 'users', userId, 'qhySyncAgent', 'config');
-                        
-                        await loadAgentConfig();
-                        initializeAppUI(); // Now this will update the UI with data
-
-                    } else {
-                        console.log("User signed out. Attempting anonymous sign-in...");
-                        try {
-                            if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
-                                await signInWithCustomToken(auth, __initial_auth_token);
-                            } else {
-                                await signInAnonymously(auth);
-                            }
-                        } catch (error) {
-                            console.error("Error during anonymous sign-in:", error);
-                        }
-                    }
-                });
-            } catch (error) {
-                console.error("Failed to initialize Firebase:", error);
-                document.body.innerHTML = `<div class="p-8 text-center text-red-600"><h1 class="text-2xl font-bold">Application Error</h1><p class="mt-2">Could not connect to services.</p></div>`;
-            }
-        });
-
-    </script>
 </head>
 <body class="bg-slate-100 text-slate-900 antialiased">
-
-    <!-- NEW: Hidden Audio Player for TTS -->
-    <audio id="tts-player" class="hidden"></audio>
-
-    <!-- Header -->
-    <header class="bg-white shadow-sm sticky top-0 z-30">
-        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center h-16">
-                <button id="menu-btn" class="p-2 rounded-full text-slate-500 hover:text-slate-800 hover:bg-slate-100">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
-                </button>
-                <h1 class="text-xl font-semibold text-slate-800 hidden sm:block">
-                    Agent Configuration
-                </h1>
-                <button id="profile-toggle-btn" class="p-1.5 rounded-full text-slate-500 hover:text-slate-800 hover:bg-slate-100">
-                    <svg id="profile-header-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
-                    <img id="profile-header-img" src="" alt="Profile" class="w-6 h-6 rounded-full hidden object-cover">
-                </button>
-            </div>
-        </div>
-    </header>
-
-    <!-- Main Content Area -->
-    <main class="max-w-3xl mx-auto p-4 sm:p-6 lg:p-8 mt-6">
-        <div class="space-y-8">
+    <custom-navbar></custom-navbar>
+<!-- Main Content Area -->
+    <main class="max-w-3xl mx-auto p-4 sm:p-6 lg:p-8 mt-6" id="main-content">
+<div class="space-y-8">
             <!-- Card: Agent Name -->
             <div class="bg-white shadow-md rounded-lg overflow-hidden">
                 <div class="px-6 py-5 flex justify-between items-center">
@@ -1344,13 +236,8 @@ Return ONLY the Python code, inside \`\`\`python ... \`\`\` tags.`;
             </div>
         </div>
     </main>
-    
-    <!-- Sidebar Overlay -->
-    <div id="sidebar-overlay" class="fixed inset-0 z-30 bg-black bg-opacity-50 opacity-0 pointer-events-none"></div>
-    
-    <!-- Profile Sidebar -->
-    <aside id="profile-sidebar" class="fixed top-0 right-0 z-40 w-full max-w-sm h-full bg-white shadow-xl overflow-y-auto">
-        <div class="flex flex-col h-full">
+    <custom-sidebar></custom-sidebar>
+<div class="flex flex-col h-full">
             <!-- Sidebar Header -->
             <div class="flex items-center justify-between px-6 py-5 border-b border-slate-200">
                 <h3 class="text-lg font-semibold text-slate-900">Profile & Settings</h3>
@@ -1416,134 +303,5 @@ Return ONLY the Python code, inside \`\`\`python ... \`\`\` tags.`;
             </div>
         </div>
     </aside>
-
-    <!-- Modals -->
-    <!-- API Loading -->
-    <div id="loading-modal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 backdrop-blur-sm opacity-0 pointer-events-none">
-        <div class="modal-content bg-white w-full max-w-xs rounded-lg shadow-xl p-6 text-center">
-            <svg class="animate-spin h-12 w-12 text-indigo-600 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
-            <p id="loading-message" class="text-sm font-medium text-slate-700 mt-4">Generating...</p>
-        </div>
-    </div>
-    <!-- Add/Edit Prompt -->
-    <div id="prompt-modal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm opacity-0 pointer-events-none">
-        <div class="modal-content bg-white w-full max-w-lg rounded-lg shadow-xl p-6 transform -translate-y-10">
-            <div class="flex justify-between items-center mb-4"><h3 id="prompt-modal-title" class="text-lg font-semibold text-slate-900">Add New Prompt</h3><button id="prompt-modal-close-btn" class="p-1 rounded-full text-slate-400 hover:bg-slate-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button></div>
-            <form id="prompt-modal-form"><input type="hidden" id="prompt-modal-edit-index"><div class="space-y-4"><div><label for="prompt-modal-title-input" class="block text-sm font-medium text-slate-700">Title</label><input type="text" id="prompt-modal-title-input" placeholder="e.g., Explain a concept" class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></div><div><label for="prompt-modal-message-input" class="block text-sm font-medium text-slate-700">Message</label><textarea id="prompt-modal-message-input" rows="3" class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="e.g., &quot;Explain quantum...&quot;"></textarea></div></div><div class="mt-6 flex justify-end space-x-3"><button id="prompt-modal-cancel-btn" type="button" class="rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50">Cancel</button><button id="prompt-modal-save-btn" type="submit" class="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700">Save Prompt</button></div></form>
-        </div>
-    </div>
-    <!-- Confirm Delete Agent -->
-    <div id="delete-agent-modal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm opacity-0 pointer-events-none">
-        <div class="modal-content bg-white w-full max-w-md rounded-lg shadow-xl p-6 transform -translate-y-10">
-            <div class="flex items-start"><div class="flex-shrink-0 h-12 w-12 flex items-center justify-center rounded-full bg-red-100 sm:mx-0"><svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /></svg></div><div class="ml-4 text-left"><h3 class="text-lg font-semibold text-slate-900">Delete Agent</h3><div class="mt-2"><p class="text-sm text-slate-500">Are you sure you want to delete this agent? This action cannot be undone.</p></div></div></div>
-            <div class="mt-6 flex justify-end space-x-3"><button id="delete-agent-cancel-btn" type="button" class="rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50">Cancel</button><button id="delete-agent-confirm-btn" type="button" class="inline-flex justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700">Delete</button></div>
-        </div>
-    </div>
-    
-    <!-- Gemini Settings Modal -->
-    <div id="gemini-settings-modal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm opacity-0 pointer-events-none">
-        <div class="modal-content bg-white w-full max-w-lg rounded-lg shadow-xl p-6 transform -translate-y-10">
-            <div class="flex justify-between items-center mb-4"><h3 class="text-lg font-semibold text-slate-900">Gemini Settings</h3><button id="gemini-settings-close-btn" class="p-1 rounded-full text-slate-400 hover:bg-slate-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button></div>
-            <div class="space-y-4">
-                <p class="text-sm text-slate-600">Configure advanced settings for the Gemini API features (e.g., suggestion generation).</p>
-                <div>
-                    <label for="gemini-safety-level" class="block text-sm font-medium text-slate-700">Suggestion Safety Level</label>
-                    <select id="gemini-safety-level" class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
-                        <option value="BLOCK_MEDIUM_AND_ABOVE">Block Medium and Above (Default)</option>
-                        <option value="BLOCK_ONLY_HIGH">Block Only High</option>
-                        <option value="BLOCK_NONE">Block None</option>
-                    </select>
-                </div>
-            </div>
-            <div class="mt-6 flex justify-end">
-                <button id="gemini-settings-save-btn" type="button" class="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700">Save Settings</button>
-            </div>
-        </div>
-    </div>
-    
-    <!-- Test Agent Modal -->
-    <div id="test-agent-modal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm opacity-0 pointer-events-none">
-        <div class="modal-content bg-white w-full max-w-lg rounded-lg shadow-xl flex flex-col transform -translate-y-10" style="height: 70vh; max-height: 500px;">
-            <div class="flex justify-between items-center p-4 border-b border-slate-200">
-                <h3 class="text-lg font-semibold text-slate-900">Test Agent</h3>
-                <button id="test-agent-close-btn" class="p-1 rounded-full text-slate-400 hover:bg-slate-100">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-                </button>
-            </div>
-            <div id="test-agent-history" class="flex-1 p-4 space-y-4 overflow-y-auto bg-slate-50">
-                <!-- Chat messages injected here -->
-            </div>
-            <form id="test-agent-form" class="p-4 border-t border-slate-200">
-                <div class="flex items-center space-x-2">
-                    <input type="text" id="test-agent-input" placeholder="Message your agent..." class="block w-full rounded-md border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
-                    <button type="submit" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                    </button>
-                </div>
-            </form>
-        </div>
-    </div>
-    
-    <!-- Image Gen Test Modal -->
-    <div id="image-gen-modal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm opacity-0 pointer-events-none">
-        <div class="modal-content bg-white w-full max-w-lg rounded-lg shadow-xl flex flex-col transform -translate-y-10">
-            <div class="flex justify-between items-center p-4 border-b border-slate-200">
-                <h3 class="text-lg font-semibold text-slate-900">✨ Test Image Generator</h3>
-                <button id="image-gen-close-btn" class="p-1 rounded-full text-slate-400 hover:bg-slate-100">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-                </button>
-            </div>
-            <div id="image-gen-result-container" class="flex-1 p-4 flex items-center justify-center bg-slate-50 min-h-[300px]">
-                <div id="image-gen-spinner" class="flex flex-col items-center justify-center text-slate-500">
-                    <svg class="animate-spin h-12 w-12 text-indigo-600 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
-                    <p class="text-sm font-medium mt-2">Generating image...</p>
-                </div>
-                <img id="image-gen-result" src="" alt="" class="max-w-full max-h-full h-auto w-auto object-contain rounded-lg shadow-md hidden">
-                <p id="image-gen-error" class="text-sm text-red-600 p-4 bg-red-50 rounded-md hidden"></p>
-            </div>
-            <form id="image-gen-form" class="p-4 border-t border-slate-200">
-                <div class="flex items-center space-x-2">
-                    <input type="text" id="image-gen-input" placeholder="e.g., A red panda in a space helmet" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
-                    <button type="submit" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700">
-                        Generate
-                    </button>
-                </div>
-            </form>
-        </div>
-    </div>
-    
-    <!-- NEW: Code Interpreter Test Modal -->
-    <div id="code-test-modal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm opacity-0 pointer-events-none">
-        <div class="modal-content bg-white w-full max-w-lg rounded-lg shadow-xl flex flex-col transform -translate-y-10">
-            <!-- Modal Header -->
-            <div class="flex justify-between items-center p-4 border-b border-slate-200">
-                <h3 class="text-lg font-semibold text-slate-900">✨ Test Code Interpreter</h3>
-                <button id="code-test-close-btn" class="p-1 rounded-full text-slate-400 hover:bg-slate-100">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-                </button>
-            </div>
-            
-            <!-- Code Result Area -->
-            <div id="code-test-result-container" class="flex-1 p-4 flex items-center justify-center bg-slate-900 min-h-[300px]">
-                <!-- Spinner -->
-                <div id="code-test-spinner" class="flex flex-col items-center justify-center text-slate-400" style="display: none;">
-                    <svg class="animate-spin h-12 w-12 text-indigo-500 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
-                    <p class="text-sm font-medium mt-2">Generating code snippet...</p>
-                </div>
-                <!-- Result -->
-                <pre id="code-test-result" class="w-full h-full text-sm text-slate-100 overflow-auto p-4 bg-transparent rounded-md"></pre>
-            </div>
-            
-            <!-- Generate Button -->
-            <div class="p-4 border-t border-slate-200 flex justify-end">
-                <button id="code-test-generate-btn" type="button" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700">
-                    Generate Example
-                </button>
-            </div>
-        </div>
-    </div>
-
 </body>
 </html>
-
-

script.js

@@ -1,3 +1,7 @@
+// Import Firebase functions
+import { initializeApp } from 'https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js';
+import { getAuth, onAuthStateChanged, signInAnonymously, signInWithCustomToken, signOut, GoogleAuthProvider, GithubAuthProvider, signInWithPopup, updateProfile } from 'https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js';
+import { getFirestore, doc, getDoc, setDoc, deleteDoc } from 'https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js';
 
 // Main application logic
 document.addEventListener('DOMContentLoaded', async () => {
@@ -10,51 +14,942 @@ document.addEventListener('DOMContentLoaded', async () => {
         const app = initializeApp(firebaseConfig);
         const db = getFirestore(app);
         const auth = getAuth(app);
-        setLogLevel('Debug');
+        
+        // Set log level for debugging
+        // Note: setLogLevel is not available in the modular SDK, using console.log instead
+        console.log("Firebase Initialized. Waiting for auth...");
+
+        // --- App State & Firebase Globals ---
+        let userId, agentConfigDocRef;
+        let isProfileSidebarOpen = false;
+        let testChatHistory = []; // State for test chat
+
+        const defaultAppState = {
+            agentName: "Creative Writer",
+            description: "A helpful assistant for Python code.",
+            instructions: "You are a helpful AI assistant...",
+            modelConfig: {
+                selectedModel: 'llama3-70b',
+                apiKeys: { 'qhy-pro': '', 'gemini-2.5': '' }
+            },
+            knowledge: {
+                prioritize: false,
+                urls: ['https://qhy.sync/docs/main']
+            },
+            capabilities: {
+                codeInterpreter: false,
+                imageGenerator: true
+            },
+            prompts: [
+                { title: "Explain a concept", message: "\"Explain quantum computing...\"" },
+                { title: "Write some code", message: "\"Write a Python function...\"" }
+            ],
+            bio: "",
+            displayName: "",
+            photoURL: ""
+        };
+
+        let appState = { ...defaultAppState };
+        
+        // --- DOM Selectors ---
+        let agentNameInput, agentDescriptionInput, agentInstructionsInput,
+            listenInstructionsBtn, ttsPlayer,
+            modelConfigContainer, knowledgeListContainer, knowledgeEmptyState,
+            knowledgeUrlInput, addKnowledgeUrlBtn, prioritizeKnowledgeToggle,
+            codeInterpreterToggle, testCodeInterpreterBtn,
+            imageGeneratorToggle, testImageGenBtn,
+            promptListContainer, promptEmptyState, addPromptBtn, 
+            saveChangesBtn, deleteAgentBtn, suggestNameBtn, 
+            suggestDescriptionBtn, generateInstructionsBtn, suggestPromptsBtn, 
+            loadingModal, loadingMessage, promptModal, promptModalTitle, 
+            promptModalCloseBtn, promptModalCancelBtn, promptModalForm, 
+            promptModalSaveBtn, promptModalEditIndex, promptModalTitleInput, 
+            promptModalMessageInput, deleteAgentModal, deleteAgentCancelBtn, 
+            deleteAgentConfirmBtn,
+            // UI Elements
+            menuBtn, profileToggleBtn, profileHeaderIcon, profileHeaderImg,
+            profileSidebar, sidebarOverlay, profileSidebarCloseBtn,
+            profileImgPreview, profileImgUrlInput, profileDisplayNameInput,
+            profileBioInput, suggestBioBtn, saveProfileBtn, googleSigninBtn, 
+            githubSigninBtn, signOutBtn, socialLoginContainer, signOutContainer,
+            geminiSettingsModal, geminiSettingsCloseBtn, geminiSettingsSaveBtn,
+            // Test Agent Elements
+            testAgentBtn, testAgentModal, testAgentCloseBtn, testAgentHistory,
+            testAgentForm, testAgentInput,
+            // Image Gen Modal Elements
+            imageGenModal, imageGenCloseBtn, imageGenForm, imageGenInput, 
+            imageGenResultContainer, imageGenSpinner, imageGenResult, imageGenError,
+            // NEW: Code Test Modal Elements
+            codeTestModal, codeTestCloseBtn, codeTestGenerateBtn, 
+            codeTestResultContainer, codeTestSpinner, codeTestResult;
+
+        /**
+         * Assign all DOM elements to their variables.
+         */
+        function selectDOMElements() {
+            // Wait for custom elements to be fully loaded
+            const waitForElements = setInterval(() => {
+                // Try to get elements from main content and custom components
+                const mainContent = document.getElementById('main-content');
+                const sidebar = document.querySelector('custom-sidebar');
+                const navbar = document.querySelector('custom-navbar');
+                const modals = document.querySelector('custom-modals');
+                
+                if (mainContent) {
+                    // Existing Elements
+                    agentNameInput = document.getElementById('agent-name');
+                    agentDescriptionInput = document.getElementById('agent-description');
+                    agentInstructionsInput = document.getElementById('agent-instructions');
+                    listenInstructionsBtn = document.getElementById('listen-instructions-btn');
+                    modelConfigContainer = document.getElementById('model-config-container');
+                    knowledgeListContainer = document.getElementById('knowledge-list-container');
+                    knowledgeEmptyState = document.getElementById('knowledge-empty-state');
+                    knowledgeUrlInput = document.getElementById('knowledge-url-input');
+                    addKnowledgeUrlBtn = document.getElementById('add-knowledge-url-btn');
+                    prioritizeKnowledgeToggle = document.getElementById('prioritize-knowledge');
+                    codeInterpreterToggle = document.getElementById('code-interpreter');
+                    testCodeInterpreterBtn = document.getElementById('test-code-interpreter-btn');
+                    imageGeneratorToggle = document.getElementById('image-generator');
+                    testImageGenBtn = document.getElementById('test-image-gen-btn');
+                    promptListContainer = document.getElementById('prompt-list-container');
+                    promptEmptyState = document.getElementById('prompt-empty-state');
+                    addPromptBtn = document.getElementById('add-prompt-btn');
+                    saveChangesBtn = document.getElementById('save-changes-btn');
+                    deleteAgentBtn = document.getElementById('delete-agent-btn');
+                    suggestNameBtn = document.getElementById('suggest-name-btn');
+                    suggestDescriptionBtn = document.getElementById('suggest-description-btn');
+                    generateInstructionsBtn = document.getElementById('generate-instructions-btn');
+                    suggestPromptsBtn = document.getElementById('suggest-prompts-btn');
+                    
+                    // Test Agent Elements
+                    testAgentBtn = document.getElementById('test-agent-btn');
+                    testAgentHistory = document.getElementById('test-agent-history');
+                    testAgentForm = document.getElementById('test-agent-form');
+                    testAgentInput = document.getElementById('test-agent-input');
+                    testAgentModal = document.getElementById('test-agent-modal');
+                    testAgentCloseBtn = document.getElementById('test-agent-close-btn');
+                    
+                    // Image Gen Modal Elements
+                    imageGenModal = document.getElementById('image-gen-modal');
+                    imageGenCloseBtn = document.getElementById('image-gen-close-btn');
+                    imageGenForm = document.getElementById('image-gen-form');
+                    imageGenInput = document.getElementById('image-gen-input');
+                    imageGenResultContainer = document.getElementById('image-gen-result-container');
+                    imageGenSpinner = document.getElementById('image-gen-spinner');
+                    imageGenResult = document.getElementById('image-gen-result');
+                    imageGenError = document.getElementById('image-gen-error');
+
+                    // NEW: Code Test Modal Elements
+                    codeTestModal = document.getElementById('code-test-modal');
+                    codeTestCloseBtn = document.getElementById('code-test-close-btn');
+                    codeTestGenerateBtn = document.getElementById('code-test-generate-btn');
+                    codeTestResultContainer = document.getElementById('code-test-result-container');
+                    codeTestSpinner = document.getElementById('code-test-spinner');
+                    codeTestResult = document.getElementById('code-test-result');
+                    
+                    // Modals
+                    loadingModal = document.getElementById('loading-modal');
+                    loadingMessage = document.getElementById('loading-message');
+                    promptModal = document.getElementById('prompt-modal');
+                    promptModalTitle = document.getElementById('prompt-modal-title');
+                    promptModalCloseBtn = document.getElementById('prompt-modal-close-btn');
+                    promptModalCancelBtn = document.getElementById('prompt-modal-cancel-btn');
+                    promptModalForm = document.getElementById('prompt-modal-form');
+                    promptModalSaveBtn = document.getElementById('prompt-modal-save-btn');
+                    promptModalEditIndex = document.getElementById('prompt-modal-edit-index');
+                    promptModalTitleInput = document.getElementById('prompt-modal-title-input');
+                    promptModalMessageInput = document.getElementById('prompt-modal-message-input');
+                    deleteAgentModal = document.getElementById('delete-agent-modal');
+                    deleteAgentCancelBtn = document.getElementById('delete-agent-cancel-btn');
+                    deleteAgentConfirmBtn = document.getElementById('delete-agent-confirm-btn');
+                    geminiSettingsModal = document.getElementById('gemini-settings-modal');
+                    geminiSettingsCloseBtn = document.getElementById('gemini-settings-close-btn');
+                    geminiSettingsSaveBtn = document.getElementById('gemini-settings-save-btn');
+                }
+                
+                if (navbar && navbar.shadowRoot) {
+                    menuBtn = navbar.shadowRoot.querySelector('#menu-btn');
+                    profileToggleBtn = navbar.shadowRoot.querySelector('#profile-toggle-btn');
+                    profileHeaderIcon = navbar.shadowRoot.querySelector('#profile-header-icon');
+                    profileHeaderImg = navbar.shadowRoot.querySelector('#profile-header-img');
+                }
+                
+                if (sidebar && sidebar.shadowRoot) {
+                    profileSidebar = sidebar.shadowRoot.querySelector('#profile-sidebar');
+                    sidebarOverlay = sidebar.shadowRoot.querySelector('#sidebar-overlay');
+                    profileSidebarCloseBtn = sidebar.shadowRoot.querySelector('#profile-sidebar-close-btn');
+                    profileImgPreview = sidebar.shadowRoot.querySelector('#profile-img-preview');
+                    profileImgUrlInput = sidebar.shadowRoot.querySelector('#profile-img-url-input');
+                    profileDisplayNameInput = sidebar.shadowRoot.querySelector('#profile-display-name-input');
+                    profileBioInput = sidebar.shadowRoot.querySelector('#profile-bio-input');
+                    suggestBioBtn = sidebar.shadowRoot.querySelector('#suggest-bio-btn');
+                    saveProfileBtn = sidebar.shadowRoot.querySelector('#save-profile-btn');
+                    googleSigninBtn = sidebar.shadowRoot.querySelector('#google-signin-btn');
+                    githubSigninBtn = sidebar.shadowRoot.querySelector('#github-signin-btn');
+                    signOutBtn = sidebar.shadowRoot.querySelector('#sign-out-btn');
+                    socialLoginContainer = sidebar.shadowRoot.querySelector('#social-login-container');
+                    signOutContainer = sidebar.shadowRoot.querySelector('#sign-out-container');
+                }
+                
+                // Audio player
+                ttsPlayer = document.getElementById('tts-player');
+                
+                if (agentNameInput && menuBtn && profileToggleBtn) {
+                    clearInterval(waitForElements);
+                    console.log('DOM elements ready');
+                    attachEventListeners();
+                    initializeAppUI();
+                }
+            }, 100);
+        }
+
+        // --- Render Functions ---
+
+        /** Initializes the UI from the current appState */
+        function initializeAppUI() {
+            if (!agentNameInput) {
+                console.warn("DOM elements not ready, skipping UI init.");
+                return; // Guard clause
+            }
+
+            // 1. Populate Agent Config Form
+            agentNameInput.value = appState.agentName;
+            agentDescriptionInput.value = appState.description;
+            agentInstructionsInput.value = appState.instructions;
+            prioritizeKnowledgeToggle.checked = appState.knowledge.prioritize;
+            
+            // Handle Code Interpreter Toggle and Test Button
+            codeInterpreterToggle.checked = appState.capabilities.codeInterpreter;
+            if (appState.capabilities.codeInterpreter) {
+                testCodeInterpreterBtn.disabled = false;
+                testCodeInterpreterBtn.classList.remove('btn-disabled', 'text-slate-400');
+                testCodeInterpreterBtn.classList.add('text-indigo-600', 'hover:bg-indigo-50');
+            } else {
+                testCodeInterpreterBtn.disabled = true;
+                testCodeInterpreterBtn.classList.add('btn-disabled', 'text-slate-400');
+                testCodeInterpreterBtn.classList.remove('text-indigo-600', 'hover:bg-indigo-50');
+            }
+            
+            // Handle Image Generator Toggle and Test Button
+            imageGeneratorToggle.checked = appState.capabilities.imageGenerator;
+            if (appState.capabilities.imageGenerator) {
+                testImageGenBtn.disabled = false;
+                testImageGenBtn.classList.remove('btn-disabled', 'text-slate-400');
+                testImageGenBtn.classList.add('text-indigo-600', 'hover:bg-indigo-50');
+            } else {
+                testImageGenBtn.disabled = true;
+                testImageGenBtn.classList.add('btn-disabled', 'text-slate-400');
+                testImageGenBtn.classList.remove('text-indigo-600', 'hover:bg-indigo-50');
+            }
+
+            if (appState.modelConfig?.selectedModel) {
+                 const modelInput = document.querySelector(`input[name="model-selection"][value="${appState.modelConfig.selectedModel}"]`);
+                 if (modelInput) modelInput.checked = true;
+            }
+            document.getElementById('api-key-qhy-pro-input').value = appState.modelConfig?.apiKeys?.['qhy-pro'] || '';
+            document.getElementById('api-key-gemini-2.5-input').value = appState.modelConfig?.apiKeys?.['gemini-2.5'] || '';
+            
+            renderModelConfig();
+            renderKnowledgeList();
+            renderPromptList();
+
+            // 2. Populate Profile Sidebar
+            const currentUser = auth.currentUser;
+            const displayName = currentUser?.displayName || appState.displayName || '';
+            const photoURL = currentUser?.photoURL || appState.photoURL || '';
+            const bio = appState.bio || '';
+
+            if (profileDisplayNameInput) profileDisplayNameInput.value = displayName;
+            if (profileImgUrlInput) profileImgUrlInput.value = photoURL;
+            if (profileBioInput) profileBioInput.value = bio;
+
+            // Update image previews
+            updateImagePreviews(photoURL);
+
+            // 3. Update Auth-dependent UI
+            if (currentUser && saveProfileBtn) {
+                if (currentUser.isAnonymous) {
+                    if (socialLoginContainer) socialLoginContainer.classList.remove('hidden');
+                    if (signOutContainer) signOutContainer.classList.add('hidden');
+                    saveProfileBtn.classList.add('btn-disabled');
+                    saveProfileBtn.disabled = true;
+                    saveProfileBtn.title = "Sign in to save profile";
+                } else {
+                    if (socialLoginContainer) socialLoginContainer.classList.add('hidden');
+                    if (signOutContainer) signOutContainer.classList.remove('hidden');
+                    saveProfileBtn.classList.remove('btn-disabled');
+                    saveProfileBtn.disabled = false;
+                    saveProfileBtn.title = "";
+                }
+            }
+        }
+        
+        function updateImagePreviews(url) {
+            const validUrl = url && (url.startsWith('http') || url.startsWith('data:image'));
+            const userIconSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>`;
+            
+            if (profileHeaderImg && profileHeaderIcon) {
+                if (validUrl) {
+                    profileHeaderImg.src = url;
+                    profileHeaderImg.classList.remove('hidden');
+                    profileHeaderIcon.classList.add('hidden');
+                } else {
+                    profileHeaderImg.classList.add('hidden');
+                    profileHeaderIcon.classList.remove('hidden');
+                }
+            }
+            
+            if (profileImgPreview) {
+                if (validUrl) {
+                    profileImgPreview.src = url;
+                    profileImgPreview.classList.remove('bg-slate-200', 'text-slate-400');
+                    profileImgPreview.innerHTML = '';
+                } else {
+                    profileImgPreview.src = '';
+                    profileImgPreview.classList.add('bg-slate-200', 'text-slate-400');
+                    profileImgPreview.innerHTML = userIconSvg;
+                }
+            }
+        }
+        
+        function renderKnowledgeList() {
+            if (!knowledgeListContainer) return;
+            
+            const items = knowledgeListContainer.querySelectorAll('.knowledge-item');
+            items.forEach(item => item.remove());
+            const urls = appState.knowledge?.urls || [];
+            
+            if (knowledgeEmptyState) {
+                if (urls.length === 0) {
+                    knowledgeEmptyState.classList.remove('hidden');
+                } else {
+                    knowledgeEmptyState.classList.add('hidden');
+                }
+            }
+            
+            urls.forEach((url, index) => {
+                const div = document.createElement('div');
+                div.className = 'knowledge-item flex items-center justify-between rounded-md border border-slate-200 bg-white p-3';
+                div.innerHTML = `<span class="text-sm text-slate-800 truncate" title="${url}">${url}</span><button class="ml-4 flex-shrink-0 p-1 text-slate-400 hover:text-red-600 rounded-full hover:bg-red-50" data-index="${index}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none"><polyline points="3 6 5 6 21 6"></polyline><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"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></button>`;
+                knowledgeListContainer.appendChild(div);
+            });
+        }
+        
+        function renderPromptList() {
+            if (!promptListContainer) return;
+            
+            const items = promptListContainer.querySelectorAll('.prompt-item');
+            items.forEach(item => item.remove());
+            const prompts = appState.prompts || [];
+            
+            if (promptEmptyState) {
+                if (prompts.length === 0) {
+                    promptEmptyState.classList.remove('hidden');
+                } else {
+                    promptEmptyState.classList.add('hidden');
+                }
+            }
+            
+            prompts.forEach((prompt, index) => {
+                const div = document.createElement('div');
+                div.className = 'prompt-item rounded-md border border-slate-200 p-4';
+                div.innerHTML = `<div class="flex justify-between items-center mb-2"><p class="text-sm font-semibold text-slate-800">${prompt.title}</p><div><button class="edit-prompt-btn p-1 text-slate-400 hover:text-slate-700 rounded-full hover:bg-slate-100" data-index="${index}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button><button class="delete-prompt-btn ml-1 p-1 text-slate-400 hover:text-red-600 rounded-full hover:bg-red-50" data-index="${index}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none"><polyline points="3 6 5 6 21 6"></polyline><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"></path></svg></button></div></div><p class="text-sm text-slate-600 bg-slate-50 p-3 rounded">${prompt.message}</p>`;
+                promptListContainer.appendChild(div);
+            });
+        }
+        
+        function renderModelConfig() {
+            const qhyProEl = document.getElementById('api-key-qhy-pro');
+            const geminiEl = document.getElementById('api-key-gemini-2.5');
+            
+            if (qhyProEl) qhyProEl.classList.add('hidden');
+            if (geminiEl) geminiEl.classList.add('hidden');
+            
+            const selected = appState.modelConfig?.selectedModel;
+            if (selected === 'qhy-pro' && qhyProEl) {
+                qhyProEl.classList.remove('hidden');
+            } else if (selected === 'gemini-2.5' && geminiEl) {
+                geminiEl.classList.remove('hidden');
+            }
+        }
+        
+        function renderTestChatMessage(sender, text) {
+            if (!testAgentHistory) return;
+            
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `chat-message ${sender} mb-2`;
+            let html = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+            html = html.replace(/`(.*?)`/g, '<code class="bg-slate-200 px-1 py-0.5 rounded text-sm">$1</code>');
+            html = html.replace(/\n/g, '<br>');
+            messageDiv.innerHTML = html;
+            testAgentHistory.appendChild(messageDiv);
+            testAgentHistory.scrollTop = testAgentHistory.scrollHeight;
+        }
+        
+        function setChatTyping(isTyping) {
+            if (!testAgentHistory) return;
+            
+            let typingEl = document.getElementById('typing-indicator');
+            if (isTyping) {
+                if (!typingEl) {
+                    typingEl = document.createElement('div');
+                    typingEl.id = 'typing-indicator';
+                    typingEl.className = 'chat-message model typing';
+                    typingEl.textContent = 'typing...';
+                    testAgentHistory.appendChild(typingEl);
+                    testAgentHistory.scrollTop = testAgentHistory.scrollHeight;
+                }
+            } else {
+                if (typingEl) {
+                    typingEl.remove();
+                }
+            }
+        }
 
-        onAuthStateChanged(auth, async (user) => {
-            if (user) {
-                console.log(`User authenticated. UserID: ${user.uid}, Anonymous: ${user.isAnonymous}`);
-                const agentConfigDocRef = doc(db, 'artifacts', appId, 'users', user.uid, 'qhySyncAgent', 'config');
-                // Load and initialize UI here
+        // --- Modal & Sidebar Functions ---
+
+        function showModal(modalEl) {
+            if (!modalEl) return;
+            modalEl.classList.remove('opacity-0', 'pointer-events-none');
+            const content = modalEl.querySelector('.modal-content');
+            if (content) content.classList.remove('-translate-y-10');
+        }
+        
+        function hideModal(modalEl) {
+            if (!modalEl) return;
+            modalEl.classList.add('opacity-0', 'pointer-events-none');
+            const content = modalEl.querySelector('.modal-content');
+            if (content) content.classList.add('-translate-y-10');
+        }
+        
+        function showLoading(message = "Generating...") {
+            if (loadingMessage) loadingMessage.textContent = message;
+            if (loadingModal) showModal(loadingModal);
+        }
+        
+        function hideLoading() {
+            if (loadingModal) hideModal(loadingModal);
+        }
+        
+        function showPromptModal(mode = 'add', index = -1) {
+            if (!promptModal || !promptModalTitle || !promptModalSaveBtn || 
+                !promptModalEditIndex || !promptModalTitleInput || !promptModalMessageInput) return;
+                
+            if (mode === 'edit' && index > -1) {
+                const prompt = appState.prompts[index];
+                promptModalTitle.textContent = 'Edit Prompt';
+                promptModalSaveBtn.textContent = 'Save Changes';
+                promptModalEditIndex.value = index;
+                promptModalTitleInput.value = prompt.title;
+                promptModalMessageInput.value = prompt.message;
             } else {
-                console.log("User signed out. Attempting anonymous sign-in...");
+                promptModalTitle.textContent = 'Add New Prompt';
+                promptModalSaveBtn.textContent = 'Save Prompt';
+                if (promptModalForm) promptModalForm.reset();
+                promptModalEditIndex.value = -1;
+            }
+            showModal(promptModal);
+        }
+        
+        function toggleProfileSidebar() {
+            isProfileSidebarOpen = !isProfileSidebarOpen;
+            const sidebar = document.querySelector('custom-sidebar');
+            if (sidebar && sidebar.shadowRoot) {
+                const profileSidebar = sidebar.shadowRoot.querySelector('#profile-sidebar');
+                const sidebarOverlay = sidebar.shadowRoot.querySelector('#sidebar-overlay');
+                
+                if (profileSidebar && sidebarOverlay) {
+                    if (isProfileSidebarOpen) {
+                        profileSidebar.classList.add('open');
+                        sidebarOverlay.classList.remove('opacity-0', 'pointer-events-none');
+                    } else {
+                        profileSidebar.classList.remove('open');
+                        sidebarOverlay.classList.add('opacity-0', 'pointer-events-none');
+                    }
+                }
+            }
+        }
+        
+        function openTestAgentModal() {
+            testChatHistory = []; // Reset history
+            if (testAgentHistory) testAgentHistory.innerHTML = ''; // Clear UI
+            renderTestChatMessage('model', 'Hi! I\'m ready to test. My instructions are set. Ask me anything.');
+            if (testAgentModal) showModal(testAgentModal);
+        }
+        
+        function openImageGenModal() {
+            if (imageGenInput) imageGenInput.value = '';
+            if (imageGenResult) {
+                imageGenResult.src = '';
+                imageGenResult.alt = '';
+            }
+            if (imageGenError) imageGenError.textContent = '';
+            if (imageGenResultContainer) imageGenResultContainer.classList.remove('loading');
+            if (imageGenResult) imageGenResult.classList.add('hidden');
+            if (imageGenError) imageGenError.classList.add('hidden');
+            if (imageGenModal) showModal(imageGenModal);
+        }
+
+        // NEW: Open Code Test Modal
+        function openCodeTestModal() {
+            if (codeTestResultContainer) codeTestResultContainer.classList.remove('loading');
+            if (codeTestResult) codeTestResult.textContent = '// Click "Generate Example" to see a code snippet...';
+            if (codeTestSpinner) codeTestSpinner.style.display = 'none';
+            if (codeTestResult) codeTestResult.style.display = 'block';
+            if (codeTestModal) showModal(codeTestModal);
+        }
+        
+        // --- Gemini API Callers ---
+        
+        // Text Generation
+        async function callGeminiApi(payload, maxRetries = 5) {
+            const apiKey = ""; // In a real app, this would come from environment variables
+            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;
+            let attempt = 0, delay = 1000;
+            
+            while (attempt < maxRetries) {
                 try {
-                    if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
-                        await signInWithCustomToken(auth, __initial_auth_token);
+                    const response = await fetch(apiUrl, { 
+                        method: 'POST', 
+                        headers: { 'Content-Type': 'application/json' }, 
+                        body: JSON.stringify(payload) 
+                    });
+                    
+                    if (response.status === 429 || response.status >= 500) {
+                        throw new Error(`API Error: ${response.status}`);
+                    }
+                    
+                    if (!response.ok) { 
+                        const errorResult = await response.json(); 
+                        console.error("Gemini API Error:", errorResult); 
+                        throw new Error(`Gemini API Error: ${errorResult.error?.message || response.statusText}`); 
+                    }
+                    
+                    const result = await response.json();
+                    const candidate = result.candidates?.[0];
+                    
+                    if (!candidate) throw new Error("Invalid API response: No candidates found.");
+                    
+                    if (payload.generationConfig?.responseMimeType === "application/json") {
+                        const text = candidate.content?.parts?.[0]?.text;
+                        if (!text) throw new Error("Invalid API response: No text part found for JSON.");
+                        return text;
+                    }
+                    
+                    const text = candidate.content?.parts?.[0]?.text;
+                    if (typeof text !== 'string') throw new Error("Invalid API response: No text content found.");
+                    return text;
+                } catch (error) {
+                    console.warn(`Gemini API call attempt ${attempt + 1} failed: ${error.message}`);
+                    attempt++;
+                    if (attempt >= maxRetries) throw new Error(`Gemini API failed after ${maxRetries} attempts: ${error.message}`);
+                    await new Promise(resolve => setTimeout(resolve, delay));
+                    delay *= 2;
+                }
+            }
+        }
+        
+        // Image Generation
+        async function callImagenApi(userPrompt, maxRetries = 5) {
+            const apiKey = ""; // API key is handled by the environment
+            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/imagen-3.0-generate-002:predict?key=${apiKey}`;
+            
+            const payload = { 
+                instances: { prompt: userPrompt }, 
+                parameters: { "sampleCount": 1 } 
+            };
+            
+            let attempt = 0, delay = 1000;
+            while (attempt < maxRetries) {
+                try {
+                    const response = await fetch(apiUrl, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload)
+                    });
+
+                    if (response.status === 429 || response.status >= 500) {
+                        throw new Error(`API Error: ${response.status}`);
+                    }
+                    
+                    if (!response.ok) {
+                        const errorResult = await response.json();
+                        console.error("Imagen API Error:", errorResult);
+                        throw new Error(`Imagen API Error: ${errorResult.error?.message || response.statusText}`);
+                    }
+                    
+                    const result = await response.json();
+                    
+                    if (result.predictions && result.predictions.length > 0 && result.predictions[0].bytesBase64Encoded) {
+                        return `data:image/png;base64,${result.predictions[0].bytesBase64Encoded}`;
                     } else {
-                        await signInAnonymously(auth);
+                        throw new Error("Invalid API response: No image data found.");
                     }
+
                 } catch (error) {
-                    console.error("Error during anonymous sign-in:", error);
+                    console.warn(`Imagen API call attempt ${attempt + 1} failed: ${error.message}`);
+                    attempt++;
+                    if (attempt >= maxRetries) {
+                        throw new Error(`Imagen API failed after ${maxRetries} attempts: ${error.message}`);
+                    }
+                    await new Promise(resolve => setTimeout(resolve, delay));
+                    delay *= 2;
                 }
             }
-        });
+        }
+        
+        // NEW: TTS Generation
+        async function callTtsApi(textToSpeak, maxRetries = 5) {
+            const apiKey = "";
+            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-tts:generateContent?key=${apiKey}`;
+            
+            const payload = {
+                contents: [{
+                    parts: [{ text: textToSpeak }]
+                }],
+                generationConfig: {
+                    responseModalities: ["AUDIO"],
+                    speechConfig: {
+                        voiceConfig: {
+                            prebuiltVoiceConfig: { voiceName: "Kore" } // Using 'Kore' voice
+                        }
+                    }
+                },
+                model: "gemini-2.5-flash-preview-tts"
+            };
 
-    } catch (error) {
-        console.error("Failed to initialize Firebase:", error);
-        document.body.innerHTML = `<div class="p-8 text-center text-red-600"><h1 class="text-2xl font-bold">Application Error</h1><p class="mt-2">Could not connect to services.</p></div>`;
-    }
-});
-// API call functions
-async function callGeminiApi(payload) {
-    try {
-        // API implementation
-        console.log('Calling Gemini API with payload:', payload);
-        // ...
-    } catch (error) {
-        console.error('API Error:', error);
-        throw error;
-    }
-}
-
-// Other utility functions
-function showModal(modalEl) {
-    modalEl.classList.remove('opacity-0', 'pointer-events-none');
-    modalEl.querySelector('.modal-content').classList.remove('-translate-y-10');
-}
-
-function hideModal(modalEl) {
-    modalEl.classList.add('opacity-0', 'pointer-events-none');
-    modalEl.querySelector('.modal-content').classList.add('-translate-y-10');
-}
+            let attempt = 0, delay = 1000;
+            while (attempt < maxRetries) {
+                try {
+                    const response = await fetch(apiUrl, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload)
+                    });
+
+                    if (response.status === 429 || response.status >= 500) throw new Error(`API Error: ${response.status}`);
+                    if (!response.ok) { 
+                        const errorResult = await response.json(); 
+                        console.error("TTS API Error:", errorResult); 
+                        throw new Error(`TTS API Error: ${errorResult.error?.message || response.statusText}`); 
+                    }
+                    
+                    const result = await response.json();
+                    const part = result?.candidates?.[0]?.content?.parts?.[0];
+                    const audioData = part?.inlineData?.data;
+                    const mimeType = part?.inlineData?.mimeType;
+
+                    if (audioData && mimeType && mimeType.startsWith("audio/")) {
+                        const sampleRate = parseInt(mimeType.match(/rate=(\d+)/)[1], 10) || 24000;
+                        return { audioData, sampleRate };
+                    } else {
+                        throw new Error("Invalid API response: No audio data found.");
+                    }
+                } catch (error) {
+                    console.warn(`TTS API call attempt ${attempt + 1} failed: ${error.message}`);
+                    attempt++;
+                    if (attempt >= maxRetries) throw new Error(`TTS API failed after ${maxRetries} attempts: ${error.message}`);
+                    await new Promise(resolve => setTimeout(resolve, delay));
+                    delay *= 2;
+                }
+            }
+        }
+        
+        // --- TTS Audio Helpers ---
+        
+        // NEW: Decodes base64 string to ArrayBuffer
+        function base64ToArrayBuffer(base64) {
+            const binaryString = window.atob(base64);
+            const len = binaryString.length;
+            const bytes = new Uint8Array(len);
+            for (let i = 0; i < len; i++) {
+                bytes[i] = binaryString.charCodeAt(i);
+            }
+            return bytes.buffer;
+        }
+
+        // NEW: Wraps raw PCM data in a WAV header
+        function pcmToWav(pcmData, sampleRate) {
+            const numChannels = 1;
+            const bitsPerSample = 16;
+            const byteRate = sampleRate * numChannels * (bitsPerSample / 8);
+            const blockAlign = numChannels * (bitsPerSample / 8);
+            const dataSize = pcmData.byteLength;
+            const fileSize = 36 + dataSize;
+
+            const buffer = new ArrayBuffer(44 + dataSize);
+            const view = new DataView(buffer);
+
+            // RIFF header
+            writeString(view, 0, 'RIFF');
+            view.setUint32(4, fileSize, true);
+            writeString(view, 8, 'WAVE');
+            
+            // fmt chunk
+            writeString(view, 12, 'fmt ');
+            view.setUint32(16, 16, true); // chunk size
+            view.setUint16(20, 1, true);  // audio format (1 = PCM)
+            view.setUint16(22, numChannels, true);
+            view.setUint32(24, sampleRate, true);
+            view.setUint32(28, byteRate, true);
+            view.setUint16(32, blockAlign, true);
+            view.setUint16(34, bitsPerSample, true);
+            
+            // data chunk
+            writeString(view, 36, 'data');
+            view.setUint32(40, dataSize, true);
+
+            // Write PCM data
+            new Uint8Array(buffer, 44).set(new Uint8Array(pcmData));
+
+            return new Blob([buffer], { type: 'audio/wav' });
+        }
+        
+        // NEW: Helper for pcmToWav
+        function writeString(view, offset, string) {
+            for (let i = 0; i < string.length; i++) {
+                view.setUint8(offset + i, string.charCodeAt(i));
+            }
+        }
+
+        /**
+         * Loads the agent configuration from Firestore.
+         */
+        async function loadAgentConfig() {
+            if (!agentConfigDocRef) return;
+            try {
+                const docSnap = await getDoc(agentConfigDocRef);
+                if (docSnap.exists()) {
+                    console.log("Loaded data from Firestore:", docSnap.data());
+                    appState = { ...defaultAppState, ...docSnap.data() };
+                } else {
+                    console.log("No saved config found, using default.");
+                    appState = { ...defaultAppState };
+                }
+            } catch (error) {
+                console.error("Error loading agent config:", error);
+                appState = { ...defaultAppState };
+            }
+        }
+        
+        // --- Auth Functions ---
+        async function signInWithGoogle() {
+            const provider = new GoogleAuthProvider();
+            try {
+                await signInWithPopup(auth, provider);
+                toggleProfileSidebar();
+            } catch (error) { 
+                console.error("Google Sign-In Error:", error); 
+            }
+        }
+        
+        async function signInWithGitHub() {
+            const provider = new GithubAuthProvider();
+            try {
+                await signInWithPopup(auth, provider);
+                toggleProfileSidebar();
+            } catch (error) { 
+                console.error("GitHub Sign-In Error:", error); 
+            }
+        }
+        
+        async function handleSignOut() {
+            try {
+                await signOut(auth);
+                toggleProfileSidebar();
+            } catch (error) { 
+                console.error("Sign-Out Error:", error); 
+            }
+        }
+        
+        async function handleSaveProfile() {
+            const currentUser = auth.currentUser;
+            if (!currentUser || currentUser.isAnonymous || 
+                !profileDisplayNameInput || !profileImgUrlInput || !profileBioInput || 
+                !saveProfileBtn || !agentConfigDocRef) return;
+                
+            const displayName = profileDisplayNameInput.value.trim();
+            const photoURL = profileImgUrlInput.value.trim();
+            const bio = profileBioInput.value.trim();
+            
+            saveProfileBtn.textContent = "Saving...";
+            saveProfileBtn.disabled = true;
+            saveProfileBtn.classList.add('btn-disabled');
+            
+            try {
+                await updateProfile(currentUser, { displayName, photoURL });
+                const profileData = { displayName, photoURL, bio };
+                await setDoc(agentConfigDocRef, profileData, { merge: true });
+                appState.displayName = displayName;
+                appState.photoURL = photoURL;
+                appState.bio = bio;
+                updateImagePreviews(photoURL);
+                saveProfileBtn.textContent = "Profile Saved!";
+                saveProfileBtn.classList.add('bg-green-600');
+                
+                setTimeout(() => {
+                    saveProfileBtn.textContent = "Save Profile";
+                    saveProfileBtn.disabled = false;
+                    saveProfileBtn.classList.remove('btn-disabled', 'bg-green-600');
+                }, 2000);
+            } catch (error) {
+                console.error("Error saving profile:", error);
+                saveProfileBtn.textContent = "Save Failed";
+                saveProfileBtn.classList.add('bg-red-600');
+                
+                setTimeout(() => {
+                    saveProfileBtn.textContent = "Save Profile";
+                    saveProfileBtn.disabled = false;
+                    saveProfileBtn.classList.remove('btn-disabled', 'bg-red-600');
+                }, 2000);
+            }
+        }
+        
+        // --- AI Feature Handlers ---
+        
+        async function handleSuggestBio() {
+            if (!profileDisplayNameInput || !profileBioInput) return;
+            
+            const agentRole = profileDisplayNameInput.value.trim();
+            if (!agentRole) {
+                profileBioInput.placeholder = "Please enter a Display Name first, then click ✨ Suggest.";
+                return;
+            }
+            
+            const userQuery = `Based on the following name or role, write a short, professional bio (1-2 sentences). Role: "${agentRole}" Return ONLY the bio text, with no preamble or quotes.`;
+            const payload = {
+                contents: [{ parts: [{ text: userQuery }] }],
+                systemInstruction: { parts: [{ text: "You are a professional profile writer. You return only the bio text." }] }
+            };
+            
+            showLoading("Generating bio...");
+            try {
+                const generatedText = await callGeminiApi(payload);
+                const cleanText = generatedText.replace(/["*]/g, "").trim();
+                profileBioInput.value = cleanText;
+            } catch (error) {
+                console.error(error);
+                profileBioInput.value = `Error: ${error.message}`;
+            } finally {
+                hideLoading();
+            }
+        }
+        
+        async function handleTestAgentSend(e) {
+            e.preventDefault();
+            if (!testAgentInput || !testAgentHistory) return;
+            
+            const userMessage = testAgentInput.value.trim();
+            if (!userMessage) return;
+            
+            testAgentInput.value = '';
+            renderTestChatMessage('user', userMessage);
+            setChatTyping(true);
+            testChatHistory.push({ role: "user", parts: [{ text: userMessage }] });
+            
+            let finalSystemInstructions = appState.instructions || "You are a helpful assistant.";
+            let payloadTools = [];
+            
+            if (appState.knowledge.urls.length > 0 && appState.knowledge.prioritize) {
+                finalSystemInstructions += `\n\nCRITICAL KNOWLEDGE: You MUST use the provided Google Search tool to find information to answer the user's query. You must prioritize information from these specific websites: ${appState.knowledge.urls.join(', ')}. If the answer cannot be found in those sources, you should state that.`;
+                payloadTools.push({ "google_search": {} });
+            }
+            
+            const payload = {
+                contents: testChatHistory,
+                systemInstruction: { parts: [{ text: finalSystemInstructions }] }
+            };
+            
+            if (payloadTools.length > 0) {
+                payload.tools = payloadTools;
+            }
+            
+            try {
+                const modelResponse = await callGeminiApi(payload);
+                testChatHistory.push({ role: "model", parts: [{ text: modelResponse }] });
+                setChatTyping(false);
+                renderTestChatMessage('model', modelResponse);
+            } catch (error) {
+                console.error("Test Agent Chat Error:", error);
+                setChatTyping(false);
+                renderTestChatMessage('model', `Sorry, an error occurred: ${error.message}`);
+            }
+        }
+        
+        async function handleImageGenTest(e) {
+            e.preventDefault();
+            if (!imageGenInput || !imageGenResultContainer || !imageGenError || 
+                !imageGenResult || !imageGenSpinner) return;
+                
+            const userPrompt = imageGenInput.value.trim();
+            if (!userPrompt) return;
+
+            imageGenResultContainer.classList.add('loading');
+            imageGenError.textContent = '';
+            imageGenError.classList.add('hidden');
+            imageGenResult.classList.add('hidden');
+
+            try {
+                const imageUrl = await callImagenApi(userPrompt);
+                imageGenResult.src = imageUrl;
+                imageGenResult.alt = userPrompt;
+                imageGenResult.classList.remove('hidden');
+            } catch (error) {
+                console.error("Image Gen Test Error:", error);
+                imageGenError.textContent = `Error: ${error.message}`;
+                imageGenError.classList.remove('hidden');
+            } finally {
+                imageGenResultContainer.classList.remove('loading');
+            }
+        }
+        
+        // NEW: Handle TTS for instructions
+        async function handleListenInstructions() {
+            if (!agentInstructionsInput || !listenInstructionsBtn || !ttsPlayer) return;
+            
+            const text = agentInstructionsInput.value.trim();
+            if (!text) return;
+            
+            const icon = listenInstructionsBtn.querySelector('svg');
+            listenInstructionsBtn.disabled = true;
+            if (icon) icon.classList.add('spinner');
+
+            try {
+                const { audioData, sampleRate } = await callTtsApi(text);
+                const pcmBuffer = base64ToArrayBuffer(audioData);
+                const wavBlob = pcmToWav(pcmBuffer, sampleRate);
+                const audioUrl = URL.createObjectURL(wavBlob);
+                
+                ttsPlayer.src = audioUrl;
+                ttsPlayer.play();
+
+            } catch (error) {
+                console.error("TTS Error:", error);
+            } finally {
+                listenInstructionsBtn.disabled = false;
+                if (icon) icon.classList.remove('spinner');
+            }
+        }
+        
+        // NEW: Handle Code Interpreter Test
+        async function handleCodeInterpreterTest() {
+            if (!codeTestResultContainer || !codeTestSpinner || !codeTestResult) return;
+            
+            codeTestResultContainer.classList.add('loading');
+            codeTestSpinner.style.display = 'flex';
+            codeTestResult.style.display = 'none';
+
+            const agentRole = appState.agentName.trim() || "a helpful assistant";
+            const userQuery = `You are a code interpreter. Your agent role is "${agentRole}". 
+Generate a simple Python code snippet that demonstrates this role.
+Return ONLY the Python code, inside \`\`\`python ... \`\`\` tags.`;
+            
+            const payload = { 
+                contents: [{ parts: [{ text: userQuery }] }], 
+                systemInstruction: { parts: [{ text: "You are a helpful code generation assistant. You only return code." }] } 
+            };
+            
+            try {
+                const generatedText = await callGeminiApi(payload);
+                // Clean up markdown fences
+                const cleanCode = generatedText.replace(/^