Spaces:

Testing347
/

Copy-ava-testing

Running

App Files Files Community

Testing347 commited on Dec 15, 2025

Commit

cb13f5f

verified ·

1 Parent(s): cdca016

Update chat.html

Browse files

Files changed (1) hide show

chat.html +249 -130

chat.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -68,6 +69,13 @@
     }
     .focus-ring:focus { outline: none; box-shadow: 0 0 0 2px rgba(99,102,241,0.65); }
   </style>
 </head>
@@ -86,14 +94,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-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"
         aria-controls="access-modal" aria-haspopup="dialog">
         Access
       </button>
@@ -114,7 +122,7 @@
           <span class="gradient-text">Conversation</span> Interface
         </h1>
         <p class="mt-3 text-gray-300 max-w-2xl mx-auto">
-          A controlled channel into SILENTPATTERN’s systems. Minimal surface; auditable outputs.
         </p>
       </div>
@@ -158,11 +166,11 @@
         <div class="px-6 py-4 border-t border-gray-800 bg-black/10">
           <form id="chat-form" class="flex items-center" autocomplete="off" aria-label="Send message">
             <input id="chat-input" type="text"
-              placeholder="Describe a task (e.g., ‘Draft a research note for MCAP’)..."
               class="flex-1 bg-gray-800/50 border border-gray-700 rounded-l-xl px-4 py-3 focus-ring"
               aria-label="Type your message" />
             <button id="send-btn" type="submit"
-              class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-r-xl transition disabled:opacity-60 disabled:cursor-not-allowed"
               aria-label="Send">
               <i class="fas fa-paper-plane"></i>
             </button>
@@ -170,10 +178,10 @@
           <div class="mt-2 flex justify-between items-center text-sm text-gray-500">
             <div class="flex items-center gap-3">
-              <button type="button" id="clear-btn" class="hover:text-indigo-400 transition" aria-label="Clear session">
                 <i class="fas fa-broom mr-1"></i> Clear
               </button>
-              <button type="button" id="export-btn" class="hover:text-indigo-400 transition" aria-label="Export transcript">
                 <i class="fas fa-file-arrow-down mr-1"></i> Export
               </button>
             </div>
@@ -220,7 +228,7 @@
             <h3 class="text-xl font-bold" id="access-modal-title">Request Access</h3>
             <p class="text-gray-400 mt-1">Limited availability for qualified researchers</p>
           </div>
-          <button id="close-access-modal" class="text-gray-400 hover:text-white" aria-label="Close">
             <i class="fas fa-times"></i>
           </button>
         </div>
@@ -234,14 +242,17 @@
           <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" 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" 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" autocomplete="organization">
           </div>
           <div>
             <label for="purpose" class="block text-sm font-medium mb-1">Purpose of Access</label>
@@ -253,10 +264,11 @@
               <option value="partnership">Partnership</option>
               <option value="other">Other</option>
             </select>
           </div>
           <div class="pt-2">
             <button type="submit"
-              class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:opacity-90 transition">
               Submit Request
             </button>
           </div>
@@ -287,7 +299,7 @@
             </div>
             <button id="lab-nav-close"
-              class="w-9 h-9 rounded-full border border-gray-800 bg-gray-900/30 hover:bg-gray-900/50 transition flex items-center justify-center"
               aria-label="Close Lab Navigator">
               <i class="fas fa-times text-gray-300 text-sm"></i>
             </button>
@@ -299,32 +311,32 @@
                               radial-gradient(circle at 70% 70%, rgba(236,72,153,0.10), transparent 50%);"></div>
             <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-3">
-              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
-                data-dossier="start">
                 <div class="text-sm text-gray-200 font-medium">Start Here</div>
                 <div class="text-xs text-gray-500 mt-1">Return to the main interface</div>
               </button>
-              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
-                data-dossier="console">
                 <div class="text-sm text-gray-200 font-medium">Console</div>
                 <div class="text-xs text-gray-500 mt-1">This page: controlled chat</div>
               </button>
