diff --git a/components/realtime/ConnectionStatus.tsx b/components/realtime/ConnectionStatus.tsx
new file mode 100644
index 0000000..110c487
--- /dev/null
+++ b/components/realtime/ConnectionStatus.tsx
@@ -0,0 +1,167 @@
+/**
+ * Connection Status Indicator Component
+ *
+ * Shows the current WebSocket connection status with visual feedback.
+ */
+
+import React from 'react';
+import classNames from 'classnames';
+import { useConnectionStatus } from '../../lib/realtime/useSocket';
+import type { ConnectionStatus as ConnectionStatusType } from '../../lib/realtime/types';
+
+interface ConnectionStatusProps {
+ showLabel?: boolean;
+ showLatency?: boolean;
+ size?: 'sm' | 'md' | 'lg';
+ className?: string;
+}
+
+/**
+ * Get status color classes
+ */
+function getStatusColor(status: ConnectionStatusType): string {
+ switch (status) {
+ case 'connected':
+ return 'bg-green-500';
+ case 'connecting':
+ case 'reconnecting':
+ return 'bg-yellow-500 animate-pulse';
+ case 'disconnected':
+ return 'bg-gray-400';
+ case 'error':
+ return 'bg-red-500';
+ default:
+ return 'bg-gray-400';
+ }
+}
+
+/**
+ * Get status label
+ */
+function getStatusLabel(status: ConnectionStatusType): string {
+ switch (status) {
+ case 'connected':
+ return 'Connected';
+ case 'connecting':
+ return 'Connecting...';
+ case 'reconnecting':
+ return 'Reconnecting...';
+ case 'disconnected':
+ return 'Disconnected';
+ case 'error':
+ return 'Connection Error';
+ default:
+ return 'Unknown';
+ }
+}
+
+/**
+ * Get size classes
+ */
+function getSizeClasses(size: 'sm' | 'md' | 'lg'): { dot: string; text: string } {
+ switch (size) {
+ case 'sm':
+ return { dot: 'w-2 h-2', text: 'text-xs' };
+ case 'md':
+ return { dot: 'w-3 h-3', text: 'text-sm' };
+ case 'lg':
+ return { dot: 'w-4 h-4', text: 'text-base' };
+ default:
+ return { dot: 'w-3 h-3', text: 'text-sm' };
+ }
+}
+
+/**
+ * Connection Status component
+ */
+export function ConnectionStatus({
+ showLabel = true,
+ showLatency = false,
+ size = 'md',
+ className,
+}: ConnectionStatusProps) {
+ const { status, latency } = useConnectionStatus();
+ const sizeClasses = getSizeClasses(size);
+
+ return (
+
+ {/* Status dot */}
+
+
+ {/* Label */}
+ {showLabel && (
+
+ {getStatusLabel(status)}
+
+ )}
+
+ {/* Latency */}
+ {showLatency && status === 'connected' && latency !== undefined && (
+
+ ({latency}ms)
+
+ )}
+
+ );
+}
+
+/**
+ * Compact connection indicator (dot only)
+ */
+export function ConnectionDot({ className }: { className?: string }) {
+ const { status } = useConnectionStatus();
+
+ return (
+
+ );
+}
+
+/**
+ * Connection banner for showing reconnection status
+ */
+export function ConnectionBanner() {
+ const { status } = useConnectionStatus();
+
+ if (status === 'connected') {
+ return null;
+ }
+
+ const bannerClasses = classNames(
+ 'fixed top-0 left-0 right-0 py-2 px-4 text-center text-sm font-medium z-50',
+ {
+ 'bg-yellow-100 text-yellow-800': status === 'connecting' || status === 'reconnecting',
+ 'bg-red-100 text-red-800': status === 'error',
+ 'bg-gray-100 text-gray-800': status === 'disconnected',
+ }
+ );
+
+ return (
+
+ {status === 'connecting' && 'Connecting to real-time updates...'}
+ {status === 'reconnecting' && 'Connection lost. Reconnecting...'}
+ {status === 'error' && 'Connection error. Please check your network.'}
+ {status === 'disconnected' && 'Disconnected from real-time updates.'}
+
+ );
+}
+
+export default ConnectionStatus;
diff --git a/components/realtime/LiveChart.tsx b/components/realtime/LiveChart.tsx
new file mode 100644
index 0000000..c61825b
--- /dev/null
+++ b/components/realtime/LiveChart.tsx
@@ -0,0 +1,256 @@
+/**
+ * Live Chart Component
+ *
+ * Displays real-time data as a simple line chart.
+ */
+
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { useSocket } from '../../lib/realtime/useSocket';
+import type { TransparencyEventType } from '../../lib/realtime/types';
+
+interface LiveChartProps {
+ eventTypes?: TransparencyEventType[];
+ dataKey?: string;
+ title?: string;
+ color?: string;
+ height?: number;
+ maxDataPoints?: number;
+ showGrid?: boolean;
+ className?: string;
+}
+
+/**
+ * Simple SVG line chart for real-time data
+ */
+export function LiveChart({
+ eventTypes = ['system.metric'],
+ dataKey = 'value',
+ title = 'Live Data',
+ color = '#3B82F6',
+ height = 120,
+ maxDataPoints = 30,
+ showGrid = true,
+ className,
+}: LiveChartProps) {
+ const { events } = useSocket({
+ eventTypes,
+ maxEvents: maxDataPoints,
+ });
+
+ // Extract data points
+ const dataPoints = useMemo(() => {
+ return events
+ .filter((e) => e.data && typeof e.data[dataKey] === 'number')
+ .map((e) => ({
+ value: e.data[dataKey] as number,
+ timestamp: new Date(e.timestamp).getTime(),
+ }))
+ .reverse()
+ .slice(-maxDataPoints);
+ }, [events, dataKey, maxDataPoints]);
+
+ // Calculate chart dimensions
+ const chartWidth = 400;
+ const chartHeight = height - 40;
+ const padding = { top: 10, right: 10, bottom: 20, left: 40 };
+ const innerWidth = chartWidth - padding.left - padding.right;
+ const innerHeight = chartHeight - padding.top - padding.bottom;
+
+ // Calculate scales
+ const { minValue, maxValue, points, pathD } = useMemo(() => {
+ if (dataPoints.length === 0) {
+ return { minValue: 0, maxValue: 100, points: [], pathD: '' };
+ }
+
+ const values = dataPoints.map((d) => d.value);
+ const min = Math.min(...values);
+ const max = Math.max(...values);
+ const range = max - min || 1;
+
+ const pts = dataPoints.map((d, i) => ({
+ x: padding.left + (i / Math.max(1, dataPoints.length - 1)) * innerWidth,
+ y: padding.top + innerHeight - ((d.value - min) / range) * innerHeight,
+ }));
+
+ const d = pts.length > 0
+ ? `M ${pts.map((p) => `${p.x},${p.y}`).join(' L ')}`
+ : '';
+
+ return { minValue: min, maxValue: max, points: pts, pathD: d };
+ }, [dataPoints, innerWidth, innerHeight, padding]);
+
+ // Latest value
+ const latestValue = dataPoints.length > 0 ? dataPoints[dataPoints.length - 1].value : null;
+
+ return (
+
+ {/* Header */}
+
+
{title}
+ {latestValue !== null && (
+
+ {latestValue.toFixed(1)}
+
+ )}
+
+
+ {/* Chart */}
+
+
+
Events per Minute
+
+
+ {countsByMinute.map((count, i) => (
+
+ ))}
+
+
+
+ 10m ago
+ Now
+
+
+
+ {/* Icon */}
+
+ {item.formatted.icon}
+
+
+ {/* Content */}
+
+
+
+ {item.formatted.title}
+
+ {showTimestamp && (
+
+ {formatTimestamp(item.timestamp)}
+
+ )}
+
+
+ {item.formatted.description}
+
+
+
+
+ {/* Header */}
+
+
+
Live Feed
+ {showConnectionStatus && }
+
+
+
+ {filteredItems.length > 0 && (
+
+ {filteredItems.length} event{filteredItems.length !== 1 ? 's' : ''}
+
+ )}
+ {showClearButton && filteredItems.length > 0 && (
+
+ )}
+
+
+
+ {/* Feed content */}
+
+ {filteredItems.length === 0 ? (
+
+
📡
+
{emptyMessage}
+ {!isConnected && (
+
+ Status: {status}
+
+ )}
+
+ ) : (
+ filteredItems.map((item) => (
+
+ ))
+ )}
+
+
+ {items.slice(0, maxItems).map((item) => (
+
+ {item.formatted.icon}
+
+ {item.formatted.description}
+
+
+ ))}
+
+
+ {/* Icon */}
+
+ {styles.icon}
+
+
+ {/* Content */}
+
+
+ {notification.title}
+
+
+ {notification.message}
+
+
+
+ {/* Close button */}
+
+
+
+ {visibleNotifications.map((notification) => (
+
+ ))}
+
+ );
+}
+
+/**
+ * Notification bell with badge
+ */
+export function NotificationBell({
+ onClick,
+ className,
+}: {
+ onClick?: () => void;
+ className?: string;
+}) {
+ const { unreadCount } = useSocketContext();
+
+ return (
+
+ );
+}
+
+/**
+ * Notification list dropdown
+ */
+export function NotificationList({
+ className,
+ onClose,
+}: {
+ className?: string;
+ onClose?: () => void;
+}) {
+ const { notifications, markNotificationRead, markAllRead } = useSocketContext();
+
+ return (
+
+ {/* Header */}
+
+
Notifications
+ {notifications.length > 0 && (
+
+ )}
+
+
+ {/* List */}
+
+ {notifications.length === 0 ? (
+
+ ) : (
+ notifications.map((notification) => (
+
markNotificationRead(notification.id)}
+ >
+
+
+ {getTypeStyles(notification.type).icon}
+
+
+
+ {notification.title}
+
+
+ {notification.message}
+
+
+ {new Date(notification.timestamp).toLocaleTimeString()}
+
+
+
+
+ ))
+ )}
+
+