Spaces:

Testing347
/

Copy-ava-testing

Running

App Files Files Community

Testing347 commited on Dec 15, 2025

Commit

25e2014

verified ·

1 Parent(s): cc952b5

Update chat.html

Browse files

Files changed (1) hide show

chat.html +243 -433

chat.html CHANGED Viewed

@@ -5,73 +5,25 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0" />
   <title>SILENTPATTERN — Console</title>
-  <!-- Tailwind -->
   <script src="https://cdn.tailwindcss.com"></script>
-  <!-- Three.js + Vanta -->
   <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>
-  <!-- Icons + Font -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
   <style>
-    body { font-family: 'Inter', sans-serif; }
-    .gradient-text {
-      background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
-      -webkit-background-clip: text;
-      background-clip: text;
-      color: transparent;
-    }
-    .conscious-element { transition: all 0.3s ease; }
-    .conscious-element:hover { transform: scale(1.02); }
     .chat-container {
       height: 520px;
       overflow-y: auto;
-      scrollbar-width: thin;
-      scrollbar-color: #4f46e5 #1e1b4b;
-    }
-    .chat-container::-webkit-scrollbar { width: 6px; }
-    .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;
     }
-    @keyframes typing {
-      0% { content: '.'; }
-      33% { content: '..'; }
-      66% { content: '...'; }
-    }
-    .modal { transition: opacity 0.3s ease, transform 0.3s ease; }
-    .modal-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
-    .modal-visible { opacity: 1; transform: translateY(0); }
-    .aura {
-      background:
-        radial-gradient(circle at 25% 15%, rgba(99,102,241,0.20), transparent 42%),
-        radial-gradient(circle at 70% 70%, rgba(236,72,153,0.12), transparent 46%),
-        radial-gradient(circle at 50% 45%, rgba(139,92,246,0.10), transparent 55%);
-    }
-    .focus-ring:focus { outline: none; box-shadow: 0 0 0 2px rgba(99,102,241,0.65); }
   </style>
 </head>
 <body class="bg-black text-white overflow-x-hidden">
-  <!-- Animated background -->
   <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
-  <!-- Top bar -->
   <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
     <a href="index.html" class="flex items-center space-x-2">
       <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
@@ -94,7 +46,6 @@
     </div>
   </nav>
-  <!-- Console -->
   <section class="relative z-10 px-6 py-16">
     <div class="max-w-5xl mx-auto">
       <div class="text-center mb-10">
@@ -124,7 +75,7 @@
                 <div class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></div>
               </div>
               <div>
-                <div class="text-sm font-medium">SILENTPATTERN Interface</div>
                 <div class="text-xs text-gray-500">Session: local</div>
               </div>
             </div>
@@ -135,14 +86,14 @@
           </div>
         </div>
-        <div id="chat-messages" class="chat-container p-6 space-y-4" aria-live="polite" aria-label="Chat messages">
-          <div class="flex items-start" data-seed="system">
             <div class="w-8 h-8 rounded-full bg-indigo-600 flex-shrink-0 flex items-center justify-center mr-3">
               <i class="fas fa-robot text-white text-sm"></i>
             </div>
             <div class="bg-gray-800/70 rounded-lg p-4 max-w-[85%]">
-              <p class="text-gray-100" id="seed-system-text">
-                Acknowledged. This console is a controlled interface. State your objective; I will respond with constraints, assumptions, and next steps.
               </p>
               <p class="text-gray-400 text-xs mt-2">Note: do not paste secrets or API keys into chat.</p>
             </div>
@@ -171,14 +122,19 @@
                 <i class="fas fa-file-arrow-down mr-1"></i> Export
               </button>
             </div>
-            <div>
-              <span id="typing-indicator" class="typing-indicator hidden">System is typing</span>
             </div>
           </div>
           <div class="mt-3 text-xs text-gray-600">