-              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
-                data-dossier="programs">
                 <div class="text-sm text-gray-200 font-medium">Programs</div>
                 <div class="text-xs text-gray-500 mt-1">MCAP · CHAI · Quantum Lambda</div>
               </button>
-              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
-                data-dossier="ai_scientist">
                 <div class="text-sm text-gray-200 font-medium">AI Scientist</div>
                 <div class="text-xs text-gray-500 mt-1">Hypothesis → experiment → report</div>
               </button>
-              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 sm:col-span-2"
-                data-dossier="access">
                 <div class="text-sm text-gray-200 font-medium">Access</div>
                 <div class="text-xs text-gray-500 mt-1">Request access to demos and research</div>
               </button>
@@ -350,8 +362,7 @@
             </div>
           </div>
-          <div class="p-6 space-y-5 max-h-[560px] overflow-auto"
-            style="scrollbar-width: thin; scrollbar-color: #4f46e5 #1e1b4b;">
             <div id="dossier-body" class="text-sm text-gray-300 leading-relaxed">
               This console is designed for controlled interaction. Dossiers expose depth by intent.
             </div>
@@ -365,11 +376,11 @@
             <div class="flex flex-col sm:flex-row gap-3">
               <button id="dossier-primary"
-                class="flex-1 px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition">
                 Open
               </button>
               <button id="dossier-secondary"
-                class="flex-1 px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition">
                 View Note
               </button>
             </div>
@@ -385,34 +396,49 @@
   </div>
   <script>
     /* -------------------------------------------------------------
-       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();
-    });
     /* -------------------------------------------------------------
        MODAL ACCESSIBILITY (focus trap + restore opener focus)
@@ -445,7 +471,6 @@
     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';
@@ -455,13 +480,38 @@
         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 (inline feedback)
     ------------------------------------------------------------- */
@@ -471,7 +521,18 @@
     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');
@@ -487,7 +548,8 @@
       accessFeedback.textContent = text;
     }
-    function clearAccessFeedback() {
       accessFeedback.textContent = '';
       accessFeedback.classList.add('hidden');
       accessFeedback.classList.remove(
@@ -497,39 +559,85 @@
       );
     }
-    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); });
-    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) {
-        setAccessFeedback('error', 'Please fill in all fields.');
-        return;
-      }
-      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
     ------------------------------------------------------------- */
@@ -537,16 +645,6 @@
     const labNavBtn = document.getElementById('lab-nav-btn');
     const labNavClose = document.getElementById('lab-nav-close');
-    function openLabNav() { toggleModal(labNav, true); setTimeout(() => labNav.focus(), 0); }
-    function closeLabNav() { toggleModal(labNav, false); }
-    labNavBtn.addEventListener('click', openLabNav);
-    labNavClose.addEventListener('click', closeLabNav);
-    labNav.addEventListener('click', (e) => {
-      const shouldClose = e.target && e.target.getAttribute('data-lab-close') === 'true';
-      if (shouldClose) closeLabNav();
-    });
     const DOSSIERS = {
       start: {
         title: "Start Here",
@@ -564,8 +662,8 @@
         status: "DRAFT",
         body: "This console is a staging environment. It will connect to a server endpoint and produce auditable outputs (transcripts, notes, reports).",
         evidence: ["Client: UI only", "Server: keys + policy + logging", "Exportable transcript"],
-        primary: { label: "Close Navigator", action: () => { closeLabNav(); } },
-        secondary: { label: "Export", action: () => { closeLabNav(); document.getElementById('export-btn').click(); } },
         updated: "—"
       },
       programs: {
@@ -582,7 +680,7 @@
         title: "AI Scientist",
         subtitle: "Hypothesis → experiment → report",
         status: "DRAFT",
-        body: "The AI Scientist is positioned as the lab’s instrument: it standardizes experiments, enforces reproducibility, and produces reports with uncertainty.",
         evidence: ["Experiment harnesses", "Evaluation baselines", "Report generation"],
         primary: { label: "View Research", action: () => { window.location.href = "research.html"; } },
         secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
@@ -594,7 +692,7 @@
         status: "ACTIVE",
         body: "Access is curated. The objective is qualified users, high-signal feedback, and responsible scaling.",
         evidence: ["Application-based", "Segmented by intent", "Controlled demos"],
-        primary: { label: "Request Access", action: () => { closeLabNav(); accessBtn.click(); } },
         secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
         updated: "—"
       }
@@ -609,10 +707,20 @@
     const dossierSecondary = document.getElementById('dossier-secondary');
     const dossierMeta = document.getElementById('dossier-meta');
     function renderDossier(key) {
       const d = DOSSIERS[key];
       if (!d) return;
       dossierTitle.textContent = d.title;
       dossierSubtitle.textContent = d.subtitle;
       dossierStatus.textContent = d.status;
@@ -634,16 +742,39 @@
       dossierMeta.innerHTML = `Last updated: <span class="text-gray-300">${d.updated}</span>`;
     }
     document.querySelectorAll('.lab-node').forEach(btn => {
       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
       });
     });
