Upload frontend/src/App.jsx with huggingface_hub

frontend/src/App.jsx

@@ -0,0 +1,1834 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import { Brain, BookOpen, Users, BarChart3, Settings, Play, Pause, Eye, Sparkles, Trophy, Zap, Target, TrendingUp, Hand, Camera, CameraOff, Check, X, Plus, Send, Bot, MessageSquare, RefreshCw, Wifi, WifiOff, Loader2, ChevronRight, Sparkle, Cpu, Zap as ZapIcon, Save, Trash2, Key, Globe, AlertCircle } from 'lucide-react'
+
+const API_URL = 'http://localhost:5001/api'
+
+function App() {
+  const [activeTab, setActiveTab] = useState('learn')
+  const [sessionActive, setSessionActive] = useState(false)
+  const [topic, setTopic] = useState('Machine Learning')
+  const [predictions, setPredictions] = useState([])
+  const [confusionLevel, setConfusionLevel] = useState(0)
+  
+  const [cameraEnabled, setCameraEnabled] = useState(false)
+  const [cameraStream, setCameraStream] = useState(null)
+  const [faceBlurred, setFaceBlurred] = useState(true)
+  
+  const [gestures, setGestures] = useState([
+    { id: 'thinking', name: 'Thinking', description: 'Hand on chin', trained: false, type: 'cognitive' },
+    { id: 'confused', name: 'Confused', description: 'Scratching head', trained: false, type: 'emotional' },
+    { id: 'pause', name: 'Pause', description: 'Open palm', trained: false, type: 'action' },
+    { id: 'got_it', name: 'Got It!', description: 'Thumbs up', trained: true, type: 'feedback' }
+  ])
+  const [trainingGesture, setTrainingGesture] = useState(null)
+  const [trainingProgress, setTrainingProgress] = useState(0)
+  const [recognizedGesture, setRecognizedGesture] = useState(null)
+  const [handLandmarks, setHandLandmarks] = useState(null)
+  
+  const [gamification, setGamification] = useState({
+    level: 1,
+    title: 'Curious Learner',
+    xp: 0,
+    streak: 0,
+    fishXP: 0,
+    fishStage: 0
+  })
+  
+  const [peerInsights, setPeerInsights] = useState([])
+  const [dueReviews, setDueReviews] = useState([])
+  const [stats, setStats] = useState({
+    totalDoubts: 0,
+    mastered: 0,
+    streak: 0,
+    xp: 0
+  })
+
+  // LLM Flow State
+  const [llmFlowActive, setLlmFlowActive] = useState(false)
+  const [llmResponses, setLlmResponses] = useState([])
+  const [llmQuery, setLlmQuery] = useState('')
+  const [llmLoading, setLlmLoading] = useState(false)
+  const [selectedProviders, setSelectedProviders] = useState(['chatgpt', 'gemini'])
+  const [rateLimits, setRateLimits] = useState({})
+  const [gestureActions, setGestureActions] = useState([])
+  const [rlLoopActive, setRlLoopActive] = useState(false)
+  const [rlStatus, setRlStatus] = useState(null)
+  const [promptTemplates, setPromptTemplates] = useState([
+    { id: 'learning_explain', name: 'Explain Concept', icon: Brain },
+    { id: 'doubt_resolution', name: 'Resolve Doubt', icon: MessageSquare },
+    { id: 'summarize_content', name: 'Summarize', icon: BookOpen },
+    { id: 'practice_questions', name: 'Practice Quiz', icon: Target },
+    { id: 'spaced_repetition', name: 'Spaced Review', icon: RefreshCw }
+  ])
+  const [selectedTemplate, setSelectedTemplate] = useState('learning_explain')
+  const [contextForPrompt, setContextForPrompt] = useState({})
+
+  // LLM Settings State
+  const [llmSettings, setLlmSettings] = useState(() => {
+    const saved = localStorage.getItem('contextflow_llm_settings')
+    if (saved) {
+      return JSON.parse(saved)
+    }
+    return {
+      providers: {
+        chatgpt: { enabled: true, name: 'ChatGPT', icon: '🤖', color: '#10a37f' },
+        gemini: { enabled: true, name: 'Gemini', icon: '✨', color: '#4285f4' },
+        claude: { enabled: false, name: 'Claude', icon: '🧠', color: '#d4a574' },
+        perplexity: { enabled: false, name: 'Perplexity', icon: '🔍', color: '#20b2aa' },
+        grok: { enabled: false, name: 'Grok', icon: '🚀', color: '#000000' },
+        deepseek: { enabled: false, name: 'DeepSeek', icon: '🔭', color: '#0066cc' },
+        poe: { enabled: false, name: 'Poe', icon: '🦊', color: '#6b5ce7' },
+        ollama: { enabled: false, name: 'Ollama (Local)', icon: '💻', color: '#9333ea' }
+      },
+      activeProviders: ['chatgpt', 'gemini'],
+      defaultProvider: 'chatgpt',
+      autoOpenBrowser: true
+    }
+  })
+  const [llmLauncher, setLlmLauncher] = useState(null)
+  const [browserLaunchResults, setBrowserLaunchResults] = useState([])
+
+  const videoRef = useRef(null)
+  const canvasRef = useRef(null)
+  const canvasOverlayRef = useRef(null)
+  const animationRef = useRef(null)
+  const handsRef = useRef(null)
+  const faceMeshRef = useRef(null)
+  const mediaPipeLoaded = useRef(false)
+
+  const tabs = [
+    { id: 'learn', icon: Brain, label: 'AI Learning' },
+    { id: 'llmflow', icon: Cpu, label: 'LLM Flow' },
+    { id: 'predict', icon: Sparkles, label: 'Doubt Prediction' },
+    { id: 'gestures', icon: Hand, label: 'Hand Gestures' },
+    { id: 'behavior', icon: Eye, label: 'Behavior' },
+    { id: 'peer', icon: Users, label: 'Peer Network' },
+    { id: 'stats', icon: BarChart3, label: 'Statistics' },
+    { id: 'gamify', icon: Trophy, label: 'Gamification' },
+    { id: 'settings', icon: Settings, label: 'Settings' }
+  ]
+
+  useEffect(() => {
+    loadInitialData()
+    
+    const initLauncher = async () => {
+      const { BrowserLLMLauncher } = await import('./BrowserLLMLauncher')
+      const launcher = new BrowserLLMLauncher()
+      launcher.setActiveProviders(getEnabledProviders())
+      setLlmLauncher(launcher)
+    }
+    initLauncher()
+    
+    if (llmFlowActive) {
+      loadGestureActions()
+    }
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+      }
+    }
+  }, [llmFlowActive])
+
+  const loadInitialData = async () => {
+    try {
+      const res = await fetch(`${API_URL}/health`)
+      if (res.ok) {
+        console.log('Connected to ContextFlow Research API')
+      }
+    } catch (e) {
+      console.log('API not available, running in demo mode')
+    }
+    
+    setPredictions([
+      { doubt: 'What is the bias-variance tradeoff?', confidence: 0.92, explanation: 'Key concept before diving into model selection', priority: 95 },
+      { doubt: 'How do I choose between L1 and L2 regularization?', confidence: 0.87, explanation: 'Common struggle point for beginners', priority: 88 },
+      { doubt: 'What is the difference between supervised and unsupervised?', confidence: 0.85, explanation: 'Foundation concept', priority: 82 },
+      { doubt: 'How do I handle imbalanced datasets?', confidence: 0.78, explanation: 'Practical challenge in real projects', priority: 75 },
+      { doubt: 'What is cross-validation and why is it important?', confidence: 0.72, explanation: 'Essential for reliable evaluation', priority: 68 }
+    ])
+    
+    setPeerInsights([
+      { type: 'common_struggle', content: '87% of learners struggle with prerequisites before mastering ML fundamentals', peer_count: 1247 },
+      { type: 'effective_resource', content: 'Interactive coding exercises show 40% better retention for ML concepts', peer_count: 892 },
+      { type: 'learning_pattern', content: '15-minute focused sessions are more effective than long marathons', peer_count: 1563 }
+    ])
+    
+    setDueReviews([
+      { card_id: '1', front: 'What is a perceptron?', back: 'A single-layer neural network that makes predictions based on linear function', topic: 'Deep Learning', interval: 3 },
+      { card_id: '2', front: 'Explain backpropagation', back: 'Algorithm that calculates gradients by propagating errors backwards through the network', topic: 'Deep Learning', interval: 1 },
+      { card_id: '3', front: 'What is the vanishing gradient problem?', back: 'When gradients become very small during backprop, preventing learning in early layers', topic: 'Deep Learning', interval: 5 }
+    ])
+  }
+
+  const loadMediaPipe = async () => {
+    if (mediaPipeLoaded.current) return true
+    
+    try {
+      const { Hands } = await import('https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4.1675469240/hands.js')
+      const { FaceMesh } = await import('https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4.1633529614/face_mesh.js')
+
+      handsRef.current = new Hands({
+        locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4.1675469240/${file}`
+      })
+
+      handsRef.current.setOptions({
+        maxNumHands: 1,
+        modelComplexity: 1,
+        minDetectionConfidence: 0.5,
+        minTrackingConfidence: 0.5
+      })
+
+      handsRef.current.onResults(onHandResults)
+
+      faceMeshRef.current = new FaceMesh({
+        locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4.1633529614/${file}`
+      })
+
+      faceMeshRef.current.setOptions({
+        maxNumFaces: 1,
+        refineLandmarks: true,
+        minDetectionConfidence: 0.5,
+        minTrackingConfidence: 0.5
+      })
+
+      faceMeshRef.current.onResults(onFaceResults)
+
+      mediaPipeLoaded.current = true
+      return true
+    } catch (e) {
+      console.error('Failed to load MediaPipe:', e)
+      return false
+    }
+  }
+
+  const onHandResults = (results) => {
+    if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
+      const landmarks = results.multiHandLandmarks[0]
+      setHandLandmarks(landmarks)
+      
+      const landmarksArray = landmarks.map(lm => [lm.x, lm.y, lm.z])
+      
+      if (cameraEnabled) {
+        recognizeGesture(landmarksArray)
+      }
+    } else {
+      setHandLandmarks(null)
+    }
+  }
+
+  const onFaceResults = (results) => {
+    if (!faceBlurred || !canvasRef.current) return
+    
+    if (results.multiFaceLandmarks && results.multiFaceLandmarks.length > 0) {
+      const landmarks = results.multiFaceLandmarks[0]
+      applyMediaPipeFaceBlur(landmarks)
+    }
+  }
+
+  const applyMediaPipeFaceBlur = (landmarks) => {
+    const video = videoRef.current
+    const canvas = canvasRef.current
+    if (!video || !canvas) return
+
+    const ctx = canvas.getContext('2d')
+    canvas.width = video.videoWidth
+    canvas.height = video.videoHeight
+
+    ctx.drawImage(video, 0, 0)
+
+    const w = video.videoWidth
+    const h = video.videoHeight
+
+    let minX = 1, maxX = 0, minY = 1, maxY = 0
+    for (const lm of landmarks) {
+      minX = Math.min(minX, lm.x)
+      maxX = Math.max(maxX, lm.x)
+      minY = Math.min(minY, lm.y)
+      maxY = Math.max(maxY, lm.y)
+    }
+
+    const padding = 0.15
+    const padX = (maxX - minX) * padding
+    const padY = (maxY - minY) * padding
+
+    const x = Math.max(0, Math.floor((minX - padX) * w))
+    const y = Math.max(0, Math.floor((minY - padY) * h))
+    const bw = Math.min(w, Math.floor((maxX + padX - minX + padX) * w))
+    const bh = Math.min(h, Math.floor((maxY + padY - minY + padY) * h))
+
+    if (bw > 10 && bh > 10) {
+      const imageData = ctx.getImageData(x, y, bw, bh)
+      const data = imageData.data
+      const pixelSize = 15
+
+      for (let py = 0; py < bh; py += pixelSize) {
+        for (let px = 0; px < bw; px += pixelSize) {
+          const i = (py * bw + px) * 4
+          const r = data[i]
+          const g = data[i + 1]
+          const b = data[i + 2]
+
+          for (let dy = 0; dy < pixelSize && py + dy < bh; dy++) {
+            for (let dx = 0; dx < pixelSize && px + dx < bw; dx++) {
+              const ni = ((py + dy) * bw + (px + dx)) * 4
+              data[ni] = r
+              data[ni + 1] = g
+              data[ni + 2] = b
+            }
+          }
+        }
+      }
+
+      ctx.putImageData(imageData, x, y)
+    }
+  }
+
+  const drawHandLandmarks = useCallback(() => {
+    const canvas = canvasOverlayRef.current
+    const video = videoRef.current
+    if (!canvas || !video || !handLandmarks) return
+
+    canvas.width = video.videoWidth
+    canvas.height = video.videoHeight
+
+    const ctx = canvas.getContext('2d')
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+    const connections = [
+      [0, 1], [1, 2], [2, 3], [3, 4],
+      [0, 5], [5, 6], [6, 7], [7, 8],
+      [0, 9], [9, 10], [10, 11], [11, 12],
+      [0, 13], [13, 14], [14, 15], [15, 16],
+      [0, 17], [17, 18], [18, 19], [19, 20],
+      [5, 9], [9, 13], [13, 17]
+    ]
+
+    ctx.strokeStyle = 'rgba(0, 255, 136, 0.8)'
+    ctx.lineWidth = 2
+
+    for (const connection of connections) {
+      const start = handLandmarks[connection[0]]
+      const end = handLandmarks[connection[1]]
+      
+      ctx.beginPath()
+      ctx.moveTo(start.x * canvas.width, start.y * canvas.height)
+      ctx.lineTo(end.x * canvas.width, end.y * canvas.height)
+      ctx.stroke()
+    }
+
+    for (let i = 0; i < handLandmarks.length; i++) {
+      const landmark = handLandmarks[i]
+      const x = landmark.x * canvas.width
+      const y = landmark.y * canvas.height
+
+      ctx.beginPath()
+      ctx.arc(x, y, i % 4 === 0 ? 6 : 4, 0, 2 * Math.PI)
+      ctx.fillStyle = i % 4 === 0 ? '#00ff88' : '#ffffff'
+      ctx.fill()
+      ctx.strokeStyle = '#000000'
+      ctx.lineWidth = 1
+      ctx.stroke()
+    }
+  }, [handLandmarks])
+
+  useEffect(() => {
+    if (handLandmarks && cameraEnabled) {
+      drawHandLandmarks()
+    }
+  }, [handLandmarks, cameraEnabled, drawHandLandmarks])
+
+  const startCamera = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: 'user', width: 640, height: 480 }
+      })
+      setCameraStream(stream)
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream
+      }
+      
+      await loadMediaPipe()
+      setCameraEnabled(true)
+      
+      if (handsRef.current && faceMeshRef.current) {
+        processMediaPipeFrame()
+      }
+    } catch (err) {
+      console.error('Camera access denied:', err)
+      alert('Camera access denied. Please enable camera permissions.')
+    }
+  }
+
+  const processMediaPipeFrame = useCallback(() => {
+    if (!videoRef.current || !handsRef.current || !faceMeshRef.current || !cameraEnabled) return
+
+    handsRef.current.send({ image: videoRef.current })
+    faceMeshRef.current.send({ image: videoRef.current })
+
+    animationRef.current = requestAnimationFrame(processMediaPipeFrame)
+  }, [cameraEnabled])
+
+  const stopCamera = () => {
+    if (cameraStream) {
+      cameraStream.getTracks().forEach(track => track.stop())
+      setCameraStream(null)
+    }
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current)
+    }
+    setCameraEnabled(false)
+    setHandLandmarks(null)
+  }
+
+  const recognizeGesture = async (landmarks) => {
+    if (!landmarks || landmarks.length < 21) return
+    
+    try {
+      const res = await fetch(`${API_URL}/gesture/recognize`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ user_id: 'demo', landmarks })
+      })
+      const data = await res.json()
+      
+      if (data.recognized) {
+        setRecognizedGesture(data.gesture.name)
+        
+        await fetch(`${API_URL}/session/update`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            user_id: 'demo',
+            behavioral_data: {
+              gesture_signal: data.signal,
+              gesture_name: data.gesture.name,
+              gesture_confidence: data.gesture.confidence
+            }
+          })
+        })
+        
+        setTimeout(() => setRecognizedGesture(null), 2000)
+      }
+    } catch (e) {
+      // Silently handle recognition errors
+    }
+  }
+
+  const startGestureTraining = (gesture) => {
+    setTrainingGesture(gesture)
+    setTrainingProgress(0)
+    
+    const interval = setInterval(() => {
+      if (!handLandmarks) return
+      
+      const landmarksArray = handLandmarks.map(lm => [lm.x, lm.y, lm.z])
+      
+      fetch(`${API_URL}/gesture/training/sample`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ user_id: 'demo', landmarks: landmarksArray })
+      }).then(res => res.json()).then(data => {
+        if (data.status === 'completed') {
+          clearInterval(interval)
+          setTrainingGesture(null)
+          setTrainingProgress(100)
+          setGestures(prev => prev.map(g => 
+            g.id === gesture.id ? { ...g, trained: true } : g
+          ))
+        } else {
+          const progress = (data.samples_collected / data.samples_needed) * 100
+          setTrainingProgress(progress)
+        }
+      }).catch(() => {
+        setTrainingProgress(prev => Math.min(prev + 5, 95))
+        if (trainingProgress >= 95) {
+          clearInterval(interval)
+          setTrainingGesture(null)
+          setTrainingProgress(100)
+          setGestures(prev => prev.map(g => 
+            g.id === gesture.id ? { ...g, trained: true } : g
+          ))
+        }
+      })
+    }, 500)
+  }
+
+  const addCustomGesture = () => {
+    const name = prompt('Gesture name:')
+    if (name) {
+      const description = prompt('Description (what does this gesture mean)?')
+      const newGesture = {
+        id: `custom_${Date.now()}`,
+        name,
+        description: description || '',
+        trained: false,
+        type: 'custom'
+      }
+      setGestures(prev => [...prev, newGesture])
+    }
+  }
+
+  // LLM Flow Functions
+  const loadRateLimits = async () => {
+    try {
+      const res = await fetch(`${API_URL}/llm/rate-limits`)
+      if (res.ok) {
+        const data = await res.json()
+        setRateLimits(data)
+      }
+    } catch (e) {
+      console.log('Rate limits not available')
+    }
+  }
+
+  const loadGestureActions = async () => {
+    try {
+      const res = await fetch(`${API_URL}/llm/gesture-actions`)
+      if (res.ok) {
+        const data = await res.json()
+        setGestureActions(data.actions || [])
+      }
+    } catch (e) {
+      console.log('Gesture actions not available')
+    }
+  }
+
+  const sendLlmQuery = async () => {
+    if (!llmQuery.trim()) return
+    
+    const newResponses = [...llmResponses, { role: 'user', content: llmQuery, timestamp: new Date() }]
+    setLlmResponses(newResponses)
+    
+    setLlmLoading(true)
+    
+    const enabledProviders = getEnabledProviders()
+    
+    if (llmLauncher) {
+      llmLauncher.setActiveProviders(enabledProviders)
+    }
+    
+    for (const provider of enabledProviders) {
+      setLlmResponses(prev => [...prev, {
+        role: provider,
+        content: `Opening ${provider}... Prompt copied to clipboard!`,
+        success: true,
+        launching: true,
+        timestamp: new Date()
+      }])
+    }
+    
+    const results = await launchInBrowser(llmQuery)
+    
+    setLlmResponses(prev => prev.map(r => {
+      if (r.launching) {
+        return { ...r, launching: false, launched: true }
+      }
+      return r
+    }))
+    
+    setLlmQuery('')
+    setLlmLoading(false)
+  }
+
+  const startRlLoop = async () => {
+    try {
+      const res = await fetch(`${API_URL}/llm/rl/start`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          context: {
+            topic: topic,
+            progress: 50,
+            confusion_level: confusionLevel * 100
+          }
+        })
+      })
+      if (res.ok) {
+        setRlLoopActive(true)
+        loadRlStatus()
+      }
+    } catch (e) {
+      console.error('Failed to start RL loop')
+    }
+  }
+
+  const loadRlStatus = async () => {
+    try {
+      const res = await fetch(`${API_URL}/llm/rl/status`)
+      if (res.ok) {
+        const data = await res.json()
+        setRlStatus(data)
+      }
+    } catch (e) {
+      console.error('Failed to load RL status')
+    }
+  }
+
+  const sendRlFeedback = async (quality) => {
+    try {
+      await fetch(`${API_URL}/llm/rl/feedback`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ quality })
+      })
+      loadRlStatus()
+    } catch (e) {
+      console.error('Failed to send feedback')
+    }
+  }
+
+  const generatePromptFromTemplate = async () => {
+    try {
+      const res = await fetch(`${API_URL}/llm/prompt/generate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          template: selectedTemplate,
+          context: {
+            topic: topic,
+            confusion_point: 'understanding the concept',
+            learning_goal: 'master this topic'
+          }
+        })
+      })
+      
+      if (res.ok) {
+        const data = await res.json()
+        setLlmQuery(data.prompt)
+      }
+    } catch (e) {
+      console.error('Failed to generate prompt')
+    }
+  }
+
+  const toggleProvider = (provider) => {
+    toggleProviderEnabled(provider)
+  }
+
+  const getRateLimitStatus = (provider) => {
+    const status = rateLimits[provider]
+    if (!status) return 'ok'
+    if (status.rate_limited) return 'error'
+    if (status.requests_this_minute / status.requests_per_minute_limit > 0.7) return 'warning'
+    return 'ok'
+  }
+
+  const getRateLimitIcon = (status) => {
+    if (status === 'ok') return <Wifi className="w-4 h-4 text-green-400" />
+    if (status === 'warning') return <Wifi className="w-4 h-4 text-yellow-400" />
+    return <WifiOff className="w-4 h-4 text-red-400" />
+  }
+
+  // LLM Settings Functions
+  const saveLlmSettings = () => {
+    localStorage.setItem('contextflow_llm_settings', JSON.stringify(llmSettings))
+    
+    const activeProviders = Object.entries(llmSettings.providers)
+      .filter(([_, config]) => config.enabled)
+      .map(([name]) => name)
+    
+    setLlmSettings(prev => ({ ...prev, activeProviders }))
+    
+    if (llmLauncher) {
+      llmLauncher.setActiveProviders(activeProviders)
+    }
+    
+    return activeProviders
+  }
+
+  const toggleProviderEnabled = (providerName) => {
+    setLlmSettings(prev => {
+      const newSettings = {
+        ...prev,
+        providers: {
+          ...prev.providers,
+          [providerName]: {
+            ...prev.providers[providerName],
+            enabled: !prev.providers[providerName].enabled
+          }
+        }
+      }
+      
+      const activeProviders = Object.entries(newSettings.providers)
+        .filter(([_, config]) => config.enabled)
+        .map(([name]) => name)
+      newSettings.activeProviders = activeProviders
+      
+      if (llmLauncher) {
+        llmLauncher.setActiveProviders(activeProviders)
+      }
+      
+      return newSettings
+    })
+  }
+
+  const setDefaultProvider = (providerName) => {
+    setLlmSettings(prev => {
+      const newSettings = { ...prev, defaultProvider: providerName }
+      
+      Object.keys(newSettings.providers).forEach(key => {
+        newSettings.providers[key] = { 
+          ...newSettings.providers[key],
+          default: key === providerName
+        }
+      })
+      
+      return newSettings
+    })
+  }
+
+  const getEnabledProviders = () => {
+    return Object.entries(llmSettings.providers)
+      .filter(([_, config]) => config.enabled)
+      .map(([name]) => name)
+  }
+
+  const getDefaultProvider = () => {
+    const defaultEntry = Object.entries(llmSettings.providers).find(([_, config]) => config.default)
+    return defaultEntry ? defaultEntry[0] : 'chatgpt'
+  }
+
+  const launchInBrowser = async (prompt) => {
+    if (!llmLauncher) {
+      const { BrowserLLMLauncher } = await import('./BrowserLLMLauncher')
+      const launcher = new BrowserLLMLauncher()
+      launcher.setActiveProviders(getEnabledProviders())
+      setLlmLauncher(launcher)
+    }
+    
+    const results = await llmLauncher.launchAll(prompt, {
+      context: { topic: topic }
+    })
+    
+    setBrowserLaunchResults(results)
+    return results
+  }
+
+  const launchProvider = async (provider, prompt) => {
+    if (!llmLauncher) {
+      const { BrowserLLMLauncher } = await import('./BrowserLLMLauncher')
+      const launcher = new BrowserLLMLauncher()
+      setLlmLauncher(launcher)
+    }
+    
+    const result = await llmLauncher.launchProvider(provider, prompt)
+    return result
+  }
+
+  const startSession = async () => {
+    setSessionActive(true)
+    
+    const interval = setInterval(() => {
+      const newConfusion = Math.random() * 0.3 + confusionLevel * 0.7
+      setConfusionLevel(Math.min(newConfusion, 1))
+    }, 2000)
+    
+    return () => clearInterval(interval)
+  }
+
+  const captureDoubt = async (predictedDoubt = null) => {
+    const doubt = predictedDoubt || {
+      doubt: `Self-doubt at ${new Date().toLocaleTimeString()}`,
+      confidence: confusionLevel,
+      explanation: 'Automatically captured based on confusion signals'
+    }
+    
+    setStats(prev => ({
+      ...prev,
+      totalDoubts: prev.totalDoubts + 1,
+      xp: prev.xp + 10
+    }))
+    
+    setGamification(prev => ({
+      ...prev,
+      xp: prev.xp + 10,
+      fishXP: prev.fishXP + 5
+    }))
+  }
+
+  const completeReview = (cardId, quality) => {
+    const xpMap = { 1: 5, 2: 8, 3: 10, 4: 15, 5: 25 }
+    const xp = xpMap[quality] || 5
+    
+    setStats(prev => ({
+      ...prev,
+      xp: prev.xp + xp,
+      mastered: quality >= 4 ? prev.mastered + 1 : prev.mastered
+    }))
+    
+    setGamification(prev => ({
+      ...prev,
+      xp: prev.xp + xp,
+      fishXP: prev.fishXP + Math.floor(xp / 2)
+    }))
+    
+    setDueReviews(prev => prev.filter(c => c.card_id !== cardId))
+  }
+
+  const fishEmojis = ['🥚', '🐣', '🐟', '🐠', '🐡', '🐋']
+  const fishNames = ['Egg', 'Fry', 'Juvenile', 'Adult', 'Elder', 'Legendary']
+
+  return (
+    <div className="min-h-screen bg-dark">
+      <header className="glass border-b border-white/10 px-6 py-4">
+        <div className="max-w-7xl mx-auto flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
+              <Brain className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+                ContextFlow Research
+              </h1>
+              <p className="text-xs text-gray-400">AI Learning Intelligence Engine</p>
+            </div>
+          </div>
+          
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2 glass px-4 py-2 rounded-full">
+              <Zap className="w-4 h-4 text-yellow-400" />
+              <span className="font-semibold">{gamification.xp} XP</span>
+            </div>
+            <div className="flex items-center gap-2 glass px-4 py-2 rounded-full">
+              <span>🔥</span>
+              <span className="font-semibold">{gamification.streak} day streak</span>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <nav className="glass border-b border-white/10 px-6 py-2">
+        <div className="max-w-7xl mx-auto flex gap-2">
+          {tabs.map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all ${
+                activeTab === tab.id 
+                  ? 'bg-primary text-white' 
+                  : 'text-gray-400 hover:text-white hover:bg-dark3'
+              }`}
+            >
+              <tab.icon className="w-4 h-4" />
+              <span className="text-sm font-medium">{tab.label}</span>
+            </button>
+          ))}
+        </div>
+      </nav>
+
+      <main className="max-w-7xl mx-auto p-6">
+        {activeTab === 'learn' && (
+          <div className="grid grid-cols-3 gap-6">
+            <div className="col-span-2 card">
+              <div className="flex items-center justify-between mb-6">
+                <h2 className="text-lg font-semibold flex items-center gap-2">
+                  <Target className="w-5 h-5 text-primary" />
+                  Learning Session
+                </h2>
+                <button
+                  onClick={sessionActive ? () => setSessionActive(false) : startSession}
+                  className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all ${
+                    sessionActive 
+                      ? 'bg-red-500 hover:bg-red-600' 
+                      : 'btn-primary'
+                  }`}
+                >
+                  {sessionActive ? (
+                    <>
+                      <Pause className="w-4 h-4" /> End Session
+                    </>
+                  ) : (
+                    <>
+                      <Play className="w-4 h-4" /> Start Learning
+                    </>
+                  )}
+                </button>
+              </div>
+              
+              <div className="mb-4">
+                <label className="text-sm text-gray-400 mb-2 block">Topic</label>
+                <input
+                  type="text"
+                  value={topic}
+                  onChange={e => setTopic(e.target.value)}
+                  className="input"
+                  placeholder="Enter topic to study..."
+                />
+              </div>
+
+              <div className="glass rounded-lg p-4 mb-4">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-sm text-gray-400">Confusion Level</span>
+                  <span className={`font-semibold ${
+                    confusionLevel > 0.7 ? 'text-red-400' : 
+                    confusionLevel > 0.4 ? 'text-yellow-400' : 'text-green-400'
+                  }`}>
+                    {Math.round(confusionLevel * 100)}%
+                  </span>
+                </div>
+                <div className="confusion-bar" style={{ width: `${confusionLevel * 100}%` }} />
+                
+                {recognizedGesture && (
+                  <div className="mt-3 p-3 bg-primary/20 rounded-lg flex items-center gap-3">
+                    <Hand className="w-5 h-5 text-primary" />
+                    <div>
+                      <p className="text-sm font-medium">Gesture Detected: {recognizedGesture}</p>
+                      <p className="text-xs text-gray-400">Your hand gesture was recognized!</p>
+                    </div>
+                  </div>
+                )}
+                
+                {confusionLevel > 0.5 && (
+                  <button
+                    onClick={() => captureDoubt()}
+                    className="mt-3 w-full btn-primary text-sm"
+                  >
+                    💡 Capture Doubt ({Math.round(confusionLevel * 100)}% confidence)
+                  </button>
+                )}
+              </div>
+
+              <h3 className="text-sm font-semibold text-gray-400 mb-3">Predicted Doubts</h3>
+              <div className="space-y-2">
+                {predictions.map((pred, i) => (
+                  <div
+                    key={i}
+                    className={`prediction-card ${
+                      pred.confidence > 0.85 ? 'border-l-primary' :
+                      pred.confidence > 0.7 ? 'border-l-yellow-500' : 'border-l-gray-500'
+                    }`}
+                    onClick={() => captureDoubt(pred)}
+                  >
+                    <div className="flex justify-between items-start mb-1">
+                      <p className="font-medium text-sm">{pred.doubt}</p>
+                      <span className="text-xs bg-primary/20 text-primary px-2 py-1 rounded-full">
+                        {Math.round(pred.confidence * 100)}%
+                      </span>
+                    </div>
+                    <p className="text-xs text-gray-400">{pred.explanation}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="space-y-6">
+              <div className="card">
+                <h3 className="text-sm font-semibold text-gray-400 mb-3">Your AI Companion</h3>
+                <div className="bg-gradient-to-b from-cyan-900 to-blue-900 rounded-xl p-4 relative overflow-hidden">
+                  <div className="absolute inset-0 opacity-30">
+                    {[...Array(5)].map((_, i) => (
+                      <div
+                        key={i}
+                        className="absolute w-2 h-2 bg-white/50 rounded-full"
+                        style={{
+                          left: `${20 + i * 20}%`,
+                          animation: `rise ${2 + i * 0.5}s ease-in infinite`,
+                          animationDelay: `${i * 0.3}s`
+                        }}
+                      />
+                    ))}
+                  </div>
+                  <div className="text-center relative z-10">
+                    <div className="text-6xl mb-2 swim">
+                      {fishEmojis[gamification.fishStage]}
+                    </div>
+                    <p className="font-semibold">{fishNames[gamification.fishStage]}</p>
+                    <p className="text-xs text-gray-300 mt-1">
+                      {gamification.fishXP} XP collected
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="card">
+                <h3 className="text-sm font-semibold text-gray-400 mb-3">
+                  Due Reviews ({dueReviews.length})
+                </h3>
+                <div className="space-y-2">
+                  {dueReviews.slice(0, 3).map(review => (
+                    <div key={review.card_id} className="glass rounded-lg p-3">
+                      <p className="text-sm font-medium mb-2">{review.front}</p>
+                      <div className="flex gap-1">
+                        {[1, 2, 3, 4, 5].map(q => (
+                          <button
+                            key={q}
+                            onClick={() => completeReview(review.card_id, q)}
+                            className={`flex-1 py-1 rounded text-xs font-medium transition-all ${
+                              q === 1 ? 'bg-red-500 hover:bg-red-600' :
+                              q === 2 ? 'bg-orange-500 hover:bg-orange-600' :
+                              q === 3 ? 'bg-yellow-500 hover:bg-yellow-600' :
+                              q === 4 ? 'bg-green-500 hover:bg-green-600' :
+                              'bg-blue-500 hover:bg-blue-600'
+                            }`}
+                          >
+                            {q}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          </div>
+        </div>
+        )}
+
+        {activeTab === 'llmflow' && (
+          <div className="space-y-6">
+            {/* Header */}
+            <div className="card">
+              <div className="flex items-center justify-between mb-4">
+                <div>
+                  <h2 className="text-lg font-semibold flex items-center gap-2">
+                    <Cpu className="w-5 h-5 text-primary" />
+                    Gesture AI Launcher
+                  </h2>
+                  <p className="text-sm text-gray-400 mt-1">
+                    Use hand gestures to open AI chats in browser. No API keys needed!
+                  </p>
+                </div>
+                <div className="flex items-center gap-3">
+                  {getEnabledProviders().length > 0 && (
+                    <button
+                      onClick={() => launchInBrowser('Explain ' + topic + ' in simple terms')}
+                      className="btn-primary flex items-center gap-2"
+                    >
+                      <Globe className="w-4 h-4" />
+                      Test Open All
+                    </button>
+                  )}
+                  <button
+                    onClick={startRlLoop}
+                    disabled={rlLoopActive}
+                    className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                      rlLoopActive 
+                        ? 'bg-green-500/20 text-green-400 cursor-default' 
+                        : 'bg-secondary hover:bg-secondary/80 text-white'
+                    }`}
+                  >
+                    <Sparkle className="w-4 h-4" />
+                    {rlLoopActive ? 'RL Active' : 'Start RL'}
+                  </button>
+                </div>
+              </div>
+
+              {/* Active Providers */}
+              <div className="flex items-center gap-4 mb-4">
+                <span className="text-sm text-gray-400">Active:</span>
+                <div className="flex flex-wrap gap-2">
+                  {getEnabledProviders().length === 0 ? (
+                    <span className="text-sm text-yellow-400">No services enabled.</span>
+                  ) : (
+                    getEnabledProviders().map(provider => (
+                      <div 
+                        key={provider}
+                        className="flex items-center gap-2 px-3 py-1.5 rounded-lg text-white text-sm"
+                        style={{ backgroundColor: llmSettings.providers[provider].color }}
+                      >
+                        <span>{llmSettings.providers[provider].icon}</span>
+                        <span>{llmSettings.providers[provider].name}</span>
+                      </div>
+                    ))
+                  )}
+                </div>
+                <a 
+                  href="#"
+                  onClick={(e) => { e.preventDefault(); setActiveTab('settings') }}
+                  className="text-sm text-primary hover:text-primary/80 flex items-center gap-1"
+                >
+                  <Settings className="w-3 h-3" />
+                  {getEnabledProviders().length === 0 ? 'Enable Services' : 'Edit'}
+                </a>
+              </div>
+
+              {/* How it works */}
+              <div className="bg-primary/10 border border-primary/30 rounded-lg p-4">
+                <p className="text-sm">
+                  <strong>How it works:</strong> When you use gestures, the system:
+                </p>
+                <ol className="text-sm text-gray-300 mt-2 space-y-1 list-decimal list-inside">
+                  <li>Builds a smart prompt based on your learning context</li>
+                  <li>Opens the AI chat in a new browser tab</li>
+                  <li>Copies the prompt to your clipboard</li>
+                  <li>Just paste (Ctrl+V) and ask!</li>
+                </ol>
+              </div>
+
+              {/* Prompt Templates */}
+              <div className="mb-4">
+                <div className="flex items-center gap-2 mb-2">
+                  <span className="text-sm text-gray-400">Quick Templates:</span>
+                  <button
+                    onClick={generatePromptFromTemplate}
+                    className="text-xs text-primary hover:text-primary/80 flex items-center gap-1"
+                  >
+                    <Sparkle className="w-3 h-3" /> Generate
+                  </button>
+                </div>
+                <div className="flex gap-2 flex-wrap">
+                  {promptTemplates.map(template => (
+                    <button
+                      key={template.id}
+                      onClick={() => setSelectedTemplate(template.id)}
+                      className={`prompt-template-btn ${
+                        selectedTemplate === template.id 
+                          ? 'prompt-template-btn-active' 
+                          : 'prompt-template-btn-inactive'
+                      }`}
+                    >
+                      <template.icon className="w-4 h-4 inline mr-1" />
+                      {template.name}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Chat Interface */}
+            <div className="grid grid-cols-3 gap-6">
+              <div className="col-span-2 card">
+                <div className="flex items-center gap-2 mb-4">
+                  <Bot className="w-5 h-5 text-primary" />
+                  <h3 className="font-semibold">LLM Responses</h3>
+                  {llmLoading && (
+                    <div className="typing-indicator ml-2">
+                      <span /><span /><span />
+                    </div>
+                  )}
+                </div>
+
+                {/* Messages */}
+                <div className="space-y-4 max-h-96 overflow-y-auto mb-4">
+                  {llmResponses.length === 0 && (
+                    <div className="text-center py-8 text-gray-500">
+                      <MessageSquare className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                      <p>Type a message or use gestures to open AI chats</p>
+                      <p className="text-xs mt-1">Your question will be copied and AI windows will open</p>
+                    </div>
+                  )}
+                  
+                  {llmResponses.map((msg, i) => (
+                    <div 
+                      key={i} 
+                      className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} slide-in`}
+                    >
+                      <div className={`max-w-[80%] rounded-lg p-4 ${
+                        msg.role === 'user' 
+                          ? 'bg-primary/20 text-white' 
+                          : msg.role === 'error'
+                          ? 'bg-red-500/20 text-red-300'
+                          : 'glass'
+                      }`}>
+                        {msg.role !== 'user' && msg.role !== 'error' && (
+                          <div className="flex items-center gap-2 mb-2 text-xs text-gray-400">
+                            <span className="text-lg">
+                              {llmSettings.providers[msg.role]?.icon || '🤖'}
+                            </span>
+                            <span className="capitalize">{llmSettings.providers[msg.role]?.name || msg.role}</span>
+                            {msg.launching && (
+                              <span className="text-yellow-400 flex items-center gap-1">
+                                <Loader2 className="w-3 h-3 animate-spin" />
+                                Opening...
+                              </span>
+                            )}
+                            {msg.launched && (
+                              <span className="text-green-400">Opened!</span>
+                            )}
+                          </div>
+                        )}
+                        <p className="text-sm whitespace-pre-wrap">
+                          {msg.content}
+                        </p>
+                        {msg.role === 'user' && (
+                          <p className="text-xs text-gray-400 mt-2">
+                            {new Date(msg.timestamp).toLocaleTimeString()}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Input */}
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    value={llmQuery}
+                    onChange={e => setLlmQuery(e.target.value)}
+                    onKeyDown={e => e.key === 'Enter' && sendLlmQuery()}
+                    placeholder="Ask anything or use gestures..."
+                    className="input flex-1"
+                    disabled={llmLoading}
+                  />
+                  <button
+                    onClick={sendLlmQuery}
+                    disabled={!llmQuery.trim() || llmLoading}
+                    className="btn-primary px-6 flex items-center gap-2"
+                  >
+                    {llmLoading ? (
+                      <Loader2 className="w-4 h-4 animate-spin" />
+                    ) : (
+                      <Send className="w-4 h-4" />
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              {/* Sidebar */}
+              <div className="space-y-4">
+                {/* RL Loop Status */}
+                <div className="card">
+                  <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
+                    <ZapIcon className="w-4 h-4 text-yellow-400" />
+                    RL Learning Loop
+                  </h3>
+                  {rlStatus ? (
+                    <div className="space-y-2 text-sm">
+                      <div className="flex justify-between">
+                        <span className="text-gray-400">Interactions</span>
+                        <span>{rlStatus.total_interactions}</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span className="text-gray-400">Feedback</span>
+                        <span>{rlStatus.total_feedback}</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span className="text-gray-400">Avg Reward</span>
+                        <span className={rlStatus.average_reward > 0 ? 'text-green-400' : 'text-red-400'}>
+                          {rlStatus.average_reward.toFixed(2)}
+                        </span>
+                      </div>
+                      
+                      {rlStatus.is_active && (
+                        <div className="mt-3 p-2 bg-green-500/20 rounded-lg text-center text-green-400">
+                          Loop Active
+                        </div>
+                      )}
+                      
+                      {rlStatus.top_preferences && rlStatus.top_preferences.length > 0 && (
+                        <div className="mt-3">
+                          <p className="text-xs text-gray-400 mb-2">Learned Preferences:</p>
+                          <div className="flex flex-wrap gap-1">
+                            {rlStatus.top_preferences.slice(0, 5).map(([word, weight], i) => (
+                              <span key={i} className="text-xs px-2 py-1 bg-primary/20 rounded-full">
+                                {word} ({weight.toFixed(2)})
+                              </span>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    <p className="text-sm text-gray-400">Start RL loop to track learning</p>
+                  )}
+                  
+                  {/* Quick Feedback Buttons */}
+                  {rlLoopActive && (
+                    <div className="mt-4">
+                      <p className="text-xs text-gray-400 mb-2">Quick Feedback:</p>
+                      <div className="flex gap-1">
+                        {[1, 2, 3, 4, 5].map(q => (
+                          <button
+                            key={q}
+                            onClick={() => sendRlFeedback(q)}
+                            className={`flex-1 py-2 rounded text-xs font-medium transition-all ${
+                              q === 1 ? 'bg-red-500/50 hover:bg-red-500' :
+                              q === 2 ? 'bg-orange-500/50 hover:bg-orange-500' :
+                              q === 3 ? 'bg-yellow-500/50 hover:bg-yellow-500' :
+                              q === 4 ? 'bg-green-500/50 hover:bg-green-500' :
+                              'bg-blue-500/50 hover:bg-blue-500'
+                            } text-white`}
+                          >
+                            {q}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* Gesture Actions Guide */}
+                <div className="card">
+                  <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
+                    <Hand className="w-4 h-4 text-primary" />
+                    Gesture Actions
+                  </h3>
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between p-2 bg-dark3 rounded-lg">
+                      <div className="flex items-center gap-2">
+                        <span className="gesture-action-badge gesture-badge-swipe">
+                          2 fingers →
+                        </span>
+                        <span className="text-xs">Swipe Right</span>
+                      </div>
+                      <span className="text-xs text-primary">Open ALL AIs</span>
+                    </div>
+                    <div className="flex items-center justify-between p-2 bg-dark3 rounded-lg">
+                      <div className="flex items-center gap-2">
+                        <span className="gesture-action-badge gesture-badge-swipe">
+                          2 fingers ←
+                        </span>
+                        <span className="text-xs">Swipe Left</span>
+                      </div>
+                      <span className="text-xs text-primary">Open Default</span>
+                    </div>
+                    <div className="flex items-center justify-between p-2 bg-dark3 rounded-lg">
+                      <div className="flex items-center gap-2">
+                        <span className="gesture-action-badge gesture-badge-tap">
+                          1 finger
+                        </span>
+                        <span className="text-xs">Tap</span>
+                      </div>
+                      <span className="text-xs text-secondary">Practice Qs</span>
+                    </div>
+                    <div className="flex items-center justify-between p-2 bg-dark3 rounded-lg">
+                      <div className="flex items-center gap-2">
+                        <span className="gesture-action-badge gesture-badge-pinch">
+                          Pinch
+                        </span>
+                        <span className="text-xs">Pinch</span>
+                      </div>
+                      <span className="text-xs text-primary">Real Examples</span>
+                    </div>
+                    <div className="flex items-center justify-between p-2 bg-dark3 rounded-lg">
+                      <div className="flex items-center gap-2">
+                        <span className="gesture-action-badge bg-gray-500/20 text-gray-400">
+                          Open palm
+                        </span>
+                        <span className="text-xs">Hold</span>
+                      </div>
+                      <span className="text-xs text-gray-400">Pause</span>
+                    </div>
+                  </div>
+                  
+                  <div className="mt-3 p-2 bg-primary/10 rounded-lg">
+                    <p className="text-xs text-gray-400">
+                      Each gesture builds a specific prompt type and opens the configured AI services.
+                    </p>
+                  </div>
+                </div>
+
+              {/* Launch Status */}
+              <div className="card">
+                <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
+                  <Globe className="w-4 h-4 text-green-400" />
+                  Browser Sessions
+                </h3>
+                <div className="space-y-2">
+                  {browserLaunchResults.length > 0 ? (
+                    browserLaunchResults.map((result, i) => (
+                      <div key={i} className="flex items-center gap-2 text-sm">
+                        {result.success ? (
+                          <>
+                            <Check className="w-4 h-4 text-green-400" />
+                            <span>{result.providerName} opened</span>
+                          </>
+                        ) : (
+                          <>
+                            <X className="w-4 h-4 text-red-400" />
+                            <span className="text-red-400">{result.error}</span>
+                          </>
+                        )}
+                      </div>
+                    ))
+                  ) : (
+                    <p className="text-xs text-gray-400">No launches yet. Try typing a message above!</p>
+                  )}
+                </div>
+                
+                {browserLaunchResults.length > 0 && (
+                  <div className="mt-3 p-2 bg-primary/10 rounded-lg">
+                    <p className="text-xs text-gray-400">
+                      Your prompt was copied! Paste it in the AI chat that opened.
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+        )}
+
+        {activeTab === 'gestures' && (
+          <div className="space-y-6">
+            <div className="card">
+              <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                <Hand className="w-5 h-5 text-primary" />
+                Hand Gesture Training with MediaPipe
+              </h2>
+              <p className="text-gray-400 text-sm mb-4">
+                Train custom hand gestures that the system will recognize during learning sessions.
+                Your face is automatically blurred using MediaPipe Face Mesh for privacy protection.
+              </p>
+              
+              <div className="grid grid-cols-2 gap-6">
+                <div>
+                  <div className="flex items-center justify-between mb-3">
+                    <h3 className="font-medium">Camera Feed with Hand Landmarks</h3>
+                    <div className="flex items-center gap-2">
+                      <label className="flex items-center gap-2 text-sm">
+                        <input
+                          type="checkbox"
+                          checked={faceBlurred}
+                          onChange={e => setFaceBlurred(e.target.checked)}
+                          className="rounded"
+                        />
+                        Blur Face
+                      </label>
+                      <button
+                        onClick={cameraEnabled ? stopCamera : startCamera}
+                        className={`flex items-center gap-2 px-3 py-1 rounded-lg text-sm ${
+                          cameraEnabled ? 'bg-red-500' : 'bg-primary'
+                        }`}
+                      >
+                        {cameraEnabled ? <CameraOff className="w-4 h-4" /> : <Camera className="w-4 h-4" />}
+                        {cameraEnabled ? 'Stop' : 'Start'}
+                      </button>
+                    </div>
+                  </div>
+                  
+                  <div className="relative bg-dark rounded-xl overflow-hidden aspect-video">
+                    <video ref={videoRef} autoPlay playsInline muted className={`w-full h-full object-cover ${faceBlurred ? 'hidden' : ''}`} />
+                    <canvas ref={canvasRef} className={`w-full h-full ${cameraEnabled ? '' : 'hidden'}`} />
+                    <canvas ref={canvasOverlayRef} className={`absolute top-0 left-0 w-full h-full pointer-events-none ${cameraEnabled && handLandmarks ? '' : 'hidden'}`} />
+                    {!cameraEnabled && (
+                      <div className="absolute inset-0 flex items-center justify-center text-gray-500">
+                        <div className="text-center">
+                          <Camera className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                          <p className="text-sm">Camera is off</p>
+                          <p className="text-xs">Click Start to enable</p>
+                        </div>
+                      </div>
+                    )}
+                    
+                    {handLandmarks && (
+                      <div className="absolute top-2 right-2 bg-green-500/80 text-white text-xs px-2 py-1 rounded">
+                        Hand Detected
+                      </div>
+                    )}
+                  </div>
+                  
+                  <div className="mt-3 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
+                    <p className="text-sm text-yellow-400">
+                      🔒 Privacy Protected: Your face is automatically blurred. Only hand gestures are analyzed.
+                    </p>
+                  </div>
+                </div>
+
+                <div>
+                  <div className="flex items-center justify-between mb-3">
+                    <h3 className="font-medium">Your Gestures</h3>
+                    <button onClick={addCustomGesture} className="flex items-center gap-1 text-sm text-primary hover:text-primary/80">
+                      <Plus className="w-4 h-4" /> Add Custom
+                    </button>
+                  </div>
+                  
+                  <div className="space-y-3">
+                    {gestures.map(gesture => (
+                      <div key={gesture.id} className="glass rounded-lg p-4">
+                        <div className="flex items-center justify-between mb-2">
+                          <div className="flex items-center gap-2">
+                            <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
+                              gesture.trained ? 'bg-green-500/20 text-green-400' : 'bg-dark3 text-gray-400'
+                            }`}>
+                              {gesture.trained ? <Check className="w-4 h-4" /> : <Hand className="w-4 h-4" />}
+                            </div>
+                            <div>
+                              <p className="font-medium text-sm">{gesture.name}</p>
+                              <p className="text-xs text-gray-400">{gesture.description}</p>
+                            </div>
+                          </div>
+                          <span className={`text-xs px-2 py-1 rounded-full ${
+                            gesture.trained ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
+                          }`}>
+                            {gesture.trained ? 'Trained' : 'Not Trained'}
+                          </span>
+                        </div>
+                        
+                        {trainingGesture?.id === gesture.id ? (
+                          <div className="mt-3">
+                            <div className="flex items-center justify-between text-xs text-gray-400 mb-1">
+                              <span>Training... (show gesture to camera)</span>
+                              <span>{Math.round(trainingProgress)}%</span>
+                            </div>
+                            <div className="h-2 bg-dark rounded-full overflow-hidden">
+                              <div className="h-full bg-primary transition-all" style={{ width: `${trainingProgress}%` }} />
+                            </div>
+                          </div>
+                        ) : (
+                          <button
+                            onClick={() => startGestureTraining(gesture)}
+                            disabled={!cameraEnabled || !handLandmarks}
+                            className={`mt-2 w-full py-2 rounded-lg text-sm font-medium transition-all ${
+                              cameraEnabled && handLandmarks
+                                ? 'bg-primary hover:bg-primary/80 text-white'
+                                : 'bg-dark3 text-gray-500 cursor-not-allowed'
+                            }`}
+                          >
+                            {gesture.trained ? 'Retrain' : 'Train'} Gesture
+                          </button>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'predict' && (
+          <div className="grid grid-cols-2 gap-6">
+            <div className="card">
+              <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                <Sparkles className="w-5 h-5 text-primary" />
+                RL Doubt Prediction
+              </h2>
+              <p className="text-gray-400 text-sm mb-4">
+                Our reinforcement learning agent predicts what doubts you'll have before they occur.
+              </p>
+              <div className="space-y-3">
+                <div className="glass rounded-lg p-3">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Brain className="w-4 h-4 text-primary" />
+                    <span className="text-sm font-medium">State Encoding</span>
+                  </div>
+                  <div className="text-xs text-gray-400">
+                    Topic, progress, confusion signals, hand gestures
+                  </div>
+                </div>
+                <div className="glass rounded-lg p-3">
+                  <div className="flex items-center gap-2 mb-2">
+                    <TrendingUp className="w-4 h-4 text-green-400" />
+                    <span className="text-sm font-medium">Q-Learning Policy</span>
+                  </div>
+                  <div className="text-xs text-gray-400">
+                    Deep Q-Network with experience replay
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="card">
+              <h3 className="text-lg font-semibold mb-4">Current Predictions</h3>
+              <div className="space-y-3">
+                {predictions.map((pred, i) => (
+                  <div key={i} className="glass rounded-lg p-4">
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-sm font-medium">{pred.doubt}</span>
+                      <span className={`text-sm font-bold ${
+                        pred.confidence > 0.85 ? 'text-red-400' : pred.confidence > 0.7 ? 'text-yellow-400' : 'text-green-400'
+                      }`}>
+                        {Math.round(pred.confidence * 100)}%
+                      </span>
+                    </div>
+                    <div className="h-2 bg-dark rounded-full overflow-hidden">
+                      <div className="h-full bg-gradient-to-r from-primary to-secondary rounded-full" style={{ width: `${pred.confidence * 100}%` }} />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'behavior' && (
+          <div className="grid grid-cols-3 gap-6">
+            <div className="card">
+              <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                <Eye className="w-5 h-5 text-primary" />
+                Behavioral Tracking
+              </h2>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between p-3 glass rounded-lg">
+                  <span className="text-sm">Mouse Tracking</span>
+                  <span className="text-green-400 text-sm">Active</span>
+                </div>
+                <div className="flex items-center justify-between p-3 glass rounded-lg">
+                  <span className="text-sm">Scroll Tracking</span>
+                  <span className="text-green-400 text-sm">Active</span>
+                </div>
+                <div className="flex items-center justify-between p-3 glass rounded-lg">
+                  <span className="text-sm">Hand Gestures</span>
+                  <span className={cameraEnabled ? 'text-green-400 text-sm' : 'text-yellow-400 text-sm'}>
+                    {cameraEnabled ? 'Active' : 'Inactive'}
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div className="card">
+              <h2 className="text-lg font-semibold mb-4">Signal Analysis</h2>
+              <div className="space-y-4">
+                <div>
+                  <div className="flex justify-between text-sm mb-1">
+                    <span>Mouse Hesitation</span>
+                    <span className="text-primary">0.35</span>
+                  </div>
+                  <div className="h-2 bg-dark rounded-full overflow-hidden">
+                    <div className="h-full bg-primary w-[35%]" />
+                  </div>
+                </div>
+                <div>
+                  <div className="flex justify-between text-sm mb-1">
+                    <span>Scroll Reversals</span>
+                    <span className="text-yellow-400">0.52</span>
+                  </div>
+                  <div className="h-2 bg-dark rounded-full overflow-hidden">
+                    <div className="h-full bg-yellow-400 w-[52%]" />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="card">
+              <h2 className="text-lg font-semibold mb-4">Engagement Level</h2>
+              <div className="text-center">
+                <div className="text-6xl font-bold text-primary mb-2">78%</div>
+                <p className="text-gray-400 text-sm">Moderately Engaged</p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'peer' && (
+          <div className="grid grid-cols-2 gap-6">
+            <div className="card">
+              <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                <Users className="w-5 h-5 text-primary" />
+                Peer Network Insights
+              </h2>
+              <div className="space-y-3">
+                {peerInsights.map((insight, i) => (
+                  <div key={i} className="glass rounded-lg p-4">
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-sm font-medium capitalize">{insight.type.replace('_', ' ')}</span>
+                      <span className="text-xs text-gray-400">{insight.peer_count.toLocaleString()} peers</span>
+                    </div>
+                    <p className="text-sm text-gray-300">{insight.content}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="card">
+              <h2 className="text-lg font-semibold mb-4">Anonymized Peer Doubts</h2>
+              <div className="space-y-2">
+                {[
+                  { content: 'How do decorators work in Python?', upvotes: 156, resolved: true },
+                  { content: 'What is the bias-variance tradeoff?', upvotes: 142, resolved: true },
+                  { content: 'How does batch normalization help?', upvotes: 98, resolved: false }
+                ].map((doubt, i) => (
+                  <div key={i} className="glass rounded-lg p-3 flex items-center justify-between">
+                    <div>
+                      <p className="text-sm">{doubt.content}</p>
+                      <span className="text-xs text-gray-400">{doubt.upvotes} upvotes</span>
+                    </div>
+                    {doubt.resolved && <span className="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded-full">Resolved</span>}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'stats' && (
+          <div className="grid grid-cols-4 gap-6">
+            <div className="stat-card">
+              <div className="text-3xl font-bold text-primary">{stats.totalDoubts}</div>
+              <div className="text-sm text-gray-400">Doubts Captured</div>
+            </div>
+            <div className="stat-card">
+              <div className="text-3xl font-bold text-green-400">{stats.mastered}</div>
+              <div className="text-sm text-gray-400">Concepts Mastered</div>
+            </div>
+            <div className="stat-card">
+              <div className="text-3xl font-bold text-yellow-400">{stats.streak}</div>
+              <div className="text-sm text-gray-400">Day Streak</div>
+            </div>
+            <div className="stat-card">
+              <div className="text-3xl font-bold text-accent">{stats.xp}</div>
+              <div className="text-sm text-gray-400">Total XP</div>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'gamify' && (
+          <div className="grid grid-cols-2 gap-6">
+            <div className="card">
+              <h2 className="text-lg font-semibold mb-4">Your Progress</h2>
+              <div className="flex items-center gap-4 mb-4">
+                <div className="w-16 h-16 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-2xl font-bold">
+                  {gamification.level}
+                </div>
+                <div>
+                  <p className="font-semibold">{gamification.title}</p>
+                  <p className="text-sm text-gray-400">{gamification.xp} / {gamification.xp + 100} XP</p>
+                </div>
+              </div>
+              <div className="h-3 bg-dark rounded-full overflow-hidden">
+                <div className="h-full bg-gradient-to-r from-primary to-secondary rounded-full" style={{ width: `${(gamification.xp % 100)}%` }} />
+              </div>
+            </div>
+            <div className="card">
+              <h2 className="text-lg font-semibold mb-4">Fish Evolution</h2>
+              <div className="flex items-center justify-between">
+                {fishEmojis.map((emoji, i) => (
+                  <div key={i} className={`text-center ${i <= gamification.fishStage ? 'opacity-100' : 'opacity-30'}`}>
+                    <div className="text-3xl">{emoji}</div>
+                    <p className="text-xs text-gray-400">{fishNames[i]}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'settings' && (
+          <div className="space-y-6">
+            <div className="card">
+              <div className="flex items-center justify-between mb-4">
+                <div>
+                  <h2 className="text-lg font-semibold flex items-center gap-2">
+                    <Globe className="w-5 h-5 text-primary" />
+                    Browser AI Settings
+                  </h2>
+                  <p className="text-sm text-gray-400 mt-1">
+                    Toggle which AI services to open in browser when using gestures
+                  </p>
+                </div>
+                <button
+                  onClick={() => {
+                    saveLlmSettings()
+                  }}
+                  className="btn-primary flex items-center gap-2"
+                >
+                  <Save className="w-4 h-4" />
+                  Save
+                </button>
+              </div>
+
+              <div className="bg-green-500/10 border border-green-500/30 rounded-lg p-4 mb-6">
+                <div className="flex items-start gap-3">
+                  <Globe className="w-5 h-5 text-green-400 mt-0.5" />
+                  <div>
+                    <p className="font-medium text-green-400">No API Keys Needed!</p>
+                    <p className="text-sm text-gray-300 mt-1">
+                      This opens AI chat interfaces directly in your browser using your existing login sessions.
+                      Make sure you're logged into the services you want to use.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Provider Grid */}
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                {Object.entries(llmSettings.providers).map(([providerName, config]) => (
+                  <div 
+                    key={providerName}
+                    className={`relative rounded-xl p-4 cursor-pointer transition-all ${
+                      config.enabled 
+                        ? 'bg-gradient-to-br from-dark3 to-dark2 border-2' 
+                        : 'bg-dark3/50 border border-transparent opacity-60'
+                    }`}
+                    style={{ 
+                      borderColor: config.enabled ? config.color : 'transparent'
+                    }}
+                    onClick={() => toggleProviderEnabled(providerName)}
+                  >
+                    <div className="flex flex-col items-center text-center">
+                      <div 
+                        className="w-12 h-12 rounded-full flex items-center justify-center text-2xl mb-2"
+                        style={{ backgroundColor: config.color + '20' }}
+                      >
+                        {config.icon}
+                      </div>
+                      <p className="font-medium text-sm">{config.name}</p>
+                      <p className="text-xs text-gray-500 mt-1">
+                        {providerName === 'ollama' ? 'localhost:11434' : providerName}
+                      </p>
+                      
+                      {config.enabled && (
+                        <div 
+                          className="absolute top-2 right-2 w-5 h-5 rounded-full flex items-center justify-center"
+                          style={{ backgroundColor: config.color }}
+                        >
+                          <Check className="w-3 h-3 text-white" />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Instructions */}
+            <div className="card">
+              <h3 className="text-lg font-semibold mb-3 flex items-center gap-2">
+                <AlertCircle className="w-5 h-5 text-yellow-400" />
+                How It Works
+              </h3>
+              <div className="space-y-3 text-sm text-gray-300">
+                <div className="flex items-start gap-3">
+                  <span className="w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white text-xs font-bold flex-shrink-0">1</span>
+                  <p>Enable the AI services you want to use above</p>
+                </div>
+                <div className="flex items-start gap-3">
+                  <span className="w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white text-xs font-bold flex-shrink-0">2</span>
+                  <p>Make sure you're logged into those services in your browser</p>
+                </div>
+                <div className="flex items-start gap-3">
+                  <span className="w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white text-xs font-bold flex-shrink-0">3</span>
+                  <p>Use hand gestures (2-finger swipe, pinch, etc.) during learning</p>
+                </div>
+                <div className="flex items-start gap-3">
+                  <span className="w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white text-xs font-bold flex-shrink-0">4</span>
+                  <p>The system opens the AI chat, copies your question, and you just paste!</p>
+                </div>
+              </div>
+              
+              <div className="mt-4 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
+                <p className="text-sm text-yellow-300">
+                  <strong>Tip:</strong> Allow popups for this site so the AI windows open properly.
+                </p>
+              </div>
+            </div>
+
+            {/* Active Summary */}
+            <div className="card">
+              <h3 className="text-lg font-semibold mb-3">Active Services</h3>
+              <div className="flex flex-wrap gap-2">
+                {getEnabledProviders().length === 0 ? (
+                  <p className="text-gray-400">No services enabled. Click above to enable.</p>
+                ) : (
+                  getEnabledProviders().map(provider => (
+                    <div 
+                      key={provider}
+                      className="px-4 py-2 rounded-full flex items-center gap-2"
+                      style={{ 
+                        backgroundColor: llmSettings.providers[provider].color + '20',
+                        border: `1px solid ${llmSettings.providers[provider].color}`
+                      }}
+                    >
+                      <span>{llmSettings.providers[provider].icon}</span>
+                      <span className="text-sm font-medium">
+                        {llmSettings.providers[provider].name}
+                      </span>
+                      {provider === getDefaultProvider() && (
+                        <span className="text-xs bg-white/20 px-2 py-0.5 rounded">Default</span>
+                      )}
+                    </div>
+                  ))
+                )}
+              </div>
+              
+              {getEnabledProviders().length > 0 && (
+                <p className="text-xs text-gray-500 mt-3">
+                  2-finger swipe opens ALL active services. Single actions open the default provider.
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
+
+export default App