Update index.html

index.html

@@ -6,15 +6,11 @@
     <title>CODE VED | Engineered by Divy Patel</title>
     <meta name="description" content="CODE VED - 202 Billion Parameter Enterprise AI System">
     
-    <!-- Premium Fonts: Inter for UI, JetBrains Mono for Code -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     
-    <!-- Light Theme Syntax Highlighting -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
-    
-    <!-- Required Libraries -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
@@ -36,9 +32,9 @@
             --border-focus: #d0d0d0;
             
             --brand-color: #1a1a1a;
-            --brand-accent: #0066cc;
+            --brand-accent: #0066cc; /* Tool Calling Color */
             
-            --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            --font-ui: 'Inter', sans-serif;
             --font-code: 'JetBrains Mono', monospace;
             
             --radius-sm: 8px;
@@ -48,11 +44,8 @@
 
         * { box-sizing: border-box; margin: 0; padding: 0; }
         
-        /* BUG FIX: Changed from 100vh to 100dvh for mobile/tablet browser compatibility */
         html, body {
-            height: 100%;
-            height: 100dvh; 
-            width: 100vw;
+            height: 100%; height: 100dvh; width: 100vw;
             font-family: var(--font-ui); background-color: var(--bg-main); color: var(--text-primary);
             display: flex; overflow: hidden; -webkit-font-smoothing: antialiased;
         }
@@ -76,29 +69,34 @@
         
         .sidebar-header { padding: 16px; display: flex; align-items: center; justify-content: space-between; }
         .btn-new-chat {
-            display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px;
-            border-radius: var(--radius-sm); background: var(--bg-main); border: 1px solid var(--border-light);
+            display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 12px;
+            border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--border-light);
             font-size: 14px; font-weight: 500; transition: 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.02);
         }
-        .btn-new-chat:hover { background: var(--bg-hover); }
+        .btn-new-chat:hover { background: var(--bg-hover); color: #000; border-color: #ccc; }
         
         .sidebar-history { flex: 1; overflow-y: auto; padding: 10px; }
         
         .sidebar-footer { 
             padding: 16px; border-top: 1px solid var(--border-light); display: flex; align-items: center; gap: 12px; 
-            cursor: pointer; transition: background 0.2s;
+            transition: background 0.2s;
         }
-        .sidebar-footer:hover { background: var(--bg-hover); }
         .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-color); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; flex-shrink: 0; }
         .user-info-box { flex: 1; overflow: hidden; }
         .user-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
         .user-sub { font-size: 11px; font-weight: 500; color: var(--text-tertiary); margin-top: 2px; }
+        
+        .btn-power {
+            width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
+            color: var(--text-secondary); transition: 0.2s; cursor: pointer; border: 1px solid transparent;
+        }
+        .btn-power:hover { background: #ffe6e6; color: #cc0000; border-color: #ffcccc; }
 
         /* --- MAIN WORKSPACE --- */
-        /* BUG FIX: Ensures the main area doesn't push the input dock down */
         .main-area { flex: 1; display: flex; flex-direction: column; position: relative; background: var(--bg-main); transition: 0.3s; height: 100%; overflow: hidden; }
 
-        .top-bar { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-light); background: var(--bg-main); z-index: 10; flex-shrink: 0; }
+        .top-bar { padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; background: var(--bg-main); z-index: 10; flex-shrink: 0; border-bottom: 1px solid transparent; transition: border 0.3s; }
+        .top-bar.scrolled { border-bottom: 1px solid var(--border-light); }
         .btn-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: 0.2s; }
         .btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); }
         .btn-icon svg { width: 18px; height: 18px; }
