fix(people): address review feedback on devices and export button (#2587)

- Guard host.mdm access in fleet-hosts route to avoid runtime TypeError
- Show loading/error states in DevicesTabContent so the compliance chart no longer flashes an empty-state while fetching
- Render a skeleton in the MemberRow device column while device data loads instead of defaulting to 'Not Installed'
- Replace hand-rolled button styles on PopoverTrigger with base-ui render pattern using Button

Co-authored-by: Lewis Carhart <lewis@Lewiss-MacBook-Air.local>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 3 people

apps/app/src/app/(app)/[orgId]/auditor/(overview)/components/ExportEvidenceButton.tsx

@@ -40,9 +40,7 @@ export function ExportEvidenceButton({ organizationName }: ExportEvidenceButtonP
 
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-7 px-2 cursor-pointer">
-        Export All Evidence
-      </PopoverTrigger>
+      <PopoverTrigger render={<Button variant="outline">Export All Evidence</Button>} />
       <PopoverContent align="end" side="bottom" sideOffset={8}>
         <PopoverHeader>
           <PopoverTitle>Export Options</PopoverTitle>

apps/app/src/app/(app)/[orgId]/people/all/components/MemberRow.tsx

@@ -28,6 +28,7 @@ import {
   Badge,
   HStack,
   Label,
+  Skeleton,
   TableCell,
   TableRow,
   Text,
@@ -52,6 +53,7 @@ interface MemberRowProps {
   customRoles?: CustomRoleOption[];
   taskCompletion?: TaskCompletion;
   deviceStatus?: 'compliant' | 'non-compliant' | 'not-installed';
+  isDeviceStatusLoading?: boolean;
 }
 
 function getInitials(name?: string | null, email?: string | null): string {
@@ -96,6 +98,7 @@ export function MemberRow({
   customRoles = [],
   taskCompletion,
   deviceStatus,
+  isDeviceStatusLoading = false,
 }: MemberRowProps) {
   const { orgId } = useParams<{ orgId: string }>();
 
@@ -233,7 +236,15 @@ export function MemberRow({
 
         {/* DEVICE */}
         <TableCell>
-          {isPlatformAdmin || isDeactivated || !deviceStatus ? (
+          {isPlatformAdmin || isDeactivated ? (
+            <Text size="sm" variant="muted">
+              —
+            </Text>
+          ) : isDeviceStatusLoading ? (
+            <div className="h-4 w-24">
+              <Skeleton style={{ height: '100%', width: '100%' }} />
+            </div>
+          ) : !deviceStatus ? (
             <Text size="sm" variant="muted">
               —
             </Text>

apps/app/src/app/(app)/[orgId]/people/all/components/TeamMembersClient.tsx

@@ -68,8 +68,9 @@ export function TeamMembersClient({
   taskCompletionMap,
   complianceMemberIds,
 }: TeamMembersClientProps) {
-  const { agentDevices } = useAgentDevices();
-  const { fleetHosts } = useFleetHosts();
+  const { agentDevices, isLoading: isAgentDevicesLoading } = useAgentDevices();
+  const { fleetHosts, isLoading: isFleetHostsLoading } = useFleetHosts();
+  const isDeviceStatusLoading = isAgentDevicesLoading || isFleetHostsLoading;
 
   const deviceStatusMap = useMemo(() => {
     const map: Record<string, 'compliant' | 'non-compliant' | 'not-installed'> =
@@ -504,6 +505,7 @@ export function TeamMembersClient({
                   customRoles={customRoles}
                   taskCompletion={taskCompletionMap[(item as MemberWithUser).id]}
                   deviceStatus={deviceStatusMap[(item as MemberWithUser).id]}
+                  isDeviceStatusLoading={isDeviceStatusLoading}
                 />
               ) : (
                 <PendingInvitationRow

apps/app/src/app/(app)/[orgId]/people/devices/components/DevicesTabContent.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Skeleton } from '@trycompai/design-system';
 import { useMemo } from 'react';
 import { useAgentDevices } from '../hooks/useAgentDevices';
 import { useFleetHosts } from '../hooks/useFleetHosts';
@@ -12,8 +13,16 @@ interface DevicesTabContentProps {
 }
 
 export function DevicesTabContent({ isCurrentUserOwner }: DevicesTabContentProps) {
-  const { agentDevices } = useAgentDevices();
-  const { fleetHosts } = useFleetHosts();
+  const {
+    agentDevices,
+    isLoading: isAgentLoading,
+    error: agentError,
+  } = useAgentDevices();
+  const {
+    fleetHosts,
+    isLoading: isFleetLoading,
+    error: fleetError,
+  } = useFleetHosts();
 
   // Filter out Fleet hosts for members who already have device-agent devices.
   // Device agent takes priority over Fleet.
@@ -26,6 +35,27 @@ export function DevicesTabContent({ isCurrentUserOwner }: DevicesTabContentProps
     );
   }, [agentDevices, fleetHosts]);
 
+  const isLoading = isAgentLoading || isFleetLoading;
+  const error = agentError ?? fleetError;
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <div className="my-6 h-[360px] w-full">
+          <Skeleton style={{ height: '100%', width: '100%' }} />
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="my-6 rounded-md border border-destructive/40 bg-destructive/5 p-4 text-sm text-destructive">
+        Failed to load device data. Please try again.
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-6">
       <DeviceComplianceChart

apps/app/src/app/api/people/fleet-hosts/route.ts

@@ -93,7 +93,7 @@ export async function GET() {
                 {
                   id: MDM_POLICY_ID,
                   name: 'MDM Enabled',
-                  response: host.mdm.connected_to_fleet ? 'pass' : 'fail',
+                  response: host.mdm?.connected_to_fleet ? 'pass' : 'fail',
                 },
               ]
             : []),