@open-mercato/core 0.5.1-develop.2800.bfe2178a4f → 0.5.1-develop.2851.2854b4507f

package/src/modules/customers/api/interactions/complete/route.ts

@@ -14,6 +14,7 @@ import {
   validateCrudMutationGuard,
 } from '@open-mercato/shared/lib/crud/mutation-guard'
 import { resolveAuthActorId } from '../../../lib/interactionRequestContext'
+import { withOperationMetadata } from '../../../lib/operationMetadata'
 
 export const metadata = {
   POST: { requireAuth: true, requireFeatures: ['customers.interactions.manage'] },
@@ -56,7 +57,7 @@ export async function POST(req: Request) {
     }
 
     const commandBus = ctx.container.resolve('commandBus') as CommandBus
-    await commandBus.execute<InteractionCompleteInput, { interactionId: string }>(
+    const { logEntry } = await commandBus.execute<InteractionCompleteInput, { interactionId: string }>(
       'customers.interactions.complete',
       { input: parsed, ctx },
     )
@@ -73,7 +74,11 @@ export async function POST(req: Request) {
         metadata: guardResult.metadata ?? null,
       })
     }
-    return NextResponse.json({ ok: true })
+    return withOperationMetadata(
+      NextResponse.json({ ok: true }),
+      logEntry,
+      { resourceKind: 'customers.interaction', resourceId: parsed.id },
+    )
   } catch (err) {
     if (err instanceof CrudHttpError) {
       return NextResponse.json(err.body, { status: err.status })

package/src/modules/customers/backend/customers/deals/page.tsx

@@ -9,7 +9,7 @@ import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { DataTable, type DataTableExportFormat, withDataTableNamespaces } from '@open-mercato/ui/backend/DataTable'
 import type { FilterDef, FilterValues } from '@open-mercato/ui/backend/FilterBar'
 import type { AdvancedFilterState } from '@open-mercato/shared/lib/query/advanced-filter'
-import { serializeAdvancedFilter } from '@open-mercato/shared/lib/query/advanced-filter'
+import { deserializeAdvancedFilter, serializeAdvancedFilter } from '@open-mercato/shared/lib/query/advanced-filter'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { buildCrudExportUrl, deleteCrud } from '@open-mercato/ui/backend/utils/crud'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
@@ -292,7 +292,16 @@ export default function CustomersDealsPage() {
   const [reloadToken, setReloadToken] = React.useState(0)
   const [pendingDeleteId, setPendingDeleteId] = React.useState<string | null>(null)
   const [filterValues, setFilterValues] = React.useState<FilterValues>({})
-  const [advancedFilterState, setAdvancedFilterState] = React.useState<AdvancedFilterState>({ logic: 'and', conditions: [] })
+  const [advancedFilterState, setAdvancedFilterState] = React.useState<AdvancedFilterState>(() => {
+    const params = searchParams
+    if (!params) return { logic: 'and', conditions: [] }
+    const record: Record<string, string> = {}
+    params.forEach((value, key) => {
+      if (key.startsWith('filter[')) record[key] = value
+    })
+    const hydrated = deserializeAdvancedFilter(record)
+    return hydrated ?? { logic: 'and', conditions: [] }
+  })
   const [cacheStatus, setCacheStatus] = React.useState<'hit' | 'miss' | null>(null)
 
   const initialPersonIds = React.useMemo(
@@ -353,7 +362,6 @@ export default function CustomersDealsPage() {
         const base = buildPersonLabel(record)
         let previousLabel = idToLabel[record.id]
         if (previousLabel) {
-          // remove previous label before reassigning
           delete labelToId[previousLabel]
           occupied.delete(previousLabel)
         }
@@ -511,10 +519,9 @@ export default function CustomersDealsPage() {
     })
   }, [scopeVersion, reloadToken])
 
-  const syncFilterLabels = React.useCallback((
+  const syncFilterIds = React.useCallback((
     key: 'people' | 'companies',
     ids: string[],
-    idToLabel: Record<string, string>,
   ) => {
     setFilterValues((prev) => {
       const current = Array.isArray(prev[key]) ? (prev[key] as string[]) : []
@@ -524,24 +531,18 @@ export default function CustomersDealsPage() {
         delete next[key]
         return next
       }
-      const labels: string[] = []
-      ids.forEach((id) => {
-        const label = idToLabel[id]
-        if (label && !labels.includes(label)) labels.push(label)
-      })
-      if (labels.length < ids.length) return prev
-      if (arraysEqual(current, labels)) return prev
-      return { ...prev, [key]: labels }
+      if (arraysEqual(current, ids)) return prev
+      return { ...prev, [key]: [...ids] }
     })
   }, [])
 
   React.useEffect(() => {
-    syncFilterLabels('people', selectedPersonIds, peopleState.idToLabel)
-  }, [selectedPersonIds, peopleState.idToLabel, syncFilterLabels])
+    syncFilterIds('people', selectedPersonIds)
+  }, [selectedPersonIds, syncFilterIds])
 
   React.useEffect(() => {
-    syncFilterLabels('companies', selectedCompanyIds, companiesState.idToLabel)
-  }, [selectedCompanyIds, companiesState.idToLabel, syncFilterLabels])
+    syncFilterIds('companies', selectedCompanyIds)
+  }, [selectedCompanyIds, syncFilterIds])
 
   const handleSearchChange = React.useCallback((value: string) => {
     setSearch(value.trim())
@@ -550,39 +551,34 @@ export default function CustomersDealsPage() {
 
   const handleFiltersApply = React.useCallback((values: FilterValues) => {
     const next: FilterValues = { ...values }
+
     const rawPeople = Array.isArray(values.people) ? (values.people as string[]) : []
-    const nextPersonIds: string[] = []
-    rawPeople.forEach((value) => {
-      const trimmed = typeof value === 'string' ? value.trim() : ''
-      if (!trimmed) return
-      const mapped = peopleState.labelToId[trimmed]
-      if (mapped && !nextPersonIds.includes(mapped)) nextPersonIds.push(mapped)
-    })
+    const nextPersonIds = Array.from(
+      new Set(
+        rawPeople
+          .map((value) => (typeof value === 'string' ? value.trim() : ''))
+          .filter((value) => value.length > 0 && isUuid(value)),
+      ),
+    )
     setSelectedPersonIds(nextPersonIds)
-    if (nextPersonIds.length) {
-      next.people = Array.from(new Set(rawPeople.map((value) => (typeof value === 'string' ? value.trim() : '')).filter((value) => value.length > 0)))
-    } else {
-      delete next.people
-    }
+    if (nextPersonIds.length) next.people = nextPersonIds
+    else delete next.people
 
     const rawCompanies = Array.isArray(values.companies) ? (values.companies as string[]) : []
-    const nextCompanyIds: string[] = []
-    rawCompanies.forEach((value) => {
-      const trimmed = typeof value === 'string' ? value.trim() : ''
-      if (!trimmed) return
-      const mapped = companiesState.labelToId[trimmed]
-      if (mapped && !nextCompanyIds.includes(mapped)) nextCompanyIds.push(mapped)
-    })
+    const nextCompanyIds = Array.from(
+      new Set(
+        rawCompanies
+          .map((value) => (typeof value === 'string' ? value.trim() : ''))
+          .filter((value) => value.length > 0 && isUuid(value)),
+      ),
+    )
     setSelectedCompanyIds(nextCompanyIds)
-    if (nextCompanyIds.length) {
-      next.companies = Array.from(new Set(rawCompanies.map((value) => (typeof value === 'string' ? value.trim() : '')).filter((value) => value.length > 0)))
-    } else {
-      delete next.companies
-    }
+    if (nextCompanyIds.length) next.companies = nextCompanyIds
+    else delete next.companies
 
     setFilterValues(next)
     setPage(1)
-  }, [peopleState.labelToId, companiesState.labelToId])
+  }, [])
 
   const handleFiltersClear = React.useCallback(() => {
     setFilterValues({})
@@ -703,11 +699,15 @@ export default function CustomersDealsPage() {
     if (selectedPersonIds.length) selectedPersonIds.forEach((id) => params.append('personId', id))
     if (selectedCompanyIds.length) selectedCompanyIds.forEach((id) => params.append('companyId', id))
     if (page > 1) params.set('page', String(page))
+    const advancedParams = serializeAdvancedFilter(advancedFilterState)
+    for (const [key, val] of Object.entries(advancedParams)) {
+      params.set(key, val)
+    }
     const next = params.toString()
     if (queryRef.current === next) return
     queryRef.current = next
     router.replace(next ? `${pathname}?${next}` : pathname, { scroll: false })
-  }, [pathname, router, page, search, selectedPersonIds, selectedCompanyIds])
+  }, [pathname, router, page, search, selectedPersonIds, selectedCompanyIds, advancedFilterState])
 
   const handleRefresh = React.useCallback(() => {
     peopleCacheRef.current.clear()
@@ -806,6 +806,8 @@ export default function CustomersDealsPage() {
   const personOptions = peopleState.options
   const companyOptions = companiesState.options
 
+  const peopleIdToLabel = peopleState.idToLabel
+  const companyIdToLabel = companiesState.idToLabel
   const filters = React.useMemo<FilterDef[]>(() => [
     {
       id: 'people',
@@ -814,6 +816,7 @@ export default function CustomersDealsPage() {
       options: personOptions,
       loadOptions: loadPeopleOptions,
       placeholder: t('customers.deals.list.filters.peoplePlaceholder'),
+      formatValue: (value: string) => peopleIdToLabel[value] ?? value,
     },
     {
       id: 'companies',
@@ -822,8 +825,9 @@ export default function CustomersDealsPage() {
       options: companyOptions,
       loadOptions: loadCompanyOptions,
       placeholder: t('customers.deals.list.filters.companiesPlaceholder'),
+      formatValue: (value: string) => companyIdToLabel[value] ?? value,
     },
-  ], [companyOptions, loadCompanyOptions, loadPeopleOptions, personOptions, t])
+  ], [companyIdToLabel, companyOptions, loadCompanyOptions, loadPeopleOptions, peopleIdToLabel, personOptions, t])
 
   const { data: customFieldDefs = [] } = useCustomFieldDefs([E.customers.customer_deal], {
     keyExtras: [scopeVersion, reloadToken],

package/src/modules/customers/commands/comments.ts

@@ -133,6 +133,8 @@ const createCommentCommand: CommandHandler<CommentCreateInput, { commentId: stri
       tenantId: snapshot?.tenantId ?? null,
       organizationId: snapshot?.organizationId ?? null,
       snapshotAfter: snapshot ?? null,
+      relatedResourceKind: snapshot?.dealId ? 'customers.deal' : null,
+      relatedResourceId: snapshot?.dealId ?? null,
       payload: {
         undo: {
           after: snapshot ?? null,
@@ -226,6 +228,8 @@ const updateCommentCommand: CommandHandler<CommentUpdateInput, { commentId: stri
       organizationId: before.organizationId,
       snapshotBefore: before,
       snapshotAfter: afterSnapshot ?? null,
+      relatedResourceKind: (afterSnapshot?.dealId ?? before.dealId) ? 'customers.deal' : null,
+      relatedResourceId: afterSnapshot?.dealId ?? before.dealId ?? null,
       changes,
       payload: {
         undo: {
@@ -332,6 +336,8 @@ const deleteCommentCommand: CommandHandler<{ body?: Record<string, unknown>; que
         tenantId: before.tenantId,
         organizationId: before.organizationId,
         snapshotBefore: before,
+        relatedResourceKind: before.dealId ? 'customers.deal' : null,
+        relatedResourceId: before.dealId ?? null,
         payload: {
           undo: {
             before,

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

@@ -1,7 +1,8 @@
 'use client'
 
 import * as React from 'react'
-import { Search, Check } from 'lucide-react'
+import Link from 'next/link'
+import { Search, Check, Settings2 } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Badge } from '@open-mercato/ui/primitives/badge'
@@ -18,6 +19,8 @@ import type { RoleAssignment } from './RoleAssignmentRow'
 import { fetchAssignableStaffMembersPage } from './assignableStaff'
 import { getInitials } from './utils'
 
+const MANAGE_ROLE_TYPES_HREF = '/backend/config/customers'
+
 type StaffMember = {
   id: string
   displayName: string
@@ -34,6 +37,7 @@ interface AssignRoleDialogProps {
   existingRoleTypes?: Set<string>
   existingAssignments?: RoleAssignment[]
   initialRoleType?: string | null
+  canManageRoleTypes?: boolean
 }
 
 type StepId = 1 | 2 | 3
@@ -55,6 +59,7 @@ export function AssignRoleDialog({
   existingRoleTypes,
   existingAssignments = [],
   initialRoleType = null,
+  canManageRoleTypes = false,
 }: AssignRoleDialogProps) {
   const t = useT()
   const [step, setStep] = React.useState<StepId>(1)
@@ -401,6 +406,16 @@ export function AssignRoleDialog({
                       </Badge>
                     ) : null}
                   </div>
+                  {canManageRoleTypes ? (
+                    <Link
+                      href={MANAGE_ROLE_TYPES_HREF}
+                      className="mt-3 inline-flex items-center gap-1.5 text-xs font-medium text-primary hover:underline"
+                      data-testid="assign-role-dialog-manage-role-types"
+                    >
+                      <Settings2 className="size-3.5" aria-hidden="true" />
+                      {t('customers.roles.dialog.manageRoleTypes', 'Manage role types')}
+                    </Link>
+                  ) : null}
                 </div>
 
                 {!availableRoleTypes.length ? (
@@ -434,14 +449,27 @@ export function AssignRoleDialog({
                         </Badge>
                       </div>
                     </div>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      onClick={() => setStep(1)}
-                    >
-                      {t('customers.roles.dialog.change', 'Change')}
-                    </Button>
+                    <div className="flex items-center gap-2">
+                      {canManageRoleTypes ? (
+                        <Button asChild variant="ghost" size="sm">
+                          <Link
+                            href={MANAGE_ROLE_TYPES_HREF}
+                            data-testid="assign-role-dialog-manage-role-types-step2"
+                          >
+                            <Settings2 className="mr-1 size-3.5" aria-hidden="true" />
+                            {t('customers.roles.dialog.manageRoleTypes', 'Manage role types')}
+                          </Link>
+                        </Button>
+                      ) : null}
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setStep(1)}
+                      >
+                        {t('customers.roles.dialog.change', 'Change')}
+                      </Button>
+                    </div>
                   </div>
                 </div>
 

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

@@ -7,7 +7,9 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
 import { Badge } from '@open-mercato/ui/primitives/badge'
+import { SendObjectMessageDialog } from '@open-mercato/ui/backend/messages'
 import { CompanyTagsDialog } from './CompanyTagsDialog'
+import { ObjectHistoryButton } from './ObjectHistoryButton'
 import { invalidateCustomerDictionary, useCustomerDictionary } from './hooks/useCustomerDictionary'
 import { renderDictionaryIcon } from '../../../dictionaries/components/dictionaryAppearance'
 import type { TagSummary } from './types'
@@ -16,6 +18,8 @@ import type { CompanyOverview } from '../formConfig'
 import type { CustomerDictionaryMap } from '@open-mercato/core/modules/customers/lib/dictionaries'
 import { formatFallbackLabel } from './utils'
 
+const HEADER_ICON_BUTTON_CLASS = 'size-8 rounded-md'
+
 type CompanyDetailHeaderProps = {
   data: CompanyOverview
   onTagsChange: (tags: TagSummary[]) => void
@@ -191,6 +195,27 @@ export function CompanyDetailHeader({
         {/* Right side: actions */}
         <div className="flex w-full shrink-0 flex-col items-start gap-3 sm:w-auto sm:items-end">
           <div className="flex w-full flex-wrap items-center justify-start gap-2 sm:w-auto sm:justify-end">
+            <SendObjectMessageDialog
+              object={{
+                entityModule: 'customers',
+                entityType: 'company',
+                entityId: company.id,
+                previewData: {
+                  title: displayName,
+                  subtitle: company.primaryEmail ?? profile?.websiteUrl ?? undefined,
+                },
+              }}
+              viewHref={`/backend/customers/companies-v2/${company.id}`}
+              buttonVariant="outline"
+              buttonSize="icon"
+              buttonClassName={HEADER_ICON_BUTTON_CLASS}
+              buttonLabel={t('customers.companies.detail.actions.sendMessage', 'Send message')}
+            />
+            <ObjectHistoryButton
+              resourceKind="customers.company"
+              resourceId={company.id}
+              organizationId={company.organizationId ?? undefined}
+            />
             <IconButton
               variant="outline"
               size="sm"

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

@@ -6,7 +6,9 @@ import { cn } from '@open-mercato/shared/lib/utils'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { SendObjectMessageDialog } from '@open-mercato/ui/backend/messages'
 import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+import { ObjectHistoryButton } from './ObjectHistoryButton'
 import { useCustomerDictionary } from './hooks/useCustomerDictionary'
 import { formatFallbackLabel } from './utils'
 import { isTerminalPipelineOutcomeLabel } from './pipelineStageUtils'
@@ -74,6 +76,8 @@ const headerChipDotVariantClasses: Record<HeaderChipVariant, string> = {
   neutral: 'bg-status-neutral-icon',
 }
 
+const HEADER_ICON_BUTTON_CLASS = 'size-8 rounded-md'
+
 function HeaderChip({
   children,
   icon,
@@ -227,6 +231,9 @@ export function DealDetailHeader({
   const showStatusChip = statusLabel && (!deal.closureOutcome || !isTerminalPipelineOutcomeLabel(deal.status))
   const pipelineBadgeLabel = pipelineName ?? null
   const canMoveStage = stageOptions.length > 0 && !deal.closureOutcome && typeof onStageChange === 'function'
+  const messageSubtitle = React.useMemo(() => (
+    [companyLabel, amountLabel].filter(Boolean).join(' · ') || statusLabel || undefined
+  ), [amountLabel, companyLabel, statusLabel])
 
   return (
     <div className="flex flex-col gap-5 xl:flex-row xl:items-start xl:justify-between">
@@ -307,6 +314,28 @@ export function DealDetailHeader({
             isSaving={isStageSaving}
           />
         ) : null}
+        <SendObjectMessageDialog
+          object={{
+            entityModule: 'customers',
+            entityType: 'deal',
+            entityId: deal.id,
+            previewData: {
+              title: deal.title || t('customers.deals.detail.untitled', 'Untitled deal'),
+              subtitle: messageSubtitle,
+            },
+          }}
+          viewHref={`/backend/customers/deals/${deal.id}`}
+          buttonVariant="outline"
+          buttonSize="icon"
+          buttonClassName={HEADER_ICON_BUTTON_CLASS}
+          buttonLabel={t('customers.deals.detail.actions.sendMessage', 'Send message')}
+        />
+        <ObjectHistoryButton
+          resourceKind="customers.deal"
+          resourceId={deal.id}
+          organizationId={deal.organizationId ?? undefined}
+          includeRelated
+        />
         <IconButton
           variant="outline"
           size="sm"

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

@@ -85,11 +85,11 @@ export function DealWonPopup({
 
   return (
     <Dialog open={open} onOpenChange={(nextOpen) => { if (!nextOpen) onClose() }}>
-      <DialogContent className="overflow-hidden p-0 sm:max-w-[420px]">
+      <DialogContent className="max-h-[90vh] overflow-hidden p-0 sm:max-w-[420px]">
         <VisuallyHidden>
           <DialogTitle>{t('customers.deals.detail.won.title', 'Closed successfully')}</DialogTitle>
         </VisuallyHidden>
-        <div className="overflow-hidden rounded-2xl bg-card">
+        <div className="max-h-[90vh] overflow-y-auto rounded-2xl bg-card">
           <div className="px-6 pb-5 pt-6">
             {/* TODO(ds-review): decorative gradient — consider defining a named gradient token if reused */}
             <div className="flex h-[200px] items-center justify-center rounded-2xl bg-[linear-gradient(135deg,rgba(141,150,244,0.5),rgba(198,203,254,0.95))] text-foreground">

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

@@ -1,12 +1,13 @@
 'use client'
 
 import * as React from 'react'
-import { SquarePen, Calendar, Check } from 'lucide-react'
+import { SquarePen, Calendar, Check, ChevronDown, ChevronUp } from 'lucide-react'
 import { z } from 'zod'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { apiCallOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { usePersistedBooleanFlag } from '@open-mercato/ui/backend/crud/usePersistedBooleanFlag'
 import { ActivityTypeSelector, type ActivityType } from './ActivityTypeSelector'
 import { MiniWeekCalendar } from './MiniWeekCalendar'
 
@@ -66,6 +67,24 @@ export function InlineActivityComposer({
   const [errors, setErrors] = React.useState<Record<string, string>>({})
   const descriptionRef = React.useRef<HTMLTextAreaElement>(null)
 
+  const weekPreviewStorageKey = `om:inline-composer:week-preview:${entityType}`
+  const { value: weekPreviewHidden, toggle: toggleWeekPreview } = usePersistedBooleanFlag(
+    weekPreviewStorageKey,
+    false,
+  )
+
+  const resizeDescription = React.useCallback(() => {
+    const el = descriptionRef.current
+    if (!el) return
+    el.style.height = 'auto'
+    const maxHeight = 200
+    el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`
+  }, [])
+
+  React.useEffect(() => {
+    resizeDescription()
+  }, [description, resizeDescription])
+
   const handleTypeSelect = React.useCallback((type: ActivityType) => {
     setSelectedType((previous) => (previous === type ? null : type))
     setErrors({})
@@ -191,19 +210,26 @@ export function InlineActivityComposer({
       {/* Description + date row */}
       <div className="mt-4 flex items-start gap-3">
         <div className="flex-1">
+          <label
+            htmlFor="inline-activity-composer-description"
+            className="mb-1 block text-xs font-medium text-muted-foreground"
+          >
+            {t('customers.activityComposer.descriptionLabel', 'Description')}
+          </label>
           <textarea
             ref={descriptionRef}
+            id="inline-activity-composer-description"
             value={description}
             onChange={(event) => setDescription(event.target.value)}
             placeholder={t('customers.activityComposer.descriptionPlaceholder', 'What happened?')}
-            className="min-h-[44px] w-full resize-none rounded-lg border bg-background px-3 py-2.5 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
-            rows={1}
+            className="min-h-[72px] w-full resize-none rounded-lg border bg-background px-3 py-2.5 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+            rows={3}
           />
           {errors.description ? (
             <p className="mt-1 text-xs text-destructive">{errors.description}</p>
           ) : null}
         </div>
-        <label className="flex shrink-0 cursor-pointer items-center gap-2 rounded-lg border bg-background px-3 py-2.5 text-sm text-muted-foreground">
+        <label className="mt-[22px] flex shrink-0 cursor-pointer items-center gap-2 rounded-lg border bg-background px-3 py-2.5 text-sm text-muted-foreground">
           <Calendar className="size-4" />
           <span className="text-sm font-medium text-foreground">{formatDateBadge(occurredAt, t)}</span>
           <input
@@ -215,9 +241,42 @@ export function InlineActivityComposer({
         </label>
       </div>
 
-      {/* Mini calendar preview */}
       <div className="mt-4">
-        <MiniWeekCalendar entityId={entityId} useCanonicalInteractions={useCanonicalInteractions} refreshRef={calendarRefreshRef} />
+        <div className="mb-2 flex items-center justify-between">
+          <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            {t('customers.activityComposer.weekPreviewTitle', 'This week')}
+          </span>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={toggleWeekPreview}
+            aria-expanded={!weekPreviewHidden}
+            aria-controls="inline-activity-composer-week-preview"
+            className="h-auto px-2 py-1 text-xs text-muted-foreground hover:text-foreground"
+          >
+            {weekPreviewHidden ? (
+              <>
+                <ChevronDown className="mr-1 size-3" />
+                {t('customers.activityComposer.showWeekPreview', 'Show week preview')}
+              </>
+            ) : (
+              <>
+                <ChevronUp className="mr-1 size-3" />
+                {t('customers.activityComposer.hideWeekPreview', 'Hide week preview')}
+              </>
+            )}
+          </Button>
+        </div>
+        {!weekPreviewHidden ? (
+          <div id="inline-activity-composer-week-preview">
+            <MiniWeekCalendar
+              entityId={entityId}
+              useCanonicalInteractions={useCanonicalInteractions}
+              refreshRef={calendarRefreshRef}
+            />
+          </div>
+        ) : null}
       </div>
 
       {/* Scheduled for (optional) */}

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

@@ -0,0 +1,47 @@
+'use client'
+
+import * as React from 'react'
+import { VersionHistoryAction } from '@open-mercato/ui/backend/version-history'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { VersionHistoryConfig } from '@open-mercato/ui/backend/version-history'
+
+export type ObjectHistoryButtonProps = {
+  resourceKind: VersionHistoryConfig['resourceKind']
+  resourceId: VersionHistoryConfig['resourceId']
+  resourceIdFallback?: VersionHistoryConfig['resourceIdFallback']
+  organizationId?: VersionHistoryConfig['organizationId']
+  includeRelated?: VersionHistoryConfig['includeRelated']
+}
+
+const OUTLINE_ICON_BUTTON_CLASSES =
+  'size-8 rounded-md border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50'
+
+export function ObjectHistoryButton({
+  resourceKind,
+  resourceId,
+  resourceIdFallback,
+  organizationId,
+  includeRelated,
+}: ObjectHistoryButtonProps) {
+  const t = useT()
+  const config = React.useMemo<VersionHistoryConfig>(
+    () => ({
+      resourceKind,
+      resourceId,
+      resourceIdFallback,
+      organizationId,
+      includeRelated,
+    }),
+    [resourceKind, resourceId, resourceIdFallback, organizationId, includeRelated],
+  )
+
+  return (
+    <VersionHistoryAction
+      config={config}
+      t={t}
+      buttonClassName={OUTLINE_ICON_BUTTON_CLASSES}
+    />
+  )
+}
+
+export default ObjectHistoryButton

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

@@ -8,7 +8,9 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
 import { Badge } from '@open-mercato/ui/primitives/badge'
+import { SendObjectMessageDialog } from '@open-mercato/ui/backend/messages'
 import { useQueryClient } from '@tanstack/react-query'
+import { ObjectHistoryButton } from './ObjectHistoryButton'
 import { PersonTagsDialog } from './PersonTagsDialog'
 import { useCustomerDictionary, invalidateCustomerDictionary } from './hooks/useCustomerDictionary'
 import { renderDictionaryIcon } from '../../../dictionaries/components/dictionaryAppearance'
@@ -18,6 +20,8 @@ import type { PersonOverview } from '../formConfig'
 import type { CustomerDictionaryMap } from '@open-mercato/core/modules/customers/lib/dictionaries'
 import { getInitials, formatFallbackLabel } from './utils'
 
+const HEADER_ICON_BUTTON_CLASS = 'size-8 rounded-md'
+
 type PersonDetailHeaderProps = {
   data: PersonOverview
   onTagsChange: (tags: TagSummary[]) => void
@@ -243,6 +247,27 @@ export function PersonDetailHeader({
 
         {/* Right side: actions */}
         <div className="flex w-full shrink-0 items-center justify-start gap-2 sm:w-auto sm:justify-end">
+          <SendObjectMessageDialog
+            object={{
+              entityModule: 'customers',
+              entityType: 'person',
+              entityId: person.id,
+              previewData: {
+                title: displayName,
+                subtitle: person.primaryEmail ?? companyName ?? undefined,
+              },
+            }}
+            viewHref={`/backend/customers/people-v2/${person.id}`}
+            buttonVariant="outline"
+            buttonSize="icon"
+            buttonClassName={HEADER_ICON_BUTTON_CLASS}
+            buttonLabel={t('customers.people.detail.actions.sendMessage', 'Send message')}
+          />
+          <ObjectHistoryButton
+            resourceKind="customers.person"
+            resourceId={person.id}
+            organizationId={person.organizationId ?? undefined}
+          />
           <IconButton
             variant="outline"
             size="sm"