@@ -106,8 +104,7 @@
         .model-selector { font-size: 14px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
 
         /* --- CHAT CONTAINER --- */
-        /* BUG FIX: Proper flex and padding so it scrolls correctly above the input */
-        .chat-container { flex: 1; overflow-y: auto; padding: 40px 20px 20px; display: flex; flex-direction: column; align-items: center; scroll-behavior: smooth; }
+        .chat-container { flex: 1; overflow-y: auto; padding: 20px 20px 40px; display: flex; flex-direction: column; align-items: center; scroll-behavior: smooth; }
 
         .welcome-center { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; animation: fadeIn 0.5s ease; }
         .welcome-center img { width: 70px; height: 70px; border-radius: 18px; margin-bottom: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
@@ -122,6 +119,7 @@
         .bot-avatar img { width: 100%; height: 100%; object-fit: cover; }
         .bot-content { flex: 1; font-size: 15.5px; line-height: 1.6; color: var(--text-primary); min-width: 0; }
         
+        /* Markdown Styling */
         .bot-content p { margin-bottom: 16px; }
         .bot-content p:last-child { margin-bottom: 0; }
         .bot-content strong { font-weight: 600; color: #000; }
@@ -132,9 +130,29 @@
         .chat-attachment { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border-light); padding: 6px 12px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
         .chat-img-preview { max-width: 250px; border-radius: var(--radius-md); border: 1px solid var(--border-light); margin-bottom: 10px; }
 
+        /* --- GOOGLE SEARCH TOOL CALLING UI --- */
+        .tool-indicator {
+            display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500;
+            color: var(--brand-accent); background: rgba(0, 102, 204, 0.05); padding: 8px 14px;
+            border-radius: var(--radius-sm); margin-bottom: 16px; border: 1px solid rgba(0, 102, 204, 0.2);
+            transition: 0.3s;
+        }
+        .tool-indicator.active {
+            animation: pulseGlow 2s infinite alternate;
+        }
+        .tool-indicator svg { width: 16px; height: 16px; }
+        .tool-indicator.active svg { animation: spin 2s linear infinite; }
+        
+        @keyframes pulseGlow {
+            0% { box-shadow: 0 0 0 rgba(0, 102, 204, 0); border-color: rgba(0, 102, 204, 0.2); }
+            100% { box-shadow: 0 0 12px rgba(0, 102, 204, 0.3); border-color: rgba(0, 102, 204, 0.5); }
+        }
+        @keyframes spin { 100% { transform: rotate(360deg); } }
+
         /* --- INPUT DOCK --- */
-        /* BUG FIX: Changed from absolute position to standard flex-shrink so it never overlaps or hides */
-        .input-dock { flex-shrink: 0; padding: 15px 20px 25px; background: var(--bg-main); border-top: 1px solid var(--border-light); display: flex; justify-content: center; z-index: 20; width: 100%; }
+        .input-dock { flex-shrink: 0; padding: 15px 20px 25px; background: var(--bg-main); border-top: 1px solid transparent; display: flex; justify-content: center; z-index: 20; width: 100%; transition: border 0.3s; }
+        .input-dock.scrolled { border-top: 1px solid var(--border-light); }
+        
         .input-container { width: 100%; max-width: 760px; background: var(--bg-input); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 8px 12px; display: flex; flex-direction: column; transition: 0.2s; position: relative; }
         .input-container:focus-within { border-color: var(--border-focus); background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
         
@@ -160,7 +178,6 @@
         .btn-send:disabled { background: #ccc; cursor: not-allowed; transform: none; }
 
         .hidden-input { display: none; }
-        /* Adjusted dropdown position */
         .dropdown-menu { position: absolute; bottom: 100%; left: 0; margin-bottom: 10px; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 6px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); display: none; flex-direction: column; gap: 2px; min-width: 180px; z-index: 100; }
         .dropdown-menu.active { display: flex; animation: fadeIn 0.2s; }
         .dropdown-item { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: 0.2s; }
@@ -188,7 +205,6 @@
 
         .auth-phase { display: none; }
         .auth-phase.active { display: flex; flex-direction: column; }
-        
         .auth-message { font-size: 12px; color: #cc0000; text-align: center; margin-top: 10px; min-height: 18px; }
 
         /* --- WORKSPACE RIGHT PANEL --- */
@@ -221,18 +237,18 @@
         .typing-dot:nth-child(1) { animation-delay: -0.32s; } .typing-dot:nth-child(2) { animation-delay: -0.16s; }
         @keyframes typeBounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
         svg { width: 100%; height: 100%; }
+        .sys-msg { padding: 40px; text-align: center; color: var(--text-secondary); font-size: 14px; }
 
         @media (max-width: 900px) {
             .sidebar { position: absolute; left: 0; height: 100%; box-shadow: 5px 0 20px rgba(0,0,0,0.05); }
             .sidebar.collapsed { left: -260px; margin-left: 0; }
             .workspace-panel.active { width: 100%; position: absolute; top:0; left:0; height:100%; z-index: 1000; }
-            .input-dock { padding: 10px 15px 15px; } /* Slightly tighter padding for phones */
+            .input-dock { padding: 10px 15px 15px; } 
         }
     </style>
 </head>
 <body>
 
-    <!-- SIDEBAR -->
     <aside class="sidebar collapsed" id="sidebar">
         <div class="sidebar-header">
             <button class="btn-icon" onclick="UI.toggleSidebar()" title="Close Sidebar">
@@ -241,44 +257,44 @@
             <span style="font-weight: 600; font-size: 14px; letter-spacing: 0.5px;">CODE VED</span>
         </div>
         <div style="padding: 0 16px;">
-            <button class="btn-new-chat" onclick="location.reload()">
+            <button class="btn-new-chat" onclick="HistoryManager.clearHistory()">
                 <svg style="width:16px; height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                 New Chat
             </button>
         </div>
+        
         <div class="sidebar-history" id="chatHistory">
-            <!-- Sync history goes here -->
-        </div>
+            </div>
         
-        <!-- User Profile Area (Click to Login/Logout) -->
-        <div class="sidebar-footer" id="profileArea" onclick="Auth.handleProfileClick()">
+        <div class="sidebar-footer" id="profileArea">
             <div class="user-avatar" id="uAv">G</div>
             <div class="user-info-box">
                 <div class="user-name" id="uName">Guest Session</div>
-                <div class="user-sub" id="uSub">Queries: 0/10</div>
+                <div class="user-sub" id="uSub" onclick="Auth.openModal()" style="cursor:pointer; color:var(--brand-accent);">Login Required</div>
             </div>
+            <button class="btn-power" id="btnLogout" onclick="Auth.handleLogout()" title="Logout" style="display:none;">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path><line x1="12" y1="2" x2="12" y2="12"></line></svg>
+            </button>
         </div>
     </aside>
 
-    <!-- MAIN AREA -->
     <main class="main-area">
-        <header class="top-bar">
+        <header class="top-bar" id="topBar">
             <button class="btn-icon" onclick="UI.toggleSidebar()" title="Open Menu" id="btnMenuOpen">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="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>
             <div class="model-selector">CODE VED 202B</div>
-            <div style="width: 32px;"></div> <!-- Spacer -->
-        </header>
+            <div style="width: 32px;"></div> </header>
 
         <div class="chat-container" id="chatContainer">
             <div class="welcome-center" id="welcomeScreen">
                 <img src="https://i.ibb.co/MyYStcGP/TIRANGA-20260613-131924-0000.png" alt="CODE VED Logo">
                 <h1>What's your focus today?</h1>
-                <p>Hi Divy Patel, I am ready to assist you.</p>
+                <p id="welcomeGreeting">Hi there, I am ready to assist you.</p>
             </div>
         </div>
 
-        <div class="input-dock">
+        <div class="input-dock" id="inputDock">
             <div class="input-container">
                 <div class="file-preview-bar" id="filePreviewBar">
                     <img id="imgPreview" class="file-preview-icon" src="" style="display:none;">
@@ -319,7 +335,6 @@
         </div>
     </main>
 
-    <!-- WORKSPACE PANEL -->
     <aside class="workspace-panel" id="workspacePanel">
         <div class="ws-header">
             <div class="ws-tabs">
@@ -341,7 +356,6 @@
         </div>
     </aside>
 
-    <!-- SECURE AUTHENTICATION MODAL -->
     <div class="auth-overlay" id="authModal">
         <div class="auth-modal">
             <button class="auth-close" onclick="Auth.closeModal()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
@@ -352,7 +366,6 @@
                 <div class="auth-tab" id="tabRegister" onclick="Auth.switchTab('register')">Register</div>
             </div>
 
-            <!-- Login Flow -->
             <div id="flowLogin">
                 <div class="auth-phase active" id="loginPhase1">
                     <div class="auth-input-group">
@@ -369,7 +382,6 @@
                 </div>
             </div>
 
-            <!-- Register Flow -->
             <div id="flowRegister" style="display:none;">
                 <div class="auth-phase active" id="regPhase1">
                     <div class="auth-input-group">
@@ -395,7 +407,7 @@
         // --- 1. CONFIG & STATE ---
         const Config = {
             GAS_URL: "https://script.google.com/macros/s/AKfycbz5vrlB4GrfkfBVYdQ52IQweIXC1cNDwKuTUorxdAiOdSSIrH55mzJlaz9kq1Y94ot5/exec",
-            API_ENDPOINT: "/api/chat", // Your backend endpoint
+            API_ENDPOINT: "/api/chat",
             LOGO: "https://i.ibb.co/MyYStcGP/TIRANGA-20260613-131924-0000.png"
         };
 
@@ -405,6 +417,7 @@
             guestCount: parseInt(localStorage.getItem('codeved_guest') || '0', 10),
             attachment: null,
             isProcessing: false,
+            history: [],
             workspaces: [],
             currentWs: null
         };
@@ -427,9 +440,17 @@
                 const el = document.getElementById('authMsg');
                 el.innerText = msg; el.style.color = isError ? '#cc0000' : '#009900';
                 setTimeout(() => el.innerText='', 4000);
+            },
+            handleScrollEvents: () => {
+                const c = document.getElementById('chatContainer');
+                const topBar = document.getElementById('topBar');
+                const dock = document.getElementById('inputDock');
+                if (c.scrollTop > 10) topBar.classList.add('scrolled'); else topBar.classList.remove('scrolled');
+                if (c.scrollHeight - c.scrollTop - c.clientHeight > 10) dock.classList.add('scrolled'); else dock.classList.remove('scrolled');
             }
         };
 
+        document.getElementById('chatContainer').addEventListener('scroll', UI.handleScrollEvents);
         document.addEventListener('click', (e) => {
             if(!e.target.closest('.tools-left')) document.getElementById('attachMenu').classList.remove('active');
         });
@@ -440,34 +461,41 @@
             if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); Chat.handleSend(); }
         });
 
