fix(computer-use): mount the device controls only once the permission group allows them

Their effects no longer call the native helper for loading or restricted members.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/desktop/computer-use.test.tsx

@@ -8,6 +8,7 @@ import type {
 import { toast } from '@sim/emcn'
 import { createDeferred } from '@sim/testing/helpers/deferred'
 import { libDesktopMock, libDesktopMockFns } from '@sim/testing/mocks/lib-desktop.mock'
+import { nextNavigationMockFns } from '@sim/testing/mocks/next-navigation.mock'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, expect, it, vi } from 'vitest'
 import { DEFAULT_PERMISSION_GROUP_CONFIG } from '@/lib/permission-groups/fields'
@@ -30,7 +31,10 @@ vi.mock('@/ee/access-control/hooks/permission-groups', () => ({
       ? { isSuccess: true, data: { config: permission.config } }
       : { isSuccess: false, data: undefined },
 }))
-vi.mock('next/navigation', () => ({ useParams: () => ({ workspaceId: 'ws-1' }) }))
+vi.mock(
+  'next/navigation',
+  async () => (await import('@sim/testing/mocks/next-navigation.mock')).nextNavigationMock
+)
 vi.mock('@/lib/desktop', () => libDesktopMock)
 
 const initialPermissions = [
@@ -46,6 +50,7 @@ let container: HTMLDivElement
 beforeEach(() => {
   permission.config = null
   permission.ready = true
+  nextNavigationMockFns.mockUseParams.mockReturnValue({ workspaceId: 'ws-1' })
   permissions = [...initialPermissions]
   activity = null
   listeners = new Set()
@@ -98,6 +103,7 @@ it('withholds the device controls until the permission read succeeds', async ()
   await act(async () => renderSettings())
   expect(appRow('com.example.First')).toBeUndefined()
   expect(container.querySelector('[role="switch"]')).toBeNull()
+  expect(native.listAppPermissions).not.toHaveBeenCalled()
 })
 
 function appRow(bundleId: string) {

apps/sim/app/workspace/[workspaceId]/settings/components/desktop/computer-use.tsx

@@ -11,20 +11,25 @@ import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/componen
 import { useUserPermissionConfig } from '@/ee/access-control/hooks/permission-groups'
 import { useComputerUseStatus } from '@/hooks/use-computer-use-status'
 
+/** The activity stays visible so an in-flight action can be stopped; the device controls need the permission group's consent. */
 export function ComputerUseSettings() {
+  const { workspaceId } = useParams<{ workspaceId: string }>()
+  const permission = useUserPermissionConfig(workspaceId)
+  const allowed =
+    permission.isSuccess &&
+    (permission.data.config === null ||
+      !CAPABILITY_RULES['computer_use.use'].deniedBy(permission.data.config))
   return (
     <>
       <ComputerUseActivity />
-      <ComputerUseSettingsControls />
+      {allowed && <ComputerUseSettingsControls />}
     </>
   )
 }
 
 function ComputerUseSettingsControls() {
   const requestVersion = useRef(0)
   const bridge = getDesktopBridge()?.computerUse
-  const { workspaceId } = useParams<{ workspaceId: string }>()
-  const permission = useUserPermissionConfig(workspaceId)
   const { status, setStatus, refresh, error } = useComputerUseStatus()
   const [apps, setApps] = useState<ComputerUseAppPermission[]>([])
   const [pending, setPending] = useState(false)
@@ -44,14 +49,7 @@ function ComputerUseSettingsControls() {
       requestVersion.current += 1
     }
   }, [refreshApps, status?.activeAction])
-  if (
-    !bridge ||
-    !permission.isSuccess ||
-    (permission.data.config !== null &&
-      CAPABILITY_RULES['computer_use.use'].deniedBy(permission.data.config)) ||
-    status?.supported === false
-  )
-    return null
+  if (!bridge || status?.supported === false) return null
   const update = async (action: () => Promise<void>) => {
     setPending(true)
     try {