refactor: clean up navigation and improve UX

- Remove V2 badge from MainV2.vue
- Remove Audio Test and Agent V2 links from navigation
- Remove Agent V1 link for cleaner navigation
- Remove Mock Mode button from UI
- Add console commands for mock mode (window.clueless.enableMockMode/disableMockMode)
- Improve connection status display with better visual representation
  - Show 'Connected' in green, 'Connecting...' in yellow with animation
  - Use 'Not Connected' instead of 'disconnected'
  - Add color-coded text and smooth transitions
- Simplify developer tools to essential commands only

Author: vijaythecoder

resources/js/components/RealtimeAgent/Navigation/ConnectionStatus.vue

@@ -1,17 +1,32 @@
 <template>
     <div class="flex items-center gap-1.5">
-        <div
-            :class="[
-                'h-2 w-2 rounded-full',
-                connectionStatus === 'connected'
-                    ? 'bg-green-500'
-                    : connectionStatus === 'connecting'
-                      ? 'animate-pulse bg-yellow-500'
-                      : 'bg-red-500',
-            ]"
-        ></div>
-        <span class="text-xs text-gray-600 dark:text-gray-400">
-            {{ connectionStatus }}
+        <div class="relative">
+            <div
+                :class="[
+                    'h-2 w-2 rounded-full transition-all duration-300',
+                    connectionStatus === 'connected'
+                        ? 'bg-green-500'
+                        : connectionStatus === 'connecting'
+                          ? 'bg-yellow-500'
+                          : 'bg-gray-400',
+                ]"
+            ></div>
+            <!-- Pulse animation for connecting state -->
+            <div
+                v-if="connectionStatus === 'connecting'"
+                class="absolute inset-0 h-2 w-2 animate-ping rounded-full bg-yellow-500 opacity-75"
+            ></div>
+        </div>
+        <span class="text-xs font-medium capitalize">
+            <span v-if="connectionStatus === 'connected'" class="text-green-600 dark:text-green-400">
+                Connected
+            </span>
+            <span v-else-if="connectionStatus === 'connecting'" class="text-yellow-600 dark:text-yellow-400">
+                Connecting...
+            </span>
+            <span v-else class="text-gray-500 dark:text-gray-400">
+                Not Connected
+            </span>
         </span>
     </div>
 </template>

resources/js/components/RealtimeAgent/Navigation/MobileMenu.vue

@@ -100,41 +100,15 @@
                 <span class="font-medium">{{ isOverlayMode ? 'ON' : 'OFF' }}</span>
             </button>
 
-            <!-- Navigation Links -->
-            <div class="border-t border-gray-100 pt-3 space-y-2 dark:border-gray-800">
-                <button
-                    @click="handleDashboardClick"
-                    :disabled="isActive"
-                    class="w-full text-left text-xs text-gray-600 dark:text-gray-400"
-                    :class="{ 'cursor-not-allowed opacity-50': isActive }"
-                >
-                    View Call History →
-                </button>
-                
-                <a
-                    href="/audio-test"
-                    class="block w-full text-left text-xs text-gray-600 dark:text-gray-400"
-                    @click="closeMobileMenu"
-                >
-                    Audio Test →
-                </a>
-                
-                <a
-                    href="/realtime-agent"
-                    class="block w-full text-left text-xs text-gray-600 dark:text-gray-400"
-                    @click="closeMobileMenu"
-                >
-                    Agent V1 →
-                </a>
-                
-                <a
-                    href="/realtime-agent-v2"
-                    class="block w-full text-left text-xs text-gray-600 dark:text-gray-400"
-                    @click="closeMobileMenu"
-                >
-                    Agent V2 →
-                </a>
-            </div>
+            <!-- Call History Link -->
+            <button
+                @click="handleDashboardClick"
+                :disabled="isActive"
+                class="w-full border-t border-gray-100 pt-3 text-left text-xs text-gray-600 dark:border-gray-800 dark:text-gray-400"
+                :class="{ 'cursor-not-allowed opacity-50': isActive }"
+            >
+                View Call History →
+            </button>
         </div>
     </div>
 </template>

resources/js/components/RealtimeAgent/Navigation/TitleBar.vue

@@ -50,9 +50,6 @@
 
             <!-- Overlay Mode Toggle -->
             <OverlayModeToggle v-if="isOverlaySupported" />
-            
-            <!-- Mock Mode Toggle -->
-            <MockModeToggle />
 
             <!-- Actions -->
             <button
@@ -64,28 +61,6 @@
                 Call History
             </button>
 
-            <!-- Navigation Links -->
-            <a
-                href="/audio-test"
-                class="text-xs font-medium text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
-            >
-                Audio Test
-            </a>
-            
-            <a
-                href="/realtime-agent"
-                class="text-xs font-medium text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
-            >
-                Agent V1
-            </a>
-            
-            <a
-                href="/realtime-agent-v2"
-                class="text-xs font-medium text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
-            >
-                Agent V2
-            </a>
-            
             <button
                 @click="toggleSession"
                 class="rounded-md px-4 py-1.5 text-xs font-medium transition-colors"
@@ -123,7 +98,6 @@ import CoachSelector from './CoachSelector.vue';
 import ConnectionStatus from './ConnectionStatus.vue';
 import ScreenProtectionToggle from './ScreenProtectionToggle.vue';
 import OverlayModeToggle from './OverlayModeToggle.vue';
-import MockModeToggle from './MockModeToggle.vue';
 
 // Props
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

resources/js/pages/RealtimeAgent/MainV2.vue

@@ -1027,6 +1027,29 @@ watch(selectedTemplate, (newTemplate) => {
     }
 });
 
+// Developer console methods
+const enableMockMode = () => {
+    console.log('🎭 Enabling mock mode with pre-loaded data...');
+    realtimeStore.enableMockMode();
+    console.log('✅ Mock mode enabled with conversation history, insights, and action items');
+    return 'Mock mode enabled';
+};
+
+const disableMockMode = () => {
+    console.log('🎭 Disabling mock mode...');
+    realtimeStore.disableMockMode();
+    console.log('✅ Mock mode disabled');
+    return 'Mock mode disabled';
+};
+
+// Expose to window for console access
+if (typeof window !== 'undefined') {
+    (window as any).clueless = {
+        enableMockMode,
+        disableMockMode,
+    };
+}
+
 // Lifecycle
 onMounted(() => {
     initialize();
@@ -1035,6 +1058,11 @@ onMounted(() => {
     document.addEventListener('click', () => {
         settingsStore.closeAllDropdowns();
     });
+    
+    // Log developer console commands
+    console.log('🛠️ Developer Commands Available:');
+    console.log('  window.clueless.enableMockMode() - Load mock conversation data');
+    console.log('  window.clueless.disableMockMode() - Disable mock mode');
 });
 
 onUnmounted(async () => {
@@ -1049,21 +1077,6 @@ onUnmounted(async () => {
 </script>
 
 <style>
-/* V2 Badge - for testing */
-.title-bar::after {
-    content: 'V2';
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    background: #3b82f6;
-    color: white;
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 10px;
-    font-weight: 600;
-}
-
 /* Apple-style Glassmorphism */
 .glass-card {
     background: rgba(255, 255, 255, 0.7);