Spaces:

Testing347
/

Copy-ava-testing

Running

App Files Files Community

Testing347 commited on 11 days ago

Commit

cdca016

verified ·

1 Parent(s): 5c3088c

Update capabilities.html

Browse files

Files changed (1) hide show

capabilities.html +408 -107

capabilities.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -70,7 +71,7 @@
     .dot-proto { background: rgba(139,92,246,0.9); }
     .dot-validated { background: rgba(16,185,129,0.9); }
-    /* Subtle “bay” grid */
     .bay-grid {
       background-image:
         linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px),
@@ -80,7 +81,7 @@
     }
     /* Active card state (minimal, consistent with design) */
-    .program-card.is-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);
@@ -103,13 +104,13 @@
     <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>
@@ -164,7 +165,7 @@
               <!-- MCAP -->
               <button type="button"
-                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element"
                 data-dossier="mcap" aria-label="Open dossier: MCAP" aria-pressed="false">
                 <div class="flex items-start justify-between gap-4">
                   <div>
@@ -184,7 +185,7 @@
               <!-- CHAI -->
               <button type="button"
-                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element"
                 data-dossier="chai" aria-label="Open dossier: CHAI" aria-pressed="false">
                 <div class="flex items-start justify-between gap-4">
                   <div>
@@ -204,7 +205,7 @@
               <!-- Quantum Lambda -->
               <button type="button"
-                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element"
                 data-dossier="quantum_lambda" aria-label="Open dossier: Quantum Lambda" aria-pressed="false">
                 <div class="flex items-start justify-between gap-4">
                   <div>
@@ -224,7 +225,7 @@
               <!-- AI Scientist -->
               <button type="button"
-                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element"
                 data-dossier="ai_scientist" aria-label="Open dossier: AI Scientist" aria-pressed="false">
                 <div class="flex items-start justify-between gap-4">
                   <div>
@@ -244,7 +245,7 @@
               <!-- Agentic Workforce -->
               <button type="button"
-                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element md:col-span-2"
                 data-dossier="agentic_workforce" aria-label="Open dossier: Agentic Workforce" aria-pressed="false">
                 <div class="flex items-start justify-between gap-4">
                   <div>
@@ -254,7 +255,7 @@
                   <span class="badge"><span class="dot dot-concept"></span>Concept</span>
                 </div>
                 <p class="text-sm text-gray-300 mt-4 leading-relaxed">
-                  “AI employees” as controlled agents: scoped permissions, logging, approval gates, and outcome verification.
                 </p>
                 <div class="mt-4 text-xs text-gray-500 flex items-center gap-2">
                   <i class="fas fa-key"></i>
@@ -312,11 +313,11 @@
             <div class="flex flex-col gap-3">
               <button id="dossier-primary"
-                class="px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition">
                 Request Access
               </button>
               <button id="dossier-secondary"
-                class="px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition">
                 Open Console
               </button>
             </div>
@@ -399,7 +400,7 @@
             <h3 class="text-xl font-bold" id="access-modal-title">Request Access</h3>
             <p class="text-gray-400 mt-1">Curated access for research and evaluation</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>
@@ -412,14 +413,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</label>
@@ -430,9 +434,10 @@
               <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>
@@ -463,7 +468,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>
@@ -475,34 +480,34 @@
                               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-nav="index.html">
                 <div class="text-sm text-gray-200 font-medium">Start Here</div>
                 <div class="text-xs text-gray-500 mt-1">Entry 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-nav="capabilities.html">
                 <div class="text-sm text-gray-200 font-medium">Programs</div>
                 <div class="text-xs text-gray-500 mt-1">This page</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-nav="chat.html">
                 <div class="text-sm text-gray-200 font-medium">Console</div>
                 <div class="text-xs text-gray-500 mt-1">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-nav="research.html">
                 <div class="text-sm text-gray-200 font-medium">Research</div>
                 <div class="text-xs text-gray-500 mt-1">Notes and briefs</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-nav="contact.html">
-                <div class="text-sm text-gray-200 font-medium">Contact</div>
-                <div class="text-xs text-gray-500 mt-1">Direct channel</div>
               </button>
             </div>
@@ -514,12 +519,45 @@
         <div class="relative rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden">
           <div class="px-6 py-5 border-b border-gray-800/60">
-            <div class="text-lg font-semibold text-gray-100">Navigation</div>
-            <div class="text-xs text-gray-500 mt-1">No top menu; only the lab interface.</div>
           </div>