@@ -651,8 +782,6 @@
     /* -------------------------------------------------------------
        CHAT: secure-by-design client
     ------------------------------------------------------------- */
-    const API_ENDPOINT = "/api/chat"; // change if your deployment requires a prefix
     const chatForm = document.getElementById('chat-form');
     const chatInput = document.getElementById('chat-input');
     const chatMessages = document.getElementById('chat-messages');
@@ -671,15 +800,6 @@
     }
     seedTranscript();
-    function escapeHtml(str) {
-      return str
-        .replaceAll('&', '&amp;')
-        .replaceAll('<', '&lt;')
-        .replaceAll('>', '&gt;')
-        .replaceAll('"', '&quot;')
-        .replaceAll("'", '&#039;');
-    }
     function addMessage(text, isUser = false) {
       const safe = escapeHtml(text);
       const messageDiv = document.createElement('div');
@@ -722,25 +842,9 @@
     }
     async function callServerChat(userMessage) {
-      const res = await fetch(API_ENDPOINT, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          message: userMessage,
-          meta: { page: 'chat.html', product: 'silentpattern' }
-        })
-      });
-      if (!res.ok) {
-        const txt = await res.text().catch(() => '');
-        throw new Error(`Server error (${res.status}). ${txt}`.trim());
-      }
-      const data = await res.json();
-      if (!data || typeof data.reply !== 'string') {
-        throw new Error('Invalid response format from /api/chat');
-      }
-      return data.reply;
     }
     function localDemoResponse(userMessage) {
@@ -804,18 +908,33 @@
       URL.revokeObjectURL(url);
     });
     /* -------------------------------------------------------------
        GLOBAL ESC
     ------------------------------------------------------------- */
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') {
-        if (labNav && !labNav.classList.contains('modal-hidden')) closeLabNav();
-        if (accessModal && !accessModal.classList.contains('modal-hidden')) toggleModal(accessModal, false);
       }
     });
-    // Preselect a dossier for the right pane
     renderDossier('console');
   </script>
 </body>
-</html>

+<!-- SILENTPATTERN FINAL BUILD: 2025-12-15 | pages: 10 | features: hash-deep-linking, lab-navigator, access-modal, form-validation, chat-console, export-transcript -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     }
     .focus-ring:focus { outline: none; box-shadow: 0 0 0 2px rgba(99,102,241,0.65); }
+    /* Active states */
+    .lab-node.active {
+      border-color: rgba(99,102,241,0.55) !important;
+      box-shadow: 0 0 0 1px rgba(99,102,241,0.22), 0 0 28px rgba(99,102,241,0.08);
+      transform: translateY(-1px);
+    }
   </style>
 </head>
     <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 focus-ring"
         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 focus-ring"
         aria-controls="access-modal" aria-haspopup="dialog">
         Access
       </button>
           <span class="gradient-text">Conversation</span> Interface
         </h1>
         <p class="mt-3 text-gray-300 max-w-2xl mx-auto">
