feat(people): add Agent Installed column and hide deactivated users by default (#2331)

Add a color-coded "Agent" column to the People table showing device agent
installation status (green dot for installed, red for not installed).
Platform admins and deactivated members show a dash. Deactivated users are
now hidden by default unless explicitly filtered. Migrates Laptop icon from
lucide-react to @trycompai/design-system/icons.

Co-authored-by: Mariano Fuentes <marfuen98@gmail.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 3 people

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

@@ -1,6 +1,5 @@
 'use client';
 
-import { Laptop } from 'lucide-react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { useState } from 'react';
@@ -33,7 +32,7 @@ import {
   TableRow,
   Text,
 } from '@trycompai/design-system';
-import { Checkmark, Edit, OverflowMenuVertical, TrashCan } from '@trycompai/design-system/icons';
+import { Checkmark, Edit, Laptop, OverflowMenuVertical, TrashCan } from '@trycompai/design-system/icons';
 
 import { toast } from 'sonner';
 import { MultiRoleCombobox } from './MultiRoleCombobox';
@@ -232,6 +231,26 @@ export function MemberRow({
           </div>
         </TableCell>
 
+        {/* AGENT */}
+        <TableCell>
+          {isPlatformAdmin || isDeactivated ? (
+            <Text size="sm" variant="muted">
+              —
+            </Text>
+          ) : (
+            <div className="flex items-center gap-2">
+              <span
+                className={`inline-block h-2 w-2 rounded-full ${
+                  hasDeviceAgentDevice ? 'bg-green-500' : 'bg-red-400'
+                }`}
+              />
+              <span className={`text-sm ${hasDeviceAgentDevice ? 'text-foreground' : 'text-muted-foreground'}`}>
+                {hasDeviceAgentDevice ? 'Installed' : 'Not Installed'}
+              </span>
+            </div>
+          )}
+        </TableCell>
+
         {/* TASKS */}
         <TableCell>
           {taskCompletion ? (
@@ -284,7 +303,7 @@ export function MemberRow({
                         setIsRemoveDeviceAlertOpen(true);
                       }}
                     >
-                      <Laptop className="mr-2 h-4 w-4" />
+                      <Laptop size={16} className="mr-2" />
                       <span>Remove Device</span>
                     </DropdownMenuItem>
                   )}

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

@@ -100,6 +100,13 @@ export function PendingInvitationRow({
           </div>
         </TableCell>
 
+        {/* AGENT */}
+        <TableCell>
+          <Text size="sm" variant="muted">
+            —
+          </Text>
+        </TableCell>
+
         {/* TASKS */}
         <TableCell>
           <Text size="sm" variant="muted">

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

@@ -182,13 +182,15 @@ export function TeamMembersClient({
     // Check if the role filter matches any of the member's roles
     const matchesRole = !roleFilter || item.processedRoles.includes(roleFilter);
 
-    // Status filter: 'active' shows non-deactivated members + pending invitations
+    // Status filter: by default (no filter), hide deactivated members
+    // 'active' explicitly shows non-deactivated members + pending invitations
     // 'deactivated' shows only deactivated members
-    // empty shows everything
+    // 'all' shows everything
     const matchesStatus =
-      !statusFilter ||
-      (statusFilter === 'active' && item.displayStatus !== 'deactivated') ||
-      (statusFilter === 'deactivated' && item.displayStatus === 'deactivated');
+      (statusFilter === 'all') ||
+      (statusFilter === 'deactivated' && item.displayStatus === 'deactivated') ||
+      (!statusFilter && item.displayStatus !== 'deactivated') ||
+      (statusFilter === 'active' && item.displayStatus !== 'deactivated');
 
     return matchesSearch && matchesRole && matchesStatus;
   });
@@ -307,12 +309,12 @@ export function TeamMembersClient({
           <Select
             value={statusFilter || undefined}
             onValueChange={(value) => {
-              setStatusFilter(value === 'all' ? '' : (value ?? ''));
+              setStatusFilter(value ?? '');
               setPage(1);
             }}
           >
             <SelectTrigger>
-              <SelectValue placeholder="All People" />
+              <SelectValue placeholder="Active" />
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="all">All People</SelectItem>
@@ -511,6 +513,7 @@ export function TeamMembersClient({
               <TableHead>
                 <div className="w-[160px]">ROLE</div>
               </TableHead>
+              <TableHead>AGENT</TableHead>
               <TableHead>TASKS</TableHead>
               <TableHead>ACTIONS</TableHead>
             </TableRow>