G.E.N.I.EmarkII

Sleeping

App Files Files Community

nihalaninihal commited on Apr 13

Commit

76006d4

verified ·

1 Parent(s): b049a63

Update index.html

Browse files

Files changed (1) hide show

index.html +538 -224

index.html CHANGED Viewed

@@ -221,6 +221,22 @@
             100% { transform: scale(1); }
         }
         /* Responsive Design */
         /* Stack columns on smaller screens */
         .main-container {
@@ -296,17 +312,45 @@
              gap: 0.75rem; /* Space between grid items */
         }
     </style>
 </head>
-<body class="text-sm md:text-base"> <div class="main-container">
         <div class="chat-section">
             <div class="text-center mb-3 md:mb-4">
                 <h1 class="text-2xl md:text-3xl font-bold text-purple-300">G.E.N.I.E.</h1>
                 <p class="text-purple-100 text-xs md:text-sm">
                     GitHub Enhanced Natural Intelligence Engine <br class="md:hidden">
                     <span class="hidden md:inline"> - </span>
-                  A voice-controlled AI that “grants your GitHub wishes.”
                 </p>
             </div>
@@ -343,10 +387,18 @@
         </div>
         <div class="status-section">
-             <div class="status-content"> {/* Wrapper for centering content */}
                 <h2 id="agentStatusTitle" class="text-lg md:text-xl font-semibold text-purple-400 text-center">G.E.N.I.E. Status</h2>
                 <div id="genieOrb" class="genie-orb"></div>
                 <button id="interruptButton" class="interrupt-button hidden">Interrupt G.E.N.I.E.</button>
                 <div class="w-full glass-panel p-3 md:p-4 h-32 md:h-40 overflow-y-auto custom-scrollbar">
                     <h3 class="text-base md:text-lg font-medium text-purple-300 mb-2 border-b border-purple-700 pb-1">G.E.N.I.E. Output:</h3>
                     <p id="genieOutput" class="text-xs md:text-sm whitespace-pre-wrap">Awaiting your command...</p>
@@ -358,9 +410,9 @@
     <script>
         // --- DOM Elements ---
         const repoUrlInput = document.getElementById('repoUrl');
-        const githubTokenInput = document.getElementById('githubToken'); // New
-        const userTypeSelect = document.getElementById('userType');     // New
-        const responseDetailSelect = document.getElementById('responseDetail'); // New
         const userQueryInput = document.getElementById('userQuery');
         const sendButton = document.getElementById('sendButton');
         const micButton = document.getElementById('micButton');
@@ -369,53 +421,345 @@
         const genieOrb = document.getElementById('genieOrb');
         const genieOutput = document.getElementById('genieOutput');
         const agentStatusTitle = document.getElementById('agentStatusTitle');
         // --- State ---
         let isListening = false;
         let botResponseTimeoutId = null;
         let thinkingMessageElement = null;
-        let isBotActive = false;
-        // --- Event Listeners ---
-        sendButton.addEventListener('click', handleSendQuery);
-        userQueryInput.addEventListener('keypress', (event) => {
-            if (event.key === 'Enter' && !event.shiftKey) { // Send on Enter, allow Shift+Enter for newline
-                 event.preventDefault(); // Prevent default newline behavior
-                handleSendQuery();
             }
-        });
-        userQueryInput.addEventListener('input', handleTypingInterrupt);
-        micButton.addEventListener('click', handleMicButtonClick);
-        interruptButton.addEventListener('click', handleInterrupt);
-        // --- Functions ---
-        function handleMicButtonClick() {
             // If the bot is actively processing, the mic button acts as an interrupt
             if (isBotActive) {
                 handleInterrupt();
-            } else {
-                // Otherwise, toggle listening mode
-                toggleListeningMode();
             }
         }
