Upload 11 files

static/css/style.css

@@ -0,0 +1,277 @@
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+
+:root {
+  /* Colors */
+  --color-paper: #F6F3EE;
+  --color-ink: #262521;
+  --color-moss: #4B6358;
+  --color-clay: #9C7A5B;
+  --color-signal: #B4483C;
+
+  /* Typography */
+  --font-display: 'Fraunces', serif;
+  --font-body: 'Public Sans', sans-serif;
+  --font-utility: 'IBM Plex Mono', monospace;
+}
+
+body {
+  background-color: var(--color-paper);
+  color: var(--color-ink);
+  font-family: var(--font-body);
+}
+
+/* Base resets to clear generic Tailwind */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-display);
+}
+
+.font-display {
+  font-family: var(--font-display);
+}
+
+.font-utility {
+  font-family: var(--font-utility);
+}
+
+.font-body {
+  font-family: var(--font-body);
+}
+
+/* Remove previous animations and float effects */
+.fade-in {
+  animation: fadeIn 0.15s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade-in {
+    animation: none;
+  }
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: var(--color-paper);
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--color-clay);
+  border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--color-moss);
+}
+
+/* Loading Screen */
+#loadingScreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--color-paper);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  transition: opacity 0.5s ease-out;
+}
+
+#loadingScreen.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.logo-text {
+  font-family: var(--font-display);
+  font-size: clamp(3rem, 10vw, 5rem);
+  font-weight: 400;
+  color: var(--color-ink);
+  margin-bottom: 1rem;
+}
+
+.loading-dots {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.loading-dots span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-ink);
+  animation: breathe 2s infinite ease-in-out both;
+}
+
+@keyframes breathe {
+
+  0%,
+  100% {
+    transform: scale(0.8);
+    opacity: 0.3;
+  }
+
+  50% {
+    transform: scale(1.2);
+    opacity: 0.8;
+  }
+}
+
+/* Panels */
+.panel {
+  background: var(--color-paper);
+  border: 1px solid var(--color-ink);
+  box-shadow: none;
+}
+
+/* Chat Input */
+.chat-input-container {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  background: transparent;
+  padding: 0.75rem;
+  border: 1px solid var(--color-ink);
+  border-radius: 0;
+}
+
+.chat-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-size: 0.95rem;
+  padding: 0.5rem 1rem;
+}
+
+.chat-input::placeholder {
+  color: var(--color-clay);
+}
+
+/* Buttons */
+.btn-primary {
+  background: var(--color-moss);
+  color: var(--color-paper);
+  border: 1px solid var(--color-moss);
+  padding: 0.5rem 1rem;
+  font-family: var(--font-body);
+  cursor: pointer;
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.btn-primary:hover {
+  background: transparent;
+  color: var(--color-moss);
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-toggle {
+  background: transparent;
+  color: var(--color-ink);
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 0.5rem;
+  font-family: var(--font-body);
+  cursor: pointer;
+}
+
+.btn-toggle.active {
+  border-bottom-color: var(--color-moss);
+  font-weight: 600;
+}
+
+/* Chat Messages */
+.message-user {
+  text-align: left;
+  font-family: var(--font-body);
+  color: var(--color-ink);
+  padding: 1rem 0;
+}
+
+.message-assistant {
+  text-align: left;
+  font-family: var(--font-body);
+  color: var(--color-ink);
+  padding: 1rem 0;
+}
+
+.assistant-label {
+  font-family: var(--font-utility);
+  color: var(--color-clay);
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.safety-banner {
+  background: var(--color-paper);
+  border: 1px solid var(--color-signal);
+  color: var(--color-ink);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.safety-banner-title {
+  color: var(--color-signal);
+  font-family: var(--font-display);
+  margin-bottom: 0.5rem;
+}
+
+.typing-indicator span {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-ink);
+  animation: breathe 1.4s infinite;
+}
+
+.typing-indicator span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typing-indicator span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+.dashboard-label {
+  font-family: var(--font-utility);
+  color: var(--color-clay);
+  font-size: 0.85rem;
+  text-transform: uppercase;
+}
+
+.dashboard-value {
+  font-family: var(--font-body);
+  color: var(--color-ink);
+}

static/js/api.js

@@ -0,0 +1,147 @@
+export const BACKEND_URL = "https://amogh1221-serinity.hf.space";
+
+// Helper to get token
+export function getToken() {
+  return localStorage.getItem('serinity_token');
+}
+
+// Global fetch wrapper for auth
+export async function authFetch(url, options = {}) {
+  const token = getToken();
+  const headers = { ...options.headers };
+  
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`;
+  }
+  
+  // Don't override FormData headers
+  if (!(options.body instanceof FormData) && !headers['Content-Type']) {
+    headers['Content-Type'] = 'application/json';
+  }
+
+  const res = await fetch(url, { ...options, headers });
+  
+  // Handle unauthorized globaly
+  if (res.status === 401) {
+    localStorage.removeItem('serinity_token');
+    window.dispatchEvent(new Event('unauthorized'));
+    throw new Error('Unauthorized');
+  }
+  
+  return res;
+}
+
+/**
+ * Fetches the list of patients associated with the logged-in user.
+ * @returns {Promise<Array>} List of patient objects.
+ */
+export async function fetchPatientsList() {
+  const res = await authFetch(`${BACKEND_URL}/patients`, { cache: "no-store" });
+  return res.json();
+}
+
+/**
+ * Loads the dashboard data for a specific patient.
+ * @param {string} patientId 
+ * @returns {Promise<Object>} Dashboard overview data.
+ */
+export async function loadDashboard(patientId) {
+  const res = await authFetch(`${BACKEND_URL}/patients/${patientId}/dashboard`, { cache: "no-store" });
+  if (!res.ok) throw new Error("Dashboard load failed");
+  return res.json();
+}
+
+/**
+ * Resets a patient's historical profile and sessions.
+ * @param {string} patientId 
+ */
+export async function resetPatientProfile(patientId) {
+  return authFetch(`${BACKEND_URL}/patients/${patientId}/reset`, { method: "POST" });
+}
+
+/**
+ * Deletes a patient profile completely.
+ * @param {string} patientId 
+ */
+export async function deletePatientProfile(patientId) {
+  return authFetch(`${BACKEND_URL}/patients/${patientId}`, { method: "DELETE" });
+}
+
+/**
+ * Creates a new patient profile linked to the user.
+ * @param {Object} data 
+ * @returns {Promise<Object>} The created patient data.
+ */
+export async function createPatientProfile(data) {
+  const res = await authFetch(`${BACKEND_URL}/patients/create`, {
+    method: "POST",
+    body: JSON.stringify(data)
+  });
+  return res.json();
+}
+
+export async function pingHealth() {
+  // health doesn't need auth, but authFetch is safe to use
+  return fetch(`${BACKEND_URL}/health`);
+}
+
+export async function startSessionReq(patientId) {
+  const res = await authFetch(`${BACKEND_URL}/start`, {
+    method: "POST",
+    body: JSON.stringify({ patient_id: patientId })
+  });
+  return res.json();
+}
+
+export async function sendChatText(sessionId, patientId, message, emotion) {
+  const res = await authFetch(`${BACKEND_URL}/chat_text`, {
+    method: "POST",
+    body: JSON.stringify({
+      message: message,
+      session_id: sessionId,
+      patient_id: patientId,
+      emotion: emotion
+    })
+  });
+  if (!res.ok) {
+    let errorDetail = `HTTP Error ${res.status}`;
+    try {
+      const data = await res.json();
+      errorDetail = data.detail || errorDetail;
+    } catch(e) {}
+    throw new Error(errorDetail);
+  }
+  return res.json();
+}
+
+export async function transcribeAudio(audioBlob) {
+  const formData = new FormData();
+  formData.append('audio', audioBlob, 'recording.webm');
+  
+  // Custom headers because authFetch handles FormData correctly if Content-Type is omitted
+  const res = await authFetch(`${BACKEND_URL}/transcribe`, {
+    method: "POST",
+    body: formData
+  });
+  return res.json();
+}
+
+export async function endSessionReq(sessionId, patientId) {
+  return authFetch(`${BACKEND_URL}/end_session`, {
+    method: "POST",
+    body: JSON.stringify({
+      session_id: sessionId,
+      patient_id: patientId
+    })
+  });
+}
+
+export async function getActiveSession(patientId) {
+  const res = await authFetch(`${BACKEND_URL}/patients/${patientId}/active_session`, { cache: "no-store" });
+  return res.json();
+}
+
+export async function getSessionMessages(sessionId) {
+  const res = await authFetch(`${BACKEND_URL}/sessions/${sessionId}/messages`, { cache: "no-store" });
+  return res.json();
+}

static/js/app.js

@@ -0,0 +1,717 @@
+import { state } from './state.js';
+import * as api from './api.js';
+import * as ui from './ui.js';
+import * as audio from './audio.js';
+import * as profiles from './profiles.js';
+import * as session from './session.js';
+import * as auth from './auth.js';
+
+// DOM Elements specific to top-level app logic
+const startButton = document.getElementById("startButton");
+const voiceModeBtn = document.getElementById("voiceModeBtn");
+const textModeBtn = document.getElementById("textModeBtn");
+const voiceInput = document.getElementById("voiceInput");
+const textInput = document.getElementById("textInput");
+const chatInput = document.getElementById("chatInput");
+const sendBtn = document.getElementById("sendBtn");
+const micBtn = document.getElementById("micBtn");
+
+/**
+ * Binds all global events to the DOM (button clicks, form submits, keypresses).
+ */
+function bindEvents() {
+  // Handle browser back/forward buttons
+  window.addEventListener("popstate", (event) => {
+    if (event.state && event.state.screen) {
+      ui.switchScreen(event.state.screen, false);
+    } else {
+      const path = window.location.pathname;
+      if (path === "/dashboard" || path === "/session") {
+        if (!state.patientId) {
+          profiles.fetchPatients();
+        } else {
+          ui.switchScreen(path === "/dashboard" ? "dashboardScreen" : "mainApp", false);
+        }
+      } else {
+        ui.switchScreen("loadingScreen", false);
+      }
+    }
+  });
+
+  // Global Unauthorized Handler
+  window.addEventListener("unauthorized", () => {
+    ui.switchScreen("authScreen", false);
+  });
+
+  // --- Auth Events ---
+  const loginFormContainer = document.getElementById("loginFormContainer");
+  const signupFormContainer = document.getElementById("signupFormContainer");
+  const forgotPwdFormContainer = document.getElementById("forgotPwdFormContainer");
+  const otpStepContainer = document.getElementById("otpStepContainer");
+  const newPwdStepContainer = document.getElementById("newPwdStepContainer");
+  const signupOtpStepContainer = document.getElementById("signupOtpStepContainer");
+
+  // Track verified OTP state in memory (not persisted — refresh = back to login)
+  let _otpVerifiedEmail = null;
+
+  function showAuthPanel(panelId) {
+    // Only hide/show panels that exist
+    const panels = [loginFormContainer, signupFormContainer, forgotPwdFormContainer, otpStepContainer, newPwdStepContainer, signupOtpStepContainer];
+    panels.forEach(p => { 
+      if(p) { 
+        p.classList.add('hidden'); 
+        p.classList.remove('block'); 
+      } 
+    });
+    const target = document.getElementById(panelId);
+    if (target) {
+      target.classList.remove('hidden');
+      target.classList.add('block');
+    } else {
+      console.error("Auth panel not found:", panelId);
+    }
+  }
+
+  document.getElementById("showSignupBtn")?.addEventListener("click", () => showAuthPanel("signupFormContainer"));
+  document.getElementById("showForgotPwdBtn")?.addEventListener("click", () => showAuthPanel("forgotPwdFormContainer"));
+  document.getElementById("backToLoginBtn1")?.addEventListener("click", () => showAuthPanel("loginFormContainer"));
+  document.getElementById("backToLoginBtn2")?.addEventListener("click", () => showAuthPanel("loginFormContainer"));
+  document.getElementById("backToForgotBtn")?.addEventListener("click", () => showAuthPanel("forgotPwdFormContainer"));
+  document.getElementById("backToSignupBtn")?.addEventListener("click", () => showAuthPanel("signupFormContainer"));
+
+  // Populate Nationality Dropdown
+  const countries = [
+    "India", "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", 
+    "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", 
+    "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bhutan", "Bolivia", 
+    "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", 
+    "Burundi", "Côte d'Ivoire", "Cabo Verde", "Cambodia", "Cameroon", "Canada", "Central African Republic", 
+    "Chad", "Chile", "China", "Colombia", "Comoros", "Congo (Congo-Brazzaville)", "Costa Rica", 
+    "Croatia", "Cuba", "Cyprus", "Czechia (Czech Republic)", "Democratic Republic of the Congo", 
+    "Denmark", "Djibouti", "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador", 
+    "Equatorial Guinea", "Eritrea", "Estonia", "Eswatini", "Ethiopia", "Fiji", "Finland", 
+    "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Grenada", 
+    "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Holy See", "Honduras", 
+    "Hungary", "Iceland", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", 
+    "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Kuwait", "Kyrgyzstan", "Laos", 
+    "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", 
+    "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", 
+    "Mauritius", "Mexico", "Micronesia", "Moldova", "Monaco", "Mongolia", "Montenegro", "Morocco", 
+    "Mozambique", "Myanmar (formerly Burma)", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", 
+    "Nicaragua", "Niger", "Nigeria", "North Korea", "North Macedonia", "Norway", "Oman", "Pakistan", 
+    "Palau", "Palestine State", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", 
+    "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Saint Kitts and Nevis", "Saint Lucia", 
+    "Saint Vincent and the Grenadines", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", 
+    "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", 
+    "Solomon Islands", "Somalia", "South Africa", "South Korea", "South Sudan", "Spain", "Sri Lanka", 
+    "Sudan", "Suriname", "Sweden", "Switzerland", "Syria", "Tajikistan", "Tanzania", "Thailand", 
+    "Timor-Leste", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", 
+    "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", 
+    "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"
+  ];
+  
+  const signupNationality = document.getElementById("signupNationality");
+  const nationalityDropdown = document.getElementById("nationalityDropdown");
+  
+  if (signupNationality && nationalityDropdown) {
+    function renderCountries(filterText = "") {
+      nationalityDropdown.innerHTML = "";
+      const filtered = countries.filter(c => c.toLowerCase().includes(filterText.toLowerCase()));
+      filtered.forEach(country => {
+        const div = document.createElement("div");
+        div.className = "p-2 hover:bg-moss/20 cursor-pointer text-sm text-ink";
+        div.textContent = country;
+        div.onmousedown = (e) => {
+          e.preventDefault(); // prevent blur
+          signupNationality.value = country;
+          nationalityDropdown.classList.add("hidden");
+        };
+        nationalityDropdown.appendChild(div);
+      });
+      if (filtered.length === 0) {
+        const div = document.createElement("div");
+        div.className = "p-2 text-sm text-clay italic";
+        div.textContent = "No matches";
+        nationalityDropdown.appendChild(div);
+      }
+    }
+
+    signupNationality.addEventListener("focus", () => {
+      renderCountries(signupNationality.value);
+      nationalityDropdown.classList.remove("hidden");
+    });
+
+    signupNationality.addEventListener("input", (e) => {
+      renderCountries(e.target.value);
+      nationalityDropdown.classList.remove("hidden");
+    });
+
+    signupNationality.addEventListener("blur", () => {
+      nationalityDropdown.classList.add("hidden");
+    });
+  }
+
+  // Helper function to strip spaces from OTP input
+  function setupOtpInputStripper(fieldId) {
+    const field = document.getElementById(fieldId);
+    if (field) {
+      field.addEventListener('input', (e) => {
+        // Remove all spaces from the input value
+        e.target.value = e.target.value.replace(/\s/g, '');
+      });
+    }
+  }
+
+  // Setup OTP input strippers for all OTP fields (signup, forgot password, delete account)
+  setupOtpInputStripper("signupOtpCode");
+  setupOtpInputStripper("resetOtpCode");
+  setupOtpInputStripper("deleteAccountOtpCode");
+
+  document.getElementById("loginBtn")?.addEventListener("click", async () => {
+    const user = document.getElementById("loginUsername").value.trim();
+    const pass = document.getElementById("loginPassword").value;
+    if (!user || !pass) return ui.showAlert("Login Error", "Please enter both username/email and password");
+    
+    try {
+      document.getElementById("loginBtn").textContent = "Logging In...";
+      await auth.login(user, pass);
+      document.getElementById("loginBtn").textContent = "Log In";
+      await profiles.fetchPatients();
+    } catch (e) {
+      ui.showAlert("Login Failed", e.message);
+      document.getElementById("loginBtn").textContent = "Log In";
+    }
+  });
+
+  let _signupPayload = null;
+
+  document.getElementById("signupGetOtpBtn")?.addEventListener("click", async () => {
+    const payload = {
+      name: document.getElementById("signupName").value.trim(),
+      username: document.getElementById("signupUsername").value.trim(),
+      email: document.getElementById("signupEmail").value.trim(),
+      password: document.getElementById("signupPassword").value,
+      gender: document.getElementById("signupGender").value,
+      age: parseInt(document.getElementById("signupAge").value) || null,
+      nationality: document.getElementById("signupNationality").value,
+      primary_concern: document.getElementById("signupConcern").value,
+      emergency_contact_name: document.getElementById("signupEmergencyName").value.trim() || null,
+      emergency_contact_phone: document.getElementById("signupEmergencyPhone").value.trim() || null
+    };
+
+    if (!payload.name || !payload.username || !payload.email || !payload.password || !payload.gender || !payload.nationality || !payload.primary_concern) {
+      return ui.showAlert("Signup Error", "Please fill out all required fields (*).");
+    }
+    
+    if (payload.password.length < 8) {
+      return ui.showAlert("Signup Error", "Password must be at least 8 characters long.");
+    }
+    
+    if (payload.age !== null && (payload.age < 5 || payload.age > 99)) {
+      return ui.showAlert("Signup Error", "Age must be between 5 and 99.");
+    }
+
+    try {
+      document.getElementById("signupGetOtpBtn").textContent = "Sending OTP...";
+      document.getElementById("signupGetOtpBtn").disabled = true;
+      
+      await auth.requestSignupOtp(payload.email, payload.username);
+      
+      _signupPayload = payload;
+      
+      // Clear OTP code and switch to signup OTP panel
+      const signupOtpCodeField = document.getElementById("signupOtpCode");
+      if (signupOtpCodeField) {
+        signupOtpCodeField.value = "";
+      }
+      showAuthPanel("signupOtpStepContainer");
+      
+    } catch (e) {
+      ui.showAlert("Signup Failed", e.message);
+    } finally {
+      document.getElementById("signupGetOtpBtn").textContent = "Get OTP";
+      document.getElementById("signupGetOtpBtn").disabled = false;
+    }
+  });
+
+  document.getElementById("signupCompleteBtn")?.addEventListener("click", async () => {
+    if (!_signupPayload) {
+      return ui.showAlert("Signup Error", "Missing signup details. Please refresh and try again.");
+    }
+    
+    const signupOtpCodeField = document.getElementById("signupOtpCode");
+    if (!signupOtpCodeField) {
+      return ui.showAlert("Signup Error", "OTP code field not found. Please refresh and try again.");
+    }
+    
+    const otpCode = signupOtpCodeField.value.trim();
+    if (otpCode.length !== 6) {
+      return ui.showAlert("Signup Error", "Please enter the 6-digit OTP code.");
+    }
+    
+    try {
+      const completeBtn = document.getElementById("signupCompleteBtn");
+      if (completeBtn) {
+        completeBtn.textContent = "Creating Account...";
+        completeBtn.disabled = true;
+      }
+      
+      const payload = {
+        ..._signupPayload,
+        otp_code: otpCode
+      };
+      
+      await auth.signup(payload);
+      
+      _signupPayload = null;
+      if (signupOtpCodeField) {
+        signupOtpCodeField.value = "";
+      }
+      
+      // Account created successfully, go back to login
+      ui.showAlert("Success", "Account created successfully!");
+      showAuthPanel("loginFormContainer");
+      
+      await profiles.fetchPatients();
+    } catch (e) {
+      ui.showAlert("Signup Failed", e.message);
+    } finally {
+      const completeBtn = document.getElementById("signupCompleteBtn");
+      if (completeBtn) {
+        completeBtn.textContent = "Complete Signup";
+        completeBtn.disabled = false;
+      }
+    }
+  });
+
+  document.getElementById("requestOtpBtn")?.addEventListener("click", async () => {
+    const email = document.getElementById("forgotPwdEmail").value.trim();
+    if (!email) return ui.showAlert("Reset Password", "Please enter your email.");
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) return ui.showAlert("Reset Password", "Please enter a valid email address.");
+    try {
+      document.getElementById("requestOtpBtn").textContent = "Sending...";
+      document.getElementById("requestOtpBtn").disabled = true;
+      await auth.forgotPassword(email);
+      document.getElementById("resetOtpCode").value = "";
+      showAuthPanel("otpStepContainer");
+    } catch(e) {
+      ui.showAlert("Reset Password", e.message);
+    } finally {
+      document.getElementById("requestOtpBtn").textContent = "Send Code";
+      document.getElementById("requestOtpBtn").disabled = false;
+    }
+  });
+
+  document.getElementById("verifyOtpBtn")?.addEventListener("click", async () => {
+    const email = document.getElementById("forgotPwdEmail").value.trim();
+    const otp = document.getElementById("resetOtpCode").value.trim();
+    if (otp.length !== 6) return ui.showAlert("Reset Password", "Please enter the 6-digit code.");
+    try {
+      document.getElementById("verifyOtpBtn").textContent = "Verifying...";
+      document.getElementById("verifyOtpBtn").disabled = true;
+      await auth.verifyOtp(email, otp);
+      _otpVerifiedEmail = email;
+      document.getElementById("resetNewPassword").value = "";
+      showAuthPanel("newPwdStepContainer");
+    } catch(e) {
+      ui.showAlert("Verification Failed", e.message);
+    } finally {
+      document.getElementById("verifyOtpBtn").textContent = "Verify Code";
+      document.getElementById("verifyOtpBtn").disabled = false;
+    }
+  });
+
+  document.getElementById("submitResetBtn")?.addEventListener("click", async () => {
+    // If _otpVerifiedEmail is null, this means a refresh happened — redirect to login
+    if (!_otpVerifiedEmail) {
+      showAuthPanel("loginFormContainer");
+      return;
+    }
+    const newPass = document.getElementById("resetNewPassword").value;
+    if (!newPass || newPass.length < 8) return ui.showAlert("Reset Password", "New password must be at least 8 characters long.");
+    try {
+      document.getElementById("submitResetBtn").textContent = "Updating...";
+      document.getElementById("submitResetBtn").disabled = true;
+      const otp = document.getElementById("resetOtpCode").value.trim();
+      await auth.resetPassword(_otpVerifiedEmail, otp, newPass);
+      _otpVerifiedEmail = null;
+      ui.showAlert("Success", "Password reset successfully! Please log in.");
+      showAuthPanel("loginFormContainer");
+    } catch (e) {
+      ui.showAlert("Reset Failed", e.message);
+    } finally {
+      document.getElementById("submitResetBtn").textContent = "Update Password";
+      document.getElementById("submitResetBtn").disabled = false;
+    }
+  });
+
+  // --- Profiles & Dashboard Events ---
+
+  const patientDropdown = document.getElementById("patientDropdown");
+  if (patientDropdown) patientDropdown.onchange = profiles.toggleSelectButton;
+
+  const dashboardLogoutBtn = document.getElementById("dashboardLogoutBtn");
+  if (dashboardLogoutBtn) {
+    dashboardLogoutBtn.onclick = () => {
+      auth.logout();
+      ui.switchScreen("authScreen");
+    };
+  }
+
+  const dashboardResetBtn = document.getElementById("dashboardResetBtn");
+  if (dashboardResetBtn) {
+    dashboardResetBtn.onclick = () => {
+      ui.showConfirm(
+        "Reset Profile?",
+        "Are you sure you want to reset this profile? All sessions, messages, and analysis will be permanently deleted. The patient record will remain.",
+        async () => {
+          try {
+            await api.resetPatientProfile(state.patientId);
+          } catch (e) {
+            console.error("Error resetting profile:", e);
+          }
+          document.getElementById("dashboardSessionsList").innerHTML = `<p class="text-clay text-sm italic">No previous sessions found.</p>`;
+          document.getElementById("dashboardDomains").innerHTML = `
+            <h3 class="font-utility uppercase text-clay text-sm border-b border-ink/30 pb-2">Clinical Profile</h3>
+            <p class="text-clay text-sm italic mt-4">Profile has been reset.</p>
+          `;
+        }
+      );
+    };
+  }
+
+  const dashboardDeleteBtn = document.getElementById("dashboardDeleteBtn");
+  if (dashboardDeleteBtn) {
+    dashboardDeleteBtn.onclick = () => {
+      document.getElementById("deleteAccountConfirmModal").style.display = "flex";
+    };
+  }
+
+  const deleteAccountCancelBtn = document.getElementById("deleteAccountCancelBtn");
+  if (deleteAccountCancelBtn) {
+    deleteAccountCancelBtn.onclick = () => {
+      document.getElementById("deleteAccountConfirmModal").style.display = "none";
+    };
+  }
+
+  const deleteAccountSendOtpBtn = document.getElementById("deleteAccountSendOtpBtn");
+  if (deleteAccountSendOtpBtn) {
+    deleteAccountSendOtpBtn.onclick = async () => {
+      try {
+        deleteAccountSendOtpBtn.textContent = "Sending OTP...";
+        deleteAccountSendOtpBtn.disabled = true;
+        
+        await auth.requestDeleteAccountOtp();
+        
+        // Close confirmation modal and show OTP modal
+        document.getElementById("deleteAccountConfirmModal").style.display = "none";
+        document.getElementById("deleteAccountOtpCode").value = "";
+        document.getElementById("deleteAccountOtpModal").style.display = "flex";
+        
+      } catch (e) {
+        console.error("Error requesting OTP:", e);
+        ui.showAlert("Error", e.message);
+      } finally {
+        deleteAccountSendOtpBtn.textContent = "SEND OTP";
+        deleteAccountSendOtpBtn.disabled = false;
+      }
+    };
+  }
+
+  const closeDeleteOtpModalBtn = document.getElementById("closeDeleteOtpModalBtn");
+  if (closeDeleteOtpModalBtn) {
+    closeDeleteOtpModalBtn.onclick = () => {
+      document.getElementById("deleteAccountOtpModal").style.display = "none";
+    };
+  }
+
+  const submitDeleteOtpBtn = document.getElementById("submitDeleteOtpBtn");
+  if (submitDeleteOtpBtn) {
+    submitDeleteOtpBtn.onclick = async () => {
+      const code = document.getElementById("deleteAccountOtpCode").value.trim();
+      if (code.length !== 6) return ui.showAlert("Error", "Please enter a valid 6-digit code.");
+      try {
+        submitDeleteOtpBtn.textContent = "Verifying...";
+        submitDeleteOtpBtn.disabled = true;
+        
+        await auth.verifyDeleteAccount(code);
+        
+        document.getElementById("deleteAccountOtpModal").style.display = "none";
+        auth.logout();
+        ui.switchScreen("authScreen");
+        
+      } catch (e) {
+        ui.showAlert("Error", e.message);
+      } finally {
+        submitDeleteOtpBtn.textContent = "Verify & Delete";
+        submitDeleteOtpBtn.disabled = false;
+      }
+    };
+  }
+  const dashboardStartBtn = document.getElementById("dashboardStartBtn");
+  if (dashboardStartBtn) {
+    dashboardStartBtn.onclick = async () => {
+      ui.switchScreen("loadingScreen", false);
+      startButton.textContent = "Checking Session...";
+      startButton.disabled = true;
+
+      try {
+        const active = await api.getActiveSession(state.patientId);
+        if (active && active.session_id) {
+          ui.switchScreen("dashboardScreen");
+          const modal = document.getElementById("continueSessionModal");
+          modal.style.display = "flex";
+
+          document.getElementById("continueSessionBtn").onclick = async () => {
+            modal.style.display = "none";
+            ui.switchScreen("loadingScreen", false);
+            startButton.textContent = "Resuming Session...";
+            await session.continueActualSession(active.session_id);
+          };
+
+          document.getElementById("endAndStartNewBtn").onclick = async () => {
+            modal.style.display = "none";
+            ui.switchScreen("loadingScreen", false);
+            startButton.textContent = "Loading Session...";
+            state.setSessionId(null);
+            await api.endSessionReq(active.session_id, state.patientId);
+            await session.startActualSession(state.patientId);
+          };
+        } else {
+          startButton.textContent = "Loading Session...";
+          await session.startActualSession(state.patientId);
+        }
+      } catch (e) {
+        console.error(e);
+        startButton.textContent = "Loading Session...";
+        await session.startActualSession(state.patientId);
+      }
+    };
+  }
+
+  const selectProfileBtn = document.getElementById("selectProfileBtn");
+  if (selectProfileBtn) {
+    selectProfileBtn.onclick = async () => {
+      state.setPatientId(patientDropdown.value);
+      await profiles.showDashboard(state.patientId);
+    };
+  }
+
+  const createProfileBtn = document.getElementById("createProfileBtn");
+  if (createProfileBtn) {
+    createProfileBtn.onclick = async () => {
+      const nameInput = document.getElementById("newPatientName");
+      const ageInput = document.getElementById("newPatientAge");
+      const genderInput = document.getElementById("newPatientGender");
+      const occupationInput = document.getElementById("newPatientOccupation");
+      const concernInput = document.getElementById("newPatientConcern");
+      
+      const name = nameInput.value.trim();
+      const age = ageInput.value;
+      const gender = genderInput ? genderInput.value : null;
+      const occupation = occupationInput ? occupationInput.value.trim() : null;
+
+      if (!name || !age || !gender || !occupation) {
+        ui.showAlert("Missing Information", "Please fill out all 4 required fields (Name, Age, Gender, and Occupation) to create a new profile.");
+        return;
+      }
+      
+      const parsedAge = parseInt(age);
+      if (isNaN(parsedAge) || parsedAge < 5 || parsedAge > 99) {
+        ui.showAlert("Invalid Age", "Age must be between 5 and 99.");
+        return;
+      }
+
+      try {
+        const data = {
+          name: name,
+          age: parseInt(age),
+          gender: gender,
+          occupation: occupation,
+          primary_concern: concernInput ? concernInput.value.trim() : null
+        };
+        const pData = await api.createPatientProfile(data);
+        state.setPatientId(pData.patient_id);
+        await profiles.showDashboard(state.patientId);
+      } catch (e) {
+        console.error("Failed to create profile:", e);
+        ui.showAlert("Error", "Failed to create patient profile. Please try again.");
+      }
+    };
+  }
+
+  if (startButton) {
+    startButton.onclick = async () => {
+      const text = startButton.textContent.trim();
+      if (text.includes("Start Consultation")) {
+        if (!auth.isAuthenticated()) {
+          ui.switchScreen("authScreen", false);
+          return;
+        }
+        
+        startButton.textContent = "Loading...";
+        startButton.disabled = true;
+        try {
+          await profiles.fetchPatients();
+        } catch(e) {
+          console.error(e);
+          ui.showAlert("Error", "Failed to load dashboard. Check console.");
+        } finally {
+          startButton.textContent = "Start Consultation";
+          startButton.disabled = false;
+        }
+      } else if (text.includes("Retry")) {
+        startButton.textContent = "Initializing...";
+        startButton.disabled = true;
+        session.initializeSession();
+      }
+    };
+  }
+
+  // --- Session UI Events (Toggle Text/Voice, etc) ---
+
+  if (voiceModeBtn) {
+    voiceModeBtn.onclick = (e) => {
+      state.isVoiceMode = true;
+      voiceModeBtn.classList.add("active");
+      textModeBtn.classList.remove("active");
+      voiceInput.style.display = "flex";
+      textInput.style.display = "none";
+      
+      // Auto-enable audio output when switching to voice mode
+      if (!state.isAudioOutputEnabled) {
+        session.setAudioOutput(true);
+      }
+      e.currentTarget.blur();
+    };
+  }
+
+  if (textModeBtn) {
+    textModeBtn.onclick = (e) => {
+      state.isVoiceMode = false;
+      textModeBtn.classList.add("active");
+      voiceModeBtn.classList.remove("active");
+      voiceInput.style.display = "none";
+      textInput.style.display = "block";
+      chatInput.focus();
+    };
+  }
+
+  const voiceSelect = document.getElementById("voiceSelect");
+  if (voiceSelect) {
+    voiceSelect.addEventListener('change', (e) => e.target.blur());
+  }
+
+  const audioOutputToggleMobile = document.getElementById("audioOutputToggleMobile");
+  if (audioOutputToggleMobile) {
+    audioOutputToggleMobile.addEventListener('change', (e) => {
+      session.setAudioOutput(e.target.checked);
+      e.target.blur();
+    });
+  }
+
+  const audioOutputToggleDesktop = document.getElementById("audioOutputToggleDesktop");
+  if (audioOutputToggleDesktop) {
+    audioOutputToggleDesktop.addEventListener('click', (e) => {
+      session.setAudioOutput(!state.isAudioOutputEnabled);
+      e.currentTarget.blur();
+    });
+  }
+
+  if (sendBtn) {
+    sendBtn.onclick = () => {
+      const message = chatInput.value.trim();
+      if (message) {
+        chatInput.value = "";
+        session.primeTTS(); // Renew activation synchronously
+        session.sendTextMessage(message);
+      }
+    };
+  }
+
+  if (chatInput) {
+    chatInput.onkeypress = (e) => {
+      if (e.key === 'Enter') sendBtn.onclick();
+    };
+  }
+
+  // --- Audio Recording Events ---
+
+  if (micBtn) {
+    micBtn.addEventListener('pointerdown', (e) => {
+      e.preventDefault();
+      if (!state.isVoiceMode || state.isAISpeaking) return;
+      if (!state.isListening && !state.isRecordingPending) {
+        micBtn.style.transform = 'scale(0.95)';
+        audio.startRecording(session.sendTextMessage);
+      }
+    });
+
+    const stopMicAction = (e) => {
+      e.preventDefault();
+      if (state.isVoiceMode && (state.isListening || state.isRecordingPending)) {
+        micBtn.style.transform = 'none';
+        session.primeTTS(); // Renew activation synchronously
+        audio.stopRecording();
+      }
+    };
+
+    micBtn.addEventListener('pointerup', stopMicAction);
+    micBtn.addEventListener('pointercancel', stopMicAction);
+    micBtn.addEventListener('pointerleave', stopMicAction);
+  }
+
+  // Spacebar hold-to-record (capture phase to intercept before browser synthetic clicks)
+  window.addEventListener('keydown', (e) => {
+    if (e.code !== 'Space' || e.repeat) return;
+    if (!state.isVoiceMode) return;
+    if (['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement.tagName)) return;
+    
+    e.preventDefault();
+    e.stopPropagation();
+    
+    if (state.isAISpeaking) return;
+    if (!state.isListening && !state.isRecordingPending) {
+      audio.startRecording(session.sendTextMessage);
+    }
+  }, { capture: true });
+
+  window.addEventListener('keyup', (e) => {
+    if (e.code !== 'Space') return;
+    if (!state.isVoiceMode) return;
+    if (['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement.tagName)) return;
+    
+    e.preventDefault();
+    e.stopPropagation();
+    
+    session.primeTTS(); // Renew activation synchronously
+    audio.stopRecording();
+  }, { capture: true });
+
+  const endSessionBtn = document.getElementById("endSessionBtn");
+  if (endSessionBtn) {
+    endSessionBtn.onclick = async () => {
+      if (!state.sessionId) return;
+
+      if (window.speechSynthesis.speaking) window.speechSynthesis.cancel();
+      ui.setStatusText("Ending session...");
+
+      try {
+        await api.endSessionReq(state.sessionId, state.patientId);
+        state.setSessionId(null);
+        window.location.href = "/";
+      } catch (err) {
+        console.error("Failed to end session:", err);
+        state.setSessionId(null);
+        window.location.href = "/";
+      }
+    };
+  }
+}
+
+// Bootstrap application
+api.pingHealth().catch(() => console.log("Wakeup ping sent."));
+audio.loadVoices();
+bindEvents();
+window.onload = () => session.initializeSession();

static/js/audio.js

@@ -0,0 +1,218 @@
+import { state } from './state.js';
+import { setStatusText, toggleMicButtonVisuals, addTyping, removeTyping } from './ui.js';
+import { transcribeAudio } from './api.js';
+
+let systemVoices = [];
+let mediaRecorder = null;
+let audioChunks = [];
+
+// Keep a global reference so Chrome doesn't garbage-collect the utterance mid-speech
+let currentUtterance = null;
+
+export function loadVoices() {
+  const voiceSelect = document.getElementById("voiceSelect");
+  if (!voiceSelect) return;
+  
+  systemVoices = window.speechSynthesis.getVoices();
+  voiceSelect.innerHTML = "";
+
+  // Add a reliable default option that doesn't force a specific voice object
+  const defaultOption = document.createElement("option");
+  defaultOption.value = "";
+  defaultOption.textContent = "Default OS Voice (Reliable)";
+  defaultOption.selected = true;
+  voiceSelect.appendChild(defaultOption);
+
+  const englishVoices = systemVoices.filter(v => v.lang.includes('en'));
+
+  englishVoices.forEach(voice => {
+    const option = document.createElement("option");
+    option.value = voice.name;
+    option.textContent = `${voice.name} (${voice.localService ? 'Local' : 'Network'})`;
+    voiceSelect.appendChild(option);
+  });
+
+  const googleUSEnglish = englishVoices.find(v => v.name === "Google US English");
+  if (googleUSEnglish) {
+    voiceSelect.value = googleUSEnglish.name;
+  }
+}
+
+if (window.speechSynthesis.onvoiceschanged !== undefined) {
+  window.speechSynthesis.onvoiceschanged = loadVoices;
+}
+
+/**
+ * Speak text using the browser's SpeechSynthesis API.
+ * Only speaks if audio output is enabled (state.isAudioOutputEnabled).
+ * This is independent of input mode (text vs voice).
+ */
+export function speak(text) {
+  return new Promise((resolve) => {
+    if (!state.isAudioOutputEnabled) {
+      resolve();
+      return;
+    }
+
+    // Ensure voices are loaded
+    if (systemVoices.length === 0) {
+      systemVoices = window.speechSynthesis.getVoices();
+    }
+
+    // Strip markdown symbols before speaking
+    const cleanText = text.replace(/[*_~`#]/g, '').replace(/\[.*?\]/g, '').replace(/\(.*?\)/g, '').trim();
+    if (!cleanText) {
+      console.warn("TTS Skipped: Text was empty after stripping markdown");
+      resolve();
+      return;
+    }
+
+    setStatusText("Assistant is responding...");
+
+    // No cancel(), no setTimeout. Just create and speak.
+    currentUtterance = new SpeechSynthesisUtterance(cleanText);
+
+    // Select voice
+    const voiceSelect = document.getElementById("voiceSelect");
+    const selectedVoiceName = voiceSelect ? voiceSelect.value : "";
+    
+    // Only set the voice if the user explicitly selected one of the specific named voices.
+    // Otherwise, leave it undefined so the browser uses its ultra-reliable native default.
+    if (selectedVoiceName !== "") {
+      const preferredVoice = systemVoices.find(v => v.name === selectedVoiceName);
+      if (preferredVoice) {
+        currentUtterance.voice = preferredVoice;
+      }
+    }
+    currentUtterance.rate = 1.0;
+    currentUtterance.pitch = 1.0;
+    currentUtterance.volume = 1.0;
+
+    currentUtterance.onstart = () => {
+      state.isAISpeaking = true;
+      setStatusText("Assistant is speaking... (Audio Started)");
+    };
+
+    currentUtterance.onend = () => {
+      state.isAISpeaking = false;
+      setStatusText(state.isVoiceMode ? "Hold Space to speak" : "Type your message");
+      resolve();
+    };
+
+    currentUtterance.onerror = (e) => {
+      console.error("TTS error:", e.error);
+      state.isAISpeaking = false;
+      setStatusText(`TTS Error: ${e.error}`);
+      setTimeout(() => {
+        setStatusText(state.isVoiceMode ? "Hold Space to speak" : "Type your message");
+      }, 3000);
+      resolve();
+    };
+
+    setStatusText("Attempting to speak...");
+    
+    // Fallback timeout in case onstart/onend never fire
+    setTimeout(() => {
+      if (state.isAISpeaking) {
+         // It started, but maybe stuck?
+      } else {
+         setStatusText("Audio failed to start (Timeout)");
+         setTimeout(() => {
+            setStatusText(state.isVoiceMode ? "Hold Space to speak" : "Type your message");
+         }, 3000);
+         resolve();
+      }
+    }, 4000);
+
+    window.speechSynthesis.speak(currentUtterance);
+  });
+}
+
+/**
+ * Starts recording the user's voice via MediaRecorder.
+ * Called only via spacebar hold.
+ */
+export async function startRecording(onTranscriptionDone) {
+  if (state.isRecordingPending || state.isListening) return;
+  state.isRecordingPending = true;
+
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    
+    // If user released space before mic permission was granted
+    if (!state.isRecordingPending) {
+      stream.getTracks().forEach(track => track.stop());
+      return;
+    }
+
+    mediaRecorder = new MediaRecorder(stream);
+    audioChunks = [];
+
+    mediaRecorder.ondataavailable = (event) => {
+      if (event.data.size > 0) {
+        audioChunks.push(event.data);
+      }
+    };
+
+    mediaRecorder.onstop = async () => {
+      // Stop all mic tracks immediately
+      stream.getTracks().forEach(track => track.stop());
+
+      const audioBlob = new Blob(audioChunks, { type: mediaRecorder.mimeType || 'audio/webm' });
+      
+      if (audioBlob.size < 100) {
+        setStatusText("Recording was too short. Hold Space longer.");
+        return;
+      }
+
+      setStatusText("Transcribing your voice...");
+      addTyping(true, "Transcribing...");
+
+      try {
+        const data = await transcribeAudio(audioBlob);
+        removeTyping();
+        
+        if (data.text && data.text.trim() !== "") {
+          onTranscriptionDone(data.text, data.emotion);
+        } else {
+          setStatusText("I didn't catch that. Try again?");
+        }
+      } catch (e) {
+        removeTyping();
+        console.error("Transcription failed", e);
+        setStatusText("Hold Space to try again");
+      }
+    };
+
+    mediaRecorder.start();
+    state.isListening = true;
+    state.isRecordingPending = false;
+    toggleMicButtonVisuals(true);
+    setStatusText("Listening... (release Space to stop)");
+  } catch (err) {
+    console.error("Microphone access denied", err);
+    setStatusText("Microphone access denied");
+    state.isRecordingPending = false;
+  }
+}
+
+export function stopRecording() {
+  state.isRecordingPending = false;
+  
+  if (mediaRecorder && state.isListening) {
+    try {
+      if (mediaRecorder.state === 'recording') {
+        mediaRecorder.stop();
+      }
+    } catch(e) {
+      console.error("Error stopping media recorder", e);
+    }
+    
+    state.isListening = false;
+    toggleMicButtonVisuals(false);
+    setStatusText("Processing...");
+  } else {
+    state.isListening = false;
+    toggleMicButtonVisuals(false);
+  }
+}