-          <div class="p-6 text-sm text-gray-300 leading-relaxed">
-            SILENTPATTERN uses a reduced navigation surface to maintain a “lab console” feel.
-            Pages are modules. Each module is accessed through this navigator.
           </div>
         </div>
@@ -528,37 +566,53 @@
   </div>
   <script>
     /* -------------------------------------------------------------
-       VANTA BACKGROUND (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 HELPERS (focus trap + restore opener focus)
     ------------------------------------------------------------- */
     function trapFocus(modal) {
       const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -588,7 +642,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';
@@ -598,13 +651,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
     ------------------------------------------------------------- */
@@ -614,7 +692,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');
@@ -631,7 +720,8 @@
       accessFeedback.textContent = text;
     }
-    function clearAccessFeedback() {
       accessFeedback.textContent = '';
       accessFeedback.classList.add('hidden');
       accessFeedback.classList.remove(
@@ -641,40 +731,87 @@
       );
     }
-    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); });
-    function isValidEmail(email) {
-      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
     }
-    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
@@ -683,26 +820,170 @@
     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();
     });
     document.querySelectorAll('.lab-node').forEach(btn => {
       btn.addEventListener('click', () => {
-        const href = btn.getAttribute('data-nav');
-        if (href) window.location.href = href;
       });
     });
     /* -------------------------------------------------------------
-       DOSSIERS
        + Hash deep-linking (#mcap, #chai, etc.)
        + Active-card state (aria-pressed)
        + popstate handling for back/forward reliability
@@ -723,7 +1004,7 @@
           "Public-facing language should emphasize: a research principle, an evaluation harness, and transparent baselines. Avoid performance claims until replicated.",
         eval:
           "Evaluation focus: (1) identifiability assumptions, (2) interventional accuracy, (3) stability under distribution shift, (4) ablation against simpler baselines. Prefer preregistered protocols where possible.",
-        primary: { label: "Request Access", action: () => accessBtn.click() },
         secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
         updated: "—"
       },
@@ -739,10 +1020,10 @@
           "Planned: calibration and uncertainty reporting"
         ],
         public:
-          "Public copy should emphasize methodology and evaluation (walk-forward, leakage prevention, calibration). Avoid any statement implying guaranteed returns or “high accuracy.”",
         eval:
           "Evaluation focus: strict temporal splits, realistic transaction cost modeling, sensitivity to slippage assumptions, and robustness across assets/regimes. Report uncertainty and failure modes.",
-        primary: { label: "Request Access", action: () => accessBtn.click() },
         secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
         updated: "—"
       },
@@ -761,7 +1042,7 @@
           "Public copy should focus on systems engineering (constraints, risk, audit trails). Do not imply edge without verification. Emphasize that this is research, not a trading service.",
         eval:
           "Evaluation focus: execution realism, latency budgets, out-of-sample stability, and adversarial conditions. If assumptions are not auditable, results are not meaningful.",
-        primary: { label: "Request Access", action: () => accessBtn.click() },
         secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
         updated: "—"
       },
@@ -770,7 +1051,7 @@
         subtitle: "Hypothesis → Experiment → Report",
         status: "PROTOTYPE",
         body:
-          "The AI Scientist is the lab’s internal instrument: it standardizes experiments, manages baselines, logs assumptions, and produces concise research notes with uncertainty and reproducibility hooks.",
         evidence: [
           "Experiment templates (dataset → protocol → metrics)",
           "Baseline registry + ablation tracking",
@@ -799,7 +1080,7 @@
           "Public positioning: a governed agent platform for research ops and internal productivity. Avoid anthropomorphic claims; emphasize controls, accountability, and measurable outcomes.",
         eval:
           "Evaluation focus: error rates, containment failures avoided, auditability, and ROI in constrained workflows (data prep, experiments, reporting). Fail-closed behaviors are required.",
-        primary: { label: "Request Access", action: () => accessBtn.click() },
         secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
         updated: "—"
       }
@@ -821,7 +1102,7 @@
     function setActiveCard(key) {
       programCards.forEach(btn => {
         const isMatch = btn.getAttribute('data-dossier') === key;
-        btn.classList.toggle('is-active', isMatch);
         btn.setAttribute('aria-pressed', String(isMatch));
       });
     }
@@ -903,15 +1184,35 @@
       renderDossier(keyFromHash, { setHash: false, replaceHash: false, setActive: true });
     });
     /* -------------------------------------------------------------
        GLOBAL ESC BEHAVIOR
     ------------------------------------------------------------- */
     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);
       }
     });
   </script>
 </body>
-</html>

