Update chat.html

chat.html

@@ -8,9 +8,9 @@
   <!-- Tailwind -->
   <script src="https://cdn.tailwindcss.com"></script>
 
-  <!-- Three.js + Vanta -->
+  <!-- Three.js + Vanta (pinned) -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.24/dist/vanta.net.min.js"></script>
 
   <!-- Icons + Font -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -39,17 +39,21 @@
     .chat-container::-webkit-scrollbar-track { background: #1e1b4b; }
     .chat-container::-webkit-scrollbar-thumb { background-color: #4f46e5; border-radius: 3px; }
 
-    .typing-indicator::after {
-      content: '...';
-      animation: typing 1.5s infinite;
-      display: inline-block;
-      width: 20px;
-      text-align: left;
+    /* Typing indicator that actually animates (no content-keyframes) */
+    .typing-indicator { display: inline-flex; align-items: center; gap: 6px; }
+    .typing-dots { display: inline-flex; gap: 3px; }
+    .typing-dots span {
+      width: 4px; height: 4px;
+      border-radius: 999px;
+      background: rgba(148,163,184,0.9);
+      opacity: 0.35;
+      animation: dotPulse 1.2s infinite;
     }
-    @keyframes typing {
-      0% { content: '.'; }
-      33% { content: '..'; }
-      66% { content: '...'; }
+    .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
+    .typing-dots span:nth-child(3) { animation-delay: 0.30s; }
+    @keyframes dotPulse {
+      0%, 100% { opacity: 0.25; transform: translateY(0); }
+      50% { opacity: 0.95; transform: translateY(-1px); }
     }
 
     .modal { transition: opacity 0.3s ease, transform 0.3s ease; }
@@ -83,12 +87,14 @@
     <div class="flex items-center space-x-3">
       <button id="lab-nav-btn"
         class="w-10 h-10 rounded-full border border-indigo-500/40 bg-gray-900/20 hover:bg-gray-900/40 backdrop-blur-sm transition flex items-center justify-center"
-        aria-label="Open Lab Navigator" title="Lab Navigator">
+        aria-label="Open Lab Navigator" title="Lab Navigator"
+        aria-controls="lab-navigator" aria-haspopup="dialog">
         <i class="fas fa-asterisk text-indigo-300 text-sm"></i>
       </button>
 
       <button id="access-btn"
-        class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition">
+        class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition"
+        aria-controls="access-modal" aria-haspopup="dialog">
         Access
       </button>
     </div>
@@ -172,7 +178,12 @@
               </button>
             </div>
             <div>
-              <span id="typing-indicator" class="typing-indicator hidden">System is typing</span>
+              <span id="typing-indicator" class="hidden">
+                <span class="typing-indicator">
+                  <span>System is typing</span>
+                  <span class="typing-dots" aria-hidden="true"><span></span><span></span><span></span></span>
+                </span>
+              </span>
             </div>
           </div>
 
@@ -214,18 +225,23 @@
           </button>
         </div>
 
-        <form id="access-form" class="space-y-4">
+        <!-- Inline feedback (replaces alerts) -->
+        <div id="access-feedback"
+          class="hidden mb-4 rounded-lg border border-gray-800 bg-black/25 px-4 py-3 text-sm"
+          role="status" aria-live="polite"></div>
+
+        <form id="access-form" class="space-y-4" novalidate>
           <div>
             <label for="name" class="block text-sm font-medium mb-1">Full Name</label>
-            <input type="text" id="name" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
+            <input type="text" id="name" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring" autocomplete="name">
           </div>
           <div>
             <label for="email" class="block text-sm font-medium mb-1">Email</label>
-            <input type="email" id="email" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
+            <input type="email" id="email" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring" autocomplete="email">
           </div>
           <div>
             <label for="institution" class="block text-sm font-medium mb-1">Institution/Organization</label>
-            <input type="text" id="institution" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
+            <input type="text" id="institution" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring" autocomplete="organization">
           </div>
           <div>
             <label for="purpose" class="block text-sm font-medium mb-1">Purpose of Access</label>
@@ -369,25 +385,38 @@
   </div>
 
   <script>
-    /* VANTA */
-    const vantaEffect = VANTA.NET({
-      el: "#vanta-bg",
-      mouseControls: true,
-      touchControls: true,
-      gyroControls: false,
-      minHeight: 200.00,
-      minWidth: 200.00,
-      scale: 1.00,
-      scaleMobile: 1.00,
-      color: 0x4f46e5,
-      backgroundColor: 0x020617,
-      points: 12.00,
-      maxDistance: 20.00,
-      spacing: 15.00
+    /* -------------------------------------------------------------
+       VANTA (guarded)
+    ------------------------------------------------------------- */
+    let vantaEffect = null;
+    try {
+      if (window.VANTA && typeof VANTA.NET === 'function') {
+        vantaEffect = VANTA.NET({
+          el: "#vanta-bg",
+          mouseControls: true,
+          touchControls: true,
+          gyroControls: false,
+          minHeight: 200.00,
+          minWidth: 200.00,
+          scale: 1.00,
+          scaleMobile: 1.00,
+          color: 0x4f46e5,
+          backgroundColor: 0x020617,
+          points: 12.00,
+          maxDistance: 20.00,
+          spacing: 15.00
+        });
+      }
+    } catch (_) {
+      vantaEffect = null;
+    }
+    window.addEventListener('resize', () => {
+      if (vantaEffect && typeof vantaEffect.resize === 'function') vantaEffect.resize();
     });
-    window.addEventListener('resize', () => vantaEffect.resize());
 
-    /* MODAL ACCESSIBILITY */
+    /* -------------------------------------------------------------
+       MODAL ACCESSIBILITY (focus trap + restore opener focus)
+    ------------------------------------------------------------- */
     function trapFocus(modal) {
       const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
       if (!focusable.length) return;
@@ -401,21 +430,22 @@
           } else {
             if (document.activeElement === last) { e.preventDefault(); first.focus(); }
           }
-        } else if (e.key === 'Escape') {
-          toggleModal(modal, false);
         }
       }
       modal.addEventListener('keydown', handler);
       modal._focusHandler = handler;
     }
+
     function untrapFocus(modal) {
       if (modal._focusHandler) {
         modal.removeEventListener('keydown', modal._focusHandler);
         delete modal._focusHandler;
       }
     }
+
     const toggleModal = (modal, show) => {
       if (show) {
+        modal._opener = document.activeElement;
         modal.classList.remove('modal-hidden');
         modal.classList.add('modal-visible');
         document.body.style.overflow = 'hidden';
@@ -425,37 +455,84 @@
         modal.classList.add('modal-hidden');
         document.body.style.overflow = '';
         untrapFocus(modal);
+        if (modal._opener && typeof modal._opener.focus === 'function') {
+          modal._opener.focus();
+        }
+        modal._opener = null;
       }
     };
 
-    /* ACCESS MODAL */
+    /* -------------------------------------------------------------
+       ACCESS MODAL (inline feedback)
+    ------------------------------------------------------------- */
     const accessModal = document.getElementById('access-modal');
     const accessBtn = document.getElementById('access-btn');
     const closeAccessModal = document.getElementById('close-access-modal');
+    const accessForm = document.getElementById('access-form');
+    const accessFeedback = document.getElementById('access-feedback');
+
+    function setAccessFeedback(kind, text) {
+      accessFeedback.classList.remove('hidden');
+      accessFeedback.classList.remove('border-red-500/30', 'bg-red-900/10', 'text-red-200');
+      accessFeedback.classList.remove('border-emerald-500/30', 'bg-emerald-900/10', 'text-emerald-200');
+      accessFeedback.classList.remove('border-indigo-500/30', 'bg-indigo-900/10', 'text-indigo-200');
+
+      if (kind === 'error') {
+        accessFeedback.classList.add('border-red-500/30', 'bg-red-900/10', 'text-red-200');
+      } else if (kind === 'success') {
+        accessFeedback.classList.add('border-emerald-500/30', 'bg-emerald-900/10', 'text-emerald-200');
+      } else {
+        accessFeedback.classList.add('border-indigo-500/30', 'bg-indigo-900/10', 'text-indigo-200');
+      }
+      accessFeedback.textContent = text;
+    }
+
+    function clearAccessFeedback() {
+      accessFeedback.textContent = '';
+      accessFeedback.classList.add('hidden');
+      accessFeedback.classList.remove(
+        'border-red-500/30','bg-red-900/10','text-red-200',
+        'border-emerald-500/30','bg-emerald-900/10','text-emerald-200',
+        'border-indigo-500/30','bg-indigo-900/10','text-indigo-200'
+      );
+    }
+
+    function isValidEmail(email) {
+      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+    }
 
     accessBtn.addEventListener('click', () => {
+      clearAccessFeedback();
       toggleModal(accessModal, true);
       setTimeout(() => document.getElementById('name').focus(), 50);
     });
     closeAccessModal.addEventListener('click', () => toggleModal(accessModal, false));
     accessModal.addEventListener('click', (e) => { if (e.target === accessModal) toggleModal(accessModal, false); });
 
-    document.getElementById('access-form').addEventListener('submit', (e) => {
+    accessForm.addEventListener('submit', (e) => {
       e.preventDefault();
       const name = document.getElementById('name').value.trim();
       const email = document.getElementById('email').value.trim();
       const institution = document.getElementById('institution').value.trim();
       const purpose = document.getElementById('purpose').value;
+
       if (!name || !email || !institution || !purpose) {
-        alert('Please fill in all fields.');
+        setAccessFeedback('error', 'Please fill in all fields.');
         return;
       }
-      alert('Request received. You will be contacted after review.');
-      e.target.reset();
-      toggleModal(accessModal, false);
+      if (!isValidEmail(email)) {
+        setAccessFeedback('error', 'Please enter a valid email address.');
+        return;
+      }
+
+      setAccessFeedback('success', 'Request received. You will be contacted after review.');
+      accessForm.reset();
+      setTimeout(() => toggleModal(accessModal, false), 900);
     });
 
-    /* LAB NAVIGATOR */
+    /* -------------------------------------------------------------
+       LAB NAVIGATOR
+    ------------------------------------------------------------- */
     const labNav = document.getElementById('lab-navigator');
     const labNavBtn = document.getElementById('lab-nav-btn');
     const labNavClose = document.getElementById('lab-nav-close');
@@ -535,6 +612,7 @@
     function renderDossier(key) {
       const d = DOSSIERS[key];
       if (!d) return;
+
       dossierTitle.textContent = d.title;
       dossierSubtitle.textContent = d.subtitle;
       dossierStatus.textContent = d.status;
@@ -557,10 +635,22 @@
     }
 
     document.querySelectorAll('.lab-node').forEach(btn => {
-      btn.addEventListener('click', () => renderDossier(btn.getAttribute('data-dossier')));
+      btn.addEventListener('click', () => {
+        const key = btn.getAttribute('data-dossier');
+        renderDossier(key);
+
+        // Apply the implied navigation behavior (previously missing)
+        if (key === 'start') window.location.href = "index.html";
+        if (key === 'programs') window.location.href = "capabilities.html";
+        if (key === 'ai_scientist') window.location.href = "research.html";
+        if (key === 'access') { closeLabNav(); accessBtn.click(); }
+        // console -> stays here
+      });
     });
 
-    /* CHAT: secure-by-design client */
+    /* -------------------------------------------------------------
+       CHAT: secure-by-design client
+    ------------------------------------------------------------- */
     const API_ENDPOINT = "/api/chat"; // change if your deployment requires a prefix
 
     const chatForm = document.getElementById('chat-form');
@@ -622,9 +712,12 @@
       if (isBusy) {
         typingIndicator.classList.remove('hidden');
         sendBtn.disabled = true;
+        chatInput.disabled = true;
       } else {
         typingIndicator.classList.add('hidden');
         sendBtn.disabled = false;
+        chatInput.disabled = false;
+        chatInput.focus();
       }
     }
 
@@ -676,7 +769,7 @@
       try {
         const reply = await callServerChat(message);
         addMessage(reply, false);
-      } catch (err) {
+      } catch (_) {
         addMessage(localDemoResponse(message), false);
       } finally {
         setBusy(false);
@@ -684,15 +777,12 @@
     });
 
     clearBtn.addEventListener('click', () => {
-      // Keep the seed greeting, remove everything after it
       const nodes = Array.from(chatMessages.children);
       for (let i = 1; i < nodes.length; i++) nodes[i].remove();
 
-      // Reset transcript to the seed system message only
       transcript.length = 0;
       seedTranscript();
 
-      // Add a visible confirmation message (this will also be recorded)
       addMessage('Session cleared.', false);
     });
 
@@ -714,7 +804,9 @@
       URL.revokeObjectURL(url);
     });
 
-    /* GLOBAL ESC */
+    /* -------------------------------------------------------------
+       GLOBAL ESC
+    ------------------------------------------------------------- */
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') {
         if (labNav && !labNav.classList.contains('modal-hidden')) closeLabNav();
@@ -722,7 +814,7 @@
       }
     });
 
-    // Optional: preselect a dossier for the right pane
+    // Preselect a dossier for the right pane
     renderDossier('console');
   </script>
 </body>