Update frontend/script.js

frontend/script.js

@@ -1,29 +1,36 @@
 /* ================================================================
    J.A.R.V.I.S Frontend — Main Application Logic
    ================================================================
+
    ARCHITECTURE OVERVIEW
    ---------------------
    This file powers the entire frontend of the J.A.R.V.I.S AI assistant.
    It handles:
+
    1. CHAT MESSAGING — The user types (or speaks) a message, which is
       sent to the backend via a POST request. The backend responds using
       Server-Sent Events (SSE), allowing the reply to stream in
       token-by-token (like ChatGPT's typing effect).
+
    2. TEXT-TO-SPEECH (TTS) — When TTS is enabled, the backend also
       sends base64-encoded audio chunks inside the SSE stream. These
       are queued up and played sequentially through a single <audio>
       element. This queue-based approach prevents overlapping audio
       and supports mobile browsers (especially iOS/Safari).
+
    3. SPEECH RECOGNITION — The Web Speech API captures the user's
       voice, transcribes it in real time, and auto-sends the final
       transcript as a chat message.
+
    4. ANIMATED ORB — A WebGL-powered visual orb (rendered by a
       separate OrbRenderer class) acts as a visual indicator. It
       "activates" when J.A.R.V.I.S is speaking and goes idle otherwise.
+
    5. MODE SWITCHING — The UI supports two modes:
       - "General" mode  → uses the /chat/stream endpoint
       - "Realtime" mode → uses the /chat/realtime/stream endpoint
       The mode determines which backend pipeline processes the message.
+
    6. SESSION MANAGEMENT — A session ID is returned by the server on
       the first message. Subsequent messages include that ID so the
       backend can maintain conversation context. Starting a "New Chat"
@@ -33,6 +40,7 @@
    User input → sendMessage() → POST to backend → SSE stream opens →
    tokens arrive as JSON chunks → rendered into the DOM in real time →
    optional audio chunks are enqueued in TTSPlayer → played sequentially.
+
    ================================================================ */
 
 /*
@@ -134,7 +142,6 @@ const PRE_STARTER_FILES = ['starter_1', 'starter_2', 'starter_3', 'starter_4', '
 let PRE_STARTER_CACHE = {};
 let settings = { ...DEFAULT_SETTINGS };
 
-
 /* ================================================================
    DOM REFERENCES
    ================================================================
@@ -164,23 +171,19 @@ const btnRealtime  = $('btn-realtime');    // The "Realtime" mode button
 const statusDot    = document.querySelector('.status-dot');  // Green/red dot showing backend status
 const statusText   = document.querySelector('.status-text'); // Text next to the dot ("Online" / "Offline")
 const orbContainer = $('orb-container');   // The container <div> that holds the WebGL orb canvas
-
 const searchResultsToggle = $('search-results-toggle');   // Header button to open search results panel
 const searchResultsWidget = $('search-results-widget');   // Right-side panel for Tavily search data
 const searchResultsClose  = $('search-results-close');    // Close button inside the panel
 const searchResultsQuery  = $('search-results-query');    // Displays the search query
 const searchResultsAnswer = $('search-results-answer');   // Displays the AI answer from search
 const searchResultsList   = $('search-results-list');     // Container for source result cards
-
 const activityPanel       = $('activity-panel');          // Left panel for Jarvis activity flow
 const activityToggle      = $('activity-toggle');          // Header button to open activity panel
 const activityClose       = $('activity-close');           // Close button inside activity panel
 const activityList        = $('activity-list');            // Container for activity items
 const panelOverlay        = $('panel-overlay');            // Backdrop when a side panel is open
-
 const speechWidget        = $('speech-widget');            // Live speech-to-text display
 const speechWidgetText    = $('speech-widget-text');       // Transcript text element
-
 const settingsBtn         = $('settings-btn');              // Gear icon to open settings
 const settingsPanel       = $('settings-panel');            // Settings modal/panel
 const settingsClose       = $('settings-close');           // Close settings
@@ -189,7 +192,6 @@ const toggleAutoSearch    = $('toggle-auto-search');        // Auto-open search
 const toggleThinkingSounds = $('toggle-thinking-sounds');   // Thinking sound effects
 const toastContainer     = $('toast-container');           // Toast container for error/status feedback
 
-
 /* ================================================================
    PRE-STARTER PLAYER (Dedicated — never interrupted by TTS reset)
    ================================================================
@@ -209,17 +211,14 @@ class PreStarterPlayer {
             if (onComplete) onComplete();
             return;
         }
-
         const file = loaded[Math.floor(Math.random() * loaded.length)];
         const base64 = PRE_STARTER_CACHE[file];
         if (!base64) {
             if (onComplete) onComplete();
             return;
         }
-
         this.audio.src = 'data:audio/mp3;base64,' + base64;
         this.audio.currentTime = 0;
-
         let fired = false;
         const done = () => {
             if (fired) return;
@@ -228,19 +227,19 @@ class PreStarterPlayer {
             this.audio.onerror = null;
             if (onComplete) onComplete();
         };
-
         this.audio.onended = done;
         this.audio.onerror = done;
         const p = this.audio.play();
         if (p) p.catch(done);
     }
 }
-let preStarterPlayer = null;
 
+let preStarterPlayer = null;
 
 /* ================================================================
    TTS AUDIO PLAYER (Text-to-Speech Queue System)
    ================================================================
+
    HOW THE TTS QUEUE WORKS — EXPLAINED FOR LEARNERS
    -------------------------------------------------
    When TTS is enabled, the backend doesn't send one giant audio file.
@@ -265,18 +264,19 @@ let preStarterPlayer = null;
    that was "unlocked" during a user gesture, all subsequent plays
    through that same element are allowed. Creating new Audio() objects
    each time would trigger autoplay blocks on iOS.
+
    ================================================================ */
 class TTSPlayer {
     /**
      * Creates a new TTSPlayer instance.
      *
      * Properties:
-     * queue    — Array of base64 audio strings waiting to be played.
-     * playing  — True if the play loop is currently running.
-     * enabled  — True if the user has toggled TTS on (via the speaker button).
-     * stopped  — True if playback was forcibly stopped (e.g., new chat).
-     * This prevents queued audio from playing after a stop.
-     * audio    — A single persistent <audio> element reused for all playback.
+     *   queue    — Array of base64 audio strings waiting to be played.
+     *   playing  — True if the play loop is currently running.
+     *   enabled  — True if the user has toggled TTS on (via the speaker button).
+     *   stopped  — True if playback was forcibly stopped (e.g., new chat).
+     *              This prevents queued audio from playing after a stop.
+     *   audio    — A single persistent <audio> element reused for all playback.
      */
     constructor() {
         this.queue = [];
@@ -294,11 +294,11 @@ class TTSPlayer {
      * This should be called during a user gesture (e.g., clicking "Send").
      *
      * It does two things:
-     * 1. Plays a tiny silent WAV file on the <audio> element, which
-     * tells the browser "the user initiated audio playback."
-     * 2. Creates a brief AudioContext oscillator at zero volume — this
-     * unlocks the Web Audio API context on iOS (a separate lock from
-     * the <audio> element).
+     *   1. Plays a tiny silent WAV file on the <audio> element, which
+     *      tells the browser "the user initiated audio playback."
+     *   2. Creates a brief AudioContext oscillator at zero volume — this
+     *      unlocks the Web Audio API context on iOS (a separate lock from
+     *      the <audio> element).
      *
      * After this, the browser treats subsequent .play() calls on the same
      * <audio> element as user-initiated, even if they happen in an async
@@ -310,7 +310,6 @@ class TTSPlayer {
         this.audio.src = silentWav;
         const p = this.audio.play();
         if (p) p.catch(() => {});
-
         try {
             // Create a Web Audio context and play a zero-volume oscillator for <1ms
             const ctx = new (window.AudioContext || window.webkitAudioContext)();
@@ -345,9 +344,9 @@ class TTSPlayer {
      * stop() — Immediately halts all audio playback and clears the queue.
      *
      * Called when:
-     * - The user starts a "New Chat"
-     * - The user toggles TTS off while audio is playing
-     * - We need to reset before a new streaming response
+     *   - The user starts a "New Chat"
+     *   - The user toggles TTS off while audio is playing
+     *   - We need to reset before a new streaming response
      *
      * It also removes visual indicators (CSS classes on the TTS button,
      * the orb container, and deactivates the orb animation).
@@ -359,11 +358,9 @@ class TTSPlayer {
         this.audio.load();                        // Fully resets the audio element
         this.queue = [];                           // Discard any pending audio chunks
         this.playing = false;
-
         if (ttsBtn) ttsBtn.classList.remove('tts-speaking');
         if (orbContainer) orbContainer.classList.remove('speaking');
         if (orb) orb.setActive(false);
-
         if (typeof this.onPlaybackComplete === 'function') this.onPlaybackComplete();   // AI stopped — maybe restart mic
     }
 
@@ -412,7 +409,6 @@ class TTSPlayer {
         // Process queued audio chunks one at a time
         while (this.queue.length > 0) {
             if (this.stopped || myId !== this._loopId) break;  // Exit if stopped or superseded
-
             const b64 = this.queue.shift();                     // Take the next chunk from the front
             try {
                 await this._playB64(b64);                       // Wait for it to finish playing
@@ -426,14 +422,11 @@ class TTSPlayer {
             this.playing = false;   // Allow new loop to start
             return;
         }
-
         this.playing = false;
-
         // Deactivate visual indicators
         if (ttsBtn) ttsBtn.classList.remove('tts-speaking');
         if (orbContainer) orbContainer.classList.remove('speaking');
         if (orb) orb.setActive(false);
-
         // Notify when playback is fully complete (for auto-restart listening)
         if (typeof this.onPlaybackComplete === 'function') this.onPlaybackComplete();
     }
@@ -443,7 +436,7 @@ class TTSPlayer {
      *
      * @param {string} b64 - Base64-encoded MP3 audio data.
      * @returns {Promise<void>} Resolves when the audio finishes playing
-     * (or errors out).
+     *                          (or errors out).
      *
      * Sets the <audio> element's src to a data URL and calls .play().
      * Returns a Promise that resolves on 'ended' or 'error', so the
@@ -455,14 +448,12 @@ class TTSPlayer {
             const done = () => { resolve(); };
             this.audio.onended = done;   // Normal completion
             this.audio.onerror = done;   // Error — resolve anyway so the loop continues
-
             const p = this.audio.play();
             if (p) p.catch(done);        // Handle play() rejection (e.g., autoplay block)
         });
     }
 }
 
-
 /* ================================================================
    INITIALIZATION
    ================================================================
@@ -484,18 +475,15 @@ function init() {
         console.error('[JARVIS] Required DOM elements (chat-messages, message-input) not found.');
         return;
     }
-
     loadSettings();
     ttsPlayer = new TTSPlayer();
     ttsPlayer.onPlaybackComplete = maybeRestartListening;   // Auto-restart mic when TTS finishes
     if (ttsBtn) ttsBtn.classList.add('tts-active');   // Show TTS as on by default
-
     setGreeting();
     initOrb();
     initSpeech();
     preloadStarterAudio();   // Pre-load MP3s for instant playback
     preStarterPlayer = new PreStarterPlayer();   // Dedicated player for pre-starter (immune to ttsPlayer.reset)
-
     checkHealth();
     bindEvents();
     setMode(currentMode);   // Sync mode slider, labels, and activity toggle
@@ -543,7 +531,6 @@ function saveSettings() {
     } catch (_) {}
 }
 
-
 /* ================================================================
    GREETING
    ================================================================ */
@@ -553,10 +540,10 @@ function saveSettings() {
  * time of day.
  *
  * Time ranges:
- * 00:00–11:59 → "Good morning."
- * 12:00–16:59 → "Good afternoon."
- * 17:00–21:59 → "Good evening."
- * 22:00–23:59 → "Burning the midnight oil?" (a fun late-night touch)
+ *   00:00–11:59 → "Good morning."
+ *   12:00–16:59 → "Good afternoon."
+ *   17:00–21:59 → "Good evening."
+ *   22:00–23:59 → "Burning the midnight oil?" (a fun late-night touch)
  *
  * This is called on page load and when starting a new chat.
  */
@@ -569,7 +556,6 @@ function setGreeting() {
     if (welcomeTitle) welcomeTitle.textContent = g;
 }
 
-
 /* ================================================================
    WEBGL ORB INITIALIZATION
    ================================================================ */
@@ -582,9 +568,9 @@ function setGreeting() {
  * and we skip initialization gracefully.
  *
  * Configuration:
- * hue: 0                           — The base hue of the orb color
- * hoverIntensity: 0.3              — How much the orb reacts to mouse hover
- * backgroundColor: [0.02,0.02,0.06] — Near-black dark blue background (RGB, 0–1 range)
+ *   hue: 0                           — The base hue of the orb color
+ *   hoverIntensity: 0.3              — How much the orb reacts to mouse hover
+ *   backgroundColor: [0.02,0.02,0.06] — Near-black dark blue background (RGB, 0–1 range)
  *
  * The orb's "active" state (pulsing animation) is toggled via
  * orb.setActive(true/false), which we call when TTS starts/stops.
@@ -600,10 +586,10 @@ function initOrb() {
     } catch (e) { console.warn('Orb init failed:', e); }
 }
 
-
 /* ================================================================
    SPEECH RECOGNITION (Speech-to-Text)
    ================================================================
+
    SPEECH-TO-TEXT REDESIGN — PC-FIRST, ACCURATE, AUTO-RESTART
    ----------------------------------------------------------
    Design goals:
@@ -639,6 +625,7 @@ function isSafariOrIOS() {
 function initSpeech() {
     const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
     if (!SR) { micBtn.title = 'Speech not supported in this browser'; return; }
+
     recognition = new SR();
 
     /* PC: single utterance, interim results for real-time feedback. Avoids Chrome incremental bug. */
@@ -651,7 +638,6 @@ function initSpeech() {
 
     recognition.onresult = e => {
         if (!e.results || e.results.length === 0) return;
-
         /* Chrome sends incremental results — each extends the previous. Use ONLY the last. */
         const last = e.results[e.results.length - 1];
         const transcript = (last && last[0]) ? last[0].transcript.trim() : '';
@@ -661,39 +647,16 @@ function initSpeech() {
         if (speechWidget) speechWidget.classList.add('visible');
 
         if (isFinal && transcript) {
-            
-            // --- 🚀 THE WAKE WORD LOCK (ZERO DELAY) ---
-            let lowerText = transcript.toLowerCase();
-            
-            if (lowerText.includes("jarvis")) {
-                // "Jarvis" sun liya! Ab uska naam text se hatao aur command padho
-                let cleanCommand = lowerText.replace(/jarvis/g, "").trim();
-                
-                // Agar user ne sirf "Jarvis" bola hai toh usko blank nahi bhejenge
-                if (cleanCommand === "") {
-                    cleanCommand = "Are you there?";
+            pendingSendTranscript = transcript;
+            clearTimeout(speechSendTimeout);
+            speechSendTimeout = setTimeout(() => {
+                if (pendingSendTranscript) {
+                    sendMessage(pendingSendTranscript);
+                    pendingSendTranscript = null;
                 }
-
-                console.log("⚡ Command Caught! Sending instantly: ", cleanCommand);
-                
-                // KOI DELAY NAHI! Seedha mic band kar aur message bhej de
-                pendingSendTranscript = null;
-                clearTimeout(speechSendTimeout);
-                speechSendTimeout = null;
-                
-                stopListening(); 
-                sendMessage(cleanCommand); 
-                
-            } else {
-                // Wake-word "jarvis" nahi mila, yeh kachra aawaz ya movie dialogue hai. IGNORE!
-                console.log("🎬 Ignored Movie Noise: ", transcript);
-                pendingSendTranscript = null;
-                clearTimeout(speechSendTimeout);
                 speechSendTimeout = null;
-                stopListening(); // Ye function mic band karke wapas chaalu kar dega
-            }
-            // --- 🚀 GATEKEEPER END ---
-
+                stopListening();
+            }, SPEECH_SEND_DELAY_MS);
         } else if (!isFinal) {
             pendingSendTranscript = null;
             clearTimeout(speechSendTimeout);
@@ -702,16 +665,15 @@ function initSpeech() {
     };
 
     recognition.onstart = () => { speechErrorRetryCount = 0; };
+
     recognition.onerror = e => {
         stopListening();
         const msg = (e && e.error) ? String(e.error) : '';
         const isPermissionDenied = /denied|not-allowed|permission/i.test(msg);
-
         if (isPermissionDenied && micBtn) {
             micBtn.title = 'Microphone access denied. Allow in browser settings.';
             speechErrorRetryCount = SPEECH_ERROR_MAX_RETRIES;
         }
-
         if (autoListenMode && !isStreaming && speechErrorRetryCount < SPEECH_ERROR_MAX_RETRIES) {
             speechErrorRetryCount++;
             setTimeout(() => maybeRestartListening(), SPEECH_RESTART_DELAY_MS);
@@ -739,27 +701,23 @@ function initSpeech() {
  * startListening() — Activates the microphone and begins speech recognition.
  *
  * Guards:
- * - Does nothing if recognition isn't available (unsupported browser).
- * - Does nothing if we're currently streaming a response (to avoid
- * accidentally sending a voice message mid-stream).
+ *   - Does nothing if recognition isn't available (unsupported browser).
+ *   - Does nothing if we're currently streaming a response (to avoid
+ *     accidentally sending a voice message mid-stream).
  */
 function startListening() {
     if (!recognition || isStreaming || isListening) return;
-
     if (isSafariOrIOS() && !safariVoiceHintShown) {
         showToast('Voice works best in Chrome. Safari has limited support.');
         safariVoiceHintShown = true;
     }
-
     isListening = true;
     pendingSendTranscript = null;
     clearTimeout(speechSendTimeout);
     speechSendTimeout = null;
-
     if (micBtn) micBtn.classList.add('listening');
     if (speechWidget) speechWidget.classList.add('visible');
     if (speechWidgetText) speechWidgetText.textContent = '';
-
     try {
         recognition.start();
     } catch (err) {
@@ -774,10 +732,10 @@ function startListening() {
  * stopListening() — Deactivates the microphone and stops recognition.
  *
  * Called when:
- * - A final transcript is received (auto-send).
- * - The user clicks the mic button again (manual toggle off).
- * - An error occurs.
- * - The recognition engine stops unexpectedly.
+ *   - A final transcript is received (auto-send).
+ *   - The user clicks the mic button again (manual toggle off).
+ *   - An error occurs.
+ *   - The recognition engine stops unexpectedly.
  */
 function stopListening() {
     clearTimeout(speechSendTimeout);
@@ -799,7 +757,6 @@ function maybeRestartListening() {
     if (!autoListenMode || !recognition) return;
     if (isStreaming) return;
     if (ttsPlayer && (ttsPlayer.playing || ttsPlayer.queue.length > 0)) return;
-
     setTimeout(() => {
         if (autoListenMode && !isStreaming && !isListening && recognition) {
             startListening();
@@ -807,7 +764,6 @@ function maybeRestartListening() {
     }, SPEECH_RESTART_DELAY_MS);
 }
 
-
 /* ================================================================
    BACKEND HEALTH CHECK
    ================================================================ */
@@ -817,8 +773,8 @@ function maybeRestartListening() {
  * if the server is running and healthy.
  *
  * Updates the status indicator in the UI:
- * - Green dot + "Online"  if the server responds with { status: "healthy" }
- * - Red dot   + "Offline" if the request fails or returns unhealthy
+ *   - Green dot + "Online"  if the server responds with { status: "healthy" }
+ *   - Red dot   + "Offline" if the request fails or returns unhealthy
  *
  * Uses AbortSignal.timeout(5000) to avoid waiting forever if the
  * server is down — the request will automatically abort after 5 seconds.
@@ -829,10 +785,8 @@ async function checkHealth() {
         const timeoutId = setTimeout(() => controller.abort(), 5000);
         const r = await fetch(`${API}/health`, { signal: controller.signal });
         clearTimeout(timeoutId);
-
         const d = await r.json().catch(() => null);
         const ok = d && (d.status === 'healthy' || d.status === 'degraded');
-
         if (statusDot) statusDot.classList.toggle('offline', !ok);
         if (statusText) statusText.textContent = ok ? 'Online' : 'Offline';
     } catch (e) {
@@ -852,19 +806,15 @@ function showToast(msg, durationMs = 5000) {
     el.className = 'toast';
     el.textContent = msg;
     toastContainer.appendChild(el);
-
     el.offsetHeight;   // Force reflow for animation
     el.classList.add('toast-visible');
-
     const t = setTimeout(() => {
         el.classList.remove('toast-visible');
         setTimeout(() => el.remove(), 300);
     }, durationMs);
-
     el.addEventListener('click', () => { clearTimeout(t); el.classList.remove('toast-visible'); setTimeout(() => el.remove(), 300); });
 }
 
-
 /* ================================================================
    EVENT BINDING
    ================================================================
@@ -939,7 +889,6 @@ function bindEvents() {
     if (searchResultsClose && searchResultsWidget) {
         searchResultsClose.addEventListener('click', () => { searchResultsWidget.classList.remove('open'); updatePanelOverlay(); });
     }
-
     // ACTIVITY PANEL — Toggle open/close from header button; close from panel button
     if (activityToggle) {
         activityToggle.addEventListener('click', () => {
@@ -949,9 +898,7 @@ function bindEvents() {
     if (activityClose && activityPanel) {
         activityClose.addEventListener('click', () => { activityPanel.classList.remove('open'); updatePanelOverlay(); });
     }
-
     // Panels close ONLY via their X button — overlay does not close on click
-
     // SETTINGS
     if (settingsBtn && settingsPanel) {
         settingsBtn.addEventListener('click', () => {
@@ -965,7 +912,6 @@ function bindEvents() {
             updatePanelOverlay();
         });
     }
-
     if (toggleAutoActivity) {
         toggleAutoActivity.addEventListener('change', () => {
             settings.autoOpenActivity = toggleAutoActivity.checked;
@@ -991,17 +937,16 @@ function bindEvents() {
  * its content, up to a maximum of 120px.
  *
  * How it works:
- * 1. Reset height to 'auto' so scrollHeight reflects actual content height.
- * 2. Set height to the smaller of scrollHeight or 120px.
- * This creates a textarea that grows as the user types but doesn't
- * take over the whole screen for very long messages.
+ *   1. Reset height to 'auto' so scrollHeight reflects actual content height.
+ *   2. Set height to the smaller of scrollHeight or 120px.
+ *   This creates a textarea that grows as the user types but doesn't
+ *   take over the whole screen for very long messages.
  */
 function autoResizeInput() {
     messageInput.style.height = 'auto';
     messageInput.style.height = Math.min(messageInput.scrollHeight, 120) + 'px';
 }
 
-
 /* ================================================================
    MODE SWITCH (General ↔ Realtime)
    ================================================================
@@ -1031,28 +976,25 @@ function updatePanelOverlay() {
  * @param {string} mode - Either 'general' or 'realtime'.
  *
  * Updates:
- * - currentMode variable (used when sending messages)
- * - Button active states (highlights the selected button)
- * - Slider position (slides the pill indicator left or right)
+ *   - currentMode variable (used when sending messages)
+ *   - Button active states (highlights the selected button)
+ *   - Slider position (slides the pill indicator left or right)
  */
 function setMode(mode) {
     currentMode = mode;
     if (btnJarvis)   btnJarvis.classList.toggle('active', mode === 'jarvis');
     if (btnGeneral)  btnGeneral.classList.toggle('active', mode === 'general');
     if (btnRealtime) btnRealtime.classList.toggle('active', mode === 'realtime');
-
     if (modeSlider) {
         modeSlider.classList.remove('center', 'right');
         if (mode === 'general') modeSlider.classList.add('center');
         else if (mode === 'realtime') modeSlider.classList.add('right');
         /* jarvis: no class = left position */
     }
-
     // Activity toggle always visible — panel shows flow in all modes
     if (activityToggle) activityToggle.style.display = '';
 }
 
-
 /* ================================================================
    NEW CHAT
    ================================================================ */
@@ -1061,12 +1003,12 @@ function setMode(mode) {
  * newChat() — Resets the entire conversation to a fresh state.
  *
  * Steps:
- * 1. Stop any playing TTS audio.
- * 2. Clear the session ID (server will create a new one on next message).
- * 3. Clear all messages from the chat container.
- * 4. Re-create and display the welcome screen.
- * 5. Clear the input field and reset its size.
- * 6. Update the greeting text (in case time-of-day changed).
+ *   1. Stop any playing TTS audio.
+ *   2. Clear the session ID (server will create a new one on next message).
+ *   3. Clear all messages from the chat container.
+ *   4. Re-create and display the welcome screen.
+ *   5. Clear the input field and reset its size.
+ *   6. Update the greeting text (in case time-of-day changed).
  */
 function newChat() {
     if (ttsPlayer) ttsPlayer.stop();
@@ -1076,13 +1018,11 @@ function newChat() {
     messageInput.value = '';
     autoResizeInput();
     setGreeting();
-
     if (searchResultsWidget) searchResultsWidget.classList.remove('open');
     if (searchResultsToggle) searchResultsToggle.style.display = 'none';
     if (activityPanel) activityPanel.classList.remove('open');
     if (settingsPanel) settingsPanel.classList.remove('open');
     if (activityToggle) activityToggle.style.display = 'none';
-
     if (activityList) {
         activityList.innerHTML = '<div class="activity-empty" id="activity-empty">Send a message to see the flow here.</div>';
     }
@@ -1093,13 +1033,13 @@ function newChat() {
  * createWelcome() — Builds and returns the welcome screen DOM element.
  *
  * @returns {HTMLDivElement} The welcome screen element, ready to be
- * appended to the chat container.
+ *                           appended to the chat container.
  *
  * The welcome screen includes:
- * - A decorative SVG icon
- * - A time-based greeting (same logic as setGreeting)
- * - A subtitle prompt ("How may I assist you today?")
- * - Quick-action chip buttons with predefined messages
+ *   - A decorative SVG icon
+ *   - A time-based greeting (same logic as setGreeting)
+ *   - A subtitle prompt ("How may I assist you today?")
+ *   - Quick-action chip buttons with predefined messages
  *
  * The chip buttons get their own click listeners here because they
  * are dynamically created (not present in the original HTML).
@@ -1131,11 +1071,9 @@ function createWelcome() {
     div.querySelectorAll('.chip').forEach(c => {
         c.addEventListener('click', () => { if (!isStreaming) sendMessage(c.dataset.msg); });
     });
-
     return div;
 }
 
-
 /* ================================================================
    MESSAGE RENDERING
    ================================================================
@@ -1190,33 +1128,26 @@ function renderSearchResults(payload) {
     if (!payload) return;
     if (searchResultsQuery) searchResultsQuery.textContent = (payload.query || '').trim() || 'Search';
     if (searchResultsAnswer) searchResultsAnswer.textContent = (payload.answer || '').trim() || '';
-
     if (!searchResultsList) return;
     searchResultsList.innerHTML = '';
     const results = payload.results || [];
     const maxContentLen = 220;
-
     for (const r of results) {
         let title = (r.title || '').trim();
         let content = (r.content || '').trim();
         const url = (r.url || '').trim();
-
         if (isUrlLike(title)) title = friendlyUrlLabel(url) || 'Source';
         if (!title) title = friendlyUrlLabel(url) || 'Source';
         if (isUrlLike(content)) content = '';
         content = truncateSnippet(content, maxContentLen);
-
         const score = r.score != null ? Math.round((r.score || 0) * 100) : null;
-
         const card = document.createElement('div');
         card.className = 'search-result-card';
-
         const urlDisplay = url ? escapeHtml(friendlyUrlLabel(url)) : '';
         const hrefSafe = safeUrlForHref(url);
         const urlMarkup = urlDisplay
             ? (hrefSafe ? `<a href="${hrefSafe}" target="_blank" rel="noopener" class="card-url" title="${escapeAttr(url)}">${urlDisplay}</a>` : `<span class="card-url">${urlDisplay}</span>`)
             : '';
-
         card.innerHTML = `
             <div class="card-title">${escapeHtml(title)}</div>
             ${content ? `<div class="card-content">${escapeHtml(content)}</div>` : ''}
@@ -1269,14 +1200,11 @@ const ACTIVITY_STEPS = {
  */
 function appendActivity(activity) {
     if (!activityList || !activity) return;
-
     const item = document.createElement('div');
     item.className = 'activity-item';
     item.setAttribute('data-event', activity.event || '');
-
     const stepInfo = ACTIVITY_STEPS[activity.event] || { step: 0, label: activity.event || 'Activity', icon: 'dot' };
     let detail = '';
-
     if (activity.event === 'query_detected') {
         detail = activity.message || '';
     } else if (activity.event === 'decision') {
@@ -1313,15 +1241,12 @@ function appendActivity(activity) {
     } else {
         detail = activity.message || (typeof activity === 'object' ? JSON.stringify(activity) : String(activity));
     }
-
     const stepNum = stepInfo.step ? `<span class="activity-step">${stepInfo.step}</span>` : '';
     item.innerHTML = `
         <div class="activity-event">${stepNum}${escapeHtml(stepInfo.label)}</div>
         <div class="activity-detail">${escapeHtml(detail || '')}</div>`;
-
     const emptyEl = activityList.querySelector('.activity-empty');
     if (emptyEl) emptyEl.style.display = 'none';
-
     activityList.appendChild(item);
     activityList.scrollTop = activityList.scrollHeight;
 }
@@ -1351,29 +1276,27 @@ function hideWelcome() {
  * addMessage(role, text) — Creates and appends a chat message bubble.
  *
  * @param {string} role - Either 'user' or 'assistant'. Determines
- * styling, avatar letter, and label text.
+ *                         styling, avatar letter, and label text.
  * @param {string} text - The message content to display.
  * @returns {HTMLDivElement} The inner content element — returned so
- * the caller (sendMessage) can update it
- * later during streaming.
+ *                           the caller (sendMessage) can update it
+ *                           later during streaming.
  *
  * DOM structure created:
- * <div class="message user|assistant">
- * <div class="msg-avatar"><svg>...</svg></div>
- * <div class="msg-body">
- * <div class="msg-label">Jarvis (General) | You</div>
- * <div class="msg-content">...text...</div>
- * </div>
- * </div>
+ *   <div class="message user|assistant">
+ *     <div class="msg-avatar"><svg>...</svg></div>
+ *     <div class="msg-body">
+ *       <div class="msg-label">Jarvis (General) | You</div>
+ *       <div class="msg-content">...text...</div>
+ *     </div>
+ *   </div>
  */
-
 /* Inline SVG icons for chat avatars (user = person, assistant = bot). */
 const AVATAR_ICON_USER = '<svg class="msg-avatar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
 const AVATAR_ICON_ASSISTANT = '<svg class="msg-avatar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><circle cx="9" cy="16" r="1" fill="currentColor"/><circle cx="15" cy="16" r="1" fill="currentColor"/></svg>';
 
 function addMessage(role, text) {
     hideWelcome();
-
     const msg = document.createElement('div');
     msg.className = `message ${role}`;
 
@@ -1398,10 +1321,8 @@ function addMessage(role, text) {
     body.appendChild(content);
     msg.appendChild(avatar);
     msg.appendChild(body);
-
     chatMessages.appendChild(msg);
     scrollToBottom();
-
     return content;  // Returned so the streaming logic can update it in real time
 }
 
@@ -1418,7 +1339,6 @@ function addMessage(role, text) {
  */
 function addTypingIndicator() {
     hideWelcome();
-
     const msg = document.createElement('div');
     msg.className = 'message assistant';
     msg.id = 'typing-msg';               // ID so we can find and remove it later
@@ -1442,10 +1362,8 @@ function addTypingIndicator() {
     body.appendChild(content);
     msg.appendChild(avatar);
     msg.appendChild(body);
-
     chatMessages.appendChild(msg);
     scrollToBottom();
-
     return content;
 }
 
@@ -1453,8 +1371,8 @@ function addTypingIndicator() {
  * removeTypingIndicator() — Removes the typing indicator from the DOM.
  *
  * Called when:
- * - The first token of the response arrives (replaced by real content).
- * - An error occurs (replaced by an error message).
+ *   - The first token of the response arrives (replaced by real content).
+ *   - An error occurs (replaced by an error message).
  */
 function removeTypingIndicator() {
     const t = document.getElementById('typing-msg');
@@ -1475,10 +1393,10 @@ function scrollToBottom() {
     });
 }
 
-
 /* ================================================================
    SEND MESSAGE + SSE STREAMING
    ================================================================
+
    HOW SSE (Server-Sent Events) STREAMING WORKS — EXPLAINED FOR LEARNERS
    ----------------------------------------------------------------------
    Instead of waiting for the entire AI response to generate (which
@@ -1520,14 +1438,15 @@ function scrollToBottom() {
    accumulates raw text. We split by '\n', process all complete lines,
    and keep the last (potentially incomplete) line in the buffer for
    the next iteration.
+
    ================================================================ */
 
 /**
  * sendMessage(textOverride) — Sends a user message and streams the AI response.
  *
  * AUDIO WORKFLOW (minimizes waiting):
- * 1. Pre-starter: Play random cached audio on dedicated PreStarterPlayer (immune to reset).
- * 2. Main: Stream from chatbot; when first real chunk arrives, reset() and main TTS plays.
+ *   1. Pre-starter: Play random cached audio on dedicated PreStarterPlayer (immune to reset).
+ *   2. Main: Stream from chatbot; when first real chunk arrives, reset() and main TTS plays.
  */
 async function sendMessage(textOverride) {
     // Step 1: Get the message text, trimming whitespace
@@ -1576,7 +1495,6 @@ async function sendMessage(textOverride) {
         if (ttsPlayer?.enabled && settings.thinkingSounds && preStarterPlayer) {
             preStarterPlayer.play(() => {});
         }
-
         // 2. Main: stream from chatbot (general or realtime)
         timeoutId = setTimeout(() => controller.abort(), 300000);
         const res = await fetch(`${API}${endpoint}`, {
@@ -1629,7 +1547,6 @@ async function sendMessage(textOverride) {
             for (const line of lines) {
                 // SSE lines that don't start with "data: " are empty lines or comments — skip them
                 if (!line.startsWith('data: ')) continue;
-
                 try {
                     // Parse the JSON payload (everything after "data: ")
                     const data = JSON.parse(line.slice(6));
@@ -1654,41 +1571,16 @@ async function sendMessage(textOverride) {
                     // TEXT CHUNK — Append to the displayed response (chunk can be "" in some streams)
                     if ('chunk' in data) {
                         const chunkText = data.chunk || '';
-
                         // Only treat as "main started" when we get actual content — the initial event
                         // has chunk: "" for session_id; that would wrongly reset
                         if (chunkText && !firstChunkReceived) {
                             firstChunkReceived = true;
                             if (ttsPlayer) ttsPlayer.reset();   // Stop pre-starter, play main immediately
                         }
-
                         fullResponse += chunkText;
-
                         const textSpan = contentEl.querySelector('.msg-stream-text');
                         if (textSpan) {
-                            // --- SAFE MAGIC INTERCEPTOR (No Brackets Touched) ---
-                            let displayResponse = fullResponse;
-                            
-                            // 1. Chat mein code dikhne se roko
-                            if (displayResponse.includes('[EXECUTE]')) {
-                                displayResponse = displayResponse.split('[EXECUTE]')[0].trim();
-                            }
-                            
-                            // 2. PC ko command bhejo aur fullResponse saaf karo
-                            const match = fullResponse.match(/\[EXECUTE\]([\s\S]*?)\[\/EXECUTE\]/i);
-                            if (match) {
-                                let pcCommand = match[1].replace(/```python/gi, '').replace(/```/g, '').trim();
-                                fullResponse = fullResponse.replace(/\[EXECUTE\][\s\S]*?\[\/EXECUTE\]/i, '').trim(); 
-                                fetch('/api/pc/send-command', { 
-                                    method: 'POST', 
-                                    headers: { 'Content-Type': 'application/json' }, 
-                                    body: JSON.stringify({ password: "aadit1812", command: pcCommand }) 
-                                });
-                            }
-                            
-                            // 3. Screen par final clean text dikhao
-                            textSpan.textContent = displayResponse;
-                            // --- END SAFE MAGIC ---
+                            textSpan.textContent = fullResponse;
                             textSpan.classList.remove('stream-placeholder');
                         }
 
@@ -1712,7 +1604,6 @@ async function sendMessage(textOverride) {
 
                     // DONE — The server signals that the response is complete
                     if (data.done) { streamDone = true; break; }
-
                 } catch (parseErr) {
                     // Ignore JSON parse errors (e.g., partial lines) but re-throw real errors
                     if (parseErr.message && !parseErr.message.includes('JSON'))
@@ -1741,7 +1632,6 @@ async function sendMessage(textOverride) {
         if (sendBtn) sendBtn.disabled = false;
         if (messageInput) messageInput.disabled = false;
         if (orbContainer) orbContainer.classList.remove('active');
-
         maybeRestartListening();   // Auto-restart mic when stream ends (TTS may still be playing)
     }
 }
@@ -1755,7 +1645,6 @@ async function sendMessage(textOverride) {
    ================================================================ */
 document.addEventListener('DOMContentLoaded', init);
 
-
 // --- JARVIS SECURE LOGIN SYSTEM (BACKEND AUTH) ---
 async function checkPassword() {
     const input = document.getElementById('pass-input').value;