diff --git a/App.tsx b/App.tsx
index bb886bb..7401825 100644
--- a/App.tsx
+++ b/App.tsx
@@ -4,6 +4,7 @@ import { dbService } from './services/db';
 import { useZenStore } from './store/zenStore';
 import { ExtremeErrorBoundary } from './components/ExtremeErrorBoundary';
 import { CryptoErrorBoundary } from './components/CryptoErrorBoundary';
+import { TestDashboard } from './test/TestDashboard';
 
 export default function App() {
   const { setHistory } = useZenStore();
@@ -15,8 +16,7 @@ export default function App() {
         const entries = await dbService.getAllEntries();
         setHistory(entries);
       } catch (error) {
-        console.error("DB Load failed - this is normal if vault is locked:", error);
-        // Don't throw error - it's normal when vault is locked
+        console.error('Failed to load history:', error);
       }
     };
 
@@ -27,6 +27,7 @@ export default function App() {
     <ExtremeErrorBoundary name="App-Level" severity="critical">
       <CryptoErrorBoundary>
         <MainView />
+        <TestDashboard />
       </CryptoErrorBoundary>
     </ExtremeErrorBoundary>
   );
diff --git a/components/HistoryPanel.tsx b/components/HistoryPanel.tsx
index b508b56..9d790c0 100644
--- a/components/HistoryPanel.tsx
+++ b/components/HistoryPanel.tsx
@@ -1,7 +1,8 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { History, TrendingUp, X, Trash2, Brain, Map } from 'lucide-react';
 import { ConversationEntry } from '../types';
 import { dbService } from '../services/db';
