clean up prompts and improve quality

components/VoiceSession.tsx

@@ -5,6 +5,7 @@ import { GoogleGenAI } from '@google/genai';
 import { SYSTEM_SUMMARY_ANALYSIS_PROMPT, CBT_ANALYSIS_SCHEMA } from '../constants';
 import { useLiveSession } from '../hooks/useLiveSession';
 import { AlertCircle, Settings2, X, BrainCircuit, Zap, Info } from 'lucide-react';
+import { Button } from './ui/button';
 
 // Sub-components
 import AudioVisualizer from './AudioVisualizer';
@@ -56,15 +57,15 @@ const VoiceSession: React.FC<VoiceSessionProps> = ({ scenario, onExit, voiceSett
 
   const handleFinishSession = useCallback(async () => {
     setStatus('analyzing');
-    
+
     if (sessionPromiseRef.current) {
       sessionPromiseRef.current.then(session => session.close());
     }
-    
+
     try {
       const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
       const transcriptText = messages.map(m => `[${m.role.toUpperCase()}]: ${m.text}`).join('\n');
-      
+
       const summaryPrompt = `${SYSTEM_SUMMARY_ANALYSIS_PROMPT}
 SCENARIO CONTEXT: ${scenario.title} - ${scenario.description}`;
 
@@ -105,10 +106,10 @@ SCENARIO CONTEXT: ${scenario.title} - ${scenario.description}`;
           <div className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80%] h-[80%] rounded-full blur-[100px] transition-all duration-1000 ${isAiSpeaking ? 'bg-blue-500 scale-110' : 'bg-teal-500 scale-100'}`}></div>
         </div>
 
-        <VoiceHeader 
-          title={scenario.title} 
-          onExit={onExit} 
-          onFinish={handleFinishSession} 
+        <VoiceHeader
+          title={scenario.title}
+          onExit={onExit}
+          onFinish={handleFinishSession}
         />
 
         <div className="flex-grow flex flex-col items-center justify-center p-12 relative z-10">
@@ -122,7 +123,7 @@ SCENARIO CONTEXT: ${scenario.title} - ${scenario.description}`;
               <p className="text-slate-400 text-sm mb-8 max-w-xs text-center leading-relaxed">
                 The simulation is ready. Press start to begin your interaction with <strong>{scenario.characterName}</strong>.
               </p>
-              
+
               <div className="bg-white/5 border border-white/10 rounded-2xl p-4 mb-8 flex items-center gap-3 max-w-sm">
                 <div className="bg-teal-500/20 p-2 rounded-lg">
                   <Info size={16} className="text-teal-400" />
@@ -132,13 +133,13 @@ SCENARIO CONTEXT: ${scenario.title} - ${scenario.description}`;
                 </p>
               </div>
 
-              <button 
+              <Button
                 onClick={handleStart}
-                className="bg-teal-600 hover:bg-teal-500 text-white px-12 py-4 rounded-2xl font-bold transition-all shadow-xl shadow-teal-900/20 uppercase tracking-widest text-sm flex items-center gap-3"
+                className="bg-teal-600 hover:bg-teal-500 text-white px-12 py-7 rounded-2xl font-bold transition-all shadow-xl shadow-teal-900/20 uppercase tracking-widest text-sm"
               >
-                <Zap size={18} fill="currentColor" />
+                <Zap size={18} fill="currentColor" className="mr-3" />
                 Start Session
-              </button>
+              </Button>
             </div>
           ) : (
             <>
@@ -151,12 +152,14 @@ SCENARIO CONTEXT: ${scenario.title} - ${scenario.description}`;
                     <div className="flex-grow">
                       <h4 className="text-sm font-bold">No Audio Detected</h4>
                       <p className="text-xs text-white/80 mt-1 leading-relaxed">We can't hear you. Please check your microphone or select a different input device.</p>
-                      <button 
+                      <Button
+                        variant="secondary"
+                        size="sm"
                         onClick={() => setShowDeviceSelector(true)}
-                        className="mt-3 bg-white text-amber-600 px-4 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest hover:bg-amber-50 transition-colors"
+                        className="mt-3 bg-white text-amber-600 px-4 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest hover:bg-amber-50"
                       >
                         Change Input Device
-                      </button>
+                      </Button>
                     </div>
                   </div>
                 </div>
@@ -164,14 +167,12 @@ SCENARIO CONTEXT: ${scenario.title} - ${scenario.description}`;
 
               {/* Speaker Indicator Badge */}
               <div className="mb-8 flex flex-col items-center">
-                <div className={`px-4 py-1.5 rounded-full border transition-all duration-500 flex items-center gap-2 ${
-                  isAiSpeaking 
-                    ? 'bg-blue-500/20 border-blue-400/30 text-blue-300' 
+                <div className={`px-4 py-1.5 rounded-full border transition-all duration-500 flex items-center gap-2 ${isAiSpeaking
+                    ? 'bg-blue-500/20 border-blue-400/30 text-blue-300'
                     : (isUserSpeaking ? 'bg-teal-500/20 border-teal-400/30 text-teal-300' : 'bg-white/5 border-white/10 text-white/40')
-                }`}>
-                  <div className={`w-2 h-2 rounded-full ${
-                    isAiSpeaking ? 'bg-blue-400 animate-pulse' : (isUserSpeaking ? 'bg-teal-400 animate-pulse' : 'bg-white/20')
-                  }`} />
+                  }`}>
+                  <div className={`w-2 h-2 rounded-full ${isAiSpeaking ? 'bg-blue-400 animate-pulse' : (isUserSpeaking ? 'bg-teal-400 animate-pulse' : 'bg-white/20')
+                    }`} />
                   <span className="text-[10px] font-black uppercase tracking-widest">
                     {isAiSpeaking ? 'AI Speaking' : (isUserSpeaking ? 'You Speaking' : 'Waiting...')}
                   </span>
@@ -179,7 +180,7 @@ SCENARIO CONTEXT: ${scenario.title} - ${scenario.description}`;
               </div>
 
               <AudioVisualizer level={activeLevel} active={true} isAiSpeaking={isAiSpeaking} />
-              
+
               <div className="mt-12 text-center">
                 <p className={`text-sm transition-all duration-500 font-light ${isAiSpeaking ? 'text-blue-300' : 'text-teal-300'}`}>
                   {isAiSpeaking ? `Vocalizing Response...` : (isMuted ? 'Microphone Muted' : 'Listening...')}
@@ -201,12 +202,17 @@ SCENARIO CONTEXT: ${scenario.title} - ${scenario.description}`;
                   </div>
                   <h3 className="font-bold text-slate-800">Audio Input</h3>
                 </div>
-                <button onClick={() => setShowDeviceSelector(false)} className="p-2 hover:bg-slate-100 rounded-xl transition-colors text-slate-400">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setShowDeviceSelector(false)}
+                  className="text-slate-400 hover:bg-slate-100 rounded-xl"
+                >
                   <X size={20} />
-                </button>
+                </Button>
               </div>
-              
-              <AudioDeviceSelector 
+
+              <AudioDeviceSelector
                 selectedDeviceId={voiceSettings.preferredAudioDeviceId}
                 onSelect={(deviceId) => {
                   onUpdateSettings({ ...voiceSettings, preferredAudioDeviceId: deviceId });
@@ -214,7 +220,7 @@ SCENARIO CONTEXT: ${scenario.title} - ${scenario.description}`;
                   setTimeout(() => setShowDeviceSelector(false), 300);
                 }}
               />
-              
+
               <p className="text-[10px] text-slate-400 mt-6 leading-relaxed italic">
                 Changing your input device will restart the current neural link.
               </p>
@@ -222,11 +228,11 @@ SCENARIO CONTEXT: ${scenario.title} - ${scenario.description}`;
           </div>
         )}
 
-        <VoiceControls 
-          isMuted={isMuted} 
-          onToggleMute={toggleMute} 
-          showTranscript={showTranscript} 
-          onToggleTranscript={() => setShowTranscript(prev => !prev)} 
+        <VoiceControls
+          isMuted={isMuted}
+          onToggleMute={toggleMute}
+          showTranscript={showTranscript}
+          onToggleTranscript={() => setShowTranscript(prev => !prev)}
         />
 
         {showTranscript && <TranscriptPanel messages={messages} onClose={() => setShowTranscript(false)} />}