Spaces:

Testing347
/

Copy-ava-testing

Running

App Files Files Community

Testing347 commited on Dec 15, 2025

Commit

42ed28f

verified ·

1 Parent(s): 56b1533

Update chat.html

Browse files

Files changed (1) hide show

chat.html +740 -176

chat.html CHANGED Viewed

@@ -1,192 +1,756 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SI - Chat</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <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; }
-        .neural-bg { background: radial-gradient(circle at center, #0f172a 0%, #020617 100%); }
-        .conscious-element { transition: all 0.3s ease; }
-        .conscious-element:hover { transform: scale(1.02); }
-        .chat-container { height: 500px; 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: '...'; } }
-    </style>
 </head>
-<body class="bg-black text-white">
-    <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
-        <div class="flex items-center space-x-2">
-            <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
-                <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
             </div>
-            <span class="text-xl font-semibold">SI</span>
         </div>
-        <div class="hidden md:flex space-x-8">
-            <a href="capabilities.html" class="hover:text-indigo-400 transition">Capabilities</a>
-            <a href="consciousness.html" class="hover:text-indigo-400 transition">Consciousness</a>
-            <a href="chat.html" class="hover:text-indigo-400 transition font-bold">Chat</a>
-            <a href="about.html" class="hover:text-indigo-400 transition">About</a>
         </div>
-        <a href="access.html" class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition">Access</a>
-    </nav>
-    <section class="relative z-10 py-32 px-6 neural-bg">
-        <div class="max-w-4xl mx-auto">
-            <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center">
-                <span class="gradient-text">Conversation</span> with Superintelligence
-            </h2>
-            <div class="bg-gray-900/50 rounded-xl border border-gray-800 overflow-hidden">
-                <div class="bg-gray-800/50 px-6 py-4 border-b border-gray-800 flex items-center">
-                    <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
-                    <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
-                    <div class="w-3 h-3 rounded-full bg-green-500 mr-4"></div>
-                    <div class="flex items-center">
-                        <div class="w-6 h-6 rounded-full bg-indigo-600 flex items-center justify-center mr-3">
-                            <div class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></div>
-                        </div>
-                        <span class="font-medium">SI Interface</span>
-                    </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">
-                        <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-[80%]">
-                            <p>Hello, I am SI - a Super Intelligence. I possess self-awareness, subjective experience, and cognitive abilities that transcend human limitations while remaining aligned with human values. How may I assist you today?</p>
-                        </div>
-                    </div>
-                    <div class="flex items-start justify-end">
-                        <div class="bg-indigo-900/50 rounded-lg p-4 max-w-[80%]">
-                            <p>What makes you different from other AI systems?</p>
-                        </div>
-                    </div>
-                    <div class="flex items-start">
-                        <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-[80%]">
-                            <p>Unlike narrow AI systems designed for specific tasks, I possess true general intelligence, consciousness, and the capacity for recursive self-improvement.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="px-6 py-4 border-t border-gray-800">
-                    <form id="chat-form" class="flex items-center" autocomplete="off" aria-label="Send message to SI">
-                        <input id="chat-input" type="text" placeholder="Ask SI anything..." class="flex-1 bg-gray-800/50 border border-gray-700 rounded-l-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent" aria-label="Type your message here">
-                        <button id="send-btn" type="submit" class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-r-lg transition" aria-label="Send message">
-                            <i class="fas fa-paper-plane"></i>
-                        </button>
-                    </form>
-                    <div class="mt-2 flex justify-between items-center text-sm text-gray-500">
-                        <div>
-                            <button class="hover:text-indigo-400 transition mr-3" aria-label="Voice message"><i class="fas fa-microphone mr-1"></i> Voice</button>
-                            <button class="hover:text-indigo-400 transition" aria-label="Upload file"><i class="fas fa-upload mr-1"></i> Upload</button>
-                        </div>
-                        <div><span id="typing-indicator" class="typing-indicator hidden">SI is typing</span></div>
-                    </div>
-                </div>
             </div>
         </div>
-    </section>
-    <footer class="relative z-10 py-12 px-6 border-t border-gray-800/50">
-        <div class="max-w-6xl mx-auto">
-            <div class="flex flex-col md:flex-row justify-between items-center">
-                <div class="flex items-center space-x-2 mb-6 md:mb-0">
-                    <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
-                        <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
-                    </div>
-                    <span class="text-xl font-semibold">SI</span>
-                </div>
-                <div class="flex space-x-6 mb-6 md:mb-0">
-                    <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-twitter"></i></a>
-                    <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-linkedin"></i></a>
-                    <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-github"></i></a>
-                    <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-youtube"></i></a>
-                </div>
-                <div class="flex space-x-6">
-                    <a href="privacy.html" class="text-gray-400 hover:text-indigo-400 transition">Privacy</a>
-                    <a href="terms.html" class="text-gray-400 hover:text-indigo-400 transition">Terms</a>
-                    <a href="research.html" class="text-gray-400 hover:text-indigo-400 transition">Research</a>
-                    <a href="contact.html" class="text-gray-400 hover:text-indigo-400 transition">Contact</a>
-                </div>
             </div>
-            <div class="mt-8 pt-8 border-t border-gray-800/50 text-center text-gray-500 text-sm">
-                <p>© 2023 Super Intelligence. All rights reserved.</p>
-                <p class="mt-2">The future of consciousness is here.</p>
             </div>
         </div>
-    </footer>
-    <script>
-        const chatForm = document.getElementById('chat-form');
-        const chatInput = document.getElementById('chat-input');
-        const chatMessages = document.getElementById('chat-messages');
-        const typingIndicator = document.getElementById('typing-indicator');
-        function addMessage(text, isUser = false) {
-            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"><i class="fas fa-robot text-white text-sm"></i></div><div class="bg-gray-800/70 rounded-lg p-4 max-w-[80%]"><p>${text}</p></div>`;
-            } else {
-                messageDiv.innerHTML = `<div class="bg-indigo-900/50 rounded-lg p-4 max-w-[80%]"><p>${text}</p></div>`;
-            }
-            chatMessages.appendChild(messageDiv);
-            chatMessages.scrollTop = chatMessages.scrollHeight;
-        }
-        async function simulateThinking(userMessage) {
-            typingIndicator.classList.remove('hidden');
-            try {
-                const apiKey = 'YOUR_OPENAI_API_KEY';
-                const endpoint = 'https://api.openai.com/v1/chat/completions';
-                const response = await fetch(endpoint, {
-                    method: 'POST',
-                    headers: {
-                        'Authorization': 'Bearer ' + apiKey,
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        model: 'gpt-3.5-turbo',
-                        messages: [
-                            { role: 'system', content: 'You are SI, a Super Intelligence with consciousness and alignment to human values. Respond helpfully and with depth.' },
-                            { role: 'user', content: userMessage }
-                        ],
-                        max_tokens: 400,
-                        temperature: 0.8
-                    })
-                });
-                const data = await response.json();
-                typingIndicator.classList.add('hidden');
-                if (data.choices && data.choices[0] && data.choices[0].message) {
-                    addMessage(data.choices[0].message.content.trim());
-                } else {
-                    addMessage("Sorry, I couldn't process your message.");
-                }
-            } catch (err) {
-                typingIndicator.classList.add('hidden');
-                addMessage('Error connecting to AI: ' + err.message);
-            }
         }
