allow toggling off system monitoring in settings to minimize (0.1%) CPU usage

src/components/App/StatusBar.tsx

@@ -20,43 +20,52 @@ export const StatusBar = ({ maxDataPoints = 60 }: StatusBarProps) => {
     null
   );
   const [gpuMetrics, setGpuMetrics] = useState<GpuMetrics | null>(null);
-  const { resolvedColorScheme: colorScheme } = usePreferencesStore();
+  const { resolvedColorScheme: colorScheme, systemMonitoringEnabled } =
+    usePreferencesStore();
   const { isVisible, setVisible } = useNotepadStore();
 
   useEffect(() => {
     let isMounted = true;
+    let cleanupCpu: (() => void) | undefined;
+    let cleanupMemory: (() => void) | undefined;
+    let cleanupGpu: (() => void) | undefined;
+    let stopMonitoring: (() => void) | undefined;
 
-    const handleCpuMetrics = (metrics: CpuMetrics) => {
+    if (systemMonitoringEnabled) {
-      if (!isMounted) return;
+      const handleCpuMetrics = (metrics: CpuMetrics) => {
-      setCpuMetrics(metrics);
+        if (!isMounted) return;
-    };
+        setCpuMetrics(metrics);
+      };
 
-    const handleMemoryMetrics = (metrics: MemoryMetrics) => {
+      const handleMemoryMetrics = (metrics: MemoryMetrics) => {
-      if (!isMounted) return;
+        if (!isMounted) return;
-      setMemoryMetrics(metrics);
+        setMemoryMetrics(metrics);
-    };
+      };
 
-    const handleGpuMetrics = (metrics: GpuMetrics) => {
+      const handleGpuMetrics = (metrics: GpuMetrics) => {
-      if (!isMounted) return;
+        if (!isMounted) return;
-      setGpuMetrics(metrics);
+        setGpuMetrics(metrics);
-    };
+      };
 
-    const cleanupCpu =
+      cleanupCpu = window.electronAPI.monitoring.onCpuMetrics(handleCpuMetrics);
-      window.electronAPI.monitoring.onCpuMetrics(handleCpuMetrics);
+      cleanupMemory =
-    const cleanupMemory =
+        window.electronAPI.monitoring.onMemoryMetrics(handleMemoryMetrics);
-      window.electronAPI.monitoring.onMemoryMetrics(handleMemoryMetrics);
+      cleanupGpu = window.electronAPI.monitoring.onGpuMetrics(handleGpuMetrics);
-    const cleanupGpu =
+      stopMonitoring = window.electronAPI.monitoring.start();
-      window.electronAPI.monitoring.onGpuMetrics(handleGpuMetrics);
+    } else {
-    const stopMonitoring = window.electronAPI.monitoring.start();
+      setCpuMetrics(null);
+      setMemoryMetrics(null);
+      setGpuMetrics(null);
+    }
 
     return () => {
       isMounted = false;
-      cleanupCpu();
+      cleanupCpu?.();
-      cleanupMemory();
+      cleanupMemory?.();
-      cleanupGpu();
+      cleanupGpu?.();
-      stopMonitoring();
+      stopMonitoring?.();
     };
-  }, [maxDataPoints]);
+  }, [maxDataPoints, systemMonitoringEnabled]);
 
   return (
     <AppShell.Footer

src/components/settings/GeneralTab.tsx

@@ -8,6 +8,7 @@ import {
   rem,
   Box,
   Anchor,
+  Switch,
 } from '@mantine/core';
 import { Folder, FolderOpen, Monitor, ExternalLink } from 'lucide-react';
 import type { FrontendPreference } from '@/types';
@@ -37,7 +38,12 @@ export const GeneralTab = ({
   isOnInterfaceScreen = false,
 }: GeneralTabProps) => {
   const [installDir, setInstallDir] = useState('');
-  const { frontendPreference, setFrontendPreference } = usePreferencesStore();
+  const {
+    frontendPreference,
+    setFrontendPreference,
+    systemMonitoringEnabled,
+    setSystemMonitoringEnabled,
+  } = usePreferencesStore();
   const [frontendRequirements, setFrontendRequirements] = useState<
     Map<string, boolean>
   >(new Map());
@@ -330,6 +336,22 @@ export const GeneralTab = ({
           })()}
         </Box>
       </div>
+
+      <div>
+        <Text fw={500} mb="sm">
+          System Performance
+        </Text>
+        <Text size="sm" c="dimmed" mb="md">
+          Monitor CPU, memory, and GPU usage in the status bar
+        </Text>
+        <Switch
+          label="Show system metrics"
+          checked={systemMonitoringEnabled}
+          onChange={(event) =>
+            setSystemMonitoringEnabled(event.currentTarget.checked)
+          }
+        />
+      </div>
     </Stack>
   );
 };

src/stores/preferences.ts

@@ -8,9 +8,11 @@ interface PreferencesStore {
   frontendPreference: FrontendPreference;
   rawColorScheme: MantineColorScheme;
   resolvedColorScheme: ResolvedColorScheme;
+  systemMonitoringEnabled: boolean;
 
   setFrontendPreference: (preference: FrontendPreference) => void;
   setColorScheme: (scheme: MantineColorScheme) => Promise<void>;
+  setSystemMonitoringEnabled: (enabled: boolean) => void;
   loadPreferences: () => Promise<void>;
 }
 
@@ -27,12 +29,18 @@ export const usePreferencesStore = create<PreferencesStore>((set) => ({
   frontendPreference: 'koboldcpp',
   rawColorScheme: 'auto',
   resolvedColorScheme: 'light',
+  systemMonitoringEnabled: true,
 
   setFrontendPreference: (preference: FrontendPreference) => {
     set({ frontendPreference: preference });
     window.electronAPI.config.set('frontendPreference', preference);
   },
 
+  setSystemMonitoringEnabled: (enabled: boolean) => {
+    set({ systemMonitoringEnabled: enabled });
+    window.electronAPI.config.set('systemMonitoringEnabled', enabled);
+  },
+
   setColorScheme: async (scheme: MantineColorScheme) => {
     set({
       rawColorScheme: scheme,
@@ -42,17 +50,21 @@ export const usePreferencesStore = create<PreferencesStore>((set) => ({
   },
 
   loadPreferences: async () => {
-    const [frontendPref, colorScheme] = await Promise.all([
+    const [frontendPref, colorScheme, systemMonitoring] = await Promise.all([
       window.electronAPI.config.get(
         'frontendPreference'
       ) as Promise<FrontendPreference>,
       window.electronAPI.app.getColorScheme(),
+      window.electronAPI.config.get(
+        'systemMonitoringEnabled'
+      ) as Promise<boolean>,
     ]);
 
     set({
       frontendPreference: frontendPref || 'koboldcpp',
       rawColorScheme: colorScheme || 'auto',
       resolvedColorScheme: resolveColorScheme(colorScheme || 'auto'),
+      systemMonitoringEnabled: systemMonitoring ?? true,
     });
   },
 }));