+          A controlled channel into SILENTPATTERN's systems. Minimal surface; auditable outputs.
         </p>
       </div>
         <div class="px-6 py-4 border-t border-gray-800 bg-black/10">
           <form id="chat-form" class="flex items-center" autocomplete="off" aria-label="Send message">
             <input id="chat-input" type="text"
+              placeholder="Describe a task (e.g., 'Draft a research note for MCAP')..."
               class="flex-1 bg-gray-800/50 border border-gray-700 rounded-l-xl px-4 py-3 focus-ring"
               aria-label="Type your message" />
             <button id="send-btn" type="submit"
+              class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-r-xl transition disabled:opacity-60 disabled:cursor-not-allowed focus-ring"
               aria-label="Send">
               <i class="fas fa-paper-plane"></i>
             </button>
           <div class="mt-2 flex justify-between items-center text-sm text-gray-500">
             <div class="flex items-center gap-3">
+              <button type="button" id="clear-btn" class="hover:text-indigo-400 transition focus-ring" aria-label="Clear session">
                 <i class="fas fa-broom mr-1"></i> Clear
               </button>
+              <button type="button" id="export-btn" class="hover:text-indigo-400 transition focus-ring" aria-label="Export transcript">
                 <i class="fas fa-file-arrow-down mr-1"></i> Export
               </button>
             </div>
             <h3 class="text-xl font-bold" id="access-modal-title">Request Access</h3>
             <p class="text-gray-400 mt-1">Limited availability for qualified researchers</p>
           </div>
+          <button id="close-access-modal" class="text-gray-400 hover:text-white focus-ring" aria-label="Close">
             <i class="fas fa-times"></i>
           </button>
         </div>
           <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" autocomplete="name">
+            <p id="name-error" class="hidden mt-1 text-xs text-red-300">Please enter your full name.</p>
           </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" autocomplete="email">
+            <p id="email-error" class="hidden mt-1 text-xs text-red-300">Please enter a valid email address.</p>
           </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" autocomplete="organization">
+            <p id="institution-error" class="hidden mt-1 text-xs text-red-300">Please enter your institution/organization.</p>
           </div>
           <div>
             <label for="purpose" class="block text-sm font-medium mb-1">Purpose of Access</label>
               <option value="partnership">Partnership</option>
               <option value="other">Other</option>
             </select>
+            <p id="purpose-error" class="hidden mt-1 text-xs text-red-300">Please select a purpose.</p>
           </div>
           <div class="pt-2">
             <button type="submit"
+              class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:opacity-90 transition focus-ring">
               Submit Request
             </button>
           </div>
             </div>
             <button id="lab-nav-close"
+              class="w-9 h-9 rounded-full border border-gray-800 bg-gray-900/30 hover:bg-gray-900/50 transition flex items-center justify-center focus-ring"
               aria-label="Close Lab Navigator">
               <i class="fas fa-times text-gray-300 text-sm"></i>
             </button>
                               radial-gradient(circle at 70% 70%, rgba(236,72,153,0.10), transparent 50%);"></div>
             <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring"
+                data-dossier="start" aria-current="false">
                 <div class="text-sm text-gray-200 font-medium">Start Here</div>
                 <div class="text-xs text-gray-500 mt-1">Return to the main interface</div>
               </button>
+              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring"
+                data-dossier="console" aria-current="false">
                 <div class="text-sm text-gray-200 font-medium">Console</div>
                 <div class="text-xs text-gray-500 mt-1">This page: controlled chat</div>
               </button>
+              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring"
+                data-dossier="programs" aria-current="false">
                 <div class="text-sm text-gray-200 font-medium">Programs</div>
                 <div class="text-xs text-gray-500 mt-1">MCAP · CHAI · Quantum Lambda</div>
               </button>
