@asteby/metacore-runtime-react 18.13.1 → 18.13.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @asteby/metacore-runtime-react
 
+## 18.13.3
+
+### Patch Changes
+
+- b45b5b1: ActivityDiff: created/deleted events render as a true two-column grid (Campo + Valor) — the old layout emitted a placeholder cell plus a col-span-2 value into a 3-column grid, overflowing the row so the value wrapped below its label. RecordHistory gains `moduleLabel` so the event-header badge can show the localized model title (e.g. "Clientes") instead of the raw addon_key.
+
+## 18.13.2
+
+### Patch Changes
+
+- b37e1d7: RecordHistory: event headers show the actor's photo, not just initials — `ActivityEvent` gains `actor_avatar` and the component renders it via the new `resolveAvatarUrl` prop (host resolves the storage path, e.g. ops' `getStorageUrl(path, 'avatars')`; identity fallback for absolute paths).
+
 ## 18.13.1
 
 ### Patch Changes

package/dist/activity-diff.d.ts

@@ -25,6 +25,8 @@ export interface ActivityEvent {
     correlation_id?: string | null;
     actor_id?: string | null;
     actor_label?: string | null;
+    /** Storage path of the actor's avatar image, when the backend resolves one. */
+    actor_avatar?: string | null;
     addon_key: string;
     model: string;
     record_id: string;

package/dist/activity-diff.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"activity-diff.d.ts","sourceRoot":"","sources":["../src/activity-diff.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAO/C;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,EAAE,EAAE,OAAO,CAAA;KAAE,CAAC,GAAG,IAAI,CAAA;IAC/D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,iBAAiB;IAC9B,oCAAoC;IACpC,KAAK,EAAE,aAAa,CAAA;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AAuGD;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmJpD,CAAA"}
+{"version":3,"file":"activity-diff.d.ts","sourceRoot":"","sources":["../src/activity-diff.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAO/C;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,EAAE,EAAE,OAAO,CAAA;KAAE,CAAC,GAAG,IAAI,CAAA;IAC/D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,iBAAiB;IAC9B,oCAAoC;IACpC,KAAK,EAAE,aAAa,CAAA;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AAuGD;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4KpD,CAAA"}

package/dist/activity-diff.js

@@ -137,7 +137,7 @@ export const ActivityDiff = ({ event, columns, timeZone, currency, locale = 'es'
     if (allKeys.length === 0 && !event.summary) {
         return (_jsx("div", { className: cn('text-sm text-muted-foreground italic py-1', className), children: "Sin campos registrados." }));
     }
-    return (_jsxs("div", { className: cn('space-y-2', className), children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx(Badge, { variant: "outline", className: cn('text-xs font-medium px-2 py-0.5', variantBadge.className), children: variantBadge.label || event.action }), changed.size > 0 && variant === 'updated' && (_jsxs("span", { className: "text-xs text-muted-foreground", children: [changed.size, " campo", changed.size !== 1 ? 's' : '', " modificado", changed.size !== 1 ? 's' : ''] })), allKeys.length > 0 && variant === 'updated' && (_jsx("button", { type: "button", onClick: () => setShowOnlyChanged((v) => !v), className: "ml-auto text-xs text-primary hover:underline", children: showOnlyChanged ? `Ver todos (${allKeys.length})` : 'Solo cambios' }))] }), event.summary && (_jsx("p", { className: "text-sm text-muted-foreground italic", children: event.summary })), displayedKeys.length > 0 && (_jsxs("div", { className: "rounded-lg border border-border/60 overflow-hidden text-sm", children: [_jsxs("div", { className: "grid grid-cols-[1fr_1fr_1fr] border-b border-border/40 bg-muted/40 px-3 py-1.5 text-xs font-medium text-muted-foreground", children: [_jsx("span", { children: "Campo" }), !isCreated && _jsx("span", { children: isDeleted ? 'Valor' : 'Antes' }), isCreated && _jsx("span", {}), !isDeleted && _jsx("span", { children: isCreated ? 'Valor' : 'Después' }), isDeleted && _jsx("span", {})] }), displayedKeys.map((key, idx) => {
+    return (_jsxs("div", { className: cn('space-y-2', className), children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx(Badge, { variant: "outline", className: cn('text-xs font-medium px-2 py-0.5', variantBadge.className), children: variantBadge.label || event.action }), changed.size > 0 && variant === 'updated' && (_jsxs("span", { className: "text-xs text-muted-foreground", children: [changed.size, " campo", changed.size !== 1 ? 's' : '', " modificado", changed.size !== 1 ? 's' : ''] })), allKeys.length > 0 && variant === 'updated' && (_jsx("button", { type: "button", onClick: () => setShowOnlyChanged((v) => !v), className: "ml-auto text-xs text-primary hover:underline", children: showOnlyChanged ? `Ver todos (${allKeys.length})` : 'Solo cambios' }))] }), event.summary && (_jsx("p", { className: "text-sm text-muted-foreground italic", children: event.summary })), displayedKeys.length > 0 && (_jsxs("div", { className: "rounded-lg border border-border/60 overflow-hidden text-sm", children: [isCreated || isDeleted ? (_jsxs("div", { className: "grid grid-cols-[1fr_2fr] border-b border-border/40 bg-muted/40 px-3 py-1.5 text-xs font-medium text-muted-foreground gap-x-2", children: [_jsx("span", { children: "Campo" }), _jsx("span", { children: isDeleted ? 'Valor anterior' : 'Valor' })] })) : (_jsxs("div", { className: "grid grid-cols-[1fr_1fr_1fr] border-b border-border/40 bg-muted/40 px-3 py-1.5 text-xs font-medium text-muted-foreground gap-x-2", children: [_jsx("span", { children: "Campo" }), _jsx("span", { children: "Antes" }), _jsx("span", { children: "Despu\u00E9s" })] })), displayedKeys.map((key, idx) => {
                         const col = resolveColumn(key, columns);
                         const label = resolveLabel(key, columns);
                         const isChanged = changed.has(key);
@@ -155,9 +155,12 @@ export const ActivityDiff = ({ event, columns, timeZone, currency, locale = 'es'
                             ? ROW_STYLE.created
                             : isDeleted
                                 ? ROW_STYLE.deleted
-                                : isChanged
-                                    ? {}
-                                    : {};
-                        return (_jsxs("div", { style: rowStyle, className: cn('grid grid-cols-[1fr_1fr_1fr] items-start px-3 py-2 gap-x-2', idx !== displayedKeys.length - 1 && 'border-b border-border/30', isChanged && variant === 'updated' && 'bg-yellow-50/40 dark:bg-yellow-950/10'), children: [_jsx("span", { className: "text-xs font-medium text-foreground/70 pt-0.5 truncate", title: label, children: label }), !isCreated ? (_jsx("span", { className: cn(isDeleted ? 'col-span-2' : ''), children: _jsx(ActivityValueRenderer, { value: isDeleted ? fromVal : fromVal, col: col, timeZone: timeZone, currency: currency, locale: locale }) })) : (_jsx("span", {})), !isDeleted ? (_jsxs("span", { className: cn(isCreated ? 'col-span-2' : ''), children: [isChanged && variant === 'updated' && (_jsx("span", { className: "inline-flex items-center gap-1 align-middle mr-1", children: _jsx(ArrowRight, { className: "h-3 w-3 text-muted-foreground/50 shrink-0" }) })), _jsx(ActivityValueRenderer, { value: isCreated ? toVal : toVal, col: col, timeZone: timeZone, currency: currency, locale: locale })] })) : (_jsx("span", {}))] }, key));
+                                : {};
+                        // Single-snapshot row: label + one value cell, aligned
+                        // with the two-column header above.
+                        if (isCreated || isDeleted) {
+                            return (_jsxs("div", { style: rowStyle, className: cn('grid grid-cols-[1fr_2fr] items-start px-3 py-2 gap-x-2', idx !== displayedKeys.length - 1 && 'border-b border-border/30'), children: [_jsx("span", { className: "text-xs font-medium text-foreground/70 pt-0.5 truncate", title: label, children: label }), _jsx("span", { className: "min-w-0", children: _jsx(ActivityValueRenderer, { value: isDeleted ? fromVal : toVal, col: col, timeZone: timeZone, currency: currency, locale: locale }) })] }, key));
+                        }
+                        return (_jsxs("div", { className: cn('grid grid-cols-[1fr_1fr_1fr] items-start px-3 py-2 gap-x-2', idx !== displayedKeys.length - 1 && 'border-b border-border/30', isChanged && variant === 'updated' && 'bg-yellow-50/40 dark:bg-yellow-950/10'), children: [_jsx("span", { className: "text-xs font-medium text-foreground/70 pt-0.5 truncate", title: label, children: label }), _jsx("span", { className: "min-w-0", children: _jsx(ActivityValueRenderer, { value: fromVal, col: col, timeZone: timeZone, currency: currency, locale: locale }) }), _jsxs("span", { className: "min-w-0", children: [isChanged && variant === 'updated' && (_jsx("span", { className: "inline-flex items-center gap-1 align-middle mr-1", children: _jsx(ArrowRight, { className: "h-3 w-3 text-muted-foreground/50 shrink-0" }) })), _jsx(ActivityValueRenderer, { value: toVal, col: col, timeZone: timeZone, currency: currency, locale: locale })] })] }, key));
                     })] }))] }));
 };

package/dist/record-history.d.ts

@@ -37,6 +37,17 @@ export interface RecordHistoryProps {
      * detail page (e.g. `/activity/:id`). Omitted → no button.
      */
     onOpenEvent?: (event: ActivityEvent) => void;
+    /**
+     * Resolves an event's `actor_avatar` storage path to a fetchable URL
+     * (e.g. ops' `getStorageUrl(path, 'avatars')`). Identity when omitted —
+     * fine for absolute same-origin paths.
+     */
+    resolveAvatarUrl?: (path: string) => string;
+    /**
+     * Localized label for the badge on each event header (e.g. "Clientes").
+     * Falls back to the event's raw `addon_key` when omitted.
+     */
+    moduleLabel?: string;
 }
 /**
  * Shows the full activity history of a single record as a vertical timeline.

package/dist/record-history.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"record-history.d.ts","sourceRoot":"","sources":["../src/record-history.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAOpD,MAAM,WAAW,kBAAkB;IAC/B;;;OAGG;IACH,MAAM,EAAE,aAAa,EAAE,CAAA;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;CAC/C;AAoCD;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6KtD,CAAA"}
+{"version":3,"file":"record-history.d.ts","sourceRoot":"","sources":["../src/record-history.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAOpD,MAAM,WAAW,kBAAkB;IAC/B;;;OAGG;IACH,MAAM,EAAE,aAAa,EAAE,CAAA;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IAC3C;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACvB;AAoCD;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsLtD,CAAA"}

package/dist/record-history.js

@@ -15,7 +15,7 @@ import { formatDistanceToNow } from 'date-fns';
 import { es, enUS } from 'date-fns/locale';
 import { ChevronDown, ChevronRight, Clock, ExternalLink } from 'lucide-react';
 import { cn } from '@asteby/metacore-ui/lib';
-import { Avatar, AvatarFallback, Badge, Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@asteby/metacore-ui/primitives';
+import { Avatar, AvatarFallback, AvatarImage, Badge, Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@asteby/metacore-ui/primitives';
 import { getInitials } from '@asteby/metacore-ui/lib';
 import { ActivityDiff } from './activity-diff';
 // ---------------------------------------------------------------------------
@@ -51,7 +51,7 @@ function actionDotColor(action) {
  * Each event is collapsible — the header shows actor + time; expanding reveals
  * the <ActivityDiff> with field-level changes.
  */
-export const RecordHistory = ({ events, columns, timeZone, currency, locale = 'es', className, onOpenEvent, }) => {
+export const RecordHistory = ({ events, columns, timeZone, currency, locale = 'es', className, onOpenEvent, resolveAvatarUrl, moduleLabel, }) => {
     const dateLocale = locale === 'en' ? enUS : es;
     // Sort: most recent first
     const sorted = React.useMemo(() => [...events].sort((a, b) => new Date(b.occurred_at).getTime() - new Date(a.occurred_at).getTime()), [events]);
@@ -94,7 +94,7 @@ export const RecordHistory = ({ events, columns, timeZone, currency, locale = 'e
                             return event.occurred_at;
                         }
                     })();
-                    return (_jsx(Collapsible, { open: isOpen, onOpenChange: () => toggle(event.id), children: _jsxs("div", { className: "relative", children: [_jsx("span", { className: "absolute -left-5 top-3.5 h-2.5 w-2.5 rounded-full border-2 border-background -translate-x-[4px]", style: { background: dotColor }, "aria-hidden": "true" }), _jsxs("div", { className: "rounded-lg border border-border/60 bg-card overflow-hidden", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-muted/30 transition-colors", children: [_jsx(Avatar, { className: "h-7 w-7 rounded-full shrink-0", children: _jsx(AvatarFallback, { className: "text-[9px] font-bold bg-primary/10 text-primary", children: getInitials(actor) }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("span", { className: "text-sm font-semibold text-foreground truncate", children: actor }), _jsx("span", { className: "text-sm text-muted-foreground", children: actionLabel(event.action) })] }), _jsxs("div", { className: "flex items-center gap-1.5 mt-0.5", children: [_jsx(Clock, { className: "h-3 w-3 text-muted-foreground/60 shrink-0" }), _jsx("span", { className: "text-xs text-muted-foreground", title: fullDate, children: timeAgo }), event.addon_key && (_jsx(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0 h-4 ml-1", children: event.addon_key }))] })] }), onOpenEvent && (_jsx("span", { role: "button", tabIndex: 0, "aria-label": "Ver en registro de actividad", title: "Ver en registro de actividad", className: "shrink-0 rounded-md p-1.5 text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors cursor-pointer", onClick: (e) => {
+                    return (_jsx(Collapsible, { open: isOpen, onOpenChange: () => toggle(event.id), children: _jsxs("div", { className: "relative", children: [_jsx("span", { className: "absolute -left-5 top-3.5 h-2.5 w-2.5 rounded-full border-2 border-background -translate-x-[4px]", style: { background: dotColor }, "aria-hidden": "true" }), _jsxs("div", { className: "rounded-lg border border-border/60 bg-card overflow-hidden", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-muted/30 transition-colors", children: [_jsxs(Avatar, { className: "h-7 w-7 rounded-full shrink-0", children: [event.actor_avatar ? (_jsx(AvatarImage, { src: resolveAvatarUrl ? resolveAvatarUrl(event.actor_avatar) : event.actor_avatar, alt: actor })) : null, _jsx(AvatarFallback, { className: "text-[9px] font-bold bg-primary/10 text-primary", children: getInitials(actor) })] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("span", { className: "text-sm font-semibold text-foreground truncate", children: actor }), _jsx("span", { className: "text-sm text-muted-foreground", children: actionLabel(event.action) })] }), _jsxs("div", { className: "flex items-center gap-1.5 mt-0.5", children: [_jsx(Clock, { className: "h-3 w-3 text-muted-foreground/60 shrink-0" }), _jsx("span", { className: "text-xs text-muted-foreground", title: fullDate, children: timeAgo }), (moduleLabel || event.addon_key) && (_jsx(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0 h-4 ml-1", children: moduleLabel || event.addon_key }))] })] }), onOpenEvent && (_jsx("span", { role: "button", tabIndex: 0, "aria-label": "Ver en registro de actividad", title: "Ver en registro de actividad", className: "shrink-0 rounded-md p-1.5 text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors cursor-pointer", onClick: (e) => {
                                                             e.stopPropagation();
                                                             onOpenEvent(event);
                                                         }, onKeyDown: (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "18.13.1",
+  "version": "18.13.3",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -61,8 +61,8 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
-    "@asteby/metacore-sdk": "3.2.0",
-    "@asteby/metacore-ui": "2.5.1"
+    "@asteby/metacore-ui": "2.5.1",
+    "@asteby/metacore-sdk": "3.2.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/activity-diff.tsx

@@ -35,6 +35,8 @@ export interface ActivityEvent {
     correlation_id?: string | null
     actor_id?: string | null
     actor_label?: string | null
+    /** Storage path of the actor's avatar image, when the backend resolves one. */
+    actor_avatar?: string | null
     addon_key: string
     model: string
     record_id: string
@@ -231,17 +233,25 @@ export const ActivityDiff: React.FC<ActivityDiffProps> = ({
                 <p className="text-sm text-muted-foreground italic">{event.summary}</p>
             )}
 
-            {/* Diff table */}
+            {/* Diff table. Created/deleted events carry a single snapshot — no
+                before/after pair — so they collapse to two columns (Campo +
+                Valor); a third placeholder column would force the value cell
+                to wrap onto its own row. Updated keeps Campo/Antes/Después. */}
             {displayedKeys.length > 0 && (
                 <div className="rounded-lg border border-border/60 overflow-hidden text-sm">
                     {/* Column headers */}
-                    <div className="grid grid-cols-[1fr_1fr_1fr] border-b border-border/40 bg-muted/40 px-3 py-1.5 text-xs font-medium text-muted-foreground">
-                        <span>Campo</span>
-                        {!isCreated && <span>{isDeleted ? 'Valor' : 'Antes'}</span>}
-                        {isCreated && <span></span>}
-                        {!isDeleted && <span>{isCreated ? 'Valor' : 'Después'}</span>}
-                        {isDeleted && <span></span>}
-                    </div>
+                    {isCreated || isDeleted ? (
+                        <div className="grid grid-cols-[1fr_2fr] border-b border-border/40 bg-muted/40 px-3 py-1.5 text-xs font-medium text-muted-foreground gap-x-2">
+                            <span>Campo</span>
+                            <span>{isDeleted ? 'Valor anterior' : 'Valor'}</span>
+                        </div>
+                    ) : (
+                        <div className="grid grid-cols-[1fr_1fr_1fr] border-b border-border/40 bg-muted/40 px-3 py-1.5 text-xs font-medium text-muted-foreground gap-x-2">
+                            <span>Campo</span>
+                            <span>Antes</span>
+                            <span>Después</span>
+                        </div>
+                    )}
 
                     {displayedKeys.map((key, idx) => {
                         const col = resolveColumn(key, columns)
@@ -263,14 +273,39 @@ export const ActivityDiff: React.FC<ActivityDiffProps> = ({
                             ? ROW_STYLE.created
                             : isDeleted
                               ? ROW_STYLE.deleted
-                              : isChanged
-                                ? {}
-                                : {}
+                              : {}
+
+                        // Single-snapshot row: label + one value cell, aligned
+                        // with the two-column header above.
+                        if (isCreated || isDeleted) {
+                            return (
+                                <div
+                                    key={key}
+                                    style={rowStyle}
+                                    className={cn(
+                                        'grid grid-cols-[1fr_2fr] items-start px-3 py-2 gap-x-2',
+                                        idx !== displayedKeys.length - 1 && 'border-b border-border/30',
+                                    )}
+                                >
+                                    <span className="text-xs font-medium text-foreground/70 pt-0.5 truncate" title={label}>
+                                        {label}
+                                    </span>
+                                    <span className="min-w-0">
+                                        <ActivityValueRenderer
+                                            value={isDeleted ? fromVal : toVal}
+                                            col={col}
+                                            timeZone={timeZone}
+                                            currency={currency}
+                                            locale={locale}
+                                        />
+                                    </span>
+                                </div>
+                            )
+                        }
 
                         return (
                             <div
                                 key={key}
-                                style={rowStyle}
                                 className={cn(
                                     'grid grid-cols-[1fr_1fr_1fr] items-start px-3 py-2 gap-x-2',
                                     idx !== displayedKeys.length - 1 && 'border-b border-border/30',
@@ -282,40 +317,32 @@ export const ActivityDiff: React.FC<ActivityDiffProps> = ({
                                     {label}
                                 </span>
 
-                                {/* Before value (or value for deleted/created) */}
-                                {!isCreated ? (
-                                    <span className={cn(isDeleted ? 'col-span-2' : '')}>
-                                        <ActivityValueRenderer
-                                            value={isDeleted ? fromVal : fromVal}
-                                            col={col}
-                                            timeZone={timeZone}
-                                            currency={currency}
-                                            locale={locale}
-                                        />
-                                    </span>
-                                ) : (
-                                    <span />
-                                )}
+                                {/* Before value */}
+                                <span className="min-w-0">
+                                    <ActivityValueRenderer
+                                        value={fromVal}
+                                        col={col}
+                                        timeZone={timeZone}
+                                        currency={currency}
+                                        locale={locale}
+                                    />
+                                </span>
 
                                 {/* After value */}
-                                {!isDeleted ? (
-                                    <span className={cn(isCreated ? 'col-span-2' : '')}>
-                                        {isChanged && variant === 'updated' && (
-                                            <span className="inline-flex items-center gap-1 align-middle mr-1">
-                                                <ArrowRight className="h-3 w-3 text-muted-foreground/50 shrink-0" />
-                                            </span>
-                                        )}
-                                        <ActivityValueRenderer
-                                            value={isCreated ? toVal : toVal}
-                                            col={col}
-                                            timeZone={timeZone}
-                                            currency={currency}
-                                            locale={locale}
-                                        />
-                                    </span>
-                                ) : (
-                                    <span />
-                                )}
+                                <span className="min-w-0">
+                                    {isChanged && variant === 'updated' && (
+                                        <span className="inline-flex items-center gap-1 align-middle mr-1">
+                                            <ArrowRight className="h-3 w-3 text-muted-foreground/50 shrink-0" />
+                                        </span>
+                                    )}
+                                    <ActivityValueRenderer
+                                        value={toVal}
+                                        col={col}
+                                        timeZone={timeZone}
+                                        currency={currency}
+                                        locale={locale}
+                                    />
+                                </span>
                             </div>
                         )
                     })}

package/src/record-history.tsx

@@ -18,6 +18,7 @@ import { cn } from '@asteby/metacore-ui/lib'
 import {
     Avatar,
     AvatarFallback,
+    AvatarImage,
     Badge,
     Collapsible,
     CollapsibleContent,
@@ -57,6 +58,17 @@ export interface RecordHistoryProps {
      * detail page (e.g. `/activity/:id`). Omitted → no button.
      */
     onOpenEvent?: (event: ActivityEvent) => void
+    /**
+     * Resolves an event's `actor_avatar` storage path to a fetchable URL
+     * (e.g. ops' `getStorageUrl(path, 'avatars')`). Identity when omitted —
+     * fine for absolute same-origin paths.
+     */
+    resolveAvatarUrl?: (path: string) => string
+    /**
+     * Localized label for the badge on each event header (e.g. "Clientes").
+     * Falls back to the event's raw `addon_key` when omitted.
+     */
+    moduleLabel?: string
 }
 
 // ---------------------------------------------------------------------------
@@ -106,6 +118,8 @@ export const RecordHistory: React.FC<RecordHistoryProps> = ({
     locale = 'es',
     className,
     onOpenEvent,
+    resolveAvatarUrl,
+    moduleLabel,
 }) => {
     const dateLocale = locale === 'en' ? enUS : es
 
@@ -187,8 +201,15 @@ export const RecordHistory: React.FC<RecordHistoryProps> = ({
                                             type="button"
                                             className="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-muted/30 transition-colors"
                                         >
-                                            {/* Actor avatar */}
+                                            {/* Actor avatar — the photo when the event carries one,
+                                                initials otherwise */}
                                             <Avatar className="h-7 w-7 rounded-full shrink-0">
+                                                {event.actor_avatar ? (
+                                                    <AvatarImage
+                                                        src={resolveAvatarUrl ? resolveAvatarUrl(event.actor_avatar) : event.actor_avatar}
+                                                        alt={actor}
+                                                    />
+                                                ) : null}
                                                 <AvatarFallback className="text-[9px] font-bold bg-primary/10 text-primary">
                                                     {getInitials(actor)}
                                                 </AvatarFallback>
@@ -208,9 +229,9 @@ export const RecordHistory: React.FC<RecordHistoryProps> = ({
                                                     <span className="text-xs text-muted-foreground" title={fullDate}>
                                                         {timeAgo}
                                                     </span>
-                                                    {event.addon_key && (
+                                                    {(moduleLabel || event.addon_key) && (
                                                         <Badge variant="outline" className="text-[10px] px-1.5 py-0 h-4 ml-1">
-                                                            {event.addon_key}
+                                                            {moduleLabel || event.addon_key}
                                                         </Badge>
                                                     )}
                                                 </div>