refactor(platform): improve UI components and extract feature subcomponents

.gitignore

@@ -60,6 +60,9 @@ compose.override.yml
 !.claude/settings.json
 !.claude/hooks/
 
+# Agent rules
+.agent/
+
 # Python
 __pycache__/
 *.pyc

services/platform/app/components/__tests__/offline-indicator.test.tsx

@@ -0,0 +1,94 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+
+import { render, screen } from '@/test/utils/render';
+
+import { OfflineIndicator } from '../offline-indicator';
+
+vi.mock('@/lib/i18n/client', () => ({
+  useT: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'offline.backOnline': 'You are back online',
+        'offline.youAreOffline': 'You are offline',
+      };
+      return translations[key] ?? key;
+    },
+  }),
+}));
+
+// Mock online status
+let mockIsOnline = true;
+vi.mock('@/app/hooks/use-online-status', () => ({
+  useOnlineStatus: () => mockIsOnline,
+}));
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+beforeEach(() => {
+  mockIsOnline = true;
+});
+
+describe('OfflineIndicator', () => {
+  it('renders nothing when online and showWhenOnline is false', () => {
+    const { container } = render(<OfflineIndicator />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders online banner when showWhenOnline is true', () => {
+    render(<OfflineIndicator showWhenOnline />);
+    expect(screen.getByText('You are back online')).toBeInTheDocument();
+  });
+
+  it('renders offline banner when offline', () => {
+    mockIsOnline = false;
+    render(<OfflineIndicator />);
+    expect(screen.getByText('You are offline')).toBeInTheDocument();
+  });
+
+  it('has role="status" for accessibility', () => {
+    mockIsOnline = false;
+    render(<OfflineIndicator />);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('has aria-live="polite" for screen reader announcements', () => {
+    mockIsOnline = false;
+    render(<OfflineIndicator />);
+    expect(screen.getByRole('status')).toHaveAttribute('aria-live', 'polite');
+  });
+
+  it('shows pulse animation dot when offline', () => {
+    mockIsOnline = false;
+    const { container } = render(<OfflineIndicator />);
+    const dot = container.querySelector('.animate-pulse');
+    expect(dot).toBeInTheDocument();
+  });
+
+  it('does not show pulse animation when online', () => {
+    const { container } = render(<OfflineIndicator showWhenOnline />);
+    const dot = container.querySelector('.animate-pulse');
+    expect(dot).not.toBeInTheDocument();
+  });
+
+  it('applies yellow background when offline', () => {
+    mockIsOnline = false;
+    render(<OfflineIndicator />);
+    const banner = screen.getByRole('status');
+    expect(banner).toHaveClass('bg-yellow-500');
+  });
+
+  it('applies green background when online', () => {
+    render(<OfflineIndicator showWhenOnline />);
+    const banner = screen.getByRole('status');
+    expect(banner).toHaveClass('bg-green-500');
+  });
+
+  it('applies custom className', () => {
+    mockIsOnline = false;
+    render(<OfflineIndicator className="custom-class" />);
+    const banner = screen.getByRole('status');
+    expect(banner).toHaveClass('custom-class');
+  });
+});

services/platform/app/components/__tests__/sync-status-indicator.test.tsx

@@ -0,0 +1,178 @@
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+
+import { render, screen } from '@/test/utils/render';
+
+import { SyncStatusIndicator } from '../sync-status-indicator';
+
+vi.mock('@/lib/i18n/client', () => ({
+  useT: () => ({ t: (key: string) => key }),
+}));
+
+// Mock sync status
+const mockSyncNow = vi.fn().mockResolvedValue(undefined);
+let mockSyncStatus = {
+  isOnline: true,
+  isOffline: false,
+  isSyncing: false,
+  pendingMutations: 0,
+  failedMutations: 0,
+  lastSyncAttempt: null as number | null,
+  lastSuccessfulSync: null as number | null,
+  hasPendingChanges: false,
+  syncNow: mockSyncNow,
+};
+vi.mock('@/app/hooks/use-sync-status', () => ({
+  useSyncStatus: () => mockSyncStatus,
+}));
+
+// Mock mutation queue
+const mockRetryAll = vi.fn().mockResolvedValue(0);
+let mockMutationQueue = {
+  pendingCount: 0,
+  failedCount: 0,
+  hasPending: false,
+  hasFailed: false,
+  getPending: vi.fn(),
+  getFailed: vi.fn(),
+  retry: vi.fn(),
+  retryAll: mockRetryAll,
+  clearAll: vi.fn(),
+  refreshStats: vi.fn(),
+};
+vi.mock('@/app/hooks/use-mutation-queue', () => ({
+  useMutationQueue: () => mockMutationQueue,
+}));
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+beforeEach(() => {
+  mockSyncStatus = {
+    isOnline: true,
+    isOffline: false,
+    isSyncing: false,
+    pendingMutations: 0,
+    failedMutations: 0,
+    lastSyncAttempt: null,
+    lastSuccessfulSync: null,
+    hasPendingChanges: false,
+    syncNow: mockSyncNow,
+  };
+  mockMutationQueue = {
+    pendingCount: 0,
+    failedCount: 0,
+    hasPending: false,
+    hasFailed: false,
+    getPending: vi.fn(),
+    getFailed: vi.fn(),
+    retry: vi.fn(),
+    retryAll: mockRetryAll,
+    clearAll: vi.fn(),
+    refreshStats: vi.fn(),
+  };
+});
+
+describe('SyncStatusIndicator', () => {
+  it('renders synced state by default', () => {
+    render(<SyncStatusIndicator />);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).not.toBeDisabled();
+  });
+
+  it('shows label when showLabel is true', () => {
+    render(<SyncStatusIndicator showLabel />);
+    expect(screen.getByText('Synced')).toBeInTheDocument();
+  });
+
+  it('shows offline state', () => {
+    mockSyncStatus = { ...mockSyncStatus, isOnline: false, isOffline: true };
+    render(<SyncStatusIndicator showLabel />);
+    expect(screen.getByText('Offline')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('shows syncing state', () => {
+    mockSyncStatus = { ...mockSyncStatus, isSyncing: true };
+    render(<SyncStatusIndicator showLabel />);
+    expect(screen.getByText('Syncing...')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('shows failed count and label', () => {
+    mockMutationQueue = {
+      ...mockMutationQueue,
+      failedCount: 3,
+      hasFailed: true,
+    };
+    render(<SyncStatusIndicator showLabel />);
+    expect(screen.getByText('3 failed')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+  });
+
+  it('shows pending count and label', () => {
+    mockMutationQueue = {
+      ...mockMutationQueue,
+      pendingCount: 5,
+      hasPending: true,
+    };
+    render(<SyncStatusIndicator showLabel />);
+    expect(screen.getByText('5 pending')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  it('calls syncNow on click when synced', async () => {
+    const user = userEvent.setup();
+    render(<SyncStatusIndicator />);
+
+    await user.click(screen.getByRole('button'));
+    expect(mockSyncNow).toHaveBeenCalled();
+  });
+
+  it('calls retryAll then syncNow on click when there are failures', async () => {
+    const user = userEvent.setup();
+    mockMutationQueue = {
+      ...mockMutationQueue,
+      failedCount: 2,
+      hasFailed: true,
+    };
+
+    render(<SyncStatusIndicator />);
+    await user.click(screen.getByRole('button'));
+
+    expect(mockRetryAll).toHaveBeenCalled();
+    expect(mockSyncNow).toHaveBeenCalled();
+  });
+
+  it('does not show label by default', () => {
+    render(<SyncStatusIndicator />);
+    expect(screen.queryByText('Synced')).not.toBeInTheDocument();
+  });
+
+  it('does not show count badge when no pending or failed', () => {
+    render(<SyncStatusIndicator />);
+    const button = screen.getByRole('button');
+    // No badge elements inside
+    const badges = button.querySelectorAll('span');
+    expect(badges).toHaveLength(0);
+  });
+
+  it('prioritizes failed state over pending state', () => {
+    mockMutationQueue = {
+      ...mockMutationQueue,
+      failedCount: 1,
+      pendingCount: 3,
+      hasFailed: true,
+      hasPending: true,
+    };
+    render(<SyncStatusIndicator showLabel />);
+    expect(screen.getByText('1 failed')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    render(<SyncStatusIndicator className="custom-class" />);
+    expect(screen.getByRole('button')).toHaveClass('custom-class');
+  });
+});