static/js/auth.js

@@ -0,0 +1,135 @@
+import { BACKEND_URL } from './api.js';
+
+export async function login(username, password) {
+  const res = await fetch(`${BACKEND_URL}/api/auth/login`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ username, password })
+  });
+
+  const data = await res.json();
+  if (!res.ok) {
+    throw new Error(data.detail || "Login failed");
+  }
+
+  localStorage.setItem('serinity_token', data.access_token);
+  return data;
+}
+
+export async function requestSignupOtp(email, username) {
+  const res = await fetch(`${BACKEND_URL}/api/auth/signup/request-otp`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email, username })
+  });
+  
+  const data = await res.json();
+  if (!res.ok) {
+    if (Array.isArray(data.detail)) {
+      throw new Error(data.detail[0].msg || "Validation error");
+    }
+    throw new Error(data.detail || "Failed to request OTP");
+  }
+  return data;
+}
+
+export async function signup(payload) {
+  const res = await fetch(`${BACKEND_URL}/api/auth/signup`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload)
+  });
+
+  const data = await res.json();
+  if (!res.ok) {
+    if (Array.isArray(data.detail)) {
+      throw new Error(data.detail[0].msg || "Validation error");
+    }
+    throw new Error(data.detail || "Signup failed");
+  }
+
+  localStorage.setItem('serinity_token', data.access_token);
+  return data;
+}
+
+export async function forgotPassword(email) {
+  const res = await fetch(`${BACKEND_URL}/api/auth/forgot-password`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email })
+  });
+
+  const data = await res.json();
+  if (!res.ok) {
+    // Pydantic validation errors return detail as an array
+    if (res.status === 422 || Array.isArray(data.detail)) {
+      throw new Error("Enter a valid email address.");
+    }
+    throw new Error(data.detail || "Failed to request OTP");
+  }
+  return data;
+}
+
+export async function verifyOtp(email, otp_code) {
+  const res = await fetch(`${BACKEND_URL}/api/auth/verify-otp`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email, otp_code })
+  });
+  const data = await res.json();
+  if (!res.ok) throw new Error(data.detail || "Invalid OTP");
+  return data;
+}
+
+export async function resetPassword(email, otp_code, new_password) {
+  const res = await fetch(`${BACKEND_URL}/api/auth/reset-password`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email, otp_code, new_password })
+  });
+
+  const data = await res.json();
+  if (!res.ok) {
+    if (Array.isArray(data.detail)) {
+      throw new Error(data.detail[0].msg || "Validation error");
+    }
+    throw new Error(data.detail || "Failed to reset password");
+  }
+  return data;
+}
+export async function requestDeleteAccountOtp() {
+  const token = localStorage.getItem('serinity_token');
+  const res = await fetch(`${BACKEND_URL}/api/auth/delete-account/request-otp`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer ${token}`
+    }
+  });
+  const data = await res.json();
+  if (!res.ok) throw new Error(data.detail || "Failed to request OTP");
+  return data;
+}
+
+export async function verifyDeleteAccount(otp_code) {
+  const token = localStorage.getItem('serinity_token');
+  const res = await fetch(`${BACKEND_URL}/api/auth/delete-account/verify`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer ${token}`
+    },
+    body: JSON.stringify({ otp_code })
+  });
+  const data = await res.json();
+  if (!res.ok) throw new Error(data.detail || "Failed to delete account");
+  return data;
+}
+
+export function logout() {
+  localStorage.removeItem('serinity_token');
+}
+
+export function isAuthenticated() {
+  return !!localStorage.getItem('serinity_token');
+}