-            Integration note: do not call OpenAI directly from the browser. Use a server endpoint (example:
-            <span class="text-gray-400">/api/chat</span>) to keep keys private.
           </div>
         </div>
       </div>
@@ -197,7 +153,7 @@
     </div>
   </footer>
-  <!-- ACCESS MODAL -->
   <div id="access-modal"
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
     role="dialog" aria-modal="true" aria-labelledby="access-modal-title" tabindex="-1">
@@ -207,7 +163,7 @@
         <div class="flex justify-between items-start mb-6">
           <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" aria-label="Close">
             <i class="fas fa-times"></i>
@@ -228,12 +184,11 @@
             <input type="text" id="institution" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
           </div>
           <div>
-            <label for="purpose" class="block text-sm font-medium mb-1">Purpose of Access</label>
             <select id="purpose" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
               <option value="">Select a purpose</option>
-              <option value="research">Academic Research</option>
-              <option value="development">AI Development</option>
-              <option value="policy">Policy Research</option>
               <option value="partnership">Partnership</option>
               <option value="other">Other</option>
             </select>
@@ -249,13 +204,11 @@
     </div>
   </div>
-  <!-- LAB NAVIGATOR -->
   <div id="lab-navigator"
     class="fixed inset-0 z-[60] bg-black/80 backdrop-blur-md modal modal-hidden"
     role="dialog" aria-modal="true" aria-label="Lab Navigator" tabindex="-1">
     <div class="absolute inset-0" data-lab-close="true"></div>
     <div class="relative w-full h-full flex items-center justify-center p-6">
       <div class="w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
         <div class="relative rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden">
@@ -269,7 +222,6 @@
                 <div class="text-xs text-gray-500">Lab Navigator</div>
               </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"
               aria-label="Close Lab Navigator">
@@ -278,42 +230,43 @@
           </div>
           <div class="relative p-6 min-h-[420px]">
-            <div class="absolute inset-0 opacity-70 pointer-events-none"
-              style="background: radial-gradient(circle at 30% 20%, rgba(99,102,241,0.18), transparent 45%),
-                              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>
             </div>
             <div class="relative mt-6 text-xs text-gray-500">
               Tip: Press <span class="text-gray-300">Esc</span> to close.
             </div>
@@ -325,28 +278,21 @@
             <div class="flex items-start justify-between gap-4">
               <div>
                 <div id="dossier-title" class="text-lg font-semibold text-gray-100">Lab Dossier</div>
-                <div id="dossier-subtitle" class="text-xs text-gray-500 mt-1">Select a node to open a file.</div>
               </div>
               <div id="dossier-status"
                 class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">
-                DRAFT
               </div>
             </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>
             <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="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="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">
@@ -357,373 +303,237 @@
                 View Note
               </button>
             </div>
-            <div id="dossier-meta" class="text-xs text-gray-500">
-              Last updated: <span class="text-gray-300">—</span>
-            </div>
           </div>
         </div>
       </div>
     </div>
   </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
