Update chat.html

chat.html

@@ -26,10 +26,6 @@
       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); }
 
@@ -60,7 +56,6 @@
     .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%),
@@ -68,7 +63,6 @@
         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>
@@ -77,7 +71,7 @@
   <!-- Animated background -->
   <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
 
-  <!-- Top bar: minimal + glyph trigger -->
+  <!-- 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">
@@ -100,7 +94,7 @@
     </div>
   </nav>
 
-  <!-- Console Body -->
+  <!-- Console -->
   <section class="relative z-10 px-6 py-16">
     <div class="max-w-5xl mx-auto">
       <div class="text-center mb-10">
@@ -118,9 +112,7 @@
         </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>
@@ -138,20 +130,18 @@
             </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="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">
+              <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>
@@ -159,7 +149,6 @@
           </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"
@@ -187,21 +176,18 @@
             </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.
+            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">© 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>
@@ -211,7 +197,7 @@
     </div>
   </footer>
 
-  <!-- ACCESS MODAL (same behavior as index) -->
+  <!-- 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">
@@ -231,18 +217,15 @@
         <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">
+            <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">
+            <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">
+            <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>
@@ -266,7 +249,7 @@
     </div>
   </div>
 
-  <!-- LAB NAVIGATOR (same as index, trimmed actions for this page) -->
+  <!-- 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">
@@ -386,9 +369,7 @@
   </div>
 
   <script>
-    /* -------------------------------------------------------------
-       VANTA BACKGROUND
-    ------------------------------------------------------------- */
+    /* VANTA */
     const vantaEffect = VANTA.NET({
       el: "#vanta-bg",
       mouseControls: true,
@@ -406,9 +387,7 @@
     });
     window.addEventListener('resize', () => vantaEffect.resize());
 
-    /* -------------------------------------------------------------
-       MODAL ACCESSIBILITY HELPERS
-    ------------------------------------------------------------- */
+    /* MODAL ACCESSIBILITY */
     function trapFocus(modal) {
       const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
       if (!focusable.length) return;
@@ -429,14 +408,12 @@
       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');
@@ -451,9 +428,7 @@
       }
     };
 
-    /* -------------------------------------------------------------
-       ACCESS MODAL
-    ------------------------------------------------------------- */
+    /* ACCESS MODAL */
     const accessModal = document.getElementById('access-modal');
     const accessBtn = document.getElementById('access-btn');
     const closeAccessModal = document.getElementById('close-access-modal');
@@ -462,12 +437,8 @@
       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);
-    });
+    accessModal.addEventListener('click', (e) => { if (e.target === accessModal) toggleModal(accessModal, false); });
 
     document.getElementById('access-form').addEventListener('submit', (e) => {
       e.preventDefault();
@@ -475,7 +446,6 @@
       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;
@@ -485,9 +455,7 @@
       toggleModal(accessModal, false);
     });
 
-    /* -------------------------------------------------------------
-       LAB NAVIGATOR
-    ------------------------------------------------------------- */
+    /* LAB NAVIGATOR */
     const labNav = document.getElementById('lab-navigator');
     const labNavBtn = document.getElementById('lab-nav-btn');
     const labNavClose = document.getElementById('lab-nav-close');
@@ -497,7 +465,6 @@
 
     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();
@@ -568,7 +535,6 @@
     function renderDossier(key) {
       const d = DOSSIERS[key];
       if (!d) return;
-
       dossierTitle.textContent = d.title;
       dossierSubtitle.textContent = d.subtitle;
       dossierStatus.textContent = d.status;
@@ -594,12 +560,9 @@
       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.
-    ------------------------------------------------------------- */
+    /* 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');
@@ -610,6 +573,14 @@
 
     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;')
@@ -658,12 +629,11 @@
     }
 
     async function callServerChat(userMessage) {
-      const res = await fetch('/api/chat', {
+      const res = await fetch(API_ENDPOINT, {
         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' }
         })
       });
@@ -704,11 +674,9 @@
       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);
@@ -716,11 +684,15 @@
     });
 
     clearBtn.addEventListener('click', () => {
-      // Keep the first system greeting, clear the rest
+      // 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;
-      transcript.push({ role: 'system', content: 'Session cleared.', ts: Date.now() });
+      seedTranscript();
+
+      // Add a visible confirmation message (this will also be recorded)
       addMessage('Session cleared.', false);
     });
 
@@ -742,15 +714,16 @@
       URL.revokeObjectURL(url);
     });
 
-    /* -------------------------------------------------------------
-       GLOBAL ESC: close whichever overlay is open
-    ------------------------------------------------------------- */
+    /* 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>