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,30 +100,49 @@ export const AppShell = ({ children }: AppShellProps) => {
           )}
         </Box>
 
-        {/* User Menu Button - Top Right */}
-        <IconButton
-          onClick={handleMenuOpen}
-          size="medium"
-          aria-label="user menu"
-          aria-controls={anchorEl ? 'user-menu' : undefined}
-          aria-haspopup="true"
-          aria-expanded={anchorEl ? 'true' : undefined}
-          sx={{
-            minWidth: 44,
-            minHeight: 44,
-          }}
-        >
-          <Avatar
+        {/* Right Side - User Menu Button with Status Indicator */}
+        <Tooltip title={isConnected ? t('connection.syncActive') : t('connection.syncDisconnected')}>
+          <IconButton
+            onClick={handleMenuOpen}
+            size="medium"
+            aria-label="user menu"
+            aria-controls={anchorEl ? 'user-menu' : undefined}
+            aria-haspopup="true"
+            aria-expanded={anchorEl ? 'true' : undefined}
             sx={{
-              width: 36,
-              height: 36,
-              bgcolor: 'primary.main',
-              fontSize: '0.875rem',
+              minWidth: 44,
+              minHeight: 44,
+              position: 'relative',
             }}
           >
-            {user?.name?.charAt(0).toUpperCase() || 'U'}
-          </Avatar>
-        </IconButton>
+            <Avatar
+              sx={{
+                width: 36,
+                height: 36,
+                bgcolor: 'primary.main',
+                fontSize: '0.875rem',
+              }}
+            >
+              {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"