chat history try 4

avatar-frontend/app/page.tsx

@@ -7,11 +7,11 @@ import { flushSync } from "react-dom";
 import * as THREE from "three";
 
 /* -------------------- CONSTANTS & TYPES -------------------- */
-const DEFAULT_AVATAR = ""; // Avaturn only
+const DEFAULT_AVATAR = "";
 
 const getWebSocketURL = () => {
   if (typeof window === "undefined") return "ws://localhost:8000/ws";
-  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  const protocol = window.location.protocol === "https:" : "wss:" ? "ws:";
   return `${protocol}//${window.location.host}/ws`;
 };
 const BACKEND_WS = getWebSocketURL();
@@ -28,8 +28,6 @@ interface Message {
 
 /* -------------------- DYNAMIC CDN IMPORT -------------------- */
 async function importFromCdn(url: string) {
-  // avoid bundler resolution at build-time
-  // eslint-disable-next-line no-eval
   return (0, eval)(`import(${JSON.stringify(url)})`);
 }
 
@@ -56,7 +54,7 @@ async function toBlobObjectUrlViaProxy(httpUrl: string) {
   return URL.createObjectURL(blob);
 }
 
-/* -------------------- AVATURN MODAL (CDN SDK) - FIXED -------------------- */
+/* -------------------- AVATURN MODAL -------------------- */
 function AvaturnModal({
   open,
   onClose,
@@ -69,7 +67,6 @@ function AvaturnModal({
   subdomain?: string;
 }) {
   const containerRef = React.useRef<HTMLDivElement | null>(null);
-  const [initError, setInitError] = useState<string | null>(null);
   const [sdkStatus, setSdkStatus] = useState<string>("Loading...");
   const sdkRef = useRef<any>(null);
   const onExportRef = useRef(onExport);
@@ -83,8 +80,7 @@ function AvaturnModal({
     let cancelled = false;
 
     (async () => {
-      try {
-        console.log('[Avaturn] Starting SDK initialization...');
+      try:
         setSdkStatus("Loading SDK...");
         
         const mod: any = await importFromCdn(
@@ -92,30 +88,22 @@ function AvaturnModal({
         );
         
         if (cancelled) return;
-        console.log('[Avaturn] SDK module loaded:', mod);
 
         const AvaturnSDK = mod?.AvaturnSDK;
         if (!AvaturnSDK) {
-          throw new Error("AvaturnSDK not found in module");
+          throw new Error("AvaturnSDK not found");
         }
 
-        console.log('[Avaturn] Creating SDK instance...');
         const sdk = new AvaturnSDK();
         sdkRef.current = sdk;
 
-        setSdkStatus("Initializing Avaturn...");
+        setSdkStatus("Initializing...");
         const url = `https://${subdomain}.avaturn.dev`;
-        console.log('[Avaturn] Init URL:', url);
 
         await sdk.init(containerRef.current!, { url });
-        
-        console.log('[Avaturn] SDK initialized successfully!');
-        setSdkStatus("Ready! Customize your avatar");
+        setSdkStatus("Ready!");
 
         sdk.on("export", (data: any) => {
-          console.log('[Avaturn] ✅ EXPORT EVENT FIRED!');
-          console.log('[Avaturn] Export data:', data);
-          
           const glb =
             data?.links?.glb?.url ||
             data?.links?.glb ||
@@ -126,24 +114,14 @@ function AvaturnModal({
             data?.data?.glb?.url ||
             data?.data?.glb;
           
-          console.log('[Avaturn] Extracted GLB URL:', glb);
-          
           if (glb) {
             onExportRef.current(glb);
-          } else {
-            console.error('[Avaturn] No GLB URL found in export data!');
-            alert('Export succeeded but no GLB URL found. Check console for data.');
           }
         });
 
-        sdk.on("*", (eventName: string, data: any) => {
-          console.log('[Avaturn] Event:', eventName, data);
-        });
-
       } catch (e: any) {
-        console.error("[Avaturn] Init error:", e);
-        setInitError(e?.message || "Failed to init");
-        setSdkStatus("Error loading Avaturn");
+        console.error("[Avaturn] Error:", e);
+        setSdkStatus("Error loading");
       }
     })();
 
@@ -151,12 +129,8 @@ function AvaturnModal({
       cancelled = true;
       if (sdkRef.current) {
         try {
-          console.log('[Avaturn] Destroying SDK...');
           sdkRef.current.destroy?.();
-          sdkRef.current = null;
-        } catch (e) {
-          console.error('[Avaturn] Destroy error:', e);
-        }
+        } catch {}
       }
     };
   }, [open, subdomain]);
@@ -166,10 +140,7 @@ function AvaturnModal({
   return (
     <div style={{ position: "fixed", inset: 0, zIndex: 1000, background: "#000" }}>
       <button
-        onClick={() => {
-          console.log('[Avaturn] Close button clicked');
-          onClose();
-        }}
+        onClick={onClose}
         style={{
           position: "absolute",
           top: 20,
@@ -183,57 +154,28 @@ function AvaturnModal({
           borderRadius: 10,
           cursor: "pointer",
           fontSize: 24,
-          fontWeight: 700,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
         }}
       >
         ✕
       </button>
-      <div
-        style={{
-          position: "absolute",
-          top: 20,
-          left: 20,
-          zIndex: 1002,
-          background: "rgba(0,200,255,.95)",
-          color: "#000",
-          padding: "12px 18px",
-          borderRadius: 10,
-          fontSize: 14,
-          fontWeight: 700,
-        }}
-      >
+      <div style={{
+        position: "absolute",
+        top: 20,
+        left: 20,
+        zIndex: 1002,
+        background: "rgba(0,200,255,.95)",
+        color: "#000",
+        padding: "12px 18px",
+        borderRadius: 10,
+      }}>
         {sdkStatus}
       </div>
-      {initError && (
-        <div
-          style={{
-            position: "absolute",
-            top: 80,
-            left: 20,
-            zIndex: 1002,
-            background: "rgba(255,0,0,.9)",
-            color: "#fff",
-            padding: "10px 14px",
-            borderRadius: 8,
-            fontSize: 13,
-            maxWidth: 400,
-          }}
-        >
-          ❌ {initError}
-          <br />
-          <small>Check console for details</small>
-        </div>
-      )}
       <div
         id="avaturn-sdk-container"
         ref={containerRef}
         style={{
           width: "100%",
           height: "100%",
-          border: "none",
           background: "#1a1a1a",
         }}
       />
@@ -249,20 +191,9 @@ function Avatar({ liveBlend, avatarUrl, position, rotation, scale }: {
   rotation: [number, number, number];
   scale: number;
 }) {
-  console.log('[Avatar Component] Mounting, URL length:', avatarUrl.length);
-  console.log('[Avatar Component] URL type:', avatarUrl.substring(0, 30) + '...');
-  
   const gltf = useGLTF(avatarUrl) as any;
   const { scene, animations } = gltf;
-  
-  // Also load the idle animation separately (for T-pose avatars)
   const idleAnimGLTF = useGLTF('/idle-animation.glb') as any;
-  
-  console.log('[Avatar Component] useGLTF completed, scene loaded');
-  console.log('[Avatar Component] Avatar animations:', animations?.length || 0);
-  console.log('[Avatar Component] Idle animation loaded:', idleAnimGLTF.animations?.length || 0);
-
-  // Animation mixer for skeletal animations
   const mixerRef = useRef<THREE.AnimationMixer | null>(null);
 
   const morphMeshes = useMemo(() => {
@@ -279,11 +210,9 @@ function Avatar({ liveBlend, avatarUrl, position, rotation, scale }: {
       if (o.morphTargetDictionary && o.morphTargetInfluences) arr.push(o);
     });
 
-    // Setup animation mixer
     const mixer = new THREE.AnimationMixer(scene);
     mixerRef.current = mixer;
     
-    // Use avatar's own animation if it has one, otherwise use idle animation
     const animToPlay = (animations && animations.length > 0) 
       ? animations[0] 
       : (idleAnimGLTF.animations && idleAnimGLTF.animations.length > 0)
@@ -293,21 +222,16 @@ function Avatar({ liveBlend, avatarUrl, position, rotation, scale }: {
     if (animToPlay) {
       const action = mixer.clipAction(animToPlay);
       action.play();
-      console.log('[Avatar] Playing animation:', animToPlay.name);
-    } else {
-      console.warn('[Avatar] No animation available');
     }
     
     return arr;
   }, [scene, animations, idleAnimGLTF.animations]);
 
   useFrame((_, dt) => {
-    // Update skeletal animation
     if (mixerRef.current) {
       mixerRef.current.update(dt);
     }
     
-    // Update morph targets (lip sync) with stronger influence
     morphMeshes.forEach((m) => {
       const dict = m.morphTargetDictionary as Record<string, number>;
       const infl = m.morphTargetInfluences as number[];
@@ -315,7 +239,6 @@ function Avatar({ liveBlend, avatarUrl, position, rotation, scale }: {
         const i = dict[name];
         if (i === undefined) return;
         const cur = infl[i] ?? 0;
-        // Faster interpolation for more responsive lip sync
         infl[i] = cur + (target - cur) * Math.min(1, dt * 25);
       });
       Object.values(dict).forEach((idx) => {
@@ -329,23 +252,114 @@ function Avatar({ liveBlend, avatarUrl, position, rotation, scale }: {
   return <primitive object={scene} position={position} rotation={rotation} scale={scale} />;
 }
 
-/* -------------------- SMALL UI -------------------- */
-function GlowingOrb({ isActive }: { isActive: boolean }) {
+/* -------------------- LOGIN SCREEN -------------------- */
+function LoginScreen({ onLogin }: { onLogin: (token: string, username: string, summary: string | null) => void }) {
+  const [isLogin, setIsLogin] = useState(true);
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!username || !password) {
+      setError("Please fill in all fields");
+      return;
+    }
+
+    setLoading(true);
+    setError("");
+
+    const endpoint = isLogin ? "/api/login" : "/api/signup";
+    const protocol = window.location.protocol;
+    const host = window.location.host;
+    const url = `${protocol}//${host}${endpoint}`;
+
+    try {
+      const response = await fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, password }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        if (isLogin) {
+          localStorage.setItem("mrrrme_token", data.token);
+          localStorage.setItem("mrrrme_username", data.username);
+          onLogin(data.token, data.username, data.summary);
+        } else {
+          setIsLogin(true);
+          setError("Account created! Please login.");
+        }
+      } else {
+        setError(data.detail || "Authentication failed");
+      }
+    } catch (err) {
+      setError("Connection error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
-    <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none">
-      <div
-        className={`relative w-64 h-64 transition-all duration-1000 ${
-          isActive ? "scale-100 opacity-100" : "scale-0 opacity-0"
-        }`}
-      >
-        <div className="absolute inset-0 rounded-full bg-gradient-to-r from-blue-500/30 via-purple-500/30 to-pink-500/30 blur-3xl animate-pulse-slow" />
-        <div className="absolute inset-4 rounded-full bg-gradient-to-r from-blue-400/40 via-purple-400/40 to-pink-400/40 blur-2xl animate-pulse-slower" />
-        <div className="absolute inset-8 rounded-full bg-gradient-to-br from-blue-500/50 via-purple-500/50 to-pink-500/50 backdrop-blur-xl border border-white/20 shadow-2xl animate-breathe" />
-        <div className="absolute inset-12 rounded-full bg-gradient-to-tr from-white/30 to-transparent animate-spin-very-slow" />
+    <div className="absolute inset-0 flex items-center justify-center z-50 bg-gradient-to-br from-slate-950 via-purple-950 to-slate-900">
+      <div className="backdrop-blur-xl bg-white/10 border border-white/20 rounded-3xl p-8 md:p-12 max-w-md w-full mx-4 shadow-2xl">
+        <h1 className="text-white text-4xl md:text-5xl font-bold mb-3 text-center">
+          MrrrMe
+        </h1>
+        <p className="text-white/60 text-center mb-8">
+          Your Emotion AI Companion
+        </p>
+
+        <div className="space-y-4 mb-6">
+          <input
+            type="text"
+            placeholder="Username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
+            className="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder-white/40 focus:outline-none focus:border-blue-400 transition-all"
+          />
+          <input
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
+            className="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder-white/40 focus:outline-none focus:border-blue-400 transition-all"
+          />
+        </div>
+
+        {error && (
+          <div className="mb-4 p-3 rounded-lg bg-red-500/20 border border-red-500/50 text-red-200 text-sm">
+            {error}
+          </div>
+        )}
+
+        <button
+          onClick={handleSubmit}
+          disabled={loading}
+          className="w-full mb-4 py-3 px-6 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold hover:scale-105 transition-all disabled:opacity-50 disabled:scale-100"
+        >
+          {loading ? "Please wait..." : isLogin ? "Login" : "Sign Up"}
+        </button>
+
+        <button
+          onClick={() => {
+            setIsLogin(!isLogin);
+            setError("");
+          }}
+          className="w-full text-white/60 hover:text-white transition-all text-sm"
+        >
+          {isLogin ? "Need an account? Sign up" : "Have an account? Login"}
+        </button>
       </div>
     </div>
   );
 }
+
+/* -------------------- MESSAGE BUBBLE -------------------- */
 function MessageBubble({ message }: { message: Message }) {
   const isUser = message.role === "user";
   return (
@@ -368,34 +382,15 @@ function MessageBubble({ message }: { message: Message }) {
     </div>
   );
 }
-function MinimalButton({
-  icon,
-  onClick,
-  label,
-}: {
-  icon: React.ReactNode;
-  onClick: () => void;
-  label?: string;
-}) {
-  return (
-    <button onClick={onClick} className="relative group transition-all duration-300 hover:scale-110 active:scale-90">
-      <div className="w-12 h-12 rounded-full backdrop-blur-xl bg-white/10 border border-white/20 shadow-lg flex items-center justify-center hover:bg-white/20 transition-all duration-300">
-        {icon}
-      </div>
-      {label && (
-        <div className="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">
-          <div className="bg-black/80 backdrop-blur-xl text-white text-xs px-3 py-1.5 rounded-lg">
-            {label}
-          </div>
-        </div>
-      )}
-    </button>
-  );
-}
 
 /* -------------------- PAGE -------------------- */
 export default function Page() {
-  const [status, setStatus] = useState("What can I do for you today?");
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [username, setUsername] = useState("");
+  const [userToken, setUserToken] = useState("");
+  const [userSummary, setUserSummary] = useState<string | null>(null);
+  
+  const [status, setStatus] = useState("Loading...");
   const [faceEmotion, setFaceEmotion] = useState("Neutral");
   const [voiceEmotion, setVoiceEmotion] = useState("Neutral");
   const [isActive, setIsActive] = useState(false);
@@ -406,12 +401,9 @@ export default function Page() {
   const [showSettings, setShowSettings] = useState(false);
   const [selectedLanguage, setSelectedLanguage] = useState<"en" | "nl">("en");
   const [selectedVoice, setSelectedVoice] = useState<"male" | "female">("female");
-  const [isSpeechPaused, setIsSpeechPaused] = useState(false);
   const [messages, setMessages] = useState<Message[]>([]);
   const [volume, setVolume] = useState(0.8);
   
-  // Transform controls for testing
-  const [showTransformControls, setShowTransformControls] = useState(false);
   const [avatarPosition, setAvatarPosition] = useState({ x: -0.01, y: -2.12, z: 0.06 });
   const [avatarRotation, setAvatarRotation] = useState({ x: 0.00, y: 0.51, z: 0.00 });
   const [avatarScale, setAvatarScale] = useState(1.25);
@@ -420,13 +412,6 @@ export default function Page() {
   const [avatarRenderKey, setAvatarRenderKey] = useState(0);
   const objectUrlRef = useRef<string | null>(null);
   const avatarUrlRef = useRef(DEFAULT_AVATAR);
-  const lastRemoteUrlRef = useRef<string | null>(null);
-
-  useEffect(() => {
-    console.log('[Main] Avatar URL changed to:', avatarUrl.substring(0, 60) + '...');
-    console.log('[Main] Avatar URL length:', avatarUrl.length);
-    avatarUrlRef.current = avatarUrl;
-  }, [avatarUrl]);
 
   const videoRef = useRef<HTMLVideoElement>(null);
   const audioRef = useRef<HTMLAudioElement>(null);
@@ -441,94 +426,92 @@ export default function Page() {
   const idxRef = useRef(0);
   const isPlayingRef = useRef(false);
 
+  // Check for existing session
   useEffect(() => {
-    (async () => {
-      const saved =
-        localStorage.getItem("mrrrme_avatar_remote_url") ||
-        localStorage.getItem("mrrrme_avatar_url");
-      if (!saved) return;
-      lastRemoteUrlRef.current = saved;
-
-      try {
-        if (objectUrlRef.current) {
-          URL.revokeObjectURL(objectUrlRef.current);
-          objectUrlRef.current = null;
-        }
-        let obj: string | null = null;
-        if (isDataUrl(saved)) {
-          obj = await toBlobObjectUrlFromDirect(saved);
-        } else if (isHttpUrl(saved)) {
-          try {
-            obj = await toBlobObjectUrlViaProxy(saved);
-          } catch {
-            obj = await toBlobObjectUrlFromDirect(saved);
-          }
-        }
-        if (obj) {
-          objectUrlRef.current = obj;
-          setAvatarUrl(obj);
-        } else {
-          setAvatarUrl(saved);
-        }
-      } catch {
-        setAvatarUrl(saved);
-      }
-    })();
-
-    return () => {
-      if (objectUrlRef.current) {
-        URL.revokeObjectURL(objectUrlRef.current);
-        objectUrlRef.current = null;
-      }
-    };
+    const token = localStorage.getItem("mrrrme_token");
+    const savedUsername = localStorage.getItem("mrrrme_username");
+    
+    if (token && savedUsername) {
+      // Auto-login
+      setUserToken(token);
+      setUsername(savedUsername);
+      setIsAuthenticated(true);
+    }
   }, []);
 
-  useEffect(() => {
-    if (audioRef.current) audioRef.current.volume = volume;
-  }, [volume]);
+  const handleLogin = (token: string, user: string, summary: string | null) => {
+    setUserToken(token);
+    setUsername(user);
+    setUserSummary(summary);
+    setIsAuthenticated(true);
+    
+    if (summary) {
+      setStatus(`Welcome back, ${user}!`);
+    } else {
+      setStatus(`Welcome, ${user}!`);
+    }
+  };
 
-  useEffect(() => {
-    if (showHistory) historyEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages, showHistory]);
+  const handleLogout = async () => {
+    // Stop everything
+    if (wsRef.current) wsRef.current.close();
+    if (mediaRecorderRef.current) mediaRecorderRef.current.stop();
+    if (recognitionRef.current) {
+      try {
+        recognitionRef.current.stop();
+      } catch {}
+    }
+    if (videoRef.current?.srcObject) {
+      const stream = videoRef.current.srcObject as MediaStream;
+      stream?.getTracks().forEach((t) => t.stop());
+    }
 
-  async function startCapture() {
-    if (isActive) return;
+    // Logout API call
     try {
-      if (!navigator.mediaDevices?.getUserMedia) throw new Error("Camera and microphone access unavailable.");
-      const stream = await navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 }, audio: true });
-      if (videoRef.current) {
-        videoRef.current.srcObject = stream;
-        await (videoRef.current as HTMLVideoElement).play();
-      }
-      connectWebSocket();
-      startVideoCapture();
-      startAudioCapture(stream);
-      startSpeechRecognition();
-      setIsActive(true);
-      setStatus("Listening...");
-    } catch (err) {
-      console.error("[Frontend] ❌ Error:", err);
-      setStatus("Camera/microphone access denied");
-    }
-  }
+      const protocol = window.location.protocol;
+      const host = window.location.host;
+      await fetch(`${protocol}//${host}/api/logout`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ token: userToken }),
+      });
+    } catch {}
+
+    // Clear local state
+    localStorage.removeItem("mrrrme_token");
+    localStorage.removeItem("mrrrme_username");
+    setIsAuthenticated(false);
+    setUsername("");
+    setUserToken("");
+    setUserSummary(null);
+    setIsActive(false);
+    setMessages([]);
+  };
 
   function connectWebSocket() {
     const ws = new WebSocket(BACKEND_WS);
     ws.onopen = () => {
-      setStatus("Connected");
+      // Authenticate
+      ws.send(JSON.stringify({ type: "auth", token: userToken }));
       wsRef.current = ws;
-      // Send initial preferences
-      ws.send(JSON.stringify({ 
-        type: "preferences", 
-        voice: selectedVoice,
-        language: selectedLanguage 
-      }));
     };
+    
     ws.onmessage = async (event) => {
       const data = JSON.parse(event.data);
-      if (data.type === "face_emotion") setFaceEmotion(data.emotion);
-      else if (data.type === "voice_emotion") setVoiceEmotion(data.emotion);
-      else if (data.type === "llm_response") {
+      
+      if (data.type === "authenticated") {
+        setStatus("Connected");
+        // Send preferences
+        ws.send(JSON.stringify({ 
+          type: "preferences", 
+          voice: selectedVoice,
+          language: selectedLanguage 
+        }));
+      } else if (data.type === "face_emotion") {
+        setFaceEmotion(data.emotion);
+      } else if (data.type === "voice_emotion") {
+        setVoiceEmotion(data.emotion);
+      } else if (data.type === "llm_response") {
         setMessages((prev) => [
           ...prev,
           { id: Date.now().toString(), role: "assistant", content: data.text, timestamp: new Date(), emotion: data.emotion },
@@ -548,8 +531,11 @@ export default function Page() {
           setIsAvatarSpeaking(false);
           shouldAutoRestartRef.current = true;
         }
+      } else if (data.type === "error") {
+        setStatus(data.message);
       }
     };
+    
     ws.onerror = () => setStatus("Connection error");
     ws.onclose = () => {
       setStatus("Disconnected");
@@ -557,6 +543,29 @@ export default function Page() {
     };
   }
 
+  async function startCapture() {
+    if (isActive) return;
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ 
+        video: { width: 640, height: 480 }, 
+        audio: true 
+      });
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+        await videoRef.current.play();
+      }
+      connectWebSocket();
+      startVideoCapture();
+      startAudioCapture(stream);
+      startSpeechRecognition();
+      setIsActive(true);
+      setStatus("Listening...");
+    } catch (err) {
+      console.error("[Error]", err);
+      setStatus("Camera/microphone denied");
+    }
+  }
+
   function startVideoCapture() {
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
@@ -596,264 +605,96 @@ export default function Page() {
       setStatus("Speech not supported");
       return;
     }
-    const isBrave = (navigator as any).brave?.isBrave?.name === "isBrave";
-    if (isBrave) {
-      setStatus("Use text input");
-      return;
-    }
-    if (recognitionRef.current) {
-      try { recognitionRef.current.stop(); } catch {}
-      recognitionRef.current = null;
-    }
-    shouldAutoRestartRef.current = true;
 
     const recognition = new SpeechRecognition();
     recognition.continuous = true;
     recognition.interimResults = true;
     recognition.lang = selectedLanguage === "nl" ? "nl-NL" : "en-US";
-    // Improved speech recognition settings
-    recognition.maxAlternatives = 3; // Get multiple alternatives for better accuracy
-    recognition.serviceURI = ""; // Use default service
 
     let finalTranscript = "";
-    let interimTranscript = "";
-    let timeoutId: NodeJS.Timeout | null = null;
-    let silenceTimeoutId: NodeJS.Timeout | null = null;
-    const SILENCE_TIMEOUT = 2000; // 2 seconds of silence before sending
-    const MIN_CONFIDENCE = 0.7; // Minimum confidence threshold
-
-    recognition.onstart = () => {
-      setStatus("Listening...");
-      finalTranscript = "";
-      interimTranscript = "";
-    };
 
     recognition.onresult = (event: any) => {
       if (isAvatarSpeaking) return;
       
-      // Clear silence timeout when we get results
-      if (silenceTimeoutId) {
-        clearTimeout(silenceTimeoutId);
-        silenceTimeoutId = null;
-      }
-
-      interimTranscript = "";
-      let hasNewFinal = false;
-
+      let interim = "";
       for (let i = event.resultIndex; i < event.results.length; i++) {
-        const result = event.results[i];
-        const transcript = result[0].transcript;
-        const confidence = result[0].confidence || 0.5;
-
-        if (result.isFinal) {
-          // Only accept final results with good confidence
-          if (confidence >= MIN_CONFIDENCE || transcript.trim().length > 2) {
-            finalTranscript += transcript + " ";
-            hasNewFinal = true;
-          }
+        const transcript = event.results[i][0].transcript;
+        if (event.results[i].isFinal) {
+          finalTranscript += transcript + " ";
         } else {
-          // Show interim results
-          interimTranscript += transcript;
+          interim += transcript;
         }
       }
 
-      // Update status with current transcript
-      const displayText = interimTranscript || finalTranscript.trim();
-      if (displayText) {
-        setStatus(displayText.slice(-60)); // Show last 60 chars
-      }
-
-      // Handle final transcript
-      if (hasNewFinal && finalTranscript.trim()) {
-        // Clear any existing timeout
-        if (timeoutId) clearTimeout(timeoutId);
-        
-        // Set a shorter timeout for final results (they're more reliable)
-        timeoutId = setTimeout(() => {
-          const textToSend = finalTranscript.trim();
-          if (textToSend && wsRef.current && !isAvatarSpeaking && textToSend.length >= 2) {
-            setMessages((prev) => [
-              ...prev,
-              { id: Date.now().toString(), role: "user", content: textToSend, timestamp: new Date() },
-            ]);
-            wsRef.current.send(JSON.stringify({ 
-              type: "speech_end", 
-              text: textToSend,
-              voice: selectedVoice 
-            }));
-            finalTranscript = "";
-            interimTranscript = "";
-            setStatus("Processing...");
-          }
-        }, 800); // Shorter timeout for final results
-      } else if (interimTranscript.trim() && !hasNewFinal) {
-        // If we have interim results but no final, wait for silence
-        if (silenceTimeoutId) clearTimeout(silenceTimeoutId);
-        silenceTimeoutId = setTimeout(() => {
-          const textToSend = interimTranscript.trim() || finalTranscript.trim();
-          if (textToSend && wsRef.current && !isAvatarSpeaking && textToSend.length >= 3) {
-            setMessages((prev) => [
-              ...prev,
-              { id: Date.now().toString(), role: "user", content: textToSend, timestamp: new Date() },
-            ]);
-            wsRef.current.send(JSON.stringify({ 
-              type: "speech_end", 
-              text: textToSend,
-              voice: selectedVoice 
-            }));
-            finalTranscript = "";
-            interimTranscript = "";
-            setStatus("Processing...");
-          }
-        }, SILENCE_TIMEOUT);
+      if (finalTranscript.trim()) {
+        const text = finalTranscript.trim();
+        setMessages((prev) => [
+          ...prev,
+          { id: Date.now().toString(), role: "user", content: text, timestamp: new Date() },
+        ]);
+        wsRef.current?.send(JSON.stringify({ type: "speech_end", text }));
+        finalTranscript = "";
       }
     };
 
     recognition.onerror = (event: any) => {
-      console.log("[Speech Recognition] Error:", event.error);
-      if (event.error === "no-speech") {
-        // Don't show error for no-speech, just keep listening
-        return;
-      } else if (event.error === "not-allowed") {
-        setStatus("Microphone permission denied");
-        shouldAutoRestartRef.current = false;
-      } else if (event.error === "audio-capture") {
-        setStatus("No microphone found");
-        shouldAutoRestartRef.current = false;
-      } else if (event.error === "network") {
-        setStatus("Network error - retrying...");
-        // Will auto-restart
-      } else if (event.error === "aborted") {
-        // User or system aborted, don't restart
-        shouldAutoRestartRef.current = false;
-      } else {
+      if (event.error !== "no-speech") {
         setStatus(`Speech error: ${event.error}`);
       }
     };
 
     recognition.onend = () => {
-      // Clear timeouts
-      if (timeoutId) clearTimeout(timeoutId);
-      if (silenceTimeoutId) clearTimeout(silenceTimeoutId);
-      
-      // Auto-restart if we should
-      if (shouldAutoRestartRef.current && recognitionRef.current === recognition && !isSpeechPaused) {
-        setTimeout(() => {
-          try { 
-            recognition.start(); 
-            setStatus("Listening..."); 
-          } catch (e) {
-            console.log("[Speech Recognition] Restart failed:", e);
-            // Try again after a longer delay
-            setTimeout(() => {
-              try {
-                recognition.start();
-                setStatus("Listening...");
-              } catch {}
-            }, 500);
-          }
-        }, 100);
+      if (shouldAutoRestartRef.current && !isAvatarSpeaking) {
+        try {
+          recognition.start();
+        } catch {}
       }
     };
 
-    try {
-      recognition.start();
-      recognitionRef.current = recognition;
-    } catch (e) {
-      console.error("[Speech Recognition] Start failed:", e);
-      setStatus("Speech recognition failed to start");
-    }
+    recognition.start();
+    recognitionRef.current = recognition;
   }
 
   async function playAvatarResponse(data: any) {
-    if (!audioRef.current) {
-      setIsAvatarSpeaking(false);
-      shouldAutoRestartRef.current = true;
-      return;
-    }
+    if (!audioRef.current) return;
+    
     audioRef.current.pause();
-    audioRef.current.currentTime = 0;
-
     isPlayingRef.current = false;
-    idxRef.current = 0;
     setLiveBlend({});
     visemesRef.current = (data.visemes as Viseme[]).sort((a, b) => a.t - b.t);
 
     const protocol = window.location.protocol;
     const host = window.location.host;
-    const audioPath = data.audio_url;
-    const url = audioPath.startsWith("http") ? audioPath : `${protocol}//${host}${audioPath}`;
+    const url = data.audio_url.startsWith("http") 
+      ? data.audio_url 
+      : `${protocol}//${host}${data.audio_url}`;
     audioRef.current.src = url;
 
     try {
-      await Promise.race([
-        new Promise((resolve, reject) => {
-          if (!audioRef.current) return reject("No audio");
-          audioRef.current.oncanplaythrough = () => resolve(true);
-          audioRef.current.onerror = () => reject(new Error("Load failed"));
-          audioRef.current.load();
-        }),
-        new Promise((_, reject) => setTimeout(() => reject(new Error("Timeout")), 5000)),
-      ]);
+      await new Promise((resolve, reject) => {
+        if (!audioRef.current) return reject();
+        audioRef.current.oncanplaythrough = () => resolve(true);
+        audioRef.current.onerror = () => reject();
+        audioRef.current.load();
+      });
 
       isPlayingRef.current = true;
-      try {
-        await audioRef.current.play();
-      } catch {
-        setStatus("🔊 Tap to hear");
-        await new Promise((resolve) => {
-          let done = false;
-          const tap = async () => {
-            if (done) return;
-            try {
-              await audioRef.current?.play();
-              done = true;
-              setStatus("Speaking...");
-              document.removeEventListener("click", tap);
-              document.removeEventListener("touchstart", tap);
-              resolve(true);
-            } catch {}
-          };
-          document.addEventListener("click", tap);
-          document.addEventListener("touchstart", tap);
-          setTimeout(() => {
-            if (!done) {
-              document.removeEventListener("click", tap);
-              document.removeEventListener("touchstart", tap);
-              done = true;
-              resolve(false);
-            }
-          }, 30000);
-        });
-      }
+      await audioRef.current.play();
 
       await new Promise((resolve) => {
         if (!audioRef.current) return resolve(true);
-        const audio = audioRef.current;
-        audio.onended = () => resolve(true);
-        const duration =
-          visemesRef.current.length > 0
-            ? visemesRef.current[visemesRef.current.length - 1].t + 1
-            : 5;
-        setTimeout(() => resolve(true), duration * 1000 + 1000);
+        audioRef.current.onended = () => resolve(true);
       });
     } catch {
       setStatus("Audio error");
-      isPlayingRef.current = false;
-      setIsAvatarSpeaking(false);
-      shouldAutoRestartRef.current = true;
-      if (recognitionRef.current) {
-        try { recognitionRef.current.start(); } catch {}
-      }
-      return;
     }
 
     setIsAvatarSpeaking(false);
     setStatus("Listening...");
-    shouldAutoRestartRef.current = true;
     isPlayingRef.current = false;
     setLiveBlend({});
-    await new Promise((r) => setTimeout(r, 800));
+    shouldAutoRestartRef.current = true;
+    
     if (recognitionRef.current) {
       try { recognitionRef.current.start(); } catch {}
     }
@@ -866,16 +707,9 @@ export default function Page() {
       if (a && visemesRef.current.length > 0 && isPlayingRef.current) {
         const t = a.currentTime;
         while (idxRef.current < visemesRef.current.length && visemesRef.current[idxRef.current].t <= t + 0.02) {
-          const v = visemesRef.current[idxRef.current];
-          setLiveBlend(v.blend);
+          setLiveBlend(visemesRef.current[idxRef.current].blend);
           idxRef.current++;
         }
-        if (a.ended) {
-          setLiveBlend({});
-          setStatus("Listening...");
-          isPlayingRef.current = false;
-          setIsAvatarSpeaking(false);
-        }
       }
       raf = requestAnimationFrame(tick);
     };
@@ -883,27 +717,7 @@ export default function Page() {
     return () => cancelAnimationFrame(raf);
   }, []);
 
-  useEffect(() => {
-    return () => {
-      if (wsRef.current) wsRef.current.close();
-      if (mediaRecorderRef.current) mediaRecorderRef.current.stop();
-      if (recognitionRef.current) {
-        try { recognitionRef.current.stop(); recognitionRef.current = null; } catch {}
-      }
-      if (videoRef.current?.srcObject) {
-        const stream = videoRef.current.srcObject as MediaStream;
-        stream?.getTracks().forEach((t) => t.stop());
-      }
-      if (objectUrlRef.current) {
-        URL.revokeObjectURL(objectUrlRef.current);
-        objectUrlRef.current = null;
-      }
-    };
-  }, []);
-
   const handleAvaturnExport = useCallback(async (remoteUrl: string) => {
-    console.log('[Avatar] Handling export, URL type:', remoteUrl.substring(0, 50));
-    
     const oldUrl = avatarUrlRef.current;
     try {
       if (oldUrl !== DEFAULT_AVATAR) {
@@ -911,176 +725,107 @@ export default function Page() {
       }
     } catch {}
     
-    if (objectUrlRef.current && objectUrlRef.current !== remoteUrl) {
+    if (objectUrlRef.current) {
       URL.revokeObjectURL(objectUrlRef.current);
       objectUrlRef.current = null;
     }
   
-    lastRemoteUrlRef.current = remoteUrl;
-    setStatus("Loading new avatar…");
-  
-    try {
-      if (isDataUrl(remoteUrl)) {
-        console.log('[Avatar] Using data URL directly (no localStorage)');
-        
-        console.log('[Avatar] Closing modal...');
-        setShowAvatarCreator(false);
-        
-        await new Promise(resolve => setTimeout(resolve, 300));
-        
-        console.log('[Avatar] Now setting avatar URL to data URL');
-        flushSync(() => {
-          setAvatarUrl(remoteUrl);
-          setAvatarRenderKey(prev => prev + 1);
-        });
-        avatarUrlRef.current = remoteUrl;
-        console.log('[Avatar] State updates flushed, avatarRenderKey incremented');
-        
-        localStorage.removeItem("mrrrme_avatar_remote_url");
-        localStorage.removeItem("mrrrme_avatar_url");
-        setStatus("Avatar updated! ✨");
-        // Show config screen if we haven't configured before
-        const hasConfiguredBefore = localStorage.getItem("mrrrme_has_configured");
-        if (!hasConfiguredBefore) {
-          setTimeout(() => {
-            setStatus("What can I do for you today?");
-            setShowConfigScreen(true);
-          }, 2500);
-        } else {
-          setTimeout(() => {
-            setStatus("What can I do for you today?");
-          }, 2500);
-        }
-        return;
-      }
-  
-      let objUrl: string | null = null;
-  
-      if (isHttpUrl(remoteUrl)) {
-        try {
-          objUrl = await toBlobObjectUrlViaProxy(remoteUrl);
-        } catch {
-          objUrl = await toBlobObjectUrlFromDirect(remoteUrl);
-        }
-      }
-  
-      if (objUrl) {
-        objectUrlRef.current = objUrl;
-        setAvatarUrl(objUrl);
-      } else {
-        setAvatarUrl(remoteUrl);
-      }
-  
-      localStorage.setItem("mrrrme_avatar_remote_url", remoteUrl);
-      localStorage.setItem("mrrrme_avatar_url", remoteUrl);
-      setStatus("Avatar updated! ✨");
-    } catch (e) {
-      console.error("[Avatar] load failed:", e);
+    setStatus("Loading avatar...");
+    setShowAvatarCreator(false);
+    
+    await new Promise(resolve => setTimeout(resolve, 300));
+    
+    flushSync(() => {
       setAvatarUrl(remoteUrl);
-      setStatus("Avatar updated.");
-    }
-  
-    // Show config screen if we haven't configured before
-    const hasConfiguredBefore = localStorage.getItem("mrrrme_has_configured");
-    if (!hasConfiguredBefore) {
-      setTimeout(() => {
-        setStatus("What can I do for you today?");
-        setShowConfigScreen(true);
-      }, 2500);
-    } else {
-      setTimeout(() => {
-        setStatus("What can I do for you today?");
-      }, 2500);
-    }
+      setAvatarRenderKey(prev => prev + 1);
+    });
+    
+    setStatus("Avatar updated!");
+    
+    setTimeout(() => {
+      setStatus("What can I do for you today?");
+    }, 2000);
   }, []);
 
+  if (!isAuthenticated) {
+    return <LoginScreen onLogin={handleLogin} />;
+  }
+
   return (
     <div className="relative w-screen h-screen bg-gradient-to-br from-slate-950 via-purple-950 to-slate-900 overflow-hidden">
       <div className="absolute top-6 left-6 z-30">
-        <div className="text-white font-bold">MrrrMe</div>
+        <div className="text-white font-bold">MrrrMe - {username}</div>
         <div className="text-white/60 text-sm">{status}</div>
       </div>
 
-      <GlowingOrb isActive={isActive && isAvatarSpeaking} />
+      <div className="absolute top-6 right-6 z-30 flex gap-3">
+        {isActive && (
+          <>
+            <button
+              onClick={() => setShowAvatarCreator(true)}
+              className="w-12 h-12 rounded-full backdrop-blur-xl bg-white/10 border border-white/20 flex items-center justify-center hover:bg-white/20"
+            >
+              <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+              </svg>
+            </button>
+            <button
+              onClick={() => setShowSettings(true)}
+              className="w-12 h-12 rounded-full backdrop-blur-xl bg-white/10 border border-white/20 flex items-center justify-center hover:bg-white/20"
+            >
+              <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+            </button>
+            <button
+              onClick={() => setShowHistory(!showHistory)}
+              className="w-12 h-12 rounded-full backdrop-blur-xl bg-white/10 border border-white/20 flex items-center justify-center hover:bg-white/20"
+            >
+              <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </button>
+            <button
+              onClick={handleLogout}
+              className="w-12 h-12 rounded-full backdrop-blur-xl bg-red-500/20 border border-red-500/50 flex items-center justify-center hover:bg-red-500/30"
+            >
+              <svg className="w-5 h-5 text-red-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+              </svg>
+            </button>
+          </>
+        )}
+      </div>
 
-      {/* Settings Modal - can be opened anytime */}
+      {/* Settings Modal */}
       {showSettings && (
         <>
-          <div className="absolute inset-0 bg-black/60 backdrop-blur-sm z-40 animate-fade-in" onClick={() => setShowSettings(false)} />
-          <div className="absolute inset-0 flex flex-col items-center justify-center z-50 animate-fade-in">
-            <div className="backdrop-blur-xl bg-white/10 border border-white/20 rounded-3xl p-8 md:p-12 max-w-md w-full mx-4 shadow-2xl relative">
-              <button
-                onClick={() => setShowSettings(false)}
-                className="absolute top-4 right-4 w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center hover:bg-white/20 transition-all hover:rotate-90 duration-300"
-              >
-                <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
+          <div className="absolute inset-0 bg-black/60 backdrop-blur-sm z-40" onClick={() => setShowSettings(false)} />
+          <div className="absolute inset-0 flex items-center justify-center z-50">
+            <div className="backdrop-blur-xl bg-white/10 border border-white/20 rounded-3xl p-8 max-w-md w-full mx-4">
+              <h2 className="text-white text-3xl font-bold mb-6 text-center">Settings</h2>
               
-              <h2 className="text-white text-3xl md:text-4xl font-bold mb-8 text-center">
-                Settings
-              </h2>
-              
-              <div className="space-y-6 mb-8">
-                {/* Language Selection */}
+              <div className="space-y-4 mb-6">
                 <div>
-                  <label className="text-white/90 text-lg font-semibold mb-3 block">
-                    Language / Taal
-                  </label>
+                  <label className="text-white/90 font-semibold mb-2 block">Language</label>
                   <div className="flex gap-3">
                     <button
-                      onClick={() => {
-                        setSelectedLanguage("en");
-                        if (recognitionRef.current) {
-                          try {
-                            recognitionRef.current.stop();
-                            recognitionRef.current.lang = "en-US";
-                            if (!isSpeechPaused) {
-                              recognitionRef.current.start();
-                            }
-                          } catch {}
-                        }
-                        if (wsRef.current) {
-                          wsRef.current.send(JSON.stringify({ 
-                            type: "preferences", 
-                            voice: selectedVoice,
-                            language: "en" 
-                          }));
-                        }
-                      }}
-                      className={`flex-1 py-4 px-6 rounded-xl font-semibold transition-all duration-300 ${
+                      onClick={() => setSelectedLanguage("en")}
+                      className={`flex-1 py-3 rounded-xl font-semibold ${
                         selectedLanguage === "en"
-                          ? "bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg scale-105"
-                          : "bg-white/10 text-white/70 hover:bg-white/20 border border-white/20"
+                          ? "bg-gradient-to-r from-blue-500 to-purple-600 text-white"
+                          : "bg-white/10 text-white/70 hover:bg-white/20"
                       }`}
                     >
                       English
                     </button>
                     <button
-                      onClick={() => {
-                        setSelectedLanguage("nl");
-                        if (recognitionRef.current) {
-                          try {
-                            recognitionRef.current.stop();
-                            recognitionRef.current.lang = "nl-NL";
-                            if (!isSpeechPaused) {
-                              recognitionRef.current.start();
-                            }
-                          } catch {}
-                        }
-                        if (wsRef.current) {
-                          wsRef.current.send(JSON.stringify({ 
-                            type: "preferences", 
-                            voice: selectedVoice,
-                            language: "nl" 
-                          }));
-                        }
-                      }}
-                      className={`flex-1 py-4 px-6 rounded-xl font-semibold transition-all duration-300 ${
+                      onClick={() => setSelectedLanguage("nl")}
+                      className={`flex-1 py-3 rounded-xl font-semibold ${
                         selectedLanguage === "nl"
-                          ? "bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg scale-105"
-                          : "bg-white/10 text-white/70 hover:bg-white/20 border border-white/20"
+                          ? "bg-gradient-to-r from-blue-500 to-purple-600 text-white"
+                          : "bg-white/10 text-white/70 hover:bg-white/20"
                       }`}
                     >
                       Nederlands
@@ -1088,46 +833,25 @@ export default function Page() {
                   </div>
                 </div>
 
-                {/* Voice Selection */}
                 <div>
-                  <label className="text-white/90 text-lg font-semibold mb-3 block">
-                    Voice
-                  </label>
+                  <label className="text-white/90 font-semibold mb-2 block">Voice</label>
                   <div className="flex gap-3">
                     <button
-                      onClick={() => {
-                        setSelectedVoice("female");
-                        if (wsRef.current) {
-                          wsRef.current.send(JSON.stringify({ 
-                            type: "preferences", 
-                            voice: "female",
-                            language: selectedLanguage 
-                          }));
-                        }
-                      }}
-                      className={`flex-1 py-4 px-6 rounded-xl font-semibold transition-all duration-300 ${
+                      onClick={() => setSelectedVoice("female")}
+                      className={`flex-1 py-3 rounded-xl font-semibold ${
                         selectedVoice === "female"
-                          ? "bg-gradient-to-r from-pink-500 to-rose-600 text-white shadow-lg scale-105"
-                          : "bg-white/10 text-white/70 hover:bg-white/20 border border-white/20"
+                          ? "bg-gradient-to-r from-pink-500 to-rose-600 text-white"
+                          : "bg-white/10 text-white/70 hover:bg-white/20"
                       }`}
                     >
                       Female
                     </button>
                     <button
-                      onClick={() => {
-                        setSelectedVoice("male");
-                        if (wsRef.current) {
-                          wsRef.current.send(JSON.stringify({ 
-                            type: "preferences", 
-                            voice: "male",
-                            language: selectedLanguage 
-                          }));
-                        }
-                      }}
-                      className={`flex-1 py-4 px-6 rounded-xl font-semibold transition-all duration-300 ${
+                      onClick={() => setSelectedVoice("male")}
+                      className={`flex-1 py-3 rounded-xl font-semibold ${
                         selectedVoice === "male"
-                          ? "bg-gradient-to-r from-blue-500 to-cyan-600 text-white shadow-lg scale-105"
-                          : "bg-white/10 text-white/70 hover:bg-white/20 border border-white/20"
+                          ? "bg-gradient-to-r from-blue-500 to-cyan-600 text-white"
+                          : "bg-white/10 text-white/70 hover:bg-white/20"
                       }`}
                     >
                       Male
@@ -1138,377 +862,103 @@ export default function Page() {
 
               <button
                 onClick={() => setShowSettings(false)}
-                className="w-full group relative transition-all duration-300 hover:scale-105 active:scale-95"
+                className="w-full py-3 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold"
               >
-                <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full blur-xl opacity-50 group-hover:opacity-75 transition-opacity duration-300" />
-                <div className="relative px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full shadow-2xl border border-white/20 flex items-center justify-center gap-3">
-                  <span className="text-xl font-semibold text-white">Done</span>
-                </div>
+                Done
               </button>
             </div>
           </div>
         </>
       )}
 
-      {showConfigScreen && !isActive && !showAvatarCreator && (
-        <div className="absolute inset-0 flex flex-col items-center justify-center z-50 animate-fade-in bg-gradient-to-br from-slate-950 via-purple-950 to-slate-900">
-          <div className="backdrop-blur-xl bg-white/10 border border-white/20 rounded-3xl p-8 md:p-12 max-w-md w-full mx-4 shadow-2xl">
-            <h2 className="text-white text-3xl md:text-4xl font-bold mb-8 text-center">
-              Configure Your Avatar
-            </h2>
+      {/* Config Screen */}
+      {showConfigScreen && !isActive && (
+        <div className="absolute inset-0 flex items-center justify-center z-50 bg-gradient-to-br from-slate-950 via-purple-950 to-slate-900">
+          <div className="backdrop-blur-xl bg-white/10 border border-white/20 rounded-3xl p-8 max-w-md w-full mx-4">
+            <h2 className="text-white text-4xl font-bold mb-6 text-center">Configure Avatar</h2>
             
-            <div className="space-y-6 mb-8">
-              {/* Language Selection */}
-              <div>
-                <label className="text-white/90 text-lg font-semibold mb-3 block">
-                  Language / Taal
-                </label>
-                <div className="flex gap-3">
-                  <button
-                    onClick={() => setSelectedLanguage("en")}
-                    className={`flex-1 py-4 px-6 rounded-xl font-semibold transition-all duration-300 ${
-                      selectedLanguage === "en"
-                        ? "bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg scale-105"
-                        : "bg-white/10 text-white/70 hover:bg-white/20 border border-white/20"
-                    }`}
-                  >
-                    English
-                  </button>
-                  <button
-                    onClick={() => setSelectedLanguage("nl")}
-                    className={`flex-1 py-4 px-6 rounded-xl font-semibold transition-all duration-300 ${
-                      selectedLanguage === "nl"
-                        ? "bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg scale-105"
-                        : "bg-white/10 text-white/70 hover:bg-white/20 border border-white/20"
-                    }`}
-                  >
-                    Nederlands
-                  </button>
-                </div>
-              </div>
-
-              {/* Voice Selection */}
-              <div>
-                <label className="text-white/90 text-lg font-semibold mb-3 block">
-                  Voice
-                </label>
-                <div className="flex gap-3">
-                  <button
-                    onClick={() => setSelectedVoice("female")}
-                    className={`flex-1 py-4 px-6 rounded-xl font-semibold transition-all duration-300 ${
-                      selectedVoice === "female"
-                        ? "bg-gradient-to-r from-pink-500 to-rose-600 text-white shadow-lg scale-105"
-                        : "bg-white/10 text-white/70 hover:bg-white/20 border border-white/20"
-                    }`}
-                  >
-                    Female
-                  </button>
-                  <button
-                    onClick={() => setSelectedVoice("male")}
-                    className={`flex-1 py-4 px-6 rounded-xl font-semibold transition-all duration-300 ${
-                      selectedVoice === "male"
-                        ? "bg-gradient-to-r from-blue-500 to-cyan-600 text-white shadow-lg scale-105"
-                        : "bg-white/10 text-white/70 hover:bg-white/20 border border-white/20"
-                    }`}
-                  >
-                    Male
-                  </button>
-                </div>
-              </div>
-            </div>
-
             <button
               onClick={() => {
-                localStorage.setItem("mrrrme_has_configured", "true");
                 setShowConfigScreen(false);
                 startCapture();
               }}
-              className="w-full group relative transition-all duration-300 hover:scale-105 active:scale-95"
+              className="w-full py-3 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold"
             >
-              <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full blur-xl opacity-50 group-hover:opacity-75 transition-opacity duration-300" />
-              <div className="relative px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full shadow-2xl border border-white/20 flex items-center justify-center gap-3">
-                <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-                <span className="text-xl font-semibold text-white">Start</span>
-              </div>
+              Start
             </button>
           </div>
         </div>
       )}
 
       {!isActive && !showAvatarCreator && !showConfigScreen && (
-        <div className="absolute inset-0 flex flex-col items-center justify-center z-50 animate-fade-in">
-          <h1 className="text-white text-4xl md:text-6xl font-bold mb-4 tracking-tight animate-slide-down text-center px-4">
-            What Can I Do For You Today?
+        <div className="absolute inset-0 flex flex-col items-center justify-center z-50">
+          <h1 className="text-white text-4xl md:text-6xl font-bold mb-4 text-center px-4">
+            Welcome back, {username}!
           </h1>
-          <p className="text-white/60 text-lg md:text-xl mb-12 animate-slide-down text-center px-4" style={{ animationDelay: "0.1s" }}>
-            I can help with your emotions and wellness
+          <p className="text-white/60 text-lg mb-8 text-center px-4">
+            What can I do for you today?
           </p>
           <button
             onClick={startCapture}
-            className="group relative transition-all duration-300 hover:scale-105 active:scale-95 animate-slide-up mb-6"
-            style={{ animationDelay: "0.2s" }}
+            className="px-12 py-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full text-white font-semibold hover:scale-105 transition-all mb-4"
           >
-            <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full blur-xl opacity-50 group-hover:opacity-75 transition-opacity duration-300" />
-            <div className="relative px-12 py-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full shadow-2xl border border-white/20 flex items-center gap-3">
-              <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
-              </svg>
-              <span className="text-xl font-semibold text-white">Start Conversation</span>
-            </div>
+            Start Conversation
           </button>
           <button
             onClick={() => setShowAvatarCreator(true)}
-            className="backdrop-blur-xl bg-white/10 hover:bg-white/20 border border-white/20 rounded-2xl px-8 py-4 text-white font-semibold transition-all duration-300 hover:scale-105 active:scale-95 shadow-lg animate-slide-up"
-            style={{ animationDelay: "0.3s" }}
+            className="px-8 py-3 bg-white/10 rounded-2xl text-white font-semibold hover:bg-white/20"
           >
-            🎭 Create Your Avatar
+            🎭 Create Avatar
           </button>
         </div>
       )}
 
-      {isActive && (
-        <div className="absolute top-6 right-6 z-30 animate-slide-down">
-          <div className="flex items-center gap-3">
-            <MinimalButton
-              icon={
-                <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-                </svg>
-              }
-              onClick={() => setShowAvatarCreator(true)}
-              label="Create Avatar"
-            />
-            <MinimalButton
-              icon={
-                <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                </svg>
-              }
-              onClick={() => setShowSettings(true)}
-              label="Settings"
-            />
-            <MinimalButton
-              icon={
-                <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
-                </svg>
-              }
-              onClick={() => setShowTransformControls(!showTransformControls)}
-              label="Adjust Position"
-            />
-            <MinimalButton
-              icon={
-                <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-              }
-              onClick={() => setShowHistory(!showHistory)}
-              label="History"
-            />
-            {!isSpeechPaused ? (
-              <MinimalButton
-                icon={
-                  <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                }
-                onClick={() => {
-                  if (recognitionRef.current) {
-                    try {
-                      recognitionRef.current.stop();
-                      shouldAutoRestartRef.current = false;
-                      setIsSpeechPaused(true);
-                      setStatus("Paused");
-                    } catch {}
-                  }
-                }}
-                label="Pause"
-              />
-            ) : (
-              <MinimalButton
-                icon={
-                  <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                }
-                onClick={() => {
-                  shouldAutoRestartRef.current = true;
-                  if (recognitionRef.current) {
-                    try {
-                      recognitionRef.current.start();
-                      setIsSpeechPaused(false);
-                      setStatus("Listening...");
-                    } catch {
-                      startSpeechRecognition();
-                      setIsSpeechPaused(false);
-                      setStatus("Listening...");
-                    }
-                  } else {
-                    startSpeechRecognition();
-                    setIsSpeechPaused(false);
-                    setStatus("Listening...");
-                  }
-                }}
-                label="Resume"
-              />
-            )}
-          </div>
-        </div>
-      )}
-
+      {/* History Panel */}
       {showHistory && isActive && (
         <>
-          <div className="absolute inset-0 bg-black/60 backdrop-blur-sm z-40 animate-fade-in" onClick={() => setShowHistory(false)} />
-          <div className="absolute top-0 right-0 h-full z-50 backdrop-blur-2xl bg-black/40 border-l border-white/10 shadow-2xl w-full md:w-[400px] animate-slide-left">
+          <div className="absolute inset-0 bg-black/60 z-40" onClick={() => setShowHistory(false)} />
+          <div className="absolute top-0 right-0 h-full z-50 backdrop-blur-2xl bg-black/40 border-l border-white/10 w-full md:w-[400px]">
             <div className="h-full flex flex-col p-6">
               <div className="flex items-center justify-between mb-6">
-                <h2 className="text-white text-2xl font-bold">Conversation</h2>
+                <h2 className="text-white text-2xl font-bold">History</h2>
                 <button
                   onClick={() => setShowHistory(false)}
-                  className="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center hover:bg-white/20 transition-all hover:rotate-90 duration-300"
+                  className="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center hover:bg-white/20"
                 >
-                  <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                  </svg>
+                  ✕
                 </button>
               </div>
-              <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent pr-2">
-                {messages.length === 0 ? (
-                  <div className="flex flex-col items-center justify-center h-full">
-                    <div className="w-16 h-16 bg-white/5 rounded-2xl flex items-center justify-center mb-4">
-                      <svg className="w-8 h-8 text-white/30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-                      </svg>
-                    </div>
-                    <p className="text-white/40 text-sm text-center">No messages yet<br/>Start a conversation!</p>
-                  </div>
-                ) : (
-                  <>
-                    {messages.map((m) => (
-                      <MessageBubble key={m.id} message={m} />
-                    ))}
-                    <div ref={historyEndRef} />
-                  </>
-                )}
+              <div className="flex-1 overflow-y-auto">
+                {messages.map((m) => (
+                  <MessageBubble key={m.id} message={m} />
+                ))}
+                <div ref={historyEndRef} />
               </div>
             </div>
           </div>
         </>
       )}
 
-      {/* Transform Controls Panel */}
-      {showTransformControls && (
-        <div className="absolute top-0 left-0 h-full z-50 backdrop-blur-2xl bg-black/40 border-r border-white/10 shadow-2xl w-full md:w-[350px] animate-slide-left overflow-y-auto">
-            <div className="h-full flex flex-col p-6">
-              <div className="flex items-center justify-between mb-6">
-                <h2 className="text-white text-xl font-bold">Avatar Adjustments</h2>
-                <button
-                  onClick={() => setShowTransformControls(false)}
-                  className="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center hover:bg-white/20 transition-all hover:rotate-90 duration-300"
-                >
-                  <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                  </svg>
-                </button>
-              </div>
-              
-              <div className="space-y-4">
-                {/* Position */}
-                <div className="bg-white/5 rounded-xl p-4">
-                  <h3 className="text-white text-sm font-bold mb-3">Position</h3>
-                  <div className="space-y-2">
-                    <div>
-                      <label className="text-white/60 text-xs">X: <span className="text-green-400 font-mono">{avatarPosition.x.toFixed(2)}</span></label>
-                      <input type="range" min="-5" max="5" step="0.01" value={avatarPosition.x} onChange={(e) => setAvatarPosition({...avatarPosition, x: parseFloat(e.target.value)})} className="w-full" />
-                    </div>
-                    <div>
-                      <label className="text-white/60 text-xs">Y: <span className="text-green-400 font-mono">{avatarPosition.y.toFixed(2)}</span></label>
-                      <input type="range" min="-5" max="5" step="0.01" value={avatarPosition.y} onChange={(e) => setAvatarPosition({...avatarPosition, y: parseFloat(e.target.value)})} className="w-full" />
-                    </div>
-                    <div>
-                      <label className="text-white/60 text-xs">Z: <span className="text-green-400 font-mono">{avatarPosition.z.toFixed(2)}</span></label>
-                      <input type="range" min="-5" max="5" step="0.01" value={avatarPosition.z} onChange={(e) => setAvatarPosition({...avatarPosition, z: parseFloat(e.target.value)})} className="w-full" />
-                    </div>
-                  </div>
-                </div>
-
-                {/* Rotation */}
-                <div className="bg-white/5 rounded-xl p-4">
-                  <h3 className="text-white text-sm font-bold mb-3">Rotation</h3>
-                  <div className="space-y-2">
-                    <div>
-                      <label className="text-white/60 text-xs">X (Pitch): <span className="text-green-400 font-mono">{avatarRotation.x.toFixed(2)}</span></label>
-                      <input type="range" min="-3.14" max="3.14" step="0.01" value={avatarRotation.x} onChange={(e) => setAvatarRotation({...avatarRotation, x: parseFloat(e.target.value)})} className="w-full" />
-                    </div>
-                    <div>
-                      <label className="text-white/60 text-xs">Y (Turn): <span className="text-green-400 font-mono">{avatarRotation.y.toFixed(2)}</span></label>
-                      <input type="range" min="-3.14" max="3.14" step="0.01" value={avatarRotation.y} onChange={(e) => setAvatarRotation({...avatarRotation, y: parseFloat(e.target.value)})} className="w-full" />
-                    </div>
-                    <div>
-                      <label className="text-white/60 text-xs">Z (Roll): <span className="text-green-400 font-mono">{avatarRotation.z.toFixed(2)}</span></label>
-                      <input type="range" min="-3.14" max="3.14" step="0.01" value={avatarRotation.z} onChange={(e) => setAvatarRotation({...avatarRotation, z: parseFloat(e.target.value)})} className="w-full" />
-                    </div>
-                  </div>
-                </div>
-
-                {/* Scale */}
-                <div className="bg-white/5 rounded-xl p-4">
-                  <h3 className="text-white text-sm font-bold mb-3">Scale</h3>
-                  <div>
-                    <label className="text-white/60 text-xs">Size: <span className="text-green-400 font-mono">{avatarScale.toFixed(2)}</span></label>
-                    <input type="range" min="0.1" max="3" step="0.01" value={avatarScale} onChange={(e) => setAvatarScale(parseFloat(e.target.value))} className="w-full" />
-                  </div>
-                </div>
-
-                {/* Copy Code Button */}
-                <button
-                  onClick={() => {
-                    const code = `position={[${avatarPosition.x.toFixed(2)}, ${avatarPosition.y.toFixed(2)}, ${avatarPosition.z.toFixed(2)}]}
-rotation={[${avatarRotation.x.toFixed(2)}, ${avatarRotation.y.toFixed(2)}, ${avatarRotation.z.toFixed(2)}]}
-scale={${avatarScale.toFixed(2)}}`;
-                    navigator.clipboard.writeText(code);
-                    alert('✅ Code copied to clipboard!');
-                  }}
-                  className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition-all"
-                >
-                  📋 Copy Values
-                </button>
-              </div>
-            </div>
-          </div>
-      )}
-
       {isActive && (
-        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 w-full max-w-2xl px-6 z-30 animate-slide-up">
-          <div className="backdrop-blur-xl bg-white/10 border border-white/20 rounded-full shadow-lg overflow-hidden">
-            <input
-              type="text"
-              placeholder="Type or speak..."
-              className="w-full px-8 py-4 bg-transparent text-white placeholder-white/40 focus:outline-none text-base"
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && wsRef.current && !isAvatarSpeaking) {
-                  const text = (e.target as HTMLInputElement).value;
-                  if (text.trim()) {
-                    setMessages((prev) => [
-                      ...prev,
-                      { id: Date.now().toString(), role: "user", content: text, timestamp: new Date() },
-                    ]);
-                    wsRef.current.send(JSON.stringify({ 
-                      type: "speech_end", 
-                      text,
-                      voice: selectedVoice 
-                    }));
-                    (e.target as HTMLInputElement).value = "";
-                  }
+        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 w-full max-w-2xl px-6 z-30">
+          <input
+            type="text"
+            placeholder="Type or speak..."
+            className="w-full px-8 py-4 bg-white/10 backdrop-blur-xl border border-white/20 rounded-full text-white placeholder-white/40 focus:outline-none"
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && wsRef.current) {
+                const text = (e.target as HTMLInputElement).value;
+                if (text.trim()) {
+                  setMessages((prev) => [
+                    ...prev,
+                    { id: Date.now().toString(), role: "user", content: text, timestamp: new Date() },
+                  ]);
+                  wsRef.current.send(JSON.stringify({ type: "speech_end", text }));
+                  (e.target as HTMLInputElement).value = "";
                 }
-              }}
-            />
-          </div>
+              }
+            }}
+          />
         </div>
       )}
 
@@ -1521,21 +971,12 @@ scale={${avatarScale.toFixed(2)}}`;
         position: 'absolute', 
         inset: 0,
         zIndex: showAvatarCreator ? 0 : 1,
-        transition: 'opacity 0.3s ease'
       }}>
         <Canvas camera={{ position: [0, 0.2, 1.5], fov: 50 }}>
           <Environment preset="studio" />
           <directionalLight position={[5, 5, 5]} intensity={1} />
           <ambientLight intensity={0.5} />
-          <React.Suspense
-            fallback={
-              <Html center>
-                <div className="backdrop-blur-xl bg-white/10 border border-white/20 rounded-2xl px-6 py-3">
-                  <span className="text-white text-sm font-medium">Loading…</span>
-                </div>
-              </Html>
-            }
-          >
+          <React.Suspense fallback={<Html center><div className="text-white">Loading...</div></Html>}>
             {avatarUrl && <Avatar 
               key={avatarRenderKey} 
               liveBlend={liveBlend} 
@@ -1548,37 +989,15 @@ scale={${avatarScale.toFixed(2)}}`;
         </Canvas>
       </div>
 
-      {/* Avaturn SDK Modal */}
       <AvaturnModal
         open={showAvatarCreator}
         onClose={() => setShowAvatarCreator(false)}
         onExport={handleAvaturnExport}
-        subdomain="mrrrme"
       />
 
       <style jsx global>{`
-        @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
         @keyframes slide-up { from { opacity: 0; transform: translateY(30px);} to { opacity: 1; transform: translateY(0);} }
-        @keyframes slide-down { from { opacity: 0; transform: translateY(-30px);} to { opacity: 1; } }
-        @keyframes slide-left { from { opacity: 0; transform: translateX(30px);} to { opacity: 1; transform: translateX(0);} }
-        @keyframes spin-slow { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
-        @keyframes spin-very-slow { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
-        @keyframes pulse-slow { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:.8;transform:scale(1.05)} }
-        @keyframes pulse-slower { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.7;transform:scale(1.1)} }
-        @keyframes breathe { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.1);opacity:.8} }
-        .animate-fade-in{animation:fade-in .5s ease-out}
         .animate-slide-up{animation:slide-up .5s ease-out}
-        .animate-slide-down{animation:slide-down .5s ease-out}
-        .animate-slide-left{animation:slide-left .3s ease-out}
-        .animate-spin-slow{animation:spin-slow 20s linear infinite}
-        .animate-spin-very-slow{animation:spin-very-slow 40s linear infinite}
-        .animate-pulse-slow{animation:pulse-slow 3s ease-in-out infinite}
-        .animate-pulse-slower{animation:pulse-slower 4s ease-in-out infinite}
-        .animate-breathe{animation:breathe 3s ease-in-out infinite}
-        .scrollbar-thin::-webkit-scrollbar{width:6px}
-        .scrollbar-thin::-webkit-scrollbar-track{background:transparent}
-        .scrollbar-thin::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}
-        .scrollbar-thin::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
       `}</style>
     </div>
   );

mrrrme/backend_server.py

@@ -1,41 +1,13 @@
-"""MrrrMe Backend WebSocket Server - Web-Accessible Emotion AI"""
+"""MrrrMe Backend WebSocket Server - With User Authentication & Chat History"""
 import os
 import sys
 
-# ===== SET CACHE DIRECTORIES FIRST =====
+# Cache setup
 os.environ['HF_HOME'] = '/tmp/huggingface'
 os.environ['TRANSFORMERS_CACHE'] = '/tmp/transformers'
-os.environ['HF_HUB_CACHE'] = '/tmp/huggingface/hub'
-os.environ['TORCH_HOME'] = '/tmp/torch'
 os.makedirs('/tmp/huggingface', exist_ok=True)
 os.makedirs('/tmp/transformers', exist_ok=True)
-os.makedirs('/tmp/huggingface/hub', exist_ok=True)
-os.makedirs('/tmp/torch', exist_ok=True)
 
-# ===== GPU FIX: Patch TensorBoard =====
-class DummySummaryWriter:
-    def __init__(self, *args, **kwargs): pass
-    def __getattr__(self, name): return lambda *args, **kwargs: None
-
-try:
-    import tensorboardX
-    tensorboardX.SummaryWriter = DummySummaryWriter
-except: pass
-
-# ===== GPU FIX: Patch Logging to redirect /work paths =====
-import logging
-_original_FileHandler = logging.FileHandler
-
-class RedirectingFileHandler(_original_FileHandler):
-    def __init__(self, filename, mode='a', encoding=None, delay=False, errors=None):
-        if isinstance(filename, str) and filename.startswith('/work'):
-            filename = '/tmp/openface_log.txt'
-        os.makedirs(os.path.dirname(filename) if os.path.dirname(filename) else '/tmp', exist_ok=True)
-        super().__init__(filename, mode, encoding, delay, errors)
-
-logging.FileHandler = RedirectingFileHandler
-
-# Now import everything else
 import asyncio
 import json
 import base64
@@ -43,20 +15,22 @@ import numpy as np
 import cv2
 import io
 import torch
-from fastapi import FastAPI, WebSocket, WebSocketDisconnect
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
 import requests
 from PIL import Image
+from typing import Optional
+from groq import Groq
 
-# Check GPU
-if not torch.cuda.is_available():
-    print("[Backend] ⚠️ No GPU detected - using CPU mode")
-else:
-    print(f"[Backend] ✅ GPU available: {torch.cuda.get_device_name(0)}")
+# Database
+import sqlite3
+import secrets
+import hashlib
+from datetime import datetime
 
 app = FastAPI()
 
-# CORS for browser access
 app.add_middleware(
     CORSMiddleware,
     allow_origins=["*"],
@@ -65,7 +39,7 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-# Global model variables (will be loaded after startup)
+# Models
 face_processor = None
 text_analyzer = None
 whisper_worker = None
@@ -74,23 +48,160 @@ llm_generator = None
 fusion_engine = None
 models_ready = False
 
-# Avatar backend URL
 AVATAR_API = "http://localhost:8765"
+DB_PATH = "/tmp/mrrrme_users.db"
+
+# Auth models
+class SignupRequest(BaseModel):
+    username: str
+    password: str
+
+class LoginRequest(BaseModel):
+    username: str
+    password: str
+
+# Database setup
+def init_db():
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+    
+    cursor.execute("""
+        CREATE TABLE IF NOT EXISTS users (
+            user_id TEXT PRIMARY KEY,
+            username TEXT UNIQUE NOT NULL,
+            password_hash TEXT NOT NULL,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+        )
+    """)
+    
+    cursor.execute("""
+        CREATE TABLE IF NOT EXISTS sessions (
+            session_id TEXT PRIMARY KEY,
+            user_id TEXT NOT NULL,
+            token TEXT UNIQUE NOT NULL,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            is_active BOOLEAN DEFAULT 1
+        )
+    """)
+    
+    cursor.execute("""
+        CREATE TABLE IF NOT EXISTS messages (
+            message_id INTEGER PRIMARY KEY AUTOINCREMENT,
+            session_id TEXT NOT NULL,
+            role TEXT NOT NULL,
+            content TEXT NOT NULL,
+            emotion TEXT,
+            timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+        )
+    """)
+    
+    cursor.execute("""
+        CREATE TABLE IF NOT EXISTS user_summaries (
+            user_id TEXT PRIMARY KEY,
+            summary_text TEXT NOT NULL,
+            updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+        )
+    """)
+    
+    conn.commit()
+    conn.close()
+
+init_db()
+
+def hash_password(pw: str) -> str:
+    return hashlib.sha256(pw.encode()).hexdigest()
+
+# Authentication endpoints
+@app.post("/api/signup")
+async def signup(req: SignupRequest):
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+    
+    try:
+        user_id = secrets.token_urlsafe(16)
+        cursor.execute(
+            "INSERT INTO users (user_id, username, password_hash) VALUES (?, ?, ?)",
+            (user_id, req.username, hash_password(req.password))
+        )
+        conn.commit()
+        conn.close()
+        return {"success": True, "message": "Account created!"}
+    except sqlite3.IntegrityError:
+        conn.close()
+        raise HTTPException(status_code=400, detail="Username already exists")
+
+@app.post("/api/login")
+async def login(req: LoginRequest):
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+    
+    cursor.execute(
+        "SELECT user_id, username FROM users WHERE username = ? AND password_hash = ?",
+        (req.username, hash_password(req.password))
+    )
+    
+    result = cursor.fetchone()
+    
+    if not result:
+        conn.close()
+        raise HTTPException(status_code=401, detail="Invalid credentials")
+    
+    user_id, username = result
+    
+    # Create session
+    session_id = secrets.token_urlsafe(16)
+    token = secrets.token_urlsafe(32)
+    
+    cursor.execute(
+        "INSERT INTO sessions (session_id, user_id, token) VALUES (?, ?, ?)",
+        (session_id, user_id, token)
+    )
+    
+    # Get user summary
+    cursor.execute(
+        "SELECT summary_text FROM user_summaries WHERE user_id = ?",
+        (user_id,)
+    )
+    summary_row = cursor.fetchone()
+    summary = summary_row[0] if summary_row else None
+    
+    conn.commit()
+    conn.close()
+    
+    return {
+        "success": True,
+        "token": token,
+        "username": username,
+        "user_id": user_id,
+        "summary": summary
+    }
+
+@app.post("/api/logout")
+async def logout(token: str):
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+    
+    cursor.execute(
+        "UPDATE sessions SET is_active = 0 WHERE token = ?",
+        (token,)
+    )
+    
+    conn.commit()
+    conn.close()
+    
+    return {"success": True}
 
 @app.on_event("startup")
 async def startup_event():
-    """Start loading models in background after server is ready"""
     asyncio.create_task(load_models())
 
 async def load_models():
-    """Load all AI models asynchronously"""
     global face_processor, text_analyzer, whisper_worker, voice_worker
     global llm_generator, fusion_engine, models_ready
     
-    print("[Backend] 🚀 Initializing MrrrMe AI models in background...")
+    print("[Backend] 🚀 Loading models...")
     
     try:
-        # Import modules
         from mrrrme.vision.face_processor import FaceProcessor
         from mrrrme.audio.voice_emotion import VoiceEmotionWorker
         from mrrrme.audio.whisper_transcription import WhisperTranscriptionWorker
@@ -98,24 +209,14 @@ async def load_models():
         from mrrrme.nlp.llm_generator_groq import LLMResponseGenerator
         from mrrrme.config import FUSE4
         
-        # Load models
-        print("[Backend] Loading FaceProcessor...")
         face_processor = FaceProcessor()
-        
-        print("[Backend] Loading TextSentiment...")
         text_analyzer = TextSentimentAnalyzer()
-        
-        print("[Backend] Loading Whisper...")
         whisper_worker = WhisperTranscriptionWorker(text_analyzer)
-        
-        print("[Backend] Loading VoiceEmotion...")
         voice_worker = VoiceEmotionWorker(whisper_worker=whisper_worker)
         
-        print("[Backend] Initializing LLM...")
         groq_api_key = os.getenv("GROQ_API_KEY", "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")
         llm_generator = LLMResponseGenerator(api_key=groq_api_key)
         
-        # Initialize fusion engine
         class FusionEngine:
             def __init__(self):
                 self.alpha_face = 0.5
@@ -144,99 +245,188 @@ async def load_models():
         import traceback
         traceback.print_exc()
 
+async def generate_session_summary(session_id: str, user_id: str):
+    """Generate AI summary of conversation"""
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+    
+    cursor.execute(
+        "SELECT role, content, emotion FROM messages WHERE session_id = ? ORDER BY timestamp ASC",
+        (session_id,)
+    )
+    
+    messages = cursor.fetchall()
+    conn.close()
+    
+    if len(messages) < 3:
+        return None
+    
+    # Build conversation text
+    conversation = ""
+    for role, content, emotion in messages:
+        speaker = "User" if role == "user" else "AI"
+        emo_tag = f" [{emotion}]" if emotion else ""
+        conversation += f"{speaker}{emo_tag}: {content}\n"
+    
+    # Generate summary with Groq
+    try:
+        groq_client = Groq(api_key=os.getenv("GROQ_API_KEY"))
+        
+        prompt = f"""You are analyzing a conversation between a user and an AI emotion coach. Create a concise summary of the user to help the AI remember them in future conversations.
+
+Conversation:
+{conversation}
+
+Create a 2-3 sentence summary covering:
+- Key topics discussed
+- User's emotional state/patterns
+- Important personal details mentioned
+- Preferences or needs
+
+Keep it natural and helpful for continuing the relationship."""
+        
+        response = groq_client.chat.completions.create(
+            model="llama-3.1-8b-instant",
+            messages=[{"role": "user", "content": prompt}],
+            max_tokens=150,
+            temperature=0.7
+        )
+        
+        summary = response.choices[0].message.content.strip()
+        
+        # Save summary
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute(
+            "INSERT OR REPLACE INTO user_summaries (user_id, summary_text, updated_at) VALUES (?, ?, ?)",
+            (user_id, summary, datetime.now())
+        )
+        
+        conn.commit()
+        conn.close()
+        
+        print(f"[Summary] ✅ Generated for user {user_id}: {summary[:60]}...")
+        return summary
+        
+    except Exception as e:
+        print(f"[Summary] ❌ Error: {e}")
+        return None
+
 @app.get("/")
 async def root():
-    """Root endpoint"""
-    return {
-        "status": "running",
-        "models_ready": models_ready,
-        "message": "MrrrMe AI Backend"
-    }
+    return {"status": "running", "models_ready": models_ready}
 
 @app.get("/health")
 async def health():
-    """Health check - responds immediately"""
-    return {
-        "status": "healthy",
-        "models_ready": models_ready
-    }
+    return {"status": "healthy", "models_ready": models_ready}
 
 @app.websocket("/ws")
 async def websocket_endpoint(websocket: WebSocket):
     await websocket.accept()
     print("[WebSocket] ✅ Client connected!")
     
-    # Wait for models to load if needed
-    if not models_ready:
+    # Wait for auth
+    session_data = None
+    user_summary = None
+    
+    try:
+        auth_msg = await websocket.receive_json()
+        
+        if auth_msg.get("type") != "auth":
+            await websocket.send_json({"type": "error", "message": "Authentication required"})
+            return
+        
+        token = auth_msg.get("token")
+        
+        # Validate token
+        conn = sqlite3.connect(DB_PATH)
+        cursor = conn.cursor()
+        
+        cursor.execute(
+            "SELECT s.session_id, s.user_id, u.username FROM sessions s JOIN users u ON s.user_id = u.user_id WHERE s.token = ? AND s.is_active = 1",
+            (token,)
+        )
+        
+        result = cursor.fetchone()
+        
+        if not result:
+            await websocket.send_json({"type": "error", "message": "Invalid session"})
+            conn.close()
+            return
+        
+        session_id, user_id, username = result
+        
+        # Get user summary
+        cursor.execute(
+            "SELECT summary_text FROM user_summaries WHERE user_id = ?",
+            (user_id,)
+        )
+        summary_row = cursor.fetchone()
+        user_summary = summary_row[0] if summary_row else None
+        
+        conn.close()
+        
+        session_data = {
+            'session_id': session_id,
+            'user_id': user_id,
+            'username': username
+        }
+        
+        # Send welcome
         await websocket.send_json({
-            "type": "status",
-            "message": "AI models are loading, please wait..."
+            "type": "authenticated",
+            "username": username,
+            "summary": user_summary
         })
         
-        # Wait up to 15 minutes for models
-        for _ in range(900):
-            if models_ready:
-                await websocket.send_json({
-                    "type": "status",
-                    "message": "Models loaded! Ready to chat."
-                })
-                break
-            await asyncio.sleep(1)
-        
+        # Wait for models
         if not models_ready:
-            await websocket.send_json({
-                "type": "error",
-                "message": "Models failed to load. Please refresh."
-            })
-            return
-    
-    # Session state
-    audio_buffer = []
-    user_preferences = {"voice": "female"}  # Store user preferences per session
-    
-    try:
+            await websocket.send_json({"type": "status", "message": "Loading AI models..."})
+            
+            for _ in range(900):
+                if models_ready:
+                    await websocket.send_json({"type": "status", "message": "Ready!"})
+                    break
+                await asyncio.sleep(1)
+            
+            if not models_ready:
+                await websocket.send_json({"type": "error", "message": "Models failed to load"})
+                return
+        
+        # Main loop
+        audio_buffer = []
+        user_preferences = {"voice": "female", "language": "en"}
+        
         while True:
             data = await websocket.receive_json()
             msg_type = data.get("type")
             
-            # ============ PREFERENCES UPDATE ============
             if msg_type == "preferences":
                 if "voice" in data:
-                    user_preferences["voice"] = data.get("voice", "female")
+                    user_preferences["voice"] = data["voice"]
                 if "language" in data:
-                    user_preferences["language"] = data.get("language", "en")
-                print(f"[Preferences] Updated: voice={user_preferences.get('voice')}, language={user_preferences.get('language')}")
+                    user_preferences["language"] = data["language"]
                 continue
             
-            # ============ VIDEO FRAME ============
-            if msg_type == "video_frame":
+            elif msg_type == "video_frame":
                 try:
-                    # Decode base64 image
                     img_data = base64.b64decode(data["frame"].split(",")[1])
                     img = Image.open(io.BytesIO(img_data))
                     frame = cv2.cvtColor(np.array(img), cv2.COLOR_RGB2BGR)
                     
-                    # Process face emotion
-                    try:
-                        processed_frame, result = face_processor.process_frame(frame)
-                        face_emotion = face_processor.get_last_emotion() or "Neutral"
-                        face_confidence = face_processor.get_last_confidence() or 0.0
-                    except Exception as proc_err:
-                        print(f"[FaceProcessor] Error: {proc_err}")
-                        face_emotion = "Neutral"
-                        face_confidence = 0.0
+                    processed_frame, result = face_processor.process_frame(frame)
+                    face_emotion = face_processor.get_last_emotion() or "Neutral"
+                    face_confidence = face_processor.get_last_confidence() or 0.0
                     
-                    # Send face emotion to frontend
                     await websocket.send_json({
                         "type": "face_emotion",
                         "emotion": face_emotion,
                         "confidence": face_confidence
                     })
-                    
                 except Exception as e:
                     print(f"[Video] Error: {e}")
             
-            # ============ AUDIO CHUNK ============
             elif msg_type == "audio_chunk":
                 try:
                     audio_data = base64.b64decode(data["audio"])
@@ -249,29 +439,30 @@ async def websocket_endpoint(websocket: WebSocket):
                             "emotion": voice_emotion
                         })
                         audio_buffer = audio_buffer[-3:]
-                    
                 except Exception as e:
                     print(f"[Audio] Error: {e}")
             
-            # ============ USER FINISHED SPEAKING ============
             elif msg_type == "speech_end":
                 transcription = data.get("text", "").strip()
-                print(f"\n[Speech End] User said: '{transcription}'")
                 
-                # Filter short/meaningless transcriptions
                 if len(transcription) < 2:
                     continue
                 
-                hallucinations = {"thank you", "thanks", "okay", "ok", "you", "yeah", "yep"}
-                if transcription.lower().strip('.,!?') in hallucinations:
-                    continue
+                # Save user message
+                conn = sqlite3.connect(DB_PATH)
+                cursor = conn.cursor()
+                cursor.execute(
+                    "INSERT INTO messages (session_id, role, content) VALUES (?, ?, ?)",
+                    (session_id, "user", transcription)
+                )
+                conn.commit()
+                conn.close()
                 
                 try:
-                    # Get face emotion
+                    # Get emotions
                     face_emotion = face_processor.get_last_emotion()
                     face_confidence = face_processor.get_last_confidence()
                     
-                    # Create emotion probabilities
                     emotion_map = {'Neutral': 0, 'Happy': 1, 'Sad': 2, 'Angry': 3}
                     face_probs = np.array([0.25, 0.25, 0.25, 0.25], dtype=np.float32)
                     if face_emotion in emotion_map:
@@ -279,32 +470,40 @@ async def websocket_endpoint(websocket: WebSocket):
                         face_probs[face_idx] = face_confidence
                         face_probs = face_probs / face_probs.sum()
                     
-                    # Get voice and text emotions
                     voice_probs, voice_emotion = voice_worker.get_probs()
                     text_analyzer.analyze(transcription)
                     text_probs, _ = text_analyzer.get_probs()
                     
-                    # Fuse emotions
                     fused_emotion, intensity = fusion_engine.fuse(
                         face_probs, voice_probs, text_probs
                     )
                     
-                    print(f"[Fusion] Face: {face_emotion}, Voice: {voice_emotion}, Fused: {fused_emotion}")
+                    # Add user summary context if available
+                    context_prefix = ""
+                    if user_summary:
+                        context_prefix = f"[User context: {user_summary}]\n\n"
                     
-                    # Generate LLM response
                     response_text = llm_generator.generate_response(
                         fused_emotion, face_emotion, voice_emotion,
-                        transcription, force=True, intensity=intensity
+                        context_prefix + transcription, force=True, intensity=intensity
                     )
                     
-                    print(f"[LLM] Response: '{response_text}'")
+                    # Save assistant message
+                    conn = sqlite3.connect(DB_PATH)
+                    cursor = conn.cursor()
+                    cursor.execute(
+                        "INSERT INTO messages (session_id, role, content, emotion) VALUES (?, ?, ?, ?)",
+                        (session_id, "assistant", response_text, fused_emotion)
+                    )
+                    conn.commit()
+                    conn.close()
                     
-                    # Send to avatar for TTS
+                    # Send to avatar
                     try:
-                        voice_preference = user_preferences.get("voice", "female")
+                        voice_pref = user_preferences.get("voice", "female")
                         avatar_response = requests.post(
                             f"{AVATAR_API}/speak",
-                            data={"text": response_text, "voice": voice_preference},
+                            data={"text": response_text, "voice": voice_pref},
                             timeout=45
                         )
                         avatar_response.raise_for_status()
@@ -318,7 +517,6 @@ async def websocket_endpoint(websocket: WebSocket):
                             "audio_url": avatar_data.get("audio_url"),
                             "visemes": avatar_data.get("visemes")
                         })
-                        
                     except Exception as avatar_err:
                         print(f"[Avatar] Error: {avatar_err}")
                         await websocket.send_json({
@@ -328,7 +526,6 @@ async def websocket_endpoint(websocket: WebSocket):
                             "intensity": intensity,
                             "error": "Avatar TTS failed"
                         })
-                    
                 except Exception as e:
                     print(f"[Speech Processing] Error: {e}")
                     import traceback
@@ -336,6 +533,14 @@ async def websocket_endpoint(websocket: WebSocket):
     
     except WebSocketDisconnect:
         print("[WebSocket] ❌ Client disconnected")
+        
+        if session_data:
+            # Generate summary
+            print(f"[WebSocket] 📝 Generating summary for {session_data['username']}...")
+            summary = await generate_session_summary(session_data['session_id'], session_data['user_id'])
+            if summary:
+                print(f"[WebSocket] ✅ Summary saved!")
+    
     except Exception as e:
         print(f"[WebSocket] Error: {e}")
         import traceback

mrrrme/database/db_manager.py

@@ -0,0 +1,333 @@
+"""Database manager for user sessions, chat history, and summaries"""
+import sqlite3
+import json
+import hashlib
+import secrets
+from datetime import datetime, timedelta
+from pathlib import Path
+from typing import Optional, List, Dict
+
+DB_PATH = Path("/tmp/mrrrme_users.db")
+
+
+class DatabaseManager:
+    """Manages user authentication, chat history, and AI-generated summaries"""
+    
+    def __init__(self, db_path: str = str(DB_PATH)):
+        self.db_path = db_path
+        self._init_database()
+        print(f"[Database] ✅ Initialized at {db_path}")
+    
+    def _init_database(self):
+        """Create tables if they don't exist"""
+        conn = sqlite3.connect(self.db_path)
+        cursor = conn.cursor()
+        
+        # Users table
+        cursor.execute("""
+            CREATE TABLE IF NOT EXISTS users (
+                user_id TEXT PRIMARY KEY,
+                username TEXT UNIQUE NOT NULL,
+                password_hash TEXT NOT NULL,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                last_login TIMESTAMP,
+                total_sessions INTEGER DEFAULT 0
+            )
+        """)
+        
+        # Sessions table
+        cursor.execute("""
+            CREATE TABLE IF NOT EXISTS sessions (
+                session_id TEXT PRIMARY KEY,
+                user_id TEXT NOT NULL,
+                token TEXT UNIQUE NOT NULL,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                last_activity TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                is_active BOOLEAN DEFAULT 1,
+                FOREIGN KEY (user_id) REFERENCES users(user_id)
+            )
+        """)
+        
+        # Messages table
+        cursor.execute("""
+            CREATE TABLE IF NOT EXISTS messages (
+                message_id INTEGER PRIMARY KEY AUTOINCREMENT,
+                session_id TEXT NOT NULL,
+                user_id TEXT NOT NULL,
+                role TEXT NOT NULL,
+                content TEXT NOT NULL,
+                emotion TEXT,
+                intensity REAL,
+                timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                FOREIGN KEY (session_id) REFERENCES sessions(session_id),
+                FOREIGN KEY (user_id) REFERENCES users(user_id)
+            )
+        """)
+        
+        # Summaries table (AI-generated user profiles)
+        cursor.execute("""
+            CREATE TABLE IF NOT EXISTS user_summaries (
+                summary_id INTEGER PRIMARY KEY AUTOINCREMENT,
+                user_id TEXT NOT NULL,
+                session_id TEXT,
+                summary_text TEXT NOT NULL,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                message_count INTEGER,
+                FOREIGN KEY (user_id) REFERENCES users(user_id),
+                FOREIGN KEY (session_id) REFERENCES sessions(session_id)
+            )
+        """)
+        
+        conn.commit()
+        conn.close()
+    
+    def _hash_password(self, password: str) -> str:
+        """Hash password with salt"""
+        return hashlib.sha256(password.encode()).hexdigest()
+    
+    def create_user(self, username: str, password: str) -> Optional[str]:
+        """Create new user, returns user_id"""
+        try:
+            conn = sqlite3.connect(self.db_path)
+            cursor = conn.cursor()
+            
+            user_id = secrets.token_urlsafe(16)
+            password_hash = self._hash_password(password)
+            
+            cursor.execute(
+                "INSERT INTO users (user_id, username, password_hash) VALUES (?, ?, ?)",
+                (user_id, username, password_hash)
+            )
+            
+            conn.commit()
+            conn.close()
+            
+            print(f"[Database] ✅ Created user: {username}")
+            return user_id
+        except sqlite3.IntegrityError:
+            return None
+        except Exception as e:
+            print(f"[Database] ❌ Error creating user: {e}")
+            return None
+    
+    def authenticate_user(self, username: str, password: str) -> Optional[Dict]:
+        """Authenticate user and return user info"""
+        conn = sqlite3.connect(self.db_path)
+        cursor = conn.cursor()
+        
+        password_hash = self._hash_password(password)
+        
+        cursor.execute(
+            "SELECT user_id, username FROM users WHERE username = ? AND password_hash = ?",
+            (username, password_hash)
+        )
+        
+        result = cursor.fetchone()
+        
+        if result:
+            user_id, username = result
+            
+            # Update last login
+            cursor.execute(
+                "UPDATE users SET last_login = ?, total_sessions = total_sessions + 1 WHERE user_id = ?",
+                (datetime.now(), user_id)
+            )
+            conn.commit()
+            
+            conn.close()
+            return {'user_id': user_id, 'username': username}
+        
+        conn.close()
+        return None
+    
+    def create_session(self, user_id: str) -> Optional[Dict]:
+        """Create new session for user"""
+        try:
+            conn = sqlite3.connect(self.db_path)
+            cursor = conn.cursor()
+            
+            session_id = secrets.token_urlsafe(16)
+            token = secrets.token_urlsafe(32)
+            
+            cursor.execute(
+                "INSERT INTO sessions (session_id, user_id, token) VALUES (?, ?, ?)",
+                (session_id, user_id, token)
+            )
+            
+            conn.commit()
+            conn.close()
+            
+            print(f"[Database] ✅ Created session for user {user_id}")
+            return {
+                'session_id': session_id,
+                'token': token,
+                'user_id': user_id
+            }
+        except Exception as e:
+            print(f"[Database] ❌ Error creating session: {e}")
+            return None
+    
+    def validate_token(self, token: str) -> Optional[Dict]:
+        """Validate session token and return session info"""
+        conn = sqlite3.connect(self.db_path)
+        cursor = conn.cursor()
+        
+        cursor.execute(
+            """
+            SELECT s.session_id, s.user_id, u.username 
+            FROM sessions s
+            JOIN users u ON s.user_id = u.user_id
+            WHERE s.token = ? AND s.is_active = 1
+            """,
+            (token,)
+        )
+        
+        result = cursor.fetchone()
+        
+        if result:
+            session_id, user_id, username = result
+            
+            # Update last activity
+            cursor.execute(
+                "UPDATE sessions SET last_activity = ? WHERE session_id = ?",
+                (datetime.now(), session_id)
+            )
+            conn.commit()
+            
+            conn.close()
+            return {
+                'session_id': session_id,
+                'user_id': user_id,
+                'username': username
+            }
+        
+        conn.close()
+        return None
+    
+    def add_message(self, session_id: str, user_id: str, role: str, content: str, 
+                   emotion: Optional[str] = None, intensity: Optional[float] = None):
+        """Add message to chat history"""
+        try:
+            conn = sqlite3.connect(self.db_path)
+            cursor = conn.cursor()
+            
+            cursor.execute(
+                """
+                INSERT INTO messages (session_id, user_id, role, content, emotion, intensity)
+                VALUES (?, ?, ?, ?, ?, ?)
+                """,
+                (session_id, user_id, role, content, emotion, intensity)
+            )
+            
+            conn.commit()
+            conn.close()
+        except Exception as e:
+            print(f"[Database] ❌ Error adding message: {e}")
+    
+    def get_session_messages(self, session_id: str) -> List[Dict]:
+        """Get all messages for a session"""
+        conn = sqlite3.connect(self.db_path)
+        cursor = conn.cursor()
+        
+        cursor.execute(
+            """
+            SELECT role, content, emotion, intensity, timestamp
+            FROM messages
+            WHERE session_id = ?
+            ORDER BY timestamp ASC
+            """,
+            (session_id,)
+        )
+        
+        messages = []
+        for row in cursor.fetchall():
+            messages.append({
+                'role': row[0],
+                'content': row[1],
+                'emotion': row[2],
+                'intensity': row[3],
+                'timestamp': row[4]
+            })
+        
+        conn.close()
+        return messages
+    
+    def get_user_summary(self, user_id: str) -> Optional[str]:
+        """Get most recent summary for user"""
+        conn = sqlite3.connect(self.db_path)
+        cursor = conn.cursor()
+        
+        cursor.execute(
+            """
+            SELECT summary_text
+            FROM user_summaries
+            WHERE user_id = ?
+            ORDER BY created_at DESC
+            LIMIT 1
+            """,
+            (user_id,)
+        )
+        
+        result = cursor.fetchone()
+        conn.close()
+        
+        return result[0] if result else None
+    
+    def add_summary(self, user_id: str, session_id: str, summary_text: str, message_count: int):
+        """Add AI-generated summary"""
+        try:
+            conn = sqlite3.connect(self.db_path)
+            cursor = conn.cursor()
+            
+            cursor.execute(
+                """
+                INSERT INTO user_summaries (user_id, session_id, summary_text, message_count)
+                VALUES (?, ?, ?, ?)
+                """,
+                (user_id, session_id, summary_text, message_count)
+            )
+            
+            conn.commit()
+            conn.close()
+            
+            print(f"[Database] ✅ Saved summary for user {user_id} ({message_count} messages)")
+        except Exception as e:
+            print(f"[Database] ❌ Error saving summary: {e}")
+    
+    def close_session(self, session_id: str):
+        """Mark session as inactive"""
+        try:
+            conn = sqlite3.connect(self.db_path)
+            cursor = conn.cursor()
+            
+            cursor.execute(
+                "UPDATE sessions SET is_active = 0 WHERE session_id = ?",
+                (session_id,)
+            )
+            
+            conn.commit()
+            conn.close()
+        except Exception as e:
+            print(f"[Database] ❌ Error closing session: {e}")
+    
+    def cleanup_old_sessions(self, days: int = 30):
+        """Clean up sessions older than X days"""
+        try:
+            conn = sqlite3.connect(self.db_path)
+            cursor = conn.cursor()
+            
+            cutoff = datetime.now() - timedelta(days=days)
+            
+            cursor.execute(
+                "DELETE FROM sessions WHERE last_activity < ? AND is_active = 0",
+                (cutoff,)
+            )
+            
+            deleted = cursor.rowcount
+            conn.commit()
+            conn.close()
+            
+            if deleted > 0:
+                print(f"[Database] 🗑️ Cleaned up {deleted} old sessions")
+        except Exception as e:
+            print(f"[Database] ❌ Error cleaning sessions: {e}")