-    });
-    window.addEventListener('resize', () => vantaEffect.resize());
-    /* MODAL ACCESSIBILITY */
-    function trapFocus(modal) {
-      const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
-      if (!focusable.length) return;
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-      function handler(e) {
-        if (e.key === 'Tab') {
-          if (e.shiftKey) {
-            if (document.activeElement === first) { e.preventDefault(); last.focus(); }
-          } 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.classList.remove('modal-hidden');
-        modal.classList.add('modal-visible');
-        document.body.style.overflow = 'hidden';
-        setTimeout(() => { modal.focus(); trapFocus(modal); }, 0);
-      } else {
-        modal.classList.remove('modal-visible');
-        modal.classList.add('modal-hidden');
-        document.body.style.overflow = '';
-        untrapFocus(modal);
-      }
-    };
-    /* ACCESS MODAL */
-    const accessModal = document.getElementById('access-modal');
-    const accessBtn = document.getElementById('access-btn');
-    const closeAccessModal = document.getElementById('close-access-modal');
-    accessBtn.addEventListener('click', () => {
-      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) => {
-      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.');
-        return;
       }
-      alert('Request received. You will be contacted after review.');
-      e.target.reset();
-      toggleModal(accessModal, false);
-    });
-    /* LAB NAVIGATOR */
-    const labNav = document.getElementById('lab-navigator');
-    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",
-        subtitle: "Return to the main interface",
-        status: "ACTIVE",
-        body: "SILENTPATTERN is presented as a lab interface: minimal surface, deep artifacts. The index is the entrypoint.",
-        evidence: ["Public entry layer", "Dossiers reveal depth", "Controlled demos by access"],
-        primary: { label: "Go to Index", action: () => { window.location.href = "index.html"; } },
-        secondary: { label: "Research", action: () => { window.location.href = "research.html"; } },
-        updated: "—"
-      },
-      console: {
-        title: "Console",
-        subtitle: "Controlled interaction channel",
-        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: {
-        title: "Programs",
-        subtitle: "MCAP · CHAI · Quantum Lambda",
-        status: "DRAFT",
-        body: "Programs are introduced as research artifacts with maturity levels (Concept → Prototype → Validated) and evidence capsules.",
-        evidence: ["MCAP: causal abstraction principle", "CHAI: forecasting/regime modeling", "Quantum Lambda: high-frequency decision systems"],
-        primary: { label: "Open Programs", action: () => { window.location.href = "capabilities.html"; } },
-        secondary: { label: "Research Notes", action: () => { window.location.href = "research.html"; } },
-        updated: "—"
-      },
-      ai_scientist: {
-        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"; } },
-        updated: "—"
-      },
-      access: {
-        title: "Access",
-        subtitle: "Request access to demos and research",
-        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: "—"
       }
-    };
-    const dossierTitle = document.getElementById('dossier-title');
-    const dossierSubtitle = document.getElementById('dossier-subtitle');
-    const dossierStatus = document.getElementById('dossier-status');
-    const dossierBody = document.getElementById('dossier-body');
-    const dossierEvidence = document.getElementById('dossier-evidence');
-    const dossierPrimary = document.getElementById('dossier-primary');
-    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;
-      dossierBody.textContent = d.body;
-      dossierEvidence.innerHTML = "";
-      d.evidence.forEach(item => {
-        const li = document.createElement('li');
-        li.textContent = item;
-        dossierEvidence.appendChild(li);
-      });
-      dossierPrimary.textContent = d.primary.label;
-      dossierPrimary.onclick = d.primary.action;
-      dossierSecondary.textContent = d.secondary.label;
-      dossierSecondary.onclick = d.secondary.action;
-      dossierMeta.innerHTML = `Last updated: <span class="text-gray-300">${d.updated}</span>`;
-    }
-    document.querySelectorAll('.lab-node').forEach(btn => {
-      btn.addEventListener('click', () => renderDossier(btn.getAttribute('data-dossier')));
-    });
-    /* 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');
-    const typingIndicator = document.getElementById('typing-indicator');
-    const sendBtn = document.getElementById('send-btn');
-    const clearBtn = document.getElementById('clear-btn');
-    const exportBtn = document.getElementById('export-btn');
-    const transcript = []; // {role:'user'|'system', content:string, ts:number}
-    function seedTranscript() {
-      const seed = document.getElementById('seed-system-text');
-      if (seed && seed.textContent.trim()) {
-        transcript.push({ role: 'system', content: seed.textContent.trim(), ts: Date.now() });
       }
-    }
-    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');
-      messageDiv.className = `flex items-start ${isUser ? 'justify-end' : ''}`;
-      if (!isUser) {
-        messageDiv.innerHTML = `
-          <div class="w-8 h-8 rounded-full bg-indigo-600 flex-shrink-0 flex items-center justify-center mr-3" aria-hidden="true">
-            <i class="fas fa-robot text-white text-sm"></i>
-          </div>
-          <div class="bg-gray-800/70 rounded-lg p-4 max-w-[85%]">
-            <p class="text-gray-100">${safe}</p>
-          </div>
-        `;
-      } else {
-        messageDiv.innerHTML = `
-          <div class="bg-indigo-900/50 rounded-lg p-4 max-w-[85%]">
-            <p class="text-gray-100">${safe}</p>
-          </div>
-        `;
       }
-      chatMessages.appendChild(messageDiv);
-      chatMessages.scrollTop = chatMessages.scrollHeight;
-      transcript.push({ role: isUser ? 'user' : 'system', content: text, ts: Date.now() });
-    }
-    function setBusy(isBusy) {
-      if (isBusy) {
-        typingIndicator.classList.remove('hidden');
-        sendBtn.disabled = true;
-      } else {
-        typingIndicator.classList.add('hidden');
-        sendBtn.disabled = false;
       }
-    }
-    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) {
-      const msg = userMessage.toLowerCase();
-      if (msg.includes('mcap')) {
-        return "MCAP acknowledged. Provide: (1) the abstraction mapping you propose, (2) how you test causal fidelity, (3) baseline comparisons. I will draft a research-note structure next.";
-      }
-      if (msg.includes('chai')) {
-        return "CHAI acknowledged. I will assume a regime-aware forecasting stack. Specify assets, horizon, labeling rules, and walk-forward protocol. Then we can define an evaluation harness.";
-      }
-      if (msg.includes('quantum lambda')) {
-        return "Quantum Lambda acknowledged. For HFT, the first gate is market microstructure constraints and realistic latency/slippage. Share the execution assumptions and risk limits before discussing accuracy.";
-      }
-      return "Acknowledged. State (a) objective, (b) constraints, (c) what evidence you have today. I will respond with a plan and a minimal next experiment.";
-    }
-    chatForm.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      const message = chatInput.value.trim();
-      if (!message) return;
-      addMessage(message, true);
-      chatInput.value = '';
-      setBusy(true);
-      try {
-        const reply = await callServerChat(message);
-        addMessage(reply, false);
-      } catch (err) {
-        addMessage(localDemoResponse(message), false);
-      } finally {
-        setBusy(false);
-      }
-    });
-    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);
-    });
-    exportBtn.addEventListener('click', () => {
-      const payload = {
-        product: "SILENTPATTERN",
-        page: "chat.html",
-        exported_at: new Date().toISOString(),
-        transcript
       };
-      const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `silentpattern_transcript_${Date.now()}.json`;
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-      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);
-      }
     });
-    // Optional: preselect a dossier for the right pane
-    renderDossier('console');
   </script>
 </body>
 </html>

   <meta name="viewport" content="width=device-width,initial-scale=1.0" />
   <title>SILENTPATTERN — Console</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <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>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
+  <link rel="stylesheet" href="assets/site.css">
   <style>
     .chat-container {
       height: 520px;
       overflow-y: auto;
     }
   </style>
 </head>
 <body class="bg-black text-white overflow-x-hidden">
   <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
   <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
     <a href="index.html" class="flex items-center space-x-2">
       <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
     </div>
   </nav>
   <section class="relative z-10 px-6 py-16">
     <div class="max-w-5xl mx-auto">
       <div class="text-center mb-10">
                 <div class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></div>
               </div>
               <div>
+                <div class="text-sm font-medium">SILENTPATTERN Console</div>
                 <div class="text-xs text-gray-500">Session: local</div>
               </div>
             </div>
           </div>
         </div>
+        <div id="chat-messages" class="chat-container p-6 space-y-4 thin-scroll" aria-live="polite" aria-label="Chat messages">
+          <div class="flex items-start" data-seed="assistant">
             <div class="w-8 h-8 rounded-full bg-indigo-600 flex-shrink-0 flex items-center justify-center mr-3">
               <i class="fas fa-robot text-white text-sm"></i>
             </div>
             <div class="bg-gray-800/70 rounded-lg p-4 max-w-[85%]">
+              <p class="text-gray-100" id="seed-assistant-text">
+                Acknowledged. State your objective; I will respond with constraints, assumptions, and a minimal next experiment.
               </p>
               <p class="text-gray-400 text-xs mt-2">Note: do not paste secrets or API keys into chat.</p>
             </div>
                 <i class="fas fa-file-arrow-down mr-1"></i> Export
               </button>
             </div>
+            <div class="flex items-center gap-2">
+              <span id="server-status" class="text-xs text-gray-600"></span>
+              <span id="typing-indicator" class="hidden text-gray-400">
+                <span class="mr-2">System is typing</span>
+                <span class="typing-dots" aria-hidden="true"><span></span><span></span><span></span></span>
+              </span>
             </div>
           </div>
           <div class="mt-3 text-xs text-gray-600">
+            Integration note: do not call model APIs directly from the browser. Use a server endpoint
+            (<span class="text-gray-400">/api/chat</span>) to keep keys private.
           </div>
         </div>
       </div>
     </div>
   </footer>
+  <!-- ACCESS MODAL (same structure) -->
   <div id="access-modal"
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
     role="dialog" aria-modal="true" aria-labelledby="access-modal-title" tabindex="-1">
         <div class="flex justify-between items-start mb-6">
           <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" aria-label="Close">
             <i class="fas fa-times"></i>
             <input type="text" id="institution" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
           </div>
           <div>
+            <label for="purpose" class="block text-sm font-medium mb-1">Purpose</label>
             <select id="purpose" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
               <option value="">Select a purpose</option>
+              <option value="research">Academic / Independent Research</option>
+              <option value="development">Engineering / Product Evaluation</option>
               <option value="partnership">Partnership</option>
               <option value="other">Other</option>
             </select>
     </div>
   </div>
+  <!-- LAB NAVIGATOR (minimal: same markup as index/capabilities is acceptable) -->
   <div id="lab-navigator"
     class="fixed inset-0 z-[60] bg-black/80 backdrop-blur-md modal modal-hidden"
     role="dialog" aria-modal="true" aria-label="Lab Navigator" tabindex="-1">
     <div class="absolute inset-0" data-lab-close="true"></div>
     <div class="relative w-full h-full flex items-center justify-center p-6">
       <div class="w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
         <div class="relative rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden">
                 <div class="text-xs text-gray-500">Lab Navigator</div>
               </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"
               aria-label="Close Lab Navigator">
           </div>
           <div class="relative p-6 min-h-[420px]">
             <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">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-dossier="programs">
+                <div class="text-sm text-gray-200 font-medium">Programs</div>
+                <div class="text-xs text-gray-500 mt-1">Program Bay dossiers</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</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="research">
+                <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"
+                data-dossier="contact">
+                <div class="text-sm text-gray-200 font-medium">Contact</div>
+                <div class="text-xs text-gray-500 mt-1">Direct channel</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="access">
                 <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 mt-6 text-xs text-gray-500">
               Tip: Press <span class="text-gray-300">Esc</span> to close.
             </div>
             <div class="flex items-start justify-between gap-4">
               <div>
                 <div id="dossier-title" class="text-lg font-semibold text-gray-100">Lab Dossier</div>
+                <div id="dossier-subtitle" class="text-xs text-gray-500 mt-1">Select a node to load details.</div>
               </div>
               <div id="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="dossier-body" class="text-sm text-gray-300 leading-relaxed"></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="dossier-evidence" class="text-sm text-gray-300 space-y-1"></ul>
             </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">
                 View Note
               </button>
             </div>
+            <div id="dossier-meta" class="text-xs text-gray-500"></div>
           </div>
         </div>
       </div>
     </div>
   </div>
+  <script src="assets/site.js"></script>
   <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      SilentPattern.initVanta();
+      SilentPattern.setupAccessModal();
+      /* Chat logic */
+      const API_ENDPOINT = "/api/chat";
+      const chatForm = document.getElementById('chat-form');
+      const chatInput = document.getElementById('chat-input');
+      const chatMessages = document.getElementById('chat-messages');
+      const typingIndicator = document.getElementById('typing-indicator');
+      const sendBtn = document.getElementById('send-btn');
+      const clearBtn = document.getElementById('clear-btn');
+      const exportBtn = document.getElementById('export-btn');
+      const serverStatus = document.getElementById('server-status');
+      const transcript = []; // {role:'user'|'assistant', content:string, ts:number}
+      function seedTranscript() {
+        const seed = document.getElementById('seed-assistant-text');
+        if (seed && seed.textContent.trim()) {
+          transcript.push({ role: 'assistant', content: seed.textContent.trim(), ts: Date.now() });
         }
       }