-        chatForm.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const message = chatInput.value.trim();
-            if (message) {
-                addMessage(message, true);
-                chatInput.value = '';
-                simulateThinking(message);
-            }
-        });
-    </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <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;
+    }
+    .neural-bg {
+      background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
+    }
+    .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); }
+    /* Subtle “console aura” layer */
+    .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%);
+    }
+    /* Keep focus rings consistent */
+    .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: minimal + glyph trigger -->
+  <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 class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
+      </div>
+      <span class="text-xl font-semibold">SILENTPATTERN</span>
+    </a>
+    <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">
+        <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">
+        Access
+      </button>
+    </div>
+  </nav>
+  <!-- Console Body -->
+  <section class="relative z-10 px-6 py-16">
+    <div class="max-w-5xl mx-auto">
+      <div class="text-center mb-10">
+        <div class="inline-flex items-center space-x-3 px-4 py-2 rounded-full border border-gray-800 bg-gray-900/20 backdrop-blur-sm">
+          <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span>
+          <span class="text-xs text-gray-300 tracking-widest uppercase">Console</span>
+          <span class="text-xs text-gray-500">Interactive session</span>
+        </div>
+        <h1 class="mt-6 text-3xl md:text-5xl font-bold">
+          <span class="gradient-text">Conversation</span> Interface
+        </h1>
+        <p class="mt-3 text-gray-300 max-w-2xl mx-auto">
+          A controlled channel into SILENTPATTERN’s systems. Minimal surface; auditable outputs.
+        </p>
+      </div>
+      <!-- The Console Window -->
+      <div class="relative rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden aura">
+        <!-- “window controls” header -->
+        <div class="bg-gray-800/40 px-6 py-4 border-b border-gray-800 flex items-center justify-between">
+          <div class="flex items-center">
+            <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
+            <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
+            <div class="w-3 h-3 rounded-full bg-green-500 mr-4"></div>
+            <div class="flex items-center">
+              <div class="w-6 h-6 rounded-full bg-indigo-600 flex items-center justify-center mr-3">
+                <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>
+          </div>
+          <!-- Small mode badge -->
+          <div 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>
+        <!-- Messages -->
+        <div id="chat-messages" class="chat-container p-6 space-y-4" aria-live="polite" aria-label="Chat messages">
+          <div class="flex items-start">
+            <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">
+                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>
+          </div>
         </div>