static/js/profiles.js

@@ -0,0 +1,99 @@
+import { state } from './state.js';
+import * as api from './api.js';
+import * as ui from './ui.js';
+
+export async function fetchPatients() {
+  try {
+    const patients = await api.fetchPatientsList();
+    if (patients.length > 0) {
+      state.patientId = patients[0].patient_id;
+      await showDashboard(state.patientId);
+    } else {
+      // This should never happen now since the backend auto-creates a profile, but just in case:
+      ui.showAlert("Profile Error", "No patient profile found. Please contact support.");
+    }
+  } catch (err) {
+    console.error("Failed to load patient profile:", err);
+  }
+}
+
+/**
+ * Fetches patient dashboard data (past sessions, domains, etc.) and renders the dashboard screen.
+ * 
+ * @param {string} pId - The patient ID to load dashboard for.
+ */
+export async function showDashboard(pId) {
+  try {
+    const data = await api.loadDashboard(pId);
+    
+    document.getElementById("dashboardPatientName").textContent = data.patient.name;
+    document.getElementById("dashboardPatientAge").textContent = data.patient.age ? `Age: ${data.patient.age}` : "Age: --";
+    
+    const list = document.getElementById("dashboardSessionsList");
+    list.innerHTML = "";
+
+    const dashStartBtn = document.getElementById("dashboardStartBtn");
+    dashStartBtn.textContent = "NEW SESSION";
+    
+    if (data.sessions && data.sessions.length > 0) {
+      data.sessions.forEach(sess => {
+        const d = new Date(sess.created_at).toLocaleString();
+        const summary = sess.rolling_summary || "No summary available.";
+        list.innerHTML += `
+          <details class="group p-4 border border-ink bg-paper shadow-sm mb-3">
+            <summary class="text-xs text-moss font-utility tracking-widest uppercase cursor-pointer select-none group-open:mb-2 flex justify-between">
+              ${d}
+              <span class="text-ink transition-transform group-open:rotate-180">▼</span>
+            </summary>
+            <div class="text-sm text-ink whitespace-pre-wrap mt-2 pl-2 border-l-2 border-clay">${summary}</div>
+          </details>
+        `;
+      });
+    } else {
+      list.innerHTML = `<p class="text-clay text-sm italic">No previous sessions found.</p>`;
+    }
+    
+    const domainsDiv = document.getElementById("dashboardDomains");
+    if (domainsDiv && data.profile) {
+      domainsDiv.innerHTML = `<h3 class="font-utility uppercase text-clay text-sm border-b border-ink/30 pb-2">Clinical Profile</h3>`;
+      const renderDomain = (title, items) => {
+        if (!items || items.length === 0) return;
+        const html = `
+          <details class="group mt-4 border-b border-clay/30 pb-2 cursor-pointer">
+            <summary class="dashboard-label mb-1 select-none flex justify-between">
+              ${title}
+              <span class="text-ink text-xs transition-transform group-open:rotate-180">▼</span>
+            </summary>
+            <ul class="list-disc pl-5 text-sm dashboard-value space-y-1 mt-2 text-ink">
+              ${items.map(i => `<li>${i}</li>`).join('')}
+            </ul>
+          </details>
+        `;
+        domainsDiv.innerHTML += html;
+      };
+      
+      renderDomain("Emotional Themes", data.profile.emotional_themes);
+      renderDomain("Thinking Patterns", data.profile.thinking_patterns);
+      renderDomain("Stressors", data.profile.stressors);
+      renderDomain("Protective Factors", data.profile.protective_factors);
+      
+      if (data.profile.risk_assessment) {
+        domainsDiv.innerHTML += `
+          <details class="group mt-4 border-b border-clay/30 pb-2 cursor-pointer">
+            <summary class="dashboard-label mb-1 select-none flex justify-between">
+              Risk Assessment
+              <span class="text-ink text-xs transition-transform group-open:rotate-180">▼</span>
+            </summary>
+            <p class="text-sm dashboard-value mt-2 text-ink">${data.profile.risk_assessment}</p>
+          </details>
+        `;
+      }
+    }
+    
+    ui.switchScreen("dashboardScreen");
+    
+  } catch (err) {
+    console.error("Dashboard error", err);
+    alert("Could not load patient dashboard.");
+  }
+}