+      seedTranscript();
+      function escapeHtml(str) {
+        return str
+          .replaceAll('&', '&amp;')
+          .replaceAll('<', '&lt;')
+          .replaceAll('>', '&gt;')
+          .replaceAll('"', '&quot;')
+          .replaceAll("'", '&#039;');
       }
+      function addMessage(text, role) {
+        const safe = escapeHtml(text);
+        const messageDiv = document.createElement('div');
+        const isUser = role === 'user';
+        messageDiv.className = `flex items-start ${isUser ? 'justify-end' : ''}`;
+        if (!isUser) {
+          messageDiv.innerHTML = `
+            <div class="w-8 h-8 rounded-full bg-indigo-600 flex-shrink-0 flex items-center justify-center mr-3" aria-hidden="true">
+              <i class="fas fa-robot text-white text-sm"></i>
+            </div>
+            <div class="bg-gray-800/70 rounded-lg p-4 max-w-[85%]">
+              <p class="text-gray-100">${safe}</p>
+            </div>
+          `;
+        } else {
+          messageDiv.innerHTML = `
+            <div class="bg-indigo-900/50 rounded-lg p-4 max-w-[85%]">
+              <p class="text-gray-100">${safe}</p>
+            </div>
+          `;
+        }
+        chatMessages.appendChild(messageDiv);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        transcript.push({ role, content: text, ts: Date.now() });
       }