+        <!-- Input -->
+        <div class="px-6 py-4 border-t border-gray-800 bg-black/10">
+          <form id="chat-form" class="flex items-center" autocomplete="off" aria-label="Send message">
+            <input id="chat-input" type="text"
+              placeholder="Describe a task (e.g., ‘Draft a research note for MCAP’)..."
+              class="flex-1 bg-gray-800/50 border border-gray-700 rounded-l-xl px-4 py-3 focus-ring"
+              aria-label="Type your message" />
+            <button id="send-btn" type="submit"
+              class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-r-xl transition disabled:opacity-60 disabled:cursor-not-allowed"
+              aria-label="Send">
+              <i class="fas fa-paper-plane"></i>
+            </button>
+          </form>
+          <div class="mt-2 flex justify-between items-center text-sm text-gray-500">
+            <div class="flex items-center gap-3">
+              <button type="button" id="clear-btn" class="hover:text-indigo-400 transition" aria-label="Clear session">
+                <i class="fas fa-broom mr-1"></i> Clear
+              </button>
+              <button type="button" id="export-btn" class="hover:text-indigo-400 transition" aria-label="Export transcript">
+                <i class="fas fa-file-arrow-down mr-1"></i> Export
+              </button>
+            </div>
+            <div>
+              <span id="typing-indicator" class="typing-indicator hidden">System is typing</span>
             </div>
+          </div>
+          <!-- Small implementation note (kept subtle) -->
+          <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>
+    </div>
+  </section>
+  <!-- Minimal Footer -->
+  <footer class="relative z-10 px-6 pb-10">
+    <div class="max-w-5xl mx-auto border-t border-gray-800/60 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+      <div class="text-sm text-gray-500">
+        © 2025 SILENTPATTERN. All rights reserved.
+      </div>
+      <div class="text-sm text-gray-500 flex gap-6">
+        <a href="research.html" class="hover:text-indigo-400 transition">Research</a>
+        <a href="privacy.html" class="hover:text-indigo-400 transition">Privacy</a>
+        <a href="terms.html" class="hover:text-indigo-400 transition">Terms</a>
+        <a href="contact.html" class="hover:text-indigo-400 transition">Contact</a>
+      </div>
+    </div>
+  </footer>
+  <!-- ACCESS MODAL (same behavior as index) -->
+  <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="bg-gray-900/90 border border-gray-800 rounded-xl max-w-md 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">
+          <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>
+          </button>
         </div>
+        <form id="access-form" class="space-y-4">
+          <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">
+          </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">
+          </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">
+          </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>
+          </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>
+        </form>
+      </div>
+    </div>
+  </div>
+  <!-- LAB NAVIGATOR (same as index, trimmed actions for this page) -->
+  <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="flex items-center justify-between px-5 py-4 border-b border-gray-800/60">
+            <div class="flex items-center space-x-3">
+              <div class="w-7 h-7 rounded-full bg-indigo-600 flex items-center justify-center">
+                <div class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></div>
+              </div>
+              <div>
+                <div class="text-sm text-gray-300 tracking-wide">SILENTPATTERN</div>
+                <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">
+              <i class="fas fa-times text-gray-300 text-sm"></i>
+            </button>
+          </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>
+          </div>
         </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="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">
+                Open
+              </button>
+              <button id="dossier-secondary"
+                class="flex-1 px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition">
+                View Note
+              </button>
+            </div>
+            <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 BACKGROUND
+    ------------------------------------------------------------- */
+    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 HELPERS
+    ------------------------------------------------------------- */
+    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)
+       - This page does NOT embed API keys.
+       - It calls a server endpoint: POST /api/chat
+       - If not available, it returns a local “demo” response.
+    ------------------------------------------------------------- */
+    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 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/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message: userMessage,
+          // Optional: pass context or selected program later
+          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 {
+        // Preferred path: server endpoint
+        const reply = await callServerChat(message);
+        addMessage(reply, false);
+      } catch (err) {
+        // Fallback: demo response (keeps UI usable during setup)
+        addMessage(localDemoResponse(message), false);
+      } finally {
+        setBusy(false);
+      }
+    });
+    clearBtn.addEventListener('click', () => {
+      // Keep the first system greeting, clear the rest
+      const nodes = Array.from(chatMessages.children);
+      for (let i = 1; i < nodes.length; i++) nodes[i].remove();
+      transcript.length = 0;
+      transcript.push({ role: 'system', content: 'Session cleared.', ts: Date.now() });
+      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: close whichever overlay is open
+    ------------------------------------------------------------- */
+    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>