fix(people): keep provisioning responsive during directory sync

Author: waleedlatif1

apps/docs/content/docs/search/people.mdx.draft

@@ -46,7 +46,7 @@ The directory controls the name, title, department, and reporting line of the pe
 
 People keeps the last published chart visible until the full replacement passes validation. If a provider asks Sim to slow down, the status shows when the next attempt is allowed. Sim keeps its place and resumes from the last completed page. A refresh still unfinished after seven days restarts from the source on its next eligible run. An empty directory removes its entries only after a successful refresh.
 
-SCIM user changes queue a refresh for the next scheduler pass. Sim reads the organization’s locally provisioned profiles together and publishes their reporting lines in one update.
+SCIM user changes queue a refresh for the next scheduler pass, including changes that arrive while a refresh is running. Sim reads locally provisioned profiles together and publishes their reporting lines in one update. When SCIM deactivates or removes someone, their directory-managed profile is hidden immediately.
 
 After a failure, check the status for the cause. Correct invalid or duplicate email addresses and reporting loops in the source. Check credentials and directory permissions for an access failure, then select **Retry sync** when available.
 

apps/sim/app/api/organizations/[id]/people/departments/route.ts

@@ -1,13 +1,16 @@
 import { listDepartmentsContract } from '@/lib/api/contracts/people'
 import { cursorRoute, cursorScopeKey } from '@/lib/api/cursor-binding'
+import { departmentFilterKey } from '@/lib/api/server/people-presenters'
 import {
   defineInternalJsonRoute,
   internalOrchestrationErrorPolicy,
   internalRateLimits,
   internalSessionAuth,
 } from '@/lib/api/server/routes'
 import { listDepartments } from '@/lib/people/application/use-cases'
