@startsimpli/ui 0.4.77 → 0.4.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.77",
+  "version": "0.4.79",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -17,6 +17,7 @@
     "./theme/contract": "./theme/contract.css",
     "./blog": "./src/components/blog/index.ts",
     "./blog/resolve": "./src/components/blog/resolveArticle.ts",
+    "./activity": "./src/components/activity/index.ts",
     "./collection": "./src/components/collection/index.ts",
     "./document-editor": "./src/components/document-editor/index.ts",
     "./email-editor": "./src/components/email-editor/index.ts",
@@ -43,7 +44,7 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "@startsimpli/auth": "^0.4.31",
-    "@startsimpli/api": "^0.5.46"
+    "@startsimpli/api": "^0.5.48"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {

package/src/components/ActivityTimeline.tsx

@@ -1,17 +1,57 @@
 'use client';
 
-import { ComponentType } from 'react';
+/**
+ * ActivityTimeline — ONE timeline for every "what happened" list in the
+ * monorepo (startsim-768w.19.5).
+ *
+ * It started CRM-shaped (a logged call with a duration and an outcome) and is
+ * now generalised rather than forked: every CRM field is optional, and an
+ * append-only EVENT STREAM row — an actor, a tone, a free-form detail — renders
+ * through the same component. Nothing here knows which event types exist; the
+ * caller hands it a title and a tone, so registering a new event type upstream
+ * needs no change in this file.
+ */
+
+import { ComponentType, ReactNode, useEffect, useMemo, useRef } from 'react';
 import { formatDistanceToNow } from 'date-fns';
 import { Clock, User } from 'lucide-react';
 import { EmptyState } from './states';
 
+/** Severity of an entry, for the marker. Presentation only — never a gate. */
+export type ActivityTone = 'ok' | 'warn' | 'error' | 'muted';
+
+/** Who did it. Rendered as an initials chip so a feed shows a person rather
+ *  than a bare email string. */
+export interface ActivityTimelineActor {
+  id?: string;
+  name?: string | null;
+  email?: string | null;
+  avatarUrl?: string | null;
+}
+
 export interface ActivityTimelineItem {
   id: string;
   type: string;
   title: string;
   description?: string;
   occurredAt: string;
-  createdBy: { name: string };
+
+  // --- event-stream shape -------------------------------------------------
+  /** Identity of the person behind the event (preferred over `createdBy`). */
+  actor?: ActivityTimelineActor;
+  /** Colours the marker; `activityColors[type]` still wins when supplied. */
+  tone?: ActivityTone;
+  /** Muted inline qualifier after the title, e.g. "from provisioning". */
+  subtitle?: ReactNode;
+  /** Small pill next to the title, e.g. "detected by drift reconcile". */
+  note?: ReactNode;
+  /** Body line under the title — a reason, an error, a target. */
+  detail?: ReactNode;
+  /** Colours `detail` (an error reads red, a reason reads muted). */
+  detailTone?: ActivityTone;
+
+  // --- CRM shape (apps/market) — all optional ------------------------------
+  createdBy?: { name: string };
   durationMinutes?: number;
   outcome?: string;
   isAutomated?: boolean;
@@ -20,16 +60,39 @@ export interface ActivityTimelineItem {
 
 export interface ActivityTimelineProps {
   activities: ActivityTimelineItem[];
-  loading: boolean;
+  loading?: boolean;
   emptyTitle?: string;
   emptyDescription?: string;
   onLoadMore?: () => void;
   hasMore?: boolean;
+  /** Fire `onLoadMore` when a sentinel below the last row scrolls into view. */
+  autoLoadMore?: boolean;
+  /** Bucket entries under day headings (Today / Yesterday / Mon d, yyyy). */
+  groupByDay?: boolean;
   activityIcons?: Record<string, ComponentType<any>>;
   activityColors?: Record<string, string>;
+  /** Icon for a type with no entry in `activityIcons` — including types this
+   *  build has never heard of. */
+  defaultIcon?: ComponentType<any>;
   formatTime?: (date: string) => string;
+  loadMoreLabel?: string;
+  className?: string;
 }
 
+const TONE_MARKER: Record<ActivityTone, string> = {
+  ok: 'bg-emerald-500/15 text-emerald-600',
+  warn: 'bg-amber-500/15 text-amber-600',
+  error: 'bg-red-500/15 text-red-600',
+  muted: 'bg-muted text-muted-foreground',
+};
+
+const TONE_TEXT: Record<ActivityTone, string> = {
+  ok: 'text-emerald-600',
+  warn: 'text-amber-600',
+  error: 'text-red-600',
+  muted: 'text-muted-foreground',
+};
+
 function defaultFormatTime(date: string): string {
   try {
     return formatDistanceToNow(new Date(date), { addSuffix: true });
@@ -38,26 +101,213 @@ function defaultFormatTime(date: string): string {
   }
 }
 
+/** "Ada Lovelace" -> "AL"; "ada@x.com" -> "A". Empty when we know nobody. */
+export function actorInitials(actor?: ActivityTimelineActor): string {
+  const name = (actor?.name ?? '').trim();
+  if (name) {
+    return name
+      .split(/\s+/)
+      .slice(0, 2)
+      .map((w) => w[0]?.toUpperCase() ?? '')
+      .join('');
+  }
+  const email = (actor?.email ?? '').trim();
+  return email ? email[0]!.toUpperCase() : '';
+}
+
+function actorName(actor?: ActivityTimelineActor): string {
+  return (actor?.name ?? '').trim() || (actor?.email ?? '').trim();
+}
+
+function dayKey(iso: string): string {
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? 'unknown' : d.toDateString();
+}
+
+/** Day heading. Relative for the two days an operator is actually looking at,
+ *  absolute beyond that. */
+export function dayHeading(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return 'Unknown date';
+  const today = new Date();
+  if (d.toDateString() === today.toDateString()) return 'Today';
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  if (d.toDateString() === yesterday.toDateString()) return 'Yesterday';
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+/** Fires `onVisible` when it scrolls into view. No-ops where there is no
+ *  IntersectionObserver (SSR, older jsdom) — the explicit button still works. */
+function LoadMoreSentinel({ onVisible }: { onVisible: () => void }) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const cb = useRef(onVisible);
+  cb.current = onVisible;
+
+  useEffect(() => {
+    const node = ref.current;
+    if (!node || typeof IntersectionObserver === 'undefined') return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) cb.current();
+      },
+      { rootMargin: '200px' },
+    );
+    io.observe(node);
+    return () => io.disconnect();
+  }, []);
+
+  return <div ref={ref} aria-hidden data-testid="activity-load-more-sentinel" className="h-px w-full" />;
+}
+
+function TimelineEntry({
+  activity,
+  activityIcons,
+  activityColors,
+  defaultIcon,
+  formatTime,
+}: {
+  activity: ActivityTimelineItem;
+  activityIcons: Record<string, ComponentType<any>>;
+  activityColors: Record<string, string>;
+  defaultIcon?: ComponentType<any>;
+  formatTime: (date: string) => string;
+}) {
+  const Icon = activityIcons[activity.type] ?? defaultIcon;
+  const tone = activity.tone;
+  const initials = actorInitials(activity.actor);
+  const markerClass =
+    activityColors[activity.type] ||
+    (tone ? TONE_MARKER[tone] : undefined) ||
+    'bg-muted text-muted-foreground';
+  const who = actorName(activity.actor);
+  // With no icon the marker itself becomes the avatar, so the metadata line
+  // shows the name alone rather than the same initials twice.
+  const markerIsAvatar = !Icon && !!initials;
+
+  return (
+    <div className="relative flex gap-4" data-activity-id={activity.id}>
+      <div
+        data-tone={tone}
+        className={`relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-xs font-medium ${markerClass}`}
+      >
+        {Icon ? <Icon className="h-5 w-5" /> : initials || null}
+      </div>
+
+      <div className="min-w-0 flex-1 rounded-lg border border-border bg-card p-4">
+        <div className="mb-2 flex items-start justify-between gap-3">
+          <div className="min-w-0 flex-1">
+            <div className="flex flex-wrap items-baseline gap-x-2">
+              <h4 className="font-medium text-foreground">{activity.title}</h4>
+              {activity.subtitle && (
+                <span className="text-xs text-muted-foreground">{activity.subtitle}</span>
+              )}
+              {activity.note && (
+                <span className="rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">
+                  {activity.note}
+                </span>
+              )}
+            </div>
+            {activity.description && (
+              <p className="mt-1 text-sm text-muted-foreground">{activity.description}</p>
+            )}
+            {activity.detail && (
+              <p className={`mt-1 break-words text-xs ${TONE_TEXT[activity.detailTone ?? 'muted']}`}>
+                {activity.detail}
+              </p>
+            )}
+          </div>
+          <div className="ml-4 whitespace-nowrap text-xs text-muted-foreground">
+            {formatTime(activity.occurredAt)}
+          </div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
+          {who && (
+            <span className="flex items-center gap-1.5">
+              {initials && !markerIsAvatar && (
+                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-muted text-[10px] font-medium text-muted-foreground">
+                  {initials}
+                </span>
+              )}
+              {who}
+            </span>
+          )}
+
+          {!who && activity.createdBy && (
+            <span className="flex items-center gap-1">
+              <User className="h-3 w-3" />
+              {activity.createdBy.name}
+            </span>
+          )}
+
+          {activity.durationMinutes && (
+            <span className="flex items-center gap-1">
+              <Clock className="h-3 w-3" />
+              {activity.durationMinutes}m
+            </span>
+          )}
+
+          {activity.outcome && (
+            <span className="rounded bg-muted px-2 py-0.5 text-xs text-foreground">
+              {activity.outcome.replace(/_/g, ' ')}
+            </span>
+          )}
+
+          {activity.isAutomated && (
+            <span className="text-xs italic text-muted-foreground">Auto-tracked</span>
+          )}
+        </div>
+
+        {activity.participants && activity.participants.length > 0 && (
+          <div className="mt-2 border-t border-border pt-2">
+            <div className="text-xs text-muted-foreground">
+              With: {activity.participants.map((p) => p.name).filter(Boolean).join(', ')}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
 export function ActivityTimeline({
   activities,
-  loading,
+  loading = false,
   emptyTitle = 'No activities yet',
   emptyDescription = 'Log calls, meetings, and notes to track your interactions',
   onLoadMore,
   hasMore = false,
+  autoLoadMore = false,
+  groupByDay = false,
   activityIcons = {},
   activityColors = {},
+  defaultIcon,
   formatTime = defaultFormatTime,
+  loadMoreLabel = 'Load more activities',
+  className = 'space-y-4',
 }: ActivityTimelineProps) {
+  const groups = useMemo(() => {
+    if (!groupByDay) return null;
+    const out: Array<{ key: string; heading: string; items: ActivityTimelineItem[] }> = [];
+    for (const a of activities) {
+      const key = dayKey(a.occurredAt);
+      const last = out[out.length - 1];
+      if (last && last.key === key) last.items.push(a);
+      else out.push({ key, heading: dayHeading(a.occurredAt), items: [a] });
+    }
+    return out;
+  }, [activities, groupByDay]);
+
   if (loading) {
     return (
-      <div className="space-y-4">
+      <div className={className} data-testid="activity-timeline">
         {[...Array(3)].map((_, i) => (
-          <div key={i} className="flex gap-4 animate-pulse">
-            <div className="w-10 h-10 bg-gray-200 rounded-full" />
+          <div key={i} className="flex animate-pulse gap-4">
+            <div className="h-10 w-10 rounded-full bg-muted" />
             <div className="flex-1">
-              <div className="h-4 bg-gray-200 rounded w-1/3 mb-2" />
-              <div className="h-3 bg-gray-200 rounded w-2/3" />
+              <div className="mb-2 h-4 w-1/3 rounded bg-muted" />
+              <div className="h-3 w-2/3 rounded bg-muted" />
             </div>
           </div>
         ))}
@@ -65,108 +315,55 @@ export function ActivityTimeline({
     );
   }
 
+  const entryProps = { activityIcons, activityColors, defaultIcon, formatTime };
+
   return (
-    <div className="space-y-4">
-      {/* Timeline */}
+    <div className={className} data-testid="activity-timeline">
       <div className="relative">
-        {/* Timeline line */}
-        <div className="absolute left-5 top-0 bottom-0 w-0.5 bg-gray-200" />
-
-        {/* Activities */}
-        <div className="space-y-6">
-          {activities.length === 0 ? (
-            <EmptyState title={emptyTitle} description={emptyDescription} />
-          ) : (
-            activities.map((activity) => {
-              const Icon = activityIcons[activity.type];
-              const colorClass =
-                activityColors[activity.type] || 'bg-gray-100 text-gray-600';
-
-              return (
-                <div key={activity.id} className="relative flex gap-4">
-                  {/* Icon */}
-                  <div
-                    className={`relative z-10 flex items-center justify-center w-10 h-10 rounded-full ${colorClass}`}
-                  >
-                    {Icon ? <Icon className="w-5 h-5" /> : null}
-                  </div>
-
-                  {/* Content */}
-                  <div className="flex-1 bg-white rounded-lg border border-gray-200 p-4">
-                    <div className="flex items-start justify-between mb-2">
-                      <div className="flex-1">
-                        <h4 className="font-medium text-gray-900">
-                          {activity.title}
-                        </h4>
-                        {activity.description && (
-                          <p className="text-sm text-gray-600 mt-1">
-                            {activity.description}
-                          </p>
-                        )}
-                      </div>
-                      <div className="text-xs text-gray-500 ml-4 whitespace-nowrap">
-                        {formatTime(activity.occurredAt)}
-                      </div>
-                    </div>
-
-                    {/* Metadata */}
-                    <div className="flex items-center gap-4 text-sm text-gray-600">
-                      <div className="flex items-center gap-1">
-                        <User className="w-3 h-3" />
-                        {activity.createdBy.name}
-                      </div>
-
-                      {activity.durationMinutes && (
-                        <div className="flex items-center gap-1">
-                          <Clock className="w-3 h-3" />
-                          {activity.durationMinutes}m
-                        </div>
-                      )}
-
-                      {activity.outcome && (
-                        <div className="px-2 py-0.5 text-xs bg-gray-100 text-gray-700 rounded">
-                          {activity.outcome.replace(/_/g, ' ')}
-                        </div>
-                      )}
-
-                      {activity.isAutomated && (
-                        <div className="text-xs text-gray-500 italic">
-                          Auto-tracked
-                        </div>
-                      )}
-                    </div>
-
-                    {/* Participants */}
-                    {activity.participants &&
-                      activity.participants.length > 0 && (
-                        <div className="mt-2 pt-2 border-t border-gray-100">
-                          <div className="text-xs text-gray-500">
-                            With:{' '}
-                            {activity.participants
-                              .map((p) => p.name)
-                              .filter(Boolean)
-                              .join(', ')}
-                          </div>
-                        </div>
-                      )}
-                  </div>
+        <div className="absolute bottom-0 left-5 top-0 w-0.5 bg-border" aria-hidden />
+
+        {activities.length === 0 ? (
+          <EmptyState title={emptyTitle} description={emptyDescription} />
+        ) : groups ? (
+          <div className="space-y-6">
+            {groups.map((g) => (
+              <div key={g.key} className="space-y-4">
+                <div
+                  data-testid="activity-day-heading"
+                  className="relative z-10 ml-14 text-xs font-medium uppercase tracking-wide text-muted-foreground"
+                >
+                  {g.heading}
                 </div>
-              );
-            })
-          )}
-        </div>
+                <div className="space-y-6">
+                  {g.items.map((a) => (
+                    <TimelineEntry key={a.id} activity={a} {...entryProps} />
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="space-y-6">
+            {activities.map((a) => (
+              <TimelineEntry key={a.id} activity={a} {...entryProps} />
+            ))}
+          </div>
+        )}
       </div>
 
-      {/* Load More */}
       {hasMore && onLoadMore && (
-        <div className="text-center pt-4">
-          <button
-            onClick={onLoadMore}
-            className="px-4 py-2 text-sm text-primary hover:text-primary/80 hover:bg-primary/10 rounded-md transition-colors"
-          >
-            Load more activities
-          </button>
-        </div>
+        <>
+          {autoLoadMore && <LoadMoreSentinel onVisible={onLoadMore} />}
+          <div className="pt-4 text-center">
+            <button
+              type="button"
+              onClick={onLoadMore}
+              className="rounded-md px-4 py-2 text-sm text-primary transition-colors hover:bg-primary/10 hover:text-primary/80"
+            >
+              {loadMoreLabel}
+            </button>
+          </div>
+        </>
       )}
     </div>
   );