feat(frontend): Add Vercel Analytics and Speed Insights (#10904)

## Summary
- Added Vercel Analytics for tracking page views and user interactions
- Added Vercel Speed Insights for monitoring Web Vitals and performance
metrics
- Fixed incorrect placement of SpeedInsights component (was between html
and head tags)

## Changes
- Import Analytics and SpeedInsights components from Vercel packages
- Place both components correctly within the body tag
- Ensure proper HTML structure and Next.js best practices

## Test plan
- [x] Verify components are imported correctly
- [x] Confirm no HTML validation errors
- [x] Test that analytics work when deployed to Vercel
- [x] Verify Speed Insights metrics are being collected

Author: Swiftyos

autogpt_platform/frontend/package.json

@@ -54,6 +54,8 @@
     "@tanstack/react-query": "5.85.3",
     "@tanstack/react-table": "8.21.3",
     "@types/jaro-winkler": "0.2.4",
+    "@vercel/analytics": "1.5.0",
+    "@vercel/speed-insights": "1.2.0",
     "@xyflow/react": "12.8.3",
     "boring-avatars": "1.11.2",
     "class-variance-authority": "0.7.1",

autogpt_platform/frontend/pnpm-lock.yaml

@@ -9,6 +9,8 @@ import TallyPopupSimple from "@/components/TallyPopup";
 import { GoogleAnalytics } from "@/components/analytics/google-analytics";
 import { Toaster } from "@/components/molecules/Toast/toaster";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { SpeedInsights } from "@vercel/speed-insights/next";
+import { Analytics } from "@vercel/analytics/next";
 
 export const metadata: Metadata = {
   title: "AutoGPT Platform",
@@ -42,6 +44,8 @@ export default async function RootLayout({
           <div className="flex min-h-screen flex-col items-stretch justify-items-stretch">
             {children}
             <TallyPopupSimple />
+            <SpeedInsights />
+            <Analytics />
 
             {/* React Query DevTools is only available in development */}
             {process.env.NEXT_PUBLIC_REACT_QUERY_DEVTOOL && (