-import { readSortedCursor, writeSortedCursor } from '@/app/api/v2/lib/response'
+import { cursorSortKey, decodeOffsetCursor, encodeOffsetCursor } from '@/app/api/v2/lib/response'
+
+const SORT = cursorSortKey('department', 'asc')
 
 function scope(id: string, search?: string) {
   return cursorScopeKey(cursorRoute(listDepartmentsContract, { id }), { search })
@@ -24,15 +27,16 @@ export const GET = defineInternalJsonRoute({
   mapInput: ({ params, query }) => ({
     organizationId: params.id,
     search: query.search,
-    cursorKeys: readSortedCursor(query.cursor, 'department', 'asc', scope(params.id, query.search)),
+    offset: decodeOffsetCursor(query.cursor, SORT, scope(params.id, query.search)),
   }),
-  present: ({ data, nextCursorKeys }, { input }) => ({
-    departments: data,
-    nextCursor: writeSortedCursor(
-      nextCursorKeys,
-      'department',
-      'asc',
-      scope(input.organizationId, input.search)
-    ),
+  present: ({ data, nextOffset }, { input }) => ({
+    departments: data.map((department) => ({
+      ...department,
+      departmentKey: departmentFilterKey(department.name),
+    })),
+    nextCursor:
+      nextOffset === null
+        ? null
+        : encodeOffsetCursor(SORT, scope(input.organizationId, input.search), nextOffset),
   }),
 })

apps/sim/app/api/organizations/[id]/people/route.ts

@@ -15,9 +15,15 @@ function cursorScope(
   id: string,
   search: string | undefined,
   department: string | undefined,
+  departmentKey: string | undefined,
   scope?: 'roots' | 'members'
 ) {
-  return cursorScopeKey(cursorRoute(listPeopleContract, { id }), { search, department, scope })
+  return cursorScopeKey(cursorRoute(listPeopleContract, { id }), {
+    search,
+    department,
+    departmentKey,
+    scope,
+  })
 }
 
 export const GET = defineInternalJsonRoute({
@@ -32,21 +38,29 @@ export const GET = defineInternalJsonRoute({
     organizationId: params.id,
     search: query.search,
     department: query.department,
+    departmentKey: query.departmentKey,
     scope: query.scope,
     cursorKeys: readSortedCursor(
       query.cursor,
       'name',
       'asc',
-      cursorScope(params.id, query.search, query.department, query.scope)
+      cursorScope(params.id, query.search, query.department, query.departmentKey, query.scope)
     ),
   }),
-  present: ({ data, nextCursorKeys }, { input }) => ({
+  present: ({ data, nextCursorKeys, selectedDepartment }, { input }) => ({
     people: data.map(presentPerson),
+    selectedDepartment,
     nextCursor: writeSortedCursor(
       nextCursorKeys,
       'name',
       'asc',
-      cursorScope(input.organizationId, input.search, input.department, input.scope)
+      cursorScope(
+        input.organizationId,
+        input.search,
+        input.department,
+        input.departmentKey,
+        input.scope
+      )
     ),
   }),
 })

apps/sim/app/o/[organizationId]/people/[memberId]/person.tsx

@@ -167,13 +167,14 @@ export function Person({ organizationId, memberId }: PersonProps) {
               <SettingsField label='Department'>
                 {data.person.department ? (
                   <Link
-                    className='text-[var(--text-body)] text-sm hover:underline'
+                    className='break-all text-[var(--text-body)] text-sm hover:underline'
                     href={serializePeopleView(routes.people, {
                       ...origin,
                       view: 'directory',
                       search: '',
                       panel: null,
-                      department: data.person.department,
+                      department: data.person.departmentKey ? null : data.person.department,
+                      departmentKey: data.person.departmentKey ?? null,
                     })}
                   >
                     {data.person.department}

apps/sim/app/o/[organizationId]/people/chart-canvas.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { type MouseEvent, useMemo } from 'react'
-import { Avatar, cn, Tooltip } from '@sim/emcn'
+import { Avatar, cn, OverflowText, Tooltip } from '@sim/emcn'
 import { ArrowUpRight, ChevronRight, Minus, Plus } from '@sim/emcn/icons'
 import {
   BLOCK_DIMENSIONS,
@@ -68,24 +68,19 @@ function PersonCard({ data }: NodeProps<CardNode>) {
       <span className='relative flex flex-1 items-center gap-2.5 px-3'>
         <Avatar size='md' name={person.name} src={person.image} aria-hidden />
         <span className={cn('flex min-w-0 flex-col gap-0.5', !focused && 'pr-5')}>
-          <span
-            className='truncate font-medium text-[var(--text-primary)] text-base'
-            title={person.name}
-          >
-            {person.name}
-          </span>
-          <span
-            className='truncate text-[var(--text-secondary)] text-small'
-            title={person.title || person.email}
-          >
-            {person.title || person.email}
-          </span>
+          <OverflowText
+            label={person.name}
+            focusTarget='nearest-interactive'
+            className='font-medium text-[var(--text-primary)] text-base'
+          />
+          <OverflowText
+            label={person.title || person.email}
+            className='text-[var(--text-secondary)] text-small'
+          />
         </span>
       </span>
       <span className='relative mx-3 flex h-8 min-w-0 shrink-0 items-center justify-between gap-2 border-[var(--border)] border-t text-[var(--text-secondary)] text-caption'>
-        <span className='min-w-0 truncate' title={focused ? (department ?? undefined) : undefined}>
-          {focused ? department || relation : relation}
-        </span>
+        <OverflowText label={focused ? department || relation : relation} />
         <span className='flex shrink-0 items-center gap-1 text-[var(--text-body)]'>
           {focused ? (
             <>

apps/sim/app/o/[organizationId]/people/loading-status.tsx

@@ -10,7 +10,7 @@ export function LoadingStatus({ children }: LoadingStatusProps) {
       role='status'
       className='m-auto flex items-center gap-2 text-[var(--text-muted)] text-small'
     >
-      <Loader />
+      <Loader animate />
       {children}
     </div>
   )

apps/sim/app/o/[organizationId]/people/people-chart.tsx

@@ -8,7 +8,15 @@ import {
   useLayoutEffect,
   useRef,
 } from 'react'
-import { Button, Chip, ChipCombobox } from '@sim/emcn'
+import {
+  Button,
+  Chip,
+  ChipCombobox,
+  cn,
+  scrollFadeAttributes,
+  scrollFadeXClass,
+  useScrollEdges,
+} from '@sim/emcn'
 import { ChevronLeft, ChevronRight, Search } from '@sim/emcn/icons'
 import { useQueryStates } from 'nuqs'
 import { EmptyState } from '@/components/empty-state/empty-state'
@@ -54,6 +62,7 @@ function FindPerson({ organizationId, onSelect, rootsLabel }: FindPersonProps) {
           </span>
         )
       }
+      overlayLabel={rootsLabel ?? 'Find a person'}
       placeholder={rootsLabel ?? 'Find a person'}
       searchPlaceholder={rootsLabel ? 'Search team leads…' : 'Search name, title or email…'}
       className={rootsLabel ? 'max-w-48' : 'w-44 max-w-full'}
@@ -67,6 +76,26 @@ function FindPerson({ organizationId, onSelect, rootsLabel }: FindPersonProps) {
   )
 }
 
+interface ReportingPathProps {
+  children: ReactNode
+}
+
+function ReportingPath({ children }: ReportingPathProps) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const edges = useScrollEdges(scrollRef, { axis: 'x' })
+  return (
+    <nav aria-label='Reporting path' className='shrink-0 border-[var(--border)] border-y'>
+      <div
+        ref={scrollRef}
+        className={cn('overflow-x-auto px-4 py-1.5 text-small', scrollFadeXClass)}
+        {...scrollFadeAttributes(edges)}
+      >
+        <div className='flex w-max min-w-full items-center gap-1'>{children}</div>
+      </div>
+    </nav>
+  )
+}
+
 export function PeopleChart({ organizationId, viewSwitch, onImport, onSync }: PeopleChartProps) {
   const { organization } = useOrganizationContext()
   const [origin, setView] = useQueryStates(peopleParsers, peopleUrlKeys)
@@ -155,10 +184,7 @@ export function PeopleChart({ organizationId, viewSwitch, onImport, onSync }: Pe
         </div>
       ) : branch ? (
         <>
-          <nav
-            aria-label='Reporting path'
-            className='flex shrink-0 items-center gap-1 overflow-x-auto border-[var(--border)] border-y px-4 py-1.5 text-small'
-          >
+          <ReportingPath>
             <div className='shrink-0'>
               <FindPerson
                 organizationId={organizationId}
@@ -186,7 +212,7 @@ export function PeopleChart({ organizationId, viewSwitch, onImport, onSync }: Pe
             >
               {branch.person.name}
             </h2>
-          </nav>
+          </ReportingPath>
           <ChartCanvas
             key={`${branch.person.memberId}/${branch.page}/${size}`}
             organizationId={organizationId}