Upload 19 files

Requirements.txt

@@ -0,0 +1,32 @@
+# Web & API
+fastapi
+uvicorn
+python-multipart
+
+# Configuration & Security
+pydantic
+pydantic-settings
+python-dotenv
+passlib[bcrypt]
+python-jose[cryptography]
+
+# LLMs & Vector Store
+groq
+openai
+chromadb
+langchain
+langchain-chroma
+langchain-openai
+
+# Audio Processing & Transcription
+librosa
+soundfile
+torchaudio
+transformers
+funasr
+
+# Testing
+pytest
+pytest-asyncio
+pytest-mock
+httpx

api/dependencies.py

@@ -0,0 +1,180 @@
+"""
+Dependency injection module for FastAPI.
+Instantiates all infrastructure components (LLMs, Databases, STT) as singletons
+and wires them into the core domain services (Orchestrator, PatientService).
+Provides getter functions to inject these into FastAPI route handlers.
+"""
+import os
+from dotenv import load_dotenv
+
+from providers.llms.groq_llm_provider import GroqLLMProvider
+from providers.llms.ollama_llm_provider import OllamaLLMProvider
+from providers.llms.fallback_llm_provider import FallbackLLMProvider
+from providers.speech_to_text_provider import SenseVoiceSTTProvider
+from providers.chroma_provider import ChromaVectorStore
+from providers.pinecone_provider import PineconeVectorStore
+from persistence.sqlite_memory_store import SQLiteProfileStore, SQLiteSessionStore
+from persistence.user_store import SQLiteUserStore
+
+# Safety/Risk Signals
+from providers.safety.llm import LLMRiskSignal
+from providers.safety.clinical import ClinicalRiskSignal
+
+# Uncomment if using Cascade
+# from core.ports import SafetySignal
+from providers.safety.bert import BertRiskSignal
+from providers.safety.keyword import KeywordRiskSignal
+from providers.safety.cascade import CascadeRiskSignal
+from fastapi.security import OAuth2PasswordBearer
+from fastapi import Depends, HTTPException, status
+from services.auth_service import decode_access_token
+from services.risk_assessment_service import RiskAssessmentService
+from services.conversation_orchestrator import ConversationOrchestrator
+from services.patient_service import PatientService
+from core.ports import ProfileStore, SessionStore, STTProvider, LLMProvider, VectorStore
+
+load_dotenv()
+
+OLLAMA_HOST          = os.getenv("OLLAMA_HOST", "http://localhost:11434")
+OLLAMA_LLM1_MODEL    = os.getenv("OLLAMA_LLM1_MODEL", "phi4-mini")
+OLLAMA_LLM2_MODEL    = os.getenv("OLLAMA_LLM2_MODEL", "qwen2.5:7b-instruct")
+GROQ_LLM1_MODEL      = os.getenv("GROQ_LLM1_MODEL", "llama-3.1-8b-instant")
+GROQ_LLM2_MODEL           = os.getenv("GROQ_LLM2_MODEL", "llama-3.3-70b-versatile")
+EMBEDDING_MODEL      = os.getenv("EMBEDDING_MODEL", "nomic-embed-text")
+CHROMA_PERSIST_DIR   = os.getenv("CHROMA_PERSIST_DIR", "./chroma_db")
+CHROMA_COLLECTION    = os.getenv("CHROMA_COLLECTION_NAME", "mhcva-knowledge")
+VECTOR_STORE_TYPE    = os.getenv("VECTOR_STORE_TYPE", "chroma").lower()
+PINECONE_API_KEY     = os.getenv("PINECONE_API_KEY", "")
+PINECONE_INDEX_NAME  = os.getenv("PINECONE_INDEX_NAME", "serinity-knowledge")
+MEMORY_DB_PATH       = os.getenv("MEMORY_DB_PATH", "./data/serinity.db")
+WORKING_MEMORY_TURNS = int(os.getenv("WORKING_MEMORY_TURNS", "20"))
+CLOUD_MODE           = os.getenv("CLOUD_MODE", "false").lower() == "true"
+
+_hf_home_raw = os.getenv("HF_HOME", "./models")
+if not os.path.isabs(_hf_home_raw):
+    _hf_home_raw = os.path.join(os.path.dirname(os.path.dirname(os.path.abspath(__file__))), _hf_home_raw)
+os.environ["HF_HOME"] = _hf_home_raw
+os.makedirs(_hf_home_raw, exist_ok=True)
+
+# Instantiate singleton infrastructure
+groq_provider = GroqLLMProvider(model1=GROQ_LLM1_MODEL, model2=GROQ_LLM2_MODEL)
+ollama_provider = OllamaLLMProvider(host=OLLAMA_HOST, model1=OLLAMA_LLM1_MODEL, model2=OLLAMA_LLM2_MODEL)
+
+if CLOUD_MODE:
+    llm_provider = FallbackLLMProvider(providers=[groq_provider])
+    vector_store = PineconeVectorStore(
+        host=OLLAMA_HOST,
+        embedding_model=EMBEDDING_MODEL,
+        index_name=PINECONE_INDEX_NAME,
+        api_key=PINECONE_API_KEY
+    )
+else:
+    llm_provider = FallbackLLMProvider(providers=[ollama_provider])
+    vector_store = ChromaVectorStore(
+        host=OLLAMA_HOST,
+        embedding_model=EMBEDDING_MODEL,
+        persist_dir=CHROMA_PERSIST_DIR,
+        collection_name=CHROMA_COLLECTION
+    )
+profile_store = SQLiteProfileStore(db_path=MEMORY_DB_PATH)
+session_store = SQLiteSessionStore(db_path=MEMORY_DB_PATH, working_memory_turns=WORKING_MEMORY_TURNS)
+user_store = SQLiteUserStore(db_path=MEMORY_DB_PATH)
+
+stt_provider = SenseVoiceSTTProvider()
+
+# Setup DI dependencies for FastAPI routes
+def get_llm_provider() -> FallbackLLMProvider:
+    return llm_provider
+
+def get_vector_store():
+    return vector_store
+
+def get_profile_store() -> SQLiteProfileStore:
+    return profile_store
+
+def get_session_store() -> SQLiteSessionStore:
+    return session_store
+    
+def get_user_store() -> SQLiteUserStore:
+    return user_store
+
+oauth2_scheme = OAuth2PasswordBearer(tokenUrl="api/auth/login")
+
+def get_current_user(token: str = Depends(oauth2_scheme), store: SQLiteUserStore = Depends(get_user_store)):
+    credentials_exception = HTTPException(
+        status_code=status.HTTP_401_UNAUTHORIZED,
+        detail="Could not validate credentials",
+        headers={"WWW-Authenticate": "Bearer"},
+    )
+    payload = decode_access_token(token)
+    if payload is None:
+        raise credentials_exception
+        
+    user_id: str = payload.get("sub")
+    if user_id is None:
+        raise credentials_exception
+        
+    user = store.get_user_by_id(user_id)
+    if user is None:
+        raise credentials_exception
+    return user
+
+# Instantiate Risk Service
+risk_service = RiskAssessmentService([
+    CascadeRiskSignal(
+        filter_signal=KeywordRiskSignal(),
+        verify_signal=BertRiskSignal()
+    ),
+    LLMRiskSignal(),
+    ClinicalRiskSignal()
+])
+
+# Instantiate Domain Services
+conversation_orchestrator = ConversationOrchestrator(
+    llm_provider=llm_provider,
+    vector_store=vector_store,
+    session_store=session_store,
+    profile_store=profile_store,
+    risk_service=risk_service
+)
+
+patient_service = PatientService(
+    profile_store=profile_store,
+    session_store=session_store,
+    llm_provider=llm_provider
+)
+
+# FastAPI dependency injection functions
+def get_orchestrator(
+    llm_provider: LLMProvider = Depends(get_llm_provider),
+    vector_store: VectorStore = Depends(get_vector_store),
+    session_store: SessionStore = Depends(get_session_store),
+    profile_store: ProfileStore = Depends(get_profile_store)
+) -> ConversationOrchestrator:
+    return ConversationOrchestrator(
+        llm_provider=llm_provider,
+        vector_store=vector_store,
+        session_store=session_store,
+        profile_store=profile_store,
+        risk_service=risk_service
+    )
+
+def get_patient_service(
+    profile_store: ProfileStore = Depends(get_profile_store),
+    session_store: SessionStore = Depends(get_session_store),
+    llm_provider: LLMProvider = Depends(get_llm_provider)
+) -> PatientService:
+    return PatientService(
+        profile_store=profile_store,
+        session_store=session_store,
+        llm_provider=llm_provider
+    )
+
+def get_stt_provider() -> STTProvider:
+    return stt_provider
+
+def get_profile_store() -> ProfileStore:
+    return profile_store
+
+def get_session_store() -> SessionStore:
+    return session_store

