fix(composer): react to desktop preference updates

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
 import {
   Button,
   cn,
@@ -22,6 +22,7 @@ import {
   BROWSER_SESSION_RESOURCE_ID,
   TERMINAL_SESSION_RESOURCE_ID,
 } from '@/lib/copilot/resources/types'
+import { subscribeDesktopPreferences } from '@/lib/desktop'
 import { isTerminalAvailable } from '@/lib/terminal/transport'
 import {
   type AvailableItem,
@@ -145,6 +146,16 @@ export function useAvailableResources(
 ): AvailableResources {
   const enabled = options?.enabled ?? true
   const excludeTypes = options?.excludeTypes
+  const browserAvailable = useSyncExternalStore(
+    subscribeDesktopPreferences,
+    isBrowserAgentAvailable,
+    () => false
+  )
+  const terminalAvailable = useSyncExternalStore(
+    subscribeDesktopPreferences,
+    isTerminalAvailable,
+    () => false
+  )
   // Destructured without `= []` defaults on purpose: a literal default allocates a
   // fresh array every render while `data` is undefined (exactly the disabled state),
   // which would bust the group memo below on every render. Undefined is stable.
@@ -292,7 +303,7 @@ export function useAvailableResources(
     ]
     // The live browser panel — desktop app only (needs the agent-browser
     // bridge). There is one top-level panel; repeated launches open inner tabs.
-    if (isBrowserAgentAvailable()) {
+    if (browserAvailable) {
       groups.push({
         type: 'browser' as const,
         items: [
@@ -305,7 +316,7 @@ export function useAvailableResources(
     }
     // The live terminal — desktop app only (needs the PTY bridge), and a
     // single top-level panel like the browser.
-    if (isTerminalAvailable()) {
+    if (terminalAvailable) {
       groups.push({
         type: 'terminal' as const,
         items: [
@@ -319,6 +330,8 @@ export function useAvailableResources(
     return groups.filter((g) => !excluded.has(g.type)).sort(byResourceMenuOrder)
   }, [
     enabled,
+    browserAvailable,
+    terminalAvailable,
     workflows,
     folders,
     fileFolders,

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/plus-menu-dropdown/plus-menu-dropdown.test.tsx

@@ -2,6 +2,7 @@
  * @vitest-environment jsdom
  */
 import { act, createRef } from 'react'
+import type { DesktopPreferences } from '@sim/desktop-bridge'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -51,6 +52,7 @@ import {
   BROWSER_SESSION_RESOURCE_ID,
   TERMINAL_SESSION_RESOURCE_ID,
 } from '@/lib/copilot/resources/types'
+import { setDesktopPreferencesSnapshot } from '@/lib/desktop'
 import {
   mapResourceToContext,
   type PlusMenuHandle,
@@ -60,6 +62,16 @@ import { PlusMenuDropdown } from '@/app/workspace/[workspaceId]/home/components/
 let root: Root
 let container: HTMLDivElement
 
+const PREFERENCES: DesktopPreferences = {
+  notificationsEnabled: true,
+  notificationSounds: true,
+  notificationsOnlyWhenUnfocused: true,
+  launchAtLogin: false,
+  autoDownloadUpdates: true,
+  browserEnabled: true,
+  terminalEnabled: true,
+}
+
 function openMenu(mention = false) {
   const ref = createRef<PlusMenuHandle>()
   const onResourceSelect = vi.fn()
@@ -110,6 +122,7 @@ describe('PlusMenuDropdown desktop resources', () => {
     vi.clearAllMocks()
     fixtures.browserAvailable.mockReturnValue(true)
     fixtures.terminalAvailable.mockReturnValue(true)
+    setDesktopPreferencesSnapshot(PREFERENCES)
     Object.defineProperty(Element.prototype, 'scrollIntoView', {
       configurable: true,
       value: vi.fn(),
@@ -165,6 +178,19 @@ describe('PlusMenuDropdown desktop resources', () => {
     })
   })
 
+  it.each([false, true])(
+    'updates mounted desktop rows when preferences change in mention=%s mode',
+    (mention) => {
+      openMenu(mention)
+      expect(menuItems().map((item) => item.textContent)).toContain('Browser')
+
+      fixtures.browserAvailable.mockReturnValue(false)
+      act(() => setDesktopPreferencesSnapshot({ ...PREFERENCES, browserEnabled: false }))
+      expect(menuItems().map((item) => item.textContent)).not.toContain('Browser')
+      expect(menuItems().map((item) => item.textContent)).toContain('Terminal')
+    }
+  )
+
   it('finds Browser through plus-menu search and selects it with Enter', () => {
     const { onResourceSelect } = openMenu()
     const search = document.querySelector<HTMLInputElement>(

apps/sim/lib/desktop/index.ts

@@ -75,25 +75,32 @@ export function prefersInPlaceNavigation(): boolean {
  * reads availability synchronously while the shell only answers over async
  * IPC. An unread value uses the shell default (enabled).
  *
- * The cache is authoritative at call time, which is what tool execution and
- * capability reporting need. React trees that read it in a memo settle on the
- * next mount — flipping a switch happens on a settings route, so the chat view
- * has unmounted by then anyway.
+ * Synchronous callers read the cache at call time. React consumers subscribe
+ * to the same snapshot so asynchronous initialization and settings changes
+ * update mounted UI without keeping a second copy of the preferences.
  */
 let devicePreferences: DesktopPreferences | null = null
 let devicePreferencesLoad: Promise<void> | null = null
+const devicePreferencesListeners = new Set<() => void>()
 
 function loadDevicePreferences(): Promise<void> {
   devicePreferencesLoad ??=
     getDesktopBridge()
       ?.settings.getPreferences()
-      .then((preferences) => {
-        devicePreferences = preferences
-      })
+      .then(setDesktopPreferencesSnapshot)
       .catch(() => {}) ?? Promise.resolve()
   return devicePreferencesLoad
 }
 
+/** Subscribes React consumers to the shared desktop-preference snapshot. */
+export function subscribeDesktopPreferences(listener: () => void): () => void {
+  devicePreferencesListeners.add(listener)
+  void loadDevicePreferences()
+  return () => {
+    devicePreferencesListeners.delete(listener)
+  }
+}
+
 function isSurfaceSwitchedOn(key: 'browserEnabled' | 'terminalEnabled'): boolean {
   void loadDevicePreferences()
   return devicePreferences?.[key] !== false
@@ -106,6 +113,7 @@ function isSurfaceSwitchedOn(key: 'browserEnabled' | 'terminalEnabled'): boolean
 export function setDesktopPreferencesSnapshot(preferences: DesktopPreferences): void {
   devicePreferences = preferences
   devicePreferencesLoad = Promise.resolve()
+  for (const listener of devicePreferencesListeners) listener()
 }
 
 /** True when the agent browser is installed and switched on for this device. */

apps/sim/lib/desktop/preferences-loading.test.ts

@@ -0,0 +1,57 @@
+/**
+ * @vitest-environment node
+ */
+import type { DesktopPreferences } from '@sim/desktop-bridge'
+import { afterEach, expect, it, vi } from 'vitest'
+import {
+  isBrowserAgentEnabled,
+  isTerminalEnabled,
+  setDesktopPreferencesSnapshot,
+  subscribeDesktopPreferences,
+} from '@/lib/desktop'
+
+afterEach(() => vi.unstubAllGlobals())
+
+it('publishes asynchronous startup preferences and later settings changes to subscribers', async () => {
+  const preferences: DesktopPreferences = {
+    notificationsEnabled: true,
+    notificationSounds: true,
+    notificationsOnlyWhenUnfocused: true,
+    launchAtLogin: false,
+    autoDownloadUpdates: true,
+    browserEnabled: false,
+    terminalEnabled: true,
+  }
+  const pending = Promise.withResolvers<DesktopPreferences>()
+  const getPreferences = vi.fn(() => pending.promise)
+  vi.stubGlobal('window', { simDesktop: { settings: { getPreferences } } })
+  const listener = vi.fn()
+  const unsubscribe = subscribeDesktopPreferences(listener)
+  const otherListener = vi.fn()
+  const unsubscribeOther = subscribeDesktopPreferences(otherListener)
+
+  try {
+    expect(getPreferences).toHaveBeenCalledOnce()
+    expect(isBrowserAgentEnabled()).toBe(true)
+    expect(isTerminalEnabled()).toBe(true)
+    expect(listener).not.toHaveBeenCalled()
+
+    pending.resolve(preferences)
+    await pending.promise
+    expect(listener).toHaveBeenCalledOnce()
+    expect(otherListener).toHaveBeenCalledOnce()
+    expect(isBrowserAgentEnabled()).toBe(false)
+    expect(isTerminalEnabled()).toBe(true)
+
+    unsubscribeOther()
+    const next = { ...preferences, browserEnabled: true }
+    setDesktopPreferencesSnapshot(next)
+    expect(listener).toHaveBeenCalledTimes(2)
+    expect(otherListener).toHaveBeenCalledOnce()
+    expect(isBrowserAgentEnabled()).toBe(true)
+    expect(getPreferences).toHaveBeenCalledOnce()
+  } finally {
+    unsubscribe()
+    unsubscribeOther()
+  }
+})