From fcb83fc6d08413386fd2407ab7cb474f5199c2e9 Mon Sep 17 00:00:00 2001
From: Vivek R <123vivekr@gmail.com>
Date: Wed, 30 Jul 2025 19:44:29 +0530
Subject: [PATCH] feat: integrate analytics into main app

- Initialize analytics service on app startup
- Add PostHogProvider wrapper for React integration
- Include AnalyticsConsentBanner in App component
- Set up app lifecycle tracking with useAppLifecycle hook
- Configure PostHog with environment variables
---
 src/App.tsx  |  8 ++++++++
 src/main.tsx | 21 ++++++++++++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index cde4a6a..e6138eb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,6 +25,8 @@ import { TabManager } from "@/components/TabManager";
 import { TabContent } from "@/components/TabContent";
 import { AgentsModal } from "@/components/AgentsModal";
 import { useTabState } from "@/hooks/useTabState";
+import { AnalyticsConsentBanner } from "@/components/AnalyticsConsent";
+import { useAppLifecycle } from "@/hooks";
 
 type View = 
   | "welcome" 
@@ -60,6 +62,9 @@ function AppContent() {
   const [projectForSettings, setProjectForSettings] = useState<Project | null>(null);
   const [previousView] = useState<View>("welcome");
   const [showAgentsModal, setShowAgentsModal] = useState(false);
+  
+  // Initialize analytics lifecycle tracking
+  useAppLifecycle();
 
   // Load projects on mount when in projects view
   useEffect(() => {
@@ -464,6 +469,9 @@ function AppContent() {
         onAgentsClick={() => setShowAgentsModal(true)}
       />
       
+      {/* Analytics Consent Banner */}
+      <AnalyticsConsentBanner />
+      
       {/* Main Content */}
       <div className="flex-1 overflow-hidden">
         {renderContent()}
diff --git a/src/main.tsx b/src/main.tsx
index 014b02d..608b6bd 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,13 +2,28 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import { ErrorBoundary } from "./components/ErrorBoundary";
+import { analytics } from "./lib/analytics";
+import { PostHogProvider } from "posthog-js/react";
 import "./assets/shimmer.css";
 import "./styles.css";
 
+// Initialize analytics before rendering
+analytics.initialize();
+
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <ErrorBoundary>
-      <App />
-    </ErrorBoundary>
+    <PostHogProvider
+      apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY}
+      options={{
+        api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
+        defaults: '2025-05-24',
+        capture_exceptions: true,
+        debug: import.meta.env.MODE === "development",
+      }}
+    >
+      <ErrorBoundary>
+        <App />
+      </ErrorBoundary>
+    </PostHogProvider>
   </React.StrictMode>,
 );