api/routers/auth.py

@@ -0,0 +1,111 @@
+"""
+Authentication Router
+Handles JWT-based authentication, user registration, and OTP flows (signup, password reset, account deletion).
+"""
+
+from fastapi import APIRouter, HTTPException, status, Depends
+from schemas.auth_schemas import SignupRequest, LoginRequest, TokenResponse, ResetPasswordRequest
+from services.auth_service import get_password_hash, verify_password, create_access_token
+from datetime import datetime, timedelta, timezone
+from api.dependencies import profile_store, get_user_store, get_current_user
+from persistence.user_store import SQLiteUserStore
+
+router = APIRouter(prefix="/api/auth", tags=["auth"])
+
+@router.post("/signup", response_model=TokenResponse)
+def signup(request: SignupRequest, user_store: SQLiteUserStore = Depends(get_user_store)):
+    """
+    Register a new user and create an initial patient profile.
+    Returns a JWT access token upon successful registration.
+    """
+    # Check if user exists
+    if user_store.get_user_by_email(request.email):
+        raise HTTPException(status_code=400, detail="Email already registered")
+    if user_store.get_user_by_username(request.username):
+        raise HTTPException(status_code=400, detail="Username already taken")
+
+    # Hash password
+    hashed_password = get_password_hash(request.password)
+
+    # Create user
+    user_id = user_store.create_user(
+        username=request.username,
+        email=request.email,
+        password_hash=hashed_password,
+        nationality=request.nationality,
+        emergency_contact_name=request.emergency_contact_name,
+        emergency_contact_phone=request.emergency_contact_phone
+    )
+
+    # Create patient profile linked to user_id
+    patient_id = profile_store.create_patient(
+        name=request.name,
+        age=request.age,
+        gender=request.gender,
+        primary_concern=request.primary_concern,
+        user_id=user_id
+    )
+
+    # Generate token
+    access_token = create_access_token(data={"sub": user_id, "username": request.username})
+    
+    return TokenResponse(access_token=access_token, user_id=user_id)
+
+
+@router.post("/login", response_model=TokenResponse)
+def login(request: LoginRequest, user_store: SQLiteUserStore = Depends(get_user_store)):
+    """
+    Authenticate a user using username or email and password.
+    Returns a JWT access token.
+    """
+    if "@" in request.username:
+        user = user_store.get_user_by_email(request.username)
+    else:
+        user = user_store.get_user_by_username(request.username)
+
+    if not user:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Incorrect username or password",
+        )
+    
+    if not verify_password(request.password, user["password_hash"]):
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Incorrect username or password",
+        )
+
+    access_token = create_access_token(data={"sub": user["id"], "username": user["username"]})
+    return TokenResponse(access_token=access_token, user_id=user["id"])
+
+@router.post("/reset-password")
+def reset_password(request: ResetPasswordRequest, user_store: SQLiteUserStore = Depends(get_user_store)):
+    user = user_store.get_user_by_email(request.email)
+    if not user:
+        raise HTTPException(status_code=404, detail="No account found with that email address.")
+
+    # Hash new password
+    hashed_password = get_password_hash(request.new_password)
+    user_store.update_password(request.email, hashed_password)
+    
+    return {"message": "Password successfully updated."}
+
+
+@router.post("/delete-account")
+def delete_account(
+    user_store: SQLiteUserStore = Depends(get_user_store),
+    current_user: dict = Depends(get_current_user)
+):
+    user = user_store.get_user_by_id(current_user["id"])
+    if not user:
+        raise HTTPException(status_code=404, detail="User not found")
+
+    # Delete patient associated with user first
+    patients = profile_store.list_patients_for_user(user["id"])
+    for p in patients:
+        profile_store.delete_patient(p["patient_id"])
+
+    # Delete user
+    user_store.delete_user(user["id"])
+
+    return {"message": "Account has been successfully deleted."}

