apps/box: fix Diagnostics listActivePlugins infinite loop

The Diagnostics screen kept the device + go-fula busy in a recursive
listActivePlugins → store-update → useEffect-refire → listActivePlugins
loop, visible as 2x "listActivePlugins in react-native started" per
tick on the app console and eventual crash.

Root cause is a two-layer trap:

1. Diagnostics.screen.tsx had a single useEffect that both CALLED
   listActivePlugins() AND depended on activePlugins. Each call updates
   the store, which re-triggers the effect. The lint suppression and
   "stable enough" comment masked the bug.

2. usePluginsStore.listActivePlugins did set({ activePlugins: [] })
   for both the empty-list case AND the null-msg case (the latter
   happens whenever go-fula's active-plugins.txt is empty: its
   readActivePlugins returns [""], the listActivePluginsImpl filters
   out empty strings leaving nil, which JSON-marshals to null). Every
   call created a fresh [] reference, and zustand's shallow equality
   flagged that as a change. So even consumers without the latent
   effect bug would re-render unnecessarily.

Why this surfaced now: the prior commit (cbca913, Loyal Agent tab
swap) promoted DiagnosticsScreen from a Settings stack child to a
top-level tab. The bug existed before but only fired when a user
manually navigated to Settings then Diagnostics. As a top-level tab
the screen mounts on app open, and the loop kicks off immediately.

Fix:

Diagnostics.screen.tsx — split into two effects so the fetcher does
not depend on what it sets:
- Effect A: listActivePlugins() once on mount, flips hasFetched true
  in finally().
- Effect B: derives pluginPresence from activePlugins whenever it
  changes, gated on hasFetched so the initial empty-store state does
  not flash a one-frame "Blox AI not installed" before the response
  lands.

usePluginsStore.ts — defense-in-depth reference-stable update. Only
set if the new contents differ from the old. Protects any future
consumer that depends on activePlugins by reference, not just
Diagnostics.

Audited other activePlugins consumers (Plugin.screen.tsx,
GlobalBottomSheet.tsx) — neither has a useEffect that both calls
listActivePlugins AND depends on activePlugins, so neither had this
specific bug. Plugin.screen.tsx's effects depend on listActivePlugins
the setter (referentially stable from zustand), not on activePlugins
the state. Store dedup still helps them avoid spurious re-renders.

Tests: 23/23 Diagnostics jest tests pass. Pre-existing
ApprovalModal.test.tsx module-resolve failure is unrelated (jest
moduleNameMapper infra; ApprovalModal not touched).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: ehsan6sha

apps/box/src/screens/Diagnostics/Diagnostics.screen.tsx

@@ -94,31 +94,47 @@ export const DiagnosticsScreen: React.FC = () => {
 
     // Plugin presence — tolerant of pre-plugin firmware per Codex review:
     // missing data ≠ "not installed", so the UI copy avoids overclaiming.
+    //
+    // Split into two effects to avoid the infinite-loop trap:
+    //   (1) fetch once on mount — listActivePlugins() updates the store,
+    //       which would re-fire any effect that depends on activePlugins.
+    //   (2) react to store changes — derives pluginPresence from whatever
+    //       activePlugins currently is. No fetching here, so updating
+    //       activePlugins (whether via the mount fetch, an install action
+    //       elsewhere, or a future polling refresh) flips presence without
+    //       re-triggering the fetch.
+    // The previous single-effect form (which called listActivePlugins
+    // inside an effect that depended on activePlugins) looped forever
+    // because the store creates a fresh `[]` reference on every empty
+    // result and zustand's shallow equality flags that as a change.
+    const [hasFetched, setHasFetched] = React.useState(false);
+
     React.useEffect(() => {
-        let cancelled = false;
-        (async () => {
-            try {
-                await listActivePlugins();
-            } catch {
+        listActivePlugins()
+            .catch(() => {
                 // listActivePlugins captures its own errors into the store
-            }
-            if (cancelled) return;
-            const list = (activePlugins || []) as string[];
-            if (!Array.isArray(list)) {
-                setPluginPresence('notInstalledOrUnavailable');
-                return;
-            }
-            setPluginPresence(
-                list.includes(BLOX_AI_PLUGIN_NAME)
-                    ? 'installed'
-                    : 'notInstalledOrUnavailable'
-            );
-        })();
-        return () => { cancelled = true; };
-    // listActivePlugins/activePlugins from zustand are stable enough; we want
-    // this to run on every mount AND when activePlugins flips
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activePlugins]);
+            })
+            .finally(() => setHasFetched(true));
+        // listActivePlugins is the zustand setter — referentially stable.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    React.useEffect(() => {
+        // Wait for the mount fetch before deriving presence — without this,
+        // the initial activePlugins=[] from the store would flash a
+        // one-frame "Blox AI not installed" before the real response lands.
+        if (!hasFetched) return;
+        const list = (activePlugins || []) as string[];
+        if (!Array.isArray(list)) {
+            setPluginPresence('notInstalledOrUnavailable');
+            return;
+        }
+        setPluginPresence(
+            list.includes(BLOX_AI_PLUGIN_NAME)
+                ? 'installed'
+                : 'notInstalledOrUnavailable'
+        );
+    }, [activePlugins, hasFetched]);
 
     return (
         <FxKeyboardAwareScrollView>

apps/box/src/stores/usePluginsStore.ts

@@ -81,13 +81,36 @@ const createPluginsModelSlice: StateCreator<
         const result = await fxblox.listActivePlugins();
         if (result.status) {
           if (result.msg && Array.isArray(result.msg)) {
-            set({ activePlugins: result.msg });
+            // Reference-stable update: only `set` if the contents actually
+            // changed. zustand uses shallow equality; without this guard
+            // every call produces a new array reference even when the
+            // contents are identical, which re-renders every subscriber
+            // and is what caused the Diagnostics-screen listActivePlugins
+            // infinite loop (effect dep on activePlugins → fetch → new
+            // [] → state change → effect fires → fetch …).
+            const next = result.msg as string[];
+            const prev = get().activePlugins;
+            const same =
+              Array.isArray(prev) &&
+              prev.length === next.length &&
+              prev.every((p, i) => p === next[i]);
+            if (!same) {
+              set({ activePlugins: next });
+            }
             return {
               success: true,
               message: 'Active plugins listed successfully',
             };
           } else {
-            set({ activePlugins: [] });
+            // Same guard for the empty case: msg=null from go-fula (which
+            // happens when active-plugins.txt is empty — its filter strips
+            // empty strings, leaving nil that JSON-marshals to null) used
+            // to fire `set({ activePlugins: [] })` on every call, producing
+            // a fresh [] reference and the same re-render storm.
+            const prev = get().activePlugins;
+            if (!Array.isArray(prev) || prev.length !== 0) {
+              set({ activePlugins: [] });
+            }
             return { success: true, message: 'No active plugins found' };
           }
         } else {