+<!-- SILENTPATTERN FINAL BUILD: 2025-12-15 | pages: 10 | features: hash-deep-linking, lab-navigator, access-modal, form-validation, program-dossiers, active-card-states -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     .dot-proto { background: rgba(139,92,246,0.9); }
     .dot-validated { background: rgba(16,185,129,0.9); }
+    /* Subtle "bay" grid */
     .bay-grid {
       background-image:
         linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px),
     }
     /* Active card state (minimal, consistent with design) */
+    .program-card.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);
     <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>
               <!-- MCAP -->
               <button type="button"
+                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element focus-ring"
                 data-dossier="mcap" aria-label="Open dossier: MCAP" aria-pressed="false">
                 <div class="flex items-start justify-between gap-4">
                   <div>
               <!-- CHAI -->
               <button type="button"
+                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element focus-ring"
                 data-dossier="chai" aria-label="Open dossier: CHAI" aria-pressed="false">
                 <div class="flex items-start justify-between gap-4">
                   <div>
               <!-- Quantum Lambda -->
               <button type="button"
+                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element focus-ring"
                 data-dossier="quantum_lambda" aria-label="Open dossier: Quantum Lambda" aria-pressed="false">
                 <div class="flex items-start justify-between gap-4">
                   <div>
               <!-- AI Scientist -->
               <button type="button"
+                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element focus-ring"
                 data-dossier="ai_scientist" aria-label="Open dossier: AI Scientist" aria-pressed="false">
                 <div class="flex items-start justify-between gap-4">
                   <div>
               <!-- Agentic Workforce -->
               <button type="button"
+                class="program-card text-left rounded-2xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/55 hover:bg-gray-900/45 transition p-5 conscious-element focus-ring md:col-span-2"
                 data-dossier="agentic_workforce" aria-label="Open dossier: Agentic Workforce" aria-pressed="false">
                 <div class="flex items-start justify-between gap-4">
                   <div>
                   <span class="badge"><span class="dot dot-concept"></span>Concept</span>
                 </div>
                 <p class="text-sm text-gray-300 mt-4 leading-relaxed">
+                  "AI employees" as controlled agents: scoped permissions, logging, approval gates, and outcome verification.
                 </p>
                 <div class="mt-4 text-xs text-gray-500 flex items-center gap-2">
                   <i class="fas fa-key"></i>
             <div class="flex flex-col gap-3">
               <button id="dossier-primary"
+                class="px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition focus-ring">
                 Request Access
               </button>
               <button id="dossier-secondary"
+                class="px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition focus-ring">
                 Open Console
               </button>
             </div>
             <h3 class="text-xl font-bold" id="access-modal-title">Request Access</h3>
             <p class="text-gray-400 mt-1">Curated access for research and evaluation</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</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">Entry 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="programs" aria-current="false">
                 <div class="text-sm text-gray-200 font-medium">Programs</div>
                 <div class="text-xs text-gray-500 mt-1">This page</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">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="research" aria-current="false">
                 <div class="text-sm text-gray-200 font-medium">Research</div>
                 <div class="text-xs text-gray-500 mt-1">Notes and briefs</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">Curated entry</div>
               </button>
             </div>
         <div class="relative rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden">
           <div class="px-6 py-5 border-b border-gray-800/60">
+            <div class="flex items-start justify-between gap-4">
+              <div>
+                <div id="lab-dossier-title" class="text-lg font-semibold text-gray-100">Lab Dossier</div>
+                <div id="lab-dossier-subtitle" class="text-xs text-gray-500 mt-1">Select a node to load details.</div>
+              </div>
+              <div id="lab-dossier-status"
+                class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">
+                READY
+              </div>
+            </div>
           </div>
+          <div class="p-6 space-y-5 max-h-[560px] overflow-auto thin-scroll">
+            <div id="lab-dossier-body" class="text-sm text-gray-300 leading-relaxed">
+              This interface reveals SILENTPATTERN as a set of research programs and operational systems.
+              The public layer is minimal by design; depth is opened intentionally.
+            </div>
+            <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
+              <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Evidence Capsule</div>
+              <ul id="lab-dossier-evidence" class="text-sm text-gray-300 space-y-1">
+                <li class="text-gray-500">No dossier selected.</li>
+              </ul>
+            </div>
+            <div class="flex flex-col sm:flex-row gap-3">
+              <button id="lab-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="lab-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 id="lab-dossier-meta" class="text-xs text-gray-500">
+              Last updated: <span class="text-gray-300">—</span>
+            </div>
           </div>
         </div>
   </div>
   <script>