-        // --- 3. AUTHENTICATION (DATABASE LINK) ---
+        // --- 3. AUTHENTICATION & HISTORY DB (RESTORED) ---
         const Auth = {
             init: () => {
                 const uAv = document.getElementById('uAv');
                 const uName = document.getElementById('uName');
                 const uSub = document.getElementById('uSub');
+                const btnLogout = document.getElementById('btnLogout');
+                const greeting = document.getElementById('welcomeGreeting');
 
                 if (State.user) {
-                    uAv.innerText = (State.name ? State.name.charAt(0) : State.user.charAt(0)).toUpperCase();
-                    uName.innerText = State.name || State.user.split('@')[0];
-                    uSub.innerText = "Authenticated User";
+                    const dispName = State.name || State.user.split('@')[0];
+                    uAv.innerText = dispName.charAt(0).toUpperCase();
+                    uName.innerText = dispName;
+                    uSub.innerText = "Authenticated";
                     uSub.style.color = "#009900";
+                    uSub.onclick = null;
+                    uSub.style.cursor = 'default';
+                    btnLogout.style.display = 'flex';
+                    greeting.innerText = `Hi ${dispName}, I am ready to assist you.`;
+                    
+                    HistoryManager.sync(); // Load History on Boot
                 } else {
                     uAv.innerText = "G";
                     uName.innerText = "Guest Session";
                     uSub.innerText = `Queries: ${State.guestCount}/10`;
                     uSub.style.color = "var(--text-tertiary)";
+                    btnLogout.style.display = 'none';
+                    greeting.innerText = `Hi there, I am ready to assist you.`;
                 }
             },
-            handleProfileClick: () => {
-                if(State.user) {
-                    if(confirm("Do you want to securely logout?")) {
-                        localStorage.removeItem('codeved_user');
-                        localStorage.removeItem('codeved_name');
-                        location.reload();
-                    }
-                } else {
-                    Auth.openModal();
+            handleLogout: () => {
+                if(confirm("Are you sure you want to log out?")) {
+                    localStorage.removeItem('codeved_user');
+                    localStorage.removeItem('codeved_name');
+                    location.reload();
                 }
             },
             openModal: () => document.getElementById('authModal').style.display = 'flex',
@@ -478,18 +506,10 @@
                 document.getElementById('flowLogin').style.display = 'none';
                 document.getElementById('flowRegister').style.display = 'none';
                 
-                if(tab === 'login') {
-                    document.getElementById('tabLogin').classList.add('active');
-                    document.getElementById('flowLogin').style.display = 'block';
-                } else {
-                    document.getElementById('tabRegister').classList.add('active');
-                    document.getElementById('flowRegister').style.display = 'block';
-                }
-            },
-            switchPhase: (from, to) => {
-                document.getElementById(from).classList.remove('active');
-                document.getElementById(to).classList.add('active');
+                if(tab === 'login') { document.getElementById('tabLogin').classList.add('active'); document.getElementById('flowLogin').style.display = 'block'; } 
+                else { document.getElementById('tabRegister').classList.add('active'); document.getElementById('flowRegister').style.display = 'block'; }
             },
+            switchPhase: (from, to) => { document.getElementById(from).classList.remove('active'); document.getElementById(to).classList.add('active'); },
             process: async (action) => {
                 let payload = { action: action };
                 let btnId = '';
@@ -516,11 +536,7 @@
                 btn.disabled = true; btn.innerText = "Processing...";
 
                 try {
-                    const res = await fetch(Config.GAS_URL, { 
-                        method: 'POST', mode: 'cors',
-                        headers: { 'Content-Type': 'text/plain;charset=utf-8' },
-                        body: JSON.stringify(payload) 
-                    });
+                    const res = await fetch(Config.GAS_URL, { method: 'POST', mode: 'cors', headers: { 'Content-Type': 'text/plain;charset=utf-8' }, body: JSON.stringify(payload) });
                     const data = await res.json();
                     
                     if (data.status === 'success') {
@@ -532,17 +548,49 @@
                             if(payload.name) localStorage.setItem('codeved_name', payload.name);
                             location.reload();
                         }
-                    } else {
-                        UI.showAuthMsg(data.message);
+                    } else { UI.showAuthMsg(data.message); }
+                } catch (e) { UI.showAuthMsg("Database connection error. Please try again."); }
+                
+                btn.disabled = false; btn.innerText = originalText;
+            }
+        };
+
+        const HistoryManager = {
+            sync: async () => {
+                if(!State.user) return;
+                try {
+                    const res = await fetch(Config.GAS_URL, { method: 'POST', body: JSON.stringify({action: "get_history", email: State.user})});
+                    const data = await res.json();
+                    if(data.status === 'success' && data.historyJSON !== "[]") {
+                        State.history = JSON.parse(data.historyJSON);
+                        document.getElementById('welcomeScreen').style.display = 'none';
+                        State.history.forEach(msg => {
+                            if(msg.role === 'user') Chat.renderUser(msg.content, '');
+                            else {
+                                const botNode = Chat.renderBot();
+                                botNode.innerHTML = marked.parse(msg.content.replace(/<think>[\s\S]*?<\/think>/gi, ''));
+                            }
+                        });
+                        setTimeout(UI.scrollToBottom, 200);
                     }
-                } catch (e) {
-                    UI.showAuthMsg("Database connection error. Please try again.");
+                } catch(e) { console.warn("History sync failed."); }
+            },
+            save: () => {
+                if(!State.user) return;
+                fetch(Config.GAS_URL, { 
+                    method: 'POST', body: JSON.stringify({action: "save_history", email: State.user, historyJSON: JSON.stringify(State.history)}) 
+                }).catch(e=>{});
+            },
+            clearHistory: async () => {
+                if(State.user) {
+                    document.getElementById('chatContainer').innerHTML = '<div class="sys-msg">Clearing Memory Workspace...</div>';
+                    try { await fetch(Config.GAS_URL, { method: 'POST', body: JSON.stringify({action: "delete_history", email: State.user}) }); } catch(e){}
                 }
-                btn.disabled = false; btn.innerText = originalText;
+                location.reload();
             }
         };
 