-        function toggleListeningMode() {
-            if (isBotActive) return; // Don't toggle if bot is busy
             isListening = !isListening;
             micButton.classList.toggle('listening', isListening);
             genieOrb.classList.toggle('listening', isListening);
             if (isListening) {
                 setBotActiveState(false); // Ensure bot is not marked active
                 agentStatusTitle.textContent = "G.E.N.I.E. Status: Listening...";
-                updateGenieText("Listening... (Simulation - Type your wish and press Ask)");
-                userQueryInput.focus();
                 micButton.title = "Stop Listening / Interrupt"; // Update tooltip
             } else {
-                 micButton.title = "Toggle Listening Mode / Interrupt"; // Reset tooltip
-                // Only reset status if the bot isn't currently active (e.g., thinking)
                 if (!isBotActive) {
                     agentStatusTitle.textContent = "G.E.N.I.E. Status";
                     // Only reset output if it was showing the listening message
@@ -438,76 +782,107 @@
             if (isListening) {
                 toggleListeningMode();
             }
             // Prevent sending if bot is already active
             if (isBotActive) {
-                 console.log("G.E.N.I.E. is active, cannot send new query yet.");
-                 // Maybe add a subtle visual cue here later
-                 return;
             }
             const repoUrl = repoUrlInput.value.trim();
             const query = userQueryInput.value.trim();
-            const githubToken = githubTokenInput.value.trim(); // Get token (optional)
-            const userType = userTypeSelect.value;             // Get user type
-            const responseDetail = responseDetailSelect.value; // Get detail level
             // Basic Validations
             if (!query) {
-                showTemporaryAlert(userQueryInput, 'Please state your wish (enter a query).');
                 return;
             }
             if (!isValidHttpUrl(repoUrl)) {
-                 showTemporaryAlert(repoUrlInput, 'Please provide a valid GitHub repository URL (starting with http:// or https://).');
-                 return;
             }
             // Add user message to chat
             addMessageToChat(query, 'user');
             userQueryInput.value = ''; // Clear input field
-            // Simulate bot processing and response
-            simulateBotResponse(repoUrl, query, userType, responseDetail, githubToken);
-        }
-        function handleInterrupt() {
-            if (botResponseTimeoutId) {
-                console.log("Interrupt triggered by user.");
-                clearTimeout(botResponseTimeoutId);
-                botResponseTimeoutId = null;
-                // Remove the "thinking" message if it exists
                 if (thinkingMessageElement) {
                     thinkingMessageElement.remove();
                     thinkingMessageElement = null;
                 }
-                // Reset bot state
                 setBotActiveState(false);
-                // Add an interrupted message to chat
-                addMessageToChat("Processing interrupted by user.", 'interrupted');
-                updateGenieText("Interrupted. Ready for your next wish.");
-                // Refocus input for convenience
-                userQueryInput.focus();
-            } else {
-                 console.log("Interrupt called but G.E.N.I.E. was not actively processing.");
             }
         }
         function addMessageToChat(message, type) {
             const messageElement = document.createElement('div');
             messageElement.classList.add('chat-bubble');
             // Stop listening visual cues if a message is added
-            if (isListening) {
                 genieOrb.classList.remove('listening');
                 micButton.classList.remove('listening');
                 isListening = false; // Ensure state is updated
                 micButton.title = "Toggle Listening Mode / Interrupt"; // Reset tooltip
             }
             switch (type) {
                 case 'user':
                     messageElement.classList.add('user-bubble');
@@ -517,173 +892,68 @@
                     messageElement.classList.add('bot-bubble');
                     messageElement.textContent = message;
                     updateGenieText(message); // Update status output
-                    // Short delay before resetting active state to allow UI update
-                    if (botResponseTimeoutId) clearTimeout(botResponseTimeoutId); // Clear any pending timeout
-                    botResponseTimeoutId = null; // Ensure timeout ID is cleared
-                    setTimeout(() => {
-                        if(isBotActive) setBotActiveState(false); // Reset state after response is shown
-                    }, 100); // Small delay
                     break;
                 case 'thinking':
                     messageElement.classList.add('bot-bubble', 'thinking');
                     messageElement.innerHTML = `Consulting the digital ether... <div class="dot-flashing"></div>`;
                     updateGenieText("Processing your wish..."); // Update status output
-                    setBotActiveState(true); // Set bot to active state
                     thinkingMessageElement = messageElement; // Store reference to remove later
                     break;
                 case 'interrupted':
-                     messageElement.classList.add('bot-bubble', 'interrupted');
-                     messageElement.textContent = message;
-                     // Status text is updated in handleInterrupt
-                     break;
                 default:
                     console.error("Unknown message type:", type);
                     return null; // Don't add unknown types
             }
             chatHistory.appendChild(messageElement);
             // Scroll to the bottom smoothly after adding message
-            // Use setTimeout to ensure element is rendered before scrolling
             setTimeout(() => {
                 chatHistory.scrollTo({ top: chatHistory.scrollHeight, behavior: 'smooth' });
             }, 50);
             return messageElement; // Return the created element
         }
-        function simulateBotResponse(repoUrl, query, userType, responseDetail, githubToken) {
-            // Start the thinking state
-            thinkingMessageElement = addMessageToChat('', 'thinking');
-            // Simulate network delay/processing time
-            const delay = 2000 + Math.random() * 3500; // 2 to 5.5 seconds
-            // Clear any previous timeout just in case
-            if (botResponseTimeoutId) clearTimeout(botResponseTimeoutId);
-            botResponseTimeoutId = setTimeout(() => {
-                // Check if it was interrupted *before* this timeout fired
-                const wasInterrupted = !thinkingMessageElement;
-                if (wasInterrupted) {
-                     console.log("G.E.N.I.E. response timeout fired, but was already interrupted.");
-                     botResponseTimeoutId = null; // Clear ID as it's no longer needed
-                     // No need to reset state here, handleInterrupt already did
-                     return;
-                }
-                // If not interrupted, remove the thinking message
-                if (thinkingMessageElement) {
-                    thinkingMessageElement.remove();
-                    thinkingMessageElement = null;
-                }
-                botResponseTimeoutId = null; // Clear the timeout ID
-                // Generate a sample response (incorporating preferences cosmetically)
-                const botResponse = generateSampleResponse(repoUrl, query, userType, responseDetail, githubToken);
-                // Add the actual bot response to the chat
-                addMessageToChat(botResponse, 'bot');
-                // The 'bot' case in addMessageToChat now handles resetting the active state
-            }, delay);
-        }
-        // Updated to include preferences (cosmetic for now)
-        function generateSampleResponse(repoUrl, query, userType, responseDetail, githubToken) {
-            const repoName = repoUrl.substring(repoUrl.lastIndexOf('/') + 1) || "[Unknown Repo]";
-            query = query.toLowerCase();
-            let responsePrefix = "";
-            let detailModifier = 1; // 1 = normal, <1 = concise, >1 = detailed
-            // Adjust detail level (simple multiplier for example length)
-            if (responseDetail === 'concise') detailModifier = 0.6;
-            if (responseDetail === 'detailed') detailModifier = 1.5;
-            // Add flavor based on user type
-            switch (userType) {
-                case 'manager': responsePrefix = "From a high-level view, "; break;
-                case 'researcher': responsePrefix = "Digging into the details, "; break;
-                case 'student': responsePrefix = "To help with your learning, "; break;
-                // Coder gets no specific prefix (default)
-            }
-             // Acknowledge token if provided (SIMULATION ONLY)
-             if (githubToken) {
-                 console.log("Simulating use of GitHub Token (not actually used):", githubToken.substring(0, 4) + "...");
-                 // You could add a note in the response, but be careful not to leak info
-                 // responsePrefix += "(Using provided token access) ";
-             }
-            // Basic query matching with some flavor
-            if (query.includes("what is this repo") || query.includes("summarize")) {
-                let base = `As you wish! The repository '${repoName}' appears to be `;
-                let example = `[a ${Math.random() > 0.5 ? 'JavaScript library for UI components' : 'Python backend for data processing'}, focusing on ${Math.random() > 0.5 ? 'performance and modularity' : 'ease of use and integration'}].`;
-                if (detailModifier > 1) example += ` It likely utilizes technologies like [React/Vue or Django/Flask] and follows standard project layout conventions. Recent activity suggests ongoing development.`;
-                if (detailModifier < 1) example = `[a ${Math.random() > 0.5 ? 'JS UI library' : 'Python data backend'}].`;
-                 return responsePrefix + base + example;
-             }
-            if (query.includes("main language") || query.includes("written in")) {
-                const languages = ["JavaScript", "Python", "Java", "TypeScript", "Go", "CSS", "Ruby", "PHP"];
-                const randomLang = languages[Math.floor(Math.random() * languages.length)];
-                let base = `Gazing into the code of '${repoName}', I reveal the primary language appears to be ${randomLang}. `;
-                let example = `Hints of [${languages[Math.floor(Math.random() * languages.length)]}] may also be present.`;
-                 if (detailModifier > 1) example += ` Analysis suggests around ${Math.floor(Math.random()*30+60)}% of the codebase is ${randomLang}.`;
-                 if (detailModifier < 1) example = ""; // Concise just gives the main language
-                 return responsePrefix + base + example;
-            }
-            if (query.includes("how many files") || query.includes("file count")) {
-                const fileCount = Math.floor(Math.random() * (800 * detailModifier) + 50);
-                return responsePrefix + `By my count, the main branch of '${repoName}' contains approximately ${fileCount} files and directories.`;
-            }
-            if (query.includes("docker") || query.includes("container")) {
-                 let base = Math.random() > 0.4 ? `Indeed! A Dockerfile has manifested in '${repoName}'` : `Alas, a standard Dockerfile is hidden from my sight in the root of '${repoName}'`;
-                 let example = Math.random() > 0.4 ? `, indicating readiness for containerization using standard Docker tooling.` : `, but containerization magic might be conjured via other means like docker-compose or custom scripts.`;
-                 if (detailModifier < 1) example = Math.random() > 0.4 ? ", suggesting container support." : ", no obvious Dockerfile found.";
-                 return responsePrefix + base + example;
-            }
-             if (query.includes("test") || query.includes("coverage")) {
-                 let base = `The repository '${repoName}' reveals signs of testing charms. `;
-                 let example = `I see evidence of a '/tests' or '/spec' directory, possibly utilizing frameworks like [Jest/Pytest/RSpec].`;
-                 if (detailModifier > 1) example += ` Configuration files suggest integration with CI/CD pipelines for automated testing. Code coverage analysis might be configured.`;
-                 if (detailModifier < 1) example = `Testing files seem present.`;
-                 return responsePrefix + base + example;
-             }
-            if (query.includes("hello") || query.includes("hi") || query.includes("greetings")) {
-                return `Greetings, Master ${userType}! How may G.E.N.I.E. assist you with the '${repoName}' repository today? State your wish!`;
-            }
-            // Default fallback response
-            let fallback = `I have considered your wish regarding '${repoName}' concerning "${query.substring(0, 30)}...". `;
-            let example = `My vision suggests that [${Math.random() > 0.5 ? 'the file structure seems reasonably organized' : 'recent commit activity implies active maintenance'}].`;
-             if (detailModifier > 1) example += ` It likely utilizes common libraries for its domain, such as [mention a relevant library type like 'data visualization' or 'web framework']. Dependencies seem managed via [npm/pip/maven].`;
-             if (detailModifier < 1) example = `It appears to be a standard project.`;
-            fallback += example + ` For deeper secrets, phrase your wish more specifically.`;
-            return responsePrefix + fallback;
-        }
-        /** Updates the G.E.N.I.E. output text in the status panel */
         function updateGenieText(text) {
             genieOutput.textContent = text;
         }
-        /** Sets the visual state indicating if the bot is actively processing */
-        function setBotActiveState(isActive) {
             isBotActive = isActive;
             genieOrb.classList.toggle('active', isActive);
             interruptButton.classList.toggle('hidden', !isActive);
-            sendButton.disabled = isActive; // Disable send button while active
-            userQueryInput.disabled = isActive; // Optionally disable query input too
-            repoUrlInput.disabled = isActive; // Disable repo URL input
-            githubTokenInput.disabled = isActive; // Disable token input
-            userTypeSelect.disabled = isActive; // Disable user type select
-            responseDetailSelect.disabled = isActive; // Disable detail select
             if (isActive) {
                 // If activating, ensure listening mode is off
                 if (isListening) {
                     toggleListeningMode(); // Turn off listening visuals/state
                 }
-                agentStatusTitle.textContent = "G.E.N.I.E. Status: Fulfilling Wish...";
                 micButton.title = "Interrupt G.E.N.I.E."; // Mic becomes interrupt
             } else {
                 // Reset status title only if not currently listening
@@ -691,18 +961,19 @@
                     agentStatusTitle.textContent = "G.E.N.I.E. Status";
                     updateGenieText("Awaiting your command..."); // Reset output text
                 }
-                 micButton.title = "Toggle Listening Mode / Interrupt"; // Reset mic title
                 // Clear any lingering timeout or thinking message reference
                 if (botResponseTimeoutId) {
                     clearTimeout(botResponseTimeoutId);
                     botResponseTimeoutId = null;
                 }
                 thinkingMessageElement = null;
             }
         }
-        /** Checks if a string is a valid HTTP/HTTPS URL */
         function isValidHttpUrl(string) {
             try {
                 const url = new URL(string);
@@ -712,28 +983,71 @@
             }
         }
-        /** Shows a temporary red border and message on an input element */
-        function showTemporaryAlert(element, message) {
-            element.style.borderColor = '#ff6b6b'; // Red border
-            element.style.boxShadow = '0 0 10px rgba(255, 107, 107, 0.4)';
-            // Optionally, display the message near the element or use a dedicated alert area
-            console.warn("Validation Error:", message); // Log for debugging
-            // You could add a small temporary message element below the input
             setTimeout(() => {
-                element.style.borderColor = ''; // Reset border color
-                element.style.boxShadow = ''; // Reset box shadow
-            }, 2500); // Reset after 2.5 seconds
-            element.focus();
         }
-        // --- Initial Setup ---
-        updateGenieText("Standing by. Please provide a GitHub repo URL, set preferences, and state your wish, or click 🎙️.");
-        interruptButton.classList.add('hidden'); // Start hidden
-        sendButton.disabled = false; // Start enabled
-        // Ensure initial state is not active
-        setBotActiveState(false);
     </script>
 </body>
-</html>

             100% { transform: scale(1); }
         }