+              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring"
+                data-dossier="ai_scientist" aria-current="false">
                 <div class="text-sm text-gray-200 font-medium">AI Scientist</div>
                 <div class="text-xs text-gray-500 mt-1">Hypothesis → experiment → report</div>
               </button>
+              <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 focus-ring sm:col-span-2"
+                data-dossier="access" aria-current="false">
                 <div class="text-sm text-gray-200 font-medium">Access</div>
                 <div class="text-xs text-gray-500 mt-1">Request access to demos and research</div>
               </button>
             </div>
           </div>
+          <div class="p-6 space-y-5 max-h-[560px] overflow-auto thin-scroll">
             <div id="dossier-body" class="text-sm text-gray-300 leading-relaxed">
               This console is designed for controlled interaction. Dossiers expose depth by intent.
             </div>
             <div class="flex flex-col sm:flex-row gap-3">
               <button id="dossier-primary"
+                class="flex-1 px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition focus-ring">
                 Open
               </button>
               <button id="dossier-secondary"
+                class="flex-1 px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition focus-ring">
                 View Note
               </button>
             </div>
   </div>
   <script>
+    // Site-wide configuration
+    const CONFIG = {
+      MODAL_HASHES: new Set(['lab', 'access'])
+    };
     /* -------------------------------------------------------------
+       UTILITY FUNCTIONS (consistent with other pages)
     ------------------------------------------------------------- */
+    function escapeHtml(str) {
+      return String(str)
+        .replaceAll('&', '&amp;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#039;');
+    }
+    function isValidEmail(email) {
+      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+    }
+    function currentHashKey() {
+      const h = (window.location.hash || '').replace('#', '').trim();
+      return h;
+    }
+    function setHash(key, replace = false) {
+      if (!key) return;
+      if (window.location.hash.replace('#', '') === key) return;
+      if (replace) {
+        history.replaceState(null, '', '#' + key);
+      } else {
+        history.pushState(null, '', '#' + key);
+      }
+    }
+    function clearHashIf(key) {
+      const h = currentHashKey();
+      if (!h) return;
+      if (!key || h === key) {
+        history.replaceState(null, '', window.location.pathname + window.location.search);
       }
     }
     /* -------------------------------------------------------------
        MODAL ACCESSIBILITY (focus trap + restore opener focus)
     const toggleModal = (modal, show) => {
       if (show) {
         modal.classList.remove('modal-hidden');
         modal.classList.add('modal-visible');
         document.body.style.overflow = 'hidden';
         modal.classList.add('modal-hidden');
         document.body.style.overflow = '';
         untrapFocus(modal);
       }
     };
+    /* -------------------------------------------------------------
+       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();
+    });
     /* -------------------------------------------------------------
        ACCESS MODAL (inline feedback)
     ------------------------------------------------------------- */
     const accessForm = document.getElementById('access-form');
     const accessFeedback = document.getElementById('access-feedback');
+    const nameEl = document.getElementById('name');
+    const emailEl = document.getElementById('email');
+    const institutionEl = document.getElementById('institution');
+    const purposeEl = document.getElementById('purpose');
+    const nameErr = document.getElementById('name-error');
+    const emailErr = document.getElementById('email-error');
+    const institutionErr = document.getElementById('institution-error');
+    const purposeErr = document.getElementById('purpose-error');
     function setAccessFeedback(kind, text) {
+      if (!accessFeedback) return;
       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.textContent = text;
     }
+    function hideAccessFeedback() {
+      if (!accessFeedback) return;
       accessFeedback.textContent = '';
       accessFeedback.classList.add('hidden');
       accessFeedback.classList.remove(
       );
     }