-        // --- 4. FILE HANDLING (Sanitized) ---
+        // --- 4. FILE HANDLING ---
         const FileSys = {
             process: async (input, type) => {
                 document.getElementById('attachMenu').classList.remove('active');
@@ -586,10 +634,7 @@
                     } else {
                         r.onload = (e) => {
                             let data = e.target.result;
-                            // Safe HTML sanitization
-                            if(file.name.endsWith('.html')) {
-                                data = data.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "\n[SCRIPT SANITIZED]\n");
-                            }
+                            if(file.name.endsWith('.html')) { data = data.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "\n[SCRIPT SANITIZED]\n"); }
                             State.attachment = { type: 'text', data: data, name: file.name };
                         };
                         r.readAsText(file);
@@ -615,93 +660,54 @@
                 Speech.rec.onstart = () => { Speech.isRec = true; document.getElementById('btnStt').classList.add('recording'); };
                 Speech.rec.onresult = (e) => {
                     let trans = '';
-                    for (let i = e.resultIndex; i < e.results.length; ++i) {
-                        if (e.results[i].isFinal) trans += e.results[i][0].transcript;
-                    }
-                    if (trans) {
-                        const input = document.getElementById('mainInput');
-                        input.value += (input.value ? ' ' : '') + trans;
-                        UI.autoGrow(input);
-                    }
+                    for (let i = e.resultIndex; i < e.results.length; ++i) { if (e.results[i].isFinal) trans += e.results[i][0].transcript; }
+                    if (trans) { const input = document.getElementById('mainInput'); input.value += (input.value ? ' ' : '') + trans; UI.autoGrow(input); }
                 };
                 Speech.rec.onerror = () => Speech.stop();
                 Speech.rec.onend = () => Speech.stop();
             },
