feat: add PostHog telemetry and privacy toggle in settings (#409)

src/i18n/locales/en/settings.json

@@ -194,7 +194,9 @@
       }
     },
     "devMode": "Developer Mode",
-    "devModeDesc": "Show developer tools and shortcuts"
+    "devModeDesc": "Show developer tools and shortcuts",
+    "telemetry": "Anonymous Usage Data",
+    "telemetryDesc": "Allow providing anonymous basic usage data to improve ClawX"
   },
   "developer": {
     "title": "Developer",

src/i18n/locales/zh/settings.json

@@ -194,7 +194,9 @@
       }
     },
     "devMode": "开发者模式",
-    "devModeDesc": "显示开发者工具和快捷方式"
+    "devModeDesc": "显示开发者工具和快捷方式",
+    "telemetry": "匿名使用数据",
+    "telemetryDesc": "允许提供匿名的基础使用数据，用于改进 ClawX"
   },
   "developer": {
     "title": "开发者",

src/pages/Settings/index.tsx

@@ -73,6 +73,8 @@ export function Settings() {
     setAutoDownloadUpdate,
     devModeUnlocked,
     setDevModeUnlocked,
+    telemetryEnabled,
+    setTelemetryEnabled,
   } = useSettingsStore();
 
   const { status: gatewayStatus, restart: restartGateway } = useGatewayStore();
@@ -367,7 +369,7 @@ export function Settings() {
   return (
     <div className="flex flex-col -m-6 dark:bg-background h-[calc(100vh-2.5rem)] overflow-hidden">
       <div className="w-full max-w-4xl mx-auto flex flex-col h-full p-10 pt-16">
-        
+
         {/* Header */}
         <div className="flex flex-col md:flex-row md:items-start justify-between mb-12 shrink-0 gap-4">
           <div>
@@ -454,13 +456,13 @@ export function Settings() {
                 <div className="flex flex-wrap items-center gap-2">
                   <div className={cn(
                     "flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[13px] font-medium border",
-                    gatewayStatus.state === 'running' ? "bg-green-500/10 text-green-600 dark:text-green-500 border-green-500/20" : 
-                    gatewayStatus.state === 'error' ? "bg-red-500/10 text-red-600 dark:text-red-500 border-red-500/20" : 
-                    "bg-black/5 dark:bg-white/5 text-muted-foreground border-transparent"
+                    gatewayStatus.state === 'running' ? "bg-green-500/10 text-green-600 dark:text-green-500 border-green-500/20" :
+                      gatewayStatus.state === 'error' ? "bg-red-500/10 text-red-600 dark:text-red-500 border-red-500/20" :
+                        "bg-black/5 dark:bg-white/5 text-muted-foreground border-transparent"
                   )}>
-                    <div className={cn("w-1.5 h-1.5 rounded-full", 
-                      gatewayStatus.state === 'running' ? "bg-green-500" : 
-                      gatewayStatus.state === 'error' ? "bg-red-500" : "bg-muted-foreground"
+                    <div className={cn("w-1.5 h-1.5 rounded-full",
+                      gatewayStatus.state === 'running' ? "bg-green-500" :
+                        gatewayStatus.state === 'error' ? "bg-red-500" : "bg-muted-foreground"
                     )} />
                     {gatewayStatus.state}
                   </div>
@@ -519,7 +521,20 @@ export function Settings() {
                 <Switch
                   checked={devModeUnlocked}
                   onCheckedChange={setDevModeUnlocked}
-                  />
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label className="text-[15px] font-medium text-foreground">{t('advanced.telemetry')}</Label>
+                  <p className="text-[13px] text-muted-foreground mt-1">
+                    {t('advanced.telemetryDesc')}
+                  </p>
+                </div>
+                <Switch
+                  checked={telemetryEnabled}
+                  onCheckedChange={setTelemetryEnabled}
+                />
               </div>
 
             </div>

src/stores/settings.ts

@@ -16,6 +16,7 @@ interface SettingsState {
   language: string;
   startMinimized: boolean;
   launchAtStartup: boolean;
+  telemetryEnabled: boolean;
 
   // Gateway
   gatewayAutoStart: boolean;
@@ -45,6 +46,7 @@ interface SettingsState {
   setLanguage: (language: string) => void;
   setStartMinimized: (value: boolean) => void;
   setLaunchAtStartup: (value: boolean) => void;
+  setTelemetryEnabled: (value: boolean) => void;
   setGatewayAutoStart: (value: boolean) => void;
   setGatewayPort: (port: number) => void;
   setProxyEnabled: (value: boolean) => void;
@@ -72,6 +74,7 @@ const defaultSettings = {
   })(),
   startMinimized: false,
   launchAtStartup: false,
+  telemetryEnabled: true,
   gatewayAutoStart: true,
   gatewayPort: 18789,
   proxyEnabled: false,
@@ -113,23 +116,30 @@ export const useSettingsStore = create<SettingsState>()(
         void hostApiFetch('/api/settings/language', {
           method: 'PUT',
           body: JSON.stringify({ value: language }),
-        }).catch(() => {});
+        }).catch(() => { });
       },
       setStartMinimized: (startMinimized) => set({ startMinimized }),
       setLaunchAtStartup: (launchAtStartup) => set({ launchAtStartup }),
+      setTelemetryEnabled: (telemetryEnabled) => {
+        set({ telemetryEnabled });
+        void hostApiFetch('/api/settings/telemetryEnabled', {
+          method: 'PUT',
+          body: JSON.stringify({ value: telemetryEnabled }),
+        }).catch(() => { });
+      },
       setGatewayAutoStart: (gatewayAutoStart) => {
         set({ gatewayAutoStart });
         void hostApiFetch('/api/settings/gatewayAutoStart', {
           method: 'PUT',
           body: JSON.stringify({ value: gatewayAutoStart }),
-        }).catch(() => {});
+        }).catch(() => { });
       },
       setGatewayPort: (gatewayPort) => {
         set({ gatewayPort });
         void hostApiFetch('/api/settings/gatewayPort', {
           method: 'PUT',
           body: JSON.stringify({ value: gatewayPort }),
-        }).catch(() => {});
+        }).catch(() => { });
       },
       setProxyEnabled: (proxyEnabled) => set({ proxyEnabled }),
       setProxyServer: (proxyServer) => set({ proxyServer }),