+        /* Audio visualizer */
+        .box-container {
+            display: flex;
+            justify-content: space-between;
+            height: 64px;
+            width: 100%;
+            margin-top: 1rem;
+        }
+        .box {
+            height: 100%;
+            width: 8px;
+            background: var(--color-accent, #6366f1);
+            border-radius: 8px;
+            transition: transform 0.05s ease;
+        }
         /* Responsive Design */
         /* Stack columns on smaller screens */
         .main-container {
              gap: 0.75rem; /* Space between grid items */
         }
+        /* Toast notification */
+        .toast {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            padding: 16px 24px;
+            border-radius: 4px;
+            font-size: 14px;
+            z-index: 1000;
+            display: none;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+        }
+        .toast.error {
+            background-color: #f44336;
+            color: white;
+        }
+        .toast.warning {
+            background-color: #ffd700;
+            color: black;
+        }
+        .toast.info {
+            background-color: #2196F3;
+            color: white;
+        }
     </style>
 </head>
+<body class="text-sm md:text-base">
+    <!-- Toast notification element -->
+    <div id="toast" class="toast"></div>
+    <div class="main-container">
         <div class="chat-section">
             <div class="text-center mb-3 md:mb-4">
                 <h1 class="text-2xl md:text-3xl font-bold text-purple-300">G.E.N.I.E.</h1>
                 <p class="text-purple-100 text-xs md:text-sm">
                     GitHub Enhanced Natural Intelligence Engine <br class="md:hidden">
                     <span class="hidden md:inline"> - </span>
+                    A voice-controlled AI that "grants your GitHub wishes."
                 </p>
             </div>
         </div>
         <div class="status-section">
+             <div class="status-content"> <!-- Wrapper for centering content -->
                 <h2 id="agentStatusTitle" class="text-lg md:text-xl font-semibold text-purple-400 text-center">G.E.N.I.E. Status</h2>
                 <div id="genieOrb" class="genie-orb"></div>
                 <button id="interruptButton" class="interrupt-button hidden">Interrupt G.E.N.I.E.</button>
+                <!-- Audio visualizer -->
+                <div class="glass-panel p-3 md:p-4 w-full">
+                    <div class="box-container" id="audioVisualizer">
+                        <!-- Bars will be added dynamically -->
+                    </div>
+                </div>
                 <div class="w-full glass-panel p-3 md:p-4 h-32 md:h-40 overflow-y-auto custom-scrollbar">
                     <h3 class="text-base md:text-lg font-medium text-purple-300 mb-2 border-b border-purple-700 pb-1">G.E.N.I.E. Output:</h3>
                     <p id="genieOutput" class="text-xs md:text-sm whitespace-pre-wrap">Awaiting your command...</p>
     <script>
         // --- DOM Elements ---
         const repoUrlInput = document.getElementById('repoUrl');
+        const githubTokenInput = document.getElementById('githubToken');
+        const userTypeSelect = document.getElementById('userType');
+        const responseDetailSelect = document.getElementById('responseDetail');
         const userQueryInput = document.getElementById('userQuery');
         const sendButton = document.getElementById('sendButton');
         const micButton = document.getElementById('micButton');
         const genieOrb = document.getElementById('genieOrb');
         const genieOutput = document.getElementById('genieOutput');
         const agentStatusTitle = document.getElementById('agentStatusTitle');
+        const toast = document.getElementById('toast');
+        const audioVisualizer = document.getElementById('audioVisualizer');
+        const audioOutput = new Audio();
         // --- State ---
         let isListening = false;
+        let isBotActive = false;
         let botResponseTimeoutId = null;
         let thinkingMessageElement = null;
+        let webSocket = null;
+        let audioContext = null;
+        let audioAnalyser = null;
+        let microphoneStream = null;
+        let microphoneProcessor = null;
+        let audioSequence = 0;
+        let isConnected = false;
+        let isGeminiResponding = false;
+        // --- WebSocket and Audio Setup ---
+        function setupWebSocket() {
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const wsUrl = `${protocol}//${window.location.host}/ws`;
+            webSocket = new WebSocket(wsUrl);
+            webSocket.onopen = () => {
+                console.log("WebSocket connection established");
+                isConnected = true;
+                showToast("Connected to G.E.N.I.E. server", "info");
+                // Send initial preferences when connection is established
+                sendPreferences();
+            };
+            webSocket.onmessage = (event) => {
+                const message = JSON.parse(event.data);
+                if (message.type === "audio") {
+                    // Convert base64 to audio buffer and play
+                    playAudioFromServer(message.payload);
+                    // Set Gemini as responding when we get audio data
+                    if (!isGeminiResponding) {
+                        isGeminiResponding = true;
+                        setBotActiveState(true, false); // Active but not thinking
+                    }
+                } else if (message.type === "text") {
+                    // Handle text responses
+                    addMessageToChat(message.content, 'bot');
+                    updateGenieText(message.content);
+                    // End of response
+                    if (message.turn_complete) {
+                        isGeminiResponding = false;
+                        setBotActiveState(false);
+                    }
+                } else if (message.type === "status") {
+                    // Handle status updates
+                    console.log("Status update:", message.status, message.message);
+                    if (message.status === "interrupted") {
+                        isGeminiResponding = false;
+                        setBotActiveState(false);
+                        // Remove thinking message if it exists
+                        if (thinkingMessageElement) {
+                            thinkingMessageElement.remove();
+                            thinkingMessageElement = null;
+                        }
+                        // Add interrupted message
+                        addMessageToChat(message.message, 'interrupted');
+                    }
+                }
+            };
+            webSocket.onclose = () => {
+                console.log("WebSocket connection closed");
+                isConnected = false;
+                // Attempt to reconnect after a delay
+                setTimeout(() => {
+                    if (!isConnected) {
+                        console.log("Attempting to reconnect...");
+                        setupWebSocket();
+                    }
+                }, 3000);
+            };
+            webSocket.onerror = (error) => {
+                console.error("WebSocket error:", error);
+                showToast("Connection error. Please try again later.", "error");
+            };
+        }
+        // Setup audio visualizer
+        function setupAudioVisualizer() {
+            // Create bars for the audio visualizer
+            audioVisualizer.innerHTML = ''; // Clear existing bars
+            const numBars = 32;
+            for (let i = 0; i < numBars; i++) {
+                const bar = document.createElement('div');
+                bar.className = 'box';
+                audioVisualizer.appendChild(bar);
             }
+        }
+        // Initialize audio context for visualization and recording
+        async function setupAudioContext() {
+            try {
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                return true;
+            } catch (e) {
+                console.error("Error creating audio context:", e);
+                showToast("Could not initialize audio. Please check your browser permissions.", "error");
+                return false;
+            }
+        }
+        // Request microphone access and set up stream
+        async function setupMicrophone() {
+            try {
+                if (!audioContext) {
+                    const success = await setupAudioContext();
+                    if (!success) return false;
+                }
+                // Get user media
+                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                microphoneStream = stream;
+                // Create analyzer for input visualization
+                const source = audioContext.createMediaStreamSource(stream);
+                audioAnalyser = audioContext.createAnalyser();
+                audioAnalyser.fftSize = 256;
+                source.connect(audioAnalyser);
+                // Create processor for sending audio
+                microphoneProcessor = audioContext.createScriptProcessor(4096, 1, 1);
+                source.connect(microphoneProcessor);
+                microphoneProcessor.connect(audioContext.destination);
+                microphoneProcessor.onaudioprocess = (e) => {
+                    if (isListening && isConnected) {
+                        const audioData = e.inputBuffer.getChannelData(0);
+                        sendAudioToServer(audioData);
+                    }
+                };
+                // Start visualizing input
+                visualizeAudio();
+                return true;
+            } catch (e) {
+                console.error("Error accessing microphone:", e);
+                showToast("Could not access your microphone. Please check your browser permissions.", "error");
+                return false;
+            }
+        }
+        // Visualize audio input/output
+        function visualizeAudio() {
+            if (!audioAnalyser) return;
+            const bufferLength = audioAnalyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            function draw() {
+                if (!audioAnalyser) return;
+                audioAnalyser.getByteFrequencyData(dataArray);
+                const bars = audioVisualizer.querySelectorAll('.box');
+                // Update each bar height based on frequency data
+                let barIndex = 0;
+                const barCount = bars.length;
+                const step = Math.floor(bufferLength / barCount) || 1;
+                for (let i = 0; i < bufferLength; i += step) {
+                    if (barIndex >= barCount) break;
+                    // Get average of frequency range
+                    let sum = 0;
+                    for (let j = 0; j < step && i + j < bufferLength; j++) {
+                        sum += dataArray[i + j];
+                    }
+                    const average = sum / step;
+                    // Scale height (0.1 minimum to always show something)
+                    const barHeight = Math.max(0.1, average / 255);
+                    bars[barIndex].style.transform = `scaleY(${barHeight})`;
+                    barIndex++;
+                }
+                // Keep animating
+                requestAnimationFrame(draw);
+            }
+            draw();
+        }
+        // Send audio data to server
+        function sendAudioToServer(audioData) {
+            if (!webSocket || webSocket.readyState !== WebSocket.OPEN) return;
+            // Convert float32 to int16
+            const pcmData = new Int16Array(audioData.length);
+            for (let i = 0; i < audioData.length; i++) {
+                pcmData[i] = Math.max(-32768, Math.min(32767, audioData[i] * 32768));
+            }
+            // Convert to base64
+            const buffer = new ArrayBuffer(pcmData.length * 2);
+            const view = new DataView(buffer);
+            for (let i = 0; i < pcmData.length; i++) {
+                view.setInt16(i * 2, pcmData[i], true);
+            }
+            const base64Audio = btoa(String.fromCharCode(...new Uint8Array(buffer)));
+            // Send with sequence number for ordering
+            webSocket.send(JSON.stringify({
+                type: "audio",
+                payload: base64Audio,
+                seq: audioSequence++
+            }));
+        }
+        // Play audio received from server
+        function playAudioFromServer(base64Audio) {
+            const audioData = atob(base64Audio);
+            const buffer = new ArrayBuffer(audioData.length);
+            const view = new Uint8Array(buffer);
+            for (let i = 0; i < audioData.length; i++) {
+                view[i] = audioData.charCodeAt(i);
+            }
+            // Create blob and play
+            const blob = new Blob([buffer], { type: 'audio/wav' });
+            const url = URL.createObjectURL(blob);
+            // Queue audio
+            const audio = new Audio(url);
+            audio.onended = () => URL.revokeObjectURL(url); // Clean up
+            audio.play().catch(e => console.error("Error playing audio:", e));
+            // If we have AudioContext, create analyzer for visualization
+            if (audioContext && !audioAnalyser) {
+                try {
+                    const audioSource = audioContext.createMediaElementSource(audio);
+                    audioAnalyser = audioContext.createAnalyser();
+                    audioAnalyser.fftSize = 256;
+                    audioSource.connect(audioAnalyser);
+                    audioSource.connect(audioContext.destination);
+                    // Start visualization if not already running
+                    visualizeAudio();
+                } catch (e) {
+                    console.warn("Could not create audio analyzer for playback:", e);
+                }
+            }
+        }
+        // Send preferences to server
+        function sendPreferences() {
+            if (!webSocket || webSocket.readyState !== WebSocket.OPEN) return;
+            const repoUrl = repoUrlInput.value.trim();
+            const githubToken = githubTokenInput.value.trim();
+            const userType = userTypeSelect.value;
+            const responseDetail = responseDetailSelect.value;
+            webSocket.send(JSON.stringify({
+                type: "init",
+                repo_url: repoUrl,
+                github_token: githubToken,
+                user_type: userType,
+                response_detail: responseDetail
+            }));
+        }
+        // --- Event Handlers ---
+        async function handleMicButtonClick() {
             // If the bot is actively processing, the mic button acts as an interrupt
             if (isBotActive) {
                 handleInterrupt();
+                return;
+            }
+            // Otherwise, toggle listening mode
+            const wasListening = isListening;
+            await toggleListeningMode();
+            // If we just started listening and there's no active message
+            // Send an empty audio data packet to initiate connection
+            if (!wasListening && isListening && !thinkingMessageElement) {
+                microphoneStream = null; // Force new stream setup
+                const success = await setupMicrophone();
+                if (!success) {
+                    toggleListeningMode(); // Turn off listening if mic setup failed
+                }
             }
         }
+        async function toggleListeningMode() {
+            if (isBotActive && !isListening) return; // Don't start listening if bot is busy (unless already listening)
             isListening = !isListening;
             micButton.classList.toggle('listening', isListening);
             genieOrb.classList.toggle('listening', isListening);
             if (isListening) {
+                // Ensure WebSocket is connected
+                if (!isConnected) {
+                    setupWebSocket();
+                }
+                // Setup microphone if not already done
+                if (!microphoneStream) {
+                    const success = await setupMicrophone();
+                    if (!success) {
+                        isListening = false;
+                        micButton.classList.remove('listening');
+                        genieOrb.classList.remove('listening');
+                        return;
+                    }
+                }
                 setBotActiveState(false); // Ensure bot is not marked active
                 agentStatusTitle.textContent = "G.E.N.I.E. Status: Listening...";
+                updateGenieText("Listening... Speak your wish or type a question.");
                 micButton.title = "Stop Listening / Interrupt"; // Update tooltip
             } else {
+                // Stop sending audio
+                micButton.title = "Toggle Listening Mode / Interrupt"; // Reset tooltip
+                // Only reset status if the bot isn't currently active
                 if (!isBotActive) {
                     agentStatusTitle.textContent = "G.E.N.I.E. Status";
                     // Only reset output if it was showing the listening message
             if (isListening) {
                 toggleListeningMode();
             }
             // Prevent sending if bot is already active
             if (isBotActive) {
+                console.log("G.E.N.I.E. is active, cannot send new query yet.");
+                return;
             }
             const repoUrl = repoUrlInput.value.trim();
             const query = userQueryInput.value.trim();
             // Basic Validations
             if (!query) {
+                showToast('Please state your wish (enter a query).', 'warning');
                 return;
             }
             if (!isValidHttpUrl(repoUrl)) {
+                showToast('Please provide a valid GitHub repository URL (starting with http:// or https://).', 'warning');
+                return;
             }
+            // Ensure WebSocket is connected
+            if (!isConnected) {
+                setupWebSocket();
+                setTimeout(() => sendTextQuery(query), 500); // Short delay to allow connection
+                return;
+            }
+            sendTextQuery(query);
+        }
+        function sendTextQuery(query) {
             // Add user message to chat
             addMessageToChat(query, 'user');
             userQueryInput.value = ''; // Clear input field
+            // Add thinking message
+            thinkingMessageElement = addMessageToChat('', 'thinking');
+            // Send preferences again in case they've changed
+            sendPreferences();
+            // Send the query to the server
+            if (webSocket && webSocket.readyState === WebSocket.OPEN) {
+                webSocket.send(JSON.stringify({
+                    type: "text",
+                    content: query
+                }));
+            } else {
+                showToast("Connection to server lost. Please try again.", "error");
+                // Remove thinking message
                 if (thinkingMessageElement) {
                     thinkingMessageElement.remove();
                     thinkingMessageElement = null;
                 }
                 setBotActiveState(false);
+            }
+        }
+        function handleInterrupt() {
+            // Send interrupt signal to server
+            if (webSocket && webSocket.readyState === WebSocket.OPEN) {
+                webSocket.send(JSON.stringify({
+                    type: "interrupt"
+                }));
+            }
+            // Clear local UI state
+            if (botResponseTimeoutId) {
+                clearTimeout(botResponseTimeoutId);
+                botResponseTimeoutId = null;
+            }
+            // Remove the "thinking" message if it exists
+            if (thinkingMessageElement) {
+                thinkingMessageElement.remove();
+                thinkingMessageElement = null;
             }
+            // Reset bot state
+            isGeminiResponding = false;
+            setBotActiveState(false);
+            // Refocus input for convenience
+            userQueryInput.focus();
         }
         function addMessageToChat(message, type) {
             const messageElement = document.createElement('div');
             messageElement.classList.add('chat-bubble');
             // Stop listening visual cues if a message is added
+            if (isListening && type !== 'thinking') {
                 genieOrb.classList.remove('listening');
                 micButton.classList.remove('listening');
                 isListening = false; // Ensure state is updated
                 micButton.title = "Toggle Listening Mode / Interrupt"; // Reset tooltip
             }
             switch (type) {
                 case 'user':
                     messageElement.classList.add('user-bubble');
                     messageElement.classList.add('bot-bubble');
                     messageElement.textContent = message;
                     updateGenieText(message); // Update status output
+                    // Reset the thinking message
+                    if (thinkingMessageElement) {
+                        thinkingMessageElement.remove();
+                        thinkingMessageElement = null;
+                    }
+                    // After a bot message, ensure we're not in "thinking" mode
+                    setBotActiveState(true, false); // Active but not thinking
                     break;
                 case 'thinking':
                     messageElement.classList.add('bot-bubble', 'thinking');
                     messageElement.innerHTML = `Consulting the digital ether... <div class="dot-flashing"></div>`;
                     updateGenieText("Processing your wish..."); // Update status output
+                    setBotActiveState(true, true); // Active and thinking
                     thinkingMessageElement = messageElement; // Store reference to remove later
                     break;
                 case 'interrupted':
+                    messageElement.classList.add('bot-bubble', 'interrupted');
+                    messageElement.textContent = message;
+                    break;
                 default:
                     console.error("Unknown message type:", type);
                     return null; // Don't add unknown types
             }
             chatHistory.appendChild(messageElement);
             // Scroll to the bottom smoothly after adding message
             setTimeout(() => {
                 chatHistory.scrollTo({ top: chatHistory.scrollHeight, behavior: 'smooth' });
             }, 50);
             return messageElement; // Return the created element
         }
         function updateGenieText(text) {
             genieOutput.textContent = text;
         }
+        function setBotActiveState(isActive, isThinking = true) {
             isBotActive = isActive;
+            // Always update these elements
             genieOrb.classList.toggle('active', isActive);
             interruptButton.classList.toggle('hidden', !isActive);
+            sendButton.disabled = isActive;
+            userQueryInput.disabled = isActive;
+            repoUrlInput.disabled = isActive;
+            githubTokenInput.disabled = isActive;
+            userTypeSelect.disabled = isActive;
+            responseDetailSelect.disabled = isActive;
             if (isActive) {
                 // If activating, ensure listening mode is off
                 if (isListening) {
                     toggleListeningMode(); // Turn off listening visuals/state
                 }
+                agentStatusTitle.textContent = isThinking ?
+                    "G.E.N.I.E. Status: Fulfilling Wish..." :
+                    "G.E.N.I.E. Status: Active";
                 micButton.title = "Interrupt G.E.N.I.E."; // Mic becomes interrupt
             } else {
                 // Reset status title only if not currently listening
                     agentStatusTitle.textContent = "G.E.N.I.E. Status";
                     updateGenieText("Awaiting your command..."); // Reset output text
                 }
+                micButton.title = "Toggle Listening Mode / Interrupt"; // Reset mic title
                 // Clear any lingering timeout or thinking message reference
                 if (botResponseTimeoutId) {
                     clearTimeout(botResponseTimeoutId);
                     botResponseTimeoutId = null;
                 }
                 thinkingMessageElement = null;
             }
         }
         function isValidHttpUrl(string) {
             try {
                 const url = new URL(string);
             }
         }
+        function showToast(message, type = 'error') {
+            toast.textContent = message;
+            toast.className = `toast ${type}`;
+            toast.style.display = 'block';
+            // Hide toast after 5 seconds
             setTimeout(() => {
+                toast.style.display = 'none';
+            }, 5000);
         }
+        // --- Event Listeners ---
+        sendButton.addEventListener('click', handleSendQuery);
+        userQueryInput.addEventListener('keypress', (event) => {
+            if (event.key === 'Enter' && !event.shiftKey) {
+                event.preventDefault(); // Prevent default newline behavior
+                handleSendQuery();
+            }
+        });
+        userQueryInput.addEventListener('input', handleTypingInterrupt);
+        micButton.addEventListener('click', handleMicButtonClick);
+        interruptButton.addEventListener('click', handleInterrupt);
+        // Listen for preference changes to update server
+        repoUrlInput.addEventListener('change', sendPreferences);
+        githubTokenInput.addEventListener('change', sendPreferences);
+        userTypeSelect.addEventListener('change', sendPreferences);
+        responseDetailSelect.addEventListener('change', sendPreferences);
+        // --- Initialization ---
+        function init() {
+            // Set up WebSocket connection
+            setupWebSocket();
+            // Set up audio context and visualizer
+            setupAudioVisualizer();
+            // Initialize state
+            updateGenieText("Standing by. Please provide a GitHub repo URL, set preferences, and state your wish, or click 🎙️.");
+            interruptButton.classList.add('hidden');
+            sendButton.disabled = false;
+            setBotActiveState(false);
+        }
+        // Start initialization
+        init();
+        // When page is closing, clean up WebSocket and audio resources
+        window.addEventListener('beforeunload', () => {
+            if (webSocket) {
+                webSocket.close();
+            }
+            if (microphoneStream) {
+                microphoneStream.getTracks().forEach(track => track.stop());
+            }
+            if (microphoneProcessor) {
+                microphoneProcessor.disconnect();
+            }
+            if (audioContext) {
+                audioContext.close();
+            }
+        });
     </script>
 </body>
+</html>