+    function setFieldError(inputEl, errorEl, isError) {
+      if (!inputEl || !errorEl) return;
+      if (isError) {
+        errorEl.classList.remove('hidden');
+        inputEl.setAttribute('aria-invalid', 'true');
+        inputEl.classList.add('border-red-500/60');
+      } else {
+        errorEl.classList.add('hidden');
+        inputEl.removeAttribute('aria-invalid');
+        inputEl.classList.remove('border-red-500/60');
+      }
+    }
+    function resetAccessErrors() {
+      hideAccessFeedback();
+      setFieldError(nameEl, nameErr, false);
+      setFieldError(emailEl, emailErr, false);
+      setFieldError(institutionEl, institutionErr, false);
+      setFieldError(purposeEl, purposeErr, false);
     }
+    function openAccessModal(setHashFlag = true) {
+      resetAccessErrors();
       toggleModal(accessModal, true);
+      if (setHashFlag) setHash('access');
+      setTimeout(() => nameEl && nameEl.focus(), 80);
+    }
+    function closeAccessModal(clearHashFlag = true) {
+      toggleModal(accessModal, false);
+      if (clearHashFlag) clearHashIf('access');
+    }
+    accessBtn.addEventListener('click', () => openAccessModal(true));
+    closeAccessModal.addEventListener('click', () => closeAccessModal(true));
+    accessModal.addEventListener('click', (e) => {
+      if (e.target === accessModal) closeAccessModal(true);
     });