+    // Site-wide configuration
+    const CONFIG = {
+      MODAL_HASHES: new Set(['lab', 'access']),
+      DOSSIER_HASHES: new Set(['mcap', 'chai', 'quantum_lambda', 'ai_scientist', 'agentic_workforce'])
+    };
     /* -------------------------------------------------------------
+       UTILITY FUNCTIONS (consistent with index.html)
     ------------------------------------------------------------- */
+    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 HELPERS (consistent with index.html)
     ------------------------------------------------------------- */
     function trapFocus(modal) {
       const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
     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 BACKGROUND (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));
+    if (closeAccessModal) closeAccessModal.addEventListener('click', () => closeAccessModal(true));
+    if (accessModal) {
+      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 LAB_DOSSIERS = {
+      start: {
+        title: "Start Here",
+        subtitle: "Entry interface",
+        status: "ACTIVE",
+        body: "Return to the main interface.",
+        evidence: ["Public entry layer", "Programs as dossiers", "Console for controlled interaction"],
+        primary: { label: "Go to Index", action: () => { window.location.href = "index.html"; } },
+        secondary: { label: "Programs", action: () => { window.location.href = "capabilities.html"; } },
+        updated: "—"
+      },
+      programs: {
+        title: "Programs",
+        subtitle: "This page",
+        status: "ACTIVE",
+        body: "Program Bay: MCAP, CHAI, Quantum Lambda, AI Scientist, Agentic Workforce.",
+        evidence: ["Dossiers with maturity levels", "Evidence capsules", "Access gates"],
+        primary: { label: "Close Navigator", action: () => closeLabNav(true) },
+        secondary: { label: "View Note", action: () => {
+          // Demo note viewer
+          const modal = document.createElement('div');
+          modal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-visible';
+          modal.innerHTML = `
+            <div class="bg-gray-900/90 border border-gray-800 rounded-xl max-w-2xl w-full mx-4 relative overflow-hidden">
+              <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-indigo-600 to-purple-600"></div>
+              <div class="p-6">
+                <div class="flex justify-between items-start mb-6">
+                  <h3 class="text-xl font-bold">Program Technical Note</h3>
+                  <button class="text-gray-400 hover:text-white close-note-viewer focus-ring">
+                    <i class="fas fa-times"></i>
+                  </button>
+                </div>
+                <p class="text-gray-300 mb-4">Technical notes contain evaluation protocols, assumptions, and evidence capsules. Available to qualified researchers.</p>
+                <button class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:opacity-90 transition close-note-viewer focus-ring">
+                  Close
+                </button>
+              </div>
+            </div>
+          `;
+          document.body.appendChild(modal);
+          const closeBtn = modal.querySelector('.close-note-viewer');
+          closeBtn.addEventListener('click', () => {
+            toggleModal(modal, false);
+            setTimeout(() => modal.remove(), 300);
+          });
+          modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+              toggleModal(modal, false);
+              setTimeout(() => modal.remove(), 300);
+            }
+          });
+          toggleModal(modal, true);
+        } },
+        updated: "—"
+      },
+      console: {
+        title: "Console",
+        subtitle: "Controlled chat",
+        status: "DRAFT",
+        body: "Controlled chat with exportable transcripts. Model access must remain server-side.",
+        evidence: ["No client-side secrets", "Audit-ready transcripts", "Fail-closed behaviors"],
+        primary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
+        secondary: { label: "Research", action: () => { window.location.href = "research.html"; } },
+        updated: "—"
+      },
+      research: {
+        title: "Research",
+        subtitle: "Notes and briefs",
+        status: "DRAFT",
+        body: "Technical notes, evaluation methodology, and changelogs.",
+        evidence: ["Evaluation philosophy", "Benchmarks + baselines", "Limitations and failure modes"],
+        primary: { label: "Open Research", action: () => { window.location.href = "research.html"; } },
+        secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
+        updated: "—"
+      },
+      access: {
+        title: "Access",
+        subtitle: "Curated entry",
+        status: "ACTIVE",
+        body: "Request access for controlled demos and evaluation workflows.",
+        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 labDossierTitle = document.getElementById('lab-dossier-title');
+    const labDossierSubtitle = document.getElementById('lab-dossier-subtitle');
+    const labDossierStatus = document.getElementById('lab-dossier-status');
+    const labDossierBody = document.getElementById('lab-dossier-body');
+    const labDossierEvidence = document.getElementById('lab-dossier-evidence');
+    const labDossierPrimary = document.getElementById('lab-dossier-primary');
+    const labDossierSecondary = document.getElementById('lab-dossier-secondary');
+    const labDossierMeta = document.getElementById('lab-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 renderLabDossier(key) {
+      const d = LAB_DOSSIERS[key];
+      if (!d) return;
+      setActiveLabNode(key);
+      labDossierTitle.textContent = d.title;
+      labDossierSubtitle.textContent = d.subtitle;
+      labDossierStatus.textContent = d.status;
+      labDossierBody.textContent = d.body;
+      labDossierEvidence.innerHTML = "";
+      d.evidence.forEach(item => {
+        const li = document.createElement('li');
+        li.textContent = item;
+        labDossierEvidence.appendChild(li);
+      });
+      labDossierPrimary.textContent = d.primary.label;
+      labDossierPrimary.onclick = d.primary.action;
+      labDossierSecondary.textContent = d.secondary.label;
+      labDossierSecondary.onclick = d.secondary.action;
+      labDossierMeta.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) renderLabDossier('programs');
+    }
+    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');
+        renderLabDossier(key);
       });
     });
     /* -------------------------------------------------------------
+       PROGRAM DOSSIERS
        + Hash deep-linking (#mcap, #chai, etc.)
        + Active-card state (aria-pressed)
        + popstate handling for back/forward reliability
           "Public-facing language should emphasize: a research principle, an evaluation harness, and transparent baselines. Avoid performance claims until replicated.",
         eval:
           "Evaluation focus: (1) identifiability assumptions, (2) interventional accuracy, (3) stability under distribution shift, (4) ablation against simpler baselines. Prefer preregistered protocols where possible.",
+        primary: { label: "Request Access", action: () => openAccessModal(true) },
         secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
         updated: "—"
       },
           "Planned: calibration and uncertainty reporting"
         ],
         public:
+          "Public copy should emphasize methodology and evaluation (walk-forward, leakage prevention, calibration). Avoid any statement implying guaranteed returns or 'high accuracy.'",
         eval:
           "Evaluation focus: strict temporal splits, realistic transaction cost modeling, sensitivity to slippage assumptions, and robustness across assets/regimes. Report uncertainty and failure modes.",
+        primary: { label: "Request Access", action: () => openAccessModal(true) },
         secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
         updated: "—"
       },
           "Public copy should focus on systems engineering (constraints, risk, audit trails). Do not imply edge without verification. Emphasize that this is research, not a trading service.",
         eval:
           "Evaluation focus: execution realism, latency budgets, out-of-sample stability, and adversarial conditions. If assumptions are not auditable, results are not meaningful.",
+        primary: { label: "Request Access", action: () => openAccessModal(true) },
         secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
         updated: "—"
       },
         subtitle: "Hypothesis → Experiment → Report",
         status: "PROTOTYPE",
         body:
+          "The AI Scientist is the lab's internal instrument: it standardizes experiments, manages baselines, logs assumptions, and produces concise research notes with uncertainty and reproducibility hooks.",
         evidence: [
           "Experiment templates (dataset → protocol → metrics)",
           "Baseline registry + ablation tracking",
           "Public positioning: a governed agent platform for research ops and internal productivity. Avoid anthropomorphic claims; emphasize controls, accountability, and measurable outcomes.",
         eval:
           "Evaluation focus: error rates, containment failures avoided, auditability, and ROI in constrained workflows (data prep, experiments, reporting). Fail-closed behaviors are required.",
+        primary: { label: "Request Access", action: () => openAccessModal(true) },
         secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
         updated: "—"
       }
     function setActiveCard(key) {
       programCards.forEach(btn => {
         const isMatch = btn.getAttribute('data-dossier') === key;
+        btn.classList.toggle('active', isMatch);
         btn.setAttribute('aria-pressed', String(isMatch));
       });
     }
       renderDossier(keyFromHash, { setHash: false, replaceHash: false, setActive: true });
     });
+    /* -------------------------------------------------------------
+       HASH ROUTER: handle modal hashes too
+    ------------------------------------------------------------- */
+    function applyHashState() {
+      const key = currentHashKey();
+      if (CONFIG.MODAL_HASHES.has(key)) {
+        if (key === 'lab') openLabNav(false);
+        if (key === 'access') openAccessModal(false);
+      } else if (CONFIG.DOSSIER_HASHES.has(key)) {
+        // Already handled by hashchange/popstate above
+      }
+    }
+    window.addEventListener('hashchange', applyHashState);
+    applyHashState(); // Initial load
     /* -------------------------------------------------------------
        GLOBAL ESC BEHAVIOR
     ------------------------------------------------------------- */
     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 lab dossier render
+    renderLabDossier('programs');
   </script>
 </body>
+</html>