Refactor app.js into subfiles doctor, patient and handlers JS scripts

static/js/app.js

@@ -1,4 +1,7 @@
 // Medical AI Assistant - Main Application JavaScript
+import { attachUIHandlers } from './ui/handlers.js';
+import { attachDoctorUI } from './ui/doctor.js';
+import { attachPatientUI } from './ui/patient.js';
 
 class MedicalChatbotApp {
     constructor() {
@@ -6,7 +9,7 @@ class MedicalChatbotApp {
         this.currentPatientId = null;
         this.currentSession = null;
         this.backendSessions = [];
-        this.memory = new Map(); // In-memory storage for demo
+        this.memory = new Map();  // In-memory storage for STM/demo
         this.isLoading = false;
         this.doctors = this.loadDoctors();
 
@@ -14,6 +17,11 @@ class MedicalChatbotApp {
     }
 
     async init() {
+        // Attach shared UI helpers once
+        attachUIHandlers(this);
+        // Attach specialized UIs
+        attachDoctorUI(this);
+        attachPatientUI(this);
         this.setupEventListeners();
         this.loadUserPreferences();
         this.initializeUser();
@@ -76,64 +84,7 @@ class MedicalChatbotApp {
             this.startNewChat();
         });
 
-        // Patient load button
-        const loadBtn = document.getElementById('loadPatientBtn');
-        if (loadBtn) {
-            loadBtn.addEventListener('click', () => this.loadPatient());
-        }
-        const patientInput = document.getElementById('patientIdInput');
-        const suggestionsEl = document.getElementById('patientSuggestions');
-        if (patientInput) {
-            let debounceTimer;
-            const hideSuggestions = () => { if (suggestionsEl) suggestionsEl.style.display = 'none'; };
-            const renderSuggestions = (items) => {
-                if (!suggestionsEl) return;
-                if (!items || items.length === 0) { hideSuggestions(); return; }
-                suggestionsEl.innerHTML = '';
-                items.forEach(p => {
-                    const div = document.createElement('div');
-                    div.className = 'patient-suggestion';
-                    div.textContent = `${p.name || 'Unknown'} (${p.patient_id})`;
-                    div.addEventListener('click', () => {
-                        this.currentPatientId = p.patient_id;
-                        this.savePatientId();
-                        patientInput.value = p.patient_id;
-                        hideSuggestions();
-                        this.fetchAndRenderPatientSessions();
-                        const status = document.getElementById('patientStatus');
-                        if (status) { status.textContent = `Patient: ${p.patient_id}`; status.style.color = 'var(--text-secondary)'; }
-                    });
-                    suggestionsEl.appendChild(div);
-                });
-                suggestionsEl.style.display = 'block';
-            };
-            patientInput.addEventListener('input', () => {
-                const q = patientInput.value.trim();
-                clearTimeout(debounceTimer);
-                if (!q) { hideSuggestions(); return; }
-                debounceTimer = setTimeout(async () => {
-                    try {
-                        const resp = await fetch(`/patients/search?q=${encodeURIComponent(q)}&limit=8`, { headers: { 'Accept': 'application/json' } });
-                        if (resp.ok) {
-                            const data = await resp.json();
-                            renderSuggestions(data.results || []);
-                        } else {
-                            console.warn('Search request failed', resp.status);
-                        }
-                    } catch (_) { /* ignore */ }
-                }, 200);
-            });
-            patientInput.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter') {
-                    this.loadPatient();
-                    hideSuggestions();
-                }
-            });
-            document.addEventListener('click', (ev) => {
-                if (!suggestionsEl) return;
-                if (!suggestionsEl.contains(ev.target) && ev.target !== patientInput) hideSuggestions();
-            });
-        }
+        // Patient handlers moved to ui/patient.js
 
         // Send button and input
         document.getElementById('sendBtn').addEventListener('click', () => {
@@ -148,9 +99,7 @@ class MedicalChatbotApp {
         });
 
         // Auto-resize textarea
-        document.getElementById('chatInput').addEventListener('input', (e) => {
-            this.autoResizeTextarea(e.target);
-        });
+        document.getElementById('chatInput').addEventListener('input', (e) => this.autoResizeTextarea(e.target));
 
         // User profile
         document.getElementById('userProfile').addEventListener('click', () => {
@@ -163,13 +112,8 @@ class MedicalChatbotApp {
         });
 
         // Action buttons
-        document.getElementById('exportBtn').addEventListener('click', () => {
-            this.exportChat();
-        });
-
-        document.getElementById('clearBtn').addEventListener('click', () => {
-            this.clearChat();
-        });
+        document.getElementById('exportBtn').addEventListener('click', () => this.exportChat());
+        document.getElementById('clearBtn').addEventListener('click', () => this.clearChat());
 
         // Modal events
         this.setupModalEvents();
@@ -189,88 +133,9 @@ class MedicalChatbotApp {
         if (notificationsEl) notificationsEl.addEventListener('change', () => this.savePreferences());
     }
 
-    loadDoctors() {
-        try {
-            const raw = localStorage.getItem('medicalChatbotDoctors');
-            const arr = raw ? JSON.parse(raw) : [];
-            const seen = new Set();
-            return arr.filter(x => x && x.name && !seen.has(x.name) && seen.add(x.name));
-        } catch { return []; }
-    }
-
-    saveDoctors() {
-        localStorage.setItem('medicalChatbotDoctors', JSON.stringify(this.doctors));
-    }
-
-    populateDoctorSelect() {
-        const sel = document.getElementById('profileNameSelect');
-        const newSec = document.getElementById('newDoctorSection');
-        if (!sel) return;
-        sel.innerHTML = '';
-        const createOpt = document.createElement('option');
-        createOpt.value = '__create__';
-        createOpt.textContent = 'Create doctor user...';
-        sel.appendChild(createOpt);
-        // Ensure no duplicates, and include current user name if not in list
-        const names = new Set(this.doctors.map(d => d.name));
-        if (this.currentUser?.name && !names.has(this.currentUser.name)) {
-            this.doctors.unshift({ name: this.currentUser.name });
-            names.add(this.currentUser.name);
-            this.saveDoctors();
-        }
-        this.doctors.forEach(d => {
-            const opt = document.createElement('option');
-            opt.value = d.name;
-            opt.textContent = d.name;
-            if (this.currentUser?.name === d.name) opt.selected = true;
-            sel.appendChild(opt);
-        });
-        sel.addEventListener('change', () => {
-            if (sel.value === '__create__') {
-                newSec.style.display = '';
-                const input = document.getElementById('newDoctorName');
-                if (input) input.value = '';
-            } else {
-                newSec.style.display = 'none';
-            }
-        });
-        const cancelBtn = document.getElementById('cancelNewDoctor');
-        const confirmBtn = document.getElementById('confirmNewDoctor');
-        if (cancelBtn) cancelBtn.onclick = () => { newSec.style.display = 'none'; sel.value = this.currentUser?.name || ''; };
-        if (confirmBtn) confirmBtn.onclick = () => {
-            const name = (document.getElementById('newDoctorName').value || '').trim();
-            if (!name) return;
-            if (!this.doctors.find(d => d.name === name)) {
-                this.doctors.unshift({ name });
-                this.saveDoctors();
-            }
-            this.populateDoctorSelect();
-            sel.value = name;
-            newSec.style.display = 'none';
-        };
-    }
-
-    loadSavedPatientId() {
-        const pid = localStorage.getItem('medicalChatbotPatientId');
-        if (pid && /^\d{8}$/.test(pid)) {
-            this.currentPatientId = pid;
-            const status = document.getElementById('patientStatus');
-            if (status) {
-                status.textContent = `Patient: ${pid}`;
-                status.style.color = 'var(--text-secondary)';
-            }
-            const input = document.getElementById('patientIdInput');
-            if (input) input.value = pid;
-        }
-    }
+    // doctor UI moved to ui/doctor.js
 
-    savePatientId() {
-        if (this.currentPatientId) {
-            localStorage.setItem('medicalChatbotPatientId', this.currentPatientId);
-        } else {
-            localStorage.removeItem('medicalChatbotPatientId');
-        }
-    }
+    // patient state moved to ui/patient.js
 
     setupModalEvents() {
         // User modal
@@ -485,61 +350,9 @@ How can I assist you today?`;
         await this.fetchAndRenderPatientSessions();
     }
 
-    async fetchAndRenderPatientSessions() {
-        if (!this.currentPatientId) return;
-        try {
-            const resp = await fetch(`/patients/${this.currentPatientId}/sessions`);
-            if (resp.ok) {
-                const data = await resp.json();
-                const sessions = Array.isArray(data.sessions) ? data.sessions : [];
-                this.backendSessions = sessions.map(s => ({
-                    id: s.session_id,
-                    title: s.title || 'New Chat',
-                    messages: [],
-                    createdAt: s.created_at || new Date().toISOString(),
-                    lastActivity: s.last_activity || new Date().toISOString(),
-                    source: 'backend'
-                }));
-                // Prefer backend sessions if present
-                if (this.backendSessions.length > 0) {
-                    this.currentSession = this.backendSessions[0];
-                    await this.hydrateMessagesForSession(this.currentSession.id);
-                }
-            } else {
-                console.warn('Failed to fetch patient sessions', resp.status);
-                this.backendSessions = [];
-            }
-        } catch (e) {
-            console.error('Failed to load patient sessions', e);
-            this.backendSessions = [];
-        }
-        this.loadChatSessions();
-    }
+    // patient session fetch moved to ui/patient.js
 
-    async hydrateMessagesForSession(sessionId) {
-        try {
-            const resp = await fetch(`/sessions/${sessionId}/messages?limit=1000`);
-            if (!resp.ok) return;
-            const data = await resp.json();
-            const msgs = Array.isArray(data.messages) ? data.messages : [];
-            const normalized = msgs.map(m => ({
-                id: m._id || this.generateId(),
-                role: m.role,
-                content: m.content,
-                timestamp: m.timestamp
-            }));
-            // set into currentSession if matched
-            if (this.currentSession && this.currentSession.id === sessionId) {
-                this.currentSession.messages = normalized;
-                // Render
-                this.clearChatMessages();
-                this.currentSession.messages.forEach(m => this.displayMessage(m));
-                this.updateChatTitle();
-            }
-        } catch (e) {
-            console.error('Failed to hydrate session messages', e);
-        }
-    }
+    // patient message hydration moved to ui/patient.js
 
     async sendMessage() {
         const input = document.getElementById('chatInput');
@@ -776,40 +589,9 @@ How can I assist you today?`;
         chatMessages.innerHTML = '';
     }
 
-    clearChat() {
-        if (confirm('Are you sure you want to clear this chat? This action cannot be undone.')) {
-            this.clearChatMessages();
-            if (this.currentSession) {
-                this.currentSession.messages = [];
-                this.currentSession.title = 'New Chat';
-                this.updateChatTitle();
-            }
-        }
-    }
-
-    exportChat() {
-        if (!this.currentSession || this.currentSession.messages.length === 0) {
-            alert('No chat to export.');
-            return;
-        }
+    // clearChat() { /* moved to ui/handlers.js */ }
 
-        const chatData = {
-            user: this.currentUser.name,
-            session: this.currentSession.title,
-            date: new Date().toISOString(),
-            messages: this.currentSession.messages
-        };
-
-        const blob = new Blob([JSON.stringify(chatData, null, 2)], { type: 'application/json' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = `medical-chat-${this.currentSession.title.replace(/[^a-z0-9]/gi, '-')}.json`;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-    }
+    // exportChat() { /* moved to ui/handlers.js */ }
 
     loadChatSessions() {
         const sessionsContainer = document.getElementById('chatSessions');
@@ -1009,48 +791,7 @@ How can I assist you today?`;
         this.loadChatSessions();
     }
 
-    showUserModal() {
-        this.populateDoctorSelect();
-        // Ensure the dropdown is visible immediately with options
-        const sel = document.getElementById('profileNameSelect');
-        if (sel && sel.options.length === 0) {
-            // Fallback in unlikely case populate didn't run
-            const createOpt = document.createElement('option');
-            createOpt.value = '__create__';
-            createOpt.textContent = 'Create doctor user...';
-            sel.appendChild(createOpt);
-        }
-        if (sel && !sel.value) sel.value = this.currentUser?.name || '__create__';
-        document.getElementById('profileRole').value = this.currentUser.role;
-        document.getElementById('profileSpecialty').value = this.currentUser.specialty || '';
-
-        this.showModal('userModal');
-    }
-
-    saveUserProfile() {
-        const nameSel = document.getElementById('profileNameSelect');
-        const name = nameSel ? nameSel.value : '';
-        const role = document.getElementById('profileRole').value;
-        const specialty = document.getElementById('profileSpecialty').value.trim();
-
-        if (!name || name === '__create__') {
-            alert('Please select or create a doctor name.');
-            return;
-        }
-
-        if (!this.doctors.find(d => d.name === name)) {
-            this.doctors.unshift({ name });
-            this.saveDoctors();
-        }
-
-        this.currentUser.name = name;
-        this.currentUser.role = role;
-        this.currentUser.specialty = specialty;
-
-        this.saveUser();
-        this.updateUserDisplay();
-        this.hideModal('userModal');
-    }
+    // doctor modal logic moved to ui/doctor.js
 
     showSettingsModal() {
         this.showModal('settingsModal');
@@ -1077,13 +818,8 @@ How can I assist you today?`;
         this.hideModal('settingsModal');
     }
 
-    showModal(modalId) {
-        document.getElementById(modalId).classList.add('show');
-    }
-
-    hideModal(modalId) {
-        document.getElementById(modalId).classList.remove('show');
-    }
+    // showModal(modalId) { /* moved to ui/handlers.js */ }
+    // hideModal(modalId) { /* moved to ui/handlers.js */ }
 
     showLoading(show) {
         this.isLoading = show;
@@ -1099,10 +835,8 @@ How can I assist you today?`;
         }
     }
 
-    toggleSidebar() {
-        const sidebar = document.getElementById('sidebar');
-        sidebar.classList.toggle('show');
-    }
+    // toggleSidebar logic moved to ui/handlers.js
+
 
     updateUserDisplay() {
         document.getElementById('userName').textContent = this.currentUser.name;
@@ -1113,10 +847,8 @@ How can I assist you today?`;
         localStorage.setItem('medicalChatbotUser', JSON.stringify(this.currentUser));
     }
 
-    autoResizeTextarea(textarea) {
-        textarea.style.height = 'auto';
-        textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
-    }
+    // autoResizeTextarea logic moved to ui/handlers.js
+
 
     generateId() {
         return Date.now().toString(36) + Math.random().toString(36).substr(2);

static/js/ui/doctor.js

@@ -0,0 +1,108 @@
+// ui/doctor.js
+// Doctor list load/save, dropdown populate, create-flow, show/save profile
+
+export function attachDoctorUI(app) {
+	// Model: list of doctors persisted in localStorage
+	app.loadDoctors = function () {
+		try {
+			const raw = localStorage.getItem('medicalChatbotDoctors');
+			const arr = raw ? JSON.parse(raw) : [];
+			const seen = new Set();
+			return arr.filter(x => x && x.name && !seen.has(x.name) && seen.add(x.name));
+		} catch { return []; }
+	};
+
+	app.saveDoctors = function () {
+		localStorage.setItem('medicalChatbotDoctors', JSON.stringify(app.doctors));
+	};
+
+	app.populateDoctorSelect = function () {
+		const sel = document.getElementById('profileNameSelect');
+		const newSec = document.getElementById('newDoctorSection');
+		if (!sel) return;
+		sel.innerHTML = '';
+		const createOpt = document.createElement('option');
+		createOpt.value = '__create__';
+		createOpt.textContent = 'Create doctor user...';
+		sel.appendChild(createOpt);
+		// Ensure no duplicates, include current doctor
+		const names = new Set(app.doctors.map(d => d.name));
+		if (app.currentUser?.name && !names.has(app.currentUser.name)) {
+			app.doctors.unshift({ name: app.currentUser.name });
+			names.add(app.currentUser.name);
+			app.saveDoctors();
+		}
+		app.doctors.forEach(d => {
+			const opt = document.createElement('option');
+			opt.value = d.name;
+			opt.textContent = d.name;
+			if (app.currentUser?.name === d.name) opt.selected = true;
+			sel.appendChild(opt);
+		});
+		sel.addEventListener('change', () => {
+			if (sel.value === '__create__') {
+				newSec.style.display = '';
+				const input = document.getElementById('newDoctorName');
+				if (input) input.value = '';
+			} else {
+				newSec.style.display = 'none';
+			}
+		});
+		const cancelBtn = document.getElementById('cancelNewDoctor');
+		const confirmBtn = document.getElementById('confirmNewDoctor');
+		if (cancelBtn) cancelBtn.onclick = () => { newSec.style.display = 'none'; sel.value = app.currentUser?.name || ''; };
+		if (confirmBtn) confirmBtn.onclick = () => {
+			const name = (document.getElementById('newDoctorName').value || '').trim();
+			if (!name) return;
+			if (!app.doctors.find(d => d.name === name)) {
+				app.doctors.unshift({ name });
+				app.saveDoctors();
+			}
+			app.populateDoctorSelect();
+			sel.value = name;
+			newSec.style.display = 'none';
+		};
+	};
+
+	app.showUserModal = function () {
+		app.populateDoctorSelect();
+		const sel = document.getElementById('profileNameSelect');
+		if (sel && sel.options.length === 0) {
+			const createOpt = document.createElement('option');
+			createOpt.value = '__create__';
+			createOpt.textContent = 'Create doctor user...';
+			sel.appendChild(createOpt);
+		}
+		if (sel && !sel.value) sel.value = app.currentUser?.name || '__create__';
+		document.getElementById('profileRole').value = app.currentUser.role;
+		document.getElementById('profileSpecialty').value = app.currentUser.specialty || '';
+		app.showModal('userModal');
+	};
+
+	app.saveUserProfile = function () {
+		const nameSel = document.getElementById('profileNameSelect');
+		const name = nameSel ? nameSel.value : '';
+		const role = document.getElementById('profileRole').value;
+		const specialty = document.getElementById('profileSpecialty').value.trim();
+
+		if (!name || name === '__create__') {
+			alert('Please select or create a doctor name.');
+			return;
+		}
+
+		if (!app.doctors.find(d => d.name === name)) {
+			app.doctors.unshift({ name });
+			app.saveDoctors();
+		}
+
+		app.currentUser.name = name;
+		app.currentUser.role = role;
+		app.currentUser.specialty = specialty;
+
+		app.saveUser();
+		app.updateUserDisplay();
+		app.hideModal('userModal');
+	};
+}
+
+

static/js/ui/handlers.js

@@ -0,0 +1,62 @@
+// ui/handlers.js
+// DOM wiring helpers: sidebar open/close, modal wiring, textarea autosize, export/clear
+
+export function attachUIHandlers(app) {
+	// Sidebar toggle implementation
+	app.toggleSidebar = function () {
+		const sidebar = document.getElementById('sidebar');
+		if (sidebar) sidebar.classList.toggle('show');
+	};
+
+	// Textarea autosize
+	app.autoResizeTextarea = function (textarea) {
+		if (!textarea) return;
+		textarea.style.height = 'auto';
+		textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+	};
+
+	// Export current chat as JSON
+	app.exportChat = function () {
+		if (!app.currentSession || app.currentSession.messages.length === 0) {
+			alert('No chat to export.');
+			return;
+		}
+		const chatData = {
+			user: app.currentUser?.name || 'Unknown',
+			session: app.currentSession.title,
+			date: new Date().toISOString(),
+			messages: app.currentSession.messages
+		};
+		const blob = new Blob([JSON.stringify(chatData, null, 2)], { type: 'application/json' });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = `medical-chat-${app.currentSession.title.replace(/[^a-z0-9]/gi, '-')}.json`;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		URL.revokeObjectURL(url);
+	};
+
+	// Clear current chat
+	app.clearChat = function () {
+		if (confirm('Are you sure you want to clear this chat? This action cannot be undone.')) {
+			app.clearChatMessages();
+			if (app.currentSession) {
+				app.currentSession.messages = [];
+				app.currentSession.title = 'New Chat';
+				app.updateChatTitle();
+			}
+		}
+	};
+
+	// Generic modal helpers
+	app.showModal = function (modalId) {
+		document.getElementById(modalId)?.classList.add('show');
+	};
+	app.hideModal = function (modalId) {
+		document.getElementById(modalId)?.classList.remove('show');
+	};
+}
+
+

static/js/ui/patient.js

@@ -0,0 +1,224 @@
+// ui/patient.js
+// Patient selection, typeahead search, load/hydrate, patient modal wiring
+
+export function attachPatientUI(app) {
+	// State helpers
+	app.loadSavedPatientId = function () {
+		const pid = localStorage.getItem('medicalChatbotPatientId');
+		if (pid && /^\d{8}$/.test(pid)) {
+			app.currentPatientId = pid;
+			const status = document.getElementById('patientStatus');
+			if (status) {
+				status.textContent = `Patient: ${pid}`;
+				status.style.color = 'var(--text-secondary)';
+			}
+			const input = document.getElementById('patientIdInput');
+			if (input) input.value = pid;
+		}
+	};
+
+	app.savePatientId = function () {
+		if (app.currentPatientId) localStorage.setItem('medicalChatbotPatientId', app.currentPatientId);
+		else localStorage.removeItem('medicalChatbotPatientId');
+	};
+
+	app.loadPatient = async function () {
+		const input = document.getElementById('patientIdInput');
+		const status = document.getElementById('patientStatus');
+		const id = (input?.value || '').trim();
+		if (!/^\d{8}$/.test(id)) {
+			if (status) { status.textContent = 'Invalid patient ID. Use 8 digits.'; status.style.color = 'var(--warning-color)'; }
+			return;
+		}
+		app.currentPatientId = id;
+		app.savePatientId();
+		if (status) { status.textContent = `Patient: ${id}`; status.style.color = 'var(--text-secondary)'; }
+		await app.fetchAndRenderPatientSessions();
+	};
+
+	app.fetchAndRenderPatientSessions = async function () {
+		if (!app.currentPatientId) return;
+		try {
+			const resp = await fetch(`/patients/${app.currentPatientId}/sessions`);
+			if (resp.ok) {
+				const data = await resp.json();
+				const sessions = Array.isArray(data.sessions) ? data.sessions : [];
+				app.backendSessions = sessions.map(s => ({
+					id: s.session_id,
+					title: s.title || 'New Chat',
+					messages: [],
+					createdAt: s.created_at || new Date().toISOString(),
+					lastActivity: s.last_activity || new Date().toISOString(),
+					source: 'backend'
+				}));
+				if (app.backendSessions.length > 0) {
+					app.currentSession = app.backendSessions[0];
+					await app.hydrateMessagesForSession(app.currentSession.id);
+				}
+			} else {
+				console.warn('Failed to fetch patient sessions', resp.status);
+				app.backendSessions = [];
+			}
+		} catch (e) {
+			console.error('Failed to load patient sessions', e);
+			app.backendSessions = [];
+		}
+		app.loadChatSessions();
+	};
+
+	app.hydrateMessagesForSession = async function (sessionId) {
+		try {
+			const resp = await fetch(`/sessions/${sessionId}/messages?limit=1000`);
+			if (!resp.ok) return;
+			const data = await resp.json();
+			const msgs = Array.isArray(data.messages) ? data.messages : [];
+			const normalized = msgs.map(m => ({
+				id: m._id || app.generateId(),
+				role: m.role,
+				content: m.content,
+				timestamp: m.timestamp
+			}));
+			if (app.currentSession && app.currentSession.id === sessionId) {
+				app.currentSession.messages = normalized;
+				app.clearChatMessages();
+				app.currentSession.messages.forEach(m => app.displayMessage(m));
+				app.updateChatTitle();
+			}
+		} catch (e) {
+			console.error('Failed to hydrate session messages', e);
+		}
+	};
+
+	// Bind patient input + typeahead + load button
+	app.bindPatientHandlers = function () {
+		const loadBtn = document.getElementById('loadPatientBtn');
+		if (loadBtn) loadBtn.addEventListener('click', () => app.loadPatient());
+		const patientInput = document.getElementById('patientIdInput');
+		const suggestionsEl = document.getElementById('patientSuggestions');
+		if (!patientInput) return;
+		let debounceTimer;
+		const hideSuggestions = () => { if (suggestionsEl) suggestionsEl.style.display = 'none'; };
+		const renderSuggestions = (items) => {
+			if (!suggestionsEl) return;
+			if (!items || items.length === 0) { hideSuggestions(); return; }
+			suggestionsEl.innerHTML = '';
+			items.forEach(p => {
+				const div = document.createElement('div');
+				div.className = 'patient-suggestion';
+				div.textContent = `${p.name || 'Unknown'} (${p.patient_id})`;
+				div.addEventListener('click', async () => {
+					app.currentPatientId = p.patient_id;
+					app.savePatientId();
+					patientInput.value = p.patient_id;
+					hideSuggestions();
+					const status = document.getElementById('patientStatus');
+					if (status) { status.textContent = `Patient: ${p.patient_id}`; status.style.color = 'var(--text-secondary)'; }
+					await app.fetchAndRenderPatientSessions();
+				});
+				suggestionsEl.appendChild(div);
+			});
+			suggestionsEl.style.display = 'block';
+		};
+		patientInput.addEventListener('input', () => {
+			const q = patientInput.value.trim();
+			clearTimeout(debounceTimer);
+			if (!q) { hideSuggestions(); return; }
+			debounceTimer = setTimeout(async () => {
+				try {
+					const resp = await fetch(`/patients/search?q=${encodeURIComponent(q)}&limit=8`, { headers: { 'Accept': 'application/json' } });
+					if (resp.ok) {
+						const data = await resp.json();
+						renderSuggestions(data.results || []);
+					} else {
+						console.warn('Search request failed', resp.status);
+					}
+				} catch (_) { /* ignore */ }
+			}, 200);
+		});
+		patientInput.addEventListener('keydown', async (e) => {
+			if (e.key === 'Enter') {
+				const value = patientInput.value.trim();
+				if (/^\d{8}$/.test(value)) {
+					await app.loadPatient();
+					hideSuggestions();
+				} else {
+					try {
+						const resp = await fetch(`/patients/search?q=${encodeURIComponent(value)}&limit=1`);
+						if (resp.ok) {
+							const data = await resp.json();
+							const first = (data.results || [])[0];
+							if (first) {
+								app.currentPatientId = first.patient_id;
+								app.savePatientId();
+								patientInput.value = first.patient_id;
+								hideSuggestions();
+								const status = document.getElementById('patientStatus');
+								if (status) { status.textContent = `Patient: ${first.patient_id}`; status.style.color = 'var(--text-secondary)'; }
+								await app.fetchAndRenderPatientSessions();
+								return;
+							}
+						}
+					} catch (_) {}
+					const status = document.getElementById('patientStatus');
+					if (status) { status.textContent = 'No matching patient found'; status.style.color = 'var(--warning-color)'; }
+				}
+			}
+		});
+		document.addEventListener('click', (ev) => {
+			if (!suggestionsEl) return;
+			if (!suggestionsEl.contains(ev.target) && ev.target !== patientInput) hideSuggestions();
+		});
+	};
+
+	// Patient modal wiring
+	document.addEventListener('DOMContentLoaded', () => {
+		const profileBtn = document.getElementById('patientMenuBtn');
+		const modal = document.getElementById('patientModal');
+		const closeBtn = document.getElementById('patientModalClose');
+		const logoutBtn = document.getElementById('patientLogoutBtn');
+		const createBtn = document.getElementById('patientCreateBtn');
+		if (profileBtn && modal) {
+			profileBtn.addEventListener('click', async () => {
+				const pid = app?.currentPatientId;
+				if (pid) {
+					try {
+						const resp = await fetch(`/patients/${pid}`);
+						if (resp.ok) {
+							const p = await resp.json();
+							const name = p.name || 'Unknown';
+							const age = typeof p.age === 'number' ? p.age : '-';
+							const sex = p.sex || '-';
+							const meds = Array.isArray(p.medications) && p.medications.length > 0 ? p.medications.join(', ') : '-';
+							document.getElementById('patientSummary').textContent = `${name} — ${sex}, ${age}`;
+							document.getElementById('patientMedications').textContent = meds;
+							document.getElementById('patientAssessment').textContent = p.past_assessment_summary || '-';
+						}
+					} catch (e) {
+						console.error('Failed to load patient profile', e);
+					}
+				}
+				modal.classList.add('show');
+			});
+		}
+		if (closeBtn && modal) {
+			closeBtn.addEventListener('click', () => modal.classList.remove('show'));
+			modal.addEventListener('click', (e) => { if (e.target === modal) modal.classList.remove('show'); });
+		}
+		if (logoutBtn) {
+			logoutBtn.addEventListener('click', () => {
+				if (confirm('Log out current patient?')) {
+					app.currentPatientId = null;
+					localStorage.removeItem('medicalChatbotPatientId');
+					const status = document.getElementById('patientStatus');
+					if (status) { status.textContent = 'No patient selected'; status.style.color = 'var(--text-secondary)'; }
+					const input = document.getElementById('patientIdInput');
+					if (input) input.value = '';
+					modal.classList.remove('show');
+				}
+			});
+		}
+		if (createBtn) createBtn.addEventListener('click', () => modal.classList.remove('show'));
+	});
+}
+
+