+    if (accessForm) {
+      // Clear per-field errors on input
+      [nameEl, emailEl, institutionEl, purposeEl].forEach(el => {
+        if (!el) return;
+        el.addEventListener('input', () => {
+          if (el === nameEl) setFieldError(nameEl, nameErr, !nameEl.value.trim());
+          if (el === emailEl) setFieldError(emailEl, emailErr, !isValidEmail(emailEl.value.trim()));
+          if (el === institutionEl) setFieldError(institutionEl, institutionErr, !institutionEl.value.trim());
+          if (el === purposeEl) setFieldError(purposeEl, purposeErr, !purposeEl.value);
+        });
+        el.addEventListener('change', () => el.dispatchEvent(new Event('input')));
+      });
+      accessForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        resetAccessErrors();
+        const name = (nameEl?.value || '').trim();
+        const email = (emailEl?.value || '').trim();
+        const institution = (institutionEl?.value || '').trim();
+        const purpose = (purposeEl?.value || '').trim();
+        let ok = true;
+        if (!name) { setFieldError(nameEl, nameErr, true); ok = false; }
+        if (!email || !isValidEmail(email)) { setFieldError(emailEl, emailErr, true); ok = false; }
+        if (!institution) { setFieldError(institutionEl, institutionErr, true); ok = false; }
+        if (!purpose) { setFieldError(purposeEl, purposeErr, true); ok = false; }
+        if (!ok) {
+          setAccessFeedback('error', 'Please correct the highlighted fields and resubmit.');
+          return;
+        }
+        setAccessFeedback('success', 'Request received. You will be contacted after review.');
+        accessForm.reset();
+      });
+    }
     /* -------------------------------------------------------------
        LAB NAVIGATOR
     ------------------------------------------------------------- */
     const labNavBtn = document.getElementById('lab-nav-btn');
     const labNavClose = document.getElementById('lab-nav-close');
     const DOSSIERS = {
       start: {
         title: "Start Here",
         status: "DRAFT",
         body: "This console is a staging environment. It will connect to a server endpoint and produce auditable outputs (transcripts, notes, reports).",
         evidence: ["Client: UI only", "Server: keys + policy + logging", "Exportable transcript"],
+        primary: { label: "Close Navigator", action: () => closeLabNav(true) },
+        secondary: { label: "Export", action: () => { closeLabNav(true); document.getElementById('export-btn').click(); } },
         updated: "—"
       },
       programs: {
         title: "AI Scientist",
         subtitle: "Hypothesis → experiment → report",
         status: "DRAFT",
+        body: "The AI Scientist is positioned as the lab's instrument: it standardizes experiments, enforces reproducibility, and produces reports with uncertainty.",
         evidence: ["Experiment harnesses", "Evaluation baselines", "Report generation"],
         primary: { label: "View Research", action: () => { window.location.href = "research.html"; } },
         secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
         status: "ACTIVE",
         body: "Access is curated. The objective is qualified users, high-signal feedback, and responsible scaling.",
         evidence: ["Application-based", "Segmented by intent", "Controlled demos"],
+        primary: { label: "Request Access", action: () => { closeLabNav(true); openAccessModal(true); } },
         secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
         updated: "—"
       }
     const dossierSecondary = document.getElementById('dossier-secondary');
     const dossierMeta = document.getElementById('dossier-meta');
+    function setActiveLabNode(key) {
+      document.querySelectorAll('.lab-node').forEach(btn => {
+        const isActive = btn.getAttribute('data-dossier') === key;
+        btn.classList.toggle('active', isActive);
+        btn.setAttribute('aria-current', isActive ? 'true' : 'false');
+      });
+    }
     function renderDossier(key) {
       const d = DOSSIERS[key];
       if (!d) return;
+      setActiveLabNode(key);
       dossierTitle.textContent = d.title;
       dossierSubtitle.textContent = d.subtitle;
       dossierStatus.textContent = d.status;
       dossierMeta.innerHTML = `Last updated: <span class="text-gray-300">${d.updated}</span>`;
     }
+    function openLabNav(setHashFlag = true) {
+      toggleModal(labNav, true);
+      if (setHashFlag) setHash('lab');
+      setTimeout(() => labNav.focus(), 0);
+      // Ensure a stable default selection when opened
+      const alreadyActive = document.querySelector('.lab-node.active');
+      if (!alreadyActive) renderDossier('console');
+    }
+    function closeLabNav(clearHashFlag = true) {
+      toggleModal(labNav, false);
+      if (clearHashFlag) clearHashIf('lab');
+    }
+    labNavBtn.addEventListener('click', () => openLabNav(true));
+    labNavClose.addEventListener('click', () => closeLabNav(true));
+    labNav.addEventListener('click', (e) => {
+      const shouldClose = e.target && e.target.getAttribute('data-lab-close') === 'true';
+      if (shouldClose) closeLabNav(true);
+    });
     document.querySelectorAll('.lab-node').forEach(btn => {
       btn.addEventListener('click', () => {
         const key = btn.getAttribute('data-dossier');
         renderDossier(key);
+        // Apply the implied navigation behavior
         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(true); openAccessModal(true); }
         // console -> stays here
       });
     });
     /* -------------------------------------------------------------
        CHAT: secure-by-design client
     ------------------------------------------------------------- */
     const chatForm = document.getElementById('chat-form');
     const chatInput = document.getElementById('chat-input');
     const chatMessages = document.getElementById('chat-messages');
     }
     seedTranscript();
     function addMessage(text, isUser = false) {
       const safe = escapeHtml(text);
       const messageDiv = document.createElement('div');
     }
     async function callServerChat(userMessage) {
+      // This would be a server endpoint in production
+      // For static demo, always fall back to local response
+      throw new Error('Server endpoint not available in static demo');
     }
     function localDemoResponse(userMessage) {
       URL.revokeObjectURL(url);
     });
+    /* -------------------------------------------------------------
+       HASH ROUTER: handle modal hashes
+    ------------------------------------------------------------- */
+    function applyHashState() {
+      const key = currentHashKey();
+      if (CONFIG.MODAL_HASHES.has(key)) {
+        if (key === 'lab') openLabNav(false);
+        if (key === 'access') openAccessModal(false);
+      }
+    }
+    window.addEventListener('hashchange', applyHashState);
+    applyHashState(); // Initial load
     /* -------------------------------------------------------------
        GLOBAL ESC
     ------------------------------------------------------------- */
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') {
+        if (labNav && !labNav.classList.contains('modal-hidden')) closeLabNav(true);
+        if (accessModal && !accessModal.classList.contains('modal-hidden')) closeAccessModal(true);
       }
     });
+    // Initial dossier render
     renderDossier('console');
   </script>
 </body>
+</html>