@tuturuuu/ui 0.17.0 → 0.19.0

package/src/components/ui/tu-do/logs/logs-timeline.tsx

@@ -1,2483 +0,0 @@
-'use client';
-
-import {
-  ArrowRight,
-  Calendar,
-  CheckCircle2,
-  ChevronDown,
-  CircleDot,
-  Clock,
-  ExternalLink,
-  Eye,
-  FileText,
-  Flag,
-  FolderKanban,
-  horseHead,
-  Icon,
-  Layers,
-  LayoutGrid,
-  Plus,
-  Rabbit,
-  RotateCcw,
-  Tag,
-  Target,
-  Trash2,
-  Turtle,
-  UserMinus,
-  UserPlus,
-  unicornHead,
-} from '@tuturuuu/icons';
-import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
-import { Badge } from '@tuturuuu/ui/badge';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
-import {
-  type EstimationType,
-  mapEstimationPoints,
-} from '@tuturuuu/ui/tu-do/shared/estimation-mapping';
-import { DescriptionDiffViewer } from '@tuturuuu/ui/tu-do/shared/task-edit-dialog/description-diff-viewer';
-import { TextDiffViewer } from '@tuturuuu/ui/tu-do/shared/text-diff-viewer';
-import { useTasksHref } from '@tuturuuu/ui/tu-do/tasks-route-context';
-import { cn } from '@tuturuuu/utils/format';
-import { getDescriptionText } from '@tuturuuu/utils/text-helper';
-import { format, formatDistanceToNow, isToday, isYesterday } from 'date-fns';
-import { enUS, vi } from 'date-fns/locale';
-import { AnimatePresence, motion } from 'motion/react';
-import Link from 'next/link';
-import type React from 'react';
-import { useMemo, useState } from 'react';
-import type { TaskHistoryLogEntry } from './columns';
-
-// Priority styling constants (matching task card)
-const PRIORITY_LABELS: Record<string, string> = {
-  critical: 'Urgent',
-  high: 'High',
-  normal: 'Medium',
-  low: 'Low',
-};
-
-const PRIORITY_BADGE_COLORS: Record<string, string> = {
-  critical:
-    'bg-dynamic-red/20 border-dynamic-red/50 text-dynamic-red shadow-sm shadow-dynamic-red/50',
-  high: 'bg-dynamic-orange/10 border-dynamic-orange/30 text-dynamic-orange',
-  normal: 'bg-dynamic-yellow/10 border-dynamic-yellow/30 text-dynamic-yellow',
-  low: 'bg-dynamic-blue/10 border-dynamic-blue/30 text-dynamic-blue',
-};
-
-function getPriorityIcon(
-  priority: string,
-  className?: string
-): React.ReactNode {
-  const icons: Record<string, React.ReactElement> = {
-    critical: <Icon iconNode={unicornHead} className={className} />,
-    high: <Icon iconNode={horseHead} className={className} />,
-    normal: <Rabbit className={className} />,
-    low: <Turtle className={className} />,
-  };
-  return icons[priority] || null;
-}
-
-function renderPriorityBadge(
-  priority: string | number | null
-): React.ReactNode {
-  if (priority === null || priority === undefined) return null;
-
-  // Handle numeric priority (legacy)
-  const priorityMap: Record<number, string> = {
-    1: 'low',
-    2: 'normal',
-    3: 'high',
-    4: 'critical',
-  };
-
-  const priorityKey =
-    typeof priority === 'number' ? priorityMap[priority] : priority;
-  if (!priorityKey || !PRIORITY_LABELS[priorityKey]) return null;
-
-  return (
-    <Badge
-      variant="secondary"
-      className={cn('gap-1 p-0.75 text-xs', PRIORITY_BADGE_COLORS[priorityKey])}
-    >
-      {getPriorityIcon(priorityKey, 'size-3')}
-      {PRIORITY_LABELS[priorityKey]}
-    </Badge>
-  );
-}
-
-interface LogsTimelineProps {
-  entries: TaskHistoryLogEntry[];
-  wsId: string;
-  locale: string;
-  t: (key: string, options?: { defaultValue?: string }) => string;
-  className?: string;
-  /** Time window in minutes for grouping rapid successive changes (default: 5) */
-  rapidChangeWindowMinutes?: number;
-  /** Map of board_id -> estimation_type for proper estimation display */
-  estimationTypes?: Record<string, string | null>;
-}
-
-/** Represents a group of rapid successive changes to the same task by the same user */
-interface RapidChangeGroup {
-  id: string;
-  task_id: string | null;
-  task_name: string;
-  task_deleted_at?: string;
-  task_permanently_deleted?: boolean;
-  board_id?: string;
-  board_name?: string;
-  user: TaskHistoryLogEntry['user'];
-  first_changed_at: string;
-  last_changed_at: string;
-  entries: TaskHistoryLogEntry[];
-  is_grouped: true;
-  change_count: number;
-}
-
-/** Represents an aggregated group of same-type actions (e.g., multiple assignees added at once) */
-interface AggregatedActionGroup {
-  id: string;
-  task_id: string | null;
-  task_name: string;
-  task_deleted_at?: string;
-  task_permanently_deleted?: boolean;
-  board_id?: string;
-  board_name?: string;
-  user: TaskHistoryLogEntry['user'];
-  changed_at: string;
-  change_type: TaskHistoryLogEntry['change_type'];
-  entries: TaskHistoryLogEntry[];
-  is_aggregated: true;
-  aggregated_items: Array<{
-    name: string;
-    avatar_url?: string;
-    color?: string;
-    changed_at: string;
-  }>;
-}
-
-type TimelineItem =
-  | TaskHistoryLogEntry
-  | RapidChangeGroup
-  | AggregatedActionGroup;
-
-function isRapidChangeGroup(item: TimelineItem): item is RapidChangeGroup {
-  return 'is_grouped' in item && item.is_grouped === true;
-}
-
-function isAggregatedActionGroup(
-  item: TimelineItem
-): item is AggregatedActionGroup {
-  return 'is_aggregated' in item && item.is_aggregated === true;
-}
-
-/** Check if a change type should be aggregated (multiple items shown as one) */
-function isAggregatableChangeType(changeType: string): boolean {
-  return [
-    'assignee_added',
-    'assignee_removed',
-    'label_added',
-    'label_removed',
-  ].includes(changeType);
-}
-
-/** Extract item details from an entry for aggregation */
-function extractAggregatedItem(entry: TaskHistoryLogEntry): {
-  name: string;
-  avatar_url?: string;
-  color?: string;
-  changed_at: string;
-} | null {
-  const { change_type, old_value, new_value, metadata, changed_at } = entry;
-
-  switch (change_type) {
-    case 'assignee_added': {
-      const data = new_value as {
-        user_name?: string;
-        avatar_url?: string;
-      } | null;
-      return {
-        name:
-          data?.user_name || (metadata?.assignee_name as string) || 'Unknown',
-        avatar_url: data?.avatar_url,
-        changed_at,
-      };
-    }
-    case 'assignee_removed': {
-      const data = old_value as {
-        user_name?: string;
-        avatar_url?: string;
-      } | null;
-      return {
-        name:
-          data?.user_name || (metadata?.assignee_name as string) || 'Unknown',
-        avatar_url: data?.avatar_url,
-        changed_at,
-      };
-    }
-    case 'label_added': {
-      const data = new_value as { name?: string; color?: string } | null;
-      return {
-        name: data?.name || (metadata?.label_name as string) || 'Unknown',
-        color: data?.color || (metadata?.label_color as string),
-        changed_at,
-      };
-    }
-    case 'label_removed': {
-      const data = old_value as { name?: string; color?: string } | null;
-      return {
-        name: data?.name || (metadata?.label_name as string) || 'Unknown',
-        color: data?.color || (metadata?.label_color as string),
-        changed_at,
-      };
-    }
-    default:
-      return null;
-  }
-}
-
-interface GroupedEntries {
-  date: string;
-  dateLabel: string;
-  entries: TimelineItem[];
-}
-
-/**
- * Groups rapid successive changes to the same task by the same user within a time window.
- * Also aggregates same-type actions (like multiple assignee_added) into single entries.
- */
-function groupRapidSuccessiveChanges(
-  entries: TaskHistoryLogEntry[],
-  timeWindowMinutes: number
-): TimelineItem[] {
-  if (entries.length <= 1) {
-    // Even single entries might need aggregation check
-    if (entries.length === 1) return entries;
-    return entries;
-  }
-
-  // Sort by changed_at descending (newest first)
-  const sorted = [...entries].sort(
-    (a, b) =>
-      new Date(b.changed_at).getTime() - new Date(a.changed_at).getTime()
-  );
-
-  const result: TimelineItem[] = [];
-  const processed = new Set<string>();
-
-  // Helper to check if two entries refer to the same task
-  const isSameTask = (a: TaskHistoryLogEntry, b: TaskHistoryLogEntry) => {
-    if (a.task_id && b.task_id) return a.task_id === b.task_id;
-    // Fallback for permanently deleted tasks (null task_id)
-    return !a.task_id && !b.task_id && a.task_name === b.task_name;
-  };
-
-  for (const entry of sorted) {
-    if (processed.has(entry.id)) continue;
-
-    const entryTime = new Date(entry.changed_at).getTime();
-
-    // First, try to aggregate same-type actions for the same task by the same user
-    if (isAggregatableChangeType(entry.change_type)) {
-      const sameTypeEntries: TaskHistoryLogEntry[] = [entry];
-
-      for (const otherEntry of sorted) {
-        if (processed.has(otherEntry.id) || otherEntry.id === entry.id)
-          continue;
-
-        const otherTime = new Date(otherEntry.changed_at).getTime();
-        const diffMinutes = Math.abs(entryTime - otherTime) / (1000 * 60);
-
-        // Aggregate same-type actions for the same task by the same user within the time window
-        if (
-          isSameTask(otherEntry, entry) &&
-          otherEntry.changed_by === entry.changed_by &&
-          otherEntry.change_type === entry.change_type &&
-          diffMinutes <= timeWindowMinutes
-        ) {
-          sameTypeEntries.push(otherEntry);
-        }
-      }
-
-      if (sameTypeEntries.length > 1) {
-        // Create an aggregated action group
-        const aggregatedItems = sameTypeEntries
-          .map(extractAggregatedItem)
-          .filter((item): item is NonNullable<typeof item> => item !== null);
-
-        // Sort chronologically
-        const chronological = [...sameTypeEntries].sort(
-          (a, b) =>
-            new Date(a.changed_at).getTime() - new Date(b.changed_at).getTime()
-        );
-
-        result.push({
-          id: entry.id,
-          task_id: entry.task_id,
-          task_name: entry.task_name,
-          task_deleted_at: entry.task_deleted_at,
-          task_permanently_deleted: entry.task_permanently_deleted,
-          board_id: entry.board_id,
-          board_name: entry.board_name,
-          user: entry.user,
-          changed_at: chronological[chronological.length - 1]!.changed_at,
-          change_type: entry.change_type,
-          entries: chronological,
-          is_aggregated: true,
-          aggregated_items: aggregatedItems,
-        });
-
-        sameTypeEntries.forEach((e) => {
-          processed.add(e.id);
-        });
-        continue;
-      }
-    }
-
-    // Find all entries for the same task by the same user within the time window (different types)
-    const groupEntries: TaskHistoryLogEntry[] = [entry];
-
-    for (const otherEntry of sorted) {
-      if (processed.has(otherEntry.id) || otherEntry.id === entry.id) continue;
-
-      const otherTime = new Date(otherEntry.changed_at).getTime();
-      const diffMinutes = Math.abs(entryTime - otherTime) / (1000 * 60);
-
-      if (
-        isSameTask(otherEntry, entry) &&
-        otherEntry.changed_by === entry.changed_by &&
-        diffMinutes <= timeWindowMinutes
-      ) {
-        groupEntries.push(otherEntry);
-      }
-    }
-
-    if (groupEntries.length > 1) {
-      // Sort chronologically (oldest first) for display
-      const chronological = [...groupEntries].sort(
-        (a, b) =>
-          new Date(a.changed_at).getTime() - new Date(b.changed_at).getTime()
-      );
-
-      result.push({
-        id: entry.id,
-        task_id: entry.task_id,
-        task_name: entry.task_name,
-        task_deleted_at: entry.task_deleted_at,
-        task_permanently_deleted: entry.task_permanently_deleted,
-        board_id: entry.board_id,
-        board_name: entry.board_name,
-        user: entry.user,
-        first_changed_at: chronological[0]!.changed_at,
-        last_changed_at: chronological[chronological.length - 1]!.changed_at,
-        entries: chronological,
-        is_grouped: true,
-        change_count: groupEntries.length,
-      });
-
-      groupEntries.forEach((e) => {
-        processed.add(e.id);
-      });
-    } else {
-      result.push(entry);
-      processed.add(entry.id);
-    }
-  }
-
-  // Sort result by most recent timestamp
-  return result.sort((a, b) => {
-    const aTime = isRapidChangeGroup(a)
-      ? new Date(a.last_changed_at).getTime()
-      : isAggregatedActionGroup(a)
-        ? new Date(a.changed_at).getTime()
-        : new Date((a as TaskHistoryLogEntry).changed_at).getTime();
-    const bTime = isRapidChangeGroup(b)
-      ? new Date(b.last_changed_at).getTime()
-      : isAggregatedActionGroup(b)
-        ? new Date(b.changed_at).getTime()
-        : new Date((b as TaskHistoryLogEntry).changed_at).getTime();
-    return bTime - aTime;
-  });
-}
-
-export default function LogsTimeline({
-  entries,
-  wsId,
-  locale,
-  t,
-  className,
-  rapidChangeWindowMinutes = 5,
-  estimationTypes,
-}: LogsTimelineProps) {
-  const dateLocale = locale === 'vi' ? vi : enUS;
-
-  // Calculate latest deletion entries for permanently deleted tasks
-  const latestDeletions = useMemo(() => {
-    const deletions = new Set<string>();
-    const processedTasks = new Set<string>();
-
-    // Entries are typically sorted by date descending, but let's be safe
-    // We want the NEWEST 'deleted_at' entry for each task
-    const sortedEntries = [...entries].sort(
-      (a, b) =>
-        new Date(b.changed_at).getTime() - new Date(a.changed_at).getTime()
-    );
-
-    for (const entry of sortedEntries) {
-      if (
-        entry.task_permanently_deleted &&
-        entry.change_type === 'field_updated' &&
-        entry.field_name === 'deleted_at' &&
-        // Check if it's a delete action (not restore)
-        entry.new_value !== null &&
-        entry.new_value !== undefined &&
-        entry.new_value !== '' &&
-        entry.new_value !== 'null'
-      ) {
-        // For permanently deleted tasks, task_id is null.
-        // We use task_name as a fallback key to distinguish between different deleted tasks.
-        const taskKey = entry.task_id || `null-${entry.task_name}`;
-
-        if (!processedTasks.has(taskKey)) {
-          deletions.add(entry.id);
-          processedTasks.add(taskKey);
-        }
-      }
-    }
-    return deletions;
-  }, [entries]);
-
-  // Group entries by date, then apply rapid change grouping
-  const groupedEntries = useMemo(() => {
-    const groups = new Map<string, TaskHistoryLogEntry[]>();
-
-    entries.forEach((entry) => {
-      const date = new Date(entry.changed_at);
-      const dateKey = format(date, 'yyyy-MM-dd');
-
-      if (!groups.has(dateKey)) {
-        groups.set(dateKey, []);
-      }
-      groups.get(dateKey)!.push(entry);
-    });
-
-    const result: GroupedEntries[] = [];
-    groups.forEach((dayEntries, dateKey) => {
-      const date = new Date(dateKey);
-      let dateLabel: string;
-
-      if (isToday(date)) {
-        dateLabel = t('date.today', { defaultValue: 'Today' });
-      } else if (isYesterday(date)) {
-        dateLabel = t('date.yesterday', { defaultValue: 'Yesterday' });
-      } else {
-        dateLabel = format(date, 'EEEE, MMMM d, yyyy', { locale: dateLocale });
-      }
-
-      // Apply rapid successive change grouping to each day's entries
-      const groupedDayEntries = groupRapidSuccessiveChanges(
-        dayEntries,
-        rapidChangeWindowMinutes
-      );
-
-      result.push({
-        date: dateKey,
-        dateLabel,
-        entries: groupedDayEntries,
-      });
-    });
-
-    return result;
-  }, [entries, t, dateLocale, rapidChangeWindowMinutes]);
-
-  if (entries.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className={cn('space-y-8 overflow-hidden', className)}>
-      {groupedEntries.map((group, groupIndex) => (
-        <motion.div
-          key={group.date}
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: groupIndex * 0.1 }}
-          className="space-y-3"
-        >
-          {/* Date header */}
-          <div className="sticky top-0 z-10 flex items-center gap-3 py-2 backdrop-blur-sm">
-            <div className="h-px flex-1 bg-border/50" />
-            <div className="flex items-center gap-1.5 rounded-full border bg-background/80 px-3 py-1 shadow-sm">
-              <Calendar className="h-3 w-3 text-muted-foreground" />
-              <span className="font-medium text-xs">{group.dateLabel}</span>
-            </div>
-            <div className="h-px flex-1 bg-border/50" />
-          </div>
-
-          {/* Entries for this date */}
-          <div className="space-y-2">
-            {group.entries.map((item, index) =>
-              isRapidChangeGroup(item) ? (
-                <RapidChangeGroupEntry
-                  key={item.id}
-                  group={item}
-                  wsId={wsId}
-                  locale={locale}
-                  t={t}
-                  index={index}
-                  dateLocale={dateLocale}
-                  estimationType={
-                    item.board_id ? estimationTypes?.[item.board_id] : undefined
-                  }
-                  latestDeletions={latestDeletions}
-                />
-              ) : isAggregatedActionGroup(item) ? (
-                <AggregatedActionEntry
-                  key={item.id}
-                  group={item}
-                  wsId={wsId}
-                  t={t}
-                  index={index}
-                  dateLocale={dateLocale}
-                />
-              ) : (
-                <TimelineEntry
-                  key={item.id}
-                  entry={item}
-                  wsId={wsId}
-                  locale={locale}
-                  t={t}
-                  index={index}
-                  dateLocale={dateLocale}
-                  estimationType={
-                    item.board_id ? estimationTypes?.[item.board_id] : undefined
-                  }
-                  isLatestDeletion={latestDeletions.has(item.id)}
-                />
-              )
-            )}
-          </div>
-        </motion.div>
-      ))}
-    </div>
-  );
-}
-
-interface RapidChangeGroupEntryProps {
-  group: RapidChangeGroup;
-  wsId: string;
-  locale: string;
-  t: (key: string, options?: { defaultValue?: string }) => string;
-  index: number;
-  dateLocale: typeof enUS | typeof vi;
-  /** Estimation type for proper points display */
-  estimationType?: EstimationType;
-  /** Set of IDs for entries that are the latest deletion for a permanently deleted task */
-  latestDeletions?: Set<string>;
-}
-
-function RapidChangeGroupEntry({
-  group,
-  wsId,
-  locale,
-  t,
-  index,
-  dateLocale,
-  estimationType,
-  latestDeletions,
-}: RapidChangeGroupEntryProps) {
-  const tasksHref = useTasksHref();
-  const [expanded, setExpanded] = useState(false);
-
-  const startTime = new Date(group.first_changed_at);
-  const endTime = new Date(group.last_changed_at);
-
-  const userName =
-    group.user?.name || t('unknown_user', { defaultValue: 'Unknown user' });
-  const userInitials = userName
-    .split(' ')
-    .map((n) => n[0])
-    .join('')
-    .toUpperCase()
-    .slice(0, 2);
-
-  // Aggregate same-type entries within this group (e.g., multiple assignee_added)
-  const aggregatedEntries = useMemo(() => {
-    const result: Array<TaskHistoryLogEntry | AggregatedActionGroup> = [];
-    const processed = new Set<string>();
-
-    for (const entry of group.entries) {
-      if (processed.has(entry.id)) continue;
-
-      if (isAggregatableChangeType(entry.change_type)) {
-        // Find all entries of the same type
-        const sameTypeEntries = group.entries.filter(
-          (e) => !processed.has(e.id) && e.change_type === entry.change_type
-        );
-
-        if (sameTypeEntries.length > 1) {
-          // Create an aggregated action group
-          const aggregatedItems = sameTypeEntries
-            .map(extractAggregatedItem)
-            .filter((item): item is NonNullable<typeof item> => item !== null);
-
-          const chronological = [...sameTypeEntries].sort(
-            (a, b) =>
-              new Date(a.changed_at).getTime() -
-              new Date(b.changed_at).getTime()
-          );
-
-          result.push({
-            id: entry.id,
-            task_id: entry.task_id,
-            task_name: entry.task_name,
-            task_deleted_at: entry.task_deleted_at,
-            task_permanently_deleted: entry.task_permanently_deleted,
-            board_id: entry.board_id,
-            board_name: entry.board_name,
-            user: entry.user,
-            changed_at: chronological[chronological.length - 1]!.changed_at,
-            change_type: entry.change_type,
-            entries: chronological,
-            is_aggregated: true,
-            aggregated_items: aggregatedItems,
-          });
-
-          sameTypeEntries.forEach((e) => {
-            processed.add(e.id);
-          });
-          continue;
-        }
-      }
-
-      result.push(entry);
-      processed.add(entry.id);
-    }
-
-    return result;
-  }, [group.entries]);
-
-  // Get change type distribution for summary
-  const changeTypeCounts = group.entries.reduce(
-    (acc, e) => {
-      const key =
-        e.change_type === 'field_updated'
-          ? `field:${e.field_name}`
-          : e.change_type;
-      acc[key] = (acc[key] || 0) + 1;
-      return acc;
-    },
-    {} as Record<string, number>
-  );
-
-  const changeTypeSummary = Object.entries(changeTypeCounts)
-    .slice(0, 3)
-    .map(([type, count]) => {
-      let label: string;
-      if (type.startsWith('field:')) {
-        const fieldName = type.replace('field:', '');
-        label = t(`field_name.${fieldName}`, { defaultValue: fieldName });
-      } else {
-        label = t(`change_type.${type}`, { defaultValue: type });
-      }
-      return count > 1 ? `${label} (${count})` : label;
-    })
-    .join(', ');
-
-  const timeAgo = formatDistanceToNow(endTime, {
-    addSuffix: true,
-    locale: dateLocale,
-  });
-
-  // Find description changes in the group for showing diff viewers
-  const descriptionChanges = group.entries
-    .filter(
-      (e) => e.change_type === 'field_updated' && e.field_name === 'description'
-    )
-    .map((e) => ({
-      id: e.id,
-      oldValue: e.old_value,
-      newValue: e.new_value,
-    }));
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, x: -10 }}
-      animate={{ opacity: 1, x: 0 }}
-      transition={{ delay: index * 0.03 }}
-      className="group relative overflow-hidden rounded-lg border border-l-2 border-l-dynamic-indigo bg-card transition-all hover:bg-accent/50"
-    >
-      {/* Header - clickable to expand */}
-      <button
-        type="button"
-        onClick={() => setExpanded(!expanded)}
-        className="flex w-full gap-3 overflow-hidden p-4 text-left"
-      >
-        {/* Icon indicator */}
-        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-dynamic-indigo/10">
-          <Layers className="h-4 w-4 text-dynamic-indigo" />
-        </div>
-
-        {/* Content */}
-        <div className="min-w-0 flex-1">
-          {/* Header row */}
-          <div className="mb-1.5 flex flex-wrap items-center gap-x-2 gap-y-1">
-            {/* User info */}
-            <div className="flex items-center gap-1.5">
-              <Avatar className="h-5 w-5">
-                <AvatarImage
-                  src={group.user?.avatar_url || undefined}
-                  alt={userName}
-                />
-                <AvatarFallback className="text-[10px]">
-                  {userInitials}
-                </AvatarFallback>
-              </Avatar>
-              <span className="font-medium text-sm">{userName}</span>
-            </div>
-
-            {/* Change count badge */}
-            <Badge variant="secondary" className="gap-1 text-xs">
-              <Layers className="h-3 w-3" />
-              {group.change_count} {t('changes', { defaultValue: 'changes' })}
-            </Badge>
-
-            {/* Task link */}
-            <div className="flex flex-wrap items-center gap-1.5">
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  {group.task_permanently_deleted ? (
-                    <span className="wrap-break-word line-clamp-1 max-w-37.5 font-medium text-muted-foreground text-sm line-through md:max-w-62.5">
-                      {group.task_name}
-                    </span>
-                  ) : (
-                    <Link
-                      href={`/${wsId}/tasks/${group.task_id}`}
-                      onClick={(e) => e.stopPropagation()}
-                      className={cn(
-                        'wrap-break-word line-clamp-1 max-w-37.5 font-medium text-sm hover:underline md:max-w-62.5',
-                        group.task_deleted_at
-                          ? 'text-muted-foreground line-through'
-                          : 'text-foreground'
-                      )}
-                    >
-                      {group.task_name}
-                    </Link>
-                  )}
-                </TooltipTrigger>
-                {group.task_name.length > 25 && (
-                  <TooltipContent
-                    side="bottom"
-                    className="wrap-break-word line-clamp-1 max-w-md text-sm"
-                  >
-                    {group.task_name}
-                  </TooltipContent>
-                )}
-              </Tooltip>
-              {group.task_permanently_deleted ? (
-                <Badge
-                  variant="outline"
-                  className="gap-1 border-dynamic-red/50 bg-dynamic-red/20 px-1.5 py-0.5 text-dynamic-red text-xs"
-                >
-                  <Trash2 className="h-3 w-3" />
-                  {t('permanently_deleted', {
-                    defaultValue: 'Permanently Deleted',
-                  })}
-                </Badge>
-              ) : group.task_deleted_at ? (
-                <Badge
-                  variant="outline"
-                  className="gap-1 border-dynamic-orange/30 bg-dynamic-orange/10 px-1.5 py-0.5 text-dynamic-orange text-xs"
-                >
-                  <RotateCcw className="h-3 w-3" />
-                  {t('in_trash', { defaultValue: 'In Trash' })}
-                </Badge>
-              ) : null}
-              {/* Board link */}
-              {group.board_id && group.board_name && (
-                <>
-                  <span className="text-muted-foreground text-xs">
-                    {t('in_board', { defaultValue: 'in' })}
-                  </span>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Link
-                        href={`/${wsId}${tasksHref(`/boards/${group.board_id}`)}`}
-                        onClick={(e) => e.stopPropagation()}
-                        className="group/board inline-flex items-center gap-1 text-xs hover:text-foreground"
-                      >
-                        <LayoutGrid className="h-3 w-3 shrink-0 text-muted-foreground" />
-                        <span className="wrap-break-word line-clamp-1 text-muted-foreground group-hover/board:text-foreground group-hover/board:underline">
-                          {group.board_name}
-                        </span>
-                        <ExternalLink className="h-2.5 w-2.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/board:opacity-100" />
-                      </Link>
-                    </TooltipTrigger>
-                    <TooltipContent side="bottom" className="text-xs">
-                      <p>
-                        {t('open_board', { defaultValue: 'Open board' })}:{' '}
-                        {group.board_name}
-                      </p>
-                    </TooltipContent>
-                  </Tooltip>
-                </>
-              )}
-            </div>
-
-            {/* Expand indicator */}
-            <ChevronDown
-              className={cn(
-                'ml-auto h-4 w-4 shrink-0 text-muted-foreground transition-transform',
-                expanded && 'rotate-180'
-              )}
-            />
-          </div>
-
-          {/* Change type summary */}
-          <p className="mb-1 text-muted-foreground text-xs">
-            {changeTypeSummary}
-          </p>
-
-          {/* Timestamp row */}
-          <p className="text-muted-foreground text-xs">
-            {(() => {
-              const startFormatted = format(startTime, 'HH:mm', {
-                locale: dateLocale,
-              });
-              const endFormatted = format(endTime, 'HH:mm', {
-                locale: dateLocale,
-              });
-              const isSameTime = startFormatted === endFormatted;
-
-              return (
-                <>
-                  <span className="font-medium">{startFormatted}</span>
-                  {!isSameTime && (
-                    <>
-                      <span className="mx-1 opacity-50">-</span>
-                      <span className="font-medium">{endFormatted}</span>
-                    </>
-                  )}
-                </>
-              );
-            })()}
-            <span className="mx-1.5 opacity-50">·</span>
-            <span>{timeAgo}</span>
-          </p>
-        </div>
-      </button>
-
-      {/* Show diff viewers for description changes in the group - outside button to avoid nesting */}
-      {descriptionChanges.length > 0 && (
-        <div className="flex flex-wrap gap-2 border-t px-4 py-2">
-          {descriptionChanges.map((change, idx) => (
-            <DescriptionDiffViewer
-              key={change.id}
-              oldValue={change.oldValue}
-              newValue={change.newValue}
-              t={t}
-              triggerVariant="inline"
-              trigger={
-                descriptionChanges.length > 1 ? (
-                  <span className="inline-flex cursor-pointer items-center gap-1 text-dynamic-blue text-xs hover:underline">
-                    <Eye className="h-3 w-3" />
-                    {t('view_changes', {
-                      defaultValue: 'View changes',
-                    })}{' '}
-                    #{idx + 1}
-                  </span>
-                ) : undefined
-              }
-            />
-          ))}
-        </div>
-      )}
-
-      {/* Expanded content */}
-      <AnimatePresence>
-        {expanded && (
-          <motion.div
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: 'auto' }}
-            exit={{ opacity: 0, height: 0 }}
-            transition={{ duration: 0.2 }}
-            className="border-t"
-          >
-            <div className="space-y-2 p-4 pt-3">
-              {aggregatedEntries.map((item, i) =>
-                isAggregatedActionGroup(item) ? (
-                  <CompactAggregatedEntry
-                    key={item.id}
-                    group={item}
-                    t={t}
-                    index={i}
-                    dateLocale={dateLocale}
-                  />
-                ) : (
-                  <TimelineEntry
-                    key={item.id}
-                    entry={item}
-                    wsId={wsId}
-                    locale={locale}
-                    t={t}
-                    index={i}
-                    dateLocale={dateLocale}
-                    compact
-                    estimationType={estimationType}
-                    isLatestDeletion={latestDeletions?.has(item.id)}
-                  />
-                )
-              )}
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </motion.div>
-  );
-}
-
-/** Compact version of aggregated entry for display within RapidChangeGroup */
-interface CompactAggregatedEntryProps {
-  group: AggregatedActionGroup;
-  t: (key: string, options?: { defaultValue?: string }) => string;
-  index: number;
-  dateLocale: typeof enUS | typeof vi;
-}
-
-function CompactAggregatedEntry({
-  group,
-  t,
-  index,
-  dateLocale,
-}: CompactAggregatedEntryProps) {
-  const { icon, color } = getChangeIcon(group.change_type, null);
-  const exactTime = format(new Date(group.changed_at), 'HH:mm', {
-    locale: dateLocale,
-  });
-
-  const isAssignee =
-    group.change_type === 'assignee_added' ||
-    group.change_type === 'assignee_removed';
-  const isLabel =
-    group.change_type === 'label_added' ||
-    group.change_type === 'label_removed';
-  const isRemoved =
-    group.change_type === 'assignee_removed' ||
-    group.change_type === 'label_removed';
-
-  const formatItemDate = (changedAt: string) => {
-    const date = new Date(changedAt);
-    return format(date, 'HH:mm, EEEE, d MMMM yyyy', { locale: dateLocale });
-  };
-
-  const getActionLabel = () => {
-    switch (group.change_type) {
-      case 'assignee_added':
-        return t('assigned_multiple', { defaultValue: 'Assigned' });
-      case 'assignee_removed':
-        return t('unassigned_multiple', { defaultValue: 'Unassigned' });
-      case 'label_added':
-        return t('added_labels', { defaultValue: 'Added labels' });
-      case 'label_removed':
-        return t('removed_labels', { defaultValue: 'Removed labels' });
-      default:
-        return t('updated', { defaultValue: 'Updated' });
-    }
-  };
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, x: -10 }}
-      animate={{ opacity: 1, x: 0 }}
-      transition={{ delay: index * 0.03 }}
-      className="group relative flex gap-3 rounded-lg bg-muted/30 p-3 transition-all"
-    >
-      {/* Icon indicator */}
-      <div
-        className={cn(
-          'flex h-7 w-7 shrink-0 items-center justify-center rounded-full',
-          color
-        )}
-      >
-        {icon}
-      </div>
-
-      {/* Content */}
-      <div className="min-w-0 flex-1">
-        {/* Action label */}
-        <p className="mb-1.5 text-muted-foreground text-sm capitalize">
-          {getActionLabel()}
-        </p>
-
-        {/* Aggregated items with tooltips */}
-        <div className="mb-2 flex flex-wrap items-center gap-1.5">
-          {isAssignee &&
-            group.aggregated_items.map((item, i) => (
-              <Tooltip key={i}>
-                <TooltipTrigger asChild>
-                  <Badge
-                    variant={isRemoved ? 'outline' : 'secondary'}
-                    className={cn(
-                      'cursor-default gap-1.5 text-xs',
-                      isRemoved && 'opacity-70'
-                    )}
-                  >
-                    <Avatar className="h-4 w-4">
-                      <AvatarImage
-                        src={item.avatar_url || undefined}
-                        alt={item.name}
-                      />
-                      <AvatarFallback className="text-[8px]">
-                        {item.name
-                          .split(' ')
-                          .map((n) => n[0])
-                          .join('')
-                          .toUpperCase()
-                          .slice(0, 2)}
-                      </AvatarFallback>
-                    </Avatar>
-                    <span className={cn(isRemoved && 'line-through')}>
-                      {item.name}
-                    </span>
-                  </Badge>
-                </TooltipTrigger>
-                <TooltipContent side="bottom" className="text-xs">
-                  <div className="font-medium">{item.name}</div>
-                  <div className="text-muted-foreground">
-                    {isRemoved
-                      ? t('unassigned_at', { defaultValue: 'Unassigned at' })
-                      : t('assigned_at', { defaultValue: 'Assigned at' })}
-                    : {formatItemDate(item.changed_at)}
-                  </div>
-                </TooltipContent>
-              </Tooltip>
-            ))}
-          {isLabel &&
-            group.aggregated_items.map((item, i) => (
-              <Tooltip key={i}>
-                <TooltipTrigger asChild>
-                  <Badge
-                    variant={isRemoved ? 'outline' : 'secondary'}
-                    className={cn(
-                      'cursor-default gap-1.5 text-xs',
-                      isRemoved && 'opacity-70'
-                    )}
-                    style={
-                      item.color
-                        ? isRemoved
-                          ? {
-                              borderColor: `${item.color}60`,
-                              color: item.color,
-                            }
-                          : {
-                              backgroundColor: `${item.color}20`,
-                              borderColor: `${item.color}40`,
-                              color: item.color,
-                            }
-                        : undefined
-                    }
-                  >
-                    {item.color && (
-                      <span
-                        className={cn(
-                          'h-2 w-2 rounded-full',
-                          isRemoved && 'opacity-60'
-                        )}
-                        style={{ backgroundColor: item.color }}
-                      />
-                    )}
-                    {item.name}
-                  </Badge>
-                </TooltipTrigger>
-                <TooltipContent side="bottom" className="text-xs">
-                  <div className="font-medium">{item.name}</div>
-                  <div className="text-muted-foreground">
-                    {isRemoved
-                      ? t('removed_at', { defaultValue: 'Removed at' })
-                      : t('added_at', { defaultValue: 'Added at' })}
-                    : {formatItemDate(item.changed_at)}
-                  </div>
-                </TooltipContent>
-              </Tooltip>
-            ))}
-        </div>
-
-        {/* Timestamp */}
-        <p className="text-muted-foreground text-xs">
-          <span className="font-medium">{exactTime}</span>
-        </p>
-      </div>
-    </motion.div>
-  );
-}
-
-interface AggregatedActionEntryProps {
-  group: AggregatedActionGroup;
-  wsId: string;
-  t: (key: string, options?: { defaultValue?: string }) => string;
-  index: number;
-  dateLocale: typeof enUS | typeof vi;
-}
-
-function AggregatedActionEntry({
-  group,
-  wsId,
-  t,
-  index,
-  dateLocale,
-}: AggregatedActionEntryProps) {
-  const tasksHref = useTasksHref();
-  const { icon, color, borderColor } = getChangeIconWithBorder(
-    group.change_type,
-    null
-  );
-  const timeAgo = formatDistanceToNow(new Date(group.changed_at), {
-    addSuffix: true,
-    locale: dateLocale,
-  });
-  const exactTime = format(new Date(group.changed_at), 'HH:mm', {
-    locale: dateLocale,
-  });
-
-  const userName =
-    group.user?.name || t('unknown_user', { defaultValue: 'Unknown user' });
-  const userInitials = userName
-    .split(' ')
-    .map((n) => n[0])
-    .join('')
-    .toUpperCase()
-    .slice(0, 2);
-
-  // Get action label based on change type
-  const getActionLabel = () => {
-    switch (group.change_type) {
-      case 'assignee_added':
-        return t('assigned_multiple', { defaultValue: 'assigned' });
-      case 'assignee_removed':
-        return t('unassigned_multiple', { defaultValue: 'unassigned' });
-      case 'label_added':
-        return t('added_labels', { defaultValue: 'added labels' });
-      case 'label_removed':
-        return t('removed_labels', { defaultValue: 'removed labels' });
-      default:
-        return t('updated', { defaultValue: 'updated' });
-    }
-  };
-
-  // Format aggregated items list
-  const formatItemsList = () => {
-    const items = group.aggregated_items;
-    if (items.length === 0) return null;
-
-    const isAssignee =
-      group.change_type === 'assignee_added' ||
-      group.change_type === 'assignee_removed';
-    const isLabel =
-      group.change_type === 'label_added' ||
-      group.change_type === 'label_removed';
-    const isRemoved =
-      group.change_type === 'assignee_removed' ||
-      group.change_type === 'label_removed';
-
-    const formatItemDate = (changedAt: string) => {
-      const date = new Date(changedAt);
-      return format(date, 'HH:mm, EEEE, d MMMM yyyy', { locale: dateLocale });
-    };
-
-    if (isAssignee) {
-      return (
-        <div className="mt-2 flex flex-wrap items-center gap-2">
-          {items.slice(0, 5).map((item) => (
-            <Tooltip key={item.name}>
-              <TooltipTrigger asChild>
-                <div
-                  className={cn(
-                    'flex items-center gap-1.5 rounded-full bg-muted/50 px-2 py-0.5',
-                    isRemoved && 'line-through opacity-70'
-                  )}
-                >
-                  <Avatar className="h-4 w-4">
-                    <AvatarImage src={item.avatar_url} alt={item.name} />
-                    <AvatarFallback className="text-[8px]">
-                      {item.name
-                        .split(' ')
-                        .map((n) => n[0])
-                        .join('')
-                        .toUpperCase()
-                        .slice(0, 2)}
-                    </AvatarFallback>
-                  </Avatar>
-                  <span className="wrap-break-word line-clamp-1 max-w-25 text-xs md:max-w-37.5">
-                    {item.name}
-                  </span>
-                </div>
-              </TooltipTrigger>
-              <TooltipContent className="text-xs">
-                {isRemoved
-                  ? t('unassigned_at', { defaultValue: 'Unassigned at' })
-                  : t('assigned_at', { defaultValue: 'Assigned at' })}
-                : {formatItemDate(item.changed_at)}
-              </TooltipContent>
-            </Tooltip>
-          ))}
-          {items.length > 5 && (
-            <span className="text-muted-foreground text-xs">
-              +{items.length - 5}
-            </span>
-          )}
-        </div>
-      );
-    }
-
-    if (isLabel) {
-      return (
-        <div className="mt-2 flex flex-wrap items-center gap-2">
-          {items.slice(0, 5).map((item) => (
-            <Tooltip key={item.name}>
-              <TooltipTrigger asChild>
-                <Badge
-                  variant="secondary"
-                  className={cn(
-                    'gap-1 text-[11px]',
-                    isRemoved && 'line-through opacity-70'
-                  )}
-                  style={
-                    item.color
-                      ? {
-                          backgroundColor: `${item.color}20`,
-                          color: item.color,
-                        }
-                      : undefined
-                  }
-                >
-                  <Tag className="h-2.5 w-2.5" />
-                  {item.name}
-                </Badge>
-              </TooltipTrigger>
-              <TooltipContent className="text-xs">
-                {isRemoved
-                  ? t('removed_at', { defaultValue: 'Removed at' })
-                  : t('added_at', { defaultValue: 'Added at' })}
-                : {formatItemDate(item.changed_at)}
-              </TooltipContent>
-            </Tooltip>
-          ))}
-          {items.length > 5 && (
-            <span className="text-muted-foreground text-xs">
-              +{items.length - 5}
-            </span>
-          )}
-        </div>
-      );
-    }
-
-    return null;
-  };
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, x: -10 }}
-      animate={{ opacity: 1, x: 0 }}
-      transition={{ delay: index * 0.03 }}
-      className={cn(
-        'group relative flex gap-3 overflow-hidden rounded-lg border border-l-2 bg-card p-4 transition-all hover:bg-accent/50',
-        borderColor
-      )}
-    >
-      {/* Icon indicator */}
-      <div
-        className={cn(
-          'flex h-9 w-9 shrink-0 items-center justify-center rounded-full',
-          color
-        )}
-      >
-        {icon}
-      </div>
-
-      {/* Content */}
-      <div className="min-w-0 flex-1">
-        {/* Header row */}
-        <div className="mb-1.5 flex flex-wrap items-center gap-x-2 gap-y-1">
-          {/* User info */}
-          <div className="flex items-center gap-1.5">
-            <Avatar className="h-5 w-5">
-              <AvatarImage
-                src={group.user?.avatar_url || undefined}
-                alt={userName}
-              />
-              <AvatarFallback className="text-[10px]">
-                {userInitials}
-              </AvatarFallback>
-            </Avatar>
-            <span className="font-medium text-sm">{userName}</span>
-          </div>
-
-          {/* Action */}
-          <span className="text-muted-foreground text-sm">
-            {getActionLabel()}
-          </span>
-
-          {/* Task link */}
-          <div className="flex flex-wrap items-center gap-1.5">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                {group.task_permanently_deleted ? (
-                  <span className="wrap-break-word line-clamp-1 max-w-50 font-medium text-muted-foreground text-sm line-through md:max-w-75">
-                    {group.task_name}
-                  </span>
-                ) : (
-                  <Link
-                    href={`/${wsId}/tasks/${group.task_id}`}
-                    className={cn(
-                      'wrap-break-word line-clamp-1 max-w-50 font-medium text-sm hover:underline md:max-w-75',
-                      group.task_deleted_at
-                        ? 'text-muted-foreground line-through'
-                        : 'text-foreground'
-                    )}
-                  >
-                    {group.task_name}
-                  </Link>
-                )}
-              </TooltipTrigger>
-              {group.task_name.length > 30 && (
-                <TooltipContent
-                  side="bottom"
-                  className="wrap-break-word line-clamp-1 max-w-md text-sm"
-                >
-                  {group.task_name}
-                </TooltipContent>
-              )}
-            </Tooltip>
-            {group.task_permanently_deleted ? (
-              <Badge
-                variant="outline"
-                className="gap-1 border-dynamic-red/50 bg-dynamic-red/20 px-1.5 py-0.5 text-dynamic-red text-xs"
-              >
-                <Trash2 className="h-3 w-3" />
-                {t('permanently_deleted', {
-                  defaultValue: 'Permanently Deleted',
-                })}
-              </Badge>
-            ) : group.task_deleted_at ? (
-              <Badge
-                variant="outline"
-                className="gap-1 border-dynamic-orange/30 bg-dynamic-orange/10 px-1.5 py-0.5 text-dynamic-orange text-xs"
-              >
-                <RotateCcw className="h-3 w-3" />
-                {t('in_trash', { defaultValue: 'In Trash' })}
-              </Badge>
-            ) : null}
-            {/* Board link */}
-            {group.board_id && group.board_name && (
-              <>
-                <span className="text-muted-foreground text-xs">
-                  {t('in_board', { defaultValue: 'in' })}
-                </span>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Link
-                      href={`/${wsId}${tasksHref(`/boards/${group.board_id}`)}`}
-                      className="group/board inline-flex items-center gap-1 text-xs hover:text-foreground"
-                    >
-                      <LayoutGrid className="h-3 w-3 shrink-0 text-muted-foreground" />
-                      <span className="text-muted-foreground group-hover/board:text-foreground group-hover/board:underline">
-                        {group.board_name}
-                      </span>
-                      <ExternalLink className="h-2.5 w-2.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/board:opacity-100" />
-                    </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom" className="text-xs">
-                    <p>
-                      {t('open_board', { defaultValue: 'Open board' })}:{' '}
-                      {group.board_name}
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-              </>
-            )}
-          </div>
-        </div>
-
-        {/* Aggregated items */}
-        <div className="mb-2">{formatItemsList()}</div>
-
-        {/* Timestamp */}
-        <p className="text-muted-foreground text-xs">
-          <span className="font-medium">{exactTime}</span>
-          <span className="mx-1.5 opacity-50">·</span>
-          <span>{timeAgo}</span>
-        </p>
-      </div>
-    </motion.div>
-  );
-}
-
-interface TimelineEntryProps {
-  entry: TaskHistoryLogEntry;
-  wsId: string;
-  locale: string;
-  t: (key: string, options?: { defaultValue?: string }) => string;
-  index: number;
-  dateLocale: typeof enUS | typeof vi;
-  /** Compact mode for nested display within groups */
-  compact?: boolean;
-  /** Estimation type for proper points display */
-  estimationType?: EstimationType;
-  /** Whether this entry is the latest deletion for a permanently deleted task */
-  isLatestDeletion?: boolean;
-}
-
-function TimelineEntry({
-  entry,
-  wsId,
-  t,
-  index,
-  dateLocale,
-  compact = false,
-  estimationType,
-  isLatestDeletion,
-}: TimelineEntryProps) {
-  const tasksHref = useTasksHref();
-  const { icon, color, borderColor } = getChangeIconWithBorder(
-    entry.change_type,
-    entry.field_name,
-    entry.new_value
-  );
-  const description = getChangeDescription(
-    entry,
-    t,
-    estimationType,
-    isLatestDeletion,
-    dateLocale
-  );
-  const timeAgo = formatDistanceToNow(new Date(entry.changed_at), {
-    addSuffix: true,
-    locale: dateLocale,
-  });
-  const exactTime = format(new Date(entry.changed_at), 'HH:mm', {
-    locale: dateLocale,
-  });
-
-  const userName =
-    entry.user?.name || t('unknown_user', { defaultValue: 'Unknown user' });
-  const userInitials = userName
-    .split(' ')
-    .map((n) => n[0])
-    .join('')
-    .toUpperCase()
-    .slice(0, 2);
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, x: -10 }}
-      animate={{ opacity: 1, x: 0 }}
-      transition={{ delay: index * 0.03 }}
-      className={cn(
-        'group relative flex gap-3 rounded-lg transition-all',
-        compact
-          ? 'bg-muted/30 p-3'
-          : 'border border-l-2 bg-card p-4 hover:bg-accent/50',
-        !compact && borderColor
-      )}
-    >
-      {/* Icon indicator */}
-      <div
-        className={cn(
-          'flex shrink-0 items-center justify-center rounded-full',
-          compact ? 'h-7 w-7' : 'h-9 w-9',
-          color
-        )}
-      >
-        {icon}
-      </div>
-
-      {/* Content */}
-      <div className="min-w-0 flex-1">
-        {/* Header row */}
-        <div className="mb-1.5 flex flex-wrap items-center gap-x-2 gap-y-1">
-          {/* User info - hidden in compact mode since parent shows it */}
-          {!compact && (
-            <div className="flex items-center gap-1.5">
-              <Avatar className="h-5 w-5">
-                <AvatarImage
-                  src={entry.user?.avatar_url || undefined}
-                  alt={userName}
-                />
-                <AvatarFallback className="text-[10px]">
-                  {userInitials}
-                </AvatarFallback>
-              </Avatar>
-              <span className="font-medium text-sm">{userName}</span>
-            </div>
-          )}
-
-          {/* Action */}
-          <span
-            className={cn(
-              'text-muted-foreground text-sm',
-              compact && 'capitalize'
-            )}
-          >
-            {description.action}
-          </span>
-
-          {/* Task link - hidden in compact mode since parent shows it */}
-          {!compact && (
-            <div className="flex flex-wrap items-center gap-1.5">
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  {entry.task_permanently_deleted ? (
-                    <span className="wrap-break-word line-clamp-1 max-w-50 font-medium text-muted-foreground text-sm line-through md:max-w-75">
-                      {entry.task_name}
-                    </span>
-                  ) : (
-                    <Link
-                      href={`/${wsId}/tasks/${entry.task_id}`}
-                      className={cn(
-                        'wrap-break-word line-clamp-1 max-w-50 font-medium text-sm hover:underline md:max-w-75',
-                        entry.task_deleted_at
-                          ? 'text-muted-foreground line-through'
-                          : 'text-foreground'
-                      )}
-                    >
-                      {entry.task_name}
-                    </Link>
-                  )}
-                </TooltipTrigger>
-                {entry.task_name.length > 30 && (
-                  <TooltipContent
-                    side="bottom"
-                    className="wrap-break-word line-clamp-1 max-w-md text-sm"
-                  >
-                    {entry.task_name}
-                  </TooltipContent>
-                )}
-              </Tooltip>
-              {entry.task_permanently_deleted ? (
-                <Badge
-                  variant="outline"
-                  className="gap-1 border-dynamic-red/50 bg-dynamic-red/20 px-1.5 py-0.5 text-dynamic-red text-xs"
-                >
-                  <Trash2 className="h-3 w-3" />
-                  {t('permanently_deleted', {
-                    defaultValue: 'Permanently Deleted',
-                  })}
-                </Badge>
-              ) : entry.task_deleted_at ? (
-                <Badge
-                  variant="outline"
-                  className="gap-1 border-dynamic-orange/30 bg-dynamic-orange/10 px-1.5 py-0.5 text-dynamic-orange text-xs"
-                >
-                  <RotateCcw className="h-3 w-3" />
-                  {t('in_trash', { defaultValue: 'In Trash' })}
-                </Badge>
-              ) : null}
-              {/* Board link */}
-              {entry.board_id && entry.board_name && (
-                <>
-                  <span className="text-muted-foreground text-xs">
-                    {t('in_board', { defaultValue: 'in' })}
-                  </span>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Link
-                        href={`/${wsId}${tasksHref(`/boards/${entry.board_id}`)}`}
-                        className="group/board inline-flex items-center gap-1 text-xs hover:text-foreground"
-                      >
-                        <LayoutGrid className="h-3 w-3 shrink-0 text-muted-foreground" />
-                        <span className="text-muted-foreground group-hover/board:text-foreground group-hover/board:underline">
-                          {entry.board_name}
-                        </span>
-                        <ExternalLink className="h-2.5 w-2.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/board:opacity-100" />
-                      </Link>
-                    </TooltipTrigger>
-                    <TooltipContent side="bottom" className="text-xs">
-                      <p>
-                        {t('open_board', { defaultValue: 'Open board' })}:{' '}
-                        {entry.board_name}
-                      </p>
-                    </TooltipContent>
-                  </Tooltip>
-                </>
-              )}
-            </div>
-          )}
-        </div>
-
-        {/* Change details */}
-        {description.details && (
-          <div className="mb-2 flex flex-wrap items-center gap-2">
-            {description.noDetailsWrapper ? (
-              <div className="inline-flex items-center gap-2 text-sm">
-                {description.details}
-              </div>
-            ) : (
-              <div className="inline-flex items-center gap-2 rounded-md bg-muted/50 px-2.5 py-1.5 text-sm">
-                {description.details}
-              </div>
-            )}
-            {description.showDescriptionDiff && (
-              <DescriptionDiffViewer
-                oldValue={entry.old_value}
-                newValue={entry.new_value}
-                t={t}
-              />
-            )}
-            {description.showNameDiff && (
-              <TextDiffViewer
-                oldValue={
-                  typeof entry.old_value === 'string'
-                    ? entry.old_value
-                    : String(entry.old_value || '')
-                }
-                newValue={
-                  typeof entry.new_value === 'string'
-                    ? entry.new_value
-                    : String(entry.new_value || '')
-                }
-                t={t}
-                fieldLabel={t('name_changes', {
-                  defaultValue: 'Task Name Changes',
-                })}
-              />
-            )}
-          </div>
-        )}
-
-        {/* Timestamp */}
-        <p className="text-muted-foreground text-xs">
-          <span className="font-medium">{exactTime}</span>
-          {!compact && (
-            <>
-              <span className="mx-1.5 opacity-50">·</span>
-              <span>{timeAgo}</span>
-            </>
-          )}
-        </p>
-      </div>
-    </motion.div>
-  );
-}
-
-/** Returns icon, background color, and left border color for a change type */
-function getChangeIconWithBorder(
-  changeType: string,
-  fieldName?: string | null,
-  newValue?: unknown
-): { icon: React.ReactNode; color: string; borderColor: string } {
-  const base = getChangeIcon(changeType, fieldName, newValue);
-
-  // Map bg colors to border colors
-  const borderColorMap: Record<string, string> = {
-    'bg-dynamic-blue/10': 'border-l-dynamic-blue',
-    'bg-dynamic-purple/10': 'border-l-dynamic-purple',
-    'bg-dynamic-orange/10': 'border-l-dynamic-orange',
-    'bg-dynamic-red/10': 'border-l-dynamic-red',
-    'bg-dynamic-cyan/10': 'border-l-dynamic-cyan',
-    'bg-dynamic-pink/10': 'border-l-dynamic-pink',
-    'bg-dynamic-indigo/10': 'border-l-dynamic-indigo',
-    'bg-dynamic-green/10': 'border-l-dynamic-green',
-    'bg-dynamic-yellow/10': 'border-l-dynamic-yellow',
-    'bg-muted': 'border-l-muted-foreground/30',
-  };
-
-  return {
-    ...base,
-    borderColor: borderColorMap[base.color] || 'border-l-border',
-  };
-}
-
-function getChangeIcon(
-  changeType: string,
-  fieldName?: string | null,
-  newValue?: unknown
-): { icon: React.ReactNode; color: string } {
-  if (changeType === 'field_updated') {
-    switch (fieldName) {
-      case 'name':
-        return {
-          icon: <FileText className="h-4 w-4 text-dynamic-blue" />,
-          color: 'bg-dynamic-blue/10',
-        };
-      case 'description':
-        return {
-          icon: <FileText className="h-4 w-4 text-dynamic-purple" />,
-          color: 'bg-dynamic-purple/10',
-        };
-      case 'priority':
-        return {
-          icon: <Flag className="h-4 w-4 text-dynamic-orange" />,
-          color: 'bg-dynamic-orange/10',
-        };
-      case 'end_date':
-        return {
-          icon: <Calendar className="h-4 w-4 text-dynamic-red" />,
-          color: 'bg-dynamic-red/10',
-        };
-      case 'start_date':
-        return {
-          icon: <Clock className="h-4 w-4 text-dynamic-cyan" />,
-          color: 'bg-dynamic-cyan/10',
-        };
-      case 'estimation_points':
-        return {
-          icon: <Target className="h-4 w-4 text-dynamic-pink" />,
-          color: 'bg-dynamic-pink/10',
-        };
-      case 'list_id':
-        return {
-          icon: <ArrowRight className="h-4 w-4 text-dynamic-indigo" />,
-          color: 'bg-dynamic-indigo/10',
-        };
-      case 'completed':
-        return {
-          icon: <CheckCircle2 className="h-4 w-4 text-dynamic-green" />,
-          color: 'bg-dynamic-green/10',
-        };
-      case 'deleted_at': {
-        // Check if task was deleted or restored based on new_value
-        const wasDeleted =
-          newValue !== null &&
-          newValue !== undefined &&
-          newValue !== '' &&
-          newValue !== 'null';
-        return wasDeleted
-          ? {
-              icon: <RotateCcw className="h-4 w-4 text-dynamic-orange" />,
-              color: 'bg-dynamic-orange/10',
-            }
-          : {
-              icon: <RotateCcw className="h-4 w-4 text-dynamic-green" />,
-              color: 'bg-dynamic-green/10',
-            };
-      }
-      default:
-        return {
-          icon: <CircleDot className="h-4 w-4 text-muted-foreground" />,
-          color: 'bg-muted',
-        };
-    }
-  }
-
-  switch (changeType) {
-    case 'task_created':
-      return {
-        icon: <Plus className="h-4 w-4 text-dynamic-green" />,
-        color: 'bg-dynamic-green/10',
-      };
-    case 'assignee_added':
-      return {
-        icon: <UserPlus className="h-4 w-4 text-dynamic-green" />,
-        color: 'bg-dynamic-green/10',
-      };
-    case 'assignee_removed':
-      return {
-        icon: <UserMinus className="h-4 w-4 text-dynamic-red" />,
-        color: 'bg-dynamic-red/10',
-      };
-    case 'label_added':
-      return {
-        icon: <Tag className="h-4 w-4 text-dynamic-yellow" />,
-        color: 'bg-dynamic-yellow/10',
-      };
-    case 'label_removed':
-      return {
-        icon: <Tag className="h-4 w-4 text-dynamic-orange" />,
-        color: 'bg-dynamic-orange/10',
-      };
-    case 'project_linked':
-      return {
-        icon: <FolderKanban className="h-4 w-4 text-dynamic-purple" />,
-        color: 'bg-dynamic-purple/10',
-      };
-    case 'project_unlinked':
-      return {
-        icon: <FolderKanban className="h-4 w-4 text-dynamic-pink" />,
-        color: 'bg-dynamic-pink/10',
-      };
-    default:
-      return {
-        icon: <CircleDot className="h-4 w-4 text-muted-foreground" />,
-        color: 'bg-muted',
-      };
-  }
-}
-
-interface ChangeDescription {
-  action: string;
-  details?: React.ReactNode;
-  showDescriptionDiff?: boolean;
-  showNameDiff?: boolean;
-  /** If true, details won't be wrapped with background/padding (for items with their own styling) */
-  noDetailsWrapper?: boolean;
-}
-
-function getChangeDescription(
-  entry: TaskHistoryLogEntry,
-  t: (key: string, options?: { defaultValue?: string }) => string,
-  estimationType?: EstimationType,
-  isLatestDeletion?: boolean,
-  dateLocale?: typeof enUS | typeof vi
-): ChangeDescription {
-  // Handle task_created
-  if (entry.change_type === 'task_created') {
-    const metadata = entry.metadata as Record<string, unknown> | null;
-    const hasDescription = !!metadata?.description;
-    const hasEstimation = metadata?.estimation_points != null;
-    const hasStartDate = !!metadata?.start_date;
-    const hasEndDate = !!metadata?.end_date;
-    const listName = metadata?.list_name as string | undefined;
-
-    const badges: React.ReactNode[] = [];
-    if (listName) {
-      badges.push(
-        <Badge key="list" variant="outline" className="gap-1 text-xs">
-          <ArrowRight className="h-3 w-3" />
-          {listName}
-        </Badge>
-      );
-    }
-    if (hasDescription) {
-      badges.push(
-        <Badge key="desc" variant="secondary" className="text-xs">
-          {t('with_description', { defaultValue: 'with description' })}
-        </Badge>
-      );
-    }
-    if (hasEstimation) {
-      const points = metadata.estimation_points as number;
-      const displayPoints = estimationType
-        ? mapEstimationPoints(points, estimationType)
-        : `${points} ${t('points', { defaultValue: 'pts' })}`;
-      badges.push(
-        <Badge key="est" variant="secondary" className="gap-1 text-xs">
-          <Target className="h-3 w-3" />
-          {displayPoints}
-        </Badge>
-      );
-    }
-    if (hasStartDate) {
-      const startDate = new Date(metadata.start_date as string);
-      badges.push(
-        <Tooltip key="start">
-          <TooltipTrigger asChild>
-            <Badge variant="secondary" className="cursor-default gap-1 text-xs">
-              <Clock className="h-3 w-3" />
-              {format(startDate, 'd MMM', { locale: dateLocale })}
-            </Badge>
-          </TooltipTrigger>
-          <TooltipContent side="bottom" className="text-xs">
-            <div className="font-medium">
-              {t('field_name.start_date', { defaultValue: 'Start Date' })}
-            </div>
-            <div className="text-muted-foreground">
-              {format(startDate, 'HH:mm, EEEE, d MMMM yyyy', {
-                locale: dateLocale,
-              })}
-            </div>
-          </TooltipContent>
-        </Tooltip>
-      );
-    }
-    if (hasEndDate) {
-      const endDate = new Date(metadata.end_date as string);
-      badges.push(
-        <Tooltip key="end">
-          <TooltipTrigger asChild>
-            <Badge variant="secondary" className="cursor-default gap-1 text-xs">
-              <Calendar className="h-3 w-3" />
-              {format(endDate, 'd MMM', { locale: dateLocale })}
-            </Badge>
-          </TooltipTrigger>
-          <TooltipContent side="bottom" className="text-xs">
-            <div className="font-medium">
-              {t('field_name.end_date', { defaultValue: 'Due Date' })}
-            </div>
-            <div className="text-muted-foreground">
-              {format(endDate, 'HH:mm, EEEE, d MMMM yyyy', {
-                locale: dateLocale,
-              })}
-            </div>
-          </TooltipContent>
-        </Tooltip>
-      );
-    }
-
-    return {
-      action: t('task_created', { defaultValue: 'created' }),
-      details:
-        badges.length > 0 ? (
-          <div className="flex flex-wrap items-center gap-1.5">{badges}</div>
-        ) : undefined,
-      noDetailsWrapper: true,
-    };
-  }
-
-  if (entry.change_type === 'field_updated') {
-    const fieldLabels: Record<string, string> = {
-      name: t('field_updated.name', { defaultValue: 'updated the name of' }),
-      description: t('field_updated.description', {
-        defaultValue: 'updated description for',
-      }),
-      priority: t('field_updated.priority', {
-        defaultValue: 'changed priority of',
-      }),
-      end_date: t('field_updated.end_date', {
-        defaultValue: 'updated due date for',
-      }),
-      start_date: t('field_updated.start_date', {
-        defaultValue: 'set start date for',
-      }),
-      estimation_points: t('field_updated.estimation_points', {
-        defaultValue: 'updated points for',
-      }),
-      list_id: t('field_updated.list_id', { defaultValue: 'moved' }),
-      completed: t('field_updated.completed', {
-        defaultValue: 'changed status of',
-      }),
-      deleted_at: t('field_updated.deleted_at', {
-        defaultValue: 'deleted',
-      }),
-    };
-
-    const action =
-      fieldLabels[entry.field_name || ''] ||
-      t('field_updated.unknown', { defaultValue: 'updated' });
-
-    // For description changes, show a simplified view with diff button
-    if (entry.field_name === 'description') {
-      const oldText = getDescriptionText(entry.old_value);
-      const newText = getDescriptionText(entry.new_value);
-      const oldSummary = oldText
-        ? oldText.length > 30
-          ? `${oldText.slice(0, 27)}...`
-          : oldText
-        : t('value.empty', { defaultValue: 'Empty' });
-      const newSummary = newText
-        ? newText.length > 30
-          ? `${newText.slice(0, 27)}...`
-          : newText
-        : t('value.empty', { defaultValue: 'Empty' });
-
-      const details = (
-        <div className="flex flex-wrap items-center gap-1.5">
-          <span className="text-muted-foreground line-through">
-            {oldSummary}
-          </span>
-          <ArrowRight className="h-3 w-3 shrink-0 text-muted-foreground" />
-          <span className="font-medium">{newSummary}</span>
-        </div>
-      );
-
-      return { action, details, showDescriptionDiff: true };
-    }
-
-    // For name changes, show line-clamp-1 wrap-break-wordd values with diff button for long names
-    if (entry.field_name === 'name') {
-      const oldName = String(entry.old_value || '');
-      const newName = String(entry.new_value || '');
-      const isLongChange = oldName.length > 40 || newName.length > 40;
-
-      const oldSummary =
-        oldName.length > 40 ? `${oldName.slice(0, 37)}...` : oldName;
-      const newSummary =
-        newName.length > 40 ? `${newName.slice(0, 37)}...` : newName;
-
-      const details = (
-        <>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="wrap-break-word line-clamp-1 max-w-37.5 text-muted-foreground line-through">
-                {oldSummary}
-              </span>
-            </TooltipTrigger>
-            {oldName.length > 40 && (
-              <TooltipContent
-                side="bottom"
-                className="wrap-break-word max-w-md truncate"
-              >
-                {oldName}
-              </TooltipContent>
-            )}
-          </Tooltip>
-          <ArrowRight className="h-3 w-3 shrink-0 text-muted-foreground" />
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="wrap-break-word line-clamp-1 max-w-37.5 font-medium">
-                {newSummary}
-              </span>
-            </TooltipTrigger>
-            {newName.length > 40 && (
-              <TooltipContent
-                side="bottom"
-                className="wrap-break-word max-w-md truncate"
-              >
-                {newName}
-              </TooltipContent>
-            )}
-          </Tooltip>
-        </>
-      );
-
-      return { action, details, showNameDiff: isLongChange };
-    }
-
-    // For priority changes, show styled priority badges
-    if (entry.field_name === 'priority') {
-      const oldPriorityBadge = renderPriorityBadge(
-        entry.old_value as string | number | null
-      );
-      const newPriorityBadge = renderPriorityBadge(
-        entry.new_value as string | number | null
-      );
-
-      const details = (
-        <div className="flex items-center gap-2">
-          {oldPriorityBadge ? (
-            <span className="opacity-60">{oldPriorityBadge}</span>
-          ) : (
-            <span className="text-muted-foreground text-xs">
-              {t('value.none', { defaultValue: 'None' })}
-            </span>
-          )}
-          <ArrowRight className="h-3 w-3 text-muted-foreground" />
-          {newPriorityBadge || (
-            <span className="text-muted-foreground text-xs">
-              {t('value.none', { defaultValue: 'None' })}
-            </span>
-          )}
-        </div>
-      );
-
-      return { action, details, noDetailsWrapper: true };
-    }
-
-    // For list_id changes, show actual column names from metadata
-    if (entry.field_name === 'list_id') {
-      const metadata = entry.metadata as Record<string, unknown> | null;
-      const oldListName =
-        (metadata?.old_list_name as string) ||
-        t('value.unknown_column', { defaultValue: 'Unknown' });
-      const newListName =
-        (metadata?.new_list_name as string) ||
-        t('value.unknown_column', { defaultValue: 'Unknown' });
-
-      const details = (
-        <div className="flex flex-wrap items-center gap-1.5">
-          <Badge variant="outline" className="text-xs opacity-70">
-            {oldListName}
-          </Badge>
-          <ArrowRight className="h-3 w-3 shrink-0 text-muted-foreground" />
-          <Badge variant="secondary" className="text-xs">
-            {newListName}
-          </Badge>
-        </div>
-      );
-
-      return { action, details, noDetailsWrapper: true };
-    }
-
-    // For estimation_points changes, use proper estimation type formatting
-    if (entry.field_name === 'estimation_points') {
-      const oldPoints = entry.old_value as number | null;
-      const newPoints = entry.new_value as number | null;
-
-      const formatPoints = (points: number | null) => {
-        if (points === null || points === undefined) {
-          return t('value.none', { defaultValue: 'None' });
-        }
-        if (estimationType) {
-          return mapEstimationPoints(points, estimationType);
-        }
-        return `${points} ${t('points', { defaultValue: 'pts' })}`;
-      };
-
-      const details = (
-        <div className="flex items-center gap-2">
-          <Badge variant="outline" className="gap-1 text-xs opacity-70">
-            <Target className="h-3 w-3" />
-            {formatPoints(oldPoints)}
-          </Badge>
-          <ArrowRight className="h-3 w-3 text-muted-foreground" />
-          <Badge variant="secondary" className="gap-1 text-xs">
-            <Target className="h-3 w-3" />
-            {formatPoints(newPoints)}
-          </Badge>
-        </div>
-      );
-
-      return { action, details, noDetailsWrapper: true };
-    }
-
-    // For deleted_at changes, show task moved to trash/restored status
-    // If the task is now permanently deleted, show that instead of "In Trash"
-    if (entry.field_name === 'deleted_at') {
-      // Check if task was deleted (new_value has a timestamp) or restored (new_value is null/undefined/empty)
-      // Handle various representations of null from JSONB: null, undefined, empty string, "null" string
-      const newValue = entry.new_value;
-      const wasDeleted =
-        newValue !== null &&
-        newValue !== undefined &&
-        newValue !== '' &&
-        newValue !== 'null';
-
-      // If the task was subsequently permanently deleted, show that status
-      // Otherwise show the soft-delete (moved to trash) status
-      const showPermanentlyDeleted = wasDeleted && isLatestDeletion;
-
-      const action = wasDeleted
-        ? showPermanentlyDeleted
-          ? t('field_updated.deleted_at', {
-              defaultValue: 'permanently deleted',
-            })
-          : t('field_updated.deleted_at', { defaultValue: 'moved to trash' })
-        : t('task_restored', { defaultValue: 'restored' });
-
-      const details = (
-        <Badge
-          variant="outline"
-          className={cn(
-            'gap-1 text-xs',
-            showPermanentlyDeleted
-              ? 'border-dynamic-red/50 bg-dynamic-red/20 text-dynamic-red'
-              : wasDeleted
-                ? 'border-dynamic-orange/30 bg-dynamic-orange/10 text-dynamic-orange'
-                : 'border-dynamic-green/30 bg-dynamic-green/10 text-dynamic-green'
-          )}
-        >
-          {showPermanentlyDeleted ? (
-            <Trash2 className="h-3 w-3" />
-          ) : wasDeleted ? (
-            <RotateCcw className="h-3 w-3" />
-          ) : (
-            <RotateCcw className="h-3 w-3" />
-          )}
-          {showPermanentlyDeleted
-            ? t('permanently_deleted', { defaultValue: 'Permanently Deleted' })
-            : wasDeleted
-              ? t('in_trash', { defaultValue: 'In Trash' })
-              : t('status.restored', { defaultValue: 'Restored' })}
-        </Badge>
-      );
-
-      return { action, details, noDetailsWrapper: true };
-    }
-
-    // Format the old and new values
-    const oldValue = formatValue(entry.old_value, entry.field_name, t);
-    const newValue = formatValue(entry.new_value, entry.field_name, t);
-
-    const details = (
-      <>
-        <span className="text-muted-foreground line-through">{oldValue}</span>
-        <ArrowRight className="h-3 w-3 text-muted-foreground" />
-        <span className="font-medium">{newValue}</span>
-      </>
-    );
-
-    return { action, details };
-  }
-
-  // Handle relationship changes
-  switch (entry.change_type) {
-    case 'assignee_added': {
-      // Extract assignee data from new_value or metadata
-      const assigneeData = entry.new_value as {
-        user_id?: string;
-        user_name?: string;
-        avatar_url?: string;
-      } | null;
-      const assigneeName =
-        assigneeData?.user_name ||
-        entry.metadata?.assignee_name ||
-        t('unknown_user', { defaultValue: 'Unknown user' });
-      const assigneeAvatar = assigneeData?.avatar_url;
-      const assigneeInitials = assigneeName
-        .split(' ')
-        .map((n: string) => n[0])
-        .join('')
-        .toUpperCase()
-        .slice(0, 2);
-
-      return {
-        action: t('assignee_added', { defaultValue: 'assigned' }),
-        details: (
-          <Badge variant="secondary" className="gap-1.5 text-xs">
-            <Avatar className="h-4 w-4">
-              <AvatarImage
-                src={assigneeAvatar || undefined}
-                alt={assigneeName}
-              />
-              <AvatarFallback className="text-[8px]">
-                {assigneeInitials}
-              </AvatarFallback>
-            </Avatar>
-            {assigneeName}
-          </Badge>
-        ),
-        noDetailsWrapper: true,
-      };
-    }
-    case 'assignee_removed': {
-      // Extract assignee data from old_value or metadata
-      const assigneeData = entry.old_value as {
-        user_id?: string;
-        user_name?: string;
-        avatar_url?: string;
-      } | null;
-      const assigneeName =
-        assigneeData?.user_name ||
-        entry.metadata?.assignee_name ||
-        t('unknown_user', { defaultValue: 'Unknown user' });
-      const assigneeAvatar = assigneeData?.avatar_url;
-      const assigneeInitials = assigneeName
-        .split(' ')
-        .map((n: string) => n[0])
-        .join('')
-        .toUpperCase()
-        .slice(0, 2);
-
-      return {
-        action: t('assignee_removed', { defaultValue: 'unassigned' }),
-        details: (
-          <Badge variant="outline" className="gap-1.5 text-xs">
-            <Avatar className="h-4 w-4 opacity-60">
-              <AvatarImage
-                src={assigneeAvatar || undefined}
-                alt={assigneeName}
-              />
-              <AvatarFallback className="text-[8px]">
-                {assigneeInitials}
-              </AvatarFallback>
-            </Avatar>
-            {assigneeName}
-          </Badge>
-        ),
-        noDetailsWrapper: true,
-      };
-    }
-    case 'label_added': {
-      // Extract label data from new_value or metadata
-      const labelData = entry.new_value as {
-        id?: string;
-        name?: string;
-        color?: string;
-      } | null;
-      const labelName =
-        labelData?.name ||
-        entry.metadata?.label_name ||
-        t('unknown_label', { defaultValue: 'Unknown label' });
-      const labelColor = labelData?.color || entry.metadata?.label_color;
-
-      return {
-        action: t('label_added', { defaultValue: 'added label to' }),
-        details: (
-          <Badge
-            variant="secondary"
-            className="gap-1.5 text-xs"
-            style={
-              labelColor
-                ? {
-                    backgroundColor: `${labelColor}20`,
-                    borderColor: `${labelColor}40`,
-                    color: labelColor,
-                  }
-                : undefined
-            }
-          >
-            {labelColor && (
-              <span
-                className="h-2 w-2 rounded-full"
-                style={{ backgroundColor: labelColor }}
-              />
-            )}
-            {labelName}
-          </Badge>
-        ),
-        noDetailsWrapper: true,
-      };
-    }
-    case 'label_removed': {
-      // Extract label data from old_value or metadata
-      const labelData = entry.old_value as {
-        id?: string;
-        name?: string;
-        color?: string;
-      } | null;
-      const labelName =
-        labelData?.name ||
-        entry.metadata?.label_name ||
-        t('unknown_label', { defaultValue: 'Unknown label' });
-      const labelColor = labelData?.color || entry.metadata?.label_color;
-
-      return {
-        action: t('label_removed', { defaultValue: 'removed label from' }),
-        details: (
-          <Badge
-            variant="outline"
-            className="gap-1.5 text-xs opacity-70"
-            style={
-              labelColor
-                ? {
-                    borderColor: `${labelColor}60`,
-                    color: labelColor,
-                  }
-                : undefined
-            }
-          >
-            {labelColor && (
-              <span
-                className="h-2 w-2 rounded-full opacity-60"
-                style={{ backgroundColor: labelColor }}
-              />
-            )}
-            {labelName}
-          </Badge>
-        ),
-        noDetailsWrapper: true,
-      };
-    }
-    case 'project_linked': {
-      // Extract project name from various possible locations
-      const newValueData =
-        typeof entry.new_value === 'string'
-          ? (() => {
-              try {
-                return JSON.parse(entry.new_value);
-              } catch {
-                return null;
-              }
-            })()
-          : (entry.new_value as Record<string, unknown> | null);
-
-      const projectName =
-        (entry.metadata?.project_name as string) ||
-        newValueData?.project_name ||
-        newValueData?.name ||
-        // If new_value is a plain string (not JSON), use it directly
-        (typeof entry.new_value === 'string' && !newValueData
-          ? entry.new_value
-          : null) ||
-        t('unknown_project', { defaultValue: 'Unknown project' });
-
-      return {
-        action: t('project_linked', { defaultValue: 'linked' }),
-        details: (
-          <>
-            <span className="text-muted-foreground">
-              {t('to_project', { defaultValue: 'to' })}
-            </span>
-            <Badge variant="secondary" className="gap-1 text-xs">
-              <FolderKanban className="h-3 w-3" />
-              {projectName}
-            </Badge>
-          </>
-        ),
-        noDetailsWrapper: true,
-      };
-    }
-    case 'project_unlinked': {
-      // Extract project name from various possible locations
-      const oldValueData =
-        typeof entry.old_value === 'string'
-          ? (() => {
-              try {
-                return JSON.parse(entry.old_value);
-              } catch {
-                return null;
-              }
-            })()
-          : (entry.old_value as Record<string, unknown> | null);
-
-      const projectName =
-        (entry.metadata?.project_name as string) ||
-        oldValueData?.project_name ||
-        oldValueData?.name ||
-        // If old_value is a plain string (not JSON), use it directly
-        (typeof entry.old_value === 'string' && !oldValueData
-          ? entry.old_value
-          : null) ||
-        t('unknown_project', { defaultValue: 'Unknown project' });
-
-      return {
-        action: t('project_unlinked', { defaultValue: 'unlinked' }),
-        details: (
-          <>
-            <span className="text-muted-foreground">
-              {t('from_project', { defaultValue: 'from' })}
-            </span>
-            <Badge variant="outline" className="gap-1 text-xs opacity-70">
-              <FolderKanban className="h-3 w-3" />
-              {projectName}
-            </Badge>
-          </>
-        ),
-        noDetailsWrapper: true,
-      };
-    }
-    default:
-      return {
-        action: t('unknown_change', { defaultValue: 'made a change to' }),
-      };
-  }
-}
-
-function formatValue(
-  value: unknown,
-  fieldName?: string | null,
-  t?: (key: string, options?: { defaultValue?: string }) => string
-): string {
-  const translate =
-    t ||
-    ((key: string, opts?: { defaultValue?: string }) =>
-      opts?.defaultValue || key);
-
-  if (value === null || value === undefined) {
-    return translate('value.none', { defaultValue: 'None' });
-  }
-
-  // Handle boolean values
-  if (typeof value === 'boolean') {
-    return value
-      ? translate('value.yes', { defaultValue: 'Yes' })
-      : translate('value.no', { defaultValue: 'No' });
-  }
-
-  // Handle dates
-  if (fieldName === 'end_date' || fieldName === 'start_date') {
-    try {
-      return format(new Date(value as string), 'MMM d, yyyy');
-    } catch {
-      return String(value);
-    }
-  }
-
-  // Handle priority
-  if (fieldName === 'priority') {
-    const priorityLabels: Record<number, string> = {
-      1: translate('priority.low', { defaultValue: 'Low' }),
-      2: translate('priority.medium', { defaultValue: 'Medium' }),
-      3: translate('priority.high', { defaultValue: 'High' }),
-      4: translate('priority.urgent', { defaultValue: 'Urgent' }),
-    };
-    return priorityLabels[value as number] || String(value);
-  }
-
-  // Handle completed status
-  if (fieldName === 'completed') {
-    return value
-      ? translate('status.completed', { defaultValue: 'Completed' })
-      : translate('status.pending', { defaultValue: 'Pending' });
-  }
-
-  // Handle list_id
-  if (fieldName === 'list_id') {
-    return translate('value.column', { defaultValue: 'Column' });
-  }
-
-  // Default: convert to string
-  const strValue = String(value);
-  if (strValue.length > 40) {
-    return `${strValue.slice(0, 37)}...`;
-  }
-  return strValue;
-}