api/routes.py

@@ -0,0 +1,234 @@
+"""
+Main API Routes
+Handles patient management, dashboard, and conversation endpoints.
+"""
+
+from fastapi import APIRouter, Depends, UploadFile, File, Request, Response, BackgroundTasks, HTTPException
+from fastapi.concurrency import run_in_threadpool
+from fastapi.responses import HTMLResponse
+from fastapi.templating import Jinja2Templates
+from pydantic import BaseModel
+
+from core.schemas import (
+    ResetRequest, ChatRequest, StartRequest, 
+    PatientCreateRequest, EndSessionRequest
+)
+from api.dependencies import (
+    get_orchestrator, get_patient_service, 
+    get_stt_provider, get_profile_store, get_session_store,
+    get_current_user,
+    ConversationOrchestrator, PatientService
+)
+from core.ports import ProfileStore, SessionStore, STTProvider
+
+router = APIRouter()
+templates = Jinja2Templates(directory="templates")
+
+@router.get("/health")
+def health():
+    """Simple health check endpoint to verify API is running."""
+    return {"status": "ok"}
+
+@router.get("/", response_class=HTMLResponse)
+def home(request: Request):
+    """Serves the main frontend Single Page Application (SPA)."""
+    return templates.TemplateResponse(request, "index.html")
+
+
+
+@router.get("/patients")
+def get_patients(profile_store: ProfileStore = Depends(get_profile_store), user: dict = Depends(get_current_user)):
+    """Retrieve a list of all registered patients for the logged-in user."""
+    patients = profile_store.list_patients_for_user(user["id"])
+    if not patients:
+        # Auto-create a default profile for older accounts that lack one
+        patient_id = profile_store.create_patient(
+            name=user.get("username", "User"),
+            age=None,
+            gender=None,
+            primary_concern=None,
+            user_id=user["id"]
+        )
+        return [{"patient_id": patient_id, "name": user.get("username", "User")}]
+    return patients
+
+@router.post("/patients/create")
+def create_new_patient(
+    request: PatientCreateRequest, 
+    profile_store: ProfileStore = Depends(get_profile_store),
+    user: dict = Depends(get_current_user)
+):
+    """Create a new patient record in the database."""
+    p_id = profile_store.create_patient(
+        name=request.name, 
+        age=request.age,
+        gender=request.gender,
+        occupation=request.occupation,
+        primary_concern=request.primary_concern,
+        user_id=user["id"]
+    )
+    return {"patient_id": p_id, "name": request.name}
+
+@router.get("/patients/{patient_id}/dashboard")
+def patient_dashboard(
+    patient_id: str, 
+    profile_store: ProfileStore = Depends(get_profile_store),
+    user: dict = Depends(get_current_user)
+):
+    """Retrieve full dashboard data for a patient (info, profile, past sessions)."""
+    patient_info = profile_store.get_patient(patient_id)
+    if not patient_info:
+        return Response(status_code=404)
+        
+    profile = profile_store.get_patient_profile(patient_id)
+    sessions = profile_store.get_patient_sessions(patient_id)
+    
+    return {
+        "patient": patient_info,
+        "profile": profile,
+        "sessions": sessions
+    }
+
+@router.post("/patients/{patient_id}/reset")
+def reset_patient(
+    patient_id: str,
+    patient_service: PatientService = Depends(get_patient_service),
+    user: dict = Depends(get_current_user)
+):
+    """Reset the patient's data, including sessions, messages, and profile."""
+    patient_service.reset_patient_data(patient_id)
+    return {"status": "success", "message": "Patient data reset successfully."}
+
+@router.delete("/patients/{patient_id}")
+def delete_patient(
+    patient_id: str,
+    patient_service: PatientService = Depends(get_patient_service),
+    user: dict = Depends(get_current_user)
+):
+    """Delete a patient and all their associated data completely."""
+    patient_service.delete_patient(patient_id)
+    return {"status": "success", "message": "Patient deleted successfully."}
+
+@router.post("/end_session")
+def end_session_endpoint(
+    request: EndSessionRequest, 
+    background_tasks: BackgroundTasks,
+    patient_service: PatientService = Depends(get_patient_service),
+    user: dict = Depends(get_current_user)
+):
+    """Gracefully terminate an active session and generate a clinical summary in the background."""
+    patient_service.end_session(request.session_id, request.patient_id)
+    background_tasks.add_task(patient_service.generate_session_summary, request.session_id, request.patient_id)
+    return {"status": "ended"}
+
+@router.post("/start")
+def start_session(
+    request: StartRequest = StartRequest(), 
+    patient_service: PatientService = Depends(get_patient_service),
+    user: dict = Depends(get_current_user)
+):
+    """Initialize a new conversation session and generate the psychiatrist's opening remark."""
+    try:
+        session_id, opening_message, patient_id = patient_service.create_new_session(request.patient_id)
+        return {
+            "assistant_message": opening_message,
+            "session_id":        session_id,
+            "patient_id":        patient_id,
+        }
+    except Exception as e:
+        error_str = str(e).lower()
+        if "connection error" in error_str or "all providers failed" in error_str or "unavailable" in error_str:
+            raise HTTPException(status_code=503, detail="LLMs are currently unavailable. Cannot start session.")
+        raise e
+
+
+@router.post("/chat_text")
+def chat_text(
+    request: ChatRequest, 
+    orchestrator: ConversationOrchestrator = Depends(get_orchestrator),
+    patient_service: PatientService = Depends(get_patient_service),
+    session_store: SessionStore = Depends(get_session_store),
+    profile_store: ProfileStore = Depends(get_profile_store),
+    user: dict = Depends(get_current_user)
+):
+    """
+    Process a user's chat message through the core orchestrator.
+    LLM2 analysis is run synchronously within the orchestrator if triggered.
+    """
+    if not session_store.session_exists(request.session_id):
+        # Session expired, create a new one
+        session_id, opening_message, patient_id = patient_service.create_new_session(request.patient_id)
+        # Instead of dropping the user's message and returning the greeting, pipe the user's message into the new session
+        request.session_id = session_id
+        request.patient_id = patient_id
+
+    try:
+        chat_result = orchestrator.handle_message(
+            session_id=request.session_id,
+            message=request.message,
+            emotion=request.emotion,
+            default_patient_id=request.patient_id
+        )
+    except Exception as e:
+        error_str = str(e).lower()
+        error_type = type(e).__name__.lower()
+        if "rate limit" in error_str or "ratelimit" in error_str or "429" in error_str or "ratelimit" in error_type:
+            raise HTTPException(status_code=429, detail="Tokens Exhausted")
+        if "connection error" in error_str or "all providers failed" in error_str or "unavailable" in error_str:
+            raise HTTPException(status_code=503, detail="LLMs are currently unavailable. Please try again later.")
+        raise e
+
+
+    return {
+        "assistant_message": chat_result.assistant_message,
+        "intent":            chat_result.intent,
+        "risk_flagged":      chat_result.risk_flagged,
+        "session_id":        request.session_id,
+    }
+
+@router.post("/transcribe")
+async def transcribe(
+    audio: UploadFile = File(...), 
+    stt_provider: STTProvider = Depends(get_stt_provider)
+):
+    """
+    Accepts raw audio bytes from the frontend and passes them to the STTProvider
+    for speech-to-text and emotional tone extraction.
+    """
+    audio_bytes = await audio.read()
+    # Run the CPU-bound transcription in a threadpool to prevent blocking the async event loop
+    result = await run_in_threadpool(stt_provider.transcribe, audio_bytes)
+    return {
+        "text":    result.get("text",    ""),
+        "emotion": result.get("emotion", "unknown"),
+        "event":   result.get("event",   None),
+    }
+
+@router.get("/patients/{patient_id}/active_session")
+def get_active_session(
+    patient_id: str,
+    patient_service: PatientService = Depends(get_patient_service),
+    user: dict = Depends(get_current_user)
+):
+    """Check if the patient currently has an active session."""
+    session_id = patient_service.get_active_session(patient_id)
+    return {"session_id": session_id}
+
+@router.get("/sessions/{session_id}/messages")
+def get_session_messages(
+    session_id: str,
+    patient_service: PatientService = Depends(get_patient_service),
+    user: dict = Depends(get_current_user)
+):
+    """Retrieve all raw messages for a given session to continue a chat."""
+    messages = patient_service.get_session_messages(session_id)
+    return {"messages": messages}
+
+@router.get("/{full_path:path}", response_class=HTMLResponse)
+def catch_all(request: Request, full_path: str):
+    """
+    Catch-all route to support History API (clean URLs) in the frontend SPA.
+    If the user navigates directly to /profiles or /dashboard, serve index.html
+    so the frontend JS can handle the routing.
+    """
+    return templates.TemplateResponse(request, "index.html")

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,157 @@
+export const BACKEND_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' 
+  ? "http://127.0.0.1:8000" 
+  : "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 })
+  });
+  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 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,588 @@
+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";
+    }
+  });
+
+  document.getElementById("signupCompleteBtn")?.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("signupCompleteBtn").textContent = "Creating Account...";
+      document.getElementById("signupCompleteBtn").disabled = true;
+      
+      await auth.signup(payload);
+      
+      ui.showAlert("Success", "Account created successfully!");
+      showAuthPanel("loginFormContainer");
+      
+      await profiles.fetchPatients();
+    } catch (e) {
+      ui.showAlert("Signup Failed", e.message);
+    } finally {
+      document.getElementById("signupCompleteBtn").textContent = "Create Account";
+      document.getElementById("signupCompleteBtn").disabled = false;
+    }
+  });
+
+  document.getElementById("submitResetBtn")?.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.");
+
+    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;
+      await auth.resetPassword(email, newPass);
+      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 deleteAccountConfirmBtn = document.getElementById("deleteAccountConfirmBtn");
+  if (deleteAccountConfirmBtn) {
+    deleteAccountConfirmBtn.onclick = async () => {
+      try {
+        deleteAccountConfirmBtn.textContent = "Deleting...";
+        deleteAccountConfirmBtn.disabled = true;
+        
+        await auth.deleteAccount();
+        
+        document.getElementById("deleteAccountConfirmModal").style.display = "none";
+        auth.logout();
+        ui.switchScreen("authScreen");
+        
+      } catch (e) {
+        console.error("Error deleting account:", e);
+        ui.showAlert("Error", e.message);
+      } finally {
+        deleteAccountConfirmBtn.textContent = "DELETE";
+        deleteAccountConfirmBtn.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,77 @@
+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 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 resetPassword(email, new_password) {
+  const res = await fetch(`${BACKEND_URL}/api/auth/reset-password`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email, 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 deleteAccount() {
+  const token = localStorage.getItem('serinity_token');
+  const res = await fetch(`${BACKEND_URL}/api/auth/delete-account`, {
+    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 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,319 @@
+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);
+    ui.showAlert("Session Failed", e.message || "Failed to start session. Please try again.");
+    ui.switchScreen("dashboardScreen");
+    const startButton = document.getElementById("dashboardStartBtn");
+    if (startButton) {
+      startButton.textContent = "START CONSULTATION";
+      startButton.disabled = false;
+    }
+  }
+}
+
+/**
+ * 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";
+}