-            toggle: () => {
-                if (!Speech.rec) Speech.init();
-                if (Speech.isRec) Speech.stop();
-                else { try { Speech.rec.start(); } catch(e) {} }
-            },
-            stop: () => {
-                if(Speech.rec) Speech.rec.stop();
-                Speech.isRec = false;
-                document.getElementById('btnStt').classList.remove('recording');
-            }
+            toggle: () => { if (!Speech.rec) Speech.init(); if (Speech.isRec) Speech.stop(); else { try { Speech.rec.start(); } catch(e) {} } },
+            stop: () => { if(Speech.rec) Speech.rec.stop(); Speech.isRec = false; document.getElementById('btnStt').classList.remove('recording'); }
         };
 
         // --- 6. WORKSPACE PRO MAX ---
         const Workspace = {
             open: (id) => {
-                State.currentWs = id;
-                const d = State.workspaces[id];
-                const b = document.getElementById('wsCodeBlock');
-                b.className = `hljs language-${d.lang || 'plaintext'}`;
-                b.textContent = d.code;
-                hljs.highlightElement(b);
-                
+                State.currentWs = id; const d = State.workspaces[id]; const b = document.getElementById('wsCodeBlock');
+                b.className = `hljs language-${d.lang || 'plaintext'}`; b.textContent = d.code; hljs.highlightElement(b);
                 document.getElementById('workspacePanel').classList.add('active');
                 if(window.innerWidth <= 900) { document.getElementById('sidebar').classList.add('collapsed'); }
                 Workspace.switchTab('code');
             },
             close: () => document.getElementById('workspacePanel').classList.remove('active'),
             switchTab: (tab) => {
-                document.getElementById('tabCode').classList.remove('active');
-                document.getElementById('tabPreview').classList.remove('active');
+                document.getElementById('tabCode').classList.remove('active'); document.getElementById('tabPreview').classList.remove('active');
                 if(tab === 'code') {
-                    document.getElementById('tabCode').classList.add('active');
-                    document.getElementById('wsCodeView').style.display = 'block';
-                    document.getElementById('wsPreviewView').style.display = 'none';
+                    document.getElementById('tabCode').classList.add('active'); document.getElementById('wsCodeView').style.display = 'block'; document.getElementById('wsPreviewView').style.display = 'none';
                 } else {
-                    document.getElementById('tabPreview').classList.add('active');
-                    document.getElementById('wsCodeView').style.display = 'none';
-                    document.getElementById('wsPreviewView').style.display = 'flex';
+                    document.getElementById('tabPreview').classList.add('active'); document.getElementById('wsCodeView').style.display = 'none'; document.getElementById('wsPreviewView').style.display = 'flex';
                     Workspace.run();
                 }
             },
-            copy: () => {
-                if(State.currentWs !== null) {
-                    navigator.clipboard.writeText(State.workspaces[State.currentWs].code).then(() => alert('Code Copied!'));
-                }
-            },
+            copy: () => { if(State.currentWs !== null) { navigator.clipboard.writeText(State.workspaces[State.currentWs].code).then(() => alert('Code Copied!')); } },
             run: async () => {
                 if (State.currentWs === null) return;
-                const d = State.workspaces[State.currentWs];
-                const lang = (d.lang || '').toLowerCase();
-                const view = document.getElementById('wsPreviewView');
+                const d = State.workspaces[State.currentWs]; const lang = (d.lang || '').toLowerCase(); const view = document.getElementById('wsPreviewView');
                 
                 if (['html', 'xml', 'javascript', 'js', 'css'].includes(lang)) {
                     let html = d.code;
                     if(lang === 'javascript' || lang === 'js') html = `<script>${d.code}<\/script>`;
                     if(lang === 'css') html = `<style>${d.code}</style><div style="padding:20px;font-family:sans-serif;">CSS Applied. Add HTML to test.</div>`;
-                    
-                    const iframe = document.createElement('iframe');
-                    iframe.style.width = '100%'; iframe.style.height = '100%'; iframe.style.border = 'none';
-                    view.innerHTML = ''; view.appendChild(iframe);
-                    iframe.contentWindow.document.open(); iframe.contentWindow.document.write(html); iframe.contentWindow.document.close();
+                    const iframe = document.createElement('iframe'); iframe.style.width = '100%'; iframe.style.height = '100%'; iframe.style.border = 'none';
+                    view.innerHTML = ''; view.appendChild(iframe); iframe.contentWindow.document.open(); iframe.contentWindow.document.write(html); iframe.contentWindow.document.close();
                     return;
                 }
-
                 view.innerHTML = '<div class="ws-console" style="color:var(--brand-accent);">Compiling code...</div>';
-                const pMap = {'python':'python', 'py':'python', 'c':'c', 'cpp':'c++', 'java':'java'};
-                const rLang = pMap[lang];
-                
+                const pMap = {'python':'python', 'py':'python', 'c':'c', 'cpp':'c++', 'java':'java'}; const rLang = pMap[lang];
                 if(!rLang) { view.innerHTML = `<div class="ws-console" style="color:#cc0000;">Live Preview not supported for ${lang}.</div>`; return; }
 
                 try {
-                    const res = await fetch('https://emkc.org/api/v2/piston/execute', {
-                        method: 'POST', headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ language: rLang, version: "*", files: [{ content: d.code }] })
-                    });
+                    const res = await fetch('https://emkc.org/api/v2/piston/execute', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ language: rLang, version: "*", files: [{ content: d.code }] }) });
                     const data = await res.json();
                     let out = (data.compile?.output || "") + "\n" + (data.run?.output || "") + "\n" + (data.run?.stderr || "");
                     view.innerHTML = `<div class="ws-console">${UI.escape(out.trim() || "[Execution Finished]")}</div>`;
