@open-mercato/core 0.7.0 → 0.7.1-develop.7102.1.b41f7e3e51

package/src/modules/customers/components/calendar/editor/PeopleField.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from 'react'
+import { z } from 'zod'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Avatar } from '@open-mercato/ui/primitives/avatar'
@@ -11,6 +12,15 @@ import { composeAccessibleName } from '../../../lib/calendar/labels'
 import { searchPeopleOptions, type PersonOption } from './lookups'
 import { CONTROL_BORDER, DROPDOWN_PANEL_CLASS, PersonChip, UppercaseBadge, useDropdownDismiss } from './inputs'
 
+// Mirrors the server-side guest rule in `interactionParticipantSchema`: a
+// participant with no user record is addressable only by a routable email.
+const guestEmailSchema = z.string().email().max(320)
+
+function normalizeEmail(email: string | null | undefined): string | null {
+  const normalized = email?.trim().toLowerCase()
+  return normalized ? normalized : null
+}
+
 export function PeopleField({
   mode,
   placeholder,
@@ -63,12 +73,38 @@ export function PeopleField({
   const selectedIds = new Set(value.map((participant) => participant.userId))
   const visibleOptions = options.filter((option) => !selectedIds.has(option.userId))
 
+  // An external guest has no record to search for, so a typed address that
+  // matches nothing is the only way to invite one (#5115). Multi mode only —
+  // the single-mode field is the task assignee, which becomes `ownerUserId` and
+  // must resolve to a real staff user.
+  const typedEmail = normalizeEmail(query)
+  const selectedEmails = new Set(
+    value.map((participant) => normalizeEmail(participant.email)).filter((email): email is string => email !== null),
+  )
+  const guestEmail =
+    mode === 'multi' &&
+    typedEmail !== null &&
+    guestEmailSchema.safeParse(typedEmail).success &&
+    !selectedEmails.has(typedEmail) &&
+    !options.some((option) => normalizeEmail(option.email) === typedEmail)
+      ? typedEmail
+      : null
+  const guestLabel = guestEmail
+    ? t('customers.calendar.editor.addGuest', 'Invite {email} as a guest', { email: guestEmail })
+    : ''
+
   const customerBadge = (
     <UppercaseBadge className="bg-status-info-bg text-status-info-text">
       {t('customers.calendar.editor.customerBadge', 'Customer')}
     </UppercaseBadge>
   )
 
+  const guestBadge = (
+    <UppercaseBadge className="bg-muted text-muted-foreground">
+      {t('customers.calendar.editor.guestBadge', 'Guest')}
+    </UppercaseBadge>
+  )
+
   return (
     <div
       ref={rootRef}
@@ -84,12 +120,12 @@ export function PeopleField({
           CONTROL_BORDER,
         )}
       >
-        {value.map((participant) => (
+        {value.map((participant, index) => (
           <PersonChip
-            key={participant.userId}
+            key={participant.userId ?? participant.email ?? index}
             name={participant.name}
-            badge={participant.isCustomer ? customerBadge : undefined}
-            onRemove={() => onChange(value.filter((entry) => entry.userId !== participant.userId))}
+            badge={participant.isCustomer ? customerBadge : participant.userId ? undefined : guestBadge}
+            onRemove={() => onChange(value.filter((_, entryIndex) => entryIndex !== index))}
             removeLabel={t('customers.calendar.editor.removePerson', 'Remove {name}', { name: participant.name })}
           />
         ))}
@@ -113,11 +149,31 @@ export function PeopleField({
               {t('customers.calendar.editor.searching', 'Searching…')}
             </p>
           ) : null}
-          {!loading && visibleOptions.length === 0 ? (
+          {!loading && visibleOptions.length === 0 && !guestEmail ? (
             <p className="px-2 py-3 text-center text-xs text-muted-foreground">
               {t('customers.calendar.editor.noResults', 'No results')}
             </p>
           ) : null}
+          {!loading && guestEmail ? (
+            <Button
+              type="button"
+              variant="ghost"
+              role="option"
+              aria-selected={false}
+              aria-label={guestLabel}
+              title={guestLabel}
+              onClick={() => {
+                const participant: EditorParticipant = { name: guestEmail, email: guestEmail, isCustomer: false }
+                onChange([...value, participant])
+                setQuery('')
+              }}
+              className="h-auto w-full justify-start gap-2 whitespace-normal px-2 py-1.5 text-left text-sm font-normal text-foreground"
+            >
+              <Avatar size="xs" label={guestEmail} />
+              <span className="min-w-0 flex-1 truncate">{guestLabel}</span>
+              {guestBadge}
+            </Button>
+          ) : null}
           {!loading
             ? visibleOptions.map((option) => (
                 <Button

package/src/modules/customers/components/calendar/editor/hooks.ts

@@ -8,6 +8,7 @@ import { computeDurationMinutes, type EditorFormState, type EditorKindConfig } f
 import { findEditorConflictItems } from '../../../lib/calendar/conflicts'
 import type { ConflictScope } from '../../../lib/calendar/preferences'
 import { mapInteractionToCalendarItem } from '../../../lib/calendar/mapItem'
+import { participantActorKey } from '../../../lib/calendar/participantIdentity'
 import { expandOccurrences } from '../../../lib/calendar/recurrence'
 import { getFetchWindow } from '../../../lib/calendar/range'
 import type { CalendarItem } from '../types'
@@ -72,7 +73,12 @@ export function useConflictProbe(
 ): string | null {
   const t = useT()
   const [conflict, setConflict] = React.useState<string | null>(null)
-  const participantsKey = form.participants.map((participant) => participant.userId).join(',')
+  // Keys on the canonical actor key, not the raw userId — an external guest has
+  // no userId, so a userId-only key never changes when guests are added or
+  // removed and the probe would keep reporting the previous attendee set.
+  const participantsKey = form.participants
+    .map((participant) => participantActorKey(participant) ?? '')
+    .join(',')
   React.useEffect(() => {
     if (!open || !form.date) {
       setConflict(null)

package/src/modules/customers/components/calendar/types.ts

@@ -18,7 +18,7 @@ export type CalendarRange = { from: Date; to: Date }
 
 const calendarParticipantSchema = z
   .object({
-    userId: z.string(),
+    userId: z.string().optional(),
     name: z.string().optional(),
     email: z.string().optional(),
   })
@@ -49,7 +49,7 @@ export const calendarInteractionPayloadSchema = z
 
 export type CalendarInteractionPayload = z.infer<typeof calendarInteractionPayloadSchema>
 
-export type CalendarParticipant = { userId: string; name?: string; email?: string }
+export type CalendarParticipant = { userId?: string; name?: string; email?: string }
 
 export interface CalendarItem {
   id: string

package/src/modules/customers/components/detail/CompanyKpiBar.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import { EyeOff } from 'lucide-react'
-import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useT, useLocale } from '@open-mercato/shared/lib/i18n/context'
 import { KpiCard, type KpiTrend } from '@open-mercato/ui/backend/charts/KpiCard'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
@@ -67,6 +67,7 @@ type CompanyKpiBarProps = {
 
 export function CompanyKpiBar({ data }: CompanyKpiBarProps) {
   const t = useT()
+  const locale = useLocale()
 
   const activeDeals = React.useMemo(() => getActiveDeals(data.deals), [data.deals])
   const activeDealsValue = React.useMemo(
@@ -126,7 +127,7 @@ export function CompanyKpiBar({ data }: CompanyKpiBarProps) {
       title: t('customers.companies.dashboard.kpi.activeDeals', 'ACTIVE DEALS'),
       value: activeDealsValue,
       trend: dealTrend,
-      formatValue: (v: number) => formatCurrency(v, dealCurrency),
+      formatValue: (v: number) => formatCurrency(v, dealCurrency, locale),
       comparisonLabel: `${data.kpis?.activeDealsCount ?? activeDeals.length} ${(data.kpis?.activeDealsCount ?? activeDeals.length) === 1 ? 'pipeline' : 'pipelines'}`,
     },
     {
@@ -140,7 +141,7 @@ export function CompanyKpiBar({ data }: CompanyKpiBarProps) {
       id: 'ltv',
       title: t('customers.companies.dashboard.kpi.ltv', 'CUSTOMER VALUE (LTV)'),
       value: ltvValue,
-      formatValue: ltvValue !== null ? (v: number) => formatCurrency(v, dealCurrency) : undefined,
+      formatValue: ltvValue !== null ? (v: number) => formatCurrency(v, dealCurrency, locale) : undefined,
       comparisonLabel: ltvValue !== null
         ? t('customers.companies.dashboard.kpi.wonDeals', 'won deals total')
         : t('customers.companies.dashboard.kpi.noWonDeals', 'No won deals'),
@@ -158,7 +159,7 @@ export function CompanyKpiBar({ data }: CompanyKpiBarProps) {
         ? `${data.kpis?.completedDealsCount ?? data.deals.filter((d) => isWonDealStatus(d.status)).length} ${t('customers.companies.dashboard.kpi.completedDeals', 'completed deals')}`
         : t('customers.companies.dashboard.kpi.noInteractions', 'No interactions yet'),
     },
-  ], [t, activeDealsValue, dealTrend, dealCurrency, activeDeals.length, activityTrend, ltvValue, clientTenureYears, data.deals, data.interactions.length, data.kpis])
+  ], [t, locale, activeDealsValue, dealTrend, dealCurrency, activeDeals.length, activityTrend, ltvValue, clientTenureYears, data.deals, data.interactions.length, data.kpis])
 
   const visibleTiles = kpiTiles.filter((tile) => !hiddenTiles.has(tile.id))
 

package/src/modules/customers/components/detail/CompanyPeopleSection.tsx

@@ -14,6 +14,7 @@ import {
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { createTranslatorWithFallback } from '@open-mercato/shared/lib/i18n/translate'
 import { useAppEvent } from '@open-mercato/ui/backend/injection/useAppEvent'
+import type { AppEventPayload } from '@open-mercato/shared/modules/widgets/injection'
 import type { SectionAction, TabEmptyStateConfig, Translator } from './types'
 import { CreatePersonDialog } from './CreatePersonDialog'
 import { PersonCard } from './PersonCard'
@@ -322,13 +323,19 @@ export function CompanyPeopleSection({
     void loadVisiblePeople()
   }, [loadVisiblePeople])
 
-  useAppEvent('customers.person_company_link.deleted', (event) => {
+  const reloadOnCompanyDetach = React.useCallback((event: AppEventPayload) => {
     const payload = event.payload as { companyEntityId?: string | null } | null | undefined
     if (payload && payload.companyEntityId === companyId) {
       void loadVisiblePeople()
     }
   }, [companyId, loadVisiblePeople])
 
+  useAppEvent('customers.person_company_link.deleted', reloadOnCompanyDetach, [reloadOnCompanyDetach])
+  // Legacy profile-only assignments have no link row, so their detach broadcasts this sibling
+  // event instead of `customers.person_company_link.deleted` (#5114). Without it, other viewers
+  // of the same company keep listing a person who is already gone.
+  useAppEvent('customers.person.company_assignment.detached', reloadOnCompanyDetach, [reloadOnCompanyDetach])
+
   React.useEffect(() => {
     setListPage(1)
   }, [searchQuery, sortMode])

package/src/modules/customers/components/detail/DealForm.tsx

@@ -102,6 +102,12 @@ type EntityMultiSelectProps = {
   fetchByIds: (ids: string[]) => Promise<EntityOption[]>
   disabled?: boolean
   autoFocus?: boolean
+  /**
+   * Minimum trimmed query length before a lookup request is issued. Defaults to
+   * `1`, so a blank input never queries the address book (issue #5118). Set `0`
+   * to opt back into prefetching an unfiltered first page on mount.
+   */
+  minQueryLength?: number
 }
 
 const DEAL_ENTITY_IDS = [E.customers.customer_deal]
@@ -353,6 +359,7 @@ function EntityMultiSelect({
   fetchByIds,
   disabled = false,
   autoFocus = false,
+  minQueryLength = 1,
 }: EntityMultiSelectProps) {
   const [input, setInput] = React.useState('')
   const [suggestions, setSuggestions] = React.useState<EntityOption[]>([])
@@ -401,11 +408,18 @@ function EntityMultiSelect({
       setLoading(false)
       return
     }
+    const term = input.trim()
+    if (term.length < minQueryLength) {
+      setSuggestions([])
+      setLoading(false)
+      setError(null)
+      return
+    }
     let cancelled = false
     const handler = window.setTimeout(async () => {
       setLoading(true)
       try {
-        const results = await search(input.trim())
+        const results = await search(term)
         if (cancelled) return
         setSuggestions(results)
         setCache((prev) => {
@@ -429,7 +443,7 @@ function EntityMultiSelect({
       cancelled = true
       window.clearTimeout(handler)
     }
-  }, [disabled, errorLabel, input, search])
+  }, [disabled, errorLabel, input, minQueryLength, search])
 
   const filteredSuggestions = React.useMemo(
     () => suggestions.filter((option) => !normalizedValue.includes(option.id)),
@@ -660,12 +674,14 @@ export function DealPeopleSelector({
   options = [],
   disabled = false,
   autoFocus = false,
+  minQueryLength,
 }: {
   value: string[]
   onChange: (next: string[]) => void
   options?: EntityOption[]
   disabled?: boolean
   autoFocus?: boolean
+  minQueryLength?: number
 }) {
   const t = useT()
   const { searchPeople, fetchPeopleByIds } = useDealAssociationLookups()
@@ -685,6 +701,7 @@ export function DealPeopleSelector({
       fetchByIds={fetchPeopleByIds}
       disabled={disabled}
       autoFocus={autoFocus}
+      minQueryLength={minQueryLength}
     />
   )
 }
@@ -694,11 +711,13 @@ export function DealCompaniesSelector({
   onChange,
   options = [],
   disabled = false,
+  minQueryLength,
 }: {
   value: string[]
   onChange: (next: string[]) => void
   options?: EntityOption[]
   disabled?: boolean
+  minQueryLength?: number
 }) {
   const t = useT()
   const { searchCompanies, fetchCompaniesByIds } = useDealAssociationLookups()
@@ -717,6 +736,7 @@ export function DealCompaniesSelector({
       search={searchCompanies}
       fetchByIds={fetchCompaniesByIds}
       disabled={disabled}
+      minQueryLength={minQueryLength}
     />
   )
 }

package/src/modules/customers/components/detail/DealsSection.tsx

@@ -12,7 +12,7 @@ import { LinkEntityDialog } from '../linking/LinkEntityDialog'
 import { createDealLinkAdapter } from '../linking/adapters/dealAdapter'
 import { LoadingMessage, TabEmptyState } from '@open-mercato/ui/backend/detail'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
-import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useT, useLocale } from '@open-mercato/shared/lib/i18n/context'
 import { hasMoreFromPage } from '@open-mercato/shared/lib/pagination/load-more'
 import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
 import { E } from '#generated/entities.ids.generated'
@@ -275,9 +275,14 @@ function normalizeDeal(deal: Partial<DealSummary> & { id: string; title?: string
   }
 }
 
-function formatValueLabel(amount: number | null, currency: string | null, emptyLabel: string): string {
+function formatValueLabel(
+  amount: number | null,
+  currency: string | null,
+  emptyLabel: string,
+  locale?: string,
+): string {
   if (typeof amount === 'number') {
-    const formatter = new Intl.NumberFormat(undefined, {
+    const formatter = new Intl.NumberFormat(locale, {
       style: currency ? 'currency' : 'decimal',
       currency: currency ?? undefined,
       maximumFractionDigits: 2,
@@ -317,6 +322,7 @@ export function DealsSection({
   runGuardedMutation,
 }: DealsSectionProps) {
   const tHook = useT()
+  const locale = useLocale()
   const { confirm, ConfirmDialogElement } = useConfirmDialog()
   const fallbackTranslator = React.useMemo<Translator>(() => createTranslatorWithFallback(tHook), [tHook])
   const t: Translator = React.useMemo(() => translator ?? fallbackTranslator, [translator, fallbackTranslator])
@@ -963,8 +969,8 @@ export function DealsSection({
           ) : null}
           <div className="space-y-4">
             {sortedDeals.map((deal) => {
-          const valueLabel = formatValueLabel(deal.valueAmount, deal.valueCurrency ?? null, emptyLabel)
-          const expectedLabel = deal.expectedCloseAt ? formatDate(deal.expectedCloseAt) ?? emptyLabel : emptyLabel
+          const valueLabel = formatValueLabel(deal.valueAmount, deal.valueCurrency ?? null, emptyLabel, locale)
+          const expectedLabel = deal.expectedCloseAt ? formatDate(deal.expectedCloseAt, locale) ?? emptyLabel : emptyLabel
           const probabilityLabel =
             typeof deal.probability === 'number' ? `${deal.probability}%` : emptyLabel
           const isUnlinkPending = pendingAction?.kind === 'remove' && pendingAction.id === deal.id

package/src/modules/customers/components/detail/EntityTagsDialog.tsx

@@ -6,6 +6,7 @@ import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { cn, slugifyTagLabel } from '@open-mercato/shared/lib/utils'
+import { hasMoreFromPage } from '@open-mercato/shared/lib/pagination/load-more'
 import { apiCall, apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
@@ -388,8 +389,19 @@ export function EntityTagsDialog({
   const [creatingKind, setCreatingKind] = React.useState<string | null>(null)
   const [manageTagsOpen, setManageTagsOpen] = React.useState(false)
   const [activeCategoryPage, setActiveCategoryPage] = React.useState(1)
-  const [activeCategoryTotalPages, setActiveCategoryTotalPages] = React.useState(1)
+  // Short-page termination instead of `page < totalPages` — see
+  // `hasMoreFromPage`. Like the page number it belongs to whichever category is
+  // active: the fetch effect below rewrites it on every category, search and
+  // page change, and the reset effect clears it alongside the page so a
+  // category with more entries never leaves the affordance behind on one
+  // without.
+  const [activeCategoryHasMore, setActiveCategoryHasMore] = React.useState(false)
   const [activeCategoryLoading, setActiveCategoryLoading] = React.useState(false)
+  // A transport failure is not an end-of-list signal: it leaves the affordance
+  // in place and turns the next click into a retry of the page that failed,
+  // rather than advancing past it.
+  const [activeCategoryLoadFailed, setActiveCategoryLoadFailed] = React.useState(false)
+  const [activeCategoryReloadToken, setActiveCategoryReloadToken] = React.useState(0)
   const creationInFlightRef = React.useRef<string | null>(null)
   const mutationContextId = React.useMemo(
     () => `customer-tags:${entityType}:${entityId}`,
@@ -713,12 +725,15 @@ export function EntityTagsDialog({
   React.useEffect(() => {
     if (!open) return
     setActiveCategoryPage(1)
+    setActiveCategoryHasMore(false)
+    setActiveCategoryLoadFailed(false)
   }, [activeCategoryKind, open, searchValue])
 
   React.useEffect(() => {
     if (!open || !activeCategoryKindValue || (activeCategorySource !== 'tags' && activeCategorySource !== 'labels')) {
       setActiveCategoryLoading(false)
-      setActiveCategoryTotalPages(1)
+      setActiveCategoryHasMore(false)
+      setActiveCategoryLoadFailed(false)
       return
     }
 
@@ -752,16 +767,36 @@ export function EntityTagsDialog({
       }))
 
     setActiveCategoryLoading(true)
-    void apiCall<{ items?: Array<DictEntry | LabelItem>; totalPages?: number }>(endpoint, {
+    void apiCall<{ items?: Array<DictEntry | LabelItem>; page?: number }>(endpoint, {
       cache: 'no-store',
       headers: { 'x-om-unauthorized-redirect': '0' },
     })
       .then((response) => {
-        if (!response.ok || cancelled) return
-        const fetchedEntries = mapEntries(Array.isArray(response.result?.items) ? response.result.items : [])
-        setActiveCategoryTotalPages(
-          typeof response.result?.totalPages === 'number' ? response.result.totalPages : 1,
+        if (cancelled) return
+        if (!response.ok) {
+          setActiveCategoryLoadFailed(true)
+          return
+        }
+        setActiveCategoryLoadFailed(false)
+        const servedEntries = Array.isArray(response.result?.items) ? response.result.items : []
+        const fetchedEntries = mapEntries(servedEntries)
+        // The two sources paginate differently. `/api/customers/tags` is a
+        // query-engine list, so a page past the end comes back empty and the
+        // served count alone terminates the sequence. `/api/customers/labels`
+        // clamps the requested page to the last one and re-serves it in full
+        // forever, so short-page termination needs the second half of the
+        // helper's obligation 2: take an echoed page below the one asked for as
+        // the end of the list. Same guard as `AttachmentsSection`, whose
+        // endpoint clamps the same way.
+        const returnedPage =
+          typeof response.result?.page === 'number' ? response.result.page : activeCategoryPage
+        const servedRequestedPage = returnedPage >= activeCategoryPage
+        // Measured on what the endpoint served, before `mergeOptions` folds the
+        // page into the entries already on screen.
+        setActiveCategoryHasMore(
+          servedRequestedPage && hasMoreFromPage(servedEntries.length, REMOTE_CATEGORY_PAGE_SIZE),
         )
+        if (!servedRequestedPage) return
         updateCategoryEntries(activeCategoryKindValue, (currentEntries) =>
           activeCategoryPage <= 1
             ? mergeOptions(seedEntries, fetchedEntries)
@@ -770,8 +805,10 @@ export function EntityTagsDialog({
       })
       .catch(() => {
         if (cancelled) return
-        setActiveCategoryTotalPages(1)
-        updateCategoryEntries(activeCategoryKindValue, () => seedEntries)
+        setActiveCategoryLoadFailed(true)
+        if (activeCategoryPage <= 1) {
+          updateCategoryEntries(activeCategoryKindValue, () => seedEntries)
+        }
       })
       .finally(() => {
         if (!cancelled) {
@@ -785,6 +822,7 @@ export function EntityTagsDialog({
   }, [
     activeCategoryKindValue,
     activeCategoryPage,
+    activeCategoryReloadToken,
     activeCategorySource,
     entityId,
     entityOrganizationId,
@@ -1250,15 +1288,23 @@ export function EntityTagsDialog({
                               {t('customers.personTags.loading', 'Loading...')}
                             </div>
                           ) : null}
-                          {(activeCategory.source === 'tags' || activeCategory.source === 'labels') && activeCategoryPage < activeCategoryTotalPages ? (
+                          {(activeCategory.source === 'tags' || activeCategory.source === 'labels') && activeCategoryHasMore ? (
                             <Button
                               type="button"
                               variant="outline"
                               size="sm"
                               className="rounded-lg px-3 text-xs"
-                              onClick={() => setActiveCategoryPage((current) => current + 1)}
+                              onClick={() => {
+                                if (activeCategoryLoadFailed) {
+                                  setActiveCategoryReloadToken((current) => current + 1)
+                                  return
+                                }
+                                setActiveCategoryPage((current) => current + 1)
+                              }}
                             >
-                              {t('customers.activities.loadMore', 'Load more')}
+                              {activeCategoryLoadFailed
+                                ? t('customers.personTags.retry', 'Retry')
+                                : t('customers.activities.loadMore', 'Load more')}
                             </Button>
                           ) : null}
                         </div>

package/src/modules/customers/components/detail/PersonCompaniesSection.tsx

@@ -10,6 +10,7 @@ import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
 import { useAppEvent } from '@open-mercato/ui/backend/injection/useAppEvent'
+import type { AppEventPayload } from '@open-mercato/shared/modules/widgets/injection'
 import { CompanyCard, type EnrichedCompanyData } from './CompanyCard'
 import { useCustomerDictionary } from './hooks/useCustomerDictionary'
 import { LinkEntityDialog, type LinkEntityOption } from '../linking/LinkEntityDialog'
@@ -369,13 +370,19 @@ export function PersonCompaniesSection({
     [_personName, confirm, loadData, onChanged, personId, runWriteMutation, t, unlinkingId],
   )
 
-  useAppEvent('customers.person_company_link.deleted', (event) => {
+  const reloadOnPersonDetach = React.useCallback((event: AppEventPayload) => {
     const payload = event.payload as { personEntityId?: string | null } | null | undefined
     if (payload && payload.personEntityId === personId) {
       void loadData({ showLoading: false })
     }
   }, [personId, loadData])
 
+  useAppEvent('customers.person_company_link.deleted', reloadOnPersonDetach, [reloadOnPersonDetach])
+  // Legacy profile-only assignments have no link row, so their detach broadcasts this sibling
+  // event instead of `customers.person_company_link.deleted` (#5114). Without it, other viewers
+  // of the same person keep listing a company that is already detached.
+  useAppEvent('customers.person.company_assignment.detached', reloadOnPersonDetach, [reloadOnPersonDetach])
+
   return (
     <>
       <div className="space-y-4">

package/src/modules/customers/components/detail/hooks/usePersonTasks.ts

@@ -7,6 +7,7 @@ import { resolveTodoApiPath } from '../utils'
 import type { TodoLinkSummary } from '../types'
 import { generateTempId } from '@open-mercato/core/modules/customers/lib/detailHelpers'
 import { parseBooleanToken } from '@open-mercato/shared/lib/boolean'
+import { hasMoreFromPage } from '@open-mercato/shared/lib/pagination/load-more'
 import { CUSTOMER_INTERACTION_TASK_SOURCE } from '../../../lib/interactionCompatibility'
 
 const DEFAULT_TODO_SOURCE = CUSTOMER_INTERACTION_TASK_SOURCE
@@ -29,12 +30,15 @@ type CustomerTodoRow = {
   createdAt: string
 }
 
+// `/api/customers/todos` also reports `totalPages`, deliberately left out of
+// this type: the load-more affordance terminates on a short page instead — see
+// `hasMoreFromPage`. `total` stays because it feeds the section's count badge,
+// where an under-report is cosmetic rather than a way to strand rows.
 type CustomerTodosResponse = {
   items: CustomerTodoRow[]
   total: number
   page: number
   pageSize: number
-  totalPages: number
 }
 
 export type TaskFormPayload = {
@@ -172,9 +176,9 @@ export function usePersonTasks({
   pageSize = 20,
 }: UsePersonTasksOptions): UsePersonTasksResult {
   const [tasks, setTasks] = React.useState<TodoLinkSummary[]>(initialTasks)
-  const [pageInfo, setPageInfo] = React.useState<{ page: number; totalPages: number; total: number }>({
+  const [pageInfo, setPageInfo] = React.useState<{ page: number; hasMore: boolean; total: number }>({
     page: 1,
-    totalPages: 1,
+    hasMore: false,
     total: initialTasks.length,
   })
   const [isInitialLoading, setIsInitialLoading] = React.useState<boolean>(() => Boolean(entityId))
@@ -187,12 +191,18 @@ export function usePersonTasks({
     const mapped = Array.isArray(payload.items) ? payload.items.map(mapRowToSummary) : []
     setPageInfo({
       page: payload.page ?? 1,
-      totalPages: payload.totalPages ?? 0,
+      // Short-page termination instead of `page < totalPages` — see
+      // `hasMoreFromPage`. `mapRowToSummary` is a 1:1 map and the `mergeUnique`
+      // dedupe happens after this, so `mapped.length` is what the server served.
+      // Measured against the page size the server echoed rather than the one
+      // requested, so a page size the endpoint narrows server-side cannot make a
+      // full page read as short and silently end the sequence.
+      hasMore: hasMoreFromPage(mapped.length, payload.pageSize ?? pageSize),
       total: payload.total ?? mapped.length,
     })
     setError(null)
     return mapped
-  }, [])
+  }, [pageSize])
 
   const fetchPage = React.useCallback(
     async (page: number): Promise<CustomerTodosResponse> => {
@@ -202,7 +212,6 @@ export function usePersonTasks({
           total: 0,
           page: 1,
           pageSize,
-          totalPages: 1,
         }
       }
       const params = new URLSearchParams({
@@ -222,7 +231,7 @@ export function usePersonTasks({
   const refresh = React.useCallback(async () => {
     if (!entityId) {
       setTasks([])
-      setPageInfo({ page: 1, totalPages: 1, total: 0 })
+      setPageInfo({ page: 1, hasMore: false, total: 0 })
       return
     }
     setIsInitialLoading(true)
@@ -242,7 +251,7 @@ export function usePersonTasks({
   const loadMore = React.useCallback(async () => {
     if (!entityId) return
     if (isLoadingMore) return
-    if (pageInfo.page >= pageInfo.totalPages) return
+    if (!pageInfo.hasMore) return
     setIsLoadingMore(true)
     try {
       const payload = await fetchPage(pageInfo.page + 1)
@@ -255,12 +264,12 @@ export function usePersonTasks({
     } finally {
       setIsLoadingMore(false)
     }
-  }, [entityId, fetchPage, isLoadingMore, mapResponse, pageInfo.page, pageInfo.totalPages])
+  }, [entityId, fetchPage, isLoadingMore, mapResponse, pageInfo.hasMore, pageInfo.page])
 
   React.useEffect(() => {
     if (!entityId) {
       setTasks([])
-      setPageInfo({ page: 1, totalPages: 1, total: 0 })
+      setPageInfo({ page: 1, hasMore: false, total: 0 })
       setError(null)
       setIsInitialLoading(false)
       return
@@ -268,7 +277,7 @@ export function usePersonTasks({
     setTasks(initialTasks)
     setPageInfo({
       page: 1,
-      totalPages: 1,
+      hasMore: false,
       total: initialTasks.length,
     })
     setError(null)
@@ -342,7 +351,7 @@ export function usePersonTasks({
         setTasks((prev) => [newTask, ...prev])
         setPageInfo((prev) => ({
           page: 1,
-          totalPages: prev.totalPages,
+          hasMore: prev.hasMore,
           total: prev.total + 1,
         }))
         await refresh()
@@ -466,7 +475,7 @@ export function usePersonTasks({
         setTasks((prev) => prev.filter((item) => item.id !== task.id))
         setPageInfo((prev) => ({
           page: prev.page,
-          totalPages: prev.totalPages,
+          hasMore: prev.hasMore,
           total: Math.max(0, prev.total - 1),
         }))
       } finally {
@@ -476,7 +485,7 @@ export function usePersonTasks({
     [],
   )
 
-  const hasMore = entityId != null && pageInfo.page < pageInfo.totalPages
+  const hasMore = entityId != null && pageInfo.hasMore
 
   return {
     tasks,