[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # 🚀 All Rounder - AI Desktop Assistant *Your proactive, privacy-focused desktop AI for seamless workflow automation* chrome-extension://fdpohaocaechififmbbbbbknoalclacl/capture.html?id=10&url=https%3A%2F%2Fv0-all-rounder-desktop-assistant.vercel.app%2F --- ## ✨ Features - **Real-time Screen Analysis** - **Ambient Audio Processing** (Opt-in) - **Cross-Platform Support** (Windows/macOS/Linux) - **Privacy-First** (Invisible in screen shares) ## 🛠️ Tech Stack | Component | Technology | |-----------------|---------------------| | Frontend | Electron + React | | AI Backend | Python (PyTorch) | | Database | SQLite (Local) | | Styling | Tailwind CSS | --- ## 🏗️ Installation ### OS-Specific Setup #### **Windows** \`\`\`powershell # Ensure Python 3.9+ is in PATH python --version macOS/Linux bash brew install python # macOS sudo apt install python3-pip # Linux Generic Steps Clone the repo: bash git clone https://github.com/pankajdev4u/all-rounder-ai-62.git cd cledy Install dependencies: bash npm install && pip install -r requirements.txt 🐞 Debugging Tips Common Issues Error Solution ModuleNotFoundError Run pip install -r requirements.txt --force-reinstall Electron failed to load Delete node_modules + npm install Audio permissions denied Grant mic access in OS settings Logs Location Windows: %APPDATA%/Cledy/logs.txt macOS/Linux: ~/.config/Cledy/logs.txt 🗺️ Roadmap Q3 2025 v1.0 Beta: Core screen/audio analysis Windows/MSI installer Q4 2025 v1.2: macOS ARM64 support Plugin system for workflows 2026 v2.0: Cloud sync (Firebase) [V0_FILE]typescriptreact:file="app/debug.tsx" "use client" import { MicrophoneDebug } from "@/components/microphone-debug" export default function DebugPage() { return } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } } /* Replace font-inter with system-font utility class */ .system-font { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } [V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata } from 'next' import './globals.css' export const metadata: Metadata = { title: 'v0 App', description: 'Created with v0', generator: 'v0.dev', } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/microphone-test.tsx" "use client" import { MicrophoneTest } from "@/components/microphone-test" export default function TestPage() { return (

) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState, useEffect, useCallback } from "react" import { TopFloatingToolbar } from "@/components/top-floating-toolbar" import { RightSideAssistantCard } from "@/components/right-side-assistant-card" import { VoiceListeningPopup } from "@/components/voice-listening-popup" import { VoiceCommandsPanel } from "@/components/voice-commands-panel" import { UnifiedAIResponseOverlay } from "@/components/unified-ai-response-overlay" import { ChatInterface } from "@/components/chat-interface" import { MicrophoneDebug } from "@/components/microphone-debug" import { PersonalizePanel } from "@/components/personalize-panel" import { useHotkeys } from "@/hooks/use-hotkeys" import { useScreenAnalyzer } from "@/hooks/use-screen-analyzer" import { useAudioListener } from "@/hooks/use-audio-listener" import { useVoiceCommands, type VoiceCommand } from "@/hooks/use-voice-commands" import { Button } from "@/components/ui/button" export default function AllRounderAIAssistant() { const [isListening, setIsListening] = useState(false) const [isRightPanelOpen, setIsRightPanelOpen] = useState(false) const [isAIResponseOpen, setIsAIResponseOpen] = useState(false) const [isChatOpen, setIsChatOpen] = useState(false) const [isVisible, setIsVisible] = useState(true) const [sessionTime, setSessionTime] = useState("00:00") const [isAnalyzing, setIsAnalyzing] = useState(false) const [showDebug, setShowDebug] = useState(false) const [showCommands, setShowCommands] = useState(false) const [showVoicePopup, setShowVoicePopup] = useState(false) const [showPersonalize, setShowPersonalize] = useState(false) const [appOpacity, setAppOpacity] = useState(90) // Default 90% opacity const [inputSource, setInputSource] = useState<"audio" | "screen" | null>(null) const [lastDetectedCommand, setLastDetectedCommand] = useState<{ command: VoiceCommand phrase: string timestamp: number } | null>(null) const [hasFirstResponse, setHasFirstResponse] = useState(false) // Real-time screen analysis and audio listening const { screenContent } = useScreenAnalyzer() const { audioContext, transcript, isSimulated, isRecording } = useAudioListener(isListening) // Show voice popup when listening starts or when we have transcript useEffect(() => { if (isListening || (transcript && transcript.trim())) { setShowVoicePopup(true) } else { // Keep popup visible for a few seconds after listening stops if we have transcript if (transcript && transcript.trim()) { const timer = setTimeout(() => { if (!isListening) { setShowVoicePopup(false) } }, 10000) // Keep visible for 10 seconds after listening stops return () => clearTimeout(timer) } else { setShowVoicePopup(false) } } }, [isListening, transcript]) // Smart input detection for Ask AI const handleSmartAskAI = useCallback(() => { console.log("🔍 Smart Ask AI triggered") // Determine input source based on current state let detectedSource: "audio" | "screen" if (isListening || (transcript && transcript.trim() && showVoicePopup)) { // AR listening is active or has recent transcript detectedSource = "audio" console.log("📱 Using AUDIO input source (AR listening active)") // Stop listening if currently active to capture final transcript if (isListening) { setIsListening(false) } } else { // No AR listening, use screen analysis detectedSource = "screen" console.log("🖥️ Using SCREEN input source (no AR listening)") } setInputSource(detectedSource) // Close all other popups setIsRightPanelOpen(false) setIsChatOpen(false) setShowCommands(false) setShowPersonalize(false) // Start analyzing setIsAnalyzing(true) // Wait a moment for analysis setTimeout(() => { setIsAIResponseOpen(true) setIsAnalyzing(false) setHasFirstResponse(true) // Mark that we've had a first response }, 1000) }, [isListening, transcript, showVoicePopup]) // Start Over functionality const handleStartOver = useCallback(() => { console.log("🔄 Starting over - resetting all states") // Reset all states setIsListening(false) setIsAIResponseOpen(false) setIsChatOpen(false) setIsRightPanelOpen(false) setShowCommands(false) setShowVoicePopup(false) setShowPersonalize(false) setInputSource(null) setLastDetectedCommand(null) setIsAnalyzing(false) setHasFirstResponse(false) // Reset first response state // Clear any existing analysis console.log("✅ Ready for new request") }, []) // Define voice commands const voiceCommands: VoiceCommand[] = [ // AI Commands { phrases: ["ask AI", "ask ai", "hey AI", "hey ai", "AI help", "ai help"], action: handleSmartAskAI, description: "Smart AI analysis (audio or screen)", category: "ai", }, { phrases: ["analyze screen", "analyze this", "what do you see", "screen analysis"], action: handleSmartAskAI, description: "Analyze current content", category: "ai", }, { phrases: ["start over", "new request", "reset", "clear all"], action: handleStartOver, description: "Start over with new request", category: "ai", }, // Navigation Commands { phrases: ["open chat", "start chat", "chat mode", "conversation"], action: handleOpenChat, description: "Open chat interface", category: "navigation", }, { phrases: ["show menu", "open menu", "more options", "settings menu"], action: () => setIsRightPanelOpen(true), description: "Show right side menu", category: "navigation", }, { phrases: ["show commands", "voice commands", "what can I say", "help commands"], action: () => setShowCommands(true), description: "Show available voice commands", category: "navigation", }, { phrases: ["personalize", "settings", "customize", "preferences"], action: () => setShowPersonalize(true), description: "Open personalization settings", category: "navigation", }, // Control Commands { phrases: ["hide interface", "hide UI", "invisible mode", "hide everything"], action: () => setIsVisible(false), description: "Hide the AR interface", category: "control", }, { phrases: ["stop listening", "stop microphone", "mic off", "silence"], action: () => setIsListening(false), description: "Turn off microphone", category: "control", }, { phrases: ["close all", "close everything", "dismiss all", "clear screen"], action: handleCloseAll, description: "Close all open panels", category: "control", }, // System Commands { phrases: ["debug mode", "show debug", "troubleshoot", "debug microphone"], action: () => setShowDebug(true), description: "Open debug panel", category: "system", }, ] // Use voice commands hook useVoiceCommands({ transcript, isListening, commands: voiceCommands, onCommandDetected: (command, phrase) => { console.log("🎙️ Voice command executed:", phrase) setLastDetectedCommand({ command, phrase, timestamp: Date.now(), }) }, }) // Update session timer useEffect(() => { const startTime = Date.now() const timer = setInterval(() => { const elapsed = Math.floor((Date.now() - startTime) / 1000) const minutes = Math.floor(elapsed / 60) .toString() .padStart(2, "0") const seconds = (elapsed % 60).toString().padStart(2, "0") setSessionTime(`${minutes}:${seconds}`) }, 1000) return () => clearInterval(timer) }, []) // Updated Hotkey handlers - Your preferred mappings useHotkeys("ctrl+enter", handleSmartAskAI) // Ctrl + Enter for Ask AI useHotkeys("ctrl+h", handleStartOver) // Ctrl+H for start over useHotkeys("ctrl+c+up", () => { // Ctrl + C + ↑ for Chat setIsAIResponseOpen(false) setIsChatOpen(true) }) useHotkeys("ctrl+b", () => { // Ctrl + B for Show/Hide setIsVisible(!isVisible) if (!isVisible) { setIsAIResponseOpen(false) setIsChatOpen(false) setIsRightPanelOpen(false) setShowPersonalize(false) } }) function handleOpenChat() { setIsAIResponseOpen(false) setIsRightPanelOpen(false) setShowCommands(false) setShowPersonalize(false) setIsChatOpen(true) } function handleCloseAll() { setIsAIResponseOpen(false) setIsChatOpen(false) setIsRightPanelOpen(false) setShowCommands(false) setShowDebug(false) setShowVoicePopup(false) setShowPersonalize(false) } const handleMicToggle = () => { console.log("🎤 Toggling microphone:", !isListening) setIsListening(!isListening) } // Show debug tool if requested if (showDebug) { return setShowDebug(false)} /> } if (!isVisible) { return (

) } return (

{/* Debug Button */}

{/* Start Over Button */}

{/* Opacity Display */}

{/* Top Floating Toolbar */} setIsRightPanelOpen(!isRightPanelOpen)} onToggleVisibility={() => setIsVisible(!isVisible)} onMicHover={() => {}} onOpenPersonalize={() => setShowPersonalize(true)} /> {/* Voice Commands Panel */} {showCommands && ( setShowCommands(false)} lastDetectedCommand={lastDetectedCommand || undefined} /> )} {/* Right Side Assistant Card */} {isRightPanelOpen && setIsRightPanelOpen(false)} />} {/* Personalize Panel */} {showPersonalize && ( setShowPersonalize(false)} opacity={appOpacity} onOpacityChange={setAppOpacity} /> )} {/* Voice Listening Popup */} {showVoicePopup && ( setShowCommands(true)} lastDetectedCommand={lastDetectedCommand || undefined} isListening={isListening} /> )} {/* Unified AI Response Overlay */} {isAIResponseOpen && ( setIsAIResponseOpen(false)} onStartOver={handleStartOver} /> )} {/* Chat Interface */} {isChatOpen && ( setIsChatOpen(false)} /> )}

) } [V0_FILE]typescriptreact:file="app/preview.tsx" "use client" import PreviewToolbar from "@/components/preview-toolbar" export default function PreviewPage() { return (

Updated Toolbar Preview

Changes Made:

✓ Removed "Upgrade to Pro" button - Toolbar now starts directly with "Ask AI"
✓ Matched Cluely.ai hotkeys - Ctrl+↓ for Ask AI, Ctrl+↑ for Chat, Ctrl+\ for Show/Hide
✓ Kept V20 UI colors & background - Blue gradient background and button styling preserved

Hotkey Summary:

Ctrl + ↓ → Ask AI (or Ask Follow-Up after first response)
Ctrl + ↑ → Open Chat
Ctrl + \ → Show/Hide interface
Ctrl + H → Start Over (reset everything)

) } [V0_FILE]typescriptreact:file="app/test-page.tsx" "use client" import { MicrophoneTest } from "@/components/microphone-test" export default function TestPage() { return (

) } [V0_FILE]typescriptreact:file="app/test-simple.tsx" "use client" import { MicrophoneTestSimple } from "@/components/microphone-test-simple" export default function TestSimplePage() { return (

Simple Microphone Test

This test will automatically fall back to simulation mode if the real microphone fails.

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/ai-response-overlay.tsx" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { X, Copy, ThumbsUp, ThumbsDown, Sparkles, Monitor, Activity } from "lucide-react" interface AIResponseOverlayProps { screenContent: string audioContext: string isAnalyzing: boolean onClose: () => void } export function AIResponseOverlay({ screenContent, audioContext, isAnalyzing, onClose }: AIResponseOverlayProps) { const [response, setResponse] = useState("") const [analysisComplete, setAnalysisComplete] = useState(false) useEffect(() => { // Reset state when overlay opens setResponse("") setAnalysisComplete(false) // Simulate analysis process const analyzeScreen = async () => { // Start analysis immediately console.log("🔍 Starting AI analysis of screen content") // Short delay to show analysis in progress await new Promise((resolve) => setTimeout(resolve, 1000)) // Generate response based on screen content and audio context const aiResponse = generateIntelligentResponse(screenContent, audioContext) setResponse(aiResponse) setAnalysisComplete(true) console.log("✅ AI analysis complete") } analyzeScreen() }, [screenContent, audioContext]) const generateIntelligentResponse = (content: string, audio: string) => { // Combine screen content and audio context for more accurate response const combinedContext = `${content} ${audio}`.toLowerCase() // Check for specific topics in the context if (combinedContext.includes("capital") || combinedContext.includes("india")) { return `Based on your question about the capital of India: **New Delhi is the capital of India.** • It serves as the seat of all three branches of the Government of India • It's a major administrative and political hub • Hosts Rashtrapati Bhavan, Parliament House, and Supreme Court New Delhi became the capital in 1911, replacing Calcutta (now Kolkata). It is the center for national government and international diplomacy. Would you like to know more about New Delhi's history, architecture, or its role in modern India?` } if (combinedContext.includes("weather") || combinedContext.includes("forecast")) { return `Based on your question about the weather: I can see you're interested in weather information. While I don't have access to real-time weather data, I can help you understand what's visible on your screen. If you're looking at a weather forecast application, here's how to interpret the common elements: • Temperature is typically shown in °C or °F • Precipitation probability is shown as a percentage • Wind speed is usually in km/h or mph • UV index ranges from 1 (low) to 11+ (extreme) Would you like me to help you interpret specific weather data visible on your screen?` } if (combinedContext.includes("code") || combinedContext.includes("function")) { return `Based on my analysis of the code visible on your screen: I can see you're working with programming code. The code appears to be related to a web application, possibly using React or a similar framework. Some observations: • There are function definitions and component structures • The code includes state management patterns • There appear to be UI elements and event handlers Would you like me to help with specific aspects of this code, such as debugging, optimization, or explaining certain functions?` } // Default response for general content return `Based on my analysis of your current screen and audio context: I've analyzed what's currently visible on your screen and what I heard from your audio input. Here's what I can tell: **Screen Content Analysis:** • I can see you're working with an application or website • There appears to be text content and possibly interactive elements • The layout suggests this is a productivity or information tool **From Your Audio/Transcript:** ${audio ? `• I heard: "${audio.replace("🎤 LIVE: ", "").replace("🤖 SIMULATED: ", "")}"` : "• No clear audio context detected"} How can I help you with what you're currently working on? I can provide more specific assistance if you ask about particular elements on your screen.` } return (

{/* Header */}

AI Response

{isAnalyzing ? "Analyzing..." : "Analysis Complete"}

{/* Left Panel - Screen Context */}

Screen Analysis

{screenContent || "Analyzing current screen content..."}

{/* Audio Context */}

Audio Context

{audioContext || "No audio context available"}

{/* Analysis Status */} {isAnalyzing && (

Analyzing Content

Processing visual elements and audio context...

)}

{/* Right Panel - AI Response */}

{response ? (

AI Analysis Result

{response}

Was this analysis helpful?

) : (

Analyzing your content...

This will only take a moment

)}

) } [V0_FILE]typescriptreact:file="components/all-rounder-dropdown-menu.tsx" "use client" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { ArrowLeft, ArrowRight, Settings, LogOut, X, RotateCcw, ChevronUp } from "lucide-react" interface AllRounderDropdownMenuProps { onClose: () => void onToggleRightPanel: () => void onOpenPersonalize: () => void } export function AllRounderDropdownMenu({ onClose, onToggleRightPanel, onOpenPersonalize, }: AllRounderDropdownMenuProps) { return (

{/* Header */}

All Rounder AI

Account: user@example.com

{/* Scroll AI Response */} {/* Move Controls */}

{/* Personalize */} {/* Log Out */} {/* Quit */} {/* Update and Restart */}

) } [V0_FILE]typescriptreact:file="components/chat-interface.tsx" "use client" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { ScrollArea } from "@/components/ui/scroll-area" import { Badge } from "@/components/ui/badge" import { X, Send, Bot, User } from "lucide-react" interface Message { id: string type: "user" | "assistant" content: string timestamp: Date } interface ChatInterfaceProps { screenContent: string audioContext: string onClose: () => void } export function ChatInterface({ screenContent, audioContext, onClose }: ChatInterfaceProps) { const [messages, setMessages] = useState([ { id: "1", type: "assistant", content: "Hi! I'm AR, your AI assistant. I can see your screen and hear your environment to provide contextual help. How can I assist you today?", timestamp: new Date(), }, ]) const [input, setInput] = useState("") const [isLoading, setIsLoading] = useState(false) const scrollAreaRef = useRef(null) const sendMessage = async () => { if (!input.trim()) return const userMessage: Message = { id: Date.now().toString(), type: "user", content: input, timestamp: new Date(), } setMessages((prev) => [...prev, userMessage]) setInput("") setIsLoading(true) await new Promise((resolve) => setTimeout(resolve, 1500)) const assistantMessage: Message = { id: (Date.now() + 1).toString(), type: "assistant", content: generateContextualResponse(input, screenContent, audioContext), timestamp: new Date(), } setMessages((prev) => [...prev, assistantMessage]) setIsLoading(false) } const generateContextualResponse = (input: string, screen: string, audio: string) => { return "I understand you're looking for assistance. Based on what I can observe from your screen context, I'm here to help you navigate through any challenges or questions you might have. Feel free to ask me anything specific about what you're working on!" } useEffect(() => { if (scrollAreaRef.current) { scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight } }, [messages]) return (

{/* Header */}

AR Chat

Context-aware AI assistant

Active

{/* Messages */}

{messages.map((message) => (

{message.type === "assistant" && (

)}

{message.content}

{message.timestamp.toLocaleTimeString()}

{message.type === "user" && (

)}

))} {isLoading && (

)}

{/* Input */}

setInput(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() sendMessage() } }} className="bg-black border-gray-600/50 text-gray-300 placeholder-gray-500 rounded-xl" disabled={isLoading} />

) } [V0_FILE]typescriptreact:file="components/cluely-listening-panel.tsx" "use client" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" interface CluelyListeningPanelProps { transcript: string isListening: boolean isSimulated: boolean questions: string[] } export function CluelyListeningPanel({ transcript, isListening, isSimulated, questions }: CluelyListeningPanelProps) { return (