@@ -711,8 +717,7 @@
 
         const MDRenderer = new marked.Renderer();
         MDRenderer.code = function(code, lang) {
-            const id = State.workspaces.length;
-            State.workspaces.push({code: code, lang: lang});
+            const id = State.workspaces.length; State.workspaces.push({code: code, lang: lang});
             const highlighted = hljs.highlightAuto(code).value;
             return `
             <div style="margin: 16px 0;">
@@ -727,7 +732,7 @@
         };
         marked.use({ renderer: MDRenderer });
 
-        // --- 7. CHAT ENGINE ---
+        // --- 7. CHAT ENGINE (WITH TOOL CALLING UI) ---
         const Chat = {
             renderUser: (txt, attachUI) => {
                 const c = document.getElementById('chatContainer');
@@ -744,32 +749,37 @@
                 c.appendChild(w); UI.scrollToBottom();
                 return w.querySelector('.bot-content');
             },
+            
+            getToolHTML: (isActive) => {
+                return `
+                <div class="tool-indicator ${isActive ? 'active' : ''}">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
+                    ${isActive ? 'Searching on Google Search...' : 'Searched on Google Search'}
+                </div><br>`;
+            },
+
             handleSend: async () => {
                 if(State.isProcessing) return;
                 const input = document.getElementById('mainInput');
                 const text = input.value.trim();
                 if(!text && !State.attachment) return;
 
-                // GUEST LIMIT LOGIC
+                // Guest Validation
                 if(!State.user) {
-                    if(State.guestCount >= 10) {
-                        Auth.openModal();
-                        UI.showAuthMsg("Guest limit reached. Secure Login required.", true);
-                        return;
-                    }
-                    State.guestCount++;
-                    localStorage.setItem('codeved_guest', State.guestCount);
+                    if(State.guestCount >= 10) { Auth.openModal(); UI.showAuthMsg("Guest limit reached. Secure Login required.", true); return; }
+                    State.guestCount++; localStorage.setItem('codeved_guest', State.guestCount);
                     document.getElementById('uSub').innerText = `Queries: ${State.guestCount}/10`;
                 }
 
-                State.isProcessing = true;
-                document.getElementById('btnSend').disabled = true;
-                input.value = ''; input.style.height = 'auto';
-                document.getElementById('welcomeScreen').style.display = 'none';
+                State.isProcessing = true; document.getElementById('btnSend').disabled = true;
+                input.value = ''; input.style.height = 'auto'; document.getElementById('welcomeScreen').style.display = 'none';
 
                 let payloadStr = text;
                 let attachUI = '';
                 let mediaArray = [];
+                let isSearching = text.toLowerCase().startsWith('/search'); // TOOL TRIGGER
 
                 if(State.attachment) {
                     if(State.attachment.type === 'text') {
@@ -782,9 +792,15 @@
                 }
 
                 Chat.renderUser(text || '[Attached Media]', attachUI);
+                State.history.push({ role: 'user', content: payloadStr });
                 FileSys.discard();
 
                 const botContent = Chat.renderBot();
+                
+                // Show glowing tool UI immediately if it's a search
+                if (isSearching) {
+                    botContent.innerHTML = Chat.getToolHTML(true) + `<div class="typing-indicator"><div class="typing-dot"></div><div class="typing-dot"></div></div>`;
+                }
 
                 try {
                     const res = await fetch(Config.API_ENDPOINT, {
@@ -792,7 +808,7 @@
                         body: JSON.stringify({
                             message: payloadStr, attachments: mediaArray,
                             system_prompt: "You are CODE VED, a highly intelligent system engineered by Divy Patel. Speak purely in English.",
-                            history: [] 
+                            history: State.history 
                         })
                     });
                     
@@ -817,14 +833,25 @@
                                     if(json.choices && json.choices[0].delta.content) fullText += json.choices[0].delta.content;
                                     else if (json.response) fullText += json.response;
                                     
-                                    botContent.innerHTML = marked.parse(fullText.replace(/<think>[\s\S]*?<\/think>/gi, ''));
+                                    // Parse Markdown, Stop Tool animation if it was active
+                                    let finalHtml = marked.parse(fullText.replace(/<think>[\s\S]*?<\/think>/gi, ''));
+                                    if(isSearching) {
+                                        botContent.innerHTML = Chat.getToolHTML(false) + finalHtml;
+                                    } else {
+                                        botContent.innerHTML = finalHtml;
+                                    }
+                                    
                                     UI.scrollToBottom();
                                 } catch(e){}
                             }
                         }
                     }
+                    
+                    State.history.push({ role: 'assistant', content: fullText });
+                    HistoryManager.save();
+
                 } catch(e) {
-                    botContent.innerHTML = `<span style="color:#cc0000; font-weight:500;">Connection Offline. Backend database is currently unreachable.</span>`;
+                    botContent.innerHTML = `<span style="color:#cc0000; font-weight:500;">Connection Offline. Backend is unreachable.</span>`;
                 } finally {
                     State.isProcessing = false;
                     document.getElementById('btnSend').disabled = false;
@@ -835,7 +862,6 @@
 
         window.onload = () => { 
             Auth.init(); 
-            // Ensures sidebar layout doesn't break chat input
             if(window.innerWidth > 900) { document.getElementById('btnMenuOpen').style.display = 'none'; document.getElementById('sidebar').classList.remove('collapsed'); }
         };