diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx
new file mode 100644
index 00000000..61b463e5
--- /dev/null
+++ b/src/components/Skeleton.tsx
@@ -0,0 +1,275 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
+
+interface SkeletonProps {
+ className?: string;
+ width?: string | number;
+ height?: string | number;
+ rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+ shimmer?: boolean;
+}
+
+/**
+ * Base skeleton component with reduced motion support
+ *
+ * Accessibility considerations:
+ * - Uses `prefers-reduced-motion` media query to disable animations
+ * - Provides static loading state for users with motion sensitivity
+ * - Includes aria-label for screen readers
+ */
+export function Skeleton({
+ className,
+ width,
+ height,
+ rounded = 'md',
+ shimmer = true,
+}: SkeletonProps) {
+ const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+
+ useEffect(() => {
+ // Check for reduced motion preference
+ const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+ setPrefersReducedMotion(mediaQuery.matches);
+
+ const handleChange = (e: MediaQueryListEvent) => {
+ setPrefersReducedMotion(e.matches);
+ };
+
+ mediaQuery.addEventListener('change', handleChange);
+ return () => mediaQuery.removeEventListener('change', handleChange);
+ }, []);
+
+ const borderRadius = {
+ none: 'rounded-none',
+ sm: 'rounded-sm',
+ md: 'rounded-md',
+ lg: 'rounded-lg',
+ xl: 'rounded-xl',
+ full: 'rounded-full',
+ }[rounded];
+
+ const style: React.CSSProperties = {};
+ if (width) style.width = typeof width === 'number' ? `${width}px` : width;
+ if (height) style.height = typeof height === 'number' ? `${height}px` : height;
+
+ return (
+
+ {/* Base background */}
+
+
+ {/* Shimmer effect with reduced motion support */}
+ {shimmer && !prefersReducedMotion && (
+
+ )}
+
+ {/* Static loading indicator for reduced motion */}
+ {shimmer && prefersReducedMotion && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Chart area */}
+
+ {/* Y-axis */}
+
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+
+
+ {/* X-axis */}
+
+ {[...Array(6)].map((_, i) => (
+
+ ))}
+
+
+ {/* Chart lines */}
+
+
+ {/* Grid lines */}
+ {[...Array(4)].map((_, i) => (
+
+ ))}
+
+ {/* Simulated chart line */}
+
+
+
+
+
+
+
+
+
+
+
+ {[...Array(4)].map((_, i) => (
+
+
+
+
+
+ ))}
+
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+
+ );
+}
diff --git a/src/components/dashboard/RecentActivityFeed.test.tsx b/src/components/dashboard/RecentActivityFeed.test.tsx
new file mode 100644
index 00000000..9f613a0f
--- /dev/null
+++ b/src/components/dashboard/RecentActivityFeed.test.tsx
@@ -0,0 +1,218 @@
+/**
+ * @vitest-environment happy-dom
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { RecentActivityFeed } from './RecentActivityFeed';
+import { apiGet } from '@/lib/apiClient';
+import { Commitment } from '@/lib/types/domain';
+
+vi.mock('@/lib/apiClient', () => ({
+ apiGet: vi.fn(),
+}));
+
+const mockCommitments: Commitment[] = [
+ {
+ id: 'CMT-ABC123',
+ type: 'Safe',
+ status: 'Active',
+ asset: 'XLM',
+ amount: '50,000',
+ createdDate: 'Jan 10, 2026',
+ expiryDate: 'Feb 9, 2026',
+ },
+ {
+ id: 'CMT-XYZ789',
+ type: 'Balanced',
+ status: 'Active',
+ asset: 'USDC',
+ amount: '100,000',
+ createdDate: 'Dec 15, 2025',
+ expiryDate: 'Feb 13, 2026',
+ },
+];
+
+const mockedApiGet = vi.mocked(apiGet);
+
+describe('RecentActivityFeed', () => {
+ beforeEach(() => {
+ mockedApiGet.mockReset();
+ });
+
+ it('renders loading state initially', () => {
+ mockedApiGet.mockImplementation(() => new Promise(() => {}));
+
+ render();
+
+ expect(screen.queryByRole('list')).not.toBeInTheDocument();
+ });
+
+ it('renders empty state when no commitments', async () => {
+ render();
+
+ await waitFor(() => {
+ expect(screen.getByText('No Recent Activity')).toBeInTheDocument();
+ });
+ });
+
+ it('renders mixed event types correctly', async () => {
+ mockedApiGet.mockImplementation((url: string) => {
+ if (url.includes('CMT-ABC123')) {
+ return Promise.resolve({
+ success: true,
+ data: {
+ events: [
+ {
+ eventId: 'created:CMT-ABC123',
+ kind: 'created',
+ occurredAt: new Date(Date.now() - 86400000).toISOString(),
+ payload: { asset: 'XLM', amount: '50,000' },
+ },
+ {
+ eventId: 'attestation:ATTR-001',
+ kind: 'attestation',
+ occurredAt: new Date(Date.now() - 3600000).toISOString(),
+ payload: { attestationId: 'ATTR-001', attestationType: 'health_check' },
+ },
+ ],
+ },
+ });
+ }
+ if (url.includes('CMT-XYZ789')) {
+ return Promise.resolve({
+ success: true,
+ data: {
+ events: [
+ {
+ eventId: 'settlement:CMT-XYZ789',
+ kind: 'settlement',
+ occurredAt: new Date(Date.now() - 7200000).toISOString(),
+ payload: { settlementAmount: '105,000' },
+ },
+ ],
+ },
+ });
+ }
+ return Promise.resolve({ success: true, data: { events: [] } });
+ });
+
+ render();
+
+ await waitFor(() => {
+ expect(screen.getByText('Recent Activity')).toBeInTheDocument();
+ expect(screen.getByText('Commitment Created')).toBeInTheDocument();
+ expect(screen.getByText('Attestation Recorded')).toBeInTheDocument();
+ expect(screen.getByText('Settlement Complete')).toBeInTheDocument();
+ });
+ });
+
+ it('caps feed length and shows view all', async () => {
+ const manyEvents = Array.from({ length: 10 }, (_, i) => ({
+ eventId: `event-${i}`,
+ kind: 'attestation' as const,
+ occurredAt: new Date(Date.now() - i * 3600000).toISOString(),
+ payload: { attestationId: `ATTR-${i}`, attestationType: 'health_check' },
+ }));
+
+ mockedApiGet.mockResolvedValue({
+ success: true,
+ data: { events: manyEvents },
+ });
+
+ render();
+
+ await waitFor(() => {
+ expect(screen.getByText('View All Activity')).toBeInTheDocument();
+ });
+ });
+
+ it('does not show view all when events <= maxItems', async () => {
+ const fewEvents = [
+ {
+ eventId: 'event-1',
+ kind: 'created' as const,
+ occurredAt: new Date().toISOString(),
+ payload: { asset: 'XLM', amount: '50,000' },
+ },
+ ];
+
+ mockedApiGet.mockResolvedValue({
+ success: true,
+ data: { events: fewEvents },
+ });
+
+ render();
+
+ await waitFor(() => {
+ expect(screen.queryByText('View All Activity')).not.toBeInTheDocument();
+ });
+ });
+
+ it('issues all per-commitment history requests concurrently', async () => {
+ const pendingResolvers: Array<(value: unknown) => void> = [];
+ mockedApiGet.mockImplementation(
+ () =>
+ new Promise((resolve) => {
+ pendingResolvers.push(resolve);
+ }),
+ );
+
+ render();
+
+ // Every request must already be in flight before any of them resolves.
+ // A sequential loop would only issue the next request after the previous
+ // one settled, so both calls being issued here proves parallel issuance.
+ await waitFor(() => {
+ expect(mockedApiGet).toHaveBeenCalledTimes(mockCommitments.length);
+ });
+
+ expect(mockedApiGet).toHaveBeenCalledWith('/api/commitments/CMT-ABC123/history');
+ expect(mockedApiGet).toHaveBeenCalledWith('/api/commitments/CMT-XYZ789/history');
+
+ // Resolve all pending requests so loading finishes and the feed renders.
+ pendingResolvers.forEach((resolve) => resolve({ success: true, data: { events: [] } }));
+
+ await waitFor(() => {
+ expect(screen.getByText('No Recent Activity')).toBeInTheDocument();
+ });
+ });
+
+ it('still renders events from other commitments when one request fails', async () => {
+ const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+ try {
+ mockedApiGet.mockImplementation((url: string) => {
+ if (url.includes('CMT-ABC123')) {
+ return Promise.reject(new Error('network down'));
+ }
+ return Promise.resolve({
+ success: true,
+ data: {
+ events: [
+ {
+ eventId: 'settlement:CMT-XYZ789',
+ kind: 'settlement',
+ occurredAt: new Date().toISOString(),
+ payload: { settlementAmount: '105,000' },
+ },
+ ],
+ },
+ });
+ });
+
+ render();
+
+ await waitFor(() => {
+ expect(screen.getByText('Settlement Complete')).toBeInTheDocument();
+ });
+
+ expect(consoleErrorSpy).toHaveBeenCalledWith(
+ 'Failed to load history for CMT-ABC123',
+ expect.any(Error),
+ );
+ } finally {
+ consoleErrorSpy.mockRestore();
+ }
+ });
+});
diff --git a/src/components/dashboard/RecentActivityFeed.tsx b/src/components/dashboard/RecentActivityFeed.tsx
new file mode 100644
index 00000000..c9d133a3
--- /dev/null
+++ b/src/components/dashboard/RecentActivityFeed.tsx
@@ -0,0 +1,259 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { apiGet } from '@/lib/apiClient';
+import { Commitment, HistoryEvent, HistoryEventKind } from '@/lib/types/domain';
+import { Skeleton } from '@/components/Skeleton';
+
+type FeedEvent = HistoryEvent & {
+ commitmentId: string;
+};
+
+interface RecentActivityFeedProps {
+ commitments: Commitment[];
+ maxItems?: number;
+}
+
+function formatRelativeTime(timestamp: string): string {
+ const date = new Date(timestamp);
+ const now = new Date();
+ const diffMs = now.getTime() - date.getTime();
+ const diffSeconds = Math.floor(diffMs / 1000);
+ const diffMinutes = Math.floor(diffSeconds / 60);
+ const diffHours = Math.floor(diffMinutes / 60);
+ const diffDays = Math.floor(diffHours / 24);
+ const diffWeeks = Math.floor(diffDays / 7);
+ const diffMonths = Math.floor(diffDays / 30);
+
+ if (diffSeconds < 60) return 'just now';
+ if (diffMinutes < 60) return `${diffMinutes} minute${diffMinutes === 1 ? '' : 's'} ago`;
+ if (diffHours < 24) return `${diffHours} hour${diffHours === 1 ? '' : 's'} ago`;
+ if (diffDays < 7) return `${diffDays} day${diffDays === 1 ? '' : 's'} ago`;
+ if (diffWeeks < 4) return `${diffWeeks} week${diffWeeks === 1 ? '' : 's'} ago`;
+ if (diffMonths < 12) return `${diffMonths} month${diffMonths === 1 ? '' : 's'} ago`;
+ const diffYears = Math.floor(diffMonths / 12);
+ return `${diffYears} year${diffYears === 1 ? '' : 's'} ago`;
+}
+
+function getEventIcon(kind: HistoryEventKind) {
+ switch (kind) {
+ case 'created':
+ return (
+
+ );
+ case 'attestation':
+ return (
+
+ );
+ case 'early_exit':
+ return (
+
+ );
+ case 'settlement':
+ return (
+
+ );
+ default:
+ return null;
+ }
+}
+
+function getEventTitle(event: FeedEvent): string {
+ switch (event.kind) {
+ case 'created':
+ return `Commitment Created`;
+ case 'attestation':
+ return `Attestation Recorded`;
+ case 'early_exit':
+ return `Early Exit`;
+ case 'settlement':
+ return `Settlement Complete`;
+ default:
+ return 'Event';
+ }
+}
+
+function getEventDescription(event: FeedEvent): string {
+ switch (event.kind) {
+ case 'created':
+ return `${event.payload.amount} ${event.payload.asset}`;
+ case 'attestation':
+ return event.payload.attestationType || 'Health check';
+ case 'early_exit':
+ return event.payload.exitedBy
+ ? `Exited by ${event.payload.exitedBy.slice(0, 8)}...`
+ : 'Early exit executed';
+ case 'settlement':
+ return event.payload.settlementAmount
+ ? `Settled: ${event.payload.settlementAmount}`
+ : 'Commitment settled';
+ default:
+ return '';
+ }
+}
+
+export function RecentActivityFeed({ commitments, maxItems = 5 }: RecentActivityFeedProps) {
+ const [events, setEvents] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ async function loadEvents() {
+ if (commitments.length === 0) {
+ setLoading(false);
+ return;
+ }
+
+ // Fetch every commitment's history in parallel. `Promise.allSettled`
+ // preserves the previous per-commitment try/catch-and-log behavior: a
+ // failed request for one commitment never blocks the others from
+ // rendering, so total time is ~max(latency) instead of N × latency.
+ const results = await Promise.allSettled(
+ commitments.map(async (commitment) => {
+ try {
+ const response = await apiGet<{ success: boolean; data: { events: HistoryEvent[] } }>(
+ `/api/commitments/${commitment.id}/history`,
+ );
+
+ if (response.success && response.data?.events) {
+ return response.data.events.map((event) => ({
+ ...event,
+ commitmentId: commitment.id,
+ }));
+ }
+ return [];
+ } catch (err) {
+ console.error(`Failed to load history for ${commitment.id}`, err);
+ return [];
+ }
+ }),
+ );
+
+ const allEvents: FeedEvent[] = results.flatMap((result) =>
+ result.status === 'fulfilled' ? result.value : [],
+ );
+
+ allEvents.sort((a, b) => new Date(b.occurredAt).getTime() - new Date(a.occurredAt).getTime());
+
+ setEvents(allEvents);
+ setLoading(false);
+ }
+
+ loadEvents();
+ }, [commitments]);
+
+ if (loading) {
+ return (
+
+
+
+
+
+ {[...Array(3)].map((_, i) => (
+
+ ))}
+
+
+
No Recent Activity
+
Activity from your commitments will appear here.
+
+
+
Recent Activity
+
+ {events.length} events
+
+
+
+
+ {displayEvents.map((event) => (
+ -
+
+
+ {getEventIcon(event.kind)}
+
+
+
+ {getEventTitle(event)}
+
+
+ {getEventDescription(event)} · Commitment {event.commitmentId.substring(0, 8)}
+
+
+
+
+ ))}
+
+
+ {hasMore && (
+
+
+ View All Activity
+
+
+
+ )}
+