static/js/session.js

@@ -0,0 +1,314 @@
+import { state } from './state.js';
+import * as api from './api.js';
+import * as ui from './ui.js';
+import * as audio from './audio.js';
+import * as profiles from './profiles.js';
+import * as auth from './auth.js';
+
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+/**
+ * Processes the assistant's split message response.
+ * Displays and speaks the empathetic acknowledgment first,
+ * then pauses before delivering the follow-up clinical question.
+ * 
+ * @param {string} message - The raw message containing the && separator.
+ */
+export async function handleAssistantResponses(message) {
+  if (!message) return;
+
+  const parts = message.split("&&").map(p => p.trim()).filter(Boolean);
+
+  ui.addMessage(parts[0], "assistant");
+  await audio.speak(parts[0]);
+
+  if (parts[1]) {
+    ui.setStatusText("Assistant is thinking...");
+    await sleep(500);
+
+    ui.addTyping(false, "Thinking...");
+    await sleep(500);
+    ui.removeTyping();
+
+    ui.addMessage(parts[1], "assistant");
+    await audio.speak(parts[1]);
+  }
+}
+
+/**
+ * Ends the current active session, clears intervals, and returns the user to the dashboard.
+ */
+export async function endSession() {
+  if (state.sessionInterval) {
+    clearInterval(state.sessionInterval);
+    state.sessionInterval = null;
+  }
+  state.setSessionId(null);
+  state.setPatientId(null);
+  ui.switchScreen("dashboard");
+}
+
+/**
+ * Sends a text message to the backend and handles the response.
+ * 
+ * @param {string} message - The text message to send.
+ * @param {string|null} emotion - Optional emotion tag.
+ */
+/**
+ * Submits a new text message to the active session and waits for the AI response.
+ * @param {string} text - The user's input message.
+ * @returns {Promise<boolean>} True if successful, false otherwise.
+ */
+export async function recordMessage(text) {
+  return await sendTextMessage(text);
+}
+
+export async function sendTextMessage(message, emotion = null) {
+  ui.addMessage(message, "user");
+  ui.addTyping(false, "Analyzing...");
+
+  try {
+    const data = await api.sendChatText(state.sessionId, state.patientId, message, emotion);
+    ui.removeTyping();
+    
+    if (data.session_id && data.session_id !== state.sessionId) {
+      state.setSessionId(data.session_id);
+    }
+    
+    await handleAssistantResponses(data.assistant_message);
+
+    // Only reset status text if audio is NOT enabled, 
+    // otherwise audio.js will handle resetting it when speech finishes.
+    if (!state.isAudioOutputEnabled) {
+      ui.setStatusText(state.isVoiceMode ? "Hold Space to speak" : "Type your message");
+    }
+
+    if (data.risk_flagged) {
+      ui.showSafetyBanner();
+    } else {
+      ui.hideSafetyBanner();
+    }
+  } catch (err) {
+    ui.removeTyping();
+    if (err.message && (err.message.includes("Tokens Exhausted") || err.message.includes("429"))) {
+      ui.showAlert("Tokens Exhausted", "Your LLM provider tokens have been exhausted. Please wait or upgrade your plan.");
+    } else {
+      ui.addMessage("I apologize, but I'm having trouble connecting right now.", "assistant");
+    }
+    console.error("Error:", err);
+  }
+}
+
+/**
+ * Starts a new session for the given patient ID.
+ * Transitions UI to main app and starts session timers.
+ * 
+ * @param {string} pId - The patient ID to start the session for.
+ */
+/**
+ * Starts a new chat session with the AI for the currently selected patient.
+ * Emits an initial context message to the backend.
+ */
+export async function startActualSession(pId) {
+  try {
+    const data = await api.startSessionReq(pId);
+    state.setSessionId(data.session_id);
+    state.setPatientId(data.patient_id);
+
+    ui.switchScreen("mainApp");
+    document.getElementById("chat").innerHTML = "";
+
+    state.sessionStartTime = Date.now();
+    state.exchangeCount = 0;
+    ui.updateSessionStats();
+    if (state.sessionInterval) clearInterval(state.sessionInterval);
+    state.sessionInterval = setInterval(ui.updateSessionStats, 60000);
+
+    handleAssistantResponses(data.assistant_message);
+  } catch (e) {
+    console.error("Failed to start session:", e);
+    alert("Failed to start session. Please try again.");
+    location.reload();
+  }
+}
+
+/**
+ * Resumes an existing active session.
+ * 
+ * @param {string} sessionId - The ID of the session to resume.
+ */
+export async function continueActualSession(sessionId) {
+  try {
+    state.setSessionId(sessionId);
+    ui.switchScreen("mainApp");
+    
+    document.getElementById("chat").innerHTML = "";
+    
+    const data = await api.getSessionMessages(sessionId);
+    if (data.messages) {
+      data.messages.forEach(msg => {
+        if (msg.role !== "system") {
+          if (msg.role === 'assistant') {
+            const parts = msg.content.split("&&").map(p => p.trim()).filter(Boolean);
+            parts.forEach(part => ui.addMessage(part, 'assistant'));
+          } else {
+            ui.addMessage(msg.content, msg.role);
+          }
+        }
+      });
+    }
+
+    state.sessionStartTime = Date.now(); 
+    state.exchangeCount = Math.floor((data.messages || []).length / 2);
+    ui.updateSessionStats();
+    if (state.sessionInterval) clearInterval(state.sessionInterval);
+    state.sessionInterval = setInterval(ui.updateSessionStats, 60000);
+  } catch (e) {
+    console.error("Failed to continue session:", e);
+    alert("Failed to continue session. Please try again.");
+    location.reload();
+  }
+}
+
+/**
+ * Pings the backend to check health and initializes routing based on URL path.
+ * Retries with exponential backoff if backend is not ready.
+ * 
+ * @param {number} retryCount - Number of initialization retries so far.
+ */
+export async function initializeSession(retryCount = 0) {
+  const startButton = document.getElementById("startButton");
+  const wakeupText = document.getElementById("wakeupText");
+  
+  if (retryCount === 0) {
+    if (wakeupText) wakeupText.textContent = "Waking up backend (this may take up to a minute)...";
+    if (startButton) {
+      startButton.disabled = false;
+      startButton.textContent = "Start Consultation";
+    }
+  }
+  try {
+    await api.pingHealth();
+    document.getElementById("loadingDots").style.display = "none";
+    if (wakeupText) wakeupText.style.display = "none";
+
+    if (startButton) {
+      startButton.disabled = false;
+      startButton.textContent = "Start Consultation";
+    }
+
+    // Handle hash routing from OAuth or direct links
+    if (window.location.hash) {
+      const hash = window.location.hash.substring(1);
+      let newPath = "/";
+      if (hash === "dashboardScreen") newPath = "/dashboard";
+      else if (hash === "mainApp") newPath = "/session";
+      
+      if (newPath !== "/") {
+        window.history.replaceState(null, "", newPath);
+      }
+    }
+
+    // Handle deep linking / routing on load
+    const path = window.location.pathname;
+    if (path === "/dashboard") {
+      // Always re-fetch on refresh — state.patientId is in-memory and lost on reload
+      await profiles.fetchPatients();
+    } else if (path === "/session") {
+      if (!state.sessionId) {
+        window.location.href = "/";
+      } else {
+        ui.switchScreen("mainApp", false);
+      }
+    } else {
+      // Allow user to click the start button
+    }
+  } catch (error) {
+    console.error(`Backend not ready (attempt ${retryCount + 1}):`, error);
+    if (retryCount < 15) {
+      const delay = Math.min(2000 * Math.pow(1.3, retryCount), 30000);
+      setTimeout(() => initializeSession(retryCount + 1), delay);
+    } else {
+      document.getElementById("loadingDots").style.display = "none";
+      if (startButton) {
+        startButton.disabled = false;
+        startButton.textContent = "Retry Connection";
+      }
+    }
+  }
+}
+
+/**
+ * Renews the browser's TTS user-activation token synchronously.
+ * Must be called directly inside an onclick or keydown/keyup handler.
+ */
+export function primeTTS() {
+  if (state.isAudioOutputEnabled && window.speechSynthesis) {
+    const primer = new SpeechSynthesisUtterance(' ');
+    primer.volume = 0;
+    primer.rate = 10;
+    window.speechSynthesis.speak(primer);
+  }
+}
+
+/**
+ * Toggle audio output on/off and update the button visuals.
+ * 
+ * @param {boolean} enabled - Whether audio should be enabled.
+ */
+export function setAudioOutput(enabled) {
+  state.isAudioOutputEnabled = enabled;
+  
+  const mobileToggle = document.getElementById("audioOutputToggleMobile");
+  const track = document.getElementById("audioToggleTrack");
+  const dot = document.getElementById("audioToggleDot");
+  const iconMobile = document.getElementById("audioToggleIconMobile");
+  
+  const desktopToggle = document.getElementById("audioOutputToggleDesktop");
+  const labelDesktop = document.getElementById("audioToggleLabelDesktop");
+  
+  if (mobileToggle && mobileToggle.checked !== enabled) {
+    mobileToggle.checked = enabled;
+  }
+  
+  if (enabled) {
+    // Prime the TTS engine with a silent utterance linked to this click gesture.
+    if (window.speechSynthesis) {
+      window.speechSynthesis.getVoices();
+      const primer = new SpeechSynthesisUtterance(' ');
+      primer.volume = 0;
+      primer.rate = 10;
+      window.speechSynthesis.speak(primer);
+    }
+    
+    // Update mobile UI
+    if (track) { track.classList.remove("bg-ink/30"); track.classList.add("bg-moss"); }
+    if (dot) { dot.classList.add("translate-x-4"); }
+    if (iconMobile) { iconMobile.classList.remove("text-ink/50"); iconMobile.classList.add("text-moss"); }
+    
+    // Update desktop UI
+    if (desktopToggle) {
+      desktopToggle.classList.add("bg-moss", "border-moss", "text-paper");
+      desktopToggle.classList.remove("text-ink", "border-ink");
+    }
+    if (labelDesktop) labelDesktop.textContent = "Audio On";
+    
+  } else {
+    if (window.speechSynthesis && window.speechSynthesis.speaking) {
+      window.speechSynthesis.cancel();
+    }
+    state.isAISpeaking = false;
+    
+    // Update mobile UI
+    if (track) { track.classList.remove("bg-moss"); track.classList.add("bg-ink/30"); }
+    if (dot) { dot.classList.remove("translate-x-4"); }
+    if (iconMobile) { iconMobile.classList.remove("text-moss"); iconMobile.classList.add("text-ink/50"); }
+    
+    // Update desktop UI
+    if (desktopToggle) {
+      desktopToggle.classList.remove("bg-moss", "border-moss", "text-paper");
+      desktopToggle.classList.add("text-ink", "border-ink");
+    }
+    if (labelDesktop) labelDesktop.textContent = "Audio Off";
+  }
+}

