fix(app): wrap daemon settings section in React Query with loading state

Prevents the daemon section from flashing "not running" / "PID —" while
IPC data loads. The whole card now shows a spinner until the first fetch
completes, and mutations (restart/stop/start) optimistically update the
query cache with the returned status.

packages/app/src/desktop/components/desktop-updates-section.tsx

@@ -1,7 +1,6 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import { ActivityIndicator, Alert, Text, View } from "react-native";
 import * as Clipboard from "expo-clipboard";
-import { useFocusEffect } from "@react-navigation/native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { settingsStyles } from "@/styles/settings";
 import {
@@ -21,15 +20,12 @@ import { openExternalUrl } from "@/utils/open-external-url";
 import { isVersionMismatch } from "@/desktop/updates/desktop-updates";
 import {
   getCliDaemonStatus,
-  getDesktopDaemonLogs,
-  getDesktopDaemonStatus,
   restartDesktopDaemon,
   shouldUseDesktopDaemon,
   startDesktopDaemon,
   stopDesktopDaemon,
-  type DesktopDaemonLogs,
-  type DesktopDaemonStatus,
 } from "@/desktop/daemon/desktop-daemon";
+import { useDaemonStatus } from "@/desktop/hooks/use-daemon-status";
 
 export interface LocalDaemonSectionProps {
   appVersion: string | null;
@@ -40,44 +36,18 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
   const { theme } = useUnistyles();
   const showSection = shouldUseDesktopDaemon();
   const { settings, updateSettings } = useAppSettings();
-  const [daemonStatus, setDaemonStatus] = useState<DesktopDaemonStatus | null>(null);
+  const { data, isLoading, error: statusError, setStatus, refetch } = useDaemonStatus();
-  const [daemonVersion, setDaemonVersion] = useState<string | null>(null);
-  const [statusError, setStatusError] = useState<string | null>(null);
   const [isRestartingDaemon, setIsRestartingDaemon] = useState(false);
   const [isUpdatingDaemonManagement, setIsUpdatingDaemonManagement] = useState(false);
   const [statusMessage, setStatusMessage] = useState<string | null>(null);
-  const [daemonLogs, setDaemonLogs] = useState<DesktopDaemonLogs | null>(null);
   const [isLogsModalOpen, setIsLogsModalOpen] = useState(false);
   const [cliStatusOutput, setCliStatusOutput] = useState<string | null>(null);
   const [isCliStatusModalOpen, setIsCliStatusModalOpen] = useState(false);
   const [isLoadingCliStatus, setIsLoadingCliStatus] = useState(false);
 
-  const loadDaemonData = useCallback(() => {
+  const daemonStatus = data?.status ?? null;
-    if (!showSection) {
+  const daemonLogs = data?.logs ?? null;
-      return Promise.resolve();
+  const daemonVersion = daemonStatus?.version ?? null;
-    }
-    return Promise.all([getDesktopDaemonStatus(), getDesktopDaemonLogs()])
-      .then(([status, logs]) => {
-        setDaemonStatus(status);
-        setDaemonLogs(logs);
-        setDaemonVersion(status.version);
-        setStatusError(null);
-      })
-      .catch((error) => {
-        const message = error instanceof Error ? error.message : String(error);
-        setStatusError(message);
-      });
-  }, [showSection]);
-
-  useFocusEffect(
-    useCallback(() => {
-      if (!showSection) {
-        return undefined;
-      }
-      void loadDaemonData();
-      return undefined;
-    }, [loadDaemonData, showSection]),
-  );
 
   const daemonVersionMismatch = isVersionMismatch(appVersion, daemonVersion);
   const daemonStatusStateText =
@@ -116,12 +86,12 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
           daemonStatus?.status === "running" ? restartDesktopDaemon : startDesktopDaemon;
 
         void action()
-          .then((status) => {
+          .then((newStatus) => {
-            setDaemonStatus(status);
+            setStatus(newStatus);
             setStatusMessage(
               daemonStatus?.status === "running" ? "Daemon restarted." : "Daemon started.",
             );
-            return loadDaemonData();
+            refetch();
           })
           .catch((error) => {
             console.error("[Settings] Failed to change desktop daemon state", error);
@@ -136,7 +106,7 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
         console.error("[Settings] Failed to open desktop daemon action confirmation", error);
         Alert.alert("Error", "Unable to open the daemon confirmation dialog.");
       });
-  }, [daemonActionLabel, daemonStatus?.status, isRestartingDaemon, loadDaemonData, showSection]);
+  }, [daemonActionLabel, daemonStatus?.status, isRestartingDaemon, refetch, setStatus, showSection]);
 
   const handleToggleDaemonManagement = useCallback(() => {
     if (isUpdatingDaemonManagement) {
@@ -182,9 +152,14 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
             : Promise.resolve(daemonStatus ?? null);
 
         void stopPromise
-          .then(() => updateSettings({ manageBuiltInDaemon: false }))
+          .then((newStatus) => {
-          .then(() => loadDaemonData())
+            if (newStatus) {
+              setStatus(newStatus);
+            }
+            return updateSettings({ manageBuiltInDaemon: false });
+          })
           .then(() => {
+            refetch();
             setStatusMessage("Built-in daemon paused and stopped.");
           })
           .catch((error) => {
@@ -202,7 +177,8 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
   }, [
     daemonStatus,
     isUpdatingDaemonManagement,
-    loadDaemonData,
+    refetch,
+    setStatus,
     settings.manageBuiltInDaemon,
     updateSettings,
   ]);
@@ -277,11 +253,19 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
           Advanced settings
         </Button>
       </View>
+      {isLoading ? (
+        <View style={[settingsStyles.card, styles.loadingCard]}>
+          <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
+        </View>
+      ) : (
+        <>
           <View style={settingsStyles.card}>
             <View style={settingsStyles.row}>
               <View style={settingsStyles.rowContent}>
                 <Text style={settingsStyles.rowTitle}>Status</Text>
-            <Text style={settingsStyles.rowHint}>Only the built-in desktop daemon is shown here.</Text>
+                <Text style={settingsStyles.rowHint}>
+                  Only the built-in desktop daemon is shown here.
+                </Text>
               </View>
               <View style={styles.statusValueGroup}>
                 <Text style={styles.valueText}>{daemonStatusStateText}</Text>
@@ -346,7 +330,9 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
             <View style={[settingsStyles.row, settingsStyles.rowBorder]}>
               <View style={settingsStyles.rowContent}>
                 <Text style={settingsStyles.rowTitle}>Log file</Text>
-            <Text style={settingsStyles.rowHint}>{daemonLogs?.logPath ?? "Log path unavailable."}</Text>
+                <Text style={settingsStyles.rowHint}>
+                  {daemonLogs?.logPath ?? "Log path unavailable."}
+                </Text>
               </View>
               <View style={styles.actionGroup}>
                 {daemonLogs?.logPath ? (
@@ -397,6 +383,8 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
               </Text>
             </View>
           ) : null}
+        </>
+      )}
 
       <AdaptiveModalSheet
         visible={isLogsModalOpen}
@@ -447,6 +435,11 @@ const styles = StyleSheet.create((theme) => ({
     flexWrap: "wrap",
     justifyContent: "flex-end",
   },
+  loadingCard: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: theme.spacing[6],
+  },
   statusValueGroup: {
     alignItems: "flex-end",
     gap: 2,

packages/app/src/desktop/hooks/use-daemon-status.ts

@@ -0,0 +1,53 @@
+import { useCallback } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  getDesktopDaemonLogs,
+  getDesktopDaemonStatus,
+  shouldUseDesktopDaemon,
+  type DesktopDaemonLogs,
+  type DesktopDaemonStatus,
+} from "@/desktop/daemon/desktop-daemon";
+
+const DAEMON_STATUS_QUERY_KEY = ["desktopDaemonStatus"] as const;
+
+interface DaemonStatusData {
+  status: DesktopDaemonStatus;
+  logs: DesktopDaemonLogs;
+}
+
+export function useDaemonStatus() {
+  const queryClient = useQueryClient();
+  const enabled = shouldUseDesktopDaemon();
+
+  const query = useQuery<DaemonStatusData>({
+    queryKey: DAEMON_STATUS_QUERY_KEY,
+    enabled,
+    staleTime: 30_000,
+    refetchOnMount: "always",
+    queryFn: async () => {
+      const [status, logs] = await Promise.all([getDesktopDaemonStatus(), getDesktopDaemonLogs()]);
+      return { status, logs };
+    },
+  });
+
+  const setStatus = useCallback(
+    (status: DesktopDaemonStatus) => {
+      queryClient.setQueryData<DaemonStatusData>(DAEMON_STATUS_QUERY_KEY, (prev) =>
+        prev ? { ...prev, status } : undefined,
+      );
+    },
+    [queryClient],
+  );
+
+  const refetch = useCallback(() => {
+    void queryClient.invalidateQueries({ queryKey: DAEMON_STATUS_QUERY_KEY });
+  }, [queryClient]);
+
+  return {
+    data: query.data ?? null,
+    isLoading: query.isLoading,
+    error: query.error instanceof Error ? query.error.message : null,
+    setStatus,
+    refetch,
+  };
+}