{/* Header */}

Cluely is listening...

{isSimulated && ( Simulation )}

{/* Chat Bubbles */}

{questions.map((question, index) => (

{question}

))}

{/* Current Transcript */} {transcript && (

{transcript}

)} {/* Control Prompt */}

Press Control+Enter to ask AI

) } [V0_FILE]typescriptreact:file="components/cuely-dropdown-menu.tsx" "use client" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { ArrowLeft, ArrowRight, Settings, LogOut, X, RotateCcw, ChevronUp } from "lucide-react" interface CuelyDropdownMenuProps { onClose: () => void onToggleRightPanel: () => void } export function CuelyDropdownMenu({ onClose, onToggleRightPanel }: CuelyDropdownMenuProps) { return (

{/* Header */}

Cluely

Account: user@example.com

{/* Scroll AI Response */} {/* Move Controls */}

{/* Personalize */} {/* Log Out */} {/* Quit */} {/* Update and Restart */}

) } [V0_FILE]typescriptreact:file="components/floating-panel.tsx" "use client" import type React from "react" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Mic, Eye, MoreVertical, Activity } from "lucide-react" import { cn } from "@/lib/utils" interface FloatingPanelProps { position: { x: number; y: number } onPositionChange: (position: { x: number; y: number }) => void isListening: boolean onToggleListening: () => void onAskAI: () => void onOpenChat: () => void onToggleRightPanel: () => void sessionTime: string isAnalyzing: boolean onTranscriptHover: (isHovering: boolean) => void } export function FloatingPanel({ position, onPositionChange, isListening, onToggleListening, onAskAI, onOpenChat, onToggleRightPanel, sessionTime, isAnalyzing, onTranscriptHover, }: FloatingPanelProps) { const [isDragging, setIsDragging] = useState(false) const [isVisible, setIsVisible] = useState(true) const dragRef = useRef(null) const handleMouseDown = (e: React.MouseEvent) => { setIsDragging(true) const rect = dragRef.current?.getBoundingClientRect() if (rect) { const offsetX = e.clientX - rect.left const offsetY = e.clientY - rect.top const handleMouseMove = (e: MouseEvent) => { onPositionChange({ x: e.clientX - offsetX, y: e.clientY - offsetY, }) } const handleMouseUp = () => { setIsDragging(false) document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) } document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) } } if (!isVisible) { return (

) } return (

{/* Brand */}

All-rounder

{/* Ask AI Button */} {/* Chat Button */} {/* Show/Hide Button */} {/* Session Timer */}

{sessionTime}

{/* Screen Analysis Indicator */} {isAnalyzing && ( Analyzing )} {/* Listening Toggle */}

onTranscriptHover(true)} onMouseLeave={() => onTranscriptHover(false)} >

{/* More Options */}

) } [V0_FILE]typescriptreact:file="components/microphone-debug.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { Mic, MicOff, AlertCircle, Bug, X } from "lucide-react" interface MicrophoneDebugProps { onClose?: () => void } export function MicrophoneDebug({ onClose }: MicrophoneDebugProps) { const [debugInfo, setDebugInfo] = useState([]) const [isListening, setIsListening] = useState(false) const [transcript, setTranscript] = useState("") const [error, setError] = useState("") const [recognition, setRecognition] = useState(null) const addDebugLog = (message: string) => { const timestamp = new Date().toLocaleTimeString() setDebugInfo((prev) => [...prev, `[${timestamp}] ${message}`]) console.log(`🎤 ${message}`) } const testMicrophone = async () => { if (isListening) { // Stop listening if (recognition) { recognition.stop() } setIsListening(false) addDebugLog("Stopping microphone test") return } setIsListening(true) setError("") setTranscript("") addDebugLog("Starting microphone test...") // Check browser support const SpeechRecognition = window.SpeechRecognition || (window as any).webkitSpeechRecognition if (!SpeechRecognition) { addDebugLog("❌ Speech Recognition not supported in this browser") addDebugLog("Browser: " + navigator.userAgent) setError("Speech Recognition not supported") setIsListening(false) // Use simulation mode addDebugLog("🎭 Starting simulation mode...") simulateTranscript() return } addDebugLog("✅ Speech Recognition API found") // Check microphone permission try { addDebugLog("Requesting microphone permission...") const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) addDebugLog("✅ Microphone permission granted") // Set up speech recognition const recognitionInstance = new SpeechRecognition() recognitionInstance.continuous = true recognitionInstance.interimResults = true recognitionInstance.lang = "en-US" recognitionInstance.onstart = () => { addDebugLog("✅ Speech recognition started - speak now!") } recognitionInstance.onresult = (event: any) => { let finalTranscript = "" let interimTranscript = "" for (let i = event.resultIndex; i < event.results.length; i++) { const transcript = event.results[i][0].transcript if (event.results[i].isFinal) { finalTranscript += transcript } else { interimTranscript += transcript } } const currentTranscript = finalTranscript || interimTranscript setTranscript(currentTranscript) addDebugLog(`📝 Transcript: "${currentTranscript}"`) } recognitionInstance.onerror = (event: any) => { addDebugLog(`❌ Speech recognition error: ${event.error}`) setError(`Error: ${event.error}`) setIsListening(false) // Fall back to simulation addDebugLog("🎭 Falling back to simulation mode...") simulateTranscript() } recognitionInstance.onend = () => { addDebugLog("Speech recognition ended") setIsListening(false) } setRecognition(recognitionInstance) recognitionInstance.start() addDebugLog("Speech recognition starting...") // Stop the stream after setting up recognition stream.getTracks().forEach((track) => track.stop()) } catch (err: any) { addDebugLog(`❌ Microphone access denied: ${err.message}`) setError(`Microphone access denied: ${err.message}`) setIsListening(false) // Use simulation mode addDebugLog("🎭 Starting simulation mode...") simulateTranscript() } } const simulateTranscript = () => { const mockTranscripts = [ "Hello, this is a simulated transcript.", "The microphone simulation is working correctly.", "You can see this text updating in real-time.", "This demonstrates how the transcript feature works.", ] let index = 0 const interval = setInterval(() => { if (index < mockTranscripts.length) { const currentTranscript = mockTranscripts[index] setTranscript(currentTranscript) addDebugLog(`🎭 Simulated: "${currentTranscript}"`) index++ } else { clearInterval(interval) addDebugLog("🎭 Simulation complete") setIsListening(false) } }, 2000) } const clearLogs = () => { setDebugInfo([]) setTranscript("") setError("") } return (

