@open-mercato/core 0.5.1-develop.3045.b4b3320cc2 → 0.6.0

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

@@ -1,17 +1,34 @@
 'use client'
 
 import * as React from 'react'
-import { Calendar, ExternalLink, Mail, MoreHorizontal, Phone, StickyNote, Users } from 'lucide-react'
+import { Calendar, Check, ExternalLink, ListTodo, Mail, MoreHorizontal, Phone, StickyNote, Users } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { apiCallOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { cn } from '@open-mercato/shared/lib/utils'
 import type { InteractionSummary } from './types'
 import { ActivityAiActions } from './ActivityAiActions'
 import { getInitials } from './utils'
 
+type GuardedMutationRunner = <T,>(
+  operation: () => Promise<T>,
+  mutationPayload?: Record<string, unknown>,
+) => Promise<T>
+
 type ActivityCardProps = {
   activity: InteractionSummary
   onOpen?: (activity: InteractionSummary) => void
+  /** Called after a successful mark-done so the parent can refresh the timeline. */
+  onChanged?: () => void
+  /**
+   * Optional guarded-mutation runner. When provided, mutations route through the parent's
+   * `useGuardedMutation` so retry-last-mutation and the global injection contract apply.
+   * When omitted, mutations run directly via `apiCallOrThrow` (e.g. read-only contexts
+   * or jest unit tests that don't supply a guarded runner).
+   */
+  runMutation?: GuardedMutationRunner
 }
 
 const TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -19,6 +36,7 @@ const TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> =
   email: Mail,
   meeting: Users,
   note: StickyNote,
+  task: ListTodo,
 }
 
 function formatDayLabel(value: string, t: ReturnType<typeof useT>): string {
@@ -54,7 +72,7 @@ function resolveTarget(activity: InteractionSummary): string | null {
   return null
 }
 
-export function ActivityCard({ activity, onOpen }: ActivityCardProps) {
+export function ActivityCard({ activity, onOpen, onChanged, runMutation }: ActivityCardProps) {
   const t = useT()
   const timestamp = activity.occurredAt ?? activity.scheduledAt ?? activity.createdAt
   const TypeIcon = TYPE_ICONS[activity.interactionType] ?? StickyNote
@@ -69,6 +87,36 @@ export function ActivityCard({ activity, onOpen }: ActivityCardProps) {
       ? t('customers.activityLog.direction.with', 'with')
       : ''
   const showExternalLink = Boolean(activity._integrations && Object.keys(activity._integrations).length > 0)
+  const [markingDone, setMarkingDone] = React.useState(false)
+
+  const handleMarkDone = React.useCallback(async () => {
+    if (markingDone) return
+    setMarkingDone(true)
+    try {
+      const operation = () =>
+        apiCallOrThrow('/api/customers/interactions/complete', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ id: activity.id, occurredAt: new Date().toISOString() }),
+        })
+      if (runMutation) {
+        await runMutation(operation, {
+          id: activity.id,
+          status: 'done',
+          operation: 'completeActivity',
+        })
+      } else {
+        await operation()
+      }
+      flash(t('customers.activities.actions.markDoneSuccess', 'Activity marked done'), 'success')
+      onChanged?.()
+    } catch (err) {
+      console.warn('[customers.activityCard] mark done failed', activity.id, err)
+      flash(t('customers.activities.actions.markDoneError', 'Could not mark activity as done'), 'error')
+    } finally {
+      setMarkingDone(false)
+    }
+  }, [activity.id, markingDone, onChanged, runMutation, t])
 
   return (
     <div
@@ -111,18 +159,35 @@ export function ActivityCard({ activity, onOpen }: ActivityCardProps) {
             ) : null}
           </div>
 
-          <IconButton
-            type="button"
-            variant="ghost"
-            size="sm"
-            aria-label={t('customers.timeline.more', 'More')}
-            onClick={(event) => {
-              event.stopPropagation()
-              onOpen?.(activity)
-            }}
-          >
-            <MoreHorizontal className="size-4" />
-          </IconButton>
+          <div className="flex items-center gap-1.5">
+            {activity.status === 'planned' ? (
+              <Button
+                type="button"
+                variant="default"
+                size="sm"
+                disabled={markingDone}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  void handleMarkDone()
+                }}
+              >
+                <Check className="size-3.5" />
+                {t('customers.activities.actions.markDone', 'Mark done')}
+              </Button>
+            ) : null}
+            <IconButton
+              type="button"
+              variant="ghost"
+              size="sm"
+              aria-label={t('customers.timeline.more', 'More')}
+              onClick={(event) => {
+                event.stopPropagation()
+                onOpen?.(activity)
+              }}
+            >
+              <MoreHorizontal className="size-4" />
+            </IconButton>
+          </div>
         </div>
 
         <div className="mt-2">

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