+      function setBusy(isBusy) {
+        if (isBusy) {
+          typingIndicator.classList.remove('hidden');
+          sendBtn.disabled = true;
+        } else {
+          typingIndicator.classList.add('hidden');
+          sendBtn.disabled = false;
+        }
       }
+      async function callServerChat(userMessage) {
+        const contextWindow = transcript.slice(-12);
+        const res = await fetch(API_ENDPOINT, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            message: userMessage,
+            context: contextWindow,
+            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) {
+        const msg = userMessage.toLowerCase();
+        if (msg.includes('mcap')) {
+          return "MCAP acknowledged. Provide: (1) abstraction mapping, (2) causal fidelity test, (3) baselines. I will draft a research-note scaffold next.";
+        }
+        if (msg.includes('chai')) {
+          return "CHAI acknowledged. Specify assets, horizon, labeling rules, and walk-forward protocol. Then we define evaluation harness + calibration metrics.";
+        }
+        if (msg.includes('quantum lambda')) {
+          return "Quantum Lambda acknowledged. Gate 1: microstructure realism and execution assumptions. Share latency/slippage and risk limits before accuracy claims.";
+        }
+        return "Acknowledged. State (a) objective, (b) constraints, (c) evidence today. I will propose a minimal next experiment with audit hooks.";
       }
+      chatForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const message = chatInput.value.trim();
+        if (!message) return;
+        addMessage(message, 'user');
+        chatInput.value = '';
+        setBusy(true);
+        serverStatus.textContent = '';
+        try {
+          const reply = await callServerChat(message);
+          serverStatus.textContent = 'Server: connected';
+          addMessage(reply, 'assistant');
+        } catch (err) {
+          serverStatus.textContent = 'Server: unavailable (local fallback)';
+          addMessage(localDemoResponse(message), 'assistant');
+        } finally {
+          setBusy(false);
+        }
       });
