diff --git a/frontend/e2e/activity-feed.spec.ts b/frontend/e2e/activity-feed.spec.ts
new file mode 100644
index 0000000..c2dddd4
--- /dev/null
+++ b/frontend/e2e/activity-feed.spec.ts
@@ -0,0 +1,202 @@
+/**
+ * E2E Tests for Activity Feed Page
+ *
+ * Tests the real-time activity feed functionality:
+ * - Page navigation and layout
+ * - Event display and filtering
+ * - Search functionality
+ * - Approval handling
+ * - Time-based grouping
+ */
+
+import { test, expect } from '@playwright/test';
+
+test.describe('Activity Feed Page', () => {
+  test.beforeEach(async ({ page }) => {
+    // Navigate to activity page (authenticated route)
+    // The page uses demo mode when SSE is not connected
+    await page.goto('/en/activity');
+  });
+
+  test('displays page header with title', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Activity Feed', level: 1 })).toBeVisible();
+    await expect(page.getByText('Real-time updates from your projects')).toBeVisible();
+  });
+
+  test('shows demo mode banner when not connected to SSE', async ({ page }) => {
+    // Demo mode banner should be visible
+    await expect(page.getByText(/Demo Mode/)).toBeVisible();
+    await expect(page.getByText(/Showing sample events/)).toBeVisible();
+  });
+
+  test('displays activity feed component', async ({ page }) => {
+    await expect(page.getByTestId('activity-feed')).toBeVisible();
+  });
+
+  test('displays demo events in time groups', async ({ page }) => {
+    // Should have time-based grouping
+    await expect(page.getByTestId('event-group-today')).toBeVisible();
+  });
+
+  test('search functionality filters events', async ({ page }) => {
+    const searchInput = page.getByTestId('search-input');
+    await expect(searchInput).toBeVisible();
+
+    // Search for a specific term
+    await searchInput.fill('JWT');
+
+    // Should find the JWT-related event
+    await expect(page.getByText(/Completed JWT/)).toBeVisible();
+
+    // Clear search
+    await searchInput.clear();
+  });
+
+  test('filter panel toggles visibility', async ({ page }) => {
+    const filterToggle = page.getByTestId('filter-toggle');
+    await expect(filterToggle).toBeVisible();
+
+    // Click to open filter panel
+    await filterToggle.click();
+    await expect(page.getByTestId('filter-panel')).toBeVisible();
+
+    // Click to close filter panel
+    await filterToggle.click();
+    await expect(page.getByTestId('filter-panel')).not.toBeVisible();
+  });
+
+  test('filter by event category', async ({ page }) => {
+    // Open filter panel
+    await page.getByTestId('filter-toggle').click();
+
+    // Select Agent Actions filter
+    await page.getByLabel(/Agent Actions/).click();
+
+    // Should filter events
+    // Agent events should still be visible
+    await expect(page.getByText(/Completed JWT/)).toBeVisible();
+  });
+
+  test('pending approvals filter', async ({ page }) => {
+    // Open filter panel
+    await page.getByTestId('filter-toggle').click();
+
+    // Select pending only filter
+    await page.getByLabel(/Show only pending approvals/).click();
+
+    // Only approval events should be visible
+    await expect(page.getByText(/Approval required/)).toBeVisible();
+    await expect(page.getByText(/Completed JWT/)).not.toBeVisible();
+  });
+
+  test('event item can be expanded', async ({ page }) => {
+    // Find and click an event item
+    const firstEvent = page.getByTestId(/event-item-/).first();
+    await firstEvent.click();
+
+    // Event details should be visible
+    await expect(page.getByTestId('event-details')).toBeVisible();
+
+    // Should show raw payload option
+    await expect(page.getByText('View raw payload')).toBeVisible();
+  });
+
+  test('approval actions are visible for pending approvals', async ({ page }) => {
+    // Find approval event
+    const approvalEvent = page.locator('[data-testid^="event-item-"]', {
+      has: page.getByText('Action Required'),
+    }).first();
+
+    // Approval buttons should be visible
+    await expect(approvalEvent.getByTestId('approve-button')).toBeVisible();
+    await expect(approvalEvent.getByTestId('reject-button')).toBeVisible();
+  });
+
+  test('notification toggle works', async ({ page }) => {
+    const bellButton = page.getByLabel(/notifications/i);
+    await expect(bellButton).toBeVisible();
+
+    // Click to toggle notifications
+    await bellButton.click();
+
+    // Bell icon should change (hard to verify icon change in E2E, but click should work)
+    await expect(bellButton).toBeEnabled();
+  });
+
+  test('refresh button triggers reconnection', async ({ page }) => {
+    const refreshButton = page.getByLabel('Refresh connection');
+    await expect(refreshButton).toBeVisible();
+
+    // Click refresh
+    await refreshButton.click();
+
+    // Button should still be visible and enabled
+    await expect(refreshButton).toBeEnabled();
+  });
+
+  test('pending count badge shows correct count', async ({ page }) => {
+    // Should show pending count
+    await expect(page.getByText(/pending$/)).toBeVisible();
+  });
+
+  test('keyboard navigation works for events', async ({ page }) => {
+    // Tab to first event
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+
+    // Find focused element and press Enter
+    const focusedElement = page.locator(':focus');
+
+    // If it's an event item, pressing Enter should expand it
+    const testId = await focusedElement.getAttribute('data-testid');
+    if (testId?.startsWith('event-item-')) {
+      await page.keyboard.press('Enter');
+      await expect(page.getByTestId('event-details')).toBeVisible();
+    }
+  });
+
+  test('clear filters button works', async ({ page }) => {
+    // Open filter panel and set some filters
+    await page.getByTestId('filter-toggle').click();
+    await page.getByLabel(/Agent Actions/).click();
+
+    // Click clear filters
+    await page.getByText('Clear Filters').click();
+
+    // All events should be visible again
+    await expect(page.getByText(/Completed JWT/)).toBeVisible();
+    await expect(page.getByText(/Approval required/)).toBeVisible();
+  });
+
+  test('responsive layout adapts to viewport', async ({ page }) => {
+    // Test mobile viewport
+    await page.setViewportSize({ width: 375, height: 667 });
+
+    // Page should still be functional
+    await expect(page.getByTestId('activity-feed')).toBeVisible();
+    await expect(page.getByTestId('search-input')).toBeVisible();
+
+    // Reset viewport
+    await page.setViewportSize({ width: 1280, height: 720 });
+  });
+});
+
+test.describe('Activity Feed - Authenticated Routes', () => {
+  test('redirects to login when not authenticated', async ({ page }) => {
+    // Clear any existing auth state
+    await page.context().clearCookies();
+
+    // Try to access activity page
+    await page.goto('/en/activity');
+
+    // Should redirect to login (AuthGuard behavior)
+    // The exact behavior depends on AuthGuard implementation
+    await page.waitForLoadState('networkidle');
+
+    // Either on activity page (if demo mode) or redirected to login
+    const url = page.url();
+    expect(url.includes('/activity') || url.includes('/login')).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/[locale]/(authenticated)/activity/page.tsx b/frontend/src/app/[locale]/(authenticated)/activity/page.tsx
new file mode 100644
index 0000000..1a918ce
--- /dev/null
+++ b/frontend/src/app/[locale]/(authenticated)/activity/page.tsx
@@ -0,0 +1,238 @@
+/**
+ * Activity Feed Page
+ *
+ * Full-page view of real-time project activity with:
+ * - Real-time SSE connection
+ * - Event filtering and search
+ * - Time-based grouping
+ * - Approval handling
+ */
+
+'use client';
+
+import { useState, useCallback } from 'react';
+import { useProjectEvents } from '@/lib/hooks/useProjectEvents';
+import { ActivityFeed } from '@/components/activity';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { RefreshCw, Bell, BellOff, AlertTriangle } from 'lucide-react';
+import { EventType, type ProjectEvent } from '@/lib/types/events';
+import { toast } from 'sonner';
+
+// For demo purposes, use a placeholder project ID
+// In a real app, this would come from route params or user context
+const DEMO_PROJECT_ID = 'demo-project-001';
+
+// Demo events for when SSE is not connected
+const DEMO_EVENTS: ProjectEvent[] = [
+  {
+    id: 'demo-001',
+    type: EventType.APPROVAL_REQUESTED,
+    timestamp: new Date(Date.now() - 1000 * 60 * 5).toISOString(),
+    project_id: DEMO_PROJECT_ID,
+    actor_id: 'agent-001',
+    actor_type: 'agent',
+    payload: {
+      approval_id: 'apr-001',
+      approval_type: 'architecture_decision',
+      description: 'Approval required for API design document for the checkout flow.',
+      requested_by: 'Architect',
+      timeout_minutes: 60,
+    },
+  },
+  {
+    id: 'demo-002',
+    type: EventType.AGENT_MESSAGE,
+    timestamp: new Date(Date.now() - 1000 * 60 * 10).toISOString(),
+    project_id: DEMO_PROJECT_ID,
+    actor_id: 'agent-002',
+    actor_type: 'agent',
+    payload: {
+      agent_instance_id: 'agent-002',
+      message: 'Completed JWT token generation and validation. Moving on to session management.',
+      message_type: 'info',
+      metadata: { progress: 65 },
+    },
+  },
+  {
+    id: 'demo-003',
+    type: EventType.AGENT_STATUS_CHANGED,
+    timestamp: new Date(Date.now() - 1000 * 60 * 20).toISOString(),
+    project_id: DEMO_PROJECT_ID,
+    actor_id: 'agent-003',
+    actor_type: 'agent',
+    payload: {
+      agent_instance_id: 'agent-003',
+      previous_status: 'idle',
+      new_status: 'active',
+      reason: 'Started working on product catalog component',
+    },
+  },
+  {
+    id: 'demo-004',
+    type: EventType.ISSUE_UPDATED,
+    timestamp: new Date(Date.now() - 1000 * 60 * 30).toISOString(),
+    project_id: DEMO_PROJECT_ID,
+    actor_id: 'agent-002',
+    actor_type: 'agent',
+    payload: {
+      issue_id: 'issue-038',
+      changes: { status: { from: 'in_progress', to: 'in_review' } },
+    },
+  },
+  {
+    id: 'demo-005',
+    type: EventType.SPRINT_STARTED,
+    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(),
+    project_id: DEMO_PROJECT_ID,
+    actor_id: null,
+    actor_type: 'system',
+    payload: {
+      sprint_id: 'sprint-003',
+      sprint_name: 'Sprint 3 - Authentication',
+      goal: 'Complete user authentication module',
+      issue_count: 8,
+    },
+  },
+  {
+    id: 'demo-006',
+    type: EventType.WORKFLOW_COMPLETED,
+    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(),
+    project_id: DEMO_PROJECT_ID,
+    actor_id: null,
+    actor_type: 'system',
+    payload: {
+      workflow_id: 'wf-001',
+      duration_seconds: 3600,
+      result: { issues_completed: 5, code_coverage: 92 },
+    },
+  },
+  {
+    id: 'demo-007',
+    type: EventType.ISSUE_CREATED,
+    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
+    project_id: DEMO_PROJECT_ID,
+    actor_id: 'agent-001',
+    actor_type: 'agent',
+    payload: {
+      issue_id: 'issue-050',
+      title: 'Add rate limiting to API endpoints',
+      priority: 'medium',
+      labels: ['security', 'api'],
+    },
+  },
+];
+
+export default function ActivityFeedPage() {
+  const [notificationsEnabled, setNotificationsEnabled] = useState(true);
+
+  // SSE hook for real-time events
+  const {
+    events: sseEvents,
+    connectionState,
+    reconnect,
+    isConnected,
+  } = useProjectEvents(DEMO_PROJECT_ID, {
+    autoConnect: true,
+    onEvent: (event) => {
+      // Show notification for new events if enabled
+      if (notificationsEnabled && event.type === EventType.APPROVAL_REQUESTED) {
+        toast.info('New approval request', {
+          description: 'An agent is requesting your approval.',
+        });
+      }
+    },
+  });
+
+  // Use demo events when not connected or no events received
+  const events = isConnected && sseEvents.length > 0 ? sseEvents : DEMO_EVENTS;
+
+  // Approval handlers
+  const handleApprove = useCallback((event: ProjectEvent) => {
+    // In a real app, this would call an API to approve the request
+    toast.success('Approval granted', {
+      description: `Approved request ${event.id}`,
+    });
+  }, []);
+
+  const handleReject = useCallback((event: ProjectEvent) => {
+    // In a real app, this would call an API to reject the request
+    toast.info('Approval rejected', {
+      description: `Rejected request ${event.id}`,
+    });
+  }, []);
+
+  const handleEventClick = useCallback((event: ProjectEvent) => {
+    // In a real app, this might navigate to a detail view
+    if (process.env.NODE_ENV === 'development') {
+      console.log('[ActivityFeedPage] Event clicked:', event);
+    }
+  }, []);
+
+  const pendingCount = events.filter((e) => e.type === EventType.APPROVAL_REQUESTED).length;
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="mx-auto max-w-4xl space-y-6">
+        {/* Page Header */}
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Activity Feed</h1>
+            <p className="mt-1 text-muted-foreground">Real-time updates from your projects</p>
+          </div>
+          <div className="flex items-center gap-2">
+            {pendingCount > 0 && (
+              <Badge variant="destructive" className="gap-1">
+                <AlertTriangle className="h-3 w-3" />
+                {pendingCount} pending
+              </Badge>
+            )}
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setNotificationsEnabled(!notificationsEnabled)}
+              aria-label={notificationsEnabled ? 'Disable notifications' : 'Enable notifications'}
+            >
+              {notificationsEnabled ? (
+                <Bell className="h-4 w-4" />
+              ) : (
+                <BellOff className="h-4 w-4" />
+              )}
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={reconnect}
+              aria-label="Refresh connection"
+            >
+              <RefreshCw className={connectionState === 'connecting' ? 'h-4 w-4 animate-spin' : 'h-4 w-4'} />
+            </Button>
+          </div>
+        </div>
+
+        {/* Demo Mode Banner */}
+        {(!isConnected || sseEvents.length === 0) && (
+          <div className="rounded-lg border border-yellow-200 bg-yellow-50 p-4 dark:border-yellow-800 dark:bg-yellow-950">
+            <p className="text-sm text-yellow-800 dark:text-yellow-200">
+              <strong>Demo Mode:</strong> Showing sample events. Connect to a real project to see live updates.
+            </p>
+          </div>
+        )}
+
+        {/* Activity Feed Component */}
+        <ActivityFeed
+          events={events}
+          connectionState={isConnected ? connectionState : 'disconnected'}
+          onReconnect={reconnect}
+          onApprove={handleApprove}
+          onReject={handleReject}
+          onEventClick={handleEventClick}
+          maxHeight={600}
+          showHeader={false}
+          enableFiltering
+          enableSearch
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/activity/ActivityFeed.tsx b/frontend/src/components/activity/ActivityFeed.tsx
new file mode 100644
index 0000000..0bdafac
--- /dev/null
+++ b/frontend/src/components/activity/ActivityFeed.tsx
@@ -0,0 +1,928 @@
+/**
+ * ActivityFeed Component
+ *
+ * A shared real-time activity feed component used across:
+ * - Main Dashboard
+ * - Project Dashboard
+ * - Activity Feed page
+ *
+ * Features:
+ * - Real-time connection indicator
+ * - Time-based event grouping (Today, Yesterday, This Week, etc.)
+ * - Event type filtering
+ * - Expandable event details
+ * - Approval request handling
+ * - Search functionality
+ */
+
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import { formatDistanceToNow, isToday, isYesterday, isThisWeek } from 'date-fns';
+import {
+  Activity,
+  Bot,
+  FileText,
+  Users,
+  CheckCircle2,
+  XCircle,
+  PlayCircle,
+  AlertTriangle,
+  Folder,
+  Workflow,
+  ChevronDown,
+  ChevronRight,
+  Search,
+  Filter,
+  RefreshCw,
+  CircleDot,
+  GitPullRequest,
+  ExternalLink,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Separator } from '@/components/ui/separator';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  EventType,
+  type ProjectEvent,
+  isAgentEvent,
+  isIssueEvent,
+  isSprintEvent,
+  isApprovalEvent,
+  isWorkflowEvent,
+  isProjectEvent,
+} from '@/lib/types/events';
+import type { ConnectionState } from '@/lib/types/events';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface ActivityFeedProps {
+  /** Events to display */
+  events: ProjectEvent[];
+  /** SSE connection state */
+  connectionState: ConnectionState;
+  /** Whether data is loading */
+  isLoading?: boolean;
+  /** Callback to trigger reconnection */
+  onReconnect?: () => void;
+  /** Callback when an approval is approved */
+  onApprove?: (event: ProjectEvent) => void;
+  /** Callback when an approval is rejected */
+  onReject?: (event: ProjectEvent) => void;
+  /** Callback when event is clicked */
+  onEventClick?: (event: ProjectEvent) => void;
+  /** Maximum height for scrolling (default: 'auto') */
+  maxHeight?: number | string;
+  /** Whether to show the header (default: true) */
+  showHeader?: boolean;
+  /** Title for the header (default: 'Activity Feed') */
+  title?: string;
+  /** Whether to enable filtering (default: true) */
+  enableFiltering?: boolean;
+  /** Whether to enable search (default: true) */
+  enableSearch?: boolean;
+  /** Show compact view (default: false) */
+  compact?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export interface EventTypeFilter {
+  type: EventType | 'all';
+  label: string;
+  count: number;
+}
+
+interface EventGroup {
+  label: string;
+  events: ProjectEvent[];
+}
+
+// ============================================================================
+// Event Configuration
+// ============================================================================
+
+const EVENT_TYPE_CONFIG: Record<
+  string,
+  {
+    label: string;
+    icon: typeof Activity;
+    color: string;
+    bgColor: string;
+  }
+> = {
+  // Agent Events
+  [EventType.AGENT_SPAWNED]: {
+    label: 'Agent Spawned',
+    icon: Bot,
+    color: 'text-blue-500',
+    bgColor: 'bg-blue-100 dark:bg-blue-900',
+  },
+  [EventType.AGENT_MESSAGE]: {
+    label: 'Agent Message',
+    icon: Bot,
+    color: 'text-blue-500',
+    bgColor: 'bg-blue-100 dark:bg-blue-900',
+  },
+  [EventType.AGENT_STATUS_CHANGED]: {
+    label: 'Status Changed',
+    icon: Bot,
+    color: 'text-yellow-500',
+    bgColor: 'bg-yellow-100 dark:bg-yellow-900',
+  },
+  [EventType.AGENT_TERMINATED]: {
+    label: 'Agent Terminated',
+    icon: Bot,
+    color: 'text-gray-500',
+    bgColor: 'bg-gray-100 dark:bg-gray-800',
+  },
+  // Issue Events
+  [EventType.ISSUE_CREATED]: {
+    label: 'Issue Created',
+    icon: CircleDot,
+    color: 'text-green-500',
+    bgColor: 'bg-green-100 dark:bg-green-900',
+  },
+  [EventType.ISSUE_UPDATED]: {
+    label: 'Issue Updated',
+    icon: FileText,
+    color: 'text-blue-500',
+    bgColor: 'bg-blue-100 dark:bg-blue-900',
+  },
+  [EventType.ISSUE_ASSIGNED]: {
+    label: 'Issue Assigned',
+    icon: Users,
+    color: 'text-purple-500',
+    bgColor: 'bg-purple-100 dark:bg-purple-900',
+  },
+  [EventType.ISSUE_CLOSED]: {
+    label: 'Issue Closed',
+    icon: CheckCircle2,
+    color: 'text-green-600',
+    bgColor: 'bg-green-100 dark:bg-green-900',
+  },
+  // Sprint Events
+  [EventType.SPRINT_STARTED]: {
+    label: 'Sprint Started',
+    icon: PlayCircle,
+    color: 'text-indigo-500',
+    bgColor: 'bg-indigo-100 dark:bg-indigo-900',
+  },
+  [EventType.SPRINT_COMPLETED]: {
+    label: 'Sprint Completed',
+    icon: CheckCircle2,
+    color: 'text-indigo-500',
+    bgColor: 'bg-indigo-100 dark:bg-indigo-900',
+  },
+  // Approval Events
+  [EventType.APPROVAL_REQUESTED]: {
+    label: 'Approval Requested',
+    icon: AlertTriangle,
+    color: 'text-orange-500',
+    bgColor: 'bg-orange-100 dark:bg-orange-900',
+  },
+  [EventType.APPROVAL_GRANTED]: {
+    label: 'Approval Granted',
+    icon: CheckCircle2,
+    color: 'text-green-500',
+    bgColor: 'bg-green-100 dark:bg-green-900',
+  },
+  [EventType.APPROVAL_DENIED]: {
+    label: 'Approval Denied',
+    icon: XCircle,
+    color: 'text-red-500',
+    bgColor: 'bg-red-100 dark:bg-red-900',
+  },
+  // Project Events
+  [EventType.PROJECT_CREATED]: {
+    label: 'Project Created',
+    icon: Folder,
+    color: 'text-teal-500',
+    bgColor: 'bg-teal-100 dark:bg-teal-900',
+  },
+  [EventType.PROJECT_UPDATED]: {
+    label: 'Project Updated',
+    icon: Folder,
+    color: 'text-teal-500',
+    bgColor: 'bg-teal-100 dark:bg-teal-900',
+  },
+  [EventType.PROJECT_ARCHIVED]: {
+    label: 'Project Archived',
+    icon: Folder,
+    color: 'text-gray-500',
+    bgColor: 'bg-gray-100 dark:bg-gray-800',
+  },
+  // Workflow Events
+  [EventType.WORKFLOW_STARTED]: {
+    label: 'Workflow Started',
+    icon: Workflow,
+    color: 'text-cyan-500',
+    bgColor: 'bg-cyan-100 dark:bg-cyan-900',
+  },
+  [EventType.WORKFLOW_STEP_COMPLETED]: {
+    label: 'Step Completed',
+    icon: Workflow,
+    color: 'text-cyan-500',
+    bgColor: 'bg-cyan-100 dark:bg-cyan-900',
+  },
+  [EventType.WORKFLOW_COMPLETED]: {
+    label: 'Workflow Completed',
+    icon: CheckCircle2,
+    color: 'text-green-500',
+    bgColor: 'bg-green-100 dark:bg-green-900',
+  },
+  [EventType.WORKFLOW_FAILED]: {
+    label: 'Workflow Failed',
+    icon: XCircle,
+    color: 'text-red-500',
+    bgColor: 'bg-red-100 dark:bg-red-900',
+  },
+};
+
+const FILTER_CATEGORIES = [
+  { id: 'agent', label: 'Agent Actions', types: [EventType.AGENT_SPAWNED, EventType.AGENT_MESSAGE, EventType.AGENT_STATUS_CHANGED, EventType.AGENT_TERMINATED] },
+  { id: 'issue', label: 'Issues', types: [EventType.ISSUE_CREATED, EventType.ISSUE_UPDATED, EventType.ISSUE_ASSIGNED, EventType.ISSUE_CLOSED] },
+  { id: 'sprint', label: 'Sprints', types: [EventType.SPRINT_STARTED, EventType.SPRINT_COMPLETED] },
+  { id: 'approval', label: 'Approvals', types: [EventType.APPROVAL_REQUESTED, EventType.APPROVAL_GRANTED, EventType.APPROVAL_DENIED] },
+  { id: 'workflow', label: 'Workflows', types: [EventType.WORKFLOW_STARTED, EventType.WORKFLOW_STEP_COMPLETED, EventType.WORKFLOW_COMPLETED, EventType.WORKFLOW_FAILED] },
+  { id: 'project', label: 'Projects', types: [EventType.PROJECT_CREATED, EventType.PROJECT_UPDATED, EventType.PROJECT_ARCHIVED] },
+];
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+function getEventConfig(event: ProjectEvent) {
+  const config = EVENT_TYPE_CONFIG[event.type];
+  if (config) return config;
+
+  // Fallback based on event category
+  if (isAgentEvent(event)) {
+    return { icon: Bot, label: event.type, color: 'text-blue-500', bgColor: 'bg-blue-100 dark:bg-blue-900' };
+  }
+  if (isIssueEvent(event)) {
+    return { icon: FileText, label: event.type, color: 'text-green-500', bgColor: 'bg-green-100 dark:bg-green-900' };
+  }
+  if (isSprintEvent(event)) {
+    return { icon: PlayCircle, label: event.type, color: 'text-indigo-500', bgColor: 'bg-indigo-100 dark:bg-indigo-900' };
+  }
+  if (isApprovalEvent(event)) {
+    return { icon: AlertTriangle, label: event.type, color: 'text-orange-500', bgColor: 'bg-orange-100 dark:bg-orange-900' };
+  }
+  if (isWorkflowEvent(event)) {
+    return { icon: Workflow, label: event.type, color: 'text-cyan-500', bgColor: 'bg-cyan-100 dark:bg-cyan-900' };
+  }
+  if (isProjectEvent(event)) {
+    return { icon: Folder, label: event.type, color: 'text-teal-500', bgColor: 'bg-teal-100 dark:bg-teal-900' };
+  }
+
+  return { icon: Activity, label: event.type, color: 'text-gray-500', bgColor: 'bg-gray-100 dark:bg-gray-800' };
+}
+
+function getEventSummary(event: ProjectEvent): string {
+  const payload = event.payload as Record<string, unknown>;
+
+  switch (event.type) {
+    case EventType.AGENT_SPAWNED:
+      return `${payload.agent_name || 'Agent'} spawned as ${payload.role || 'unknown role'}`;
+    case EventType.AGENT_MESSAGE:
+      return String(payload.message || 'No message');
+    case EventType.AGENT_STATUS_CHANGED:
+      return `Status: ${payload.previous_status} -> ${payload.new_status}`;
+    case EventType.AGENT_TERMINATED:
+      return payload.termination_reason ? String(payload.termination_reason) : 'Agent terminated';
+    case EventType.ISSUE_CREATED:
+      return String(payload.title || 'New issue created');
+    case EventType.ISSUE_UPDATED:
+      return `Issue ${payload.issue_id || ''} updated`;
+    case EventType.ISSUE_ASSIGNED:
+      return payload.assignee_name ? `Assigned to ${payload.assignee_name}` : 'Issue assignment changed';
+    case EventType.ISSUE_CLOSED:
+      return payload.resolution ? `Closed: ${payload.resolution}` : 'Issue closed';
+    case EventType.SPRINT_STARTED:
+      return payload.sprint_name ? `Sprint "${payload.sprint_name}" started` : 'Sprint started';
+    case EventType.SPRINT_COMPLETED:
+      return payload.sprint_name ? `Sprint "${payload.sprint_name}" completed` : 'Sprint completed';
+    case EventType.APPROVAL_REQUESTED:
+      return String(payload.description || 'Approval requested');
+    case EventType.APPROVAL_GRANTED:
+      return 'Approval granted';
+    case EventType.APPROVAL_DENIED:
+      return payload.reason ? `Denied: ${payload.reason}` : 'Approval denied';
+    case EventType.WORKFLOW_STARTED:
+      return payload.workflow_type ? `${payload.workflow_type} workflow started` : 'Workflow started';
+    case EventType.WORKFLOW_STEP_COMPLETED:
+      return `Step ${payload.step_number}/${payload.total_steps}: ${payload.step_name || 'completed'}`;
+    case EventType.WORKFLOW_COMPLETED:
+      return payload.duration_seconds ? `Completed in ${payload.duration_seconds}s` : 'Workflow completed';
+    case EventType.WORKFLOW_FAILED:
+      return payload.error_message ? String(payload.error_message) : 'Workflow failed';
+    default:
+      return event.type;
+  }
+}
+
+function groupEventsByTimePeriod(events: ProjectEvent[]): EventGroup[] {
+  const groups: EventGroup[] = [
+    { label: 'Today', events: [] },
+    { label: 'Yesterday', events: [] },
+    { label: 'This Week', events: [] },
+    { label: 'Older', events: [] },
+  ];
+
+  events.forEach((event) => {
+    const eventDate = new Date(event.timestamp);
+
+    if (isToday(eventDate)) {
+      groups[0].events.push(event);
+    } else if (isYesterday(eventDate)) {
+      groups[1].events.push(event);
+    } else if (isThisWeek(eventDate, { weekStartsOn: 1 })) {
+      groups[2].events.push(event);
+    } else {
+      groups[3].events.push(event);
+    }
+  });
+
+  // Sort events within each group by timestamp (newest first)
+  groups.forEach((group) => {
+    group.events.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+  });
+
+  return groups.filter((g) => g.events.length > 0);
+}
+
+function formatActorDisplay(event: ProjectEvent): string {
+  if (event.actor_type === 'system') return 'System';
+  if (event.actor_type === 'agent') return 'Agent';
+  if (event.actor_type === 'user') return 'User';
+  return event.actor_type;
+}
+
+// ============================================================================
+// Sub-Components
+// ============================================================================
+
+interface ConnectionIndicatorProps {
+  state: ConnectionState;
+  onReconnect?: () => void;
+  className?: string;
+}
+
+function ConnectionIndicator({ state, onReconnect, className }: ConnectionIndicatorProps) {
+  const statusConfig = {
+    connected: { color: 'bg-green-500', label: 'Live', pulse: true },
+    connecting: { color: 'bg-yellow-500', label: 'Connecting...', pulse: true },
+    disconnected: { color: 'bg-gray-400', label: 'Disconnected', pulse: false },
+    error: { color: 'bg-red-500', label: 'Error', pulse: false },
+  };
+
+  const config = statusConfig[state];
+  const canReconnect = state === 'disconnected' || state === 'error';
+
+  return (
+    <div className={cn('flex items-center gap-2', className)} data-testid="connection-indicator">
+      <span
+        className={cn(
+          'h-2 w-2 rounded-full',
+          config.color,
+          config.pulse && 'animate-pulse'
+        )}
+        aria-hidden="true"
+      />
+      <span className="text-sm text-muted-foreground">{config.label}</span>
+      {canReconnect && onReconnect && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onReconnect}
+          className="h-6 w-6 p-0"
+          aria-label="Reconnect"
+        >
+          <RefreshCw className="h-3 w-3" />
+        </Button>
+      )}
+    </div>
+  );
+}
+
+interface FilterPanelProps {
+  selectedCategories: string[];
+  onCategoryChange: (categoryId: string) => void;
+  showPendingOnly: boolean;
+  onShowPendingOnlyChange: (value: boolean) => void;
+  onClearFilters: () => void;
+  events: ProjectEvent[];
+}
+
+function FilterPanel({
+  selectedCategories,
+  onCategoryChange,
+  showPendingOnly,
+  onShowPendingOnlyChange,
+  onClearFilters,
+  events,
+}: FilterPanelProps) {
+  const getCategoryCount = (types: EventType[]) => {
+    return events.filter((e) => types.includes(e.type)).length;
+  };
+
+  const pendingCount = events.filter((e) => e.type === EventType.APPROVAL_REQUESTED).length;
+
+  return (
+    <Card className="p-4" data-testid="filter-panel">
+      <div className="space-y-4">
+        <div>
+          <Label className="text-sm font-medium">Event Types</Label>
+          <div className="mt-2 grid grid-cols-2 gap-2">
+            {FILTER_CATEGORIES.map((category) => {
+              const count = getCategoryCount(category.types);
+              return (
+                <div key={category.id} className="flex items-center gap-2">
+                  <Checkbox
+                    id={`filter-${category.id}`}
+                    checked={selectedCategories.includes(category.id)}
+                    onCheckedChange={() => onCategoryChange(category.id)}
+                  />
+                  <Label
+                    htmlFor={`filter-${category.id}`}
+                    className="flex items-center gap-1 text-sm font-normal cursor-pointer"
+                  >
+                    {category.label}
+                    <Badge variant="secondary" className="text-xs">
+                      {count}
+                    </Badge>
+                  </Label>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        <Separator />
+
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id="filter-pending"
+            checked={showPendingOnly}
+            onCheckedChange={(checked) => onShowPendingOnlyChange(checked as boolean)}
+          />
+          <Label htmlFor="filter-pending" className="flex items-center gap-1 text-sm font-normal cursor-pointer">
+            Show only pending approvals
+            {pendingCount > 0 && (
+              <Badge variant="destructive" className="text-xs">
+                {pendingCount}
+              </Badge>
+            )}
+          </Label>
+        </div>
+
+        <div className="flex justify-end">
+          <Button variant="ghost" size="sm" onClick={onClearFilters}>
+            Clear Filters
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+interface EventItemProps {
+  event: ProjectEvent;
+  expanded: boolean;
+  onToggle: () => void;
+  onApprove?: (event: ProjectEvent) => void;
+  onReject?: (event: ProjectEvent) => void;
+  onClick?: (event: ProjectEvent) => void;
+  compact?: boolean;
+}
+
+function EventItem({
+  event,
+  expanded,
+  onToggle,
+  onApprove,
+  onReject,
+  onClick,
+  compact = false,
+}: EventItemProps) {
+  const config = getEventConfig(event);
+  const Icon = config.icon;
+  const summary = getEventSummary(event);
+  const actor = formatActorDisplay(event);
+  const timestamp = formatDistanceToNow(new Date(event.timestamp), { addSuffix: true });
+  const isPendingApproval = event.type === EventType.APPROVAL_REQUESTED;
+  const payload = event.payload as Record<string, unknown>;
+
+  const handleClick = () => {
+    onClick?.(event);
+    onToggle();
+  };
+
+  const handleApprove = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onApprove?.(event);
+  };
+
+  const handleReject = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onReject?.(event);
+  };
+
+  return (
+    <div
+      className={cn(
+        'border-b border-border/50 last:border-b-0 transition-colors',
+        'cursor-pointer hover:bg-muted/50',
+        isPendingApproval && 'border-l-4 border-l-orange-500',
+        compact ? 'p-2' : 'p-4'
+      )}
+      onClick={handleClick}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handleClick();
+        }
+      }}
+      data-testid={`event-item-${event.id}`}
+    >
+      <div className="flex gap-3">
+        {/* Icon */}
+        <div
+          className={cn(
+            'flex shrink-0 items-center justify-center rounded-full',
+            config.bgColor,
+            compact ? 'h-8 w-8' : 'h-10 w-10'
+          )}
+        >
+          <Icon className={cn(config.color, compact ? 'h-4 w-4' : 'h-5 w-5')} aria-hidden="true" />
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between gap-2">
+            <div className="flex-1 min-w-0">
+              <div className="flex flex-wrap items-center gap-2">
+                <Badge variant="outline" className="text-xs">
+                  {config.label}
+                </Badge>
+                <span className="text-xs text-muted-foreground">{actor}</span>
+                {isPendingApproval && (
+                  <Badge variant="destructive" className="text-xs">
+                    Action Required
+                  </Badge>
+                )}
+              </div>
+              <p className={cn('mt-1 text-sm', compact && 'truncate')}>{summary}</p>
+            </div>
+
+            <div className="flex items-center gap-1 shrink-0">
+              <span className="text-xs text-muted-foreground whitespace-nowrap">{timestamp}</span>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onToggle();
+                }}
+                aria-label={expanded ? 'Collapse details' : 'Expand details'}
+              >
+                {expanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+              </Button>
+            </div>
+          </div>
+
+          {/* Expanded Details */}
+          {expanded && (() => {
+            const issueId = payload.issue_id as string | undefined;
+            const pullRequest = payload.pullRequest as string | number | undefined;
+            const documentUrl = payload.documentUrl as string | undefined;
+            const progress = payload.progress as number | undefined;
+
+            return (
+              <div className="mt-3 rounded-md bg-muted/50 p-3 space-y-3" data-testid="event-details">
+                {/* Issue/PR Links */}
+                {issueId && (
+                  <div className="flex items-center gap-2 text-sm">
+                    <CircleDot className="h-4 w-4" aria-hidden="true" />
+                    <span>Issue #{issueId}</span>
+                  </div>
+                )}
+                {pullRequest && (
+                  <div className="flex items-center gap-2 text-sm">
+                    <GitPullRequest className="h-4 w-4" aria-hidden="true" />
+                    <span>PR #{String(pullRequest)}</span>
+                  </div>
+                )}
+
+                {/* Document Links */}
+                {documentUrl && (
+                  <div className="flex items-center gap-2 text-sm">
+                    <ExternalLink className="h-4 w-4" aria-hidden="true" />
+                    <a href={documentUrl} className="text-primary hover:underline">
+                      {documentUrl}
+                    </a>
+                  </div>
+                )}
+
+                {/* Progress */}
+                {progress !== undefined && (
+                  <div className="space-y-1">
+                    <div className="flex justify-between text-sm">
+                      <span>Progress</span>
+                      <span>{progress}%</span>
+                    </div>
+                    <div className="h-2 rounded-full bg-muted">
+                      <div
+                        className="h-full rounded-full bg-primary"
+                        style={{ width: `${progress}%` }}
+                      />
+                    </div>
+                  </div>
+                )}
+
+                {/* Timestamp */}
+                <p className="text-xs text-muted-foreground">
+                  {new Date(event.timestamp).toLocaleString()}
+                </p>
+
+                {/* Raw Payload (for debugging) */}
+                <details className="text-xs">
+                  <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
+                    View raw payload
+                  </summary>
+                  <pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded bg-muted p-2">
+                    {JSON.stringify(event.payload, null, 2)}
+                  </pre>
+                </details>
+              </div>
+            );
+          })()}
+
+          {/* Approval Actions */}
+          {isPendingApproval && (onApprove || onReject) && (
+            <div className="mt-3 flex gap-2">
+              {onApprove && (
+                <Button size="sm" onClick={handleApprove} data-testid="approve-button">
+                  <CheckCircle2 className="mr-2 h-4 w-4" />
+                  Approve
+                </Button>
+              )}
+              {onReject && (
+                <Button variant="outline" size="sm" onClick={handleReject} data-testid="reject-button">
+                  <XCircle className="mr-2 h-4 w-4" />
+                  Reject
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-4" data-testid="loading-skeleton">
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="flex gap-3 p-4">
+          <Skeleton className="h-10 w-10 rounded-full" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-3/4" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function EmptyState({ hasFilters }: { hasFilters: boolean }) {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground" data-testid="empty-state">
+      <Activity className="h-12 w-12 mb-4" aria-hidden="true" />
+      <h3 className="font-semibold">No activity found</h3>
+      <p className="text-sm">
+        {hasFilters
+          ? 'Try adjusting your search or filters'
+          : 'Activity will appear here as agents work on your projects'}
+      </p>
+    </div>
+  );
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function ActivityFeed({
+  events,
+  connectionState,
+  isLoading = false,
+  onReconnect,
+  onApprove,
+  onReject,
+  onEventClick,
+  maxHeight = 'auto',
+  showHeader = true,
+  title = 'Activity Feed',
+  enableFiltering = true,
+  enableSearch = true,
+  compact = false,
+  className,
+}: ActivityFeedProps) {
+  // State
+  const [expandedEvents, setExpandedEvents] = useState<Set<string>>(new Set());
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showFilters, setShowFilters] = useState(false);
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  const [showPendingOnly, setShowPendingOnly] = useState(false);
+
+  // Filter logic
+  const filteredEvents = useMemo(() => {
+    let result = events;
+
+    // Search filter
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter((event) => {
+        const summary = getEventSummary(event).toLowerCase();
+        return summary.includes(query) || event.type.toLowerCase().includes(query);
+      });
+    }
+
+    // Category filter
+    if (selectedCategories.length > 0) {
+      const allowedTypes = new Set<EventType>();
+      selectedCategories.forEach((categoryId) => {
+        const category = FILTER_CATEGORIES.find((c) => c.id === categoryId);
+        if (category) {
+          category.types.forEach((type) => allowedTypes.add(type));
+        }
+      });
+      result = result.filter((event) => allowedTypes.has(event.type));
+    }
+
+    // Pending only filter
+    if (showPendingOnly) {
+      result = result.filter((event) => event.type === EventType.APPROVAL_REQUESTED);
+    }
+
+    return result;
+  }, [events, searchQuery, selectedCategories, showPendingOnly]);
+
+  // Group events by time
+  const groupedEvents = useMemo(() => groupEventsByTimePeriod(filteredEvents), [filteredEvents]);
+
+  // Event handlers
+  const toggleExpanded = useCallback((eventId: string) => {
+    setExpandedEvents((prev) => {
+      const next = new Set(prev);
+      if (next.has(eventId)) {
+        next.delete(eventId);
+      } else {
+        next.add(eventId);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleCategoryChange = useCallback((categoryId: string) => {
+    setSelectedCategories((prev) =>
+      prev.includes(categoryId) ? prev.filter((c) => c !== categoryId) : [...prev, categoryId]
+    );
+  }, []);
+
+  const handleClearFilters = useCallback(() => {
+    setSelectedCategories([]);
+    setShowPendingOnly(false);
+    setSearchQuery('');
+  }, []);
+
+  const hasFilters = searchQuery !== '' || selectedCategories.length > 0 || showPendingOnly;
+  const pendingCount = events.filter((e) => e.type === EventType.APPROVAL_REQUESTED).length;
+
+  return (
+    <Card className={className} data-testid="activity-feed">
+      {showHeader && (
+        <CardHeader className="pb-3">
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg">{title}</CardTitle>
+            <div className="flex items-center gap-3">
+              <ConnectionIndicator state={connectionState} onReconnect={onReconnect} />
+              {pendingCount > 0 && (
+                <Badge variant="destructive" className="gap-1">
+                  <AlertTriangle className="h-3 w-3" />
+                  {pendingCount} pending
+                </Badge>
+              )}
+            </div>
+          </div>
+        </CardHeader>
+      )}
+
+      <CardContent className={showHeader ? 'pt-0' : ''}>
+        <div className="space-y-4">
+          {/* Search and Filter Controls */}
+          {(enableSearch || enableFiltering) && (
+            <div className="flex flex-col gap-4 sm:flex-row">
+              {enableSearch && (
+                <div className="relative flex-1">
+                  <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                  <Input
+                    placeholder="Search activity..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="pl-9"
+                    data-testid="search-input"
+                  />
+                </div>
+              )}
+              {enableFiltering && (
+                <Button
+                  variant="outline"
+                  onClick={() => setShowFilters(!showFilters)}
+                  className={showFilters ? 'bg-muted' : ''}
+                  data-testid="filter-toggle"
+                >
+                  <Filter className="mr-2 h-4 w-4" />
+                  Filters
+                  {hasFilters && (
+                    <Badge variant="secondary" className="ml-2">
+                      Active
+                    </Badge>
+                  )}
+                </Button>
+              )}
+            </div>
+          )}
+
+          {/* Filter Panel */}
+          {showFilters && enableFiltering && (
+            <FilterPanel
+              selectedCategories={selectedCategories}
+              onCategoryChange={handleCategoryChange}
+              showPendingOnly={showPendingOnly}
+              onShowPendingOnlyChange={setShowPendingOnly}
+              onClearFilters={handleClearFilters}
+              events={events}
+            />
+          )}
+
+          {/* Event List */}
+          <div
+            className="overflow-y-auto"
+            style={{ maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight }}
+          >
+            {isLoading ? (
+              <LoadingSkeleton />
+            ) : filteredEvents.length === 0 ? (
+              <EmptyState hasFilters={hasFilters} />
+            ) : (
+              <div className="space-y-6">
+                {groupedEvents.map((group) => (
+                  <div key={group.label} data-testid={`event-group-${group.label.toLowerCase().replace(' ', '-')}`}>
+                    <div className="mb-3 flex items-center gap-2">
+                      <h3 className="text-sm font-medium text-muted-foreground">{group.label}</h3>
+                      <Badge variant="secondary" className="text-xs">
+                        {group.events.length}
+                      </Badge>
+                      <Separator className="flex-1" />
+                    </div>
+                    <div className="rounded-lg border divide-y divide-border/50">
+                      {group.events.map((event) => (
+                        <EventItem
+                          key={event.id}
+                          event={event}
+                          expanded={expandedEvents.has(event.id)}
+                          onToggle={() => toggleExpanded(event.id)}
+                          onApprove={onApprove}
+                          onReject={onReject}
+                          onClick={onEventClick}
+                          compact={compact}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/activity/index.ts b/frontend/src/components/activity/index.ts
new file mode 100644
index 0000000..c90cba6
--- /dev/null
+++ b/frontend/src/components/activity/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Activity Components
+ *
+ * Shared components for displaying real-time activity feeds across
+ * dashboards and dedicated activity pages.
+ */
+
+export { ActivityFeed } from './ActivityFeed';
+export type { ActivityFeedProps, EventTypeFilter } from './ActivityFeed';
diff --git a/frontend/tests/components/activity/ActivityFeed.test.tsx b/frontend/tests/components/activity/ActivityFeed.test.tsx
new file mode 100644
index 0000000..3ab4d26
--- /dev/null
+++ b/frontend/tests/components/activity/ActivityFeed.test.tsx
@@ -0,0 +1,504 @@
+/**
+ * Tests for ActivityFeed Component
+ *
+ * Tests cover:
+ * - Rendering with events
+ * - Connection state indicator
+ * - Search functionality
+ * - Filter functionality
+ * - Event expansion
+ * - Approval actions
+ * - Time-based grouping
+ * - Loading state
+ * - Empty state
+ */
+
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ActivityFeed } from '@/components/activity/ActivityFeed';
+import { EventType, type ProjectEvent } from '@/lib/types/events';
+
+// ============================================================================
+// Test Data
+// ============================================================================
+
+const createMockEvent = (overrides: Partial<ProjectEvent> = {}): ProjectEvent => ({
+  id: `event-${Math.random().toString(36).substr(2, 9)}`,
+  type: EventType.AGENT_MESSAGE,
+  timestamp: new Date().toISOString(),
+  project_id: 'project-001',
+  actor_id: 'agent-001',
+  actor_type: 'agent',
+  payload: {
+    agent_instance_id: 'agent-001',
+    message: 'Test message',
+    message_type: 'info',
+  },
+  ...overrides,
+});
+
+const mockEvents: ProjectEvent[] = [
+  // Today's events
+  createMockEvent({
+    id: 'event-001',
+    type: EventType.APPROVAL_REQUESTED,
+    timestamp: new Date().toISOString(),
+    payload: {
+      approval_id: 'apr-001',
+      approval_type: 'architecture_decision',
+      description: 'Approval required for API design',
+      requested_by: 'Architect',
+    },
+  }),
+  createMockEvent({
+    id: 'event-002',
+    type: EventType.AGENT_MESSAGE,
+    timestamp: new Date(Date.now() - 1000 * 60 * 30).toISOString(),
+    payload: {
+      agent_instance_id: 'agent-002',
+      message: 'Completed JWT implementation',
+      message_type: 'info',
+    },
+  }),
+  // Yesterday's event
+  createMockEvent({
+    id: 'event-003',
+    type: EventType.ISSUE_CREATED,
+    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(),
+    payload: {
+      issue_id: 'issue-001',
+      title: 'Add rate limiting',
+      priority: 'medium',
+    },
+  }),
+  // This week's event
+  createMockEvent({
+    id: 'event-004',
+    type: EventType.SPRINT_STARTED,
+    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3).toISOString(),
+    payload: {
+      sprint_id: 'sprint-001',
+      sprint_name: 'Sprint 1',
+      goal: 'Complete auth module',
+    },
+  }),
+  // Older event
+  createMockEvent({
+    id: 'event-005',
+    type: EventType.WORKFLOW_COMPLETED,
+    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24 * 10).toISOString(),
+    payload: {
+      workflow_id: 'wf-001',
+      duration_seconds: 3600,
+    },
+  }),
+];
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('ActivityFeed', () => {
+  const defaultProps = {
+    events: mockEvents,
+    connectionState: 'connected' as const,
+  };
+
+  describe('Rendering', () => {
+    it('renders the activity feed with test id', () => {
+      render(<ActivityFeed {...defaultProps} />);
+      expect(screen.getByTestId('activity-feed')).toBeInTheDocument();
+    });
+
+    it('renders the header with title', () => {
+      render(<ActivityFeed {...defaultProps} />);
+      expect(screen.getByText('Activity Feed')).toBeInTheDocument();
+    });
+
+    it('renders custom title when provided', () => {
+      render(<ActivityFeed {...defaultProps} title="Project Activity" />);
+      expect(screen.getByText('Project Activity')).toBeInTheDocument();
+    });
+
+    it('hides header when showHeader is false', () => {
+      render(<ActivityFeed {...defaultProps} showHeader={false} />);
+      expect(screen.queryByText('Activity Feed')).not.toBeInTheDocument();
+    });
+
+    it('renders events', () => {
+      render(<ActivityFeed {...defaultProps} />);
+      expect(screen.getByTestId('event-item-event-001')).toBeInTheDocument();
+      expect(screen.getByTestId('event-item-event-002')).toBeInTheDocument();
+    });
+
+    it('applies custom className', () => {
+      render(<ActivityFeed {...defaultProps} className="custom-class" />);
+      expect(screen.getByTestId('activity-feed')).toHaveClass('custom-class');
+    });
+  });
+
+  describe('Connection State', () => {
+    it('renders connection indicator', () => {
+      render(<ActivityFeed {...defaultProps} />);
+      expect(screen.getByTestId('connection-indicator')).toBeInTheDocument();
+    });
+
+    it('shows "Live" when connected', () => {
+      render(<ActivityFeed {...defaultProps} connectionState="connected" />);
+      expect(screen.getByText('Live')).toBeInTheDocument();
+    });
+
+    it('shows "Connecting..." when connecting', () => {
+      render(<ActivityFeed {...defaultProps} connectionState="connecting" />);
+      expect(screen.getByText('Connecting...')).toBeInTheDocument();
+    });
+
+    it('shows "Disconnected" when disconnected', () => {
+      render(<ActivityFeed {...defaultProps} connectionState="disconnected" />);
+      expect(screen.getByText('Disconnected')).toBeInTheDocument();
+    });
+
+    it('shows "Error" when error state', () => {
+      render(<ActivityFeed {...defaultProps} connectionState="error" />);
+      expect(screen.getByText('Error')).toBeInTheDocument();
+    });
+
+    it('shows reconnect button when disconnected', () => {
+      const onReconnect = jest.fn();
+      render(
+        <ActivityFeed {...defaultProps} connectionState="disconnected" onReconnect={onReconnect} />
+      );
+      const reconnectButton = screen.getByLabelText('Reconnect');
+      expect(reconnectButton).toBeInTheDocument();
+    });
+
+    it('calls onReconnect when reconnect button clicked', async () => {
+      const user = userEvent.setup();
+      const onReconnect = jest.fn();
+      render(
+        <ActivityFeed {...defaultProps} connectionState="disconnected" onReconnect={onReconnect} />
+      );
+
+      await user.click(screen.getByLabelText('Reconnect'));
+      expect(onReconnect).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Search Functionality', () => {
+    it('renders search input when enableSearch is true', () => {
+      render(<ActivityFeed {...defaultProps} enableSearch />);
+      expect(screen.getByTestId('search-input')).toBeInTheDocument();
+    });
+
+    it('hides search input when enableSearch is false', () => {
+      render(<ActivityFeed {...defaultProps} enableSearch={false} />);
+      expect(screen.queryByTestId('search-input')).not.toBeInTheDocument();
+    });
+
+    it('filters events based on search query', async () => {
+      const user = userEvent.setup();
+      render(<ActivityFeed {...defaultProps} enableSearch />);
+
+      const searchInput = screen.getByTestId('search-input');
+      await user.type(searchInput, 'JWT');
+
+      // Event with JWT in message should be visible
+      expect(screen.getByText(/Completed JWT implementation/)).toBeInTheDocument();
+      // Other events should be filtered out
+      expect(screen.queryByText(/Approval required for API design/)).not.toBeInTheDocument();
+    });
+
+    it('shows empty state when search finds no results', async () => {
+      const user = userEvent.setup();
+      render(<ActivityFeed {...defaultProps} enableSearch />);
+
+      const searchInput = screen.getByTestId('search-input');
+      await user.type(searchInput, 'nonexistent query xyz');
+
+      expect(screen.getByTestId('empty-state')).toBeInTheDocument();
+      expect(screen.getByText('No activity found')).toBeInTheDocument();
+    });
+  });
+
+  describe('Filter Functionality', () => {
+    it('renders filter toggle when enableFiltering is true', () => {
+      render(<ActivityFeed {...defaultProps} enableFiltering />);
+      expect(screen.getByTestId('filter-toggle')).toBeInTheDocument();
+    });
+
+    it('hides filter toggle when enableFiltering is false', () => {
+      render(<ActivityFeed {...defaultProps} enableFiltering={false} />);
+      expect(screen.queryByTestId('filter-toggle')).not.toBeInTheDocument();
+    });
+
+    it('shows filter panel when filter toggle is clicked', async () => {
+      const user = userEvent.setup();
+      render(<ActivityFeed {...defaultProps} enableFiltering />);
+
+      await user.click(screen.getByTestId('filter-toggle'));
+      expect(screen.getByTestId('filter-panel')).toBeInTheDocument();
+    });
+
+    it('filters events by category when filter is selected', async () => {
+      const user = userEvent.setup();
+      render(<ActivityFeed {...defaultProps} enableFiltering />);
+
+      // Open filter panel
+      await user.click(screen.getByTestId('filter-toggle'));
+
+      // Select Issues category
+      const issuesCheckbox = screen.getByLabelText(/Issues/);
+      await user.click(issuesCheckbox);
+
+      // Only issue events should be visible
+      expect(screen.getByText(/Add rate limiting/)).toBeInTheDocument();
+      // Agent events should be filtered out
+      expect(screen.queryByText(/Completed JWT implementation/)).not.toBeInTheDocument();
+    });
+
+    it('shows pending only when filter is selected', async () => {
+      const user = userEvent.setup();
+      render(<ActivityFeed {...defaultProps} enableFiltering />);
+
+      // Open filter panel
+      await user.click(screen.getByTestId('filter-toggle'));
+
+      // Select pending only
+      const pendingCheckbox = screen.getByLabelText(/Show only pending approvals/);
+      await user.click(pendingCheckbox);
+
+      // Only approval requested events should be visible
+      expect(screen.getByText(/Approval required for API design/)).toBeInTheDocument();
+      // Other events should be filtered out
+      expect(screen.queryByText(/Completed JWT implementation/)).not.toBeInTheDocument();
+    });
+
+    it('clears filters when Clear Filters is clicked', async () => {
+      const user = userEvent.setup();
+      render(<ActivityFeed {...defaultProps} enableFiltering enableSearch />);
+
+      // Add search query
+      await user.type(screen.getByTestId('search-input'), 'JWT');
+
+      // Open filter panel and select a filter
+      await user.click(screen.getByTestId('filter-toggle'));
+      await user.click(screen.getByLabelText(/Issues/));
+
+      // Clear filters
+      await user.click(screen.getByText('Clear Filters'));
+
+      // All events should be visible again
+      expect(screen.getByText(/Completed JWT implementation/)).toBeInTheDocument();
+      expect(screen.getByText(/Approval required for API design/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Event Expansion', () => {
+    it('expands event details when clicked', async () => {
+      const user = userEvent.setup();
+      render(<ActivityFeed {...defaultProps} />);
+
+      const eventItem = screen.getByTestId('event-item-event-001');
+      await user.click(eventItem);
+
+      expect(screen.getByTestId('event-details')).toBeInTheDocument();
+    });
+
+    it('collapses event details when clicked again', async () => {
+      const user = userEvent.setup();
+      render(<ActivityFeed {...defaultProps} />);
+
+      const eventItem = screen.getByTestId('event-item-event-001');
+
+      // Expand
+      await user.click(eventItem);
+      expect(screen.getByTestId('event-details')).toBeInTheDocument();
+
+      // Collapse
+      await user.click(eventItem);
+      expect(screen.queryByTestId('event-details')).not.toBeInTheDocument();
+    });
+
+    it('shows raw payload in expanded details', async () => {
+      const user = userEvent.setup();
+      render(<ActivityFeed {...defaultProps} />);
+
+      const eventItem = screen.getByTestId('event-item-event-001');
+      await user.click(eventItem);
+
+      // Check for payload content
+      expect(screen.getByText(/View raw payload/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Approval Actions', () => {
+    it('shows approve and reject buttons for pending approvals', () => {
+      render(<ActivityFeed {...defaultProps} onApprove={jest.fn()} onReject={jest.fn()} />);
+
+      const eventItem = screen.getByTestId('event-item-event-001');
+      expect(within(eventItem).getByTestId('approve-button')).toBeInTheDocument();
+      expect(within(eventItem).getByTestId('reject-button')).toBeInTheDocument();
+    });
+
+    it('does not show action buttons for non-approval events', () => {
+      render(<ActivityFeed {...defaultProps} onApprove={jest.fn()} onReject={jest.fn()} />);
+
+      const eventItem = screen.getByTestId('event-item-event-002');
+      expect(within(eventItem).queryByTestId('approve-button')).not.toBeInTheDocument();
+    });
+
+    it('calls onApprove when approve button clicked', async () => {
+      const user = userEvent.setup();
+      const onApprove = jest.fn();
+      render(<ActivityFeed {...defaultProps} onApprove={onApprove} />);
+
+      const eventItem = screen.getByTestId('event-item-event-001');
+      await user.click(within(eventItem).getByTestId('approve-button'));
+
+      expect(onApprove).toHaveBeenCalledTimes(1);
+      expect(onApprove).toHaveBeenCalledWith(
+        expect.objectContaining({ id: 'event-001' })
+      );
+    });
+
+    it('calls onReject when reject button clicked', async () => {
+      const user = userEvent.setup();
+      const onReject = jest.fn();
+      render(<ActivityFeed {...defaultProps} onReject={onReject} />);
+
+      const eventItem = screen.getByTestId('event-item-event-001');
+      await user.click(within(eventItem).getByTestId('reject-button'));
+
+      expect(onReject).toHaveBeenCalledTimes(1);
+      expect(onReject).toHaveBeenCalledWith(
+        expect.objectContaining({ id: 'event-001' })
+      );
+    });
+
+    it('shows pending count badge', () => {
+      render(<ActivityFeed {...defaultProps} />);
+      expect(screen.getByText('1 pending')).toBeInTheDocument();
+    });
+  });
+
+  describe('Time-Based Grouping', () => {
+    it('groups events by time period', () => {
+      render(<ActivityFeed {...defaultProps} />);
+
+      // Check for time period headers
+      expect(screen.getByTestId('event-group-today')).toBeInTheDocument();
+    });
+
+    it('shows event count in group header', () => {
+      render(<ActivityFeed {...defaultProps} />);
+
+      const todayGroup = screen.getByTestId('event-group-today');
+      // Today has 2 events in our mock data
+      expect(within(todayGroup).getByText('2')).toBeInTheDocument();
+    });
+  });
+
+  describe('Loading State', () => {
+    it('shows loading skeleton when isLoading is true', () => {
+      render(<ActivityFeed {...defaultProps} isLoading />);
+      expect(screen.getByTestId('loading-skeleton')).toBeInTheDocument();
+    });
+
+    it('hides events when loading', () => {
+      render(<ActivityFeed {...defaultProps} isLoading />);
+      expect(screen.queryByTestId('event-item-event-001')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Empty State', () => {
+    it('shows empty state when no events', () => {
+      render(<ActivityFeed {...defaultProps} events={[]} />);
+      expect(screen.getByTestId('empty-state')).toBeInTheDocument();
+    });
+
+    it('shows appropriate message when no events and no filters', () => {
+      render(<ActivityFeed {...defaultProps} events={[]} />);
+      expect(screen.getByText(/Activity will appear here/)).toBeInTheDocument();
+    });
+
+    it('shows appropriate message when filtered to empty', async () => {
+      const user = userEvent.setup();
+      render(<ActivityFeed {...defaultProps} enableSearch />);
+
+      await user.type(screen.getByTestId('search-input'), 'nonexistent');
+
+      expect(screen.getByText(/Try adjusting your search or filters/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Event Click Handler', () => {
+    it('calls onEventClick when event is clicked', async () => {
+      const user = userEvent.setup();
+      const onEventClick = jest.fn();
+      render(<ActivityFeed {...defaultProps} onEventClick={onEventClick} />);
+
+      await user.click(screen.getByTestId('event-item-event-001'));
+
+      expect(onEventClick).toHaveBeenCalledTimes(1);
+      expect(onEventClick).toHaveBeenCalledWith(
+        expect.objectContaining({ id: 'event-001' })
+      );
+    });
+  });
+
+  describe('Compact Mode', () => {
+    it('applies compact styling when compact is true', () => {
+      render(<ActivityFeed {...defaultProps} compact />);
+
+      // Check for compact-specific styling (p-2 instead of p-4)
+      const eventItem = screen.getByTestId('event-item-event-001');
+      // The event item should have compact padding
+      expect(eventItem).toHaveClass('p-2');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA labels for interactive elements', () => {
+      render(<ActivityFeed {...defaultProps} onReconnect={jest.fn()} connectionState="disconnected" />);
+
+      expect(screen.getByLabelText('Reconnect')).toBeInTheDocument();
+    });
+
+    it('event items are keyboard accessible', async () => {
+      const user = userEvent.setup();
+      render(<ActivityFeed {...defaultProps} />);
+
+      const eventItem = screen.getByTestId('event-item-event-001');
+
+      // Focus and activate with keyboard
+      eventItem.focus();
+      await user.keyboard('{Enter}');
+
+      expect(screen.getByTestId('event-details')).toBeInTheDocument();
+    });
+
+    it('renders semantic HTML structure', () => {
+      render(<ActivityFeed {...defaultProps} />);
+
+      // Check for proper heading hierarchy
+      const heading = screen.getByText('Today');
+      expect(heading.tagName).toBe('H3');
+    });
+  });
+
+  describe('Max Height', () => {
+    it('applies max height styling', () => {
+      const { container } = render(<ActivityFeed {...defaultProps} maxHeight={500} />);
+
+      const scrollContainer = container.querySelector('.overflow-y-auto');
+      expect(scrollContainer).toHaveStyle({ maxHeight: '500px' });
+    });
+
+    it('handles string max height', () => {
+      const { container } = render(<ActivityFeed {...defaultProps} maxHeight="auto" />);
+
+      const scrollContainer = container.querySelector('.overflow-y-auto');
+      expect(scrollContainer).toHaveStyle({ maxHeight: 'auto' });
+    });
+  });
+});