@@ -5,16 +5,31 @@ import { Clock3, Search } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { ErrorMessage, LoadingMessage, TabEmptyState } from '@open-mercato/ui/backend/detail'
 import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import type { ActivitySummary, InteractionSummary } from './types'
 import { ActivityCard } from './ActivityCard'
 
+type GuardedMutationRunner = <T,>(
+  operation: () => Promise<T>,
+  mutationPayload?: Record<string, unknown>,
+) => Promise<T>
+
 type ActivityHistorySectionProps = {
   entityId: string
   useCanonicalInteractions?: boolean
   refreshKey?: number
   onEditActivity?: (activity: InteractionSummary) => void
+  /** Optional guarded-mutation runner so per-row mutations route through the parent's
+   * `useGuardedMutation` and emit retry-last-mutation context. */
+  runMutation?: GuardedMutationRunner
 }
 
 type InteractionListResponse = {
@@ -29,12 +44,14 @@ type InteractionCountsResponse = {
     email: number
     meeting: number
     note: number
+    task: number
     total: number
   }
   call?: number
   email?: number
   meeting?: number
   note?: number
+  task?: number
   total?: number
 }
 
@@ -43,6 +60,7 @@ const TYPE_FILTERS = [
   { value: 'email', labelKey: 'customers.timeline.filter.email', fallback: 'Email' },
   { value: 'meeting', labelKey: 'customers.timeline.filter.meeting', fallback: 'Meeting' },
   { value: 'note', labelKey: 'customers.timeline.filter.note', fallback: 'Note' },
+  { value: 'task', labelKey: 'customers.timeline.filter.task', fallback: 'Task' },
 ] as const
 
 function computeRangeStart(range: '7d' | '30d' | '90d'): Date {
@@ -137,11 +155,21 @@ function isWithinRange(activity: InteractionSummary, start: Date): boolean {
   return timestamp >= start
 }
 
+function isAbortError(error: unknown): boolean {
+  return (
+    typeof error === 'object' &&
+    error !== null &&
+    'name' in error &&
+    (error as { name?: unknown }).name === 'AbortError'
+  )
+}
+
 export function ActivityHistorySection({
   entityId,
   useCanonicalInteractions = false,
   refreshKey = 0,
   onEditActivity,
+  runMutation,
 }: ActivityHistorySectionProps) {
   const t = useT()
   const [searchInput, setSearchInput] = React.useState('')
@@ -152,9 +180,14 @@ export function ActivityHistorySection({
   const [activities, setActivities] = React.useState<InteractionSummary[]>([])
   const [loading, setLoading] = React.useState(true)
   const [error, setError] = React.useState<string | null>(null)
-  const [counts, setCounts] = React.useState<Record<string, number>>({ call: 0, email: 0, meeting: 0, note: 0, total: 0 })
+  const [counts, setCounts] = React.useState<Record<string, number>>({ call: 0, email: 0, meeting: 0, note: 0, task: 0, total: 0 })
   const [hasMore, setHasMore] = React.useState(false)
   const [loadedPages, setLoadedPages] = React.useState(1)
+  const [localRefreshKey, setLocalRefreshKey] = React.useState(0)
+  const historyRequestSeqRef = React.useRef(0)
+  const handleActivityChanged = React.useCallback(() => {
+    setLocalRefreshKey((current) => current + 1)
+  }, [])
 
   React.useEffect(() => {
     const timeout = window.setTimeout(() => setSearch(searchInput.trim()), 300)
@@ -166,7 +199,7 @@ export function ActivityHistorySection({
     void (async () => {
       try {
         const payload = await readApiResultOrThrow<InteractionCountsResponse>(
-          `/api/customers/interactions/counts?entityId=${encodeURIComponent(entityId)}&status=done`,
+          `/api/customers/interactions/counts?entityId=${encodeURIComponent(entityId)}`,
           { signal: controller.signal },
         )
         const result = payload.result ?? payload
@@ -175,16 +208,19 @@ export function ActivityHistorySection({
           email: result.email ?? 0,
           meeting: result.meeting ?? 0,
           note: result.note ?? 0,
+          task: result.task ?? 0,
           total: result.total ?? 0,
         })
       } catch {
-        setCounts({ call: 0, email: 0, meeting: 0, note: 0, total: 0 })
+        setCounts({ call: 0, email: 0, meeting: 0, note: 0, task: 0, total: 0 })
       }
     })()
     return () => controller.abort()
-  }, [entityId, refreshKey])
+  }, [entityId, refreshKey, localRefreshKey])
 
-  const loadHistory = React.useCallback(async () => {
+  const loadHistory = React.useCallback(async (options: { signal: AbortSignal; requestSeq: number }) => {
+    const { signal, requestSeq } = options
+    const isStale = () => signal.aborted || requestSeq !== historyRequestSeqRef.current
     setLoading(true)
     setError(null)
     try {
@@ -195,14 +231,14 @@ export function ActivityHistorySection({
       let firstPageHasMore = false
       let pagesLoaded = 0
 
+      const taskFilterActive = activeTypes.includes('task')
       do {
         const params = new URLSearchParams({
           entityId,
-          status: 'done',
-          excludeInteractionType: 'task',
           limit: String(pageSize),
           from: rangeStart,
         })
+        if (!taskFilterActive) params.set('excludeInteractionType', 'task')
         if (activeTypes.length > 0) params.set('type', activeTypes.join(','))
         if (search) params.set('search', search)
         if (sortMode === 'recent') {
@@ -216,7 +252,9 @@ export function ActivityHistorySection({
 
         const response = await readApiResultOrThrow<InteractionListResponse>(
           `/api/customers/interactions?${params.toString()}`,
+          { signal },
         )
+        if (isStale()) return
         const pageItems = Array.isArray(response.items) ? response.items : []
         canonicalItems.push(...pageItems)
         nextCursor = response.nextCursor
@@ -232,7 +270,9 @@ export function ActivityHistorySection({
         for (let legacyPage = 1; legacyPage <= loadedPages; legacyPage += 1) {
           const legacyPayload = await readApiResultOrThrow<{ items?: ActivitySummary[]; totalPages?: number }>(
             `/api/customers/activities?entityId=${encodeURIComponent(entityId)}&page=${legacyPage}&pageSize=20&sortField=occurredAt&sortDir=desc`,
+            { signal },
           ).catch(() => ({ items: [] as ActivitySummary[], totalPages: 1 }))
+          if (isStale()) return
           legacyItems.push(...(Array.isArray(legacyPayload.items) ? legacyPayload.items.map(normalizeLegacyActivity) : []))
           legacyTotalPages = typeof legacyPayload.totalPages === 'number' ? legacyPayload.totalPages : legacyTotalPages
           if (legacyPage >= legacyTotalPages) break
@@ -251,20 +291,28 @@ export function ActivityHistorySection({
         firstPageHasMore = firstPageHasMore || legacyTotalPages > loadedPages
       }
 
-      setActivities(sortActivities(combined, sortMode))
-      setHasMore(firstPageHasMore)
+      if (!isStale()) {
+        setActivities(sortActivities(combined, sortMode))
+        setHasMore(firstPageHasMore)
+      }
     } catch (loadError) {
-      setActivities([])
-      setHasMore(false)
-      setError(t('customers.activityLog.error', 'Failed to load activity history'))
+      if (!isStale() && !isAbortError(loadError)) {
+        setActivities([])
+        setHasMore(false)
+        setError(t('customers.activityLog.error', 'Failed to load activity history'))
+      }
     } finally {
-      setLoading(false)
+      if (!isStale()) setLoading(false)
     }
   }, [activeTypes, dateRange, entityId, loadedPages, search, sortMode, t, useCanonicalInteractions])
 
   React.useEffect(() => {
-    void loadHistory()
-  }, [loadHistory, refreshKey])
+    const controller = new AbortController()
+    const requestSeq = historyRequestSeqRef.current + 1
+    historyRequestSeqRef.current = requestSeq
+    void loadHistory({ signal: controller.signal, requestSeq })
+    return () => controller.abort()
+  }, [loadHistory, refreshKey, localRefreshKey])
 
   React.useEffect(() => {
     setLoadedPages(1)
@@ -340,29 +388,45 @@ export function ActivityHistorySection({
               )
             })}
 
-            <select
+            <Select
               value={dateRange}
-              onChange={(event) => {
-                setDateRange(event.target.value as '7d' | '30d' | '90d')
+              onValueChange={(value) => {
+                setDateRange(value as '7d' | '30d' | '90d')
               }}
-              className="h-8 rounded-lg border bg-background px-3 text-xs outline-none ring-offset-background focus:ring-2 focus:ring-ring"
             >
-              <option value="7d">{t('customers.changelog.last7days', 'Last 7 days')}</option>
-              <option value="30d">{t('customers.changelog.last30days', 'Last 30 days')}</option>
-              <option value="90d">{t('customers.changelog.last90days', 'Last 90 days')}</option>
-            </select>
-
-            <select
+              <SelectTrigger
+                size="sm"
+                aria-label={t('customers.activityLog.filters.dateRangeLabel', 'Date range')}
+                className="w-auto"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="7d">{t('customers.changelog.last7days', 'Last 7 days')}</SelectItem>
+                <SelectItem value="30d">{t('customers.changelog.last30days', 'Last 30 days')}</SelectItem>
+                <SelectItem value="90d">{t('customers.changelog.last90days', 'Last 90 days')}</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Select
               value={sortMode}
-              onChange={(event) => {
-                setSortMode(event.target.value as 'recent' | 'title-asc' | 'title-desc')
+              onValueChange={(value) => {
+                setSortMode(value as 'recent' | 'title-asc' | 'title-desc')
               }}
-              className="h-8 rounded-lg border bg-background px-3 text-xs outline-none ring-offset-background focus:ring-2 focus:ring-ring"
             >
-              <option value="recent">{t('customers.activityLog.sort.recent', 'Sort: newest')}</option>
-              <option value="title-asc">{t('customers.activityLog.sort.titleAsc', 'Sort: Name A-Z')}</option>
-              <option value="title-desc">{t('customers.activityLog.sort.titleDesc', 'Sort: Name Z-A')}</option>
-            </select>
+              <SelectTrigger
+                size="sm"
+                aria-label={t('customers.activityLog.filters.sortLabel', 'Sort order')}
+                className="w-auto"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="recent">{t('customers.activityLog.sort.recent', 'Sort: newest')}</SelectItem>
+                <SelectItem value="title-asc">{t('customers.activityLog.sort.titleAsc', 'Sort: Name A-Z')}</SelectItem>
+                <SelectItem value="title-desc">{t('customers.activityLog.sort.titleDesc', 'Sort: Name Z-A')}</SelectItem>
+              </SelectContent>
+            </Select>
           </div>
         </div>
 
@@ -390,7 +454,12 @@ export function ActivityHistorySection({
                       <div className="h-px flex-1 bg-border" />
                     </div>
                   ) : null}
-                  <ActivityCard activity={activity} onOpen={onEditActivity} />
+                  <ActivityCard
+                    activity={activity}
+                    onOpen={onEditActivity}
+                    onChanged={handleActivityChanged}
+                    runMutation={runMutation}
+                  />
                 </React.Fragment>
               )
             })}

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

@@ -22,7 +22,11 @@ type ActivityLogTabProps = {
   onEditActivity: (activity: InteractionSummary) => void
   /** @deprecated No longer used after the ActivitiesCard refactor. Kept optional for callers; remove after one minor cycle. */
   onCancelActivity?: (id: string) => void
-  /** @deprecated No longer used after the ActivitiesCard refactor. Kept optional for callers; remove after one minor cycle. */
+  /**
+   * Guarded-mutation runner from the parent page. When provided, per-row mutations
+   * (e.g. ActivityCard "Mark done") route through `useGuardedMutation` so the global
+   * injection contract and retry-last-mutation context apply.
+   */
   runGuardedMutation?: GuardedMutationRunner
   refreshKey?: number
   useCanonicalInteractions?: boolean
@@ -36,6 +40,7 @@ export function ActivityLogTab({
   onScheduleRequested,
   onAddActivity,
   onEditActivity,
+  runGuardedMutation,
   refreshKey = 0,
   useCanonicalInteractions = false,
   entityCompanyName,
@@ -61,6 +66,7 @@ export function ActivityLogTab({
         useCanonicalInteractions={useCanonicalInteractions}
         refreshKey={refreshKey}
         onEditActivity={onEditActivity}
+        runMutation={runGuardedMutation}
       />
     </div>
   )

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

@@ -1,8 +1,9 @@
 'use client'
 import * as React from 'react'
-import { Phone, Mail, Users, StickyNote, User } from 'lucide-react'
+import { Check, ListTodo, Phone, Mail, Users, StickyNote, User } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
 import { AiActionChips } from './AiActionChips'
 import type { InteractionSummary } from './types'
 
@@ -11,14 +12,16 @@ const TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> =
   email: Mail,
   meeting: Users,
   note: StickyNote,
+  task: ListTodo,
 }
 
 interface ActivityTimelineProps {
   activities: InteractionSummary[]
   onEdit?: (activity: InteractionSummary) => void
+  onMarkDone?: (activityId: string) => void | Promise<void>
 }
 
-export function ActivityTimeline({ activities, onEdit }: ActivityTimelineProps) {
+export function ActivityTimeline({ activities, onEdit, onMarkDone }: ActivityTimelineProps) {
   const t = useT()
 
   if (activities.length === 0) {
@@ -54,6 +57,7 @@ export function ActivityTimeline({ activities, onEdit }: ActivityTimelineProps)
               t={t}
               withBorder={index < activities.length - 1}
               onEdit={onEdit}
+              onMarkDone={onMarkDone}
             />
           </React.Fragment>
         )
@@ -67,16 +71,31 @@ function TimelineEntry({
   t,
   withBorder,
   onEdit,
+  onMarkDone,
 }: {
   activity: InteractionSummary
   t: TranslateFn
   withBorder: boolean
   onEdit?: (activity: InteractionSummary) => void
+  onMarkDone?: (activityId: string) => void | Promise<void>
 }) {
   const dateStr = activity.scheduledAt ?? activity.occurredAt ?? activity.createdAt
   const TypeIcon = TYPE_ICONS[activity.interactionType]
   const title = activity.title ?? activity.body ?? activity.interactionType
   const duration = activity.duration ? ` (${activity.duration} min)` : ''
+  const isPlanned = activity.status === 'planned'
+  const [markingDone, setMarkingDone] = React.useState(false)
+
+  const handleMarkDone = React.useCallback(async (event: React.MouseEvent | React.KeyboardEvent) => {
+    event.stopPropagation()
+    if (!onMarkDone || markingDone) return
+    setMarkingDone(true)
+    try {
+      await onMarkDone(activity.id)
+    } finally {
+      setMarkingDone(false)
+    }
+  }, [activity.id, markingDone, onMarkDone])
 
   return (
     <div
@@ -104,9 +123,24 @@ function TimelineEntry({
 
         {/* Column 3: Content */}
         <div className="min-w-0 space-y-1.5">
-          <span className="block text-[12px] font-semibold leading-tight text-foreground">
-            {title}{duration}
-          </span>
+          <div className="flex items-start justify-between gap-2">
+            <span className="block text-[12px] font-semibold leading-tight text-foreground">
+              {title}{duration}
+            </span>
+            {isPlanned && onMarkDone ? (
+              <Button
+                type="button"
+                variant="default"
+                size="sm"
+                disabled={markingDone}
+                onClick={handleMarkDone}
+                className="shrink-0"
+              >
+                <Check className="size-3.5" />
+                {t('customers.activities.actions.markDone', 'Mark done')}
+              </Button>
+            ) : null}
+          </div>
 
           {activity.body && activity.title && (
             <p className="text-[11px] leading-snug text-muted-foreground">

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

@@ -1,6 +1,6 @@
 'use client'
 import * as React from 'react'
-import { Phone, Mail, Users, StickyNote, SlidersHorizontal } from 'lucide-react'
+import { Phone, Mail, Users, StickyNote, ListTodo, SlidersHorizontal } from 'lucide-react'
 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'
@@ -13,6 +13,7 @@ const FILTER_TYPES = [
   { type: 'call', icon: Phone },
   { type: 'meeting', icon: Users },
   { type: 'email', icon: Mail },
+  { type: 'task', icon: ListTodo },
 ] as const
 
 type InteractionCounts = {
@@ -20,9 +21,15 @@ type InteractionCounts = {
   email: number
   meeting: number
   note: number
+  task: number
   total: number
 }
 
+type InteractionCountsResponse = {
+  ok?: boolean
+  result?: InteractionCounts
+} & Partial<InteractionCounts>
+
 interface ActivityTimelineFiltersProps {
   entityId: string | null
   activeTypes: string[]
@@ -58,11 +65,22 @@ export function ActivityTimelineFilters({
     const controller = new AbortController()
     void (async () => {
       try {
-        const nextCounts = await readApiResultOrThrow<InteractionCounts>(
+        const payload = await readApiResultOrThrow<InteractionCountsResponse>(
           `/api/customers/interactions/counts?entityId=${encodeURIComponent(entityId)}`,
           { signal: controller.signal },
         )
-        setCounts(nextCounts)
+        // Endpoint envelope is `{ ok, result: {...counts} }`. Some legacy fixtures
+        // return the counts at the top level — fall back to that shape so the chip
+        // badges keep working in either case.
+        const source = (payload.result ?? payload) as Partial<InteractionCounts>
+        setCounts({
+          call: source.call ?? 0,
+          email: source.email ?? 0,
+          meeting: source.meeting ?? 0,
+          note: source.note ?? 0,
+          task: source.task ?? 0,
+          total: source.total ?? 0,
+        })
       } catch {
         setCounts(null)
       }
@@ -85,23 +103,27 @@ export function ActivityTimelineFilters({
   return (
     <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
       <div className="flex flex-wrap items-center gap-2.5">
-        <button
+        <Button
           type="button"
+          variant="ghost"
+          size="sm"
           onClick={handleSelectAll}
           aria-pressed={allActive}
           className={cn(CHIP_BASE, allActive ? CHIP_ACTIVE : CHIP_INACTIVE)}
         >
           <span>{t('customers.timeline.filter.all', 'All Activities')}</span>
-        </button>
+        </Button>
 
         {FILTER_TYPES.map(({ type, icon: Icon }) => {
           const isActive = activeTypes.includes(type)
           const count = counts?.[type as keyof InteractionCounts]
           const hasCount = typeof count === 'number' && count > 0
           return (
-            <button
+            <Button
               key={type}
               type="button"
+              variant="ghost"
+              size="sm"
               onClick={() => handleTypeToggle(type)}
               aria-pressed={isActive}
               className={cn(CHIP_BASE, isActive ? CHIP_ACTIVE : CHIP_INACTIVE)}
@@ -111,7 +133,7 @@ export function ActivityTimelineFilters({
                 {t(`customers.timeline.filter.${type}`, type)}
                 {hasCount ? ` ${count}` : ''}
               </span>
-            </button>
+            </Button>
           )
         })}
       </div>

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

@@ -1,6 +1,6 @@
 'use client'
 import * as React from 'react'
-import { Phone, Mail, Users, StickyNote } from 'lucide-react'
+import { ListTodo, Mail, Phone, StickyNote, Users } from 'lucide-react'
 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'
@@ -10,6 +10,7 @@ const ACTIVITY_TYPES = [
   { type: 'email', icon: Mail, labelKey: 'customers.activityComposer.types.email', fallback: 'Email' },
   { type: 'meeting', icon: Users, labelKey: 'customers.activityComposer.types.meeting', fallback: 'Meeting' },
   { type: 'note', icon: StickyNote, labelKey: 'customers.activityComposer.types.note', fallback: 'Note' },
+  { type: 'task', icon: ListTodo, labelKey: 'customers.activityComposer.types.task', fallback: 'Task' },
 ] as const
 
 export type ActivityType = (typeof ACTIVITY_TYPES)[number]['type']
@@ -23,7 +24,7 @@ export function ActivityTypeSelector({ selectedType, onSelect }: ActivityTypeSel
   const t = useT()
 
   return (
-    <div className="grid grid-cols-4 gap-2">
+    <div className="grid grid-cols-5 gap-2">
       {ACTIVITY_TYPES.map(({ type, icon: Icon, labelKey, fallback }) => {
         const isSelected = selectedType === type
         return (