static/js/state.js

@@ -0,0 +1,30 @@
+export const state = {
+  sessionId: sessionStorage.getItem("serinity_session_id") || null,
+  patientId: localStorage.getItem("serinity_patient_id") || null,
+  isListening: false,
+  isRecordingPending: false,
+  isVoiceMode: false,
+  isAudioOutputEnabled: false,
+  isAISpeaking: false,
+  exchangeCount: 0,
+  sessionStartTime: null,
+  sessionInterval: null,
+  
+  setPatientId(id) {
+    this.patientId = id;
+    if (id) {
+      localStorage.setItem("serinity_patient_id", id);
+    } else {
+      localStorage.removeItem("serinity_patient_id");
+    }
+  },
+  
+  setSessionId(id) {
+    this.sessionId = id;
+    if (id) {
+      sessionStorage.setItem("serinity_session_id", id);
+    } else {
+      sessionStorage.removeItem("serinity_session_id");
+    }
+  }
+};

static/js/ui.js

@@ -0,0 +1,242 @@
+import { state } from './state.js';
+
+// Cache DOM elements that exist on load
+const uiElements = {
+  chat: document.getElementById("chat"),
+  chatWrapper: document.getElementById("chatWrapper"),
+  statusText: document.getElementById("status"),
+  micBtn: document.getElementById("micBtn"),
+  sessionStats: document.getElementById("sessionStats"),
+  voiceModeBtn: document.getElementById("voiceModeBtn"),
+  textModeBtn: document.getElementById("textModeBtn"),
+  voiceInput: document.getElementById("voiceInput"),
+  textInput: document.getElementById("textInput"),
+  chatInput: document.getElementById("chatInput")
+};
+
+let typingNode = null;
+
+const screens = ["loadingScreen", "authScreen", "dashboardScreen", "mainApp"];
+
+export function getPathForScreen(screen) {
+  const map = {
+    "loadingScreen": "/",
+    "authScreen": "/login",
+    "dashboardScreen": "/dashboard",
+    "mainApp": "/session"
+  };
+  return map[screen] || "/";
+}
+
+export function switchScreen(targetScreen, pushToHistory = true) {
+  window.currentScreen = targetScreen;
+  screens.forEach(s => {
+    const el = document.getElementById(s);
+    if (el) {
+      if (s === targetScreen) {
+        if (s === 'mainApp' || s === 'dashboardScreen') el.classList.remove("hidden");
+        el.style.display = "flex";
+      } else {
+        el.style.display = "none";
+      }
+    }
+  });
+
+  if (pushToHistory) {
+    history.pushState({ screen: targetScreen }, "", getPathForScreen(targetScreen));
+  }
+}
+
+export function scrollToBottom() {
+  setTimeout(() => {
+    if (uiElements.chatWrapper) {
+      uiElements.chatWrapper.scrollTop = uiElements.chatWrapper.scrollHeight;
+    }
+  }, 100);
+}
+
+export function updateSessionStats() {
+  if (!state.sessionStartTime) return;
+  if (!uiElements.sessionStats) return;
+  const elapsed = Math.floor((Date.now() - state.sessionStartTime) / 60000);
+  uiElements.sessionStats.textContent = `Session · ${elapsed} min · ${state.exchangeCount} exchanges`;
+}
+
+export function addMessage(text, role) {
+  const messageDiv = document.createElement("div");
+  messageDiv.className = `flex ${role === 'user' ? 'justify-end' : 'justify-start'} fade-in w-full mb-6`;
+
+  const contentDiv = document.createElement("div");
+  
+  if (role === 'assistant') {
+    const label = document.createElement("span");
+    label.className = "assistant-label";
+    label.textContent = "ASSISTANT ·";
+    contentDiv.appendChild(label);
+    contentDiv.className = "pl-4 border-l-2 border-moss max-w-[85%] sm:max-w-[75%]";
+  } else {
+    const label = document.createElement("span");
+    label.className = "assistant-label text-right block";
+    const dashName = document.getElementById("dashboardPatientName");
+    const userName = dashName ? dashName.innerText : "USER";
+    label.textContent = "· " + userName.toUpperCase();
+    contentDiv.appendChild(label);
+    contentDiv.className = "pr-4 border-r-2 border-clay text-right max-w-[85%] sm:max-w-[75%]";
+  }
+
+  const textNode = document.createElement("p");
+  textNode.className = "text-ink whitespace-pre-wrap";
+  textNode.textContent = text;
+  contentDiv.appendChild(textNode);
+  
+  messageDiv.appendChild(contentDiv);
+  if (uiElements.chat) {
+    uiElements.chat.appendChild(messageDiv);
+    scrollToBottom();
+  }
+  
+  if (role === 'user') {
+    state.exchangeCount++;
+    updateSessionStats();
+  }
+}
+
+export function addTyping(isUser = false, customText = null) {
+  if (typingNode) return;
+
+  const messageDiv = document.createElement("div");
+  messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'} fade-in w-full mb-6`;
+
+  const contentDiv = document.createElement("div");
+  
+  if (!isUser) {
+    const label = document.createElement("span");
+    label.className = "assistant-label";
+    label.textContent = "ASSISTANT ·";
+    contentDiv.appendChild(label);
+    contentDiv.className = "pl-4 border-l-2 border-moss max-w-[85%] sm:max-w-[75%]";
+  } else {
+    const label = document.createElement("span");
+    label.className = "assistant-label text-right block";
+    const dashName = document.getElementById("dashboardPatientName");
+    const userName = dashName ? dashName.innerText : "USER";
+    label.textContent = "· " + userName.toUpperCase();
+    contentDiv.appendChild(label);
+    contentDiv.className = "pr-4 border-r-2 border-clay text-right max-w-[85%] sm:max-w-[75%]";
+  }
+
+  if (customText) {
+    const textNode = document.createElement("p");
+    textNode.className = "text-moss text-sm italic font-utility animate-pulse";
+    textNode.textContent = customText;
+    contentDiv.appendChild(textNode);
+  } else {
+    const indicator = document.createElement("div");
+    indicator.className = "typing-indicator flex gap-1 mt-2" + (isUser ? " justify-end" : "");
+    indicator.innerHTML = `<span></span><span></span><span></span>`;
+    contentDiv.appendChild(indicator);
+  }
+  
+  messageDiv.appendChild(contentDiv);
+  
+  typingNode = messageDiv;
+  if (uiElements.chat) {
+    uiElements.chat.appendChild(messageDiv);
+    scrollToBottom();
+  }
+}
+
+export function removeTyping() {
+  if (!typingNode) return;
+  typingNode.remove();
+  typingNode = null;
+}
+
+export function setStatusText(text) {
+  if (uiElements.statusText) {
+    uiElements.statusText.textContent = text;
+  }
+}
+
+export function toggleMicButtonVisuals(isRecording) {
+  if (!uiElements.micBtn) return;
+  if (isRecording) {
+    uiElements.micBtn.classList.add("bg-moss", "border-moss", "text-paper");
+  } else {
+    uiElements.micBtn.classList.remove("bg-moss", "border-moss", "text-paper");
+  }
+}
+
+export function showSafetyBanner() {
+  if (!document.getElementById("safetyBanner")) {
+    const banner = document.createElement("div");
+    banner.id = "safetyBanner";
+    banner.className = "bg-signal text-paper p-4 shadow-md z-50 fixed top-0 left-0 right-0 fade-in";
+    banner.innerHTML = `
+      <div class="max-w-5xl mx-auto flex w-full justify-between items-start">
+        <div>
+          <h3 class="font-utility uppercase tracking-widest text-sm mb-1 font-bold">Emergency Support</h3>
+          <p class="text-sm">You are not alone. Free, confidential support is available right now.</p>
+          <ul class="list-none text-sm font-utility space-y-1 mt-2">
+            <li>iCall (TISS): 9152987821</li>
+            <li>Kiran: 1800-599-0019</li>
+            <li>Vandrevala: 1860-2662-345</li>
+          </ul>
+        </div>
+        <button onclick="document.getElementById('safetyBanner').remove()" class="text-paper hover:opacity-70 text-2xl font-bold p-2 cursor-pointer leading-none">&times;</button>
+      </div>
+    `;
+    document.body.appendChild(banner);
+  }
+}
+
+export function hideSafetyBanner() {
+  const banner = document.getElementById("safetyBanner");
+  if (banner) {
+    banner.remove();
+  }
+}
+
+export function showConfirm(title, text, callback) {
+  const confirmationModal = document.getElementById("confirmationModal");
+  const confirmModalTitle = document.getElementById("confirmModalTitle");
+  const confirmModalText = document.getElementById("confirmModalText");
+  const confirmModalCancelBtn = document.getElementById("confirmModalCancelBtn");
+  const confirmModalConfirmBtn = document.getElementById("confirmModalConfirmBtn");
+
+  confirmModalTitle.textContent = title;
+  confirmModalText.textContent = text;
+  
+  confirmModalCancelBtn.onclick = () => {
+    confirmationModal.style.display = "none";
+  };
+  
+  confirmModalConfirmBtn.onclick = () => {
+    confirmationModal.style.display = "none";
+    if (callback) callback();
+  };
+  
+  confirmationModal.style.display = "flex";
+}
+
+export function showAlert(title, text) {
+  const alertModal = document.getElementById("alertModal");
+  if (!alertModal) return alert(text); // Fallback
+
+  document.getElementById("alertModalTitle").textContent = title;
+  document.getElementById("alertModalText").textContent = text;
+  
+  const closeModal = () => {
+    alertModal.style.display = "none";
+  };
+
+  document.getElementById("alertModalOkBtn").onclick = closeModal;
+  
+  alertModal.onclick = (e) => {
+    if (e.target === alertModal) {
+      closeModal();
+    }
+  };
+  
+  alertModal.style.display = "flex";
+}