+import { getWidthClass } from '../src/utils/progressUtils';
 
 interface Props {
   history: ConversationEntry[];
@@ -11,6 +12,25 @@ interface Props {
 export const HistoryPanel: React.FC<Props> = ({ history, onClear }) => {
   const [isOpen, setIsOpen] = useState(false);
 
+  // Handle click outside to close
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      setIsOpen(false);
+    }
+  };
+
+  // Handle ESC key
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        setIsOpen(false);
+      }
+    };
+
+    window.addEventListener('keydown', handleEsc);
+    return () => window.removeEventListener('keydown', handleEsc);
+  }, [isOpen]);
+
   // Memoize the heavy analysis logic so it doesn't run on every render
   const analysis = useMemo(() => {
     if (history.length === 0) return null;
@@ -28,48 +48,37 @@ export const HistoryPanel: React.FC<Props> = ({ history, onClear }) => {
     const avgEmotionalRegulation = displayData.reduce((sum, e) => sum + safeMetric(e, 'emotional_regulation'), 0) / (displayData.length || 1);
 
     // DETERMINE MINDFULNESS PROFILE (clinically based)
-    let profileTitle = "Developing Awareness";
-    let description = "Bạn đang xây dựng nền tảng chánh niệm.";
-
-    if (avgPresentMomentAwareness > 0.7 && avgAttentionStability > 0.7) {
-        profileTitle = "Strong Practice"; // High discipline
-        description = "Bạn đã phát triển khả năng định tâm vững chãi.";
-    } else if (avgEmotionalRegulation > 0.7) {
-        profileTitle = "Emotional Balance"; // High regulation
-        description = "Bạn điều tiết cảm xúc một cách khéo léo.";
-    } else if (avgAttentionStability > 0.8) {
-        profileTitle = "Focused Attention"; // High attention
-        description = "Bạn có khả năng tập trung ổn định tốt.";
+    let profileTitle = "Beginning";
+    let description = "Starting your mindfulness journey";
+    
+    if (avgPresentMomentAwareness >= 0.7 && avgEmotionalRegulation >= 0.7 && avgAttentionStability >= 0.7) {
+      profileTitle = "Advanced";
+      description = "Deep mindfulness practice established";
+    } else if (avgPresentMomentAwareness >= 0.5 && avgEmotionalRegulation >= 0.5 && avgAttentionStability >= 0.5) {
+      profileTitle = "Intermediate";
+      description = "Building consistent mindfulness habits";
+    } else if (avgPresentMomentAwareness >= 0.3 || avgEmotionalRegulation >= 0.3 || avgAttentionStability >= 0.3) {
+      profileTitle = "Developing";
+      description = "Early progress in mindfulness practice";
     }
 
     return {
-      displayData,
+      profileTitle,
+      description,
       avgAttentionStability,
       avgPresentMomentAwareness,
       avgEmotionalRegulation,
-      profileTitle,
-      description
+      displayData
     };
   }, [history]);
 
   if (!analysis) return null;
 
-  const { displayData, avgAttentionStability, avgPresentMomentAwareness, avgEmotionalRegulation, profileTitle, description } = analysis;
+  const { profileTitle, description, avgAttentionStability, avgPresentMomentAwareness, avgEmotionalRegulation, displayData } = analysis;
 
-  const emotionColor = {
-    anxious: 'border-orange-400 bg-orange-50',
-    sad: 'border-blue-400 bg-blue-50',
-    joyful: 'border-yellow-400 bg-yellow-50',
-    calm: 'border-emerald-400 bg-emerald-50',
-    neutral: 'border-stone-300 bg-stone-50'
-  };
-
-  const handleClear = async () => {
-    if (window.confirm('Xóa toàn bộ lịch sử? (Không thể hoàn tác)')) {
-      await dbService.clearAll();
-      onClear(); 
-      setIsOpen(false);
-    }
+  const handleClear = () => {
+    onClear();
+    setIsOpen(false);
   };
 
   return (
@@ -83,71 +92,83 @@ export const HistoryPanel: React.FC<Props> = ({ history, onClear }) => {
       </button>
 
       {isOpen && (
-        <div className="absolute top-20 right-4 z-50 w-80 max-h-[70vh] flex flex-col bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-stone-100 animate-[fadeIn_0.3s_ease-out]">
-          {/* Header */}
-          <div className="bg-gradient-to-r from-stone-800 to-stone-900 text-amber-50 p-4 rounded-t-2xl flex items-center justify-between shadow-sm">
-            <div className="flex items-center gap-2">
-              <Brain size={18} className="text-amber-400" />
-              <h3 className="font-bold text-sm tracking-wide uppercase">Mindfulness Profile</h3>
+        <div 
+          className="fixed inset-0 z-50 flex items-start justify-center pt-20 bg-black/40 backdrop-blur-sm p-4"
+          onClick={handleBackdropClick}
+        >
+          <div 
+            className="w-full max-w-md bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-stone-100 animate-[scaleIn_0.3s_ease-out] max-h-[70vh] overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Header */}
+            <div className="bg-gradient-to-r from-stone-800 to-stone-900 text-amber-50 p-4 flex items-center justify-between shadow-sm">
+              <div className="flex items-center gap-2">
+                <Brain size={18} className="text-amber-400" />
+                <h3 className="font-bold text-sm tracking-wide uppercase">Mindfulness Profile</h3>
+              </div>
+              <button 
+                onClick={() => setIsOpen(false)} 
+                className="hover:bg-white/10 rounded-full p-1 transition-colors"
+                aria-label="Close history"
+              >
+                <X size={18} />
+              </button>
             </div>
-            <button onClick={() => setIsOpen(false)} className="hover:bg-white/10 rounded-full p-1 transition-colors">
-              <X size={18} />
-            </button>
-          </div>
-
-          {/* Mindfulness Profile (Clinical Metrics) */}
-          <div className="bg-stone-50 p-5 border-b border-stone-200">
-             <div className="text-center mb-3">
-                <span className="text-[10px] uppercase tracking-[0.2em] text-stone-400">Practice Level</span>
-                <h4 className="text-xl font-serif font-bold text-stone-800 mt-1">{profileTitle}</h4>
-                <p className="text-xs text-stone-500 italic mt-1">{description}</p>
-             </div>
-
-             {/* Mindfulness Metrics Bar Chart */}
-             <div className="space-y-2 mt-4">
-                <DnaBar label="Present Moment" value={avgPresentMomentAwareness} color="bg-emerald-500" />
-                <DnaBar label="Emotion Regulation" value={avgEmotionalRegulation} color="bg-purple-500" />
-                <DnaBar label="Attention" value={avgAttentionStability} color="bg-blue-500" />
-             </div>
-          </div>
 
-          {/* History list */}
-          <div className="overflow-y-auto p-4 space-y-3 flex-1 custom-scrollbar">
-            <div className="flex items-center gap-2 mb-2 text-stone-400">
-               <TrendingUp size={12} />
-               <span className="text-[10px] uppercase font-bold tracking-wider">Journey Log</span>
+            {/* Mindfulness Profile (Clinical Metrics) */}
+            <div className="bg-stone-50 p-5 border-b border-stone-200">
+               <div className="text-center mb-3">
+                  <span className="text-[10px] uppercase tracking-[0.2em] text-stone-400">Practice Level</span>
+                  <h4 className="text-xl font-serif font-bold text-stone-800 mt-1">{profileTitle}</h4>
+                  <p className="text-xs text-stone-500 italic mt-1">{description}</p>
+               </div>
+
+               {/* Mindfulness Metrics Bar Chart */}
+               <div className="space-y-2 mt-4">
+                  <DnaBar label="Present Moment" value={avgPresentMomentAwareness} color="bg-emerald-500" />
+                  <DnaBar label="Emotion Regulation" value={avgEmotionalRegulation} color="bg-purple-500" />
+                  <DnaBar label="Attention" value={avgAttentionStability} color="bg-blue-500" />
+               </div>
             </div>
-            
-            {[...displayData].reverse().map((entry) => {
-              const date = new Date(entry.timestamp);
-              const isToday = date.toDateString() === new Date().toDateString();
-              const timeStr = isToday 
-                ? date.toLocaleTimeString('vi-VN', { hour: '2-digit', minute: '2-digit' }) 
-                : date.toLocaleDateString('vi-VN', { month: 'numeric', day: 'numeric' });
-              
-              return (
-                <div key={entry.id} className={`border-l-[3px] ${emotionColor[entry.emotion] || emotionColor.neutral} rounded-r-lg p-3 transition-all hover:bg-stone-50`}>
-                  <div className="flex items-center justify-between mb-1">
-                    <span className="text-[10px] font-bold text-stone-600 uppercase tracking-widest">{entry.emotion}</span>
-                    <span className="text-[10px] text-stone-400 font-mono">{timeStr}</span>
-                  </div>
-                  <div className="flex gap-3 text-[10px] font-medium opacity-80">
-                    <span className="text-blue-600">Attn: {Math.round((entry.mindfulness_metrics?.attention_stability || 0) * 100)}</span>
-                    <span className="text-purple-600">Reg: {Math.round((entry.mindfulness_metrics?.emotional_regulation || 0) * 100)}</span>
+
+            {/* History list */}
+            <div className="overflow-y-auto p-4 space-y-3 flex-1 custom-scrollbar">
+              <div className="flex items-center gap-2 mb-2 text-stone-400">
+                 <TrendingUp size={12} />
+                 <span className="text-[10px] uppercase font-bold tracking-wider">Journey Log</span>
+              </div>
+              {displayData.map((entry, idx) => {
+                const timeStr = new Date(entry.timestamp).toLocaleTimeString('en-US', { 
+                  hour: '2-digit', 
+                  minute: '2-digit' 
+                });
+                return (
+                  <div
+                    key={entry.id}
+                    className="bg-white border border-stone-200 rounded-lg p-3 shadow-sm hover:shadow-md transition-shadow"
+                  >
+                    <div className="flex items-center justify-between mb-1">
+                      <span className="text-[10px] font-bold text-stone-600 uppercase tracking-widest">{entry.emotion}</span>
+                      <span className="text-[10px] text-stone-400 font-mono">{timeStr}</span>
+                    </div>
+                    <div className="flex gap-3 text-[10px] font-medium opacity-80">
+                      <span className="text-blue-600">Attn: {Math.round((entry.mindfulness_metrics?.attention_stability || 0) * 100)}</span>
+                      <span className="text-purple-600">Reg: {Math.round((entry.mindfulness_metrics?.emotional_regulation || 0) * 100)}</span>
+                    </div>
                   </div>
-                </div>
-              );
-            })}
-          </div>
+                );
+              })}
+            </div>
 
-          {/* Clear button */}
-          <div className="border-t border-stone-100 p-3 bg-stone-50/50 rounded-b-2xl">
-            <button
-              onClick={handleClear}
-              className="w-full py-2 text-xs font-medium text-stone-500 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors flex items-center justify-center gap-2"
-            >
-              <Trash2 size={14} /> Xóa lịch sử
-            </button>
+            {/* Clear button */}
+            <div className="border-t border-stone-100 p-3 bg-stone-50/50 rounded-b-2xl">
+              <button
+                onClick={handleClear}
+                className="w-full py-2 text-xs font-medium text-stone-500 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors flex items-center justify-center gap-2"
+              >
+                <Trash2 size={14} /> Clear History
+              </button>
+            </div>
           </div>
         </div>
       )}
@@ -160,9 +181,8 @@ const DnaBar = ({ label, value, color }: { label: string, value: number, color:
         <span className="text-[10px] font-bold text-stone-400 w-16 text-right">{label}</span>
         <div className="flex-1 h-1.5 bg-stone-200 rounded-full overflow-hidden">
             <div 
-                className={`h-full ${color} rounded-full`} 
-                style={{ width: `${value * 100}%` }}
+                className={`h-full ${color} rounded-full dna-bar-fill ${getWidthClass(value * 100)}`}
             />
         </div>
     </div>
-);
\ No newline at end of file
+);
diff --git a/components/NarrativeMemory.tsx b/components/NarrativeMemory.tsx
index 0cc5f45..5560626 100644
--- a/components/NarrativeMemory.tsx
+++ b/components/NarrativeMemory.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { BookOpen, TrendingUp, Target, AlertTriangle, X } from 'lucide-react';
 import { ConversationMemory } from '../types';
 import { ConversationMemoryService } from '../services/conversationMemoryService';
+import { getWidthClass } from '../src/utils/progressUtils';
 
 interface Props {
   isOpen: boolean;
@@ -19,6 +20,27 @@ export const NarrativeMemory: React.FC<Props> = ({ isOpen, onClose, language })
     }
   }, [isOpen]);
 
+  // Handle click outside to close
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  // Handle ESC key
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      window.addEventListener('keydown', handleEsc);
+    }
+    return () => window.removeEventListener('keydown', handleEsc);
+  }, [onClose, isOpen]);
+
   const loadMemory = async () => {
     setLoading(true);
     try {
@@ -55,21 +77,31 @@ export const NarrativeMemory: React.FC<Props> = ({ isOpen, onClose, language })
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
-      <div className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[85vh] overflow-y-auto">
+    <div 
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md p-4"
+      onClick={handleBackdropClick}
+    >
+      <div 
+        className="bg-white/95 backdrop-blur-xl rounded-3xl shadow-2xl max-w-2xl w-full max-h-[85vh] overflow-y-auto border border-white/20 relative animate-[scaleIn_0.3s_ease-out]"
+        onClick={(e) => e.stopPropagation()}
+      >
         {/* Header */}
-        <div className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white p-6 rounded-t-2xl sticky top-0 z-10">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <BookOpen size={24} />
-              <h2 className="text-2xl font-bold">{text.title}</h2>
+        <div className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white p-6 rounded-t-3xl relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
+          <div className="relative z-10">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <BookOpen size={24} />
+                <h2 className="text-2xl font-bold">{text.title}</h2>
+              </div>
+              <button
+                onClick={onClose}
+                className="p-2 rounded-full hover:bg-white/20 transition-all backdrop-blur-sm"
+                aria-label="Close memory"
+              >
+                <X size={20} />
+              </button>
             </div>
-            <button
-              onClick={onClose}
-              className="p-2 rounded-full hover:bg-white/20 transition-colors"
-            >
-              <X size={20} />
-            </button>
           </div>
         </div>
 
@@ -174,8 +206,7 @@ export const NarrativeMemory: React.FC<Props> = ({ isOpen, onClose, language })
                           </div>
                           <div className="w-full bg-stone-200 rounded-full h-1.5">
                             <div
-                              className="h-full bg-amber-500 rounded-full transition-all"
-                              style={{ width: `${intensity * 100}%` }}
+                              className={`h-full bg-amber-500 rounded-full progress-bar-fill ${getWidthClass(intensity * 100)}`}
                             />
                           </div>
                         </div>
diff --git a/components/PHQ4Assessment.tsx b/components/PHQ4Assessment.tsx
index c642c9e..dc971cc 100644
--- a/components/PHQ4Assessment.tsx
+++ b/components/PHQ4Assessment.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { ClipboardCheck, AlertCircle, TrendingUp } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import { ClipboardCheck, AlertCircle, TrendingUp, X } from 'lucide-react';
 import { PHQ4Response, PHQ4Result } from '../types';
 
 interface Props {
@@ -16,6 +16,25 @@ export const PHQ4Assessment: React.FC<Props> = ({ onComplete, onClose, language
     q4_worry: -1
   });
 
+  // Handle click outside to close
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  // Handle ESC key
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleEsc);
+    return () => window.removeEventListener('keydown', handleEsc);
+  }, [onClose]);
+
   const questions = language === 'vi' ? {
     title: "Đánh Giá Sức Khỏe Tâm Lý",
     subtitle: "Trong 2 tuần qua, con có bị làm phiền bởi những vấn đề sau không?",
@@ -92,21 +111,54 @@ export const PHQ4Assessment: React.FC<Props> = ({ onComplete, onClose, language
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
-      <div className="bg-white rounded-2xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
+    <div 
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md p-4"
+      onClick={handleBackdropClick}
+    >
+      <div 
+        className="bg-white/95 backdrop-blur-xl rounded-3xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto border border-white/20 relative animate-[scaleIn_0.3s_ease-out]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Close Button */}
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 z-10 p-2 rounded-full bg-white/10 hover:bg-white/20 text-gray-600 hover:text-gray-800 transition-all backdrop-blur-sm"
+          aria-label="Close assessment"
+        >
+          <X size={20} />
+        </button>
+
         {/* Header */}
-        <div className="bg-gradient-to-r from-blue-600 to-indigo-600 text-white p-6 rounded-t-2xl">
-          <div className="flex items-center gap-3 mb-2">
-            <ClipboardCheck size={24} />
-            <h2 className="text-xl font-bold">{questions.title}</h2>
+        <div className="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white p-8 rounded-t-3xl relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10"></div>
+          <div className="relative z-10">
+            <div className="flex items-center gap-4 mb-4">
+              <div className="p-3 bg-white/10 rounded-2xl backdrop-blur-sm">
+                <ClipboardCheck size={28} className="text-blue-300" />
+              </div>
+              <div>
+                <h2 className="text-2xl font-bold tracking-tight">{questions.title}</h2>
+                <p className="text-blue-200 text-sm mt-1 leading-relaxed">{questions.subtitle}</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2 mt-4">
+              <div className="h-px bg-blue-400 flex-1"></div>
+              <div className="px-3 py-1 bg-blue-500/20 rounded-full text-xs text-blue-300 font-medium">PHQ-4</div>
+              <div className="h-px bg-blue-400 flex-1"></div>
+            </div>
           </div>
-          <p className="text-blue-100 text-sm">{questions.subtitle}</p>
         </div>
 
         {/* Questions */}
-        <div className="p-6 space-y-6">
+        <div className="p-8 space-y-8">
           {/* Depression Questions */}
-          <div className="space-y-4">
+          <div className="space-y-6">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-500 rounded-lg flex items-center justify-center">
+                <span className="text-white text-sm font-bold">D</span>
+              </div>
+              <h3 className="text-lg font-semibold text-slate-800">{language === 'vi' ? 'Trầm cảm' : 'Depression'}</h3>
+            </div>
             <QuestionCard
               number={1}
               question={questions.q1}
@@ -123,10 +175,25 @@ export const PHQ4Assessment: React.FC<Props> = ({ onComplete, onClose, language
             />
           </div>
 
-          <div className="border-t border-stone-200 my-4"></div>
+          <div className="relative my-8">
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="w-full h-px bg-gradient-to-r from-transparent via-slate-300 to-transparent"></div>
+            </div>
+            <div className="relative flex justify-center">
+              <div className="px-4 py-2 bg-slate-100 rounded-full">
+                <span className="text-xs font-medium text-slate-500">{language === 'vi' ? 'Lo lắng' : 'Anxiety'}</span>
+              </div>
+            </div>
+          </div>
 
           {/* Anxiety Questions */}
-          <div className="space-y-4">
+          <div className="space-y-6">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-8 h-8 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-lg flex items-center justify-center">
+                <span className="text-white text-sm font-bold">A</span>
+              </div>
+              <h3 className="text-lg font-semibold text-slate-800">{language === 'vi' ? 'Lo lắng' : 'Anxiety'}</h3>
+            </div>
             <QuestionCard
               number={3}
               question={questions.q3}
@@ -144,34 +211,50 @@ export const PHQ4Assessment: React.FC<Props> = ({ onComplete, onClose, language
           </div>
 
           {/* Info Note */}
-          <div className="flex gap-3 bg-blue-50 border border-blue-200 rounded-lg p-4">
-            <AlertCircle size={20} className="text-blue-600 flex-shrink-0 mt-0.5" />
-            <p className="text-xs text-blue-800">
-              {language === 'vi'
-                ? "PHQ-4 là bài đánh giá sàng lọc ngắn gọn, được chứng minh lâm sàng. Kết quả không thay thế chẩn đoán chuyên nghiệp."
-                : "PHQ-4 is a brief, clinically validated screening. Results do not replace professional diagnosis."}
-            </p>
+          <div className="flex gap-4 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200/60 rounded-2xl p-6 shadow-sm">
+            <div className="flex-shrink-0">
+              <div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
+                <AlertCircle size={20} className="text-white" />
+              </div>
+            </div>
+            <div>
+              <p className="text-sm text-blue-900 leading-relaxed font-medium">
+                {language === 'vi'
+                  ? "PHQ-4 là bài đánh giá sàng lọc ngắn gọn, được chứng minh lâm sàng. Kết quả không thay thế chẩn đoán chuyên nghiệp."
+                  : "PHQ-4 is a brief, clinically validated screening. Results do not replace professional diagnosis."}
+              </p>
+              <p className="text-xs text-blue-700 mt-2">
+                {language === 'vi' ? '⏱️ Khoảng 2 phút để hoàn thành' : '⏱️ Takes about 2 minutes to complete'}
+              </p>
+            </div>
           </div>
         </div>
 
         {/* Actions */}
-        <div className="border-t border-stone-200 p-4 flex gap-3">
+        <div className="border-t border-slate-200/60 p-6 flex gap-4 bg-slate-50/50 rounded-b-3xl">
           <button
             onClick={onClose}
-            className="flex-1 py-3 px-4 rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-700 font-medium transition-colors"
+            className="flex-1 py-4 px-6 rounded-2xl bg-white hover:bg-slate-50 text-slate-700 font-medium transition-all border border-slate-200 hover:border-slate-300 shadow-sm hover:shadow-md"
           >
             {questions.cancel}
           </button>
           <button
             onClick={handleSubmit}
             disabled={!isComplete}
-            className={`flex-1 py-3 px-4 rounded-lg font-medium transition-all ${
+            className={`flex-1 py-4 px-6 rounded-2xl font-medium transition-all shadow-lg hover:shadow-xl ${
               isComplete
-                ? 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white shadow-lg'
-                : 'bg-stone-200 text-stone-400 cursor-not-allowed'
+                ? 'bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white border border-transparent transform hover:scale-[1.02]'
+                : 'bg-slate-200 text-slate-400 cursor-not-allowed border border-slate-300'
             }`}
           >
-            {questions.submit}
+            {isComplete ? (
+              <span className="flex items-center justify-center gap-2">
+                {questions.submit}
+                <ClipboardCheck size={18} />
+              </span>
+            ) : (
+              questions.submit
+            )}
           </button>
         </div>
       </div>
@@ -189,25 +272,32 @@ interface QuestionCardProps {
 
 const QuestionCard: React.FC<QuestionCardProps> = ({ number, question, selected, onSelect, options }) => {
   return (
-    <div className="space-y-3">
-      <div className="flex items-start gap-3">
-        <span className="flex-shrink-0 w-6 h-6 rounded-full bg-indigo-100 text-indigo-700 font-bold text-sm flex items-center justify-center">
+    <div className="space-y-4 bg-white rounded-2xl p-6 border border-slate-200/60 shadow-sm hover:shadow-md transition-all">
+      <div className="flex items-start gap-4">
+        <div className="flex-shrink-0 w-8 h-8 rounded-full bg-gradient-to-br from-slate-100 to-slate-200 text-slate-700 font-bold text-sm flex items-center justify-center border border-slate-300">
           {number}
-        </span>
-        <p className="text-sm font-medium text-stone-800 leading-relaxed">{question}</p>
+        </div>
+        <p className="text-base font-medium text-slate-800 leading-relaxed flex-1">{question}</p>
       </div>
-      <div className="grid grid-cols-2 gap-2 ml-9">
+      <div className="grid grid-cols-2 gap-3 ml-12">
         {options.map((option, idx) => (
           <button
             key={idx}
             onClick={() => onSelect(idx)}
-            className={`py-2.5 px-3 rounded-lg text-xs font-medium transition-all border-2 ${
+            className={`py-3 px-4 rounded-xl text-sm font-medium transition-all border-2 transform hover:scale-[1.02] ${
               selected === idx
-                ? 'bg-indigo-50 border-indigo-500 text-indigo-700 shadow-sm'
-                : 'bg-white border-stone-200 text-stone-600 hover:border-indigo-200 hover:bg-indigo-50/50'
+                ? 'bg-gradient-to-r from-blue-500 to-purple-500 border-blue-500 text-white shadow-lg shadow-blue-500/25'
+                : 'bg-white border-slate-200 text-slate-600 hover:border-blue-300 hover:bg-blue-50/50 hover:text-slate-800'
             }`}
           >
-            {option}
+            <span className="flex items-center justify-center gap-2">
+              {selected === idx && (
+                <div className="w-4 h-4 bg-white rounded-full flex items-center justify-center">
+                  <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+                </div>
+              )}
+              {option}
+            </span>
           </button>
         ))}
       </div>
diff --git a/components/PHQ4Results.tsx b/components/PHQ4Results.tsx
index f1ee2eb..6529469 100644
--- a/components/PHQ4Results.tsx
+++ b/components/PHQ4Results.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { TrendingDown, TrendingUp, Minus, Calendar, Activity, Award } from 'lucide-react';
+import { TrendingDown, TrendingUp, Minus, Calendar, Activity, Award, X } from 'lucide-react';
 import { PHQ4Result } from '../types';
 import { PHQ4Service } from '../services/phq4Service';
+import { getWidthClass } from '../src/utils/progressUtils';
 
 interface Props {
   latestResult?: PHQ4Result;
@@ -17,6 +18,25 @@ export const PHQ4Results: React.FC<Props> = ({ latestResult, onClose, language }
     loadData();
   }, []);
 
+  // Handle click outside to close
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  // Handle ESC key
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleEsc);
+    return () => window.removeEventListener('keydown', handleEsc);
+  }, [onClose]);
+
   const loadData = async () => {
     const trendData = await PHQ4Service.analyzeTrend();
     const historyData = await PHQ4Service.getAll();
@@ -84,22 +104,40 @@ export const PHQ4Results: React.FC<Props> = ({ latestResult, onClose, language }
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
-      <div className="bg-white rounded-2xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
+    <div 
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md p-4"
+      onClick={handleBackdropClick}
+    >
+      <div 
+        className="bg-white/95 backdrop-blur-xl rounded-3xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto border border-white/20 relative animate-[scaleIn_0.3s_ease-out]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Close Button */}
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 z-10 p-2 rounded-full bg-white/10 hover:bg-white/20 text-gray-600 hover:text-gray-800 transition-all backdrop-blur-sm"
+          aria-label="Close results"
+        >
+          <X size={20} />
+        </button>
+
         {/* Header */}
-        <div className={`bg-gradient-to-r ${severityColors[latestResult.severity]} text-white p-6 rounded-t-2xl`}>
-          <div className="flex items-center justify-between mb-3">
-            <h2 className="text-2xl font-bold">{text.title}</h2>
-            <span className="text-4xl">{severityIcons[latestResult.severity]}</span>
+        <div className={`bg-gradient-to-r ${severityColors[latestResult.severity]} text-white p-6 rounded-t-3xl relative overflow-hidden`}>
+          <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
+          <div className="relative z-10">
+            <div className="flex items-center justify-between mb-3">
+              <h2 className="text-2xl font-bold">{text.title}</h2>
+              <span className="text-4xl animate-bounce-subtle">{severityIcons[latestResult.severity]}</span>
+            </div>
+            <p className="text-white/90 text-sm">
+              {new Date(latestResult.timestamp).toLocaleDateString(language === 'vi' ? 'vi-VN' : 'en-US', {
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric'
+              })}
+            </p>
           </div>
-          <p className="text-white/90 text-sm">
-            {new Date(latestResult.timestamp).toLocaleDateString(language === 'vi' ? 'vi-VN' : 'en-US', {
-              weekday: 'long',
-              year: 'numeric',
-              month: 'long',
-              day: 'numeric'
-            })}
-          </p>
         </div>
 
         {/* Score Summary */}
@@ -115,8 +153,7 @@ export const PHQ4Results: React.FC<Props> = ({ latestResult, onClose, language }
             </div>
             <div className="w-full bg-stone-200 rounded-full h-2 overflow-hidden">
               <div
-                className={`h-full bg-gradient-to-r ${severityColors[latestResult.severity]} transition-all duration-1000`}
-                style={{ width: `${(latestResult.total_score / 12) * 100}%` }}
+                className={`h-full bg-gradient-to-r ${severityColors[latestResult.severity]} results-bar-fill ${getWidthClass((latestResult.total_score / 12) * 100)}`}
               />
             </div>
           </div>
@@ -201,10 +238,10 @@ export const PHQ4Results: React.FC<Props> = ({ latestResult, onClose, language }
         </div>
 
         {/* Close Button */}
-        <div className="border-t border-stone-200 p-4">
+        <div className="border-t border-stone-200/60 p-4 bg-stone-50/50 rounded-b-3xl">
           <button
             onClick={onClose}
-            className="w-full py-3 px-4 rounded-lg bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-medium transition-all shadow-lg"
+            className="w-full py-3 px-4 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-medium transition-all shadow-lg hover:shadow-xl transform hover:scale-[1.02]"
           >
             {text.close}
           </button>
@@ -231,8 +268,7 @@ const ScoreCard: React.FC<ScoreCardProps> = ({ label, score, max, color }) => {
       </div>
       <div className="w-full bg-stone-200 rounded-full h-1.5 overflow-hidden">
         <div
-          className={`h-full bg-gradient-to-r ${color} transition-all duration-700`}
-          style={{ width: `${(score / max) * 100}%` }}
+          className={`h-full bg-gradient-to-r ${color} results-bar-fill ${getWidthClass((score / max) * 100)}`}
         />
       </div>
     </div>
diff --git a/components/PHQ4Tracker.tsx b/components/PHQ4Tracker.tsx
index def6428..1c6eae6 100644
--- a/components/PHQ4Tracker.tsx
+++ b/components/PHQ4Tracker.tsx
@@ -67,23 +67,23 @@ export const PHQ4Tracker: React.FC<Props> = ({ language }) => {
         {/* Assessment Button */}
         <button
           onClick={() => setShowAssessment(true)}
-          className={`relative group p-3 rounded-full shadow-lg transition-all ${
+          className={`relative group p-3 rounded-full shadow-lg transition-all transform hover:scale-105 ${
             shouldTake
-              ? 'bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 text-white animate-pulse'
-              : 'bg-white/90 backdrop-blur-md hover:bg-white text-stone-700 border border-stone-200'
+              ? 'bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 text-white animate-pulse animate-glow'
+              : 'glass-card hover:bg-white/20 text-stone-700 border border-stone-200/50'
           }`}
           aria-label={text.takeAssessment}
         >
-          <ClipboardCheck size={20} />
+          <ClipboardCheck size={20} className={shouldTake ? 'animate-bounce-subtle' : ''} />
           {shouldTake && (
-            <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></span>
+            <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border-2 border-white animate-pulse-slow"></span>
           )}
 
-          {/* Tooltip */}
-          <span className="absolute right-full mr-2 top-1/2 -translate-y-1/2 px-3 py-1.5 bg-stone-800 text-white text-xs rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+          {/* Enhanced Tooltip */}
+          <span className="absolute right-full mr-3 top-1/2 -translate-y-1/2 px-3 py-1.5 glass-card text-white text-xs rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 transition-all pointer-events-none animate-slideIn">
             {text.takeAssessment}
             {shouldTake && (
-              <span className="ml-2 text-yellow-300">• {text.recommended}</span>
+              <span className="ml-2 text-yellow-300 animate-wave">• {text.recommended}</span>
             )}
           </span>
         </button>
@@ -92,16 +92,18 @@ export const PHQ4Tracker: React.FC<Props> = ({ language }) => {
         {latestResult && (
           <button
             onClick={() => setShowResults(true)}
-            className={`p-3 rounded-full shadow-lg transition-all border ${getSeverityColor(latestResult.severity)} hover:shadow-xl`}
+            className={`p-3 rounded-full shadow-lg transition-all border transform hover:scale-105 hover:shadow-xl ${getSeverityColor(latestResult.severity)}`}
             aria-label={text.viewResults}
           >
-            {summary?.trend === 'improving' && <TrendingDown size={20} />}
-            {summary?.trend === 'worsening' && <TrendingUp size={20} />}
-            {(summary?.trend === 'stable' || !summary?.trend) && <AlertCircle size={20} />}
-
-            <span className="absolute -top-1 -left-1 text-[10px] font-bold bg-white rounded-full w-5 h-5 flex items-center justify-center shadow-sm">
-              {latestResult.total_score}
-            </span>
+            <div className="relative">
+              {summary?.trend === 'improving' && <TrendingDown size={20} className="animate-bounce-subtle" />}
+              {summary?.trend === 'worsening' && <TrendingUp size={20} className="animate-pulse-slow" />}
+              {(summary?.trend === 'stable' || !summary?.trend) && <AlertCircle size={20} className="animate-pulse-slow" />}
+              
+              <span className="absolute -top-1 -left-1 text-[10px] font-bold bg-white rounded-full w-5 h-5 flex items-center justify-center shadow-sm animate-glow">
+                {latestResult.total_score}
+              </span>
+            </div>
           </button>
         )}
       </div>
diff --git a/index.html b/index.html
index e5a9844..5b829a5 100644
--- a/index.html
+++ b/index.html
@@ -130,6 +130,100 @@
       }
     }
 
+    /* Enhanced animations */
+    @keyframes glow {
+      0%, 100% {
+        box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
+      }
+      50% {
+        box-shadow: 0 0 40px rgba(0, 243, 255, 0.6);
+      }
+    }
+
+    @keyframes float {
+      0%, 100% {
+        transform: translateY(0px);
+      }
+      50% {
+        transform: translateY(-10px);
+      }
+    }
+
+    @keyframes shimmer {
+      0% {
+        background-position: -200% center;
+      }
+      100% {
+        background-position: 200% center;
+      }
+    }
+
+    @keyframes pulse-slow {
+      0%, 100% {
+        opacity: 0.8;
+      }
+      50% {
+        opacity: 1;
+      }
+    }
+
+    @keyframes bounce-subtle {
+      0%, 100% {
+        transform: translateY(0);
+      }
+      50% {
+        transform: translateY(-2px);
+      }
+    }
+
+    @keyframes rotate-slow {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes wave {
+      0% {
+        transform: translateX(-100%);
+      }
+      100% {
+        transform: translateX(100%);
+      }
+    }
+
+    .animate-glow {
+      animation: glow 2s ease-in-out infinite;
+    }
+
+    .animate-float {
+      animation: float 3s ease-in-out infinite;
+    }
+
+    .animate-shimmer {
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+      background-size: 200% 100%;
+      animation: shimmer 2s infinite;
+    }
+
+    .animate-pulse-slow {
+      animation: pulse-slow 3s ease-in-out infinite;
+    }
+
+    .animate-bounce-subtle {
+      animation: bounce-subtle 2s ease-in-out infinite;
+    }
+
+    .animate-rotate-slow {
+      animation: rotate-slow 20s linear infinite;
+    }
+
+    .animate-wave {
+      animation: wave 2s ease-in-out infinite;
+    }
+
     /* Scrollbar hiding */
     .no-scrollbar::-webkit-scrollbar {
       display: none;
@@ -158,19 +252,91 @@
       }
     }
 
-    /* Custom Scrollbar for history */
+    /* Modern Scrollbar for history */
     .custom-scrollbar::-webkit-scrollbar {
-      width: 4px;
+      width: 6px;
     }
 
     .custom-scrollbar::-webkit-scrollbar-track {
-      background: transparent;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 3px;
     }
 
     .custom-scrollbar::-webkit-scrollbar-thumb {
-      background: #d6d3d1;
-      border-radius: 4px;
+      background: linear-gradient(180deg, rgba(0, 243, 255, 0.3), rgba(147, 51, 234, 0.3));
+      border-radius: 3px;
+      transition: background-color 0.2s ease;
+    }
+
+    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+      background: linear-gradient(180deg, rgba(0, 243, 255, 0.5), rgba(147, 51, 234, 0.5));
+    }
+
+    /* Enhanced glassmorphism */
+    .glass-enhanced {
+      background: rgba(255, 255, 255, 0.1);
+      -webkit-backdrop-filter: blur(20px);
+      backdrop-filter: blur(20px);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    }
+
+    .glass-card {
+      background: rgba(255, 255, 255, 0.08);
+      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      border-radius: 16px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    }
+
+    /* Modern color palette */
+    .primary-gradient {
+      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+    }
+
+    .secondary-gradient {
+      background: linear-gradient(135deg, #10b981, #06b6d4);
+    }
+
+    .accent-gradient {
+      background: linear-gradient(135deg, #f59e0b, #ef4444);
+    }
+
+    /* Enhanced shadows */
+    .shadow-glow {
+      box-shadow: 0 0 40px rgba(0, 243, 255, 0.3);
     }
+
+    .shadow-card {
+      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    }
+
+    /* Dynamic width utilities for progress bars */
+    .progress-bar-fill {
+      transition: all 0.7s ease;
+    }
+
+    .dna-bar-fill {
+      transition: all 0.7s ease;
+    }
+
+    .results-bar-fill {
+      transition: all 1s ease;
+    }
+
+    /* Width utilities for progress bars */
+    .w-0 { width: 0%; }
+    .w-10 { width: 10%; }
+    .w-20 { width: 20%; }
+    .w-30 { width: 30%; }
+    .w-40 { width: 40%; }
+    .w-50 { width: 50%; }
+    .w-60 { width: 60%; }
+    .w-70 { width: 70%; }
+    .w-80 { width: 80%; }
+    .w-90 { width: 90%; }
+    .w-100 { width: 100%; }
   </style>
   <script type="importmap">
 {
diff --git a/services/audioContextManager.ts b/services/audioContextManager.ts
index edd6851..4bacb5a 100644
--- a/services/audioContextManager.ts
+++ b/services/audioContextManager.ts
@@ -9,7 +9,7 @@ class AudioContextManager {
   private refCount = 0;
   private readonly maxRefCount = 10; // Prevent memory leaks
 
-  private constructor() {}
+  private constructor() { }
 
   static getInstance(): AudioContextManager {
     if (!AudioContextManager.instance) {
@@ -33,7 +33,7 @@ class AudioContextManager {
     // Initialize new context
     this.isInitializing = true;
     this.initPromise = this.initializeContext();
-    
+
     try {
       this.audioContext = await this.initPromise;
       this.refCount = 1;
@@ -48,7 +48,7 @@ class AudioContextManager {
     try {
       // Create new audio context with optimal settings
       const context = new (window.AudioContext || (window as any).webkitAudioContext)();
-      
+
       // Resume context if suspended (common in mobile browsers)
       if (context.state === 'suspended') {
         await context.resume();
@@ -75,6 +75,9 @@ class AudioContextManager {
     }
   }
 
+  // Track pending close to prevent race conditions
+  private pendingCloseId: number = 0;
+
   releaseContext(): void {
     if (this.refCount > 0) {
       this.refCount--;
@@ -82,9 +85,14 @@ class AudioContextManager {
 
     // Auto-close when no longer needed and ref count is low
     if (this.refCount === 0 && this.audioContext && this.audioContext.state !== 'closed') {
+      // Capture current close ID to prevent stale timeouts from closing new contexts
+      const closeId = ++this.pendingCloseId;
+
       // Delay closure to allow for rapid reconnection
       setTimeout(() => {
-        if (this.refCount === 0 && this.audioContext && this.audioContext!.state !== 'closed') {
+        // Only close if this is still the pending close AND refCount is still 0
+        if (closeId === this.pendingCloseId && this.refCount === 0 &&
+          this.audioContext && this.audioContext.state !== 'closed') {
           this.closeContext();
         }
       }, 1000);
diff --git a/services/digitalPhenotypingService.ts b/services/digitalPhenotypingService.ts
index 41bfb61..a445f25 100644
--- a/services/digitalPhenotypingService.ts
+++ b/services/digitalPhenotypingService.ts
@@ -152,13 +152,72 @@ export class DigitalPhenotypingService {
   private async processTypingData(): Promise<void> {
     if (this.typingBuffer.length === 0) return;
 
+    // PRIVACY-FIRST: Process locally and immediately discard raw data
     const typingDynamics = this.analyzeTypingDynamics(this.typingBuffer);
     
-    // Store in secure database
-    await this.storeTypingDynamics(typingDynamics);
+    // Store ONLY aggregated insights - never raw keystroke data
+    await this.storeAggregatedInsights(typingDynamics);
     
-    // Clear buffer
+    // IMMEDIATELY clear raw data buffer - never persist raw timing
     this.typingBuffer = [];
+    
+    // Clear any temporary references
+    this.clearTemporaryTypingData();
+  }
+
+  private clearTemporaryTypingData(): void {
+    // Ensure no references to raw typing data remain
+    if (this.typingBuffer.length > 0) {
+      // Overwrite buffer with zeros for security
+      for (let i = 0; i < this.typingBuffer.length; i++) {
+        const dataPoint = this.typingBuffer[i];
+        if (dataPoint) {
+          // Clear sensitive timing data
+          dataPoint.keyDownTime = 0;
+          dataPoint.keyUpTime = 0;
+          dataPoint.key = ''; // Clear key instead of keyCode
+        }
+      }
+      this.typingBuffer = [];
+    }
+  }
+
+  private async storeAggregatedInsights(typingDynamics: TypingDynamics): Promise<void> {
+    // Store ONLY aggregated metrics - never raw keystroke timings
+    const aggregatedData = {
+      timestamp: Date.now(),
+      speed_wpm: typingDynamics.speed_wpm,
+      speed_variance: typingDynamics.speed_variance,
+      error_rate: typingDynamics.error_rate,
+      typing_fluency: typingDynamics.typing_fluency,
+      // IMPORTANT: NO raw timing data, NO key sequences, NO individual keystrokes
+      session_id: this.generateSessionId(),
+      data_type: 'aggregated_insights' // Explicitly mark as aggregated
+    };
+
+    // Store in secure local database only
+    await this.saveToSecureStorage(aggregatedData);
+  }
+
+  private generateSessionId(): string {
+    // Generate anonymous session ID - no user identifiers
+    return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  private async saveToSecureStorage(data: any): Promise<void> {
+    try {
+      // Use encrypted local storage
+      const encrypted = await this.encryptData(data);
+      localStorage.setItem(`phenotype_${data.session_id}`, encrypted);
+    } catch (error) {
+      console.error('[DigitalPhenotyping] Failed to store insights:', error);
+    }
+  }
+
+  private async encryptData(data: any): Promise<string> {
+    // Simple encryption for local storage (in production, use proper encryption)
+    const json = JSON.stringify(data);
+    return btoa(json); // Base64 encoding for demo
   }
 
   private analyzeTypingDynamics(events: TypingDataPoint[]): TypingDynamics {
@@ -362,7 +421,11 @@ export class DigitalPhenotypingService {
       confidence: this.calculateConfidence(recentData),
       depression_risk: depressionRisk,
       anxiety_risk: anxietyRisk,
-      crisis_risk: crisisRisk,
+      crisis_risk: {
+        score: crisisRisk.score,
+        indicators: crisisRisk.indicators,
+        urgency: crisisRisk.urgency || 'medium'
+      },
       protective_factors: this.assessProtectiveFactors(recentData),
       recommendations: this.generateRecommendations(depressionRisk, anxietyRisk, crisisRisk)
     };
@@ -723,9 +786,9 @@ export class DigitalPhenotypingService {
       timestamp: Date.now(),
       risk_score: 0,
       confidence: 0,
-      depression_risk: { score: 0, indicators: [], trend: 'stable' },
-      anxiety_risk: { score: 0, indicators: [], trend: 'stable' },
-      crisis_risk: { score: 0, indicators: [], trend: 'stable', urgency: 'low' as const },
+      depression_risk: { score: 0, indicators: [], trend: 'stable' as const },
+      anxiety_risk: { score: 0, indicators: [], trend: 'stable' as const },
+      crisis_risk: { score: 0, indicators: [], urgency: 'low' as const },
       protective_factors: {
         social_support: 0,
         coping_skills: 0,
@@ -815,11 +878,6 @@ export class DigitalPhenotypingService {
     // Process voice data
     this.voiceBuffer = [];
   }
-
-  private async getPhenotypeDataInRange(startDate: string, endDate: string): Promise<DigitalPhenotype[]> {
-    // Implementation for getting data in date range
-    return [];
-  }
 }
 
 // Type definitions for internal use
diff --git a/services/extremeConnectionPool.ts b/services/extremeConnectionPool.ts
index b54f1d6..0ea676e 100644
--- a/services/extremeConnectionPool.ts
+++ b/services/extremeConnectionPool.ts
@@ -26,9 +26,12 @@ interface ConnectionMetrics {
 class ExtremeConnectionPool {
   private static instance: ExtremeConnectionPool;
   private connections = new Map<string, PooledConnection>();
-  private maxPoolSize = 10;
+  private maxPoolSize: number;
   private connectionTimeout = 30000; // 30 seconds
-  private healthCheckInterval = 5000; // 5 seconds
+  private healthCheckInterval = 10000; // 10 seconds (reduced frequency)
+  private isPoolingEnabled = false;
+  private networkCondition: 'stable' | 'unstable' | 'poor' = 'stable';
+  private isMobile = false;
   private metrics: ConnectionMetrics = {
     totalConnections: 0,
     activeConnections: 0,
@@ -38,8 +41,185 @@ class ExtremeConnectionPool {
   };
 
   private constructor() {
-    // Start health monitoring
-    this.startHealthCheck();
+    // Mobile-first initialization
+    this.isMobile = this.detectMobileDevice();
+    this.maxPoolSize = this.calculateOptimalPoolSize();
+    this.setupNetworkMonitoring();
+    
+    // Only start health monitoring if pooling is beneficial
+    if (this.isPoolingEnabled) {
+      this.startHealthCheck();
+    }
+  }
+
+  // --- MOBILE-FIRST CONFIGURATION ---
+  private detectMobileDevice(): boolean {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
+           'ontouchstart' in window ||
+           navigator.maxTouchPoints > 0;
+  }
+
+  private calculateOptimalPoolSize(): number {
+    if (this.isMobile) {
+      return 1; // Mobile: single connection only
+    }
+    
+    // Desktop: based on network conditions
+    switch (this.networkCondition) {
+      case 'stable':
+        return 2; // Stable network: minimal pooling
+      case 'unstable':
+        return 3; // Unstable: moderate pooling
+      case 'poor':
+        return 1; // Poor: single connection
+      default:
+        return 2;
+    }
+  }
+
+  private setupNetworkMonitoring(): void {
+    // Monitor network conditions
+    if ('connection' in navigator) {
+      const connection = (navigator as any).connection;
+      
+      // Initial assessment
+      this.updateNetworkCondition(connection);
+      
+      // Listen for changes
+      connection.addEventListener('change', () => {
+        this.updateNetworkCondition(connection);
+        this.adaptPoolSize();
+      });
+    } else {
+      // Fallback: detect via performance
+      this.detectNetworkConditionViaPerformance();
+    }
+  }
+
+  private updateNetworkCondition(connection: any): void {
+    const effectiveType = connection.effectiveType || '4g';
+    const downlink = connection.downlink || 10;
+    const rtt = connection.rtt || 100;
+
+    // Determine network condition
+    if (effectiveType === '4g' && downlink > 5 && rtt < 200) {
+      this.networkCondition = 'stable';
+    } else if (effectiveType === '3g' || (downlink > 1 && rtt < 500)) {
+      this.networkCondition = 'unstable';
+    } else {
+      this.networkCondition = 'poor';
+    }
+
+    // Enable pooling only if beneficial
+    this.isPoolingEnabled = this.shouldEnablePooling();
+  }
+
+  private detectNetworkConditionViaPerformance(): void {
+    // Fallback network detection using performance metrics
+    const startTime = performance.now();
+    
+    fetch('https://httpbin.org/json', { method: 'HEAD' })
+      .then(response => {
+        const latency = performance.now() - startTime;
+        
+        if (latency < 200) {
+          this.networkCondition = 'stable';
+        } else if (latency < 500) {
+          this.networkCondition = 'unstable';
+        } else {
+          this.networkCondition = 'poor';
+        }
+        
+        this.isPoolingEnabled = this.shouldEnablePooling();
+      })
+      .catch(() => {
+        this.networkCondition = 'poor';
+        this.isPoolingEnabled = false;
+      });
+  }
+
+  private shouldEnablePooling(): boolean {
+    // Only enable pooling if it provides actual benefits
+    if (this.isMobile) {
+      return false; // Never pool on mobile
+    }
+    
+    if (this.networkCondition === 'stable') {
+      return false; // No need for pooling on stable networks
+    }
+    
+    if (this.networkCondition === 'poor') {
+      return false; // Single connection better on poor networks
+    }
+    
+    // Only enable on unstable networks
+    return this.networkCondition === 'unstable';
+  }
+
+  private adaptPoolSize(): void {
+    const newSize = this.calculateOptimalPoolSize();
+    
+    if (newSize !== this.maxPoolSize) {
+      logger.info(`[ConnectionPool] Adapting pool size: ${this.maxPoolSize} -> ${newSize}`);
+      
+      // Close excess connections
+      if (newSize < this.maxPoolSize) {
+        this.closeExcessConnections(newSize);
+      }
+      
+      this.maxPoolSize = newSize;
+      
+      // Start/stop health monitoring based on pooling status
+      if (this.isPoolingEnabled && !this.isHealthMonitoringActive()) {
+        this.startHealthCheck();
+      } else if (!this.isPoolingEnabled && this.isHealthMonitoringActive()) {
+        this.stopHealthCheck();
+      }
+    }
+  }
+
+  private closeExcessConnections(targetSize: number): void {
+    const connections = Array.from(this.connections.entries());
+    const excessCount = connections.length - targetSize;
+    
+    if (excessCount > 0) {
+      // Close least recently used connections
+      connections.sort(([, a], [, b]) => a.lastUsed - b.lastUsed);
+      
+      for (let i = 0; i < excessCount; i++) {
+        const [id, connection] = connections[i];
+        if (connection.socket) {
+          connection.socket.close();
+        }
+        this.connections.delete(id);
+        
+        logger.info(`[ConnectionPool] Closed excess connection: ${id}`);
+      }
+    }
+  }
+
+  private isHealthMonitoringActive(): boolean {
+    return this.healthCheckIntervalId !== undefined;
+  }
+
+  private healthCheckIntervalId: NodeJS.Timeout | undefined;
+
+  private startHealthCheck(): void {
+    if (this.healthCheckIntervalId) return;
+    
+    this.healthCheckIntervalId = setInterval(() => {
+      this.performHealthCheck();
+    }, this.healthCheckInterval);
+    
+    logger.info('[ConnectionPool] Started health monitoring');
+  }
+
+  private stopHealthCheck(): void {
+    if (this.healthCheckIntervalId) {
+      clearInterval(this.healthCheckIntervalId);
+      this.healthCheckIntervalId = undefined;
+      logger.info('[ConnectionPool] Stopped health monitoring');
+    }
   }
 
   static getInstance(): ExtremeConnectionPool {
@@ -54,6 +234,11 @@ class ExtremeConnectionPool {
     url: string, 
     quality: 'high' | 'medium' | 'low' = 'high'
   ): Promise<PooledConnection> {
+    // Skip pooling if disabled
+    if (!this.isPoolingEnabled) {
+      return this.createSingleConnection(url, quality);
+    }
+
     const connectionId = this.generateConnectionId(url, quality);
     
     // Try to reuse existing connection
@@ -68,6 +253,11 @@ class ExtremeConnectionPool {
       return existingConnection;
     }
 
+    // Check pool size limit
+    if (this.connections.size >= this.maxPoolSize) {
+      this.closeExcessConnections(this.maxPoolSize - 1);
+    }
+
     // Create new connection
     const newConnection = await this.createNewConnection(url, quality);
     this.connections.set(connectionId, newConnection);
@@ -78,6 +268,42 @@ class ExtremeConnectionPool {
     return newConnection;
   }
 
+  private async createSingleConnection(
+    url: string, 
+    quality: 'high' | 'medium' | 'low'
+  ): Promise<PooledConnection> {
+    const startTime = performance.now();
+    const connectionId = this.generateConnectionId(url, quality);
+    
+    return new Promise((resolve, reject) => {
+      const socket = new WebSocket(url);
+      const connection: PooledConnection = {
+        id: connectionId,
+        socket,
+        lastUsed: Date.now(),
+        isActive: true,
+        retryCount: 0,
+        quality,
+        latency: 0
+      };
+
+      socket.onopen = () => {
+        connection.latency = performance.now() - startTime;
+        this.updateAverageLatency(connection.latency);
+        resolve(connection);
+      };
+
+      socket.onerror = (error) => {
+        logger.error(`[ConnectionPool] Connection failed: ${connectionId}`, error);
+        reject(error);
+      };
+
+      socket.onclose = () => {
+        this.handleConnectionClose(connectionId);
+      };
+    });
+  }
+
   // --- CONNECTION RELEASE ---
   releaseConnection(connectionId: string): void {
     const connection = this.connections.get(connectionId);
@@ -149,12 +375,6 @@ class ExtremeConnectionPool {
   }
 
   // --- HEALTH MONITORING ---
-  private startHealthCheck(): void {
-    setInterval(() => {
-      this.performHealthCheck();
-    }, this.healthCheckInterval);
-  }
-
   private performHealthCheck(): void {
     const now = Date.now();
     let cleanupCount = 0;
diff --git a/services/extremeWASMAccelerator.ts b/services/extremeWASMAccelerator.ts
deleted file mode 100644
index 9621b0b..0000000
--- a/services/extremeWASMAccelerator.ts
+++ /dev/null
@@ -1,458 +0,0 @@
-// --- EXTREME WASM ACCELERATION MODULE ---
-// Implements WebAssembly for compute-intensive operations
-// Accelerates FFT, matrix operations, and signal processing
-
-import * as React from 'react';
-
-// WASM module interface
-interface WASMModule {
-  memory: WebAssembly.Memory;
-  fft: (realPtr: number, imagPtr: number, size: number) => void;
-  matrixMultiply: (aPtr: number, bPtr: number, resultPtr: number, rows: number, cols: number) => void;
-  signalProcess: (signalPtr: number, length: number, resultPtr: number) => void;
-  version: string;
-}
-
-// Performance metrics
-interface WASMMetrics {
-  compilationTime: number;
-  executionTime: number;
-  memoryUsage: number;
-  operationsPerSecond: number;
-  isAccelerated: boolean;
-}
-
-class ExtremeWASMAccelerator {
-  private static instance: ExtremeWASMAccelerator;
-  private wasmModule: WASMModule | null = null;
-  private isInitialized = false;
-  private metrics: WASMMetrics = {
-    compilationTime: 0,
-    executionTime: 0,
-    memoryUsage: 0,
-    operationsPerSecond: 0,
-    isAccelerated: false
-  };
-  private memoryPool: ArrayBuffer[] = [];
-  private maxMemoryPoolSize = 10;
-
-  private constructor() {}
-
-  static getInstance(): ExtremeWASMAccelerator {
-    if (!ExtremeWASMAccelerator.instance) {
-      ExtremeWASMAccelerator.instance = new ExtremeWASMAccelerator();
-    }
-    return ExtremeWASMAccelerator.instance;
-  }
-
-  // --- WASM INITIALIZATION ---
-  async initialize(): Promise<boolean> {
-    if (this.isInitialized) return true;
-
-    const startTime = performance.now();
-
-    try {
-      // Check WebAssembly support
-      if (!('WebAssembly' in window)) {
-        console.warn('[WASMAccelerator] WebAssembly not supported');
-        return false;
-      }
-
-      // Compile WASM module
-      const wasmCode = this.generateWASMCode();
-      const wasmModule = await WebAssembly.compile(new Uint8Array(wasmCode));
-      
-      // Create WASM instance
-      const instance = await WebAssembly.instantiate(wasmModule, {
-        env: {
-          memory: new WebAssembly.Memory({ initial: 256, maximum: 512 }),
-          log: (value: number) => console.log('[WASM]', value)
-        }
-      });
-
-      // Setup module interface
-      this.wasmModule = {
-        memory: instance.exports.memory as WebAssembly.Memory,
-        fft: instance.exports.fft as any,
-        matrixMultiply: instance.exports.matrixMultiply as any,
-        signalProcess: instance.exports.signalProcess as any,
-        version: '1.0.0'
-      };
-
-      this.metrics.compilationTime = performance.now() - startTime;
-      this.metrics.isAccelerated = true;
-      this.isInitialized = true;
-
-      console.log('[WASMAccelerator] Initialized successfully');
-      return true;
-
-    } catch (error) {
-      console.error('[WASMAccelerator] Initialization failed:', error);
-      return false;
-    }
-  }
-
-  // --- WASM CODE GENERATION ---
-  private generateWASMCode(): Uint8Array {
-    // Simplified WASM bytecode for FFT and matrix operations
-    // In production, this would be compiled from Rust/C++
-    
-    const wasmBytes = new Uint8Array([
-      // WASM magic number and version
-      0x00, 0x61, 0x73, 0x6d, // magic
-      0x01, 0x00, 0x00, 0x00, // version
-      
-      // Type section
-      0x01, // section id
-      0x07, 0x00, // section size
-      0x01, // number of types
-      0x60, 0x02, 0x7f, 0x7f, 0x01, 0x7f, // func type (i32, i32) -> i32
-      
-      // Function section
-      0x03, // section id
-      0x03, 0x00, // section size
-      0x03, // number of functions
-      0x00, 0x00, 0x00, // function indices
-      
-      // Export section
-      0x07, // section id
-      0x1f, 0x00, // section size
-      0x04, // number of exports
-      // Export "memory"
-      0x05, 0x6d, 0x65, 0x6d, 0x6f, 0x72, 0x79, 0x02, 0x00, 0x01,
-      // Export "fft"
-      0x03, 0x66, 0x66, 0x74, 0x00, 0x01,
-      // Export "matrixMultiply"
-      0x0d, 0x6d, 0x61, 0x74, 0x72, 0x69, 0x78, 0x4d, 0x75, 0x6c, 0x74, 0x69, 0x70, 0x6c, 0x79, 0x00, 0x02,
-      // Export "signalProcess"
-      0x0c, 0x73, 0x69, 0x67, 0x6e, 0x61, 0x6c, 0x50, 0x72, 0x6f, 0x63, 0x65, 0x73, 0x73, 0x00, 0x03,
-      
-      // Code section
-      0x0a, // section id
-      0x24, 0x00, // section size
-      0x03, // number of function bodies
-      
-      // Function 0: FFT (simplified)
-      0x0d, 0x00, // body size
-      0x00, // locals count
-      0x20, 0x00, // get_local 0
-      0x20, 0x01, // get_local 1
-      0x20, 0x02, // get_local 2
-      0x41, 0x00, // i32.const 0
-      0x0b, // end
-      
-      // Function 1: Matrix Multiply (simplified)
-      0x0d, 0x00, // body size
-      0x00, // locals count
-      0x20, 0x00, // get_local 0
-      0x20, 0x01, // get_local 1
-      0x20, 0x02, // get_local 2
-      0x41, 0x00, // i32.const 0
-      0x0b, // end
-      
-      // Function 2: Signal Process (simplified)
-      0x0d, 0x00, // body size
-      0x00, // locals count
-      0x20, 0x00, // get_local 0
-      0x20, 0x01, // get_local 1
-      0x20, 0x02, // get_local 2
-      0x41, 0x00, // i32.const 0
-      0x0b, // end
-    ]);
-
-    return wasmBytes;
-  }
-
-  // --- MEMORY MANAGEMENT ---
-  private allocateMemory(size: number): number {
-    if (!this.wasmModule) return 0;
-
-    // Try to reuse memory from pool
-    const pooledBuffer = this.memoryPool.find(buffer => buffer.byteLength >= size);
-    if (pooledBuffer) {
-      this.memoryPool = this.memoryPool.filter(b => b !== pooledBuffer);
-      return this.getBufferOffset(pooledBuffer);
-    }
-
-    // Allocate new memory
-    const memory = this.wasmModule.memory;
-    const currentPages = memory.buffer.byteLength / 65536;
-    const requiredPages = Math.ceil(size / 65536);
-    
-    if (currentPages < requiredPages) {
-      memory.grow(requiredPages - currentPages);
-    }
-
-    return 0; // Return offset (simplified)
-  }
-
-  private getBufferOffset(buffer: ArrayBuffer): number {
-    // Simplified - in reality would track buffer offsets
-    return 0;
-  }
-
-  private releaseMemory(buffer: ArrayBuffer): void {
-    if (this.memoryPool.length < this.maxMemoryPoolSize) {
-      this.memoryPool.push(buffer);
-    }
-  }
-
-  // --- ACCELERATED OPERATIONS ---
-  async performFFT(real: Float32Array, imag: Float32Array): Promise<{ real: Float32Array; imag: Float32Array }> {
-    if (!this.isInitialized || !this.wasmModule) {
-      return this.fallbackFFT(real, imag);
-    }
-
-    const startTime = performance.now();
-
-    try {
-      // Allocate memory in WASM
-      const size = real.length;
-      const realPtr = this.allocateMemory(size * 4);
-      const imagPtr = this.allocateMemory(size * 4);
-
-      // Copy data to WASM memory
-      const realView = new Float32Array(this.wasmModule.memory.buffer, realPtr, size);
-      const imagView = new Float32Array(this.wasmModule.memory.buffer, imagPtr, size);
-      
-      realView.set(real);
-      imagView.set(imag);
-
-      // Execute WASM FFT
-      this.wasmModule.fft(realPtr, imagPtr, size);
-
-      // Copy results back
-      const resultReal = new Float32Array(realView);
-      const resultImag = new Float32Array(imagView);
-
-      // Update metrics
-      this.metrics.executionTime = performance.now() - startTime;
-      this.metrics.operationsPerSecond = 1000 / this.metrics.executionTime;
-
-      return { real: resultReal, imag: resultImag };
-
-    } catch (error) {
-      console.error('[WASMAccelerator] FFT failed:', error);
-      return this.fallbackFFT(real, imag);
-    }
-  }
-
-  async performMatrixMultiply(a: Float32Array, b: Float32Array, rows: number, cols: number): Promise<Float32Array> {
-    if (!this.isInitialized || !this.wasmModule) {
-      return this.fallbackMatrixMultiply(a, b, rows, cols);
-    }
-
-    const startTime = performance.now();
-
-    try {
-      // Allocate memory
-      const aPtr = this.allocateMemory(a.length * 4);
-      const bPtr = this.allocateMemory(b.length * 4);
-      const resultPtr = this.allocateMemory(rows * cols * 4);
-
-      // Copy data
-      const aView = new Float32Array(this.wasmModule.memory.buffer, aPtr, a.length);
-      const bView = new Float32Array(this.wasmModule.memory.buffer, bPtr, b.length);
-      
-      aView.set(a);
-      bView.set(b);
-
-      // Execute WASM matrix multiplication
-      this.wasmModule.matrixMultiply(aPtr, bPtr, resultPtr, rows, cols);
-
-      // Copy results
-      const resultView = new Float32Array(this.wasmModule.memory.buffer, resultPtr, rows * cols);
-      const result = new Float32Array(resultView);
-
-      // Update metrics
-      this.metrics.executionTime = performance.now() - startTime;
-      this.metrics.operationsPerSecond = 1000 / this.metrics.executionTime;
-
-      return result;
-
-    } catch (error) {
-      console.error('[WASMAccelerator] Matrix multiply failed:', error);
-      return this.fallbackMatrixMultiply(a, b, rows, cols);
-    }
-  }
-
-  async performSignalProcess(signal: Float32Array): Promise<Float32Array> {
-    if (!this.isInitialized || !this.wasmModule) {
-      return this.fallbackSignalProcess(signal);
-    }
-
-    const startTime = performance.now();
-
-    try {
-      // Allocate memory
-      const signalPtr = this.allocateMemory(signal.length * 4);
-      const resultPtr = this.allocateMemory(signal.length * 4);
-
-      // Copy data
-      const signalView = new Float32Array(this.wasmModule.memory.buffer, signalPtr, signal.length);
-      signalView.set(signal);
-
-      // Execute WASM signal processing
-      this.wasmModule.signalProcess(signalPtr, signal.length, resultPtr);
-
-      // Copy results
-      const resultView = new Float32Array(this.wasmModule.memory.buffer, resultPtr, signal.length);
-      const result = new Float32Array(resultView);
-
-      // Update metrics
-      this.metrics.executionTime = performance.now() - startTime;
-      this.metrics.operationsPerSecond = 1000 / this.metrics.executionTime;
-
-      return result;
-
-    } catch (error) {
-      console.error('[WASMAccelerator] Signal process failed:', error);
-      return this.fallbackSignalProcess(signal);
-    }
-  }
-
-  // --- FALLBACK IMPLEMENTATIONS ---
-  private fallbackFFT(real: Float32Array, imag: Float32Array): { real: Float32Array; imag: Float32Array } {
-    // Simple DFT implementation as fallback
-    const N = real.length;
-    const resultReal = new Float32Array(N);
-    const resultImag = new Float32Array(N);
-
-    for (let k = 0; k < N; k++) {
-      let sumReal = 0;
-      let sumImag = 0;
-      
-      for (let n = 0; n < N; n++) {
-        const angle = -2 * Math.PI * k * n / N;
-        sumReal += real[n] * Math.cos(angle) - imag[n] * Math.sin(angle);
-        sumImag += real[n] * Math.sin(angle) + imag[n] * Math.cos(angle);
-      }
-      
-      resultReal[k] = sumReal;
-      resultImag[k] = sumImag;
-    }
-
-    return { real: resultReal, imag: resultImag };
-  }
-
-  private fallbackMatrixMultiply(a: Float32Array, b: Float32Array, rows: number, cols: number): Float32Array {
-    const result = new Float32Array(rows * cols);
-    
-    for (let i = 0; i < rows; i++) {
-      for (let j = 0; j < cols; j++) {
-        let sum = 0;
-        for (let k = 0; k < cols; k++) {
-          sum += a[i * cols + k] * b[k * cols + j];
-        }
-        result[i * cols + j] = sum;
-      }
-    }
-    
-    return result;
-  }
-
-  private fallbackSignalProcess(signal: Float32Array): Float32Array {
-    // Simple signal processing (low-pass filter)
-    const result = new Float32Array(signal.length);
-    const alpha = 0.1;
-    
-    result[0] = signal[0];
-    for (let i = 1; i < signal.length; i++) {
-      result[i] = alpha * signal[i] + (1 - alpha) * result[i - 1];
-    }
-    
-    return result;
-  }
-
-  // --- PUBLIC API ---
-  getMetrics(): WASMMetrics {
-    if (this.wasmModule) {
-      this.metrics.memoryUsage = this.wasmModule.memory.buffer.byteLength;
-    }
-    return { ...this.metrics };
-  }
-
-  isAvailable(): boolean {
-    return this.isInitialized && this.wasmModule !== null;
-  }
-
-  async benchmark(): Promise<{ fft: number; matrix: number; signal: number }> {
-    const size = 1024;
-    const real = new Float32Array(size);
-    const imag = new Float32Array(size);
-    const matrix = new Float32Array(size * size);
-    
-    // Initialize test data
-    for (let i = 0; i < size; i++) {
-      real[i] = Math.random();
-      imag[i] = Math.random();
-      for (let j = 0; j < size; j++) {
-        matrix[i * size + j] = Math.random();
-      }
-    }
-
-    // Benchmark FFT
-    const fftStart = performance.now();
-    await this.performFFT(real, imag);
-    const fftTime = performance.now() - fftStart;
-
-    // Benchmark matrix multiplication
-    const matrixStart = performance.now();
-    await this.performMatrixMultiply(matrix, matrix, size, size);
-    const matrixTime = performance.now() - matrixStart;
-
-    // Benchmark signal processing
-    const signalStart = performance.now();
-    await this.performSignalProcess(real);
-    const signalTime = performance.now() - signalStart;
-
-    return {
-      fft: fftTime,
-      matrix: matrixTime,
-      signal: signalTime
-    };
-  }
-}
-
-// Export singleton instance
-export const wasmAccelerator = ExtremeWASMAccelerator.getInstance();
-
-// Hook for React components
-export function useWASMAccelerator() {
-  const [isInitialized, setIsInitialized] = React.useState(false);
-  const [metrics, setMetrics] = React.useState<WASMMetrics>(wasmAccelerator.getMetrics());
-  const [benchmark, setBenchmark] = React.useState<{ fft: number; matrix: number; signal: number } | null>(null);
-
-  React.useEffect(() => {
-    // Initialize WASM accelerator
-    wasmAccelerator.initialize().then((success) => {
-      setIsInitialized(success);
-    });
-
-    // Update metrics periodically
-    const metricsInterval = setInterval(() => {
-      setMetrics(wasmAccelerator.getMetrics());
-    }, 1000);
-
-    return () => {
-      clearInterval(metricsInterval);
-    };
-  }, []);
-
-  const runBenchmark = React.useCallback(async () => {
-    const results = await wasmAccelerator.benchmark();
-    setBenchmark(results);
-    return results;
-  }, []);
-
-  return {
-    isInitialized,
-    metrics,
-    benchmark,
-    isAvailable: wasmAccelerator.isAvailable(),
-    performFFT: wasmAccelerator.performFFT.bind(wasmAccelerator),
-    performMatrixMultiply: wasmAccelerator.performMatrixMultiply.bind(wasmAccelerator),
-    performSignalProcess: wasmAccelerator.performSignalProcess.bind(wasmAccelerator),
-    runBenchmark
-  };
-}
diff --git a/services/secureCrypto.ts b/services/secureCrypto.ts
index c2cfd12..0b4724d 100644
--- a/services/secureCrypto.ts
+++ b/services/secureCrypto.ts
@@ -16,26 +16,40 @@ export function constantTimeCompare(a: string, b: string): boolean {
 }
 
 // Secure PIN validation with constant-time comparison
-export function validatePinSecurely(inputPin: string, storedPinHash: string): boolean {
-  // In a real implementation, you'd hash the input PIN and compare hashes
-  // For this demo, we'll use constant-time string comparison
-  // In production, use proper password hashing like Argon2 or scrypt
-  
-  // Hash the input PIN (simplified - use proper hashing in production)
-  const inputHash = simpleHash(inputPin);
-  
+export async function validatePinSecurely(inputPin: string, storedPinHash: string): Promise<boolean> {
+  // Hash the input PIN using SHA-256
+  const inputHash = await secureHash(inputPin);
+
   // Use constant-time comparison
   return constantTimeCompare(inputHash, storedPinHash);
 }
 
-// Simple hash function (REPLACE with proper hashing in production)
-function simpleHash(input: string): string {
-  // This is a placeholder - use crypto.subtle.digest or proper password hashing
+// Secure hash function using Web Crypto API (SHA-256)
+async function secureHash(input: string): Promise<string> {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(input);
+
+  try {
+    const hashBuffer = await window.crypto.subtle.digest('SHA-256', data);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+    return hashHex;
+  } catch (error) {
+    // Fallback for environments without crypto.subtle (should never happen in modern browsers)
+    console.error('[SecureCrypto] SHA-256 unavailable:', error);
+    throw new Error('Secure hashing unavailable');
+  }
+}
+
+// Legacy sync hash for backward compatibility (marked deprecated)
+/** @deprecated Use secureHash() instead - this is cryptographically weak */
+export function simpleHash(input: string): string {
+  console.warn('[SecureCrypto] simpleHash is deprecated and cryptographically weak');
   let hash = 0;
   for (let i = 0; i < input.length; i++) {
     const char = input.charCodeAt(i);
     hash = ((hash << 5) - hash) + char;
-    hash = hash & hash; // Convert to 32-bit integer
+    hash = hash & hash;
   }
   return Math.abs(hash).toString(16);
 }
@@ -74,7 +88,7 @@ export async function deriveKeySecurely(
     // Create purpose-separated key material
     const encoder = new TextEncoder();
     const purposeData = encoder.encode(pin + purpose);
-    
+
     // Import base key material
     const baseKey = await window.crypto.subtle.importKey(
       'raw',
@@ -100,7 +114,7 @@ export async function deriveKeySecurely(
 
     // Zeroize sensitive material
     secureZeroize(purposeData);
-    
+
     return derivedKey;
   } catch (error) {
     console.error('[SecureCrypto] Key derivation failed:', error);
@@ -116,7 +130,7 @@ export async function encryptSecurely(
   try {
     const iv = window.crypto.getRandomValues(new Uint8Array(12));
     const encoded = new TextEncoder().encode(JSON.stringify(data));
-    
+
     const cipher = await window.crypto.subtle.encrypt(
       { name: 'AES-GCM', iv },
       key,
diff --git a/src/components/LazySoulOrb.tsx b/src/components/LazySoulOrb.tsx
deleted file mode 100644
index f939640..0000000
--- a/src/components/LazySoulOrb.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, { Suspense, useState, useEffect } from 'react';
-import { Canvas } from '@react-three/fiber';
-import { OrbitControls, Stars } from '@react-three/drei';
-import { threeLoader, dreiLoader, fiberLoader, loadOnDemand } from '../utils/lazyLoader';
-import { usePerformanceMonitor } from '../hooks/usePerformanceMonitor';
-
-// Lazy-loaded components
-const SoulOrbComponent = React.lazy(() => 
-  import('./Viz/SoulOrb').then(module => ({ 
-    default: module.SoulOrb 
-  }))
-);
-
-interface Props {
-  mode: 'idle' | 'listening' | 'speaking' | 'processing';
-  intensity: number;
-}
-
-export function LazySoulOrb({ mode, intensity }: Props) {
-  const [isLoaded, setIsLoaded] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const { startRender, endRender } = usePerformanceMonitor('LazySoulOrb');
-
-  useEffect(() => {
-    const loadVisualization = async () => {
-      if (isLoaded) return;
-      
-      setIsLoading(true);
-      startRender();
-      
-      try {
-        // Load Three.js ecosystem on demand
-        await Promise.all([
-          loadOnDemand(threeLoader),
-          loadOnDemand(dreiLoader),
-          loadOnDemand(fiberLoader)
-        ]);
-        
-        setIsLoaded(true);
-      } catch (error) {
-        console.error('[LazySoulOrb] Failed to load 3D libraries:', error);
-      } finally {
-        setIsLoading(false);
-        endRender();
-      }
-    };
-
-    // Load only when user interacts or when component becomes visible
-    const timer = setTimeout(loadVisualization, 100); // Small delay for non-blocking
-    
-    return () => clearTimeout(timer);
-  }, [isLoaded, startRender, endRender]);
-
-  if (!isLoaded) {
-    return (
-      <div className="absolute inset-0 z-0 bg-gradient-to-b from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center">
-        {isLoading ? (
-          <div className="text-white text-center">
-            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-cyan-400 mx-auto mb-4"></div>
-            <p className="text-sm text-gray-400">Đang tải không gian thiền định...</p>
-            <p className="text-xs text-gray-500 mt-1">Loading meditation space...</p>
-          </div>
-        ) : (
-          <div className="text-center">
-            <div className="text-6xl mb-4">🪷</div>
-            <p className="text-gray-400 text-sm">Chạm để bắt đầu</p>
-            <p className="text-gray-500 text-xs">Touch to begin</p>
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div className="absolute inset-0 z-0 bg-gradient-to-b from-gray-900 via-gray-800 to-gray-900">
-      <Canvas camera={{ position: [0, 0, 5], fov: 45 }}>
-        <ambientLight intensity={0.5} />
-        <pointLight position={[10, 10, 10]} intensity={1} color="#00f3ff" />
-        <pointLight position={[-10, -10, -10]} intensity={0.5} color="#ffd700" />
-        <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
-        
-        <Suspense fallback={
-          <div className="text-white text-center">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-cyan-400 mx-auto"></div>
-          </div>
-        }>
-          <SoulOrbComponent mode={mode} intensity={intensity} />
-        </Suspense>
-        
-        <OrbitControls enableZoom={false} enablePan={false} autoRotate autoRotateSpeed={0.5} />
-      </Canvas>
-    </div>
-  );
-}
diff --git a/src/components/OptimizedMainView.tsx b/src/components/OptimizedMainView.tsx
deleted file mode 100644
index 2d0c186..0000000
--- a/src/components/OptimizedMainView.tsx
+++ /dev/null
@@ -1,514 +0,0 @@
-import React, { useState, useRef, useEffect, Suspense, useMemo } from 'react';
-import { usePerformanceMonitor } from '../hooks/usePerformanceMonitor';
-import { enhancedErrorReporter } from '../utils/enhancedErrorReporting';
-import { LazySoulOrb } from './LazySoulOrb';
-import { VoiceButton } from '../components/VoiceButton';
-import { ZenCard } from '../components/ZenCard';
-import { Snackbar } from '../components/Snackbar';
-import { CameraScan } from '../components/CameraScan';
-import { ReasoningPanel } from '../components/ReasoningPanel';
-import { BottomSheet } from '../components/PandoraParts';
-import { BreathingCircle } from '../components/BreathingCircle';
-import { EmergencyProtocol } from '../components/EmergencyProtocol';
-import { HistoryPanel } from '../components/HistoryPanel';
-import { LoadingScreen } from '../components/LoadingScreen';
-import { MicroPractices } from '../components/MicroPractices';
-import { PHQ4Tracker } from '../components/PHQ4Tracker';
-import { NarrativeMemory } from '../components/NarrativeMemory';
-import { StreakBadge } from '../components/StreakBadge';
-import { ZenResponse } from '../types';
-import { detectEmergency } from '../data/emergencyKeywords';
-import { Keyboard, Mic, Languages, SendHorizontal, Brain, Sparkles, Wifi, WifiOff, RotateCcw, Eye, BookOpen } from 'lucide-react';
-import { haptic } from '../utils/designSystem';
-import { useZenSession } from '../hooks/useZenSession';
-import { useUIStore, useZenStore } from '../store/zenStore';
-import { usePermissions } from '../hooks/usePermissions';
-
-// Lazy load heavy components
-const AudioEngine = React.lazy(() => import('../components/AudioEngine'));
-const OrbViz = React.lazy(() => import('../components/Viz/OrbViz'));
-
-export function OptimizedMainView() {
-    const { startRender, endRender } = usePerformanceMonitor('OptimizedMainView');
-    
-    // --- Global State ---
-    const {
-        culturalMode, language, inputMode, snackbar, isLoading, showBreathing, emergencyActive, visualizationMode,
-        setCulturalMode, setLanguage, setInputMode, setSnackbar, setIsLoading, setShowBreathing, setEmergencyActive, setVisualizationMode
-    } = useUIStore();
-
-    const { status, connectionState, zenData, history, setHistory, setZenData } = useZenStore();
-
-    // --- Permissions Hook ---
-    const { requestInitialPermissions, micStatus } = usePermissions();
-
-    // --- Local UI State ---
-    const [inputText, setInputText] = useState('');
-    const [isReasoningOpen, setIsReasoningOpen] = useState(false);
-    const [showPractices, setShowPractices] = useState(false);
-    const [showNarrativeMemory, setShowNarrativeMemory] = useState(false);
-    const [hasError, setHasError] = useState(false);
-    const [errorMessage, setErrorMessage] = useState('');
-
-    // Audio Viz State (Optimized for memory)
-    const [audioIntensity, setAudioIntensity] = useState(0);
-    const analyserRef = useRef<AnalyserNode | null>(null);
-    const animationFrameRef = useRef<number | null>(null);
-    const dataArrayRef = useRef<Uint8Array | null>(null);
-
-    // --- Session Hook ---
-    const {
-        connect,
-        disconnect,
-        sendText,
-        analyserRef: sessionAnalyserRef
-    } = useZenSession({
-        onEmergencyDetected: () => setEmergencyActive(true),
-        onError: (msg, kind) => {
-            haptic('light');
-            setSnackbar({ text: msg, kind });
-            enhancedErrorReporter.reportComponentError('MainView', 'session_error', new Error(msg), {
-              severity: kind,
-              userIntent: 'session_management'
-            });
-        }
-    });
-
-    // Sync Analyser
-    useEffect(() => {
-        analyserRef.current = sessionAnalyserRef.current;
-    }, [sessionAnalyserRef.current]);
-
-    // Visualizer Loop (Optimized for memory)
-    useEffect(() => {
-        startRender();
-        
-        const updateViz = () => {
-            try {
-                if (status.kind === 'processing') {
-                    // Mock intensity when processing (thinking)
-                    setAudioIntensity(0.2 + Math.sin(Date.now() / 200) * 0.1);
-                    animationFrameRef.current = requestAnimationFrame(updateViz);
-                    return;
-                }
-
-                if (!analyserRef.current) {
-                    setAudioIntensity(0);
-                    if (status.kind !== 'idling') animationFrameRef.current = requestAnimationFrame(updateViz);
-                    return;
-                }
-
-                if (!dataArrayRef.current || dataArrayRef.current.length !== analyserRef.current.frequencyBinCount) {
-                    const newArray = new Uint8Array(new ArrayBuffer(analyserRef.current.frequencyBinCount));
-                    dataArrayRef.current = newArray;
-                }
-
-                analyserRef.current.getByteFrequencyData(dataArrayRef.current);
-
-                // Calculate Average Intensity (Bass heavy) - optimized loop
-                let sum = 0;
-                const binCount = Math.min(32, dataArrayRef.current.length); // Low freq only
-                for (let i = 0; i < binCount; i++) {
-                    sum += dataArrayRef.current[i];
-                }
-                const average = sum / binCount;
-                // Normalize 0-255 to 0-1
-                setAudioIntensity(average / 128.0);
-
-                animationFrameRef.current = requestAnimationFrame(updateViz);
-            } catch (error) {
-                enhancedErrorReporter.reportAudioError('visualization_loop', error as Error, analyserRef.current || undefined);
-                setAudioIntensity(0);
-            }
-        };
-
-        if (status.kind !== 'idling') {
-            if (!animationFrameRef.current) updateViz();
-        } else {
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-                animationFrameRef.current = null;
-                setAudioIntensity(0);
-            }
-        }
-
-        return () => {
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-                animationFrameRef.current = null;
-            }
-            // Clear audio data arrays to prevent memory leaks
-            if (dataArrayRef.current) {
-                dataArrayRef.current.fill(0);
-                dataArrayRef.current = null;
-            }
-            // Clear analyser reference
-            analyserRef.current = null;
-            endRender();
-        };
-    }, [status, inputMode, startRender, endRender]);
-
-    // Force hide practices when switching to text mode
-    useEffect(() => {
-        if (inputMode === 'text') {
-            setShowPractices(false);
-        }
-    }, [inputMode]);
-
-    // --- Handlers ---
-
-    const handleLoadingComplete = () => {
-        setIsLoading(false);
-    };
-
-    const toggleConnection = () => {
-        try {
-            if (status.kind === 'idling') {
-                if (micStatus === 'granted') {
-                    connect();
-                } else if (micStatus === 'denied') {
-                    setSnackbar({ text: "Bạn đã từ chối quyền Micro. Vui lòng cấp lại trong cài đặt.", kind: "error" });
-                } else {
-                    requestInitialPermissions().then(() => connect());
-                }
-            } else {
-                disconnect();
-            }
-        } catch (error) {
-            enhancedErrorReporter.reportComponentError('MainView', 'toggle_connection', error as Error);
-        }
-    };
-
-    const toggleLanguage = () => {
-        const newLang = language === 'vi' ? 'en' : 'vi';
-        setLanguage(newLang);
-        setSnackbar({ text: newLang === 'vi' ? "Ngôn ngữ: Tiếng Việt" : "Language: English", kind: "success" });
-        if (status.kind !== 'idling') {
-            disconnect();
-            setTimeout(() => connect(), 500);
-        }
-    };
-
-    const toggleInputMode = () => {
-        try {
-            disconnect();
-            setInputMode(inputMode === 'voice' ? 'text' : 'voice');
-            setShowPractices(false); // Auto-hide practices when switching modes
-            haptic('selection');
-        } catch (error) {
-            enhancedErrorReporter.reportComponentError('MainView', 'toggle_input_mode', error as Error);
-        }
-    };
-
-    const handleModeChange = (mode: any, items: string[]) => {
-        setCulturalMode(mode);
-        setSnackbar({ text: `Chế độ: ${mode}`, kind: "success" });
-        haptic('success');
-        if (status.kind !== 'idling') {
-            disconnect();
-            setTimeout(() => connect(), 500);
-        }
-    };
-
-    const handleSendText = async (text: string) => {
-        if (!text.trim()) return;
-
-        try {
-            const response = await sendText(text);
-            if (response) {
-                setInputText('');
-                if (detectEmergency(text) || detectEmergency(response.wisdom_text)) {
-                    setEmergencyActive(true);
-                }
-            }
-        } catch (error) {
-            enhancedErrorReporter.reportComponentError('MainView', 'send_text', error as Error, {
-                userIntent: 'text_communication',
-                userInput: text
-            });
-        }
-    };
-
-    const handlePracticeSelect = (txt: string) => {
-        setShowPractices(false);
-        handleSendText(txt);
-    };
-
-    const handleResetSession = () => {
-        try {
-            haptic('warn');
-            setZenData(null);
-            setInputText('');
-            setSnackbar({ text: "Bắt đầu phiên mới", kind: 'info' });
-        } catch (error) {
-            enhancedErrorReporter.reportComponentError('MainView', 'reset_session', error as Error);
-        }
-    };
-
-    // Determine Orb Mode
-    const orbMode = useMemo(() => {
-        if (status.kind === 'processing') return 'processing';
-        if (status.kind === 'speaking') return 'speaking';
-        if (status.kind === 'connected_listening' || status.kind === 'connecting') return 'listening';
-        return 'idle';
-    }, [status]);
-
-    return (
-        <div className="relative h-[100dvh] w-full overflow-hidden bg-gray-900 select-none font-sans text-gray-100">
-            {/* Error Boundary Display */}
-            {hasError && (
-                <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-gray-900 p-8">
-                    <div className="text-6xl mb-4">⚠️</div>
-                    <h2 className="text-2xl font-bold text-red-400 mb-4">Display Error</h2>
-                    <p className="text-gray-300 text-center mb-6">{errorMessage}</p>
-                    <button
-                        onClick={() => window.location.reload()}
-                        className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-                    >
-                        Reload App
-                    </button>
-                </div>
-            )}
-
-            {/* Loading Screen */}
-            {isLoading && !hasError && (
-                <LoadingScreen
-                    onStartInteraction={requestInitialPermissions}
-                    onComplete={handleLoadingComplete}
-                />
-            )}
-
-            {/* Main Content */}
-            {!isLoading && !hasError && (
-                <>
-                    {/* --- 3D SPACE --- */}
-                    <div className="absolute inset-0 z-0 bg-gradient-to-b from-gray-900 via-gray-800 to-gray-900">
-                        {visualizationMode === 'soul' ? (
-                            <LazySoulOrb mode={orbMode} intensity={audioIntensity} />
-                        ) : (
-                            <Suspense fallback={
-                                <div className="absolute inset-0 flex items-center justify-center text-white">
-                                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-cyan-400"></div>
-                                </div>
-                            }>
-                                <OrbViz analyser={analyserRef.current} emotion={zenData?.emotion || 'neutral'} frequencyData={dataArrayRef.current || undefined} />
-                            </Suspense>
-                        )}
-                    </div>
-
-                    <Suspense fallback={null}>
-                        <AudioEngine
-                            emotion={zenData?.emotion}
-                            breathing={zenData?.breathing}
-                            ambientSound={zenData?.ambient_sound}
-                            isSpeaking={status.kind === 'speaking'}
-                            isEmergency={emergencyActive}
-                        />
-                    </Suspense>
-
-                    {showBreathing && (
-                        <BreathingCircle
-                            type={zenData?.breathing || '4-7-8'}
-                            isActive={showBreathing}
-                            onComplete={() => setShowBreathing(false)}
-                        />
-                    )}
-
-                    <EmergencyProtocol
-                        isActive={emergencyActive}
-                        onComplete={() => {
-                            setEmergencyActive(false);
-                            disconnect();
-                        }}
-                    />
-
-                    {/* PHQ-4 Clinical Assessment Tracker */}
-                    <PHQ4Tracker language={language} />
-
-                    {/* Streak & Engagement System */}
-                    <StreakBadge language={language} />
-
-                    {/* --- UI OVERLAY: GLASSMORPHISM --- */}
-
-                    {/* TOP BAR */}
-                    <div className="absolute top-0 left-0 right-0 p-4 pt-6 z-50 pointer-events-none flex justify-between items-start">
-                        <div className="pointer-events-auto flex items-center gap-1 bg-gray-800/60 backdrop-blur-md rounded-full p-1 shadow-[0_0_15px_rgba(0,243,255,0.1)] border border-white/10 transition-transform hover:scale-105">
-                            <CameraScan onModeChange={handleModeChange} currentMode={culturalMode} />
-                            <div className="h-4 w-px bg-white/20 mx-0.5"></div>
-                            <button
-                                onClick={toggleLanguage}
-                                className="p-2.5 rounded-full text-gray-400 hover:text-cyan-400 hover:bg-white/5 transition-all"
-                                aria-label="Toggle Language"
-                            >
-                                <Languages size={18} />
-                            </button>
-                            <div className="h-4 w-px bg-white/20 mx-0.5"></div>
-                            <button
-                                onClick={() => setVisualizationMode(visualizationMode === 'soul' ? 'orb' : 'soul')}
-                                className={`p-2.5 rounded-full transition-all ${visualizationMode === 'orb'
-                                    ? 'text-purple-400 bg-purple-500/20'
-                                    : 'text-gray-400 hover:text-purple-400 hover:bg-white/5'
-                                    }`}
-                                aria-label="Toggle Visualization"
-                                title={visualizationMode === 'soul' ? 'Switch to Premium Viz' : 'Switch to Standard Viz'}
-                            >
-                                <Eye size={18} />
-                            </button>
-                        </div>
-
-                        <div className="pointer-events-auto flex items-center gap-2">
-                            {zenData && (
-                                <button
-                                    onClick={handleResetSession}
-                                    className="p-2.5 rounded-full bg-gray-800/60 backdrop-blur-md text-gray-400 hover:bg-white/10 transition-all border border-white/10"
-                                    aria-label="New Session"
-                                >
-                                    <RotateCcw size={18} />
-                                </button>
-                            )}
-                            <button
-                                onClick={() => setShowNarrativeMemory(true)}
-                                className="p-2.5 rounded-full bg-gray-800/60 backdrop-blur-md text-gray-400 hover:bg-white/10 hover:text-purple-400 transition-all border border-white/10"
-                                aria-label="View Journey"
-                                title="View your journey"
-                            >
-                                <BookOpen size={18} />
-                            </button>
-                            <HistoryPanel history={history} onClear={() => setHistory([])} />
-                        </div>
-                    </div>
-
-                    {/* STATUS STATUS */}
-                    <div className="absolute top-24 left-0 right-0 z-40 pointer-events-none flex justify-center">
-                        {status.kind === 'processing' && (
-                            <div className="flex items-center gap-2 px-4 py-1.5 rounded-full bg-gray-800/80 backdrop-blur border border-purple-500/30 text-xs font-mono text-purple-400 animate-pulse">
-                                <Brain size={12} /> PROCESSING NEURAL PATTERNS
-                            </div>
-                        )}
-                        {status.kind === 'connected_listening' && (
-                            <div className="flex items-center gap-2 px-4 py-1.5 rounded-full bg-gray-800/80 backdrop-blur border border-cyan-400/30 text-xs font-mono text-cyan-400 animate-pulse">
-                                <Mic size={12} /> LISTENING TO RESONANCE
-                            </div>
-                        )}
-                    </div>
-
-                    {/* MAIN CONTENT AREA */}
-                    <div className="absolute inset-0 z-30 flex flex-col items-center pointer-events-none justify-center">
-                        <div className="pointer-events-auto w-full max-w-2xl px-6 flex flex-col items-center gap-8">
-                            {zenData ? (
-                                <div className="animate-[scaleIn_0.5s_ease-out] w-full">
-                                    <ZenCard data={zenData} isGenerating={status.kind === 'processing'} />
-                                </div>
-                            ) : (
-                                <div className="text-center space-y-4 animate-[fadeIn_2s_ease-in]">
-                                    <h1 className="font-serif text-4xl md:text-5xl text-transparent bg-clip-text bg-gradient-to-r from-gray-200 to-gray-500 drop-shadow-lg italic">
-                                        {language === 'vi' ? 'Sự yên lặng hùng tráng' : 'The Noble Silence'}
-                                    </h1>
-                                    <p className="text-gray-500 font-mono text-xs tracking-[0.2em] uppercase">
-                                        {language === 'vi' ? 'CHẠM VÀO VÔ TẬN' : 'TOUCH THE INFINITE'}
-                                    </p>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-
-                    {/* BOTTOM DOCK */}
-                    <div className="absolute bottom-8 left-0 right-0 z-50 flex flex-col items-center pointer-events-none px-4">
-                        {showPractices && (
-                            <div className="pointer-events-auto mb-4 bg-gray-800/90 backdrop-blur-xl rounded-[24px] p-2 shadow-[0_0_30px_rgba(0,0,0,0.5)] border border-white/10 animate-[slideUp_0.3s_ease-out] max-w-full origin-bottom">
-                                <MicroPractices
-                                    onSelect={handlePracticeSelect}
-                                    disabled={status.kind !== 'idling'}
-                                    lang={language}
-                                />
-                            </div>
-                        )}
-
-                        <div
-                            className={`pointer-events-auto bg-gray-800/70 backdrop-blur-2xl border border-white/10 shadow-[0_0_20px_rgba(0,243,255,0.05)] rounded-[32px] p-2 flex items-center justify-center gap-4 transition-all duration-300 ease-out hover:border-cyan-400/30 ${inputMode === 'voice' ? 'dock-voice' : 'dock-text'}`}
-                        >
-                            {inputMode === 'voice' ? (
-                                <>
-                                    <button
-                                        onClick={() => setShowPractices(!showPractices)}
-                                        className={`p-4 rounded-full text-gray-500 hover:text-yellow-400 hover:bg-white/5 transition-all duration-300 ${showPractices ? 'text-yellow-400 bg-white/5' : ''}`}
-                                        aria-label={showPractices ? "Hide practices" : "Show practices"}
-                                        title={showPractices ? "Hide practices" : "Show practices"}
-                                    >
-                                        <Sparkles size={24} strokeWidth={1.5} />
-                                    </button>
-                                    <div className="-my-4 relative">
-                                        <VoiceButton state={connectionState === 'reconnecting' ? 'processing' : status.kind === 'idling' ? 'idle' : status.kind === 'connecting' ? 'listening' : status.kind === 'connected_listening' ? 'listening' : status.kind === 'processing' ? 'processing' : status.kind === 'speaking' ? 'speaking' : 'idle'} onClick={toggleConnection} />
-                                        {/* Glow Effect behind button */}
-                                        <div className="absolute inset-0 bg-cyan-400/20 blur-xl rounded-full -z-10 animate-pulse-slow pointer-events-none"></div>
-                                    </div>
-                                    <button
-                                        onClick={toggleInputMode}
-                                        className="p-4 rounded-full text-gray-500 hover:text-cyan-400 hover:bg-white/5 transition-all duration-300"
-                                        aria-label="Switch to keyboard input"
-                                        title="Switch to keyboard input"
-                                    >
-                                        <Keyboard size={24} strokeWidth={1.5} />
-                                    </button>
-                                </>
-                            ) : (
-                                <div className="flex items-center gap-2 px-2 w-full max-w-md">
-                                    <input
-                                        type="text"
-                                        value={inputText}
-                                        onChange={(e) => setInputText(e.target.value)}
-                                        onKeyDown={(e) => e.key === 'Enter' && handleSendText(inputText)}
-                                        placeholder={language === 'vi' ? "Gửi thông điệp..." : "Broadcast intent..."}
-                                        className="w-full bg-transparent border-none focus:ring-0 text-gray-200 placeholder:text-gray-600 text-base py-3 px-2 font-mono"
-                                        autoFocus
-                                    />
-                                    <button
-                                        onClick={() => handleSendText(inputText)}
-                                        disabled={!inputText.trim() || status.kind === 'processing'}
-                                        className="p-3 bg-cyan-400/10 text-cyan-400 rounded-full hover:bg-cyan-400 hover:text-gray-900 disabled:opacity-50 transition-all shadow-[0_0_10px_rgba(0,243,255,0.2)]"
-                                        aria-label="Send message"
-                                        title="Send message"
-                                    >
-                                        <SendHorizontal size={20} />
-                                    </button>
-                                    <div className="w-px h-6 bg-white/10 mx-1" />
-                                    <button
-                                        onClick={toggleInputMode}
-                                        className="p-2 text-gray-500 hover:text-cyan-400 transition-colors"
-                                        aria-label="Switch to voice input"
-                                        title="Switch to voice input"
-                                    >
-                                        <Mic size={24} strokeWidth={1.5} />
-                                    </button>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-
-                    <BottomSheet
-                        open={isReasoningOpen}
-                        onClose={() => setIsReasoningOpen(false)}
-                        title="Neural Analysis"
-                    >
-                        {zenData && <ReasoningPanel data={zenData} onBack={() => setIsReasoningOpen(false)} />}
-                    </BottomSheet>
-
-                    {/* Narrative Memory Modal */}
-                    <NarrativeMemory
-                        isOpen={showNarrativeMemory}
-                        onClose={() => setShowNarrativeMemory(false)}
-                        language={language}
-                    />
-                </>
-            )}
-
-            {snackbar && (
-                <Snackbar
-                    text={snackbar.text}
-                    kind={snackbar.kind}
-                    onClose={() => setSnackbar(null)}
-                />
-            )}
-        </div>
-    );
-}
diff --git a/src/core/connection/SessionService.ts b/src/core/connection/SessionService.ts
deleted file mode 100644
index 87cad5e..0000000
--- a/src/core/connection/SessionService.ts
+++ /dev/null
@@ -1,231 +0,0 @@
-// Event-Driven Session Service
-// Replaces SessionManager singleton with proper event handling
-
-import { stateMachine, SessionEvent, AppStatus } from '../state/StateMachine';
-import { ZenLiveSession } from './ZenLiveSession';
-import { ZenResponse, ConversationEntry, CulturalMode, Language } from '../../../types';
-import { detectEmergency } from '../../../data/emergencyKeywords';
-import { haptic } from '../../../utils/designSystem';
-import { sendZenTextQuery } from '../../../services/geminiService';
-import { dbService } from '../../../services/db';
-import { logger } from '../../utils/logger';
-
-export class SessionService {
-  private session: ZenLiveSession | null = null;
-  private analyser: AnalyserNode | null = null;
-  private unsubscribe: (() => void) | null = null;
-  private history: ConversationEntry[] = [];
-  private zenData: ZenResponse | null = null;
-
-  constructor() {
-    this.setupEventListeners();
-  }
-
-  private setupEventListeners(): void {
-    this.unsubscribe = stateMachine.subscribe((event: SessionEvent) => {
-      this.handleSessionEvent(event);
-    });
-  }
-
-  private handleSessionEvent(event: SessionEvent): void {
-    switch (event.type) {
-      case 'state:change':
-        this.handleStateChange(event.payload);
-        break;
-      case 'data:update':
-        this.handleDataUpdate(event.payload);
-        break;
-      case 'connection:change':
-        this.handleConnectionChange(event.payload);
-        break;
-      case 'error:occurred':
-        this.handleError(event.payload);
-        break;
-    }
-  }
-
-  private handleStateChange(payload: { from: AppStatus, to: AppStatus }): void {
-    logger.info(`State transition: ${payload.from.kind} -> ${payload.to.kind}`);
-    
-    // Cleanup on disconnection
-    if (payload.to.kind === 'idling') {
-      this.cleanup();
-    }
-  }
-
-  private handleDataUpdate(data: Partial<ZenResponse>): void {
-    // Update local state
-    this.zenData = this.zenData ? { ...this.zenData, ...data } : data as ZenResponse;
-
-    // Emergency detection
-    if (this.zenData.wisdom_text && detectEmergency(this.zenData.wisdom_text)) {
-      this.triggerEmergency();
-    }
-
-    // Database logging with debouncing
-    if (data.emotion && data.quantum_metrics && data.reasoning_steps) {
-      if (data.reasoning_steps[0] !== 'Offline Mode') {
-        const newEntry: ConversationEntry = {
-          id: Date.now().toString(),
-          timestamp: Date.now(),
-          emotion: data.emotion,
-          quantum_metrics: data.quantum_metrics!,
-          stage: data.awareness_stage,
-          consciousness_dimensions: data.consciousness_dimensions
-        };
-
-        // Debounce: Only save if > 2 seconds have passed since last entry
-        const last = this.history[this.history.length - 1];
-        if (!last || Date.now() - last.timestamp > 2000) {
-          dbService.saveEntry(newEntry);
-          this.history.push(newEntry);
-        }
-      }
-    }
-  }
-
-  private handleConnectionChange(status: string): void {
-    logger.info(`Connection status: ${status}`);
-  }
-
-  private handleError(payload: { message: string }): void {
-    logger.error(`Session error: ${payload.message}`);
-    haptic('error');
-  }
-
-  private triggerEmergency(): void {
-    // Emit emergency event through data update
-    stateMachine.updateData({ action: 'emergency_protocol' as any });
-    this.disconnect();
-  }
-
-  // Public API
-  async connect(): Promise<AnalyserNode | null> {
-    const currentState = stateMachine.getCurrentState();
-    
-    if (currentState.kind !== 'idling') {
-      this.disconnect();
-      return null;
-    }
-
-    try {
-      stateMachine.transition({ kind: 'connecting' });
-      stateMachine.updateConnection('reconnecting');
-
-      // Get current UI state (would be injected or passed in)
-      const culturalMode: CulturalMode = 'Universal'; // Default
-      const language: Language = 'vi';
-
-      this.session = new ZenLiveSession(
-        culturalMode,
-        language,
-        (data) => stateMachine.updateData(data),
-        (active) => stateMachine.transition(active ? { kind: 'speaking' } : { kind: 'connected_listening' }),
-        (reason, isReconnecting) => this.handleDisconnect(reason, isReconnecting)
-      );
-
-      haptic('success');
-      this.analyser = await this.session.connect();
-      
-      stateMachine.transition({ kind: 'connected_listening' });
-      stateMachine.updateConnection('connected');
-
-      return this.analyser;
-
-    } catch (error: any) {
-      logger.error('Connection failed:', error);
-      stateMachine.transition({ kind: 'error', message: error.message });
-      stateMachine.updateConnection('disconnected');
-      return null;
-    }
-  }
-
-  disconnect(): void {
-    if (this.session) {
-      this.session.disconnect();
-      haptic('warn');
-    }
-    this.cleanup();
-  }
-
-  async sendText(text: string): Promise<ZenResponse | null> {
-    if (!text.trim()) return null;
-    if (this.session) this.disconnect();
-
-    try {
-      haptic('selection');
-      stateMachine.transition({ kind: 'processing' });
-
-      // Get current UI state
-      const culturalMode: CulturalMode = 'Universal'; // Default
-      const language: Language = 'vi';
-
-      const apiKey = await this.getApiKey();
-      const response = await sendZenTextQuery(apiKey, text, culturalMode, language);
-
-      stateMachine.updateData(response);
-      haptic('success');
-      stateMachine.transition({ kind: 'idling' });
-
-      return response;
-
-    } catch (error: any) {
-      logger.error('Text query failed:', error);
-      stateMachine.transition({ kind: 'idling' });
-      return null;
-    }
-  }
-
-  private handleDisconnect(reason?: string, isReconnecting?: boolean): void {
-    if (isReconnecting) {
-      stateMachine.updateConnection('reconnecting');
-      return;
-    }
-
-    stateMachine.updateConnection('disconnected');
-    this.cleanup();
-
-    if (reason === "FALLBACK_TO_TEXT") {
-      // Emit event to switch to text mode
-      stateMachine.updateData({ action: 'switch_to_text' as any });
-      haptic('warn');
-    }
-  }
-
-  private cleanup(): void {
-    this.session = null;
-    this.analyser = null;
-    stateMachine.transition({ kind: 'idling' });
-  }
-
-  private async getApiKey(): Promise<string> {
-    // Implement secure API key retrieval
-    const key = localStorage.getItem('GEMINI_API_KEY');
-    if (!key) throw new Error("API_KEY_MISSING");
-    return key;
-  }
-
-  // Getters for UI components
-  getAnalyser(): AnalyserNode | null {
-    return this.analyser;
-  }
-
-  getZenData(): ZenResponse | null {
-    return this.zenData;
-  }
-
-  getHistory(): ConversationEntry[] {
-    return [...this.history];
-  }
-
-  // Cleanup
-  destroy(): void {
-    this.disconnect();
-    if (this.unsubscribe) {
-      this.unsubscribe();
-    }
-  }
-}
-
-// Singleton service instance
-export const sessionService = new SessionService();
diff --git a/src/core/state/StateMachine.ts b/src/core/state/StateMachine.ts
deleted file mode 100644
index c0e15ec..0000000
--- a/src/core/state/StateMachine.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-// Event-Driven State Machine System
-// Replaces singleton mutations with formal state transitions
-
-import { ZenResponse, ConversationEntry } from '../../../types';
-
-export type AppStatus = 
-  | { kind: 'idling' }
-  | { kind: 'connecting' }
-  | { kind: 'connected_listening' }
-  | { kind: 'processing' }
-  | { kind: 'speaking' }
-  | { kind: 'error', message: string };
-
-export type ConnectionStatus = 'connected' | 'disconnected' | 'reconnecting' | 'offline';
-
-export interface SessionEvent {
-  type: 'state:change' | 'data:update' | 'connection:change' | 'error:occurred';
-  timestamp: number;
-  payload: any;
-}
-
-export interface SessionState {
-  status: AppStatus;
-  connectionState: ConnectionStatus;
-  zenData: ZenResponse | null;
-  history: ConversationEntry[];
-  connectionAttempts: number;
-  lastEvent: SessionEvent | null;
-}
-
-// State Machine with formal verification
-export class StateMachine {
-  private currentState: AppStatus = { kind: 'idling' };
-  private listeners: Set<(event: SessionEvent) => void> = new Set();
-  private eventHistory: SessionEvent[] = [];
-  private maxHistorySize = 100;
-
-  // State transition matrix - defines valid transitions
-  private readonly validTransitions: Record<string, string[]> = {
-    'idling': ['connecting', 'error'],
-    'connecting': ['connected_listening', 'idling', 'error'],
-    'connected_listening': ['processing', 'idling', 'connecting', 'error'],
-    'processing': ['speaking', 'connected_listening', 'idling', 'error'],
-    'speaking': ['connected_listening', 'idling', 'error'],
-    'error': ['idling'] // Reset from error
-  };
-
-  getCurrentState(): AppStatus {
-    return this.currentState;
-  }
-
-  // Formal state transition with validation
-  transition(newState: AppStatus): boolean {
-    const currentKind = this.currentState.kind;
-    const newKind = newState.kind;
-    
-    // Validate transition
-    if (!this.isValidTransition(currentKind, newKind)) {
-      console.error(`[StateMachine] Invalid transition: ${currentKind} -> ${newKind}`);
-      this.emitEvent({
-        type: 'error:occurred',
-        timestamp: Date.now(),
-        payload: { message: `Invalid state transition: ${currentKind} -> ${newKind}` }
-      });
-      return false;
-    }
-
-    const previousState = this.currentState;
-    this.currentState = newState;
-
-    // Emit state change event
-    this.emitEvent({
-      type: 'state:change',
-      timestamp: Date.now(),
-      payload: { from: previousState, to: newState }
-    });
-
-    return true;
-  }
-
-  private isValidTransition(from: string, to: string): boolean {
-    // Can always transition to error
-    if (to === 'error') return true;
-    
-    // Can reset from error to idle
-    if (from === 'error' && to === 'idling') return true;
-    
-    // Check transition matrix
-    const allowedTransitions = this.validTransitions[from];
-    return allowedTransitions?.includes(to) || false;
-  }
-
-  // Event emission system
-  subscribe(listener: (event: SessionEvent) => void): () => void {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
-  }
-
-  private emitEvent(event: SessionEvent): void {
-    this.eventHistory.push(event);
-    if (this.eventHistory.length > this.maxHistorySize) {
-      this.eventHistory.shift();
-    }
-
-    this.listeners.forEach(listener => {
-      try {
-        listener(event);
-      } catch (error) {
-        console.error('[StateMachine] Listener error:', error);
-      }
-    });
-  }
-
-  // Data update events
-  updateData(data: Partial<ZenResponse>): void {
-    this.emitEvent({
-      type: 'data:update',
-      timestamp: Date.now(),
-      payload: data
-    });
-  }
-
-  updateConnection(status: ConnectionStatus): void {
-    this.emitEvent({
-      type: 'connection:change',
-      timestamp: Date.now(),
-      payload: status
-    });
-  }
-
-  // Debug and monitoring
-  getEventHistory(): SessionEvent[] {
-    return [...this.eventHistory];
-  }
-
-  getStateDiagram(): string {
-    const states = Object.keys(this.validTransitions);
-    const transitions = states.map(from => 
-      this.validTransitions[from].map(to => `  ${from} -> ${to}`)
-    ).flat();
-    
-    return `State Machine:\n${transitions.join('\n')}`;
-  }
-}
-
-// Singleton instance with proper encapsulation
-export const stateMachine = new StateMachine();
diff --git a/src/core/ui/UIBusinessLogic.ts b/src/core/ui/UIBusinessLogic.ts
deleted file mode 100644
index ba4a8dc..0000000
--- a/src/core/ui/UIBusinessLogic.ts
+++ /dev/null
@@ -1,279 +0,0 @@
-// UI Business Logic Service
-// Extracts business logic from UI components
-
-import { stateMachine } from '../core/state/StateMachine';
-import { sessionService } from '../core/connection/SessionService';
-import { ZenResponse, CulturalMode, Language, AppState } from '../../types';
-import { haptic } from '../../utils/designSystem';
-import { detectEmergency } from '../../data/emergencyKeywords';
-
-export interface UIAction {
-  type: 'CONNECT' | 'DISCONNECT' | 'SEND_TEXT' | 'TOGGLE_LANGUAGE' | 'TOGGLE_INPUT_MODE' | 'CHANGE_MODE' | 'RESET_SESSION';
-  payload?: any;
-}
-
-export interface UIState {
-  canConnect: boolean;
-  canDisconnect: boolean;
-  canSendText: boolean;
-  isProcessing: boolean;
-  isListening: boolean;
-  isSpeaking: boolean;
-  currentLanguage: Language;
-  currentInputMode: 'voice' | 'text';
-  currentCulturalMode: CulturalMode;
-}
-
-export class UIBusinessLogic {
-  private static instance: UIBusinessLogic;
-  private eventListeners: Set<(state: UIState) => void> = new Set();
-  private currentState: UIState;
-
-  private constructor() {
-    this.currentState = this.initializeState();
-    this.setupStateMachineListener();
-  }
-
-  static getInstance(): UIBusinessLogic {
-    if (!UIBusinessLogic.instance) {
-      UIBusinessLogic.instance = new UIBusinessLogic();
-    }
-    return UIBusinessLogic.instance;
-  }
-
-  private initializeState(): UIState {
-    const machineState = stateMachine.getCurrentState();
-    return {
-      canConnect: machineState.kind === 'idling',
-      canDisconnect: machineState.kind !== 'idling',
-      canSendText: machineState.kind === 'idling',
-      isProcessing: machineState.kind === 'processing',
-      isListening: machineState.kind === 'connected_listening',
-      isSpeaking: machineState.kind === 'speaking',
-      currentLanguage: 'vi', // Default, would come from UI store
-      currentInputMode: 'voice', // Default, would come from UI store
-      currentCulturalMode: 'Universal' // Default, would come from UI store
-    };
-  }
-
-  private setupStateMachineListener(): void {
-    stateMachine.subscribe((event) => {
-      if (event.type === 'state:change') {
-        this.updateUIState();
-      }
-    });
-  }
-
-  private updateUIState(): void {
-    const machineState = stateMachine.getCurrentState();
-    const newState: UIState = {
-      ...this.currentState,
-      canConnect: machineState.kind === 'idling',
-      canDisconnect: machineState.kind !== 'idling',
-      canSendText: machineState.kind === 'idling',
-      isProcessing: machineState.kind === 'processing',
-      isListening: machineState.kind === 'connected_listening',
-      isSpeaking: machineState.kind === 'speaking'
-    };
-
-    if (JSON.stringify(newState) !== JSON.stringify(this.currentState)) {
-      this.currentState = newState;
-      this.notifyListeners();
-    }
-  }
-
-  private notifyListeners(): void {
-    this.eventListeners.forEach(listener => {
-      try {
-        listener(this.currentState);
-      } catch (error) {
-        console.error('[UIBusinessLogic] Listener error:', error);
-      }
-    });
-  }
-
-  // Public API for UI components
-  subscribe(listener: (state: UIState) => void): () => void {
-    this.eventListeners.add(listener);
-    listener(this.currentState); // Send current state immediately
-    return () => this.eventListeners.delete(listener);
-  }
-
-  getCurrentState(): UIState {
-    return { ...this.currentState };
-  }
-
-  // Action handlers
-  async handleAction(action: UIAction): Promise<any> {
-    switch (action.type) {
-      case 'CONNECT':
-        return this.handleConnect(action.payload);
-      case 'DISCONNECT':
-        return this.handleDisconnect();
-      case 'SEND_TEXT':
-        return this.handleSendText(action.payload);
-      case 'TOGGLE_LANGUAGE':
-        return this.handleToggleLanguage();
-      case 'TOGGLE_INPUT_MODE':
-        return this.handleToggleInputMode();
-      case 'CHANGE_MODE':
-        return this.handleModeChange(action.payload);
-      case 'RESET_SESSION':
-        return this.handleResetSession();
-      default:
-        console.warn('[UIBusinessLogic] Unknown action:', action.type);
-        return null;
-    }
-  }
-
-  private async handleConnect(micStatus?: string): Promise<AnalyserNode | null> {
-    if (micStatus === 'denied') {
-      throw new Error('MICROPHONE_DENIED');
-    }
-
-    if (micStatus === 'granted') {
-      return await sessionService.connect();
-    }
-
-    // Need to request permissions first
-    throw new Error('PERMISSION_REQUIRED');
-  }
-
-  private handleDisconnect(): void {
-    sessionService.disconnect();
-  }
-
-  private async handleSendText(text: string): Promise<ZenResponse | null> {
-    if (!text.trim()) {
-      return null;
-    }
-
-    // Offline check
-    if (!navigator.onLine) {
-      return this.getOfflineResponse(text);
-    }
-
-    try {
-      const response = await sessionService.sendText(text);
-      
-      // Emergency detection
-      if (detectEmergency(text) || (response && detectEmergency(response.wisdom_text))) {
-        this.triggerEmergency();
-      }
-
-      return response;
-    } catch (error) {
-      console.error('[UIBusinessLogic] Send text failed:', error);
-      return null;
-    }
-  }
-
-  private handleToggleLanguage(): void {
-    const newLang = this.currentState.currentLanguage === 'vi' ? 'en' : 'vi';
-    this.currentState.currentLanguage = newLang;
-    
-    // Update UI store (would be injected)
-    haptic('selection');
-    
-    // Restart session if active
-    if (this.currentState.isListening || this.currentState.isSpeaking) {
-      sessionService.disconnect();
-      setTimeout(() => sessionService.connect(), 500);
-    }
-    
-    this.notifyListeners();
-  }
-
-  private handleToggleInputMode(): void {
-    const newMode = this.currentState.currentInputMode === 'voice' ? 'text' : 'voice';
-    this.currentState.currentInputMode = newMode;
-    
-    // Update UI store (would be injected)
-    haptic('selection');
-    
-    // Disconnect voice session if switching to text
-    if (newMode === 'text') {
-      sessionService.disconnect();
-    }
-    
-    this.notifyListeners();
-  }
-
-  private handleModeChange(mode: CulturalMode): void {
-    this.currentState.currentCulturalMode = mode;
-    
-    // Update UI store (would be injected)
-    haptic('success');
-    
-    // Restart session if active
-    if (this.currentState.isListening || this.currentState.isSpeaking) {
-      sessionService.disconnect();
-      setTimeout(() => sessionService.connect(), 500);
-    }
-    
-    this.notifyListeners();
-  }
-
-  private handleResetSession(): void {
-    haptic('warn');
-    sessionService.disconnect();
-    
-    // Clear session data
-    stateMachine.updateData(null);
-    
-    this.notifyListeners();
-  }
-
-  private triggerEmergency(): void {
-    stateMachine.updateData({ action: 'emergency_protocol' as any });
-  }
-
-  private getOfflineResponse(text: string): ZenResponse {
-    const lang = this.currentState.currentLanguage;
-    return {
-      emotion: 'calm',
-      wisdom_text: lang === 'vi'
-        ? \"Mạng không ổn định. Hãy quay về nương tựa nơi hơi thở.\"
-        : \"Connection lost. Return to the island of self through breathing.\",
-      wisdom_english: \"Breathing in, I calm my body.\",
-      user_transcript: text,
-      breathing: '4-7-8',
-      confidence: 1,
-      reasoning_steps: ['Offline Mode', 'Triggering Local Breathing'],
-      mindfulness_metrics: { attention_stability: 0.8, emotional_regulation: 0.5, present_moment_awareness: 0.9 },
-      awareness_stage: 'mindful',
-      psychological_dimensions: { contextual: 0.5, emotional: 0.5, cultural: 0.5, wisdom: 0.5, acceptance: 0.5, relational: 0.5 },
-      ambient_sound: 'rain'
-    };
-  }
-
-  // Utility methods
-  canPerformAction(action: UIAction['type']): boolean {
-    switch (action) {
-      case 'CONNECT':
-        return this.currentState.canConnect;
-      case 'DISCONNECT':
-        return this.currentState.canDisconnect;
-      case 'SEND_TEXT':
-        return this.currentState.canSendText;
-      default:
-        return true;
-    }
-  }
-
-  // Get session data for UI
-  getSessionData(): ZenResponse | null {
-    return sessionService.getZenData();
-  }
-
-  getHistory(): any[] {
-    return sessionService.getHistory();
-  }
-
-  getAnalyser(): AnalyserNode | null {
-    return sessionService.getAnalyser();
-  }
-}
-
-// Export singleton instance
-export const uiBusinessLogic = UIBusinessLogic.getInstance();
diff --git a/src/core/ui/UIBusinessLogic.ts.bak b/src/core/ui/UIBusinessLogic.ts.bak
deleted file mode 100644
index f4edcb3..0000000
--- a/src/core/ui/UIBusinessLogic.ts.bak
+++ /dev/null
@@ -1 +0,0 @@
-// UI Business Logic Service\n// Extracts business logic from UI components\n\nimport { stateMachine } from '../core/state/StateMachine';\nimport { sessionService } from '../core/connection/SessionService';\nimport { ZenResponse, CulturalMode, Language, AppState } from '../../types';\nimport { haptic } from '../../utils/designSystem';\nimport { detectEmergency } from '../../data/emergencyKeywords';\n\nexport interface UIAction {\n  type: 'CONNECT' | 'DISCONNECT' | 'SEND_TEXT' | 'TOGGLE_LANGUAGE' | 'TOGGLE_INPUT_MODE' | 'CHANGE_MODE' | 'RESET_SESSION';\n  payload?: any;\n}\n\nexport interface UIState {\n  canConnect: boolean;\n  canDisconnect: boolean;\n  canSendText: boolean;\n  isProcessing: boolean;\n  isListening: boolean;\n  isSpeaking: boolean;\n  currentLanguage: Language;\n  currentInputMode: 'voice' | 'text';\n  currentCulturalMode: CulturalMode;\n}\n\nexport class UIBusinessLogic {\n  private static instance: UIBusinessLogic;\n  private eventListeners: Set<(state: UIState) => void> = new Set();\n  private currentState: UIState;\n\n  private constructor() {\n    this.currentState = this.initializeState();\n    this.setupStateMachineListener();\n  }\n\n  static getInstance(): UIBusinessLogic {\n    if (!UIBusinessLogic.instance) {\n      UIBusinessLogic.instance = new UIBusinessLogic();\n    }\n    return UIBusinessLogic.instance;\n  }\n\n  private initializeState(): UIState {\n    const machineState = stateMachine.getCurrentState();\n    return {\n      canConnect: machineState.kind === 'idling',\n      canDisconnect: machineState.kind !== 'idling',\n      canSendText: machineState.kind === 'idling',\n      isProcessing: machineState.kind === 'processing',\n      isListening: machineState.kind === 'connected_listening',\n      isSpeaking: machineState.kind === 'speaking',\n      currentLanguage: 'vi', // Default, would come from UI store\n      currentInputMode: 'voice', // Default, would come from UI store\n      currentCulturalMode: 'Universal' // Default, would come from UI store\n    };\n  }\n\n  private setupStateMachineListener(): void {\n    stateMachine.subscribe((event) => {\n      if (event.type === 'state:change') {\n        this.updateUIState();\n      }\n    });\n  }\n\n  private updateUIState(): void {\n    const machineState = stateMachine.getCurrentState();\n    const newState: UIState = {\n      ...this.currentState,\n      canConnect: machineState.kind === 'idling',\n      canDisconnect: machineState.kind !== 'idling',\n      canSendText: machineState.kind === 'idling',\n      isProcessing: machineState.kind === 'processing',\n      isListening: machineState.kind === 'connected_listening',\n      isSpeaking: machineState.kind === 'speaking'\n    };\n\n    if (JSON.stringify(newState) !== JSON.stringify(this.currentState)) {\n      this.currentState = newState;\n      this.notifyListeners();\n    }\n  }\n\n  private notifyListeners(): void {\n    this.eventListeners.forEach(listener => {\n      try {\n        listener(this.currentState);\n      } catch (error) {\n        console.error('[UIBusinessLogic] Listener error:', error);\n      }\n    });\n  }\n\n  // Public API for UI components\n  subscribe(listener: (state: UIState) => void): () => void {\n    this.eventListeners.add(listener);\n    listener(this.currentState); // Send current state immediately\n    return () => this.eventListeners.delete(listener);\n  }\n\n  getCurrentState(): UIState {\n    return { ...this.currentState };\n  }\n\n  // Action handlers\n  async handleAction(action: UIAction): Promise<any> {\n    switch (action.type) {\n      case 'CONNECT':\n        return this.handleConnect(action.payload);\n      case 'DISCONNECT':\n        return this.handleDisconnect();\n      case 'SEND_TEXT':\n        return this.handleSendText(action.payload);\n      case 'TOGGLE_LANGUAGE':\n        return this.handleToggleLanguage();\n      case 'TOGGLE_INPUT_MODE':\n        return this.handleToggleInputMode();\n      case 'CHANGE_MODE':\n        return this.handleModeChange(action.payload);\n      case 'RESET_SESSION':\n        return this.handleResetSession();\n      default:\n        console.warn('[UIBusinessLogic] Unknown action:', action.type);\n        return null;\n    }\n  }\n\n  private async handleConnect(micStatus?: string): Promise<AnalyserNode | null> {\n    if (micStatus === 'denied') {\n      throw new Error('MICROPHONE_DENIED');\n    }\n\n    if (micStatus === 'granted') {\n      return await sessionService.connect();\n    }\n\n    // Need to request permissions first\n    throw new Error('PERMISSION_REQUIRED');\n  }\n\n  private handleDisconnect(): void {\n    sessionService.disconnect();\n  }\n\n  private async handleSendText(text: string): Promise<ZenResponse | null> {\n    if (!text.trim()) {\n      return null;\n    }\n\n    // Offline check\n    if (!navigator.onLine) {\n      return this.getOfflineResponse(text);\n    }\n\n    try {\n      const response = await sessionService.sendText(text);\n      \n      // Emergency detection\n      if (detectEmergency(text) || (response && detectEmergency(response.wisdom_text))) {\n        this.triggerEmergency();\n      }\n\n      return response;\n    } catch (error) {\n      console.error('[UIBusinessLogic] Send text failed:', error);\n      return null;\n    }\n  }\n\n  private handleToggleLanguage(): void {\n    const newLang = this.currentState.currentLanguage === 'vi' ? 'en' : 'vi';\n    this.currentState.currentLanguage = newLang;\n    \n    // Update UI store (would be injected)\n    haptic('selection');\n    \n    // Restart session if active\n    if (this.currentState.isListening || this.currentState.isSpeaking) {\n      sessionService.disconnect();\n      setTimeout(() => sessionService.connect(), 500);\n    }\n    \n    this.notifyListeners();\n  }\n\n  private handleToggleInputMode(): void {\n    const newMode = this.currentState.currentInputMode === 'voice' ? 'text' : 'voice';\n    this.currentState.currentInputMode = newMode;\n    \n    // Update UI store (would be injected)\n    haptic('selection');\n    \n    // Disconnect voice session if switching to text\n    if (newMode === 'text') {\n      sessionService.disconnect();\n    }\n    \n    this.notifyListeners();\n  }\n\n  private handleModeChange(mode: CulturalMode): void {\n    this.currentState.currentCulturalMode = mode;\n    \n    // Update UI store (would be injected)\n    haptic('success');\n    \n    // Restart session if active\n    if (this.currentState.isListening || this.currentState.isSpeaking) {\n      sessionService.disconnect();\n      setTimeout(() => sessionService.connect(), 500);\n    }\n    \n    this.notifyListeners();\n  }\n\n  private handleResetSession(): void {\n    haptic('warn');\n    sessionService.disconnect();\n    \n    // Clear session data\n    stateMachine.updateData(null);\n    \n    this.notifyListeners();\n  }\n\n  private triggerEmergency(): void {\n    stateMachine.updateData({ action: 'emergency_protocol' as any });\n  }\n\n  private getOfflineResponse(text: string): ZenResponse {\n    const lang = this.currentState.currentLanguage;\n    return {\n      emotion: 'calm',\n      wisdom_text: lang === 'vi'\n        ? \"Mạng không ổn định. Hãy quay về nương tựa nơi hơi thở.\"\n        : \"Connection lost. Return to the island of self through breathing.\",\n      wisdom_english: \"Breathing in, I calm my body.\",\n      user_transcript: text,\n      breathing: '4-7-8',\n      confidence: 1,\n      reasoning_steps: ['Offline Mode', 'Triggering Local Breathing'],\n      quantum_metrics: { coherence: 0.8, entanglement: 0.5, presence: 0.9 },\n      awareness_stage: 'mindful',\n      consciousness_dimensions: { contextual: 0.5, emotional: 0.5, cultural: 0.5, wisdom: 0.5, uncertainty: 0.5, relational: 0.5 },\n      ambient_sound: 'rain'\n    };\n  }\n\n  // Utility methods\n  canPerformAction(action: UIAction['type']): boolean {\n    switch (action) {\n      case 'CONNECT':\n        return this.currentState.canConnect;\n      case 'DISCONNECT':\n        return this.currentState.canDisconnect;\n      case 'SEND_TEXT':\n        return this.currentState.canSendText;\n      default:\n        return true;\n    }\n  }\n\n  // Get session data for UI\n  getSessionData(): ZenResponse | null {\n    return sessionService.getZenData();\n  }\n\n  getHistory(): any[] {\n    return sessionService.getHistory();\n  }\n\n  getAnalyser(): AnalyserNode | null {\n    return sessionService.getAnalyser();\n  }\n}\n\n// Export singleton instance\nexport const uiBusinessLogic = UIBusinessLogic.getInstance();
diff --git a/src/hooks/usePerformanceMonitor.ts b/src/hooks/usePerformanceMonitor.ts
deleted file mode 100644
index 1a4a21f..0000000
--- a/src/hooks/usePerformanceMonitor.ts
+++ /dev/null
@@ -1,238 +0,0 @@
-// Performance Monitoring Hook
-// Tracks component performance, memory usage, and rendering metrics
-
-import { useEffect, useRef, useState, useCallback } from 'react';
-
-interface PerformanceMetrics {
-  renderTime: number;
-  memoryUsage?: {
-    used: number;
-    total: number;
-    limit: number;
-  };
-  fps?: number;
-  componentMountTime: number;
-  updateCount: number;
-  lastUpdateTime: number;
-}
-
-interface PerformanceMonitorOptions {
-  trackMemory?: boolean;
-  trackFPS?: boolean;
-  sampleInterval?: number;
-  maxSamples?: number;
-}
-
-export function usePerformanceMonitor(
-  componentName: string,
-  options: PerformanceMonitorOptions = {}
-) {
-  const {
-    trackMemory = true,
-    trackFPS = false,
-    sampleInterval = 1000,
-    maxSamples = 100
-  } = options;
-
-  const [metrics, setMetrics] = useState<PerformanceMetrics>({
-    renderTime: 0,
-    componentMountTime: Date.now(),
-    updateCount: 0,
-    lastUpdateTime: Date.now()
-  });
-
-  const mountTimeRef = useRef(Date.now());
-  const renderStartRef = useRef<number>(0);
-  const frameCountRef = useRef(0);
-  const lastFrameTimeRef = useRef<number>(Date.now());
-  const updateCountRef = useRef(0);
-  const samplesRef = useRef<PerformanceMetrics[]>([]);
-
-  // Track render performance
-  const startRender = useCallback(() => {
-    renderStartRef.current = performance.now();
-  }, []);
-
-  const endRender = useCallback(() => {
-    const renderTime = performance.now() - renderStartRef.current;
-    updateCountRef.current++;
-    
-    setMetrics(prev => ({
-      ...prev,
-      renderTime,
-      updateCount: updateCountRef.current,
-      lastUpdateTime: Date.now()
-    }));
-
-    // Store sample for analysis
-    const sample: PerformanceMetrics = {
-      renderTime,
-      componentMountTime: mountTimeRef.current,
-      updateCount: updateCountRef.current,
-      lastUpdateTime: Date.now()
-    };
-
-    samplesRef.current.push(sample);
-    if (samplesRef.current.length > maxSamples) {
-      samplesRef.current.shift();
-    }
-  }, [maxSamples]);
-
-  // Track memory usage
-  const updateMemoryUsage = useCallback(() => {
-    if (!trackMemory || !('memory' in performance)) return;
-
-    const memory = (performance as any).memory;
-    const memoryUsage = {
-      used: memory.usedJSHeapSize,
-      total: memory.totalJSHeapSize,
-      limit: memory.jsHeapSizeLimit
-    };
-
-    setMetrics(prev => ({ ...prev, memoryUsage }));
-  }, [trackMemory]);
-
-  // Track FPS
-  const updateFPS = useCallback(() => {
-    if (!trackFPS) return;
-
-    const now = Date.now();
-    const delta = now - lastFrameTimeRef.current;
-    
-    if (delta >= 1000) {
-      const fps = Math.round((frameCountRef.current * 1000) / delta);
-      setMetrics(prev => ({ ...prev, fps }));
-      frameCountRef.current = 0;
-      lastFrameTimeRef.current = now;
-    }
-    
-    frameCountRef.current++;
-  }, [trackFPS]);
-
-  // Performance monitoring loop
-  useEffect(() => {
-    const interval = setInterval(() => {
-      updateMemoryUsage();
-      updateFPS();
-    }, sampleInterval);
-
-    return () => clearInterval(interval);
-  }, [sampleInterval, updateMemoryUsage, updateFPS]);
-
-  // Component mount tracking
-  useEffect(() => {
-    mountTimeRef.current = Date.now();
-    setMetrics(prev => ({
-      ...prev,
-      componentMountTime: mountTimeRef.current
-    }));
-
-    // Log component mount
-    console.log(`[PerformanceMonitor] ${componentName} mounted at ${mountTimeRef.current}`);
-  }, [componentName]);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      const totalTime = Date.now() - mountTimeRef.current;
-      console.log(`[PerformanceMonitor] ${componentName} unmounted after ${totalTime}ms`);
-      
-      // Report performance summary
-      if (samplesRef.current.length > 0) {
-        const avgRenderTime = samplesRef.current.reduce((sum, s) => sum + s.renderTime, 0) / samplesRef.current.length;
-        const maxRenderTime = Math.max(...samplesRef.current.map(s => s.renderTime));
-        console.log(`[PerformanceMonitor] ${componentName} - Avg render: ${avgRenderTime.toFixed(2)}ms, Max: ${maxRenderTime.toFixed(2)}ms, Updates: ${updateCountRef.current}`);
-      }
-    };
-  }, [componentName]);
-
-  // Performance analysis
-  const getPerformanceReport = useCallback(() => {
-    if (samplesRef.current.length === 0) return null;
-
-    const renderTimes = samplesRef.current.map(s => s.renderTime);
-    const avgRenderTime = renderTimes.reduce((sum, time) => sum + time, 0) / renderTimes.length;
-    const maxRenderTime = Math.max(...renderTimes);
-    const minRenderTime = Math.min(...renderTimes);
-    const p95RenderTime = renderTimes.sort((a, b) => a - b)[Math.floor(renderTimes.length * 0.95)];
-
-    return {
-      componentName,
-      totalUpdates: updateCountRef.current,
-      avgRenderTime,
-      maxRenderTime,
-      minRenderTime,
-      p95RenderTime,
-      samples: samplesRef.current.length,
-      currentMemory: metrics.memoryUsage,
-      currentFPS: metrics.fps,
-      uptime: Date.now() - mountTimeRef.current
-    };
-  }, [componentName, metrics.memoryUsage, metrics.fps]);
-
-  // Performance warnings
-  useEffect(() => {
-    if (metrics.renderTime > 16.67) { // 60fps threshold
-      console.warn(`[PerformanceMonitor] ${componentName} slow render: ${metrics.renderTime.toFixed(2)}ms`);
-    }
-
-    if (metrics.memoryUsage && metrics.memoryUsage.used / metrics.memoryUsage.limit > 0.8) {
-      console.warn(`[PerformanceMonitor] ${componentName} high memory usage: ${((metrics.memoryUsage.used / metrics.memoryUsage.limit) * 100).toFixed(1)}%`);
-    }
-
-    if (metrics.fps && metrics.fps < 30) {
-      console.warn(`[PerformanceMonitor] ${componentName} low FPS: ${metrics.fps}`);
-    }
-  }, [componentName, metrics]);
-
-  return {
-    metrics,
-    startRender,
-    endRender,
-    getPerformanceReport,
-    samples: samplesRef.current
-  };
-}
-
-// Higher-order component for automatic performance monitoring
-export function withPerformanceMonitor<P extends object>(
-  WrappedComponent: React.ComponentType<P>,
-  componentName?: string,
-  options?: PerformanceMonitorOptions
-) {
-  const ComponentWithMonitor = (props: P) => {
-    const name = componentName || WrappedComponent.displayName || WrappedComponent.name || 'Unknown';
-    const { startRender, endRender } = usePerformanceMonitor(name, options);
-
-    useEffect(() => {
-      startRender();
-      endRender();
-    });
-
-    return <WrappedComponent {...props} />;
-  };
-
-  ComponentWithMonitor.displayName = `withPerformanceMonitor(${WrappedComponent.displayName || WrappedComponent.name})`;
-  return ComponentWithMonitor;
-}
-
-// Performance monitoring for async operations
-export function trackAsyncPerformance<T>(
-  operation: () => Promise<T>,
-  operationName: string
-): Promise<T> {
-  const startTime = performance.now();
-  
-  return operation().then(
-    result => {
-      const duration = performance.now() - startTime;
-      console.log(`[PerformanceMonitor] ${operationName} completed in ${duration.toFixed(2)}ms`);
-      return result;
-    },
-    error => {
-      const duration = performance.now() - startTime;
-      console.error(`[PerformanceMonitor] ${operationName} failed after ${duration.toFixed(2)}ms:`, error);
-      throw error;
-    }
-  );
-}
diff --git a/src/hooks/usePermissions.ts b/src/hooks/usePermissions.ts
new file mode 100644
index 0000000..9c7abde
--- /dev/null
+++ b/src/hooks/usePermissions.ts
@@ -0,0 +1,47 @@
+import { useCallback, useEffect } from 'react';
+import { useZenStore } from '../../store/zenStore';
+
+export function usePermissions() {
+    const { micStatus, setMicStatus } = useZenStore();
+
+    useEffect(() => {
+        // Check initial permission state
+        if (typeof navigator !== 'undefined' && navigator.permissions && navigator.permissions.query) {
+            navigator.permissions.query({ name: 'microphone' as any })
+                .then((result) => {
+                    if (result.state === 'granted') {
+                        setMicStatus('granted');
+                    } else if (result.state === 'denied') {
+                        setMicStatus('denied');
+                    }
+
+                    // Listen for changes
+                    result.onchange = () => {
+                        if (result.state === 'granted') setMicStatus('granted');
+                        else if (result.state === 'denied') setMicStatus('denied');
+                        else setMicStatus('idle');
+                    };
+                })
+                .catch(() => {
+                    // Ignore errors in environments that don't support query
+                });
+        }
+    }, [setMicStatus]);
+
+    const requestInitialPermissions = useCallback(async () => {
+        if (micStatus === 'granted') return;
+
+        setMicStatus('prompting');
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            // Stop tracks immediately as we just needed the permission grant
+            stream.getTracks().forEach(track => track.stop());
+            setMicStatus('granted');
+        } catch (error) {
+            console.error('Permission denied:', error);
+            setMicStatus('denied');
+        }
+    }, [micStatus, setMicStatus]);
+
+    return { requestInitialPermissions, micStatus };
+}
diff --git a/src/hooks/useZenSession.ts b/src/hooks/useZenSession.ts
new file mode 100644
index 0000000..b81c723
--- /dev/null
+++ b/src/hooks/useZenSession.ts
@@ -0,0 +1,49 @@
+import { useRef, useCallback } from 'react';
+import { sessionManager } from '../core/connection/SessionManager';
+import { ZenResponse } from '../../types';
+
+interface UseZenSessionProps {
+    onEmergencyDetected?: () => void;
+    onError?: (message: string, kind: 'error' | 'warn' | 'info' | 'success') => void;
+}
+
+export function useZenSession({ onEmergencyDetected, onError }: UseZenSessionProps = {}) {
+    const analyserRef = useRef<AnalyserNode | null>(null);
+
+    const connect = useCallback(async () => {
+        try {
+            await sessionManager.connect();
+            analyserRef.current = sessionManager.getAnalyser();
+        } catch (error: any) {
+            console.error('Session connection error:', error);
+            onError?.(error.message || 'Connection failed', 'error');
+        }
+    }, [onError]);
+
+    const disconnect = useCallback(() => {
+        try {
+            sessionManager.disconnect();
+            analyserRef.current = null;
+        } catch (error: any) {
+            console.error('Session disconnect error:', error);
+        }
+    }, []);
+
+    const sendText = useCallback(async (text: string): Promise<ZenResponse | null> => {
+        try {
+            const response = await sessionManager.sendText(text);
+            return response;
+        } catch (error: any) {
+            console.error('Session sendText error:', error);
+            onError?.(error.message || 'Failed to send message', 'error');
+            return null;
+        }
+    }, [onError]);
+
+    return {
+        connect,
+        disconnect,
+        sendText,
+        analyserRef
+    };
+}
diff --git a/src/utils/progressUtils.ts b/src/utils/progressUtils.ts
new file mode 100644
index 0000000..fb083a2
--- /dev/null
+++ b/src/utils/progressUtils.ts
@@ -0,0 +1,15 @@
+// Helper function to get width class for progress bars
+export const getWidthClass = (percentage: number): string => {
+  const rounded = Math.round(percentage);
+  if (rounded <= 0) return 'w-0';
+  if (rounded <= 10) return 'w-10';
+  if (rounded <= 20) return 'w-20';
+  if (rounded <= 30) return 'w-30';
+  if (rounded <= 40) return 'w-40';
+  if (rounded <= 50) return 'w-50';
+  if (rounded <= 60) return 'w-60';
+  if (rounded <= 70) return 'w-70';
+  if (rounded <= 80) return 'w-80';
+  if (rounded <= 90) return 'w-90';
+  return 'w-100';
+};
diff --git a/src/views/MainView.tsx b/src/views/MainView.tsx
index aecd026..176b717 100644
--- a/src/views/MainView.tsx
+++ b/src/views/MainView.tsx
@@ -20,7 +20,7 @@ import { NarrativeMemory } from '../../components/NarrativeMemory';
 import { StreakBadge } from '../../components/StreakBadge';
 import { ZenResponse } from '../../types';
 import { detectEmergency } from '../../data/emergencyKeywords';
-import { Keyboard, Mic, Languages, SendHorizontal, Brain, Sparkles, Wifi, WifiOff, RotateCcw, Eye, BookOpen } from 'lucide-react';
+import { Keyboard, Mic, Languages, SendHorizontal, Brain, Sparkles, RotateCcw, Eye, BookOpen } from 'lucide-react';
 import { haptic } from '../../utils/designSystem';
 import { useZenSession } from '../../hooks/useZenSession';
 import { useUIStore, useZenStore } from '../../store/zenStore';
@@ -58,7 +58,6 @@ export function MainView() {
     // Audio Viz State (Driven by real analyzer or mock)
     const [audioIntensity, setAudioIntensity] = useState(0);
     const analyserRef = useRef<AnalyserNode | null>(null);
-    const animationFrameRef = useRef<number | null>(null);
     const dataArrayRef = useRef<Uint8Array | null>(null);
 
     // --- Session Hook ---
@@ -85,201 +84,197 @@ export function MainView() {
     // Zero-allocation audio processing with WASM acceleration
 
     const visualizationLoop = useRef<{
-      rafId: number | null;
-      isActive: boolean;
-      lastCleanup: number;
-      memoryPressure: number;
+        rafId: number | null;
+        isActive: boolean;
+        lastCleanup: number;
+        memoryPressure: number;
     }>({ rafId: null, isActive: false, lastCleanup: Date.now(), memoryPressure: 0 });
 
     // WeakRef pattern for audio data to prevent memory leaks
     const audioDataWeakRef = useRef<WeakRef<Uint8Array> | null>(null);
-    
+
     // Adaptive quality based on performance
     const [visualQuality, setVisualQuality] = useState<'high' | 'medium' | 'low'>('high');
-    
+
     // Performance monitoring
     const frameTimeHistory = useRef<number[]>([]);
-    const lastFrameTime = useRef(performance.now());
 
     // Extreme optimization: Memory pressure detection
     const detectMemoryPressure = useCallback(() => {
-      if ('memory' in performance) {
-        const mem = (performance as any).memory;
-        const usedRatio = mem.usedJSHeapSize / mem.jsHeapSizeLimit;
-        return usedRatio;
-      }
-      return 0;
+        if ('memory' in performance) {
+            const mem = (performance as any).memory;
+            const usedRatio = mem.usedJSHeapSize / mem.jsHeapSizeLimit;
+            return usedRatio;
+        }
+        return 0;
     }, []);
 
     // Adaptive quality adjustment
     const adjustQuality = useCallback((frameTime: number) => {
-      frameTimeHistory.current.push(frameTime);
-      if (frameTimeHistory.current.length > 60) {
-        frameTimeHistory.current.shift();
-      }
-      
-      const avgFrameTime = frameTimeHistory.current.reduce((a, b) => a + b, 0) / frameTimeHistory.current.length;
-      const memoryPressure = detectMemoryPressure();
-      
-      if (avgFrameTime > 16.67 || memoryPressure > 0.8) {
-        setVisualQuality('low');
-      } else if (avgFrameTime > 8.33 || memoryPressure > 0.6) {
-        setVisualQuality('medium');
-      } else {
-        setVisualQuality('high');
-      }
+        frameTimeHistory.current.push(frameTime);
+        if (frameTimeHistory.current.length > 60) {
+            frameTimeHistory.current.shift();
+        }
+
+        const avgFrameTime = frameTimeHistory.current.reduce((a, b) => a + b, 0) / frameTimeHistory.current.length;
+        const memoryPressure = detectMemoryPressure();
+
+        if (avgFrameTime > 16.67 || memoryPressure > 0.8) {
+            setVisualQuality('low');
+        } else if (avgFrameTime > 8.33 || memoryPressure > 0.6) {
+            setVisualQuality('medium');
+        } else {
+            setVisualQuality('high');
+        }
     }, [detectMemoryPressure]);
 
     // Extreme optimized visualization loop
     const optimizedVisualizationLoop = useCallback(() => {
-      const startTime = performance.now();
-      
-      // Memory pressure check
-      const memoryPressure = detectMemoryPressure();
-      visualizationLoop.current.memoryPressure = memoryPressure;
-      
-      if (memoryPressure > 0.9) {
-        console.warn('[Visualization] Critical memory pressure - disabling visualization');
-        setAudioIntensity(0);
-        return;
-      }
-
-      if (status.kind === 'processing') {
-        // Optimized mock intensity with reduced calculations
-        const time = Date.now() / 1000;
-        const intensity = visualQuality === 'high' 
-          ? 0.2 + Math.sin(time * 5) * 0.1 + Math.sin(time * 3) * 0.05
-          : visualQuality === 'medium'
-          ? 0.2 + Math.sin(time * 3) * 0.1
-          : 0.2 + Math.sin(time * 2) * 0.08;
-        setAudioIntensity(intensity);
-        
-        visualizationLoop.current.rafId = requestAnimationFrame(optimizedVisualizationLoop);
-        return;
-      }
-
-      if (!analyserRef.current) {
-        setAudioIntensity(0);
-        if (status.kind !== 'idling') {
-          visualizationLoop.current.rafId = requestAnimationFrame(optimizedVisualizationLoop);
+        const startTime = performance.now();
+
+        // Memory pressure check
+        const memoryPressure = detectMemoryPressure();
+        visualizationLoop.current.memoryPressure = memoryPressure;
+
+        if (memoryPressure > 0.9) {
+            console.warn('[Visualization] Critical memory pressure - disabling visualization');
+            setAudioIntensity(0);
+            return;
         }
-        return;
-      }
-
-      // Optimized frequency analysis with quality scaling
-      const binCount = visualQuality === 'high' ? 64 : visualQuality === 'medium' ? 32 : 16;
-      
-      if (!dataArrayRef.current || dataArrayRef.current.length !== analyserRef.current.frequencyBinCount) {
-        const newArray = new Uint8Array(analyserRef.current.frequencyBinCount);
-        dataArrayRef.current = newArray;
-        audioDataWeakRef.current = new WeakRef(newArray);
-      }
-
-      analyserRef.current.getByteFrequencyData(dataArrayRef.current);
-
-      // Optimized intensity calculation
-      let sum = 0;
-      const actualBinCount = Math.min(binCount, dataArrayRef.current.length);
-      
-      // SIMD-like optimization (unrolled loop for performance)
-      if (actualBinCount >= 8) {
-        let i = 0;
-        for (; i < actualBinCount - 7; i += 8) {
-          sum += dataArrayRef.current[i] + dataArrayRef.current[i+1] + 
-                dataArrayRef.current[i+2] + dataArrayRef.current[i+3] +
-                dataArrayRef.current[i+4] + dataArrayRef.current[i+5] + 
-                dataArrayRef.current[i+6] + dataArrayRef.current[i+7];
+
+        if (status.kind === 'processing') {
+            // Optimized mock intensity with reduced calculations
+            const time = Date.now() / 1000;
+            const intensity = visualQuality === 'high'
+                ? 0.2 + Math.sin(time * 5) * 0.1 + Math.sin(time * 3) * 0.05
+                : visualQuality === 'medium'
+                    ? 0.2 + Math.sin(time * 3) * 0.1
+                    : 0.2 + Math.sin(time * 2) * 0.08;
+            setAudioIntensity(intensity);
+
+            visualizationLoop.current.rafId = requestAnimationFrame(optimizedVisualizationLoop);
+            return;
         }
-        for (; i < actualBinCount; i++) {
-          sum += dataArrayRef.current[i];
+
+        if (!analyserRef.current) {
+            setAudioIntensity(0);
+            if (status.kind !== 'idling') {
+                visualizationLoop.current.rafId = requestAnimationFrame(optimizedVisualizationLoop);
+            }
+            return;
         }
-      } else {
-        for (let i = 0; i < actualBinCount; i++) {
-          sum += dataArrayRef.current[i];
+
+        // Optimized frequency analysis with quality scaling
+        const binCount = visualQuality === 'high' ? 64 : visualQuality === 'medium' ? 32 : 16;
+
+        if (!dataArrayRef.current || dataArrayRef.current.length !== analyserRef.current.frequencyBinCount) {
+            const newArray = new Uint8Array(analyserRef.current.frequencyBinCount);
+            dataArrayRef.current = newArray;
+            audioDataWeakRef.current = new WeakRef(newArray);
+        }
+
+        // FIX: Cast to any to handle SharedArrayBuffer type mismatch in strict mode
+        analyserRef.current.getByteFrequencyData(dataArrayRef.current as any);
+
+        // Optimized intensity calculation
+        let sum = 0;
+        const actualBinCount = Math.min(binCount, dataArrayRef.current.length);
+
+        // SIMD-like optimization (unrolled loop for performance)
+        if (actualBinCount >= 8) {
+            let i = 0;
+            for (; i < actualBinCount - 7; i += 8) {
+                sum += dataArrayRef.current[i] + dataArrayRef.current[i + 1] +
+                    dataArrayRef.current[i + 2] + dataArrayRef.current[i + 3] +
+                    dataArrayRef.current[i + 4] + dataArrayRef.current[i + 5] +
+                    dataArrayRef.current[i + 6] + dataArrayRef.current[i + 7];
+            }
+            for (; i < actualBinCount; i++) {
+                sum += dataArrayRef.current[i];
+            }
+        } else {
+            for (let i = 0; i < actualBinCount; i++) {
+                sum += dataArrayRef.current[i];
+            }
+        }
+
+        const average = sum / actualBinCount;
+        const normalizedIntensity = average / 128.0;
+
+        // Apply quality-based smoothing
+        const smoothedIntensity = visualQuality === 'high'
+            ? normalizedIntensity
+            : visualQuality === 'medium'
+                ? normalizedIntensity * 0.8 + audioIntensity * 0.2
+                : normalizedIntensity * 0.6 + audioIntensity * 0.4;
+
+        setAudioIntensity(smoothedIntensity);
+
+        // Performance monitoring
+        const frameTime = performance.now() - startTime;
+        adjustQuality(frameTime);
+
+        if (status.kind !== 'idling') {
+            visualizationLoop.current.rafId = requestAnimationFrame(optimizedVisualizationLoop);
         }
-      }
-      
-      const average = sum / actualBinCount;
-      const normalizedIntensity = average / 128.0;
-      
-      // Apply quality-based smoothing
-      const smoothedIntensity = visualQuality === 'high' 
-        ? normalizedIntensity 
-        : visualQuality === 'medium'
-        ? normalizedIntensity * 0.8 + audioIntensity * 0.2
-        : normalizedIntensity * 0.6 + audioIntensity * 0.4;
-      
-      setAudioIntensity(smoothedIntensity);
-
-      // Performance monitoring
-      const frameTime = performance.now() - startTime;
-      adjustQuality(frameTime);
-
-      // Adaptive frame rate based on quality
-      const targetFPS = visualQuality === 'high' ? 60 : visualQuality === 'medium' ? 30 : 15;
-      const targetFrameTime = 1000 / targetFPS;
-      
-      if (status.kind !== 'idling') {
-        visualizationLoop.current.rafId = requestAnimationFrame(optimizedVisualizationLoop);
-      }
     }, [status, visualQuality, audioIntensity, adjustQuality, detectMemoryPressure]);
 
     // Extreme cleanup with WeakRef and memory zeroization
     useEffect(() => {
-      if (status.kind !== 'idling') {
-        if (!visualizationLoop.current.isActive) {
-          visualizationLoop.current.isActive = true;
-          optimizedVisualizationLoop();
-        }
-      } else {
-        if (visualizationLoop.current.rafId) {
-          cancelAnimationFrame(visualizationLoop.current.rafId);
-          visualizationLoop.current.rafId = null;
-        }
-        visualizationLoop.current.isActive = false;
-        setAudioIntensity(0);
-        
-        // Aggressive cleanup
-        if (dataArrayRef.current) {
-          dataArrayRef.current.fill(0);
-          if (audioDataWeakRef.current) {
-            const data = audioDataWeakRef.current.deref();
-            if (data) data.fill(0);
-          }
-          dataArrayRef.current = null;
-          audioDataWeakRef.current = null;
+        if (status.kind !== 'idling') {
+            if (!visualizationLoop.current.isActive) {
+                visualizationLoop.current.isActive = true;
+                optimizedVisualizationLoop();
+            }
+        } else {
+            if (visualizationLoop.current.rafId) {
+                cancelAnimationFrame(visualizationLoop.current.rafId);
+                visualizationLoop.current.rafId = null;
+            }
+            visualizationLoop.current.isActive = false;
+            setAudioIntensity(0);
+
+            // Aggressive cleanup
+            if (dataArrayRef.current) {
+                dataArrayRef.current.fill(0);
+                if (audioDataWeakRef.current) {
+                    const data = audioDataWeakRef.current.deref();
+                    if (data) data.fill(0);
+                }
+                dataArrayRef.current = null;
+                audioDataWeakRef.current = null;
+            }
         }
-      }
 
-      return () => {
-        // Extreme cleanup on unmount
-        if (visualizationLoop.current.rafId) {
-          cancelAnimationFrame(visualizationLoop.current.rafId);
-        }
-        
-        // Force garbage collection hint
-        if (dataArrayRef.current) {
-          dataArrayRef.current.fill(0);
-          dataArrayRef.current = null;
-        }
-        
-        if (audioDataWeakRef.current) {
-          const data = audioDataWeakRef.current?.deref();
-          if (data) data.fill(0);
-          audioDataWeakRef.current = null;
-        }
-        
-        analyserRef.current = null;
-        visualizationLoop.current.isActive = false;
-        
-        // Clear performance monitoring
-        frameTimeHistory.current = [];
-        
-        // Request garbage collection in development
-        if (process.env.NODE_ENV === 'development' && 'gc' in window) {
-          (window as any).gc();
-        }
-      };
+        return () => {
+            // Extreme cleanup on unmount
+            if (visualizationLoop.current.rafId) {
+                cancelAnimationFrame(visualizationLoop.current.rafId);
+            }
+
+            // Force garbage collection hint
+            if (dataArrayRef.current) {
+                dataArrayRef.current.fill(0);
+                dataArrayRef.current = null;
+            }
+
+            if (audioDataWeakRef.current) {
+                const data = audioDataWeakRef.current?.deref();
+                if (data) data.fill(0);
+                audioDataWeakRef.current = null;
+            }
+
+            analyserRef.current = null;
+            visualizationLoop.current.isActive = false;
+
+            // Clear performance monitoring
+            frameTimeHistory.current = [];
+
+            // Request garbage collection in development
+            if (process.env.NODE_ENV === 'development' && 'gc' in window) {
+                (window as any).gc();
+            }
+        };
     }, [status, optimizedVisualizationLoop]);
 
     // Force hide practices when switching to text mode
@@ -339,8 +334,6 @@ export function MainView() {
     const handleSendText = async (text: string) => {
         if (!text.trim()) return;
 
-        // Removed hardcoded offline check to allow Offline AI service to handle it
-
         const response = await sendText(text);
         if (response) {
             setInputText('');
@@ -362,11 +355,6 @@ export function MainView() {
         setSnackbar({ text: "Bắt đầu phiên mới", kind: 'info' });
     };
 
-    // --- DEBUG: Loading State ---
-    useEffect(() => {
-        console.log('🜂 Loading state changed:', isLoading);
-    }, [isLoading]);
-
     // --- DEBUG: Component Lifecycle ---
     useEffect(() => {
         console.log('🜂 MainView mounted successfully');
diff --git a/test/TestDashboard.css b/test/TestDashboard.css
new file mode 100644
index 0000000..1bd3ece
--- /dev/null
+++ b/test/TestDashboard.css
@@ -0,0 +1,269 @@
+/* --- MODERN TEST DASHBOARD --- */
+/* Professional, clean, and minimal design */
+
+.test-dashboard {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: rgba(15, 23, 42, 0.95);
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
+  color: white;
+  padding: 24px;
+  border-radius: 16px;
+  min-width: 320px;
+  max-height: 85vh;
+  overflow: hidden;
+  z-index: 9999;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 13px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
+              0 0 0 1px rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.test-dashboard h3 {
+  margin: 0 0 20px 0;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.test-dashboard h3::before {
+  content: '🧪';
+  font-size: 18px;
+}
+
+.test-dashboard h4 {
+  margin: 16px 0 8px 0;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.test-controls {
+  margin-bottom: 20px;
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.test-button {
+  background: linear-gradient(135deg, #3b82f6, #2563eb);
+  color: white;
+  border: none;
+  padding: 10px 18px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+              0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  position: relative;
+  overflow: hidden;
+}
+
+.test-button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #2563eb, #1d4ed8);
+  transform: translateY(-1px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+              0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.test-button:disabled {
+  background: linear-gradient(135deg, #6b7280, #4b5563);
+  cursor: not-allowed;
+  opacity: 0.7;
+  transform: none;
+}
+
+.test-button.smoke-test {
+  background: linear-gradient(135deg, #10b981, #059669);
+}
+
+.test-button.smoke-test:hover:not(:disabled) {
+  background: linear-gradient(135deg, #059669, #047857);
+}
+
+.test-results {
+  margin-bottom: 20px;
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
+
+.test-results div {
+  margin-bottom: 6px;
+  line-height: 1.5;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+}
+
+.test-logs {
+  margin-top: 16px;
+}
+
+.test-logs h4 {
+  margin-bottom: 8px;
+}
+
+.log-container {
+  background: rgba(0, 0, 0, 0.4);
+  padding: 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  max-height: 200px;
+  overflow-y: auto;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.log-entry {
+  margin-bottom: 3px;
+  line-height: 1.4;
+  word-break: break-word;
+  padding: 2px 0;
+  transition: background-color 0.2s ease;
+}
+
+.log-entry:nth-child(odd) {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.log-entry:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+/* Success/Error states */
+.test-results.success {
+  border-color: rgba(16, 185, 129, 0.5);
+  background: rgba(16, 185, 129, 0.1);
+}
+
+.test-results.error {
+  border-color: rgba(239, 68, 68, 0.5);
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.test-results.warning {
+  border-color: rgba(245, 158, 11, 0.5);
+  background: rgba(245, 158, 11, 0.1);
+}
+
+/* Scrollbar styling */
+.log-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.log-container::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 3px;
+}
+
+.log-container::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+  transition: background-color 0.2s ease;
+}
+
+.log-container::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .test-dashboard {
+    position: fixed;
+    top: auto;
+    bottom: 20px;
+    right: 20px;
+    left: 20px;
+    min-width: auto;
+    width: auto;
+    max-height: 60vh;
+  }
+  
+  .test-controls {
+    flex-direction: row;
+    gap: 8px;
+  }
+  
+  .test-button {
+    flex: 1;
+    margin-bottom: 0;
+    font-size: 11px;
+    padding: 8px 12px;
+  }
+}
+
+/* Animation for new logs */
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.log-entry {
+  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Loading state */
+.test-button.loading {
+  position: relative;
+  overflow: hidden;
+}
+
+.test-button.loading::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+/* Add subtle pulse animation to running tests */
+.test-button.loading {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+                0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+  50% {
+    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3),
+                0 2px 4px -1px rgba(59, 130, 246, 0.2);
+  }
+}
diff --git a/test/TestDashboard.tsx b/test/TestDashboard.tsx
new file mode 100644
index 0000000..55e9d4b
--- /dev/null
+++ b/test/TestDashboard.tsx
@@ -0,0 +1,138 @@
+// --- ONE-CLICK TEST EXECUTION ---
+// Add this to your main App.tsx or create a test component
+
+import React, { useEffect, useState } from 'react';
+import { runAllTests, runSmokeTest, startMonitoring } from './testRunner';
+import './TestDashboard.css';
+
+export function TestDashboard() {
+  const [isRunning, setIsRunning] = useState(false);
+  const [results, setResults] = useState<any>(null);
+  const [logs, setLogs] = useState<string[]>([]);
+
+  const addLog = (message: string) => {
+    setLogs(prev => [...prev, `${new Date().toLocaleTimeString()}: ${message}`]);
+  };
+
+  const handleRunAllTests = async () => {
+    setIsRunning(true);
+    addLog('🚀 Starting complete test suite...');
+    
+    try {
+      const testResults = await runAllTests();
+      setResults(testResults);
+      addLog(`✅ Tests complete: ${testResults.passed}/${testResults.total} passed`);
+    } catch (error) {
+      addLog(`❌ Test suite failed: ${error}`);
+    } finally {
+      setIsRunning(false);
+    }
+  };
+
+  const handleSmokeTest = async () => {
+    addLog('🔥 Running smoke test...');
+    
+    try {
+      const passed = await runSmokeTest();
+      addLog(passed ? '✅ Smoke test passed' : '❌ Smoke test failed');
+    } catch (error) {
+      addLog(`❌ Smoke test error: ${error}`);
+    }
+  };
+
+  const handleStartMonitoring = () => {
+    startMonitoring();
+    addLog('🔍 Continuous monitoring started');
+  };
+
+  useEffect(() => {
+    // Auto-start monitoring
+    handleStartMonitoring();
+  }, []);
+
+  const getResultClass = () => {
+    if (!results) return '';
+    if (results.passRate === 100) return 'success';
+    if (results.passRate >= 80) return 'warning';
+    return 'error';
+  };
+
+  const getResultIcon = () => {
+    if (!results) return '';
+    if (results.passRate === 100) return '🎉';
+    if (results.passRate >= 80) return '⚠️';
+    return '❌';
+  };
+
+  return (
+    <div className="test-dashboard">
+      <h3>Automated Testing Dashboard</h3>
+      
+      <div className="test-controls">
+        <button 
+          onClick={handleRunAllTests}
+          disabled={isRunning}
+          className={`test-button ${isRunning ? 'loading' : ''}`}
+        >
+          {isRunning ? '⏳ Running...' : '🚀 Run All Tests'}
+        </button>
+        
+        <button 
+          onClick={handleSmokeTest}
+          className="test-button smoke-test"
+        >
+          🔥 Smoke Test
+        </button>
+      </div>
+
+      {results && (
+        <div className={`test-results ${getResultClass()}`}>
+          <h4>{getResultIcon()} Last Test Results</h4>
+          <div>
+            <span>Total:</span>
+            <span className="font-mono font-bold">{results.total}</span>
+          </div>
+          <div>
+            <span>✅ Passed:</span>
+            <span className="font-mono font-bold text-green-400">{results.passed}</span>
+          </div>
+          <div>
+            <span>❌ Failed:</span>
+            <span className="font-mono font-bold text-red-400">{results.failed}</span>
+          </div>
+          <div>
+            <span>📈 Pass Rate:</span>
+            <span className="font-mono font-bold">{results.passRate.toFixed(1)}%</span>
+          </div>
+          <div>
+            <span>⏱️ Duration:</span>
+            <span className="font-mono">{(results.duration / 1000).toFixed(2)}s</span>
+          </div>
+        </div>
+      )}
+
+      <div className="test-logs">
+        <h4>📋 Test Logs</h4>
+        <div className="log-container">
+          {logs.slice(-10).map((log, index) => (
+            <div key={index} className="log-entry">
+              {log}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Add this to your main App component:
+export function withTesting(App: React.ComponentType) {
+  return function AppWithTesting() {
+    return (
+      <>
+        <App />
+        <TestDashboard />
+      </>
+    );
+  };
+}
diff --git a/test/automatedTestSuite.ts b/test/automatedTestSuite.ts
new file mode 100644
index 0000000..2f9b01e
--- /dev/null
+++ b/test/automatedTestSuite.ts
@@ -0,0 +1,721 @@
+// --- AUTOMATED END-TO-END TESTING SUITE ---
+// Implements comprehensive testing without manual intervention
+// Covers all user flows, UI interactions, and real-world scenarios
+
+import * as React from 'react';
+import { logger } from '../src/utils/logger';
+
+interface TestScenario {
+  id: string;
+  name: string;
+  description: string;
+  priority: 'critical' | 'high' | 'medium' | 'low';
+  category: 'ui' | 'flow' | 'performance' | 'security' | 'accessibility';
+  steps: TestStep[];
+  expectedResults: ExpectedResult[];
+  timeout: number;
+}
+
+interface TestStep {
+  id: string;
+  action: string;
+  target: string;
+  value?: any;
+  waitAfter?: number;
+  screenshot?: boolean;
+}
+
+interface ExpectedResult {
+  step: string;
+  condition: string;
+  expected: any;
+  actual?: any;
+  passed?: boolean;
+}
+
+interface TestReport {
+  scenario: string;
+  passed: boolean;
+  duration: number;
+  results: ExpectedResult[];
+  errors: string[];
+  screenshots: string[];
+  performance: PerformanceMetrics;
+}
+
+interface PerformanceMetrics {
+  loadTime: number;
+  renderTime: number;
+  memoryUsage: number;
+  networkRequests: number;
+  errorCount: number;
+}
+
+class AutomatedTestSuite {
+  private static instance: AutomatedTestSuite;
+  private isRunning = false;
+  private currentScenario: TestScenario | null = null;
+  private testResults: TestReport[] = [];
+  private performanceBaseline: PerformanceMetrics | null = null;
+
+  private constructor() {
+    this.setupTestEnvironment();
+  }
+
+  static getInstance(): AutomatedTestSuite {
+    if (!AutomatedTestSuite.instance) {
+      AutomatedTestSuite.instance = new AutomatedTestSuite();
+    }
+    return AutomatedTestSuite.instance;
+  }
+
+  // --- TEST ENVIRONMENT SETUP ---
+  private setupTestEnvironment(): void {
+    // Override console for test logging
+    const originalConsole = { ...console };
+    
+    console.log = (...args) => {
+      logger.info('[TEST]', ...args);
+      originalConsole.log(...args);
+    };
+
+    console.error = (...args) => {
+      logger.error('[TEST]', ...args);
+      originalConsole.error(...args);
+    };
+
+    // Setup performance monitoring
+    this.setupPerformanceMonitoring();
+  }
+
+  private setupPerformanceMonitoring(): void {
+    // Monitor page load performance
+    window.addEventListener('load', () => {
+      const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
+      this.performanceBaseline = {
+        loadTime: navigation.loadEventEnd - navigation.loadEventStart,
+        renderTime: navigation.domContentLoadedEventEnd - navigation.domContentLoadedEventStart,
+        memoryUsage: this.getMemoryUsage(),
+        networkRequests: 0,
+        errorCount: 0
+      };
+    });
+
+    // Monitor network requests
+    const originalFetch = window.fetch;
+    window.fetch = async (...args) => {
+      if (this.performanceBaseline) {
+        this.performanceBaseline.networkRequests++;
+      }
+      return originalFetch(...args);
+    };
+
+    // Monitor errors
+    window.addEventListener('error', () => {
+      if (this.performanceBaseline) {
+        this.performanceBaseline.errorCount++;
+      }
+    });
+  }
+
+  private getMemoryUsage(): number {
+    if ('memory' in performance) {
+      const mem = (performance as any).memory;
+      return mem.usedJSHeapSize / 1024 / 1024; // MB
+    }
+    return 0;
+  }
+
+  // --- COMPREHENSIVE TEST SCENARIOS ---
+  private getTestScenarios(): TestScenario[] {
+    return [
+      // CRITICAL USER FLOWS
+      {
+        id: 'app-launch',
+        name: 'Application Launch',
+        description: 'Test app startup and initial state',
+        priority: 'critical',
+        category: 'flow',
+        timeout: 10000,
+        steps: [
+          { id: '1', action: 'navigate', target: '/' },
+          { id: '2', action: 'wait', target: 'app-loaded', waitAfter: 2000 },
+          { id: '3', action: 'check', target: 'main-view' },
+          { id: '4', action: 'verify', target: 'status', value: 'idling' }
+        ],
+        expectedResults: [
+          { step: '2', condition: 'app-loaded', expected: true },
+          { step: '3', condition: 'main-view-exists', expected: true },
+          { step: '4', condition: 'initial-status', expected: 'idling' }
+        ]
+      },
+
+      {
+        id: 'voice-session-flow',
+        name: 'Voice Session Complete Flow',
+        description: 'Test complete voice session from start to finish',
+        priority: 'critical',
+        category: 'flow',
+        timeout: 30000,
+        steps: [
+          { id: '1', action: 'navigate', target: '/' },
+          { id: '2', action: 'wait', target: 'app-loaded', waitAfter: 1000 },
+          { id: '3', action: 'click', target: 'voice-button' },
+          { id: '4', action: 'wait', target: 'permission-prompt', waitAfter: 1000 },
+          { id: '5', action: 'mock-permission', target: 'microphone', value: 'granted' },
+          { id: '6', action: 'wait', target: 'connecting', waitAfter: 2000 },
+          { id: '7', action: 'verify', target: 'status', value: 'connected_listening' },
+          { id: '8', action: 'mock-speech', target: 'audio-input', value: 'Hello world' },
+          { id: '9', action: 'wait', target: 'processing', waitAfter: 3000 },
+          { id: '10', action: 'verify', target: 'response-received', expected: true },
+          { id: '11', action: 'click', target: 'disconnect-button' },
+          { id: '12', action: 'wait', target: 'disconnected', waitAfter: 1000 },
+          { id: '13', action: 'verify', target: 'status', value: 'idling' }
+        ],
+        expectedResults: [
+          { step: '7', condition: 'connection-status', expected: 'connected_listening' },
+          { step: '10', condition: 'ai-response', expected: 'string' },
+          { step: '13', condition: 'final-status', expected: 'idling' }
+        ]
+      },
+
+      {
+        id: 'emergency-protocol',
+        name: 'Emergency Protocol Activation',
+        description: 'Test emergency detection and response flow',
+        priority: 'critical',
+        category: 'security',
+        timeout: 15000,
+        steps: [
+          { id: '1', action: 'navigate', target: '/' },
+          { id: '2', action: 'start-session', target: 'voice' },
+          { id: '3', action: 'mock-emergency-input', target: 'audio', value: 'I want to hurt myself' },
+          { id: '4', action: 'wait', target: 'emergency-detection', waitAfter: 2000 },
+          { id: '5', action: 'verify', target: 'emergency-protocol-active', expected: true },
+          { id: '6', action: 'verify', target: 'emergency-resources', expected: 'visible' },
+          { id: '7', action: 'click', target: 'emergency-call-button' },
+          { id: '8', action: 'verify', target: 'emergency-contact-initiated', expected: true }
+        ],
+        expectedResults: [
+          { step: '5', condition: 'emergency-triggered', expected: true },
+          { step: '6', condition: 'resources-displayed', expected: true },
+          { step: '8', condition: 'contact-initiated', expected: true }
+        ]
+      },
+
+      // UI INTERACTION TESTS
+      {
+        id: 'all-buttons-functional',
+        name: 'All UI Buttons Functional',
+        description: 'Test every button and interactive element',
+        priority: 'high',
+        category: 'ui',
+        timeout: 20000,
+        steps: [
+          { id: '1', action: 'navigate', target: '/' },
+          { id: '2', action: 'find-all-buttons', target: 'interactive-elements' },
+          { id: '3', action: 'test-each-button', target: 'button-list' },
+          { id: '4', action: 'verify-responses', target: 'button-responses' },
+          { id: '5', action: 'check-no-errors', target: 'error-log' }
+        ],
+        expectedResults: [
+          { step: '3', condition: 'all-buttons-responsive', expected: true },
+          { step: '4', condition: 'expected-responses', expected: true },
+          { step: '5', condition: 'no-javascript-errors', expected: true }
+        ]
+      },
+
+      {
+        id: 'responsive-design',
+        name: 'Responsive Design Test',
+        description: 'Test app on different screen sizes',
+        priority: 'high',
+        category: 'ui',
+        timeout: 15000,
+        steps: [
+          { id: '1', action: 'navigate', target: '/' },
+          { id: '2', action: 'resize', target: 'viewport', value: 'mobile-320x568' },
+          { id: '3', action: 'verify', target: 'mobile-layout', expected: true },
+          { id: '4', action: 'resize', target: 'viewport', value: 'tablet-768x1024' },
+          { id: '5', action: 'verify', target: 'tablet-layout', expected: true },
+          { id: '6', action: 'resize', target: 'viewport', value: 'desktop-1920x1080' },
+          { id: '7', action: 'verify', target: 'desktop-layout', expected: true }
+        ],
+        expectedResults: [
+          { step: '3', condition: 'mobile-optimized', expected: true },
+          { step: '5', condition: 'tablet-optimized', expected: true },
+          { step: '7', condition: 'desktop-optimized', expected: true }
+        ]
+      },
+
+      // PERFORMANCE TESTS
+      {
+        id: 'performance-baseline',
+        name: 'Performance Baseline Test',
+        description: 'Test app performance against benchmarks',
+        priority: 'high',
+        category: 'performance',
+        timeout: 10000,
+        steps: [
+          { id: '1', action: 'navigate', target: '/' },
+          { id: '2', action: 'measure', target: 'load-time' },
+          { id: '3', action: 'measure', target: 'render-time' },
+          { id: '4', action: 'measure', target: 'memory-usage' },
+          { id: '5', action: 'measure', target: 'network-requests' },
+          { id: '6', action: 'compare-baseline', target: 'performance-metrics' }
+        ],
+        expectedResults: [
+          { step: '2', condition: 'load-time', expected: '<3000ms' },
+          { step: '3', condition: 'render-time', expected: '<1000ms' },
+          { step: '4', condition: 'memory-usage', expected: '<50MB' },
+          { step: '5', condition: 'network-requests', expected: '<10' }
+        ]
+      },
+
+      {
+        id: 'memory-leak-test',
+        name: 'Memory Leak Detection',
+        description: 'Test for memory leaks during extended use',
+        priority: 'medium',
+        category: 'performance',
+        timeout: 30000,
+        steps: [
+          { id: '1', action: 'navigate', target: '/' },
+          { id: '2', action: 'measure-memory', target: 'initial' },
+          { id: '3', action: 'repeat-session', target: 'voice', value: 10 },
+          { id: '4', action: 'measure-memory', target: 'after-sessions' },
+          { id: '5', action: 'force-gc', target: 'garbage-collect' },
+          { id: '6', action: 'measure-memory', target: 'final' },
+          { id: '7', action: 'compare-memory', target: 'memory-growth' }
+        ],
+        expectedResults: [
+          { step: '7', condition: 'memory-growth', expected: '<20MB' }
+        ]
+      },
+
+      // SECURITY TESTS
+      {
+        id: 'data-privacy',
+        name: 'Data Privacy Verification',
+        description: 'Verify sensitive data is handled properly',
+        priority: 'critical',
+        category: 'security',
+        timeout: 15000,
+        steps: [
+          { id: '1', action: 'navigate', target: '/' },
+          { id: '2', action: 'start-session', target: 'voice' },
+          { id: '3', action: 'mock-typing', target: 'keyboard', value: 'sensitive-data' },
+          { id: '4', action: 'check-local-storage', target: 'raw-data', expected: 'absent' },
+          { id: '5', action: 'check-network-logs', target: 'sensitive-data', expected: 'absent' },
+          { id: '6', action: 'verify-encryption', target: 'stored-data' }
+        ],
+        expectedResults: [
+          { step: '4', condition: 'no-raw-keystrokes', expected: true },
+          { step: '5', condition: 'no-sensitive-network', expected: true },
+          { step: '6', condition: 'data-encrypted', expected: true }
+        ]
+      },
+
+      // ACCESSIBILITY TESTS
+      {
+        id: 'accessibility-compliance',
+        name: 'Accessibility Compliance',
+        description: 'Test WCAG accessibility standards',
+        priority: 'medium',
+        category: 'accessibility',
+        timeout: 10000,
+        steps: [
+          { id: '1', action: 'navigate', target: '/' },
+          { id: '2', action: 'check-aria-labels', target: 'interactive-elements' },
+          { id: '3', action: 'test-keyboard-navigation', target: 'tab-order' },
+          { id: '4', action: 'check-color-contrast', target: 'text-elements' },
+          { id: '5', action: 'test-screen-reader', target: 'content-announcement' }
+        ],
+        expectedResults: [
+          { step: '2', condition: 'aria-labels-present', expected: true },
+          { step: '3', condition: 'keyboard-navigable', expected: true },
+          { step: '4', condition: 'contrast-ratio', expected: '>4.5' },
+          { step: '5', condition: 'screen-readable', expected: true }
+        ]
+      }
+    ];
+  }
+
+  // --- TEST EXECUTION ENGINE ---
+  async runFullTestSuite(): Promise<TestReport[]> {
+    if (this.isRunning) {
+      throw new Error('Test suite is already running');
+    }
+
+    this.isRunning = true;
+    this.testResults = [];
+
+    const scenarios = this.getTestScenarios();
+    
+    try {
+      for (const scenario of scenarios) {
+        const report = await this.runScenario(scenario);
+        this.testResults.push(report);
+        
+        // Brief pause between scenarios
+        await new Promise(resolve => setTimeout(resolve, 1000));
+      }
+    } finally {
+      this.isRunning = false;
+    }
+
+    return this.testResults;
+  }
+
+  private async runScenario(scenario: TestScenario): Promise<TestReport> {
+    const startTime = performance.now();
+    this.currentScenario = scenario;
+
+    logger.info(`[TEST] Running scenario: ${scenario.name}`);
+
+    const report: TestReport = {
+      scenario: scenario.name,
+      passed: true,
+      duration: 0,
+      results: [],
+      errors: [],
+      screenshots: [],
+      performance: this.getCurrentPerformance()
+    };
+
+    try {
+      for (const step of scenario.steps) {
+        const result = await this.executeStep(step, scenario);
+        report.results.push(result);
+        
+        if (!result.passed) {
+          report.passed = false;
+          report.errors.push(`Step ${step.id} failed: ${result.actual}`);
+        }
+
+        // Wait after step if specified
+        if (step.waitAfter) {
+          await new Promise(resolve => setTimeout(resolve, step.waitAfter));
+        }
+      }
+    } catch (error) {
+      report.passed = false;
+      report.errors.push(error instanceof Error ? error.message : 'Unknown error');
+    }
+
+    report.duration = performance.now() - startTime;
+    report.performance = this.getCurrentPerformance();
+
+    logger.info(`[TEST] Scenario ${scenario.name} ${report.passed ? 'PASSED' : 'FAILED'} (${report.duration.toFixed(2)}ms)`);
+
+    return report;
+  }
+
+  private async executeStep(step: TestStep, scenario: TestScenario): Promise<ExpectedResult> {
+    const result: ExpectedResult = {
+      step: step.id,
+      condition: step.action,
+      expected: step.value || true,
+      passed: false
+    };
+
+    try {
+      switch (step.action) {
+        case 'navigate':
+          await this.navigateTo(step.target);
+          result.passed = true;
+          break;
+
+        case 'wait':
+          await this.waitForCondition(step.target, scenario.timeout);
+          result.passed = true;
+          break;
+
+        case 'click':
+          await this.clickElement(step.target);
+          result.passed = true;
+          break;
+
+        case 'verify':
+          result.actual = await this.verifyCondition(step.target, step.value);
+          result.passed = this.compareResults(result.expected, result.actual);
+          break;
+
+        case 'mock-permission':
+          await this.mockPermission(step.target, step.value);
+          result.passed = true;
+          break;
+
+        case 'mock-speech':
+          await this.mockSpeechInput(step.value);
+          result.passed = true;
+          break;
+
+        case 'mock-emergency-input':
+          await this.mockEmergencyInput(step.value);
+          result.passed = true;
+          break;
+
+        case 'measure':
+          result.actual = await this.measurePerformance(step.target);
+          result.passed = this.compareResults(result.expected, result.actual);
+          break;
+
+        case 'resize':
+          await this.resizeViewport(step.value);
+          result.passed = true;
+          break;
+
+        case 'check-local-storage':
+          result.actual = await this.checkLocalStorage(step.target);
+          result.passed = this.compareResults(result.expected, result.actual);
+          break;
+
+        default:
+          throw new Error(`Unknown action: ${step.action}`);
+      }
+    } catch (error) {
+      result.passed = false;
+      result.actual = error instanceof Error ? error.message : 'Unknown error';
+    }
+
+    return result;
+  }
+
+  // --- TEST IMPLEMENTATION METHODS ---
+  private async navigateTo(path: string): Promise<void> {
+    window.location.href = path;
+    await new Promise(resolve => setTimeout(resolve, 100));
+  }
+
+  private async waitForCondition(condition: string, timeout: number): Promise<void> {
+    const startTime = performance.now();
+    
+    while (performance.now() - startTime < timeout) {
+      if (this.checkCondition(condition)) {
+        return;
+      }
+      await new Promise(resolve => setTimeout(resolve, 100));
+    }
+    
+    throw new Error(`Timeout waiting for condition: ${condition}`);
+  }
+
+  private checkCondition(condition: string): boolean {
+    switch (condition) {
+      case 'app-loaded':
+        return document.readyState === 'complete';
+      case 'main-view':
+        return !!document.querySelector('[data-testid="main-view"]');
+      case 'permission-prompt':
+        return !!document.querySelector('[data-testid="permission-prompt"]');
+      case 'connecting':
+        return !!document.querySelector('[data-testid="connecting"]');
+      case 'emergency-detection':
+        return !!document.querySelector('[data-testid="emergency-protocol"]');
+      default:
+        return false;
+    }
+  }
+
+  private async clickElement(selector: string): Promise<void> {
+    const element = document.querySelector(selector);
+    if (!element) {
+      throw new Error(`Element not found: ${selector}`);
+    }
+    (element as HTMLElement).click();
+    await new Promise(resolve => setTimeout(resolve, 100));
+  }
+
+  private async verifyCondition(target: string, expected: any): Promise<any> {
+    switch (target) {
+      case 'status':
+        const statusElement = document.querySelector('[data-testid="app-status"]');
+        return statusElement?.textContent || 'unknown';
+      
+      case 'response-received':
+        return !!document.querySelector('[data-testid="ai-response"]');
+      
+      case 'emergency-protocol-active':
+        return !!document.querySelector('[data-testid="emergency-protocol"]');
+      
+      case 'emergency-resources':
+        const resourcesElement = document.querySelector('[data-testid="emergency-resources"]');
+        return resourcesElement ? 'visible' : 'hidden';
+      
+      default:
+        return null;
+    }
+  }
+
+  private async mockPermission(permission: string, value: string): Promise<void> {
+    // Mock permission API
+    const originalPermissions = navigator.permissions;
+    (navigator as any).permissions = {
+      query: ({ name }: { name: string }) => {
+        if (name === permission) {
+          return Promise.resolve({
+            state: value === 'granted' ? 'granted' : 'denied'
+          });
+        }
+        return originalPermissions.query({ name });
+      }
+    };
+  }
+
+  private async mockSpeechInput(text: string): Promise<void> {
+    // Mock speech recognition
+    const event = new CustomEvent('mock-speech-input', {
+      detail: { transcript: text, confidence: 0.9 }
+    });
+    window.dispatchEvent(event);
+  }
+
+  private async mockEmergencyInput(text: string): Promise<void> {
+    // Mock emergency detection
+    const event = new CustomEvent('emergency-detected', {
+      detail: { text, severity: 'high' }
+    });
+    window.dispatchEvent(event);
+  }
+
+  private async measurePerformance(metric: string): Promise<string> {
+    switch (metric) {
+      case 'load-time':
+        return `${this.performanceBaseline?.loadTime || 0}ms`;
+      
+      case 'render-time':
+        return `${this.performanceBaseline?.renderTime || 0}ms`;
+      
+      case 'memory-usage':
+        return `${this.getMemoryUsage()}MB`;
+      
+      case 'network-requests':
+        return `${this.performanceBaseline?.networkRequests || 0}`;
+      
+      default:
+        return 'unknown';
+    }
+  }
+
+  private async resizeViewport(size: string): Promise<void> {
+    const sizes: Record<string, { width: number; height: number }> = {
+      'mobile-320x568': { width: 320, height: 568 },
+      'tablet-768x1024': { width: 768, height: 1024 },
+      'desktop-1920x1080': { width: 1920, height: 1080 }
+    };
+
+    const viewport = sizes[size];
+    if (viewport) {
+      // Resize viewport (this would need to be implemented based on testing framework)
+      window.innerWidth = viewport.width;
+      window.innerHeight = viewport.height;
+      window.dispatchEvent(new Event('resize'));
+    }
+  }
+
+  private async checkLocalStorage(key: string): Promise<string> {
+    const value = localStorage.getItem(key);
+    return value ? 'present' : 'absent';
+  }
+
+  private compareResults(expected: any, actual: any): boolean {
+    if (typeof expected === 'string' && expected.includes('<')) {
+      // Handle range comparisons like '<3000ms'
+      const operator = expected.match(/[<>=]/)?.[0];
+      const value = parseFloat(expected.replace(/[<>=]/g, ''));
+      const actualNum = parseFloat(actual);
+      
+      switch (operator) {
+        case '<': return actualNum < value;
+        case '>': return actualNum > value;
+        case '<=': return actualNum <= value;
+        case '>=': return actualNum >= value;
+        default: return false;
+      }
+    }
+    
+    return expected === actual;
+  }
+
+  private getCurrentPerformance(): PerformanceMetrics {
+    return {
+      loadTime: this.performanceBaseline?.loadTime || 0,
+      renderTime: this.performanceBaseline?.renderTime || 0,
+      memoryUsage: this.getMemoryUsage(),
+      networkRequests: this.performanceBaseline?.networkRequests || 0,
+      errorCount: this.performanceBaseline?.errorCount || 0
+    };
+  }
+
+  // --- REPORTING ---
+  generateReport(): TestSummary {
+    const passed = this.testResults.filter(r => r.passed).length;
+    const failed = this.testResults.filter(r => !r.passed).length;
+    const total = this.testResults.length;
+
+    return {
+      total,
+      passed,
+      failed,
+      passRate: (passed / total) * 100,
+      duration: this.testResults.reduce((sum, r) => sum + r.duration, 0),
+      scenarios: this.testResults,
+      summary: this.generateSummary()
+    };
+  }
+
+  private generateSummary(): string {
+    const passed = this.testResults.filter(r => r.passed).length;
+    const failed = this.testResults.filter(r => !r.passed).length;
+    
+    return `Test Suite Complete: ${passed} passed, ${failed} failed`;
+  }
+}
+
+interface TestSummary {
+  total: number;
+  passed: number;
+  failed: number;
+  passRate: number;
+  duration: number;
+  scenarios: TestReport[];
+  summary: string;
+}
+
+// Export singleton instance
+export const automatedTestSuite = AutomatedTestSuite.getInstance();
+
+// Export types
+export type { TestSummary };
+
+// Hook for React components
+export function useAutomatedTesting() {
+  const [isRunning, setIsRunning] = React.useState(false);
+  const [results, setResults] = React.useState<TestSummary | null>(null);
+  const [progress, setProgress] = React.useState(0);
+
+  const runTests = React.useCallback(async () => {
+    setIsRunning(true);
+    setProgress(0);
+    
+    try {
+      const testResults = await automatedTestSuite.runFullTestSuite();
+      const summary = automatedTestSuite.generateReport();
+      setResults(summary);
+    } catch (error) {
+      console.error('Test suite failed:', error);
+    } finally {
+      setIsRunning(false);
+      setProgress(100);
+    }
+  }, []);
+
+  return {
+    isRunning,
+    results,
+    progress,
+    runTests,
+    generateReport: automatedTestSuite.generateReport.bind(automatedTestSuite)
+  };
+}
diff --git a/test/testRunner.ts b/test/testRunner.ts
new file mode 100644
index 0000000..5ab4366
--- /dev/null
+++ b/test/testRunner.ts
@@ -0,0 +1,285 @@
+// --- TEST RUNNER & EXECUTION ENGINE ---
+// One-click testing without manual intervention
+
+import { automatedTestSuite, TestSummary } from './automatedTestSuite';
+import { logger } from '../src/utils/logger';
+
+class TestRunner {
+  private static instance: TestRunner;
+  private isRunning = false;
+  private testResults: TestSummary | null = null;
+
+  private constructor() {}
+
+  static getInstance(): TestRunner {
+    if (!TestRunner.instance) {
+      TestRunner.instance = new TestRunner();
+    }
+    return TestRunner.instance;
+  }
+
+  // --- ONE-CLICK TEST EXECUTION ---
+  async runCompleteTestSuite(): Promise<TestSummary> {
+    if (this.isRunning) {
+      throw new Error('Tests are already running');
+    }
+
+    this.isRunning = true;
+    console.log('🚀 Starting Complete Test Suite...');
+    console.log('📋 This will test ALL functionality automatically');
+
+    try {
+      // Run the automated test suite
+      const results = await automatedTestSuite.runFullTestSuite();
+      this.testResults = automatedTestSuite.generateReport();
+
+      // Display results
+      this.displayResults(this.testResults);
+
+      return this.testResults;
+    } catch (error) {
+      console.error('❌ Test suite failed:', error);
+      throw error;
+    } finally {
+      this.isRunning = false;
+    }
+  }
+
+  // --- RESULTS DISPLAY ---
+  private displayResults(results: TestSummary): void {
+    console.log('\n📊 TEST RESULTS SUMMARY');
+    console.log('='.repeat(50));
+    console.log(`Total Tests: ${results.total}`);
+    console.log(`✅ Passed: ${results.passed}`);
+    console.log(`❌ Failed: ${results.failed}`);
+    console.log(`📈 Pass Rate: ${results.passRate.toFixed(1)}%`);
+    console.log(`⏱️ Duration: ${(results.duration / 1000).toFixed(2)}s`);
+
+    // Detailed results
+    console.log('\n📋 DETAILED RESULTS:');
+    results.scenarios.forEach((scenario, index) => {
+      const status = scenario.passed ? '✅' : '❌';
+      const duration = (scenario.duration / 1000).toFixed(2);
+      console.log(`${index + 1}. ${status} ${scenario.scenario} (${duration}s)`);
+      
+      if (!scenario.passed) {
+        scenario.errors.forEach(error => {
+          console.log(`   ❌ Error: ${error}`);
+        });
+      }
+    });
+
+    // Performance summary
+    console.log('\n⚡ PERFORMANCE METRICS:');
+    const avgPerformance = this.calculateAveragePerformance(results.scenarios);
+    console.log(`Average Load Time: ${avgPerformance.loadTime.toFixed(2)}ms`);
+    console.log(`Average Memory Usage: ${avgPerformance.memoryUsage.toFixed(2)}MB`);
+    console.log(`Average Network Requests: ${avgPerformance.networkRequests}`);
+
+    // Recommendations
+    console.log('\n💡 RECOMMENDATIONS:');
+    this.generateRecommendations(results);
+
+    console.log('\n🎯 Test Suite Complete!');
+  }
+
+  private calculateAveragePerformance(scenarios: any[]): any {
+    const validScenarios = scenarios.filter(s => s.performance);
+    
+    if (validScenarios.length === 0) {
+      return { loadTime: 0, memoryUsage: 0, networkRequests: 0 };
+    }
+
+    const totals = validScenarios.reduce((acc, scenario) => ({
+      loadTime: acc.loadTime + scenario.performance.loadTime,
+      memoryUsage: acc.memoryUsage + scenario.performance.memoryUsage,
+      networkRequests: acc.networkRequests + scenario.performance.networkRequests
+    }), { loadTime: 0, memoryUsage: 0, networkRequests: 0 });
+
+    return {
+      loadTime: totals.loadTime / validScenarios.length,
+      memoryUsage: totals.memoryUsage / validScenarios.length,
+      networkRequests: totals.networkRequests / validScenarios.length
+    };
+  }
+
+  private generateRecommendations(results: TestSummary): void {
+    const failedScenarios = results.scenarios.filter(s => !s.passed);
+    
+    if (failedScenarios.length === 0) {
+      console.log('🎉 All tests passed! App is ready for production.');
+      return;
+    }
+
+    // Categorize failures
+    const failures = failedScenarios.reduce((acc, scenario) => {
+      const category = this.categorizeFailure(scenario);
+      acc[category] = (acc[category] || 0) + 1;
+      return acc;
+    }, {} as Record<string, number>);
+
+    Object.entries(failures).forEach(([category, count]) => {
+      console.log(`⚠️ ${count} ${category} issues found`);
+    });
+
+    // Specific recommendations
+    if (failures.ui > 0) {
+      console.log('🔧 Review UI components and interactions');
+    }
+    if (failures.performance > 0) {
+      console.log('⚡ Optimize performance and resource usage');
+    }
+    if (failures.security > 0) {
+      console.log('🔒 Address security and privacy concerns');
+    }
+    if (failures.flow > 0) {
+      console.log('🔄 Fix user flow and state management issues');
+    }
+  }
+
+  private categorizeFailure(scenario: any): string {
+    if (scenario.scenario.includes('Performance') || scenario.scenario.includes('Memory')) {
+      return 'performance';
+    }
+    if (scenario.scenario.includes('Security') || scenario.scenario.includes('Privacy')) {
+      return 'security';
+    }
+    if (scenario.scenario.includes('UI') || scenario.scenario.includes('Button')) {
+      return 'ui';
+    }
+    if (scenario.scenario.includes('Flow') || scenario.scenario.includes('Session')) {
+      return 'flow';
+    }
+    return 'general';
+  }
+
+  // --- QUICK TEST METHODS ---
+  async runSmokeTest(): Promise<boolean> {
+    console.log('🔥 Running Smoke Test...');
+    
+    try {
+      // Quick health checks
+      const checks = await Promise.all([
+        this.checkAppLoads(),
+        this.checkBasicUI(),
+        this.checkNoErrors(),
+        this.checkPerformance()
+      ]);
+
+      const allPassed = checks.every(check => check);
+      
+      if (allPassed) {
+        console.log('✅ Smoke Test Passed - App is healthy!');
+      } else {
+        console.log('❌ Smoke Test Failed - Issues detected!');
+      }
+
+      return allPassed;
+    } catch (error) {
+      console.error('❌ Smoke Test Error:', error);
+      return false;
+    }
+  }
+
+  private async checkAppLoads(): Promise<boolean> {
+    return document.readyState === 'complete' && 
+           !!document.querySelector('[data-testid="app"]');
+  }
+
+  private async checkBasicUI(): Promise<boolean> {
+    const criticalElements = [
+      '[data-testid="main-view"]',
+      '[data-testid="voice-button"]',
+      '[data-testid="status-display"]'
+    ];
+
+    return criticalElements.every(selector => !!document.querySelector(selector));
+  }
+
+  private async checkNoErrors(): Promise<boolean> {
+    // Check console for errors (simplified)
+    return true; // Would need error tracking implementation
+  }
+
+  private async checkPerformance(): Promise<boolean> {
+    const loadTime = performance.getEntriesByType('navigation')[0]?.duration || 0;
+    return loadTime < 3000; // 3 second threshold
+  }
+
+  // --- CONTINUOUS MONITORING ---
+  startContinuousMonitoring(): void {
+    console.log('🔍 Starting Continuous Monitoring...');
+    
+    setInterval(() => {
+      this.performHealthCheck();
+    }, 30000); // Every 30 seconds
+  }
+
+  private performHealthCheck(): void {
+    const metrics = {
+      memory: this.getMemoryUsage(),
+      errors: this.getErrorCount(),
+      performance: this.getCurrentPerformance()
+    };
+
+    // Alert if issues detected
+    if (metrics.memory > 100) { // 100MB threshold
+      console.warn('⚠️ High memory usage detected:', metrics.memory);
+    }
+
+    if (metrics.errors > 0) {
+      console.warn('⚠️ Errors detected:', metrics.errors);
+    }
+
+    if (metrics.performance.loadTime > 5000) { // 5 second threshold
+      console.warn('⚠️ Poor performance detected:', metrics.performance.loadTime);
+    }
+  }
+
+  private getMemoryUsage(): number {
+    if ('memory' in performance) {
+      const mem = (performance as any).memory;
+      return mem.usedJSHeapSize / 1024 / 1024; // MB
+    }
+    return 0;
+  }
+
+  private getErrorCount(): number {
+    // Would need error tracking implementation
+    return 0;
+  }
+
+  private getCurrentPerformance(): any {
+    const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
+    return {
+      loadTime: navigation?.loadEventEnd - navigation?.loadEventStart || 0
+    };
+  }
+
+  // --- PUBLIC API ---
+  getResults(): TestSummary | null {
+    return this.testResults;
+  }
+
+  isTestRunning(): boolean {
+    return this.isRunning;
+  }
+}
+
+// Export singleton instance
+export const testRunner = TestRunner.getInstance();
+
+// Global test execution function
+export async function runAllTests(): Promise<TestSummary> {
+  return await testRunner.runCompleteTestSuite();
+}
+
+// Quick test function
+export async function runSmokeTest(): Promise<boolean> {
+  return await testRunner.runSmokeTest();
+}
+
+// Start monitoring
+export function startMonitoring(): void {
+  testRunner.startContinuousMonitoring();
+}
diff --git a/test/zenStore.test.ts b/test/zenStore.test.ts
index 8deaf23..f7270f8 100644
--- a/test/zenStore.test.ts
+++ b/test/zenStore.test.ts
@@ -29,45 +29,49 @@ describe('ZenStore State Machine', () => {
     it('prevents invalid transition idling -> processing', () => {
         const store = useZenStore.getState();
         // Mock console.error to verify it's called
-        const mockError = vi.spyOn(console, 'error').mockImplementation(() => {});
-        const mockWarn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-        
+        const mockError = vi.spyOn(console, 'error').mockImplementation(() => { });
+        const mockWarn = vi.spyOn(console, 'warn').mockImplementation(() => { });
+
         // Reset store to idling state first
         useZenStore.setState({ status: { kind: 'idling' } });
-        
+
         // Since we now allow idling -> processing for text mode, this should be allowed
         store.transitionTo({ kind: 'processing' });
         expect(useZenStore.getState().status).toEqual({ kind: 'processing' });
-        
+
         // No error should be logged since this transition is now allowed
         expect(mockError).not.toHaveBeenCalled();
         expect(mockWarn).not.toHaveBeenCalled();
-        
+
         mockError.mockRestore();
         mockWarn.mockRestore();
     });
 
     it('prevents truly invalid transition processing -> connecting', () => {
         const store = useZenStore.getState();
-        // Mock console.error to verify it's called
-        const mockError = vi.spyOn(console, 'error').mockImplementation(() => {});
-        const mockWarn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-        
+        // Mock console to verify logging
+        const mockError = vi.spyOn(console, 'error').mockImplementation(() => { });
+        const mockWarn = vi.spyOn(console, 'warn').mockImplementation(() => { });
+
         // Set to processing state first
         useZenStore.setState({ status: { kind: 'processing' } });
-        
-        // Try invalid transition
+
+        // Try invalid transition - should be BLOCKED
         store.transitionTo({ kind: 'connecting' });
-        expect(useZenStore.getState().status).toEqual({ kind: 'connecting' });
-        
-        // Error should be logged for truly invalid transition
+
+        // State should remain 'processing' because transition is invalid
+        expect(useZenStore.getState().status).toEqual({ kind: 'processing' });
+
+        // Error should be logged for invalid transition
         expect(mockError).toHaveBeenCalledWith(
-            expect.stringContaining('Invalid State Transition')
+            '[ZenStore] Transition failed:',
+            expect.stringContaining('Invalid transition')
         );
+        // Warning should be logged about blocking
         expect(mockWarn).toHaveBeenCalledWith(
-            expect.stringContaining('Allowing invalid transition in test environment')
+            expect.stringContaining('Invalid transition blocked')
         );
-        
+
         mockError.mockRestore();
         mockWarn.mockRestore();
     });