{/* Header */}

Microphone Debug Tool

{onClose && ( )}

{/* Test Button */} {/* Status */} {isListening && ( 🔴 Recording Active - Speak now! )} {/* Error */} {error && (

{error}

)} {/* Current Transcript */} {transcript && (

Current Transcript:

{transcript}

)} {/* Debug Logs */}

Debug Logs:

{debugInfo.map((log, index) => (

{log}

))} {debugInfo.length === 0 && (

Click "Test Microphone" to start debugging...

)}

{/* Instructions */}

• This tool will help diagnose microphone issues

• Check the debug logs for detailed information

• Make sure to allow microphone access when prompted

• If real microphone fails, simulation mode will activate

) } [V0_FILE]typescriptreact:file="components/microphone-test-simple.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Mic, MicOff, BotIcon as Robot } from "lucide-react" import { useAudioListener } from "@/hooks/use-audio-listener" export function MicrophoneTestSimple() { const [isTestingMic, setIsTestingMic] = useState(false) const { audioContext, transcript, isRecording, error, isSimulated } = useAudioListener(isTestingMic) return (

{isSimulated ? : } Quick Mic Test

{/* Test Button */} {/* Status */} {isRecording && ( {isSimulated ? "🤖 Simulation Active" : "🔴 Recording Active"} )} {/* Error */} {error && (

{error}

)} {/* Transcript */} {transcript && (

Transcript:

{transcript}

)} {/* Instructions */}

• Click to test microphone

• {isSimulated ? "Blue = Simulation" : "Red = Real microphone"}

) } [V0_FILE]typescriptreact:file="components/microphone-test.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Mic, MicOff, AlertCircle, CheckCircle, Volume2 } from "lucide-react" import { useAudioListener } from "@/hooks/use-audio-listener" export function MicrophoneTest() { const [isTestingMic, setIsTestingMic] = useState(false) const { audioContext, transcript, isRecording, error, microphoneSupported } = useAudioListener(isTestingMic) const testMicrophone = async () => { setIsTestingMic(!isTestingMic) } return (

Microphone Test

{/* Microphone Support Status */}

{microphoneSupported ? ( ) : ( )} Microphone {microphoneSupported ? "Supported" : "Not Supported"} {!microphoneSupported && " (Using Simulation)"}

{/* Test Button */} {/* Status Indicators */} {isRecording && 🔴 Recording Active} {error && (

{error}

)} {/* Audio Context */} {audioContext && (

Audio Status:

{audioContext}

)} {/* Live Transcript */} {transcript && (

Live Transcript:

{transcript}

)} {/* Instructions */}

• Click "Test Microphone" to start

• Allow microphone access when prompted

• Speak clearly to test speech recognition

• If real microphone doesn't work, simulation will be used

) } [V0_FILE]typescriptreact:file="components/overlay-window.tsx" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Textarea } from "@/components/ui/textarea" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { X, Send, Copy, ThumbsUp, ThumbsDown, Sparkles, Monitor } from "lucide-react" interface OverlayWindowProps { context: string screenContent: string onClose: () => void } export function OverlayWindow({ context, screenContent, onClose }: OverlayWindowProps) { const [query, setQuery] = useState("") const [response, setResponse] = useState("") const [isLoading, setIsLoading] = useState(false) const [suggestions, setSuggestions] = useState([]) // Auto-generate query based on screen content useEffect(() => { if (screenContent && !query) { setQuery(`What can you tell me about: ${screenContent.slice(0, 100)}...`) } }, [screenContent, query]) // Simulate AI response based on context const handleAskAI = async () => { if (!query.trim()) return setIsLoading(true) // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 1500)) // Generate contextual response based on screen content const mockResponse = generateContextualResponse(query, screenContent) setResponse(mockResponse) setIsLoading(false) } // Generate contextual suggestions useEffect(() => { const contextSuggestions = generateSuggestions(screenContent) setSuggestions(contextSuggestions) }, [screenContent]) const generateContextualResponse = (query: string, screenContent: string) => { if (screenContent.includes("Gemini") || screenContent.includes("AI")) { return "I can see you're working with AI tools. Based on the Gemini interface visible on your screen, it looks like you're exploring AI capabilities. I can help you understand AI concepts, compare different AI models, or assist with AI-related development tasks." } if (screenContent.includes("code") || screenContent.includes("function")) { return "I notice you have code visible on your screen. I can help you debug, optimize, or explain the code you're working with. Would you like me to analyze the specific code patterns I can see?" } if (screenContent.includes("browser") || screenContent.includes("tab")) { return "I can see you have multiple browser tabs open. Based on your current browsing context, I can help you research topics, summarize content, or assist with web-based tasks you're working on." } return `Based on your screen content showing "${screenContent.slice(0, 100)}...", I can provide contextual assistance. What specific help do you need with what you're currently viewing?` } const generateSuggestions = (screenContent: string) => { if (screenContent.includes("Gemini") || screenContent.includes("AI")) { return [ "Explain AI capabilities I'm seeing", "Compare AI models", "Help with AI development", "Summarize AI concepts", ] } if (screenContent.includes("code")) { return ["Debug this code", "Optimize performance", "Explain code structure", "Suggest improvements"] } return [ "Summarize what's on my screen", "Help me understand this content", "Suggest next steps", "Explain key concepts", ] } return (

{/* Header */}

All-rounder AI Assistant

Screen Aware

{/* Left Side - Screen Analysis */}

Current Screen Analysis

{screenContent || "Analyzing screen content..."}

{/* Quick Suggestions */}

Contextual suggestions:

{suggestions.map((suggestion, index) => ( ))}

{/* Query Input */}

setQuery(e.target.value)}
                  className="bg-gray-800 border-gray-600 text-white placeholder-gray-400 resize-none"
                  rows={3}
                  onKeyDown={(e) => {
                    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
                      handleAskAI()
                    }
                  }}
                />
                <div className="flex justify-between items-center mt-2">
                  <p className="text-xs text-gray-500">Ctrl+Enter to send</p>
                  <Button
                    onClick={handleAskAI}
                    disabled={!query.trim() || isLoading}
                    className="bg-green-600 hover:bg-green-700"
                    size="sm"
                  >
                    {isLoading ? (
                      <div className="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full" />
                    ) : (
                      <Send className="h-4 w-4" />
                    )}
                  </Button>
                </div>
              </div>
            </div>

{/* Right Side - Response */}
            <div className="flex-1">
              {response && (
                <div className="bg-gray-800/50 rounded-lg p-4 h-full">
                  <div className="flex items-start justify-between mb-2">
                    <Badge variant="secondary" className="bg-green-600/20 text-green-400">
                      AI Response
                    </Badge>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => navigator.clipboard.writeText(response)}
                      className="text-gray-400 hover:text-white"
                    >
                      <Copy className="h-4 w-4" />
                    </Button>
                  </div>
                  <ScrollArea className="h-[calc(100%-60px)]">
                    <p className="text-gray-200 leading-relaxed">{response}</p>
                  </ScrollArea>

{/* Feedback */}
                  <div className="flex items-center gap-2 mt-3 pt-3 border-t border-gray-700">
                    <span className="text-xs text-gray-500">Was this helpful?</span>
                    <Button variant="ghost" size="sm" className="text-gray-400 hover:text-green-400">
                      <ThumbsUp className="h-3 w-3" />
                    </Button>
                    <Button variant="ghost" size="sm" className="text-gray-400 hover:text-red-400">
                      <ThumbsDown className="h-3 w-3" />
                    </Button>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/personalize-panel.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Slider } from "@/components/ui/slider"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import { X, Settings, Eye, Palette, Volume2, Mic } from "lucide-react"

interface PersonalizePanelProps {
  onClose: () => void
  opacity: number
  onOpacityChange: (opacity: number) => void
}

