feat: add analytics settings tab

- Add new Analytics tab to Settings component
- Implement analytics enable/disable toggle
- Show consent dialog when enabling analytics without prior consent
- Add delete all analytics data functionality
- Display privacy information and data collection details
- Track analytics settings changes with event tracking

src/components/Settings.tsx

@@ -7,6 +7,9 @@ import {
   Save, 
   AlertCircle,
   Loader2,
+  BarChart3,
+  Shield,
+  Trash,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -27,7 +30,9 @@ import { StorageTab } from "./StorageTab";
 import { HooksEditor } from "./HooksEditor";
 import { SlashCommandsManager } from "./SlashCommandsManager";
 import { ProxySettings } from "./ProxySettings";
-import { useTheme } from "@/hooks";
+import { AnalyticsConsent } from "./AnalyticsConsent";
+import { useTheme, useTrackEvent } from "@/hooks";
+import { analytics } from "@/lib/analytics";
 
 interface SettingsProps {
   /**
@@ -87,12 +92,30 @@ export const Settings: React.FC<SettingsProps> = ({
   const [proxySettingsChanged, setProxySettingsChanged] = useState(false);
   const saveProxySettings = React.useRef<(() => Promise<void>) | null>(null);
   
+  // Analytics state
+  const [analyticsEnabled, setAnalyticsEnabled] = useState(false);
+  const [analyticsConsented, setAnalyticsConsented] = useState(false);
+  const [showAnalyticsConsent, setShowAnalyticsConsent] = useState(false);
+  const trackEvent = useTrackEvent();
+  
   // Load settings on mount
   useEffect(() => {
     loadSettings();
     loadClaudeBinaryPath();
+    loadAnalyticsSettings();
   }, []);
 
+  /**
+   * Loads analytics settings
+   */
+  const loadAnalyticsSettings = async () => {
+    const settings = analytics.getSettings();
+    if (settings) {
+      setAnalyticsEnabled(settings.enabled);
+      setAnalyticsConsented(settings.hasConsented);
+    }
+  };
+
   /**
    * Loads the current Claude binary path
    */
@@ -374,7 +397,7 @@ export const Settings: React.FC<SettingsProps> = ({
       ) : (
         <div className="flex-1 overflow-y-auto p-4">
           <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-            <TabsList className="grid grid-cols-8 w-full">
+            <TabsList className="grid grid-cols-9 w-full">
               <TabsTrigger value="general">General</TabsTrigger>
               <TabsTrigger value="permissions">Permissions</TabsTrigger>
               <TabsTrigger value="environment">Environment</TabsTrigger>
@@ -383,6 +406,7 @@ export const Settings: React.FC<SettingsProps> = ({
               <TabsTrigger value="commands">Commands</TabsTrigger>
               <TabsTrigger value="storage">Storage</TabsTrigger>
               <TabsTrigger value="proxy">Proxy</TabsTrigger>
+              <TabsTrigger value="analytics">Analytics</TabsTrigger>
             </TabsList>
             
             {/* General Settings */}
@@ -897,6 +921,97 @@ export const Settings: React.FC<SettingsProps> = ({
                 />
               </Card>
             </TabsContent>
+            
+            {/* Analytics Settings */}
+            <TabsContent value="analytics" className="space-y-6">
+              <Card className="p-6 space-y-6">
+                <div>
+                  <div className="flex items-center gap-3 mb-4">
+                    <BarChart3 className="h-5 w-5 text-purple-600 dark:text-purple-400" />
+                    <h3 className="text-base font-semibold">Analytics Settings</h3>
+                  </div>
+                  
+                  <div className="space-y-6">
+                    {/* Analytics Toggle */}
+                    <div className="flex items-center justify-between">
+                      <div className="space-y-1">
+                        <Label htmlFor="analytics-enabled" className="text-base">Enable Analytics</Label>
+                        <p className="text-sm text-muted-foreground">
+                          Help improve Claudia by sharing anonymous usage data
+                        </p>
+                      </div>
+                      <Switch
+                        id="analytics-enabled"
+                        checked={analyticsEnabled}
+                        onCheckedChange={async (checked) => {
+                          if (checked && !analyticsConsented) {
+                            setShowAnalyticsConsent(true);
+                          } else if (checked) {
+                            await analytics.enable();
+                            setAnalyticsEnabled(true);
+                            trackEvent.settingsChanged('analytics_enabled', true);
+                            setToast({ message: "Analytics enabled", type: "success" });
+                          } else {
+                            await analytics.disable();
+                            setAnalyticsEnabled(false);
+                            trackEvent.settingsChanged('analytics_enabled', false);
+                            setToast({ message: "Analytics disabled", type: "success" });
+                          }
+                        }}
+                      />
+                    </div>
+                    
+                    {/* Privacy Info */}
+                    <div className="rounded-lg border border-blue-200 dark:border-blue-900 bg-blue-50 dark:bg-blue-950/20 p-4">
+                      <div className="flex gap-3">
+                        <Shield className="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
+                        <div className="space-y-2">
+                          <p className="font-medium text-blue-900 dark:text-blue-100">Your privacy is protected</p>
+                          <ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
+                            <li>• No personal information is collected</li>
+                            <li>• No file contents, paths, or project names</li>
+                            <li>• All data is anonymous with random IDs</li>
+                            <li>• You can disable analytics at any time</li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                    
+                    {/* Data Collection Info */}
+                    {analyticsEnabled && (
+                      <div className="space-y-4">
+                        <div>
+                          <h4 className="text-sm font-medium mb-2">What we collect:</h4>
+                          <ul className="text-sm text-muted-foreground space-y-1">
+                            <li>• Feature usage patterns</li>
+                            <li>• Performance metrics</li>
+                            <li>• Error reports (without sensitive data)</li>
+                            <li>• Session frequency and duration</li>
+                          </ul>
+                        </div>
+                        
+                        {/* Delete Data Button */}
+                        <div className="pt-4 border-t">
+                          <Button
+                            variant="destructive"
+                            size="sm"
+                            onClick={async () => {
+                              await analytics.deleteAllData();
+                              setAnalyticsEnabled(false);
+                              setAnalyticsConsented(false);
+                              setToast({ message: "All analytics data deleted", type: "success" });
+                            }}
+                          >
+                            <Trash className="mr-2 h-4 w-4" />
+                            Delete All Analytics Data
+                          </Button>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </Card>
+            </TabsContent>
           </Tabs>
         </div>
       )}
@@ -912,6 +1027,16 @@ export const Settings: React.FC<SettingsProps> = ({
           />
         )}
       </ToastContainer>
+      
+      {/* Analytics Consent Dialog */}
+      <AnalyticsConsent
+        open={showAnalyticsConsent}
+        onOpenChange={setShowAnalyticsConsent}
+        onComplete={async () => {
+          await loadAnalyticsSettings();
+          setShowAnalyticsConsent(false);
+        }}
+      />
     </div>
   );
 };