feat: Add status dot indicator and fix voice tracking data format

- Replace connection status chips with green/gray dot on user avatar
- Fix voice command data transformation (use timestamp/data instead of startedAt/metadata)
- Keep family members online indicator on left side
- User avatar with status dot remains on right side

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/components/layouts/AppShell/AppShell.tsx

@@ -83,25 +83,8 @@ export const AppShell = ({ children }: AppShellProps) => {
           boxShadow: 1,
         }}
       >
-        {/* Connection Status & Presence Indicator */}
-        <Box
-          sx={{
-            display: 'flex',
-            gap: 1,
-          }}
-        >
-          <Tooltip title={isConnected ? t('connection.syncActive') : t('connection.syncDisconnected')}>
-            <Chip
-              icon={isConnected ? <Wifi /> : <WifiOff />}
-              label={isConnected ? t('connection.live') : t('connection.offline')}
-              size="small"
-              color={isConnected ? 'success' : 'default'}
-              sx={{
-                fontWeight: 600,
-              }}
-            />
-          </Tooltip>
-
+        {/* Left Side - Family Members Online Indicator */}
+        <Box>
           {isConnected && presence.count > 1 && (
             <Tooltip title={t('connection.familyMembersOnline', { count: presence.count })}>
               <Chip
@@ -117,7 +100,8 @@ export const AppShell = ({ children }: AppShellProps) => {
           )}
         </Box>
 
-        {/* User Menu Button - Top Right */}
+        {/* Right Side - User Menu Button with Status Indicator */}
+        <Tooltip title={isConnected ? t('connection.syncActive') : t('connection.syncDisconnected')}>
           <IconButton
             onClick={handleMenuOpen}
             size="medium"
@@ -128,6 +112,7 @@ export const AppShell = ({ children }: AppShellProps) => {
             sx={{
               minWidth: 44,
               minHeight: 44,
+              position: 'relative',
             }}
           >
             <Avatar
@@ -140,7 +125,24 @@ export const AppShell = ({ children }: AppShellProps) => {
             >
               {user?.name?.charAt(0).toUpperCase() || 'U'}
             </Avatar>
+            {/* Status Dot Indicator */}
+            <Box
+              sx={{
+                position: 'absolute',
+                bottom: 2,
+                right: 2,
+                width: 12,
+                height: 12,
+                borderRadius: '50%',
+                bgcolor: isConnected ? '#4caf50' : '#9e9e9e',
+                border: '2px solid',
+                borderColor: 'background.paper',
+                boxShadow: 1,
+              }}
+              aria-label={isConnected ? 'Online' : 'Offline'}
+            />
           </IconButton>
+        </Tooltip>
 
         <Menu
           id="user-menu"

maternal-web/components/voice/VoiceFloatingButton.tsx

@@ -173,12 +173,11 @@ export function VoiceFloatingButton() {
     const childId = children[0].id;
     console.log('[Voice] Using child ID:', childId);
 
-    // Create the activity - match backend CreateActivityDto format
+    // Create the activity - use frontend API format (trackingApi transforms to backend DTO)
     const activityData = {
       type: activityType,
-      startedAt: activityTimestamp ? new Date(activityTimestamp).toISOString() : new Date().toISOString(),
-      endedAt: activityDetails.endedAt || undefined,
-      metadata: activityDetails,
+      timestamp: activityTimestamp ? new Date(activityTimestamp).toISOString() : new Date().toISOString(),
+      data: activityDetails,
       notes: activityDetails.notes || undefined,
     };