export function PersonalizePanel({ onClose, opacity, onOpacityChange }: PersonalizePanelProps) {
  const [settings, setSettings] = useState({
    darkMode: true,
    autoHide: false,
    soundEffects: true,
    voiceCommands: true,
    animations: true,
    compactMode: false,
  })

const updateSetting = (key: string, value: boolean) => {
    setSettings((prev) => ({ ...prev, [key]: value }))
  }

return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm pointer-events-auto z-50 flex items-center justify-center p-4">
      <Card className="w-full max-w-md bg-black/95 backdrop-blur-xl border border-gray-700/50 text-white shadow-2xl rounded-2xl overflow-hidden">
        <div className="p-6">
          {/* Header */}
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center gap-2">
              <Settings className="h-5 w-5 text-white" />
              <h2 className="text-xl font-semibold">Personalize All Rounder AI</h2>
            </div>
            <Button variant="ghost" size="sm" onClick={onClose} className="text-gray-400 hover:text-white">
              <X className="h-4 w-4" />
            </Button>
          </div>

<div className="space-y-6">
            {/* Opacity Control */}
            <div>
              <div className="flex items-center gap-2 mb-4">
                <Eye className="h-4 w-4 text-blue-400" />
                <h3 className="text-lg font-medium">Appearance</h3>
              </div>

<div className="space-y-4">
                <div>
                  <div className="flex items-center justify-between mb-3">
                    <Label className="text-sm font-medium">App Opacity</Label>
                    <Badge variant="outline" className="border-gray-600 text-gray-300">
                      {opacity}%
                    </Badge>
                  </div>
                  <Slider
                    value={[opacity]}
                    onValueChange={(value) => onOpacityChange(value[0])}
                    max={100}
                    min={20}
                    step={5}
                    className="w-full"
                  />
                  <div className="flex justify-between text-xs text-gray-500 mt-1">
                    <span>20% (Transparent)</span>
                    <span>100% (Solid)</span>
                  </div>
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Dark Mode</Label>
                    <p className="text-xs text-gray-400">Use dark theme interface</p>
                  </div>
                  <Switch
                    checked={settings.darkMode}
                    onCheckedChange={(checked) => updateSetting("darkMode", checked)}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Compact Mode</Label>
                    <p className="text-xs text-gray-400">Smaller interface elements</p>
                  </div>
                  <Switch
                    checked={settings.compactMode}
                    onCheckedChange={(checked) => updateSetting("compactMode", checked)}
                  />
                </div>
              </div>
            </div>

{/* Behavior Settings */}
            <div>
              <div className="flex items-center gap-2 mb-4">
                <Palette className="h-4 w-4 text-purple-400" />
                <h3 className="text-lg font-medium">Behavior</h3>
              </div>

<div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Auto Hide</Label>
                    <p className="text-xs text-gray-400">Hide interface when inactive</p>
                  </div>
                  <Switch
                    checked={settings.autoHide}
                    onCheckedChange={(checked) => updateSetting("autoHide", checked)}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Animations</Label>
                    <p className="text-xs text-gray-400">Enable smooth transitions</p>
                  </div>
                  <Switch
                    checked={settings.animations}
                    onCheckedChange={(checked) => updateSetting("animations", checked)}
                  />
                </div>
              </div>
            </div>

{/* Audio Settings */}
            <div>
              <div className="flex items-center gap-2 mb-4">
                <Volume2 className="h-4 w-4 text-green-400" />
                <h3 className="text-lg font-medium">Audio</h3>
              </div>

<div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Sound Effects</Label>
                    <p className="text-xs text-gray-400">Play notification sounds</p>
                  </div>
                  <Switch
                    checked={settings.soundEffects}
                    onCheckedChange={(checked) => updateSetting("soundEffects", checked)}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Voice Commands</Label>
                    <p className="text-xs text-gray-400">Enable voice control</p>
                  </div>
                  <div className="flex items-center gap-2">
                    <Switch
                      checked={settings.voiceCommands}
                      onCheckedChange={(checked) => updateSetting("voiceCommands", checked)}
                    />
                    <Badge variant="secondary" className="bg-green-600/20 text-green-400 text-xs">
                      <Mic className="h-3 w-3 mr-1" />
                      Active
                    </Badge>
                  </div>
                </div>
              </div>
            </div>
          </div>

{/* Footer */}
          <div className="flex justify-between gap-3 mt-8 pt-4 border-t border-gray-700">
            <Button variant="outline" onClick={onClose} className="border-gray-600 text-gray-300 hover:bg-white/10">
              Cancel
            </Button>
            <Button onClick={onClose} className="bg-white text-black hover:bg-gray-200">
              Save Changes
            </Button>
          </div>

{/* Quick Opacity Presets */}
          <div className="mt-4 pt-4 border-t border-gray-700">
            <p className="text-sm text-gray-400 mb-2">Quick Opacity Presets:</p>
            <div className="flex gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => onOpacityChange(30)}
                className="border-gray-600 text-gray-300 hover:bg-white/10 text-xs"
              >
                30% Subtle
              </Button>
              <Button
                variant="outline"
                size="sm"
                onClick={() => onOpacityChange(60)}
                className="border-gray-600 text-gray-300 hover:bg-white/10 text-xs"
              >
                60% Balanced
              </Button>
              <Button
                variant="outline"
                size="sm"
                onClick={() => onOpacityChange(90)}
                className="border-gray-600 text-gray-300 hover:bg-white/10 text-xs"
              >
                90% Solid
              </Button>
            </div>
          </div>
        </div>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/preview-toolbar.tsx"
"use client"
import { Sparkles, MessageSquare, EyeOff, Timer, MicOff, MoreVertical } from "lucide-react"

export default function PreviewToolbar() {
  return (
    <div className="flex justify-center w-full p-8 bg-gray-900">
      <div className="bg-gradient-to-r from-blue-600 via-blue-500 to-blue-600 backdrop-blur-xl border border-blue-400/30 rounded-full px-4 py-2 shadow-2xl">
        <div className="flex items-center gap-3">
          {/* Ask AI Button */}
          <div className="bg-blue-700/50 hover:bg-blue-700/70 text-white rounded-full font-medium text-sm px-4 py-1.5 border border-blue-300/20 flex items-center">
            <Sparkles className="h-3 w-3 mr-1.5" />
            <span>Ask AI</span>
            <div className="ml-2 bg-blue-800/50 text-blue-200 text-xs px-1.5 py-0.5 rounded-md flex items-center">
              Ctrl ↓
            </div>
          </div>

{/* Chat Button */}
          <div className="bg-blue-700/50 hover:bg-blue-700/70 text-white rounded-full font-medium text-sm px-4 py-1.5 border border-blue-300/20 flex items-center">
            <MessageSquare className="h-3 w-3 mr-1.5" />
            <span>Chat</span>
            <div className="ml-2 bg-blue-800/50 text-blue-200 text-xs px-1.5 py-0.5 rounded-md flex items-center">
              Ctrl ↑
            </div>
          </div>

{/* Show/Hide Button */}
          <div className="bg-blue-700/50 hover:bg-blue-700/70 text-white rounded-full font-medium text-sm px-4 py-1.5 border border-blue-300/20 flex items-center">
            <EyeOff className="h-3 w-3 mr-1.5" />
            <span>Show/Hide</span>
            <div className="ml-2 bg-blue-800/50 text-blue-200 text-xs px-1.5 py-0.5 rounded-md flex items-center">
              Ctrl \
            </div>
          </div>

{/* Timer */}
          <div className="flex items-center gap-1.5 text-white font-mono text-sm px-3">
            <Timer className="h-3 w-3" />
            <span>00:42</span>
          </div>

{/* Microphone */}
          <div className="bg-blue-700/50 hover:bg-blue-700/70 text-white rounded-full relative border border-blue-300/20 p-2">
            <MicOff className="h-4 w-4" />
          </div>

{/* Menu Dropdown */}
          <div className="bg-blue-700/50 hover:bg-blue-700/70 text-white rounded-full border border-blue-300/20 p-2">
            <MoreVertical className="h-4 w-4" />
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/right-side-assistant-card.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { ArrowLeft, ArrowRight, Settings, LogOut, X } from "lucide-react"

interface RightSideAssistantCardProps {
  onClose: () => void
}

export function RightSideAssistantCard({ onClose }: RightSideAssistantCardProps) {
  return (
    <div className="fixed top-20 right-6 pointer-events-auto z-50">
      <Card className="w-72 bg-gray-900/90 backdrop-blur-xl border border-gray-700/50 text-white shadow-2xl rounded-2xl overflow-hidden">
        <div className="p-5">
          {/* Header */}
          <div className="flex items-center justify-between mb-4">
            <div>
              <h3 className="text-xl font-bold text-gray-300">AR</h3>
              <p className="text-sm text-gray-400 mt-1">User Email</p>
            </div>
            <Button variant="ghost" size="sm" onClick={onClose} className="text-gray-400 hover:text-white rounded-lg">
              <X className="h-4 w-4" />
            </Button>
          </div>

{/* Scroll AI Response */}
          <Button className="w-full justify-between bg-black hover:bg-gray-900 text-gray-300 hover:text-gray-100 rounded-xl mb-3 h-12">
            <span className="font-medium">Scroll AI Response</span>
            <div className="flex items-center gap-1">
              <span className="text-xs bg-gray-800 px-2 py-1 rounded">Ctrl</span>
              <span className="text-xs bg-gray-800 px-2 py-1 rounded">⬇</span>
            </div>
          </Button>

{/* Move Controls */}
          <div className="flex gap-2 mb-4">
            <Button
              size="sm"
              className="flex-1 bg-black hover:bg-gray-900 text-gray-300 hover:text-gray-100 rounded-xl h-10"
            >
              <ArrowLeft className="h-4 w-4 mr-2" />
              Move
            </Button>
            <Button
              size="sm"
              className="flex-1 bg-black hover:bg-gray-900 text-gray-300 hover:text-gray-100 rounded-xl h-10"
            >
              Move
              <ArrowRight className="h-4 w-4 ml-2" />
            </Button>
          </div>

{/* Personalize */}
          <Button className="w-full justify-start bg-black hover:bg-gray-900 text-gray-300 hover:text-gray-100 rounded-xl mb-3 h-12">
            <Settings className="h-4 w-4 mr-3" />
            <span className="font-medium">Personalize</span>
          </Button>

{/* Log Out */}
          <Button className="w-full justify-start bg-black hover:bg-gray-900 text-gray-300 hover:text-gray-100 rounded-xl mb-3 h-12">
            <LogOut className="h-4 w-4 mr-3" />
            <span className="font-medium">Log Out</span>
          </Button>

{/* Quit */}
          <Button className="w-full justify-start bg-black hover:bg-gray-900 text-gray-300 hover:text-gray-100 rounded-xl h-12">
            <span className="font-medium">Quit</span>
          </Button>
        </div>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/right-side-panel.tsx"
"use client"

interface RightSidePanelProps {
  onClose: () => void
}

export function RightSidePanel({ onClose }: RightSidePanelProps) {
  return (
    <div className="fixed right-4 top-20 z-50">
      <Card className="w-64 bg-gray-900/95 backdrop-blur-md border border-gray-700/50 text-white shadow-2xl">
        <div className="p-4">
          {/* Header */}
          <div className="flex items-center justify-between mb-4">
            <div>
              <h3 className="text-lg font-semibold text-green-400">All-Rounder AI</h3>
              <p className="text-sm text-gray-400">Account: UserEmail</p>
            </div>
            <Button variant="ghost" size="sm" onClick={onClose} className="text-gray-400 hover:text-white">
              <X className="h-4 w-4" />
            </Button>
          </div>

{/* Scroll AI Response */}
          <Button
            variant="outline"
            className="w-full justify-between border-gray-600 text-gray-300 hover:bg-white/10 mb-3"
          >
            <span>Scroll AI Response</span>
            <div className="flex items-center gap-1">
              <span className="text-xs bg-gray-700 px-1 rounded">Ctrl</span>
              <span className="text-xs bg-gray-700 px-1 rounded">+ ↓→</span>
            </div>
          </Button>

{/* Move Controls */}
          <div className="flex gap-2 mb-3">
            <Button variant="outline" size="sm" className="flex-1 border-gray-600 text-gray-300 hover:bg-white/10">
              <ArrowLeft className="h-4 w-4 mr-1" />
              Move
            </Button>
            <Button variant="outline" size="sm" className="flex-1 border-gray-600 text-gray-300 hover:bg-white/10">
              Move
              <ArrowRight className="h-4 w-4 ml-1" />
            </Button>
          </div>

{/* Personalize */}
          <Button
            variant="outline"
            className="w-full justify-start border-gray-600 text-gray-300 hover:bg-white/10 mb-3"
          >
            <Settings className="h-4 w-4 mr-2" />
            Personalize
          </Button>

{/* Log Out */}
          <Button
            variant="destructive"
            className="w-full justify-start bg-red-600/20 border-red-600/50 text-red-400 hover:bg-red-600/30 mb-3"
          >
            <LogOut className="h-4 w-4 mr-2" />
            Log Out
          </Button>

{/* Quit */}
          <Button variant="outline" className="w-full justify-start border-gray-600 text-gray-300 hover:bg-white/10">
            Quit
          </Button>
        </div>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/settings-panel.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { Slider } from "@/components/ui/slider"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { X, Monitor, Shield, Palette, Keyboard, Database, Zap } from "lucide-react"

interface SettingsPanelProps {
  onClose: () => void
  panelPosition: { x: number; y: number }
  onPositionChange: (position: { x: number; y: number }) => void
}

export function SettingsPanel({ onClose, panelPosition, onPositionChange }: SettingsPanelProps) {
  const [settings, setSettings] = useState({
    screenMonitoring: true,
    audioListening: false,
    autoResponses: true,
    invisibleMode: true,
    darkMode: true,
    opacity: [90],
    hotkey: "ctrl+enter",
    aiModel: "gpt-4o",
    responseSpeed: "balanced",
    dataRetention: "session-only",
    notifications: true,
  })

const updateSetting = (key: string, value: any) => {
    setSettings((prev) => ({ ...prev, [key]: value }))
  }

const resetPosition = () => {
    onPositionChange({ x: 20, y: 20 })
  }

return (
    <div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
      <Card className="w-full max-w-2xl max-h-[90vh] bg-gray-900 border-gray-700 text-white shadow-2xl overflow-hidden">
        <div className="p-6 overflow-y-auto max-h-[90vh]">
          {/* Header */}
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center gap-2">
              <Zap className="h-5 w-5 text-blue-400" />
              <h2 className="text-xl font-semibold">All-rounder Settings</h2>
            </div>
            <Button variant="ghost" size="sm" onClick={onClose} className="text-gray-400 hover:text-white">
              <X className="h-4 w-4" />
            </Button>
          </div>

<div className="space-y-6">
            {/* Core Features */}
            <div>
              <div className="flex items-center gap-2 mb-4">
                <Monitor className="h-4 w-4 text-blue-400" />
                <h3 className="text-lg font-medium">Core Features</h3>
              </div>

<div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Screen Monitoring</Label>
                    <p className="text-xs text-gray-400">Analyze screen content for context</p>
                  </div>
                  <Switch
                    checked={settings.screenMonitoring}
                    onCheckedChange={(checked) => updateSetting("screenMonitoring", checked)}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Audio Listening</Label>
                    <p className="text-xs text-gray-400">Listen to ambient audio for context</p>
                  </div>
                  <Switch
                    checked={settings.audioListening}
                    onCheckedChange={(checked) => updateSetting("audioListening", checked)}
                  />
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Auto Responses</Label>
                    <p className="text-xs text-gray-400">Proactive suggestions based on context</p>
                  </div>
                  <Switch
                    checked={settings.autoResponses}
                    onCheckedChange={(checked) => updateSetting("autoResponses", checked)}
                  />
                </div>
              </div>
            </div>

{/* Privacy & Security */}
            <div>
              <div className="flex items-center gap-2 mb-4">
                <Shield className="h-4 w-4 text-green-400" />
                <h3 className="text-lg font-medium">Privacy & Security</h3>
              </div>

<div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Invisible Mode</Label>
                    <p className="text-xs text-gray-400">Hide from screen recordings & shares</p>
                  </div>
                  <div className="flex items-center gap-2">
                    <Switch
                      checked={settings.invisibleMode}
                      onCheckedChange={(checked) => updateSetting("invisibleMode", checked)}
                    />
                    <Badge variant="secondary" className="bg-green-600/20 text-green-400 text-xs">
                      Active
                    </Badge>
                  </div>
                </div>

<div>
                  <Label className="text-sm font-medium mb-2 block">Data Retention</Label>
                  <Select
                    value={settings.dataRetention}
                    onValueChange={(value) => updateSetting("dataRetention", value)}
                  >
                    <SelectTrigger className="bg-gray-800 border-gray-600">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent className="bg-gray-800 border-gray-600">
                      <SelectItem value="session-only">Session Only</SelectItem>
                      <SelectItem value="24-hours">24 Hours</SelectItem>
                      <SelectItem value="7-days">7 Days</SelectItem>
                      <SelectItem value="never">Never Delete</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </div>

{/* Appearance */}
            <div>
              <div className="flex items-center gap-2 mb-4">
                <Palette className="h-4 w-4 text-purple-400" />
                <h3 className="text-lg font-medium">Appearance</h3>
              </div>

<div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Dark Mode</Label>
                    <p className="text-xs text-gray-400">Use dark theme</p>
                  </div>
                  <Switch
                    checked={settings.darkMode}
                    onCheckedChange={(checked) => updateSetting("darkMode", checked)}
                  />
                </div>

<div>
                  <Label className="text-sm font-medium mb-2 block">Panel Opacity: {settings.opacity[0]}%</Label>
                  <Slider
                    value={settings.opacity}
                    onValueChange={(value) => updateSetting("opacity", value)}
                    max={100}
                    min={20}
                    step={10}
                    className="w-full"
                  />
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Panel Position</Label>
                    <p className="text-xs text-gray-400">
                      X: {panelPosition.x}, Y: {panelPosition.y}
                    </p>
                  </div>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={resetPosition}
                    className="border-gray-600 text-gray-300 hover:bg-white/10"
                  >
                    Reset
                  </Button>
                </div>
              </div>
            </div>

{/* Controls */}
            <div>
              <div className="flex items-center gap-2 mb-4">
                <Keyboard className="h-4 w-4 text-yellow-400" />
                <h3 className="text-lg font-medium">Controls</h3>
              </div>

<div className="space-y-4">
                <div>
                  <Label className="text-sm font-medium mb-2 block">AI Hotkey</Label>
                  <Select value={settings.hotkey} onValueChange={(value) => updateSetting("hotkey", value)}>
                    <SelectTrigger className="bg-gray-800 border-gray-600">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent className="bg-gray-800 border-gray-600">
                      <SelectItem value="ctrl+enter">Ctrl + Enter</SelectItem>
                      <SelectItem value="ctrl+space">Ctrl + Space</SelectItem>
                      <SelectItem value="alt+a">Alt + A</SelectItem>
                      <SelectItem value="cmd+j">Cmd + J</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Notifications</Label>
                    <p className="text-xs text-gray-400">Show system notifications</p>
                  </div>
                  <Switch
                    checked={settings.notifications}
                    onCheckedChange={(checked) => updateSetting("notifications", checked)}
                  />
                </div>
              </div>
            </div>

{/* AI Configuration */}
            <div>
              <div className="flex items-center gap-2 mb-4">
                <Database className="h-4 w-4 text-cyan-400" />
                <h3 className="text-lg font-medium">AI Configuration</h3>
              </div>

<div className="space-y-4">
                <div>
                  <Label className="text-sm font-medium mb-2 block">AI Model</Label>
                  <Select value={settings.aiModel} onValueChange={(value) => updateSetting("aiModel", value)}>
                    <SelectTrigger className="bg-gray-800 border-gray-600">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent className="bg-gray-800 border-gray-600">
                      <SelectItem value="gpt-4o">GPT-4o (Recommended)</SelectItem>
                      <SelectItem value="gpt-4">GPT-4</SelectItem>
                      <SelectItem value="claude-3">Claude 3</SelectItem>
                      <SelectItem value="gemini-pro">Gemini Pro</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div>
                  <Label className="text-sm font-medium mb-2 block">Response Speed</Label>
                  <Select
                    value={settings.responseSpeed}
                    onValueChange={(value) => updateSetting("responseSpeed", value)}
                  >
                    <SelectTrigger className="bg-gray-800 border-gray-600">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent className="bg-gray-800 border-gray-600">
                      <SelectItem value="fast">Fast (Less accurate)</SelectItem>
                      <SelectItem value="balanced">Balanced</SelectItem>
                      <SelectItem value="thorough">Thorough (More accurate)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </div>
          </div>

{/* Footer */}
          <div className="flex justify-end gap-2 mt-8 pt-4 border-t border-gray-700">
            <Button variant="outline" onClick={onClose} className="border-gray-600 text-gray-300 hover:bg-white/10">
              Cancel
            </Button>
            <Button onClick={onClose} className="bg-blue-600 hover:bg-blue-700">
              Save Settings
            </Button>
          </div>
        </div>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/top-floating-toolbar.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  Mic,
  MicOff,
  Sparkles,
  MessageSquare,
  EyeOff,
  Timer,
  Activity,
  BotIcon as Robot,
  MoreVertical,
} from "lucide-react"
import { AllRounderDropdownMenu } from "@/components/all-rounder-dropdown-menu"
import { cn } from "@/lib/utils"

interface TopFloatingToolbarProps {
  sessionTime: string
  isListening: boolean
  isAnalyzing: boolean
  isSimulated?: boolean
  hasFirstResponse: boolean
  opacity: number
  onMicToggle: () => void
  onAskAI: () => void
  onOpenChat: () => void
  onToggleRightPanel: () => void
  onToggleVisibility: () => void
  onMicHover: (isHovering: boolean) => void
  onOpenPersonalize: () => void
}

export function TopFloatingToolbar({
  sessionTime,
  isListening,
  isAnalyzing,
  isSimulated = false,
  hasFirstResponse,
  opacity,
  onMicToggle,
  onAskAI,
  onOpenChat,
  onToggleRightPanel,
  onToggleVisibility,
  onMicHover,
  onOpenPersonalize,
}: TopFloatingToolbarProps) {
  const [showDropdown, setShowDropdown] = useState(false)

return (
    <div className="fixed top-4 left-1/2 -translate-x-1/2 pointer-events-auto z-50">
      {/* Main Toolbar - Black Background with Configurable Opacity */}
      <div
        className="bg-black backdrop-blur-xl border border-gray-700/50 rounded-full px-4 py-2 shadow-2xl"
        style={{ opacity: opacity / 100 }}
      >
        <div className="flex items-center gap-3">
          {/* Ask AI / Ask Follow-Up */}
          <Button
            onClick={onAskAI}
            disabled={isAnalyzing}
            className="bg-gray-800/50 hover:bg-gray-700/70 text-white rounded-full font-medium text-sm px-4 py-1.5 border border-gray-600/30"
          >
            {isAnalyzing ? (
              <>
                <Activity className="h-3 w-3 mr-1.5 animate-pulse" />
                Analyzing...
              </>
            ) : (
              <>
                <Sparkles className="h-3 w-3 mr-1.5" />
                {hasFirstResponse ? "Ask Follow-Up" : "Ask AI"}
              </>
            )}
            <Badge variant="secondary" className="ml-2 bg-gray-900/50 text-gray-300 text-xs px-1.5 py-0.5">
              Ctrl ⏎
            </Badge>
          </Button>

{/* Chat */}
          <Button
            onClick={onOpenChat}
            className="bg-gray-800/50 hover:bg-gray-700/70 text-white rounded-full font-medium text-sm px-4 py-1.5 border border-gray-600/30"
          >
            <MessageSquare className="h-3 w-3 mr-1.5" />
            Chat
            <Badge variant="secondary" className="ml-2 bg-gray-900/50 text-gray-300 text-xs px-1.5 py-0.5">
              Ctrl C ↑
            </Badge>
          </Button>

{/* Show/Hide */}
          <Button
            onClick={onToggleVisibility}
            className="bg-gray-800/50 hover:bg-gray-700/70 text-white rounded-full font-medium text-sm px-4 py-1.5 border border-gray-600/30"
          >
            <EyeOff className="h-3 w-3 mr-1.5" />
            Show/Hide
            <Badge variant="secondary" className="ml-2 bg-gray-900/50 text-gray-300 text-xs px-1.5 py-0.5">
              Ctrl B
            </Badge>
          </Button>

{/* Timer */}
          <div className="flex items-center gap-1.5 text-white font-mono text-sm px-3">
            <Timer className="h-3 w-3" />
            <span>{sessionTime}</span>
          </div>

{/* Microphone */}
          <div className="relative" onMouseEnter={() => onMicHover(true)} onMouseLeave={() => onMicHover(false)}>
            <Button
              onClick={onMicToggle}
              className={cn(
                "bg-gray-800/50 hover:bg-gray-700/70 text-white rounded-full relative border border-gray-600/30 p-2",
                isListening && !isSimulated ? "bg-red-600/80 border-red-400/50" : "",
                isListening && isSimulated ? "bg-blue-600/80 border-blue-400/50" : "",
              )}
            >
              {isListening ? (
                isSimulated ? (
                  <Robot className="h-4 w-4" />
                ) : (
                  <Mic className="h-4 w-4" />
                )
              ) : (
                <MicOff className="h-4 w-4" />
              )}
              {isListening && (
                <span className="absolute -top-1 -right-1 flex h-3 w-3">
                  <span
                    className={`animate-ping absolute inline-flex h-full w-full rounded-full ${
                      isSimulated ? "bg-blue-300" : "bg-red-300"
                    } opacity-75`}
                  ></span>
                  <span
                    className={`relative inline-flex rounded-full h-3 w-3 ${
                      isSimulated ? "bg-blue-400" : "bg-red-400"
                    }`}
                  ></span>
                </span>
              )}
            </Button>
          </div>

{/* Menu Dropdown */}
          <div className="relative">
            <Button
              onClick={() => setShowDropdown(!showDropdown)}
              className="bg-gray-800/50 hover:bg-gray-700/70 text-white rounded-full border border-gray-600/30 p-2"
            >
              <MoreVertical className="h-4 w-4" />
            </Button>

{showDropdown && (
              <AllRounderDropdownMenu
                onClose={() => setShowDropdown(false)}
                onToggleRightPanel={onToggleRightPanel}
                onOpenPersonalize={onOpenPersonalize}
              />
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/transcript-popup.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { ChevronDown, ChevronUp } from "lucide-react"

interface TranscriptPopupProps {
  transcript: string
  onAskAI: () => void
}

export function TranscriptPopup({ transcript, onAskAI }: TranscriptPopupProps) {
  const [time, setTime] = useState("01:40")

// Update timer
  useEffect(() => {
    const timer = setInterval(() => {
      const date = new Date()
      const minutes = date.getMinutes().toString().padStart(2, "0")
      const seconds = date.getSeconds().toString().padStart(2, "0")
      setTime(`${minutes}:${seconds}`)
    }, 1000)

return () => clearInterval(timer)
  }, [])

return (
    <div className="fixed left-1/2 top-1/3 -translate-x-1/2 z-50">
      <Card className="w-[400px] bg-gray-900/95 backdrop-blur-md border border-gray-700/50 text-white shadow-2xl">
        <div className="p-4">
          {/* Header */}
          <div className="text-center mb-4">
            <h2 className="text-lg font-semibold text-green-400">All-rounder is listening...</h2>
          </div>

{/* Transcript */}
          <ScrollArea className="bg-gray-800/50 rounded-lg p-3 mb-4 h-[300px]">
            <p className="text-gray-300 text-sm mb-4">
              {transcript ||
                "This is a web-based simulation of the 'All-rounder' desktop AI assistant. In a real desktop application (Electron/Tauri): The control panel would be truly **floating, always-on-top, and repositionable**. **Screen content** would be automatically analyzed via OCR/context detection. **Ambient audio** would be passively listened to via OS-level microphone access. The app would be **invisible in screen shares/recordings**."}
            </p>

{/* Timer */}
            <div className="flex justify-center my-4">
              <Badge variant="outline" className="bg-gray-800/70 text-gray-300 px-4 py-1 text-lg">
                {time}
              </Badge>
            </div>

{/* Suggested Context */}
            <div className="space-y-2">
              <div className="text-xs text-gray-500 mb-2">**Keyboard Shortcuts (Simulated):**</div>
              <div className="text-xs text-gray-400">
                • Ctrl + B: Toggle Show/Hide Overlay
                <br />• Ctrl + Enter: Ask AI (for screen content answer)
                <br />• Ctrl + Shift + S: Start Over (simulated for Ctrl + Windows)
                <br />• Ctrl + Shift + C: Open Chat (simulated for Ctrl + Arrow Up + Enter)
              </div>
            </div>
          </ScrollArea>

{/* Scroll Controls */}
          <div className="flex justify-center gap-2 mb-3">
            <Button variant="outline" size="sm" className="border-gray-600 text-gray-300 hover:bg-white/10">
              <ChevronUp className="h-4 w-4" />
            </Button>
            <Button variant="outline" size="sm" className="border-gray-600 text-gray-300 hover:bg-white/10">
              <ChevronDown className="h-4 w-4" />
            </Button>
          </div>

{/* Footer */}
          <div className="text-center text-sm text-gray-400">
            <p>Press Control+Enter to ask AI</p>
          </div>
        </div>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/badge.tsx"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/button.tsx"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/card.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-lg border bg-card text-card-foreground shadow-sm",
      className
    )}
    {...props}
  />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-2xl font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}
  />
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/ui/input.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva(
  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
    VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
    className={cn(labelVariants(), className)}
    {...props}
  />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx"
"use client"

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
      className,
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/ui/separator.tsx"
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
  (
    { className, orientation = "horizontal", decorative = true, ...props },
    ref
  ) => (
    <SeparatorPrimitive.Root
      ref={ref}
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
        className
      )}
      {...props}
    />
  )
)
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/slider.tsx"
"use client"

import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

import { cn } from "@/lib/utils"

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SliderPrimitive.Root
    ref={ref}
    className={cn("relative flex w-full touch-none select-none items-center", className)}
    {...props}
  >
    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
      <SliderPrimitive.Range className="absolute h-full bg-primary" />
    </SliderPrimitive.Track>
    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
  </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx"
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className,
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="components/unified-ai-response-overlay.tsx"
"use client"

interface UnifiedAIResponseOverlayProps {
  screenContent: string
  audioContext: string
  transcript: string
  inputSource: "audio" | "screen" | null
  isAnalyzing: boolean
  onClose: () => void
  onStartOver: () => void
}

export function UnifiedAIResponseOverlay({
  screenContent,
  audioContext,
  transcript,
  inputSource,
  isAnalyzing,
  onClose,
  onStartOver,
}: UnifiedAIResponseOverlayProps) {
  const [response, setResponse] = useState("")
  const [analysisComplete, setAnalysisComplete] = useState(false)

useEffect(() => {
    setResponse("")
    setAnalysisComplete(false)

const analyzeContent = async () => {
      console.log(`🔍 Starting ${inputSource} analysis`)
      await new Promise((resolve) => setTimeout(resolve, 1000))

const aiResponse = generateIntelligentResponse(inputSource, screenContent, audioContext, transcript)
      setResponse(aiResponse)
      setAnalysisComplete(true)
      console.log("✅ Analysis complete")
    }

analyzeContent()
  }, [screenContent, audioContext, transcript, inputSource])

const generateIntelligentResponse = (
    source: "audio" | "screen" | null,
    screen: string,
    audio: string,
    transcriptText: string,
  ) => {
    const sourceText = source === "audio" ? "audio input" : "screen analysis"

if (source === "audio") {
      const audioInput = transcriptText || audio
      const cleanAudio = audioInput.replace("🎤 LIVE: ", "").replace("🤖 SIMULATED: ", "").trim()

if (cleanAudio.toLowerCase().includes("capital") || cleanAudio.toLowerCase().includes("india")) {
        return `**New Delhi is the capital of India.**

• Serves as the seat of all three branches of the Government of India
• Major administrative and political hub  
• Hosts Rashtrapati Bhavan, Parliament House, and Supreme Court

New Delhi became the capital in1911, replacing Calcutta (now Kolkata). It is the center for national government and international diplomacy.`
      }

return `Based on your audio input: "${cleanAudio}"

I've analyzed what you said and here's my response:

**Audio Analysis:**
• Your voice input was successfully captured and processed
• I detected your question/request about: ${cleanAudio.slice(0, 100)}...

**Response:**
I understand you're asking about this topic. Based on your audio input, I can provide relevant information and assistance.

How can I help you further with this topic?`
    } else {
      if (screen.toLowerCase().includes("v0") || screen.toLowerCase().includes("chat")) {
        return `Based on screen analysis of your current window:

I can see you're working with a development interface, specifically what appears to be v0.dev or a similar chat-based development tool.

**Screen Content Analysis:**
• You're in a development environment
• There are chat conversations visible
• Code blocks and technical discussions are present
• Multiple browser tabs are open including development tools

**Current Context:**
• Working on an "All-rounder desktop assistant" project
• Implementing AI features and voice commands
• Using modern web development tools and frameworks

Would you like me to help with specific aspects of your development work or answer questions about what's visible on your screen?`
      }

return `Based on screen analysis of your current window:

I've analyzed what's currently visible on your screen and can provide contextual assistance.

**Screen Content Summary:**
• Page/Application: ${document.title || "Current webpage"}
• Content Type: ${screen.includes("search") ? "Search results" : "Informational content"}
• Key Elements: Interactive elements, text content, and navigation options

**Analysis Results:**
The screen shows content that appears to be related to productivity, development, or information browsing. I can help you understand, summarize, or work with what's currently displayed.

What specific aspect of your screen content would you like me to help you with?`
    }
  }

const getInputSourceIcon = () => {
    switch (inputSource) {
      case "audio":
        return <Mic className="h-4 w-4 text-blue-400" />
      case "screen":
        return <Monitor className="h-4 w-4 text-green-400" />
      default:
        return <Activity className="h-4 w-4 text-gray-400" />
    }
  }

const getInputSourceColor = () => {
    switch (inputSource) {
      case "audio":
        return "text-blue-400"
      case "screen":
        return "text-green-400"
      default:
        return "text-gray-400"
    }
  }

return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm pointer-events-auto z-50 flex items-center justify-center p-6">
      <Card className="w-full max-w-4xl h-[80vh] bg-gray-900/95 backdrop-blur-xl border border-gray-700/50 text-white shadow-2xl rounded-2xl overflow-hidden">
        <div className="p-6 h-full flex flex-col">
          {/* Header - Cluely Style */}
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center gap-3">
              <Sparkles className="h-6 w-6 text-gray-300" />
              <h2 className="text-2xl font-bold text-gray-300">AI Response</h2>
              {inputSource && (
                <Badge className={`bg-black/50 ${getInputSourceColor()}`}>
                  {getInputSourceIcon()}
                  <span className="ml-1 capitalize">{inputSource} Input</span>
                </Badge>
              )}
            </div>
            <div className="flex gap-2">
              {/* Clear Button - Cluely Style */}
              <Button
                onClick={onClose}
                variant="outline"
                size="sm"
                className="border-gray-600 text-gray-300 hover:bg-white/10 rounded-full"
              >
                <XCircle className="h-4 w-4 mr-1" />
                Clear
              </Button>
              <Button variant="ghost" size="sm" onClick={onClose} className="text-gray-400 hover:text-white rounded-lg">
                <X className="h-5 w-5" />
              </Button>
            </div>
          </div>

{/* Main Content Area */}
          <div className="flex-1">
            {response ? (
              <div className="bg-black/50 rounded-xl p-6 h-full flex flex-col">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-xl font-semibold text-gray-200">
                    {inputSource === "audio" ? "Capital of India" : "Screen Analysis Result"}
                  </h3>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => navigator.clipboard.writeText(response)}
                    className="text-gray-400 hover:text-white"
                  >
                    <Copy className="h-4 w-4" />
                  </Button>
                </div>
                <ScrollArea className="flex-1">
                  <div className="text-gray-300 leading-relaxed whitespace-pre-line space-y-4">
                    {response.split("\n").map((line, index) => (
                      <p
                        key={index}
                        className={
                          line.startsWith("•") ? "ml-4" : line.startsWith("**") ? "font-semibold text-white" : ""
                        }
                      >
                        {line}
                      </p>
                    ))}
                  </div>
                </ScrollArea>
                <div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-700/50">
                  <span className="text-xs text-gray-500">Was this analysis helpful?</span>
                  <Button variant="ghost" size="sm" className="text-gray-400 hover:text-gray-300">
                    <ThumbsUp className="h-3 w-3" />
                  </Button>
                  <Button variant="ghost" size="sm" className="text-gray-400 hover:text-gray-300">
                    <ThumbsDown className="h-3 w-3" />
                  </Button>
                </div>
              </div>
            ) : (
              <div className="bg-black/30 rounded-xl p-8 h-full flex items-center justify-center">
                <div className="text-center">
                  <Activity className="h-8 w-8 text-blue-400 animate-pulse mx-auto mb-4" />
                  <p className="text-gray-400">
                    Analyzing {inputSource === "audio" ? "audio input" : "screen content"}...
                  </p>
                  <p className="text-sm text-gray-500 mt-2">This will only take a moment</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/voice-commands-panel.tsx"
"use client"

import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Button } from "@/components/ui/button"
import type { VoiceCommand } from "@/hooks/use-voice-commands"
import { Mic, X, Sparkles, MessageSquare, Eye, Settings } from "lucide-react"

interface VoiceCommandsPanelProps {
  commands: VoiceCommand[]
  onClose: () => void
  lastDetectedCommand?: { command: VoiceCommand; phrase: string; timestamp: number }
}

export function VoiceCommandsPanel({ commands, onClose, lastDetectedCommand }: VoiceCommandsPanelProps) {
  const groupedCommands = commands.reduce(
    (acc, command) => {
      if (!acc[command.category]) {
        acc[command.category] = []
      }
      acc[command.category].push(command)
      return acc
    },
    {} as Record<string, VoiceCommand[]>,
  )

const getCategoryIcon = (category: string) => {
    switch (category) {
      case "ai":
        return <Sparkles className="h-4 w-4 text-blue-400" />
      case "navigation":
        return <MessageSquare className="h-4 w-4 text-green-400" />
      case "control":
        return <Eye className="h-4 w-4 text-purple-400" />
      case "system":
        return <Settings className="h-4 w-4 text-orange-400" />
      default:
        return <Mic className="h-4 w-4 text-gray-400" />
    }
  }

const getCategoryColor = (category: string) => {
    switch (category) {
      case "ai":
        return "text-blue-400"
      case "navigation":
        return "text-green-400"
      case "control":
        return "text-purple-400"
      case "system":
        return "text-orange-400"
      default:
        return "text-gray-400"
    }
  }

return (
    <div className="fixed top-20 left-6 pointer-events-auto z-50">
      <Card className="w-80 bg-gray-900/95 backdrop-blur-xl border border-gray-700/50 text-white shadow-2xl rounded-2xl overflow-hidden">
        <div className="p-5">
          {/* Header */}
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-2">
              <Mic className="h-5 w-5 text-green-400" />
              <h3 className="text-lg font-semibold">Voice Commands</h3>
            </div>
            <Button variant="ghost" size="sm" onClick={onClose} className="text-gray-400 hover:text-white">
              <X className="h-4 w-4" />
            </Button>
          </div>

{/* Last Detected Command */}
          {lastDetectedCommand && (
            <div className="mb-4 p-3 bg-green-600/20 border border-green-500/30 rounded-lg">
              <div className="flex items-center gap-2 mb-1">
                <Badge className="bg-green-600/30 text-green-300">Command Detected</Badge>
              </div>
              <p className="text-sm text-green-200">"{lastDetectedCommand.phrase}"</p>
              <p className="text-xs text-green-400 mt-1">{lastDetectedCommand.command.description}</p>
            </div>
          )}

{/* Commands List */}
          <ScrollArea className="h-96">
            <div className="space-y-4">
              {Object.entries(groupedCommands).map(([category, categoryCommands]) => (
                <div key={category}>
                  <div className="flex items-center gap-2 mb-2">
                    {getCategoryIcon(category)}
                    <h4 className={`font-medium capitalize ${getCategoryColor(category)}`}>{category}</h4>
                  </div>
                  <div className="space-y-2 ml-6">
                    {categoryCommands.map((command, index) => (
                      <div key={index} className="bg-black/30 rounded-lg p-3">
                        <p className="text-sm text-gray-300 mb-1">{command.description}</p>
                        <div className="flex flex-wrap gap-1">
                          {command.phrases.map((phrase, phraseIndex) => (
                            <Badge
                              key={phraseIndex}
                              variant="outline"
                              className="text-xs border-gray-600 text-gray-400"
                            >
                              "{phrase}"
                            </Badge>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </ScrollArea>

{/* Instructions */}
          <div className="mt-4 text-xs text-gray-500 space-y-1">
            <p>• Speak any of the phrases above while microphone is active</p>
            <p>• Commands have a 3-second cooldown to prevent spam</p>
            <p>• Works with both real microphone and simulation mode</p>
          </div>
        </div>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/voice-listening-popup.tsx"
"use client"

import type React from "react"

interface VoiceListeningPopupProps {
  transcript: string
  sessionTime: string
  onAskAI: () => void
  isSimulated?: boolean
  onShowCommands?: () => void
  lastDetectedCommand?: { command: any; phrase: string; timestamp: number }
  isListening: boolean
}

export function VoiceListeningPopup({
  transcript,
  sessionTime,
  onAskAI,
  isSimulated = false,
  onShowCommands,
  lastDetectedCommand,
  isListening,
}: VoiceListeningPopupProps) {
  const [followUpQuery, setFollowUpQuery] = useState("")
  const [showFollowUp, setShowFollowUp] = useState(false)
  const [scrollPosition, setScrollPosition] = useState(0)

// Show follow-up input when listening stops and we have transcript
  useEffect(() => {
    if (!isListening && transcript && transcript.trim()) {
      setShowFollowUp(true)
      // Auto-populate with a follow-up question based on transcript
      if (transcript.toLowerCase().includes("capital")) {
        setFollowUpQuery("Tell me more about this capital city")
      } else if (transcript.toLowerCase().includes("weather")) {
        setFollowUpQuery("What's the forecast for tomorrow?")
      } else {
        setFollowUpQuery("Can you explain this in more detail?")
      }
    } else if (isListening) {
      setShowFollowUp(false)
      setFollowUpQuery("")
    }
  }, [isListening, transcript])

const handleScrollUp = () => {
    setScrollPosition(Math.max(0, scrollPosition - 50))
  }

const handleScrollDown = () => {
    setScrollPosition(scrollPosition + 50)
  }

const handleFollowUpSubmit = () => {
    if (followUpQuery.trim()) {
      onAskAI()
      setShowFollowUp(false)
    }
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
      e.preventDefault()
      handleFollowUpSubmit()
    }
  }

return (
    <div className="fixed top-20 right-6 pointer-events-auto z-50">
      <Card
        className={`w-[420px] bg-gray-900/95 backdrop-blur-xl border-2 ${
          isSimulated ? "border-blue-500/50" : isListening ? "border-green-500/50" : "border-purple-500/50"
        } text-white shadow-2xl rounded-2xl overflow-hidden`}
      >
        <div className="p-5">
          {/* Header */}
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="relative">
                {isSimulated ? (
                  <Robot className="h-6 w-6 text-blue-400" />
                ) : isListening ? (
                  <Volume2 className="h-6 w-6 text-green-400" />
                ) : (
                  <Sparkles className="h-6 w-6 text-purple-400" />
                )}
                {isListening && (
                  <span className="absolute -top-1 -right-1 flex h-3 w-3">
                    <span
                      className={`animate-ping absolute inline-flex h-full w-full rounded-full ${
                        isSimulated ? "bg-blue-400" : "bg-red-400"
                      } opacity-75`}
                    ></span>
                    <span
                      className={`relative inline-flex rounded-full h-3 w-3 ${
                        isSimulated ? "bg-blue-500" : "bg-red-500"
                      }`}
                    ></span>
                  </span>
                )}
              </div>
              <h2
                className={`text-xl font-bold ${
                  isSimulated
                    ? "text-blue-400"
                    : isListening
                      ? "text-green-400"
                      : showFollowUp
                        ? "text-purple-400"
                        : "text-gray-400"
                }`}
              >
                {isSimulated
                  ? "🤖 AR is simulating..."
                  : isListening
                    ? "🎤 AR is listening..."
                    : showFollowUp
                      ? "💭 Ready for follow-up"
                      : "🎤 AR Assistant"}
              </h2>
            </div>

<div className="flex gap-2">
              {isSimulated && (
                <Badge className="bg-blue-900/30 text-blue-300 border border-blue-500/30">Simulation Mode</Badge>
              )}
              {onShowCommands && (
                <Button
                  variant="outline"
                  size="sm"
                  onClick={onShowCommands}
                  className="border-gray-600 text-gray-300 hover:bg-white/10"
                >
                  <Command className="h-4 w-4 mr-1" />
                  Commands
                </Button>
              )}
            </div>
          </div>

{/* Last Detected Command */}
          {lastDetectedCommand && Date.now() - lastDetectedCommand.timestamp < 5000 && (
            <div className="mb-3 p-2 bg-green-600/20 border border-green-500/30 rounded-lg">
              <div className="flex items-center gap-2">
                <Command className="h-3 w-3 text-green-400" />
                <span className="text-xs text-green-300">Command: "{lastDetectedCommand.phrase}"</span>
              </div>
            </div>
          )}

{/* Live Transcription */}
          <div
            className={`${
              isSimulated
                ? "bg-blue-950/30 border-blue-600/30"
                : isListening
                  ? "bg-black/70 border-gray-600"
                  : "bg-purple-950/30 border-purple-600/30"
            } rounded-xl p-4 mb-4 relative border`}
          >
            <div className="flex items-center gap-2 mb-2">
              {isSimulated ? (
                <Robot className="h-4 w-4 text-blue-400" />
              ) : isListening ? (
                <Mic className="h-4 w-4 text-red-400 animate-pulse" />
              ) : (
                <Sparkles className="h-4 w-4 text-purple-400" />
              )}
              <span className="text-sm font-medium text-gray-300">
                {isSimulated ? "Simulated Speech" : isListening ? "Live Transcript" : "Captured Speech"}
              </span>
            </div>
            <ScrollArea className="h-40" style={{ scrollTop: scrollPosition }}>
              <p
                className={`leading-relaxed text-sm ${
                  isSimulated ? "text-blue-200" : isListening ? "text-gray-200" : "text-purple-200"
                }`}
              >
                {transcript ||
                  (isSimulated
                    ? "🤖 Generating simulated speech... Try saying voice commands like 'ask AI', 'open chat', or 'show commands'."
                    : isListening
                      ? "🎤 Listening for your voice... Try saying voice commands like 'ask AI', 'open chat', or 'show commands'."
                      : "🎤 Click microphone to start listening...")}
              </p>
            </ScrollArea>

{/* Scroll Controls */}
            <div className="absolute right-2 top-1/2 -translate-y-1/2 flex flex-col gap-1">
              <Button
                variant="ghost"
                size="sm"
                onClick={handleScrollUp}
                className="h-6 w-6 p-0 bg-black/50 text-gray-400 hover:text-white rounded-full"
              >
                <ChevronUp className="h-4 w-4" />
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={handleScrollDown}
                className="h-6 w-6 p-0 bg-black/50 text-gray-400 hover:text-white rounded-full"
              >
                <ChevronDown className="h-4 w-4" />
              </Button>
            </div>
          </div>

{/* Timer */}
          <div className="flex justify-center mb-4">
            <Badge
              className={`${
                isSimulated
                  ? "bg-blue-950/50 text-blue-400 border border-blue-500/30"
                  : isListening
                    ? "bg-black text-green-400"
                    : "bg-purple-950/50 text-purple-400 border border-purple-500/30"
              } px-4 py-2 text-lg font-mono rounded-xl`}
            >
              {sessionTime}
            </Badge>
          </div>

{/* Follow-up Input (Cluely-style) */}
          {showFollowUp && (
            <div className="space-y-3 mb-4">
              <div className="bg-purple-950/30 border border-purple-600/30 rounded-xl p-4">
                <p className="text-sm text-purple-300 mb-3">💭 Ask a follow-up question:</p>
                <Input
                  value={followUpQuery}
                  onChange={(e) => setFollowUpQuery(e.target.value)}
                  onKeyDown={handleKeyDown}
                  placeholder="What would you like to know more about?"
                  className="bg-black/50 border-purple-600/50 text-purple-200 placeholder-purple-400 mb-3"
                />
                <div className="flex items-center justify-between">
                  <p className="text-xs text-purple-400">Press Control+Enter to ask AI</p>
                  <Button
                    onClick={handleFollowUpSubmit}
                    disabled={!followUpQuery.trim()}
                    className="bg-purple-600 hover:bg-purple-700 text-white text-sm px-4 py-1"
                  >
                    <Sparkles className="h-3 w-3 mr-1" />
                    Ask AI
                  </Button>
                </div>
              </div>
            </div>
          )}

{/* Voice Commands Quick Reference (only when listening) */}
          {isListening && (
            <div className="space-y-3 mb-4">
              <p className="text-sm text-gray-400 font-medium">🎙️ Try these voice commands:</p>
              <div className="grid grid-cols-2 gap-2">
                <Badge variant="outline" className="border-gray-600 text-gray-400 text-xs justify-center">
                  "ask AI"
                </Badge>
                <Badge variant="outline" className="border-gray-600 text-gray-400 text-xs justify-center">
                  "start over"
                </Badge>
                <Badge variant="outline" className="border-gray-600 text-gray-400 text-xs justify-center">
                  "show commands"
                </Badge>
                <Badge variant="outline" className="border-gray-600 text-gray-400 text-xs justify-center">
                  "hide interface"
                </Badge>
              </div>
            </div>
          )}

{/* Footer */}
          <div className="text-center">
            {showFollowUp ? (
              <p className="text-sm text-purple-400">
                🎯 Type your question above and press <kbd className="bg-purple-900/50 px-1 rounded">Ctrl+Enter</kbd>
              </p>
            ) : (
              <>
                <p className="text-sm text-gray-400 mb-3">
                  🎯 Press <kbd className="bg-gray-800 px-1 rounded">Ctrl+Enter</kbd> to ask AI •{" "}
                  <kbd className="bg-gray-800 px-1 rounded">Ctrl+H</kbd> to start over
                </p>
                <Button
                  onClick={onAskAI}
                  className={`${
                    isSimulated ? "bg-blue-600 hover:bg-blue-700" : "bg-green-600 hover:bg-green-700"
                  } text-white rounded-xl font-medium px-6 py-2`}
                >
                  🤖 Ask AI Now
                </Button>
              </>
            )}
          </div>
        </div>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="hooks/use-audio-listener.ts"
"use client"

import { useState, useEffect, useRef } from "react"

export function useAudioListener(isListening: boolean) {
  const [audioContext, setAudioContext] = useState("")
  const [transcript, setTranscript] = useState("")
  const [isRecording, setIsRecording] = useState(false)
  const [error, setError] = useState("")
  const [isSimulated, setIsSimulated] = useState(false)
  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
  const recognitionRef = useRef<any>(null)
  const simulationIntervalRef = useRef<NodeJS.Timeout | null>(null)
  const attemptCountRef = useRef(0)

// Check if browser supports speech recognition
  const getSpeechRecognition = () => {
    if (typeof window === "undefined") return null
    return window.SpeechRecognition || (window as any).webkitSpeechRecognition || null
  }

const startSimulation = () => {
    console.log("🤖 Starting simulation mode")
    setIsSimulated(true)
    setIsRecording(true)
    setError("")

const mockTranscripts = [
      "Hello, this is a simulated transcript because your microphone isn't working properly.",
      "I planned all preparations. Four weeks from now is probably the earliest possible date.",
      "I'd like you to meet with two of my managers to discuss opinions about the meeting's location and timing.",
      "We need to finalize the project timeline by next Friday. The client is expecting a full report.",
      "Let's review the quarterly numbers before the board meeting. Sales are up 15% but we're seeing some concerning trends.",
      "The weather today is quite nice. I think we should have our meeting outdoors.",
      "This simulation allows you to test the interface even when the real microphone has issues.",
      "You can still use all the features with this simulated speech data.",
    ]

// Set initial transcript immediately
    const initialTranscript = mockTranscripts[0]
    setTranscript("🤖 " + initialTranscript)
    setAudioContext("🤖 SIMULATED: " + initialTranscript)

let transcriptIndex = 1

// Clear any existing simulation
    if (simulationIntervalRef.current) {
      clearInterval(simulationIntervalRef.current)
    }

// Update transcript every 4 seconds
    const interval = setInterval(() => {
      if (isListening && transcriptIndex < mockTranscripts.length) {
        const newTranscript = mockTranscripts[transcriptIndex]
        setTranscript("🤖 " + newTranscript)
        setAudioContext("🤖 SIMULATED: " + newTranscript)
        console.log("🤖 Simulation transcript updated:", newTranscript)
        transcriptIndex++
      } else if (transcriptIndex >= mockTranscripts.length) {
        // Loop back to beginning
        transcriptIndex = 0
      }
    }, 4000)

simulationIntervalRef.current = interval
  }

const stopAllRecording = () => {
    console.log("🎤 Stopping all recording")

// Stop speech recognition
    if (recognitionRef.current) {
      try {
        recognitionRef.current.stop()
        recognitionRef.current.abort()
      } catch (e) {
        console.log("🎤 Error stopping recognition:", e)
      }
      recognitionRef.current = null
    }

// Stop media recorder
    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
      try {
        mediaRecorderRef.current.stop()
      } catch (e) {
        console.log("🎤 Error stopping media recorder:", e)
      }
      mediaRecorderRef.current = null
    }

// Stop simulation
    if (simulationIntervalRef.current) {
      clearInterval(simulationIntervalRef.current)
      simulationIntervalRef.current = null
    }

setIsRecording(false)
    setIsSimulated(false)
    attemptCountRef.current = 0
  }

const SpeechRecognition = getSpeechRecognition()
  const microphoneSupported =
    typeof window !== "undefined" &&
    "mediaDevices" in navigator &&
    "getUserMedia" in navigator.mediaDevices &&
    Boolean(SpeechRecognition)

useEffect(() => {
    console.log("🎤 Audio listener effect triggered, isListening:", isListening)

if (!isListening) {
      stopAllRecording()
      setAudioContext("")
      setTranscript("")
      return
    }

// Reset attempt counter
    attemptCountRef.current = 0

// If no speech recognition support, go straight to simulation
    if (!SpeechRecognition) {
      console.log("🎤 No speech recognition support, starting simulation")
      setError("Speech recognition not supported - using simulation")
      startSimulation()
      return
    }

// Try real microphone first, but with a timeout
    const tryRealMicrophone = async () => {
      try {
        console.log("🎤 Attempting real microphone access...")

// Set a timeout for microphone access
        const timeoutPromise = new Promise((_, reject) => {
          setTimeout(() => reject(new Error("Microphone access timeout")), 3000)
        })

const streamPromise = navigator.mediaDevices.getUserMedia({
          audio: {
            echoCancellation: true,
            noiseSuppression: true,
            autoGainControl: true,
          },
        })

const stream = (await Promise.race([streamPromise, timeoutPromise])) as MediaStream

console.log("🎤 Microphone access granted")
        setIsSimulated(false)

const recognition = new SpeechRecognition()
        recognition.continuous = true
        recognition.interimResults = true
        recognition.lang = "en-US"

recognition.onstart = () => {
          console.log("🎤 Speech recognition started successfully")
          setIsRecording(true)
          setAudioContext("🎤 Listening... Speak now!")
          setError("")
        }

recognition.onresult = (event: any) => {
          console.log("🎤 Speech recognition result received")
          let finalTranscript = ""
          let interimTranscript = ""

for (let i = event.resultIndex; i < event.results.length; i++) {
            const transcript = event.results[i][0].transcript
            if (event.results[i].isFinal) {
              finalTranscript += transcript
            } else {
              interimTranscript += transcript
            }
          }

const currentTranscript = finalTranscript || interimTranscript
          console.log("🎤 Real transcript:", currentTranscript)
          setTranscript(currentTranscript)
          setAudioContext(`🎤 LIVE: ${currentTranscript}`)
        }

recognition.onerror = (event: any) => {
          console.error("🎤 Speech recognition error:", event.error)
          attemptCountRef.current++

// If we've had multiple errors or specific error types, switch to simulation
          if (
            event.error === "aborted" ||
            event.error === "network" ||
            event.error === "not-allowed" ||
            attemptCountRef.current >= 2
          ) {
            console.log("🎤 Switching to simulation due to error:", event.error)
            setError(`Microphone error (${event.error}) - using simulation`)
            startSimulation()
          }
        }

recognition.onend = () => {
          console.log("🎤 Speech recognition ended")

if (isListening && !isSimulated) {
            attemptCountRef.current++

if (attemptCountRef.current < 3) {
              // Try to restart
              try {
                console.log("🎤 Attempting to restart speech recognition")
                setTimeout(() => {
                  if (recognitionRef.current && isListening) {
                    recognition.start()
                  }
                }, 500)
              } catch (e) {
                console.log("🎤 Failed to restart, switching to simulation")
                startSimulation()
              }
            } else {
              console.log("🎤 Too many restart attempts, switching to simulation")
              startSimulation()
            }
          }
        }

recognitionRef.current = recognition

try {
          recognition.start()
        } catch (e) {
          console.error("🎤 Failed to start recognition:", e)
          throw e
        }

// Stop the stream after setting up recognition
        stream.getTracks().forEach((track) => track.stop())
      } catch (err: any) {
        console.error("🎤 Real microphone failed:", err.message)
        setError(`Microphone failed: ${err.message} - using simulation`)
        startSimulation()
      }
    }

// Start with real microphone attempt
    tryRealMicrophone()

return () => {
      stopAllRecording()
    }
  }, [isListening])

return {
    audioContext,
    transcript,
    isRecording,
    error,
    isSimulated,
    microphoneSupported,
  }
}
[V0_FILE]typescript:file="hooks/use-hotkeys.ts"
"use client"

import { useEffect } from "react"

export function useHotkeys(keys: string, callback: () => void) {
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      const keyCombo = keys.toLowerCase().split("+")
      const pressedKeys = []

if (event.ctrlKey || event.metaKey) pressedKeys.push("ctrl")
      if (event.altKey) pressedKeys.push("alt")
      if (event.shiftKey) pressedKeys.push("shift")

// Handle special key combinations
      if (event.key === "Enter") pressedKeys.push("enter")
      else if (event.key === "ArrowDown") pressedKeys.push("down")
      else if (event.key === "ArrowUp") pressedKeys.push("up")
      else if (event.key === "\\") pressedKeys.push("\\")
      else if (event.key === "b") pressedKeys.push("b")
      else if (event.key === "c") pressedKeys.push("c")
      else if (event.key === "h") pressedKeys.push("h")
      else pressedKeys.push(event.key.toLowerCase())

const isMatch = keyCombo.every((key) => pressedKeys.includes(key)) && keyCombo.length === pressedKeys.length

if (isMatch) {
        event.preventDefault()
        callback()
      }
    }

window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [keys, callback])
}
[V0_FILE]typescript:file="hooks/use-screen-analyzer.ts"
"use client"

import { useState, useEffect } from "react"

export function useScreenAnalyzer() {
  const [screenContent, setScreenContent] = useState("")
  const [isAnalyzing, setIsAnalyzing] = useState(false)

useEffect(() => {
    const analyzeScreen = async () => {
      setIsAnalyzing(true)

// Enhanced screen analysis
      const analysis = () => {
        const currentUrl = window.location.href
        const pageTitle = document.title
        const visibleText = document.body.innerText.slice(0, 1000)
        const headings = Array.from(document.querySelectorAll("h1, h2, h3"))
          .map((h) => h.textContent)
          .join(", ")
        const links = Array.from(document.querySelectorAll("a"))
          .slice(0, 10)
          .map((a) => a.textContent)
          .join(", ")

let content = `Page: ${pageTitle}\nURL: ${currentUrl}\n\nMain headings: ${headings}\n\nVisible content: ${visibleText}\n\nKey links: ${links}`

// Enhanced pattern detection
        if (
          visibleText.toLowerCase().includes("global warming") ||
          visibleText.toLowerCase().includes("climate change")
        ) {
          content +=
            "\n\nDetected: Environmental/Climate content - user researching global warming and climate change topics"
        }
        if (visibleText.toLowerCase().includes("nasa") || visibleText.toLowerCase().includes("science")) {
          content += "\n\nDetected: Scientific content from authoritative sources"
        }
        if (visibleText.toLowerCase().includes("search results")) {
          content += "\n\nDetected: Search results page - user looking for information"
        }
        if (document.querySelectorAll("input, textarea").length > 0) {
          content += "\n\nDetected: Interactive elements - forms or input fields present"
        }

return content
      }

await new Promise((resolve) => setTimeout(resolve, 1000))
      setScreenContent(analysis())
      setIsAnalyzing(false)
    }

analyzeScreen()
    const interval = setInterval(analyzeScreen, 30000) // Update every 30 seconds

return () => clearInterval(interval)
  }, [])

return { screenContent, isAnalyzing }
}
[V0_FILE]typescript:file="hooks/use-screen-monitor.ts"
"use client"

import { useState, useEffect } from "react"

export function useScreenMonitor() {
  const [screenContent, setScreenContent] = useState("")

useEffect(() => {
    // Mock screen monitoring - in a real app, this would use native APIs
    const mockScreenContent = () => {
      const contexts = [
        "Code editor with TypeScript function",
        "Zoom meeting with 5 participants",
        "Email composition window",
        "Browser with documentation",
        "Terminal with error messages",
        "Presentation slides about AI",
      ]

setScreenContent(contexts[Math.floor(Math.random() * contexts.length)])
    }

// Simulate screen content updates
    const interval = setInterval(mockScreenContent, 5000)
    mockScreenContent() // Initial call

return () => clearInterval(interval)
  }, [])

return { screenContent }
}
[V0_FILE]typescript:file="hooks/use-voice-commands.ts"
"use client"

import { useEffect, useRef } from "react"

export interface VoiceCommand {
  phrases: string[]
  action: () => void
  description: string
  category: "navigation" | "ai" | "control" | "system"
}

interface UseVoiceCommandsProps {
  transcript: string
  isListening: boolean
  commands: VoiceCommand[]
  onCommandDetected?: (command: VoiceCommand, phrase: string) => void
}

export function useVoiceCommands({ transcript, isListening, commands, onCommandDetected }: UseVoiceCommandsProps) {
  const lastProcessedTranscript = useRef("")
  const commandCooldown = useRef<Set<string>>(new Set())

useEffect(() => {
    if (!isListening || !transcript || transcript === lastProcessedTranscript.current) {
      return
    }

// Only process new transcript content
    const newContent = transcript.replace(lastProcessedTranscript.current, "").toLowerCase().trim()
    if (!newContent) return

console.log("🎙️ Processing voice command:", newContent)

// Check for commands in the new content
    for (const command of commands) {
      for (const phrase of command.phrases) {
        const normalizedPhrase = phrase.toLowerCase()

// Check if the phrase is in the new content
        if (newContent.includes(normalizedPhrase)) {
          const commandKey = `${command.category}-${phrase}`

// Prevent rapid-fire commands (cooldown)
          if (commandCooldown.current.has(commandKey)) {
            continue
          }

console.log("🎙️ Voice command detected:", phrase)

// Execute the command
          command.action()

// Notify about command detection
          onCommandDetected?.(command, phrase)

// Add cooldown
          commandCooldown.current.add(commandKey)
          setTimeout(() => {
            commandCooldown.current.delete(commandKey)
          }, 3000) // 3 second cooldown

break // Only execute first matching command
        }
      }
    }

lastProcessedTranscript.current = transcript
  }, [transcript, isListening, commands, onCommandDetected])

// Clear processed transcript when listening stops
  useEffect(() => {
    if (!isListening) {
      lastProcessedTranscript.current = ""
      commandCooldown.current.clear()
    }
  }, [isListening])
}
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "latest",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "latest",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "latest",
    "@radix-ui/react-slider": "latest",
    "@radix-ui/react-slot": "latest",
    "@radix-ui/react-switch": "latest",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "15.2.4",
    "next-themes": "latest",
    "react": "^19",
    "react-day-picker": "8.10.1",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;
[V0_FILE]css:file="styles/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescript:file="tailwind.config.ts"
import type { Config } from "tailwindcss"

const config: Config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      fontFamily: {
        sans: ["-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif"],
      },
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

export default config
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]typescript:file="types/speech-recognition.d.ts"
// Enhanced TypeScript definitions for Web Speech API
interface SpeechRecognition extends EventTarget {
  continuous: boolean
  interimResults: boolean
  lang: string
  maxAlternatives: number
  serviceURI: string
  grammars: SpeechGrammarList
  start(): void
  stop(): void
  abort(): void
  onstart: ((this: SpeechRecognition, ev: Event) => any) | null
  onresult: ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => any) | null
  onerror: ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => any) | null
  onend: ((this: SpeechRecognition, ev: Event) => any) | null
  onnomatch: ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => any) | null
  onsoundstart: ((this: SpeechRecognition, ev: Event) => any) | null
  onsoundend: ((this: SpeechRecognition, ev: Event) => any) | null
  onspeechstart: ((this: SpeechRecognition, ev: Event) => any) | null
  onspeechend: ((this: SpeechRecognition, ev: Event) => any) | null
  onaudiostart: ((this: SpeechRecognition, ev: Event) => any) | null
  onaudioend: ((this: SpeechRecognition, ev: Event) => any) | null
}

interface SpeechRecognitionEvent extends Event {
  resultIndex: number
  results: SpeechRecognitionResultList
}

interface SpeechRecognitionErrorEvent extends Event {
  error:
    | "no-speech"
    | "aborted"
    | "audio-capture"
    | "network"
    | "not-allowed"
    | "service-not-allowed"
    | "bad-grammar"
    | "language-not-supported"
  message: string
}

interface SpeechRecognitionResultList {
  readonly length: number
  item(index: number): SpeechRecognitionResult
  [index: number]: SpeechRecognitionResult
}

interface SpeechRecognitionResult {
  readonly length: number
  item(index: number): SpeechRecognitionAlternative
  [index: number]: SpeechRecognitionAlternative
  readonly isFinal: boolean
}

interface SpeechRecognitionAlternative {
  readonly transcript: string
  readonly confidence: number
}

interface SpeechGrammarList {
  readonly length: number
  item(index: number): SpeechGrammar
  [index: number]: SpeechGrammar
  addFromURI(src: string, weight?: number): void
  addFromString(string: string, weight?: number): void
}

interface SpeechGrammar {
  src: string
  weight: number
}

declare var SpeechRecognition: {
  prototype: SpeechRecognition
  new (): SpeechRecognition
}

declare var webkitSpeechRecognition: {
  prototype: SpeechRecognition
  new (): SpeechRecognition
}

interface Window {
  SpeechRecognition: typeof SpeechRecognition
  webkitSpeechRecognition: typeof webkitSpeechRecognition
}
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_GJFr0UvBVam3ZOzMrdkkS08hodbo/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_GJFr0UvBVam3ZOzMrdkkS08hodbo/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_GJFr0UvBVam3ZOzMrdkkS08hodbo/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_GJFr0UvBVam3ZOzMrdkkS08hodbo/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_GJFr0UvBVam3ZOzMrdkkS08hodbo/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"</article></body></html>