templates/index.html

@@ -0,0 +1,456 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Serinity - Mental Healthcare</title>
+  <link rel="icon" type="image/svg+xml" href="/static/icons/logo.svg">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="/static/css/style.css">
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            paper: '#F6F3EE',
+            ink: '#262521',
+            moss: '#4B6358',
+            clay: '#9C7A5B',
+            signal: '#B4483C'
+          }
+        }
+      }
+    }
+  </script>
+</head>
+<body class="bg-paper text-ink min-h-screen flex flex-col font-body">
+
+  <!-- Loading Screen -->
+  <div id="loadingScreen" class="fixed inset-0 bg-paper z-50 flex flex-col items-center justify-center transition-opacity duration-500">
+    <h1 class="logo-text">Serinity</h1>
+    <div class="loading-dots" id="loadingDots">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+    <button class="btn-primary mt-8" id="startButton" disabled>
+      Initializing...
+    </button>
+    <p id="wakeupText" class="text-sm text-clay mt-4 text-center max-w-xs mx-auto font-utility">
+      Validating credentials...
+    </p>
+  </div>
+
+  <!-- Auth Screen -->
+  <div id="authScreen" style="display: none;" class="fixed inset-0 bg-paper z-40 flex flex-col items-center justify-center p-4 overflow-y-auto custom-scrollbar">
+    <div class="panel p-8 max-w-md w-full my-auto shadow-sm">
+      
+      <!-- Logo/Branding -->
+      <div class="flex items-center gap-3 mb-8 justify-center">
+        <img src="/static/icons/logo.svg" alt="Serinity Logo" class="w-10 h-10">
+        <h2 class="text-3xl font-display text-ink">Serinity</h2>
+      </div>
+
+      <!-- Login Form -->
+      <div id="loginFormContainer" class="block space-y-5">
+        <div>
+          <label class="block text-xs font-utility text-clay uppercase mb-1">Username / Email *</label>
+          <input type="text" id="loginUsername" placeholder="Username or Email" class="w-full bg-paper border border-ink p-3 text-ink focus:outline-none focus:border-moss transition">
+        </div>
+        <div>
+          <label class="block text-xs font-utility text-clay uppercase mb-1">Password</label>
+          <input type="password" id="loginPassword" class="w-full bg-paper border border-ink p-3 text-ink focus:outline-none focus:border-moss transition" placeholder="Enter password">
+        </div>
+        <div class="flex justify-between items-center text-xs font-utility uppercase tracking-widest mt-2">
+          <button id="showForgotPwdBtn" class="text-clay hover:text-ink transition">Forgot Password?</button>
+        </div>
+        <button id="loginBtn" class="w-full btn-primary py-3 font-utility uppercase tracking-widest text-sm mt-4">
+          Log In
+        </button>
+        <div class="text-center mt-6 border-t border-ink/20 pt-6">
+          <p class="text-xs text-clay font-utility uppercase tracking-widest mb-3">New Patient?</p>
+          <button id="showSignupBtn" class="w-full bg-transparent border border-ink text-ink hover:bg-ink hover:text-paper transition py-3 font-utility uppercase tracking-widest text-sm">
+            Create Account
+          </button>
+        </div>
+      </div>
+
+      <!-- Signup Form -->
+      <div id="signupFormContainer" class="hidden space-y-4">
+        <div>
+          <label class="block text-xs font-utility text-clay uppercase mb-1">Full Name *</label>
+          <input type="text" id="signupName" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss" placeholder="Jane Doe">
+        </div>
+        <div class="grid grid-cols-3 gap-4">
+          <div>
+            <label class="block text-xs font-utility text-clay uppercase mb-1">Username *</label>
+            <input type="text" id="signupUsername" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss">
+          </div>
+          <div>
+            <label class="block text-xs font-utility text-clay uppercase mb-1">Gender *</label>
+            <select id="signupGender" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss">
+              <option value="">Select</option>
+              <option value="Male">Male</option>
+              <option value="Female">Female</option>
+              <option value="Other">Other</option>
+            </select>
+          </div>
+          <div>
+            <label class="block text-xs font-utility text-clay uppercase mb-1">Age</label>
+            <input type="number" id="signupAge" min="5" max="99" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss">
+          </div>
+        </div>
+        <div>
+          <label class="block text-xs font-utility text-clay uppercase mb-1">Email *</label>
+          <input type="email" id="signupEmail" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss" placeholder="jane@example.com">
+        </div>
+        <div>
+          <label class="block text-xs font-utility text-clay uppercase mb-1">Password *</label>
+          <input type="password" id="signupPassword" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss">
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <div class="relative" id="nationalityWrapper">
+            <label class="block text-xs font-utility text-clay uppercase mb-1" title="For cultural context">Nationality *</label>
+            <input type="text" id="signupNationality" autocomplete="off" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss" placeholder="e.g. India">
+            <div id="nationalityDropdown" class="hidden absolute left-0 right-0 top-full mt-1 bg-paper border border-ink z-50 max-h-48 overflow-y-auto shadow-lg">
+              <!-- Populated by JS -->
+            </div>
+          </div>
+          <div>
+            <label class="block text-xs font-utility text-clay uppercase mb-1">Primary Concern *</label>
+            <select id="signupConcern" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss">
+              <option value="">Select...</option>
+              <option value="Anxiety">Anxiety</option>
+              <option value="Depression">Depression</option>
+              <option value="Stress">Stress</option>
+              <option value="Sleep">Sleep Issues</option>
+              <option value="General">General Wellness</option>
+              <option value="Other">Other</option>
+            </select>
+          </div>
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label class="block text-xs font-utility text-clay uppercase mb-1">Emergency Contact Name</label>
+            <input type="text" id="signupEmergencyName" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss" placeholder="John Doe">
+          </div>
+          <div>
+            <label class="block text-xs font-utility text-clay uppercase mb-1">Emergency Contact Phone</label>
+            <input type="tel" id="signupEmergencyPhone" class="w-full bg-paper border border-ink p-2 text-ink focus:outline-none focus:border-moss" placeholder="+1 234 567 8900">
+          </div>
+        </div>
+
+        <button id="signupGetOtpBtn" class="w-full btn-primary py-3 font-utility uppercase tracking-widest text-sm mt-4">
+          Get OTP
+        </button>
+
+        <button id="backToLoginBtn1" class="w-full bg-transparent text-clay hover:text-ink transition py-3 font-utility uppercase tracking-widest text-xs mt-2">
+          &larr; Back to Login
+        </button>
+      </div>
+
+      <!-- Forgot Password Form -->
+      <div id="forgotPwdFormContainer" class="hidden space-y-4">
+        <p class="text-sm text-clay font-body mb-4">Enter your email address and we will send you a 6-digit verification code to reset your password.</p>
+        <div>
+          <label class="block text-xs font-utility text-clay uppercase mb-1">Email Address</label>
+          <input type="email" id="forgotPwdEmail" class="w-full bg-paper border border-ink p-3 text-ink focus:outline-none focus:border-moss transition" placeholder="jane@example.com">
+        </div>
+        <button id="requestOtpBtn" class="w-full btn-primary py-3 font-utility uppercase tracking-widest text-sm mt-2">
+          Send Code
+        </button>
+        <button id="backToLoginBtn2" class="w-full bg-transparent text-clay hover:text-ink transition py-3 font-utility uppercase tracking-widest text-xs mt-2">
+          &larr; Back to Login
+        </button>
+      </div>
+
+      <!-- Reset Password Step 1: OTP Verification -->
+      <div id="otpStepContainer" class="hidden space-y-4">
+        <p class="text-sm text-clay font-body mb-4 text-center">We've sent a 6-digit code to your email.</p>
+        <div>
+          <label class="block text-xs font-utility text-clay uppercase mb-1">6-Digit Code</label>
+          <input type="text" id="resetOtpCode" class="w-full bg-paper border border-ink p-3 text-ink focus:outline-none focus:border-moss text-center tracking-widest font-mono text-lg" placeholder="000000" maxlength="6" inputmode="numeric">
+        </div>
+        <button id="verifyOtpBtn" class="w-full btn-primary py-3 font-utility uppercase tracking-widest text-sm mt-2">
+          Verify Code
+        </button>
+        <button id="backToForgotBtn" class="w-full bg-transparent text-clay hover:text-ink transition py-3 font-utility uppercase tracking-widest text-xs mt-2">
+          &larr; Back
+        </button>
+      </div>
+
+      <!-- Reset Password Step 2: New Password (no back button) -->
+      <div id="newPwdStepContainer" class="hidden space-y-4">
+        <p class="text-sm text-clay font-body mb-4 text-center">OTP verified. Enter your new password below.</p>
+        <div>
+          <label class="block text-xs font-utility text-clay uppercase mb-1">New Password</label>
+          <input type="password" id="resetNewPassword" class="w-full bg-paper border border-ink p-3 text-ink focus:outline-none focus:border-moss" placeholder="Min. 8 characters">
+        </div>
+        <button id="submitResetBtn" class="w-full btn-primary py-3 font-utility uppercase tracking-widest text-sm mt-2">
+          Update Password
+        </button>
+      </div>
+
+      <!-- Signup Step 2: OTP Verification -->
+      <div id="signupOtpStepContainer" class="hidden space-y-4">
+        <p class="text-sm text-clay font-body mb-4 text-center">We've sent a 6-digit code to your email.</p>
+        <div>
+          <label class="block text-xs font-utility text-clay uppercase mb-1">6-Digit Code *</label>
+          <input type="text" id="signupOtpCode" class="w-full bg-paper border border-ink p-3 text-ink focus:outline-none focus:border-moss text-center tracking-widest font-mono text-lg" placeholder="000000" maxlength="6" inputmode="numeric">
+        </div>
+        <button id="signupCompleteBtn" class="w-full btn-primary py-3 font-utility uppercase tracking-widest text-sm mt-2">
+          Complete Signup
+        </button>
+        <button id="backToSignupBtn" class="w-full bg-transparent text-clay hover:text-ink transition py-3 font-utility uppercase tracking-widest text-xs mt-2">
+          &larr; Back to Signup
+        </button>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- Profile Selection Screen Removed -->
+
+  <!-- Patient Dashboard -->
+  <div class="hidden max-w-5xl mx-auto w-full h-screen p-4 flex-col fade-in overflow-hidden" id="dashboardScreen">
+    <div class="bg-paper border border-ink p-6 lg:p-10 flex-1 flex flex-col min-h-0 h-full">
+      
+      <!-- Header -->
+      <div class="flex justify-between items-start border-b border-ink/30 pb-6 mb-6 shrink-0">
+        <div>
+          <h2 class="text-3xl font-display text-ink" id="dashboardPatientName">Patient Name</h2>
+          <p class="text-xs font-utility tracking-widest uppercase text-clay mt-2" id="dashboardPatientAge">Age: --</p>
+        </div>
+          <button class="btn-primary" id="dashboardStartBtn">NEW SESSION</button>
+      </div>
+      
+      <!-- Content -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-10 flex-1 min-h-0 overflow-hidden" id="dashboardContent">
+        <!-- Profile left -->
+        <div class="space-y-6 overflow-y-auto pr-4 custom-scrollbar" id="dashboardDomains">
+          <h3 class="font-utility uppercase text-clay text-sm border-b border-ink/30 pb-2">Clinical Profile</h3>
+          <p class="text-clay text-sm italic">Loading profile data...</p>
+        </div>
+        
+        <!-- Column 2: Session History -->
+        <div class="flex flex-col min-h-0 h-full">
+          <h3 class="font-utility uppercase text-clay text-sm border-b border-ink/30 pb-2 mb-4 shrink-0">Session History</h3>
+          <div id="dashboardSessionsList" class="flex-1 overflow-y-auto pr-4 space-y-4 custom-scrollbar">
+            <p class="text-clay text-sm italic">Loading previous sessions...</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-8 pt-6 border-t border-ink/30 shrink-0 flex flex-wrap justify-between items-center gap-4">
+        <button class="text-xs font-utility tracking-widest text-clay hover:text-ink uppercase transition flex items-center gap-2" id="dashboardLogoutBtn">
+          <span>&larr;</span> LOGOUT
+        </button>
+        <div class="flex gap-4">
+          <button class="text-xs font-utility tracking-widest text-signal border border-signal hover:bg-signal hover:text-paper uppercase transition px-4 py-2 flex items-center gap-2" id="dashboardResetBtn">
+            RESET DATA
+          </button>
+          <button class="text-xs font-utility tracking-widest text-paper bg-signal hover:bg-signal/90 uppercase transition px-4 py-2 flex items-center gap-2" id="dashboardDeleteBtn">
+            DELETE ACCOUNT
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Main App (Hidden Initially) -->
+  <div id="mainApp" style="display: none;" class="flex flex-col h-screen">
+    <!-- Header -->
+    <header class="bg-paper border-b border-ink sticky top-0 z-50 py-2 md:py-3 shadow-sm">
+      <div class="w-full px-3 md:px-12 mx-auto flex items-center justify-between gap-1 md:gap-2">
+        
+        <!-- Left: Logo & Title -->
+        <div class="flex items-center gap-2 md:gap-4 shrink-0 min-w-0">
+          <img src="/static/icons/logo.svg" alt="Serinity Logo" class="w-8 h-8 md:w-10 md:h-10 opacity-90 shrink-0">
+          <div class="flex flex-col justify-center min-w-0">
+            <h1 class="text-xl md:text-3xl font-display text-ink leading-none truncate" id="headerName">Serinity</h1>
+            <p class="text-[10px] md:text-xs font-utility text-clay tracking-widest uppercase mt-0.5 truncate hidden sm:block">Clinical Session</p>
+          </div>
+        </div>
+        
+        <!-- Right: Controls -->
+        <div class="flex items-center gap-2 shrink-0">
+          <span id="sessionStats" class="text-xs font-utility text-moss uppercase hidden lg:block"></span>
+          
+          <select 
+            id="voiceSelect" 
+            class="bg-paper border border-ink text-ink text-xs md:text-sm font-utility px-1 py-1.5 outline-none focus:border-moss w-[70px] sm:w-[140px] md:w-[200px] cursor-pointer hover:bg-ink/5 truncate shrink-0"
+          >
+            <option value="">Voice: Off</option>
+          </select>
+
+          <!-- Mobile Slider Toggle -->
+          <label class="flex sm:hidden items-center cursor-pointer gap-1.5 shrink-0" title="Toggle Audio Response">
+            <div class="relative flex items-center">
+              <input type="checkbox" id="audioOutputToggleMobile" class="sr-only">
+              <div id="audioToggleTrack" class="block bg-ink/30 w-10 h-6 rounded-full transition-colors duration-200"></div>
+              <div id="audioToggleDot" class="dot absolute left-1 top-1 bg-paper w-4 h-4 rounded-full transition-transform duration-200"></div>
+            </div>
+            <svg id="audioToggleIconMobile" class="w-4 h-4 text-ink/50 transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072M17.95 6.05a8 8 0 010 11.9M6.5 8.5H4a1 1 0 00-1 1v5a1 1 0 001 1h2.5l4 4V4.5l-4 4z"></path>
+            </svg>
+          </label>
+
+          <!-- Desktop Button Toggle -->
+          <button 
+            id="audioOutputToggleDesktop" 
+            class="hidden sm:flex border border-ink text-ink hover:bg-moss hover:border-moss hover:text-paper transition-all items-center justify-center px-2 py-1.5 md:px-3 shrink-0 gap-1"
+            title="Toggle Audio Response"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072M17.95 6.05a8 8 0 010 11.9M6.5 8.5H4a1 1 0 00-1 1v5a1 1 0 001 1h2.5l4 4V4.5l-4 4z"></path>
+            </svg>
+            <span class="text-xs font-utility uppercase tracking-wide" id="audioToggleLabelDesktop">Audio Off</span>
+          </button>
+
+          <button 
+            id="endSessionBtn" 
+            class="text-signal hover:text-signal/70 transition-colors border border-signal flex items-center justify-center px-2 py-1.5 md:px-3 shrink-0"
+            title="End Session"
+          >
+            <span class="text-xs md:text-sm font-utility uppercase tracking-wide md:hidden">End</span>
+            <span class="hidden md:inline text-sm font-utility uppercase tracking-wide">End Session</span>
+          </button>
+        </div>
+        
+      </div>
+    </header>
+
+    <!-- Chat Container -->
+    <div class="flex-1 overflow-hidden flex flex-col w-full">
+      <div id="chatWrapper" class="flex-1 overflow-y-auto px-6 md:px-12 py-8 custom-scrollbar">
+        <div id="chat" class="flex flex-col gap-6 max-w-3xl mx-auto pb-8"></div>
+      </div>
+    </div>
+
+    <!-- Fixed Bottom Controls -->
+    <div class="bg-paper border-t border-ink sticky bottom-0">
+      <div class="w-full px-6 md:px-12 mx-auto py-4">
+        <!-- Input Mode Toggle -->
+        <div class="flex justify-center gap-4 mb-4">
+          <button id="textModeBtn" class="btn-toggle active uppercase tracking-wider text-xs">Text</button>
+          <button id="voiceModeBtn" class="btn-toggle uppercase tracking-wider text-xs">Audio</button>
+        </div>
+
+        <!-- Voice Input -->
+        <div id="voiceInput" class="hidden flex-col items-center gap-3">
+          <button 
+            id="micBtn" 
+            class="w-14 h-14 border border-ink rounded-full flex items-center justify-center transition-all duration-200 hover:bg-moss hover:border-moss hover:text-paper group text-ink"
+            style="touch-action: none;"
+          >
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path>
+            </svg>
+          </button>
+          <p id="status" class="text-xs font-utility text-clay uppercase tracking-widest">Hold Space to speak</p>
+        </div>
+
+        <!-- Text Input -->
+        <div id="textInput" class="block">
+          <div class="chat-input-container max-w-3xl mx-auto">
+            <input 
+              type="text" 
+              id="chatInput" 
+              class="chat-input" 
+              placeholder="Enter message..."
+              autocomplete="off"
+            />
+            <button id="sendBtn" class="px-4 py-2 bg-ink text-paper text-sm font-utility uppercase transition-colors hover:bg-moss">
+              Submit
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Confirmation Modal -->
+  <div id="confirmationModal" style="display: none;" class="fixed inset-0 bg-ink/50 backdrop-blur-sm z-[60] flex flex-col items-center justify-center p-4 fade-in">
+    <div class="bg-paper border border-signal p-8 max-w-sm w-full shadow-lg">
+      <h2 class="text-xl font-display text-signal mb-2" id="confirmModalTitle">Are you sure?</h2>
+      <p class="text-clay text-sm mb-6" id="confirmModalText">This action cannot be undone.</p>
+      
+      <div class="flex gap-4">
+        <button id="confirmModalCancelBtn" class="flex-1 bg-transparent border border-ink text-ink hover:bg-ink hover:text-paper transition py-2 font-utility uppercase tracking-widest text-sm">
+          CANCEL
+        </button>
+        <button id="confirmModalConfirmBtn" class="flex-1 bg-signal text-paper hover:bg-signal/80 transition py-2 font-utility uppercase tracking-widest text-sm">
+          CONFIRM
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Continue Session Modal -->
+  <div id="continueSessionModal" style="display: none;" class="fixed inset-0 bg-ink/50 backdrop-blur-sm z-[60] flex flex-col items-center justify-center p-4 fade-in">
+    <div class="bg-paper border border-signal p-8 max-w-sm w-full shadow-lg">
+      <h2 class="text-xl font-display text-signal mb-2">Active Session Found</h2>
+      <p class="text-clay text-sm mb-6">You have a previous session that is still open. Would you like to pick up where you left off, or end it and start a new one?</p>
+      
+      <div class="flex flex-col gap-3">
+        <button id="continueSessionBtn" class="w-full bg-signal text-paper hover:bg-signal/80 transition py-2 font-utility uppercase tracking-widest text-sm">
+          Continue Session
+        </button>
+        <button id="endAndStartNewBtn" class="w-full bg-transparent border border-ink text-ink hover:bg-ink hover:text-paper transition py-2 font-utility uppercase tracking-widest text-sm">
+          End & Start New
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Alert Modal -->
+  <div id="alertModal" style="display: none;" class="fixed inset-0 bg-ink/50 backdrop-blur-sm z-[70] flex flex-col items-center justify-center p-4 fade-in">
+    <div class="bg-paper border border-ink p-8 max-w-sm w-full shadow-lg">
+      <h2 class="text-xl font-display text-ink mb-2" id="alertModalTitle">Notice</h2>
+      <p class="text-clay text-sm mb-6" id="alertModalText"></p>
+      <button id="alertModalOkBtn" class="w-full bg-ink text-paper hover:bg-moss transition py-2 font-utility uppercase tracking-widest text-sm">
+        OK
+      </button>
+    </div>
+  </div>
+
+  <!-- Delete Account Confirmation Modal -->
+  <div id="deleteAccountConfirmModal" style="display: none;" class="fixed inset-0 bg-ink/50 backdrop-blur-sm z-50 flex flex-col items-center justify-center p-4">
+    <div class="panel p-8 max-w-sm w-full shadow-lg">
+      <h2 class="text-xl font-display text-signal mb-2">Delete Account?</h2>
+      <p class="text-clay text-sm mb-6">Are you sure you want to completely delete your account? This action is irreversible and all data will be erased. An OTP will be sent to your email to verify.</p>
+      
+      <div class="flex gap-4">
+        <button id="deleteAccountCancelBtn" class="flex-1 bg-transparent border border-ink text-ink hover:bg-ink hover:text-paper transition py-2 font-utility uppercase tracking-widest text-sm">
+          CANCEL
+        </button>
+        <button id="deleteAccountSendOtpBtn" class="flex-1 bg-signal text-paper hover:bg-signal/80 transition py-2 font-utility uppercase tracking-widest text-sm">
+          SEND OTP
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Delete Account OTP Modal -->
+  <div id="deleteAccountOtpModal" style="display: none;" class="fixed inset-0 bg-ink/50 backdrop-blur-sm z-50 flex flex-col items-center justify-center p-4">
+    <div class="panel p-8 max-w-sm w-full shadow-lg">
+      <div class="flex justify-between items-center mb-6">
+        <h2 class="text-xl font-display text-signal">Delete Account</h2>
+        <button id="closeDeleteOtpModalBtn" class="text-clay hover:text-ink transition">&times;</button>
+      </div>
+      <p class="text-clay text-sm mb-6">An OTP has been sent to your email. Enter it below to permanently delete your account and all data.</p>
+      <div class="space-y-4">
+        <div>
+          <label class="block text-xs font-utility text-clay uppercase mb-1">6-Digit Code</label>
+          <input type="text" id="deleteAccountOtpCode" class="w-full bg-paper border border-ink p-3 text-ink focus:outline-none focus:border-moss text-center tracking-widest font-mono text-lg" placeholder="000000" maxlength="6">
+        </div>
+        <button id="submitDeleteOtpBtn" class="w-full bg-signal text-paper hover:bg-signal/90 transition py-3 font-utility uppercase tracking-widest text-sm mt-2">
+          Verify & Delete
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <script type="module" src="/static/js/app.js"></script>
+</body>
+</html>