+      clearBtn.addEventListener('click', () => {
+        const nodes = Array.from(chatMessages.children);
+        for (let i = 1; i < nodes.length; i++) nodes[i].remove();
+        transcript.length = 0;
+        seedTranscript();
+        addMessage('Session cleared.', 'assistant');
+      });
+      exportBtn.addEventListener('click', () => {
+        const payload = {
+          product: "SILENTPATTERN",
+          page: "chat.html",
+          exported_at: new Date().toISOString(),
+          transcript
+        };
+        const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `silentpattern_transcript_${Date.now()}.json`;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        URL.revokeObjectURL(url);
+      });
+      /* Lab Navigator dossiers */
+      const DOSSIERS = {
+        start: {
+          title: "Start Here",
+          subtitle: "Entry interface",
+          status: "ACTIVE",
+          body: "Return to the main interface. Programs and Console are accessible through dossiers.",
+          evidence: ["Reduced surface area", "Audit-first posture", "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: "Program Bay dossiers",
+          status: "ACTIVE",
+          body: "Programs are exposed as dossiers: scope, assumptions, evaluation protocol, and access gates.",
+          evidence: ["MCAP · CHAI · Quantum Lambda", "AI Scientist", "Agentic Workforce"],
+          primary: { label: "Open Programs", action: () => { window.location.href = "capabilities.html"; } },
+          secondary: { label: "Research", action: () => { window.location.href = "research.html"; } },
+          updated: "—"
+        },
+        console: {
+          title: "Console",
+          subtitle: "Controlled interaction channel",
+          status: "ACTIVE",
+          body: "This page. For production, keep keys server-side and include logging and policy gating.",
+          evidence: ["No client-side secrets", "Context window sent", "Exportable transcripts"],
+          primary: { label: "Close Navigator", action: () => SilentPattern.toggleModal(document.getElementById('lab-navigator'), false) },
+          secondary: { label: "Export Transcript", action: () => { SilentPattern.toggleModal(document.getElementById('lab-navigator'), false); exportBtn.click(); } },
+          updated: "—"
+        },
+        research: {
+          title: "Research",
+          subtitle: "Notes and briefs",
+          status: "DRAFT",
+          body: "Research artifacts should keep protocols and uncertainty explicit. Store evaluation artifacts here.",
+          evidence: ["Evaluation artifacts", "Reproducibility hooks", "Failure modes"],
+          primary: { label: "Open Research", action: () => { window.location.href = "research.html"; } },
+          secondary: { label: "Programs", action: () => { window.location.href = "capabilities.html"; } },
+          updated: "—"
+        },
+        contact: {
+          title: "Contact",
+          subtitle: "Direct channel",
+          status: "ACTIVE",
+          body: "Use Contact for coordination, partnerships, and qualified inquiries.",
+          evidence: ["Curated inbound", "Clear scope alignment", "Responsible scaling"],
+          primary: { label: "Open Contact", action: () => { window.location.href = "contact.html"; } },
+          secondary: { label: "Request Access", action: () => { SilentPattern.toggleModal(document.getElementById('lab-navigator'), false); document.getElementById('access-btn').click(); } },
+          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: () => { SilentPattern.toggleModal(document.getElementById('lab-navigator'), false); document.getElementById('access-btn').click(); } },
+          secondary: { label: "Programs", action: () => { window.location.href = "capabilities.html"; } },
+          updated: "—"
+        }
       };
+      SilentPattern.setupLabNavigator(DOSSIERS, 'console');
     });
   </script>
 </body>
 </html>