refactor(ui): migrate from emojis to Hugeicons for consistent icon system (#286)

* refactor(ui): migrate from emojis to Hugeicons for consistent icon system

Replace all emoji characters with Hugeicons React components across the
web-ui codebase. This ensures consistency with the Nova design system and
provides proper accessibility attributes (aria-hidden) for icons.

Key changes:
- Replace emoji literals (🔒, ⚠️, ✅, etc.) with Hugeicons components
- Rename utility files to .tsx for JSX return types
- Add getCategoryIcon() and getStatusIcon() functions for type-safe icons
- Update all test files with comprehensive Hugeicons mocks
- Update jest.setup.js with global icon mocks

Components updated: AgentCard, BlockerBadge, ErrorBoundary, TaskTreeView,
QualityGateStatus, ReviewFindings, ReviewSummary, DiscoveryProgress, and more

Test results: 1805 tests passing, build successful

* fix(ui): address CodeRabbit review feedback for icon migration

- Remove duplicate warning icon in CheckpointRestore (inline SVG + emoji)
- Update stale .bg-blue-50 test selectors to .bg-muted (Nova palette)
- Correct misleading comment about Hugeicons data-testid in AgentList test
- Update CheckpointRestore test to match separated emoji/text structure

* fix(ui): complete Hugeicons migration and fix redundant className

- Replace success message inline SVG with CheckmarkCircle01Icon
- Remove redundant text-2xl wrapper (icons already sized via h-5 w-5)
- Fix redundant iconProps className in getStatusIcon utility
- Update test mock to include CheckmarkCircle01Icon

---------

Co-authored-by: Test User <test@example.com>

Author: frankbria

.beads/issues.jsonl

@@ -8,6 +8,31 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
+
+// Mock Hugeicons - must be before component import
+jest.mock('@hugeicons/react', () => {
+  const createMockIcon = (name: string, testId: string) => {
+    const Icon = ({ className }: { className?: string }) => (
+      <svg className={className} data-testid={testId} aria-hidden="true" />
+    );
+    Icon.displayName = name;
+    return Icon;
+  };
+
+  return {
+    // Agent type icons
+    Settings01Icon: createMockIcon('Settings01Icon', 'settings-icon'),
+    PaintBrush01Icon: createMockIcon('PaintBrush01Icon', 'paint-brush-icon'),
+    TestTube01Icon: createMockIcon('TestTube01Icon', 'test-tube-icon'),
+    BotIcon: createMockIcon('BotIcon', 'bot-icon'),
+    // Maturity level icons
+    SunriseIcon: createMockIcon('SunriseIcon', 'sunrise-icon'),
+    BookOpen01Icon: createMockIcon('BookOpen01Icon', 'book-icon'),
+    FlashIcon: createMockIcon('FlashIcon', 'flash-icon'),
+    Award01Icon: createMockIcon('Award01Icon', 'award-icon'),
+  };
+});
+
 import AgentCard, { Agent } from '@/components/AgentCard';
 
 describe('AgentCard Component', () => {
@@ -212,7 +237,7 @@ describe('AgentCard Component', () => {
 
       const badge = screen.getByText('Backend Worker').parentElement;
       expect(badge).toHaveClass('bg-primary/10', 'text-primary-foreground');
-      expect(screen.getByText('⚙️')).toBeInTheDocument();
+      expect(screen.getByTestId('settings-icon')).toBeInTheDocument();
     });
 
     it('should show frontend badge with correct icon', () => {
@@ -227,7 +252,7 @@ describe('AgentCard Component', () => {
 
       const badge = screen.getByText('Frontend Specialist').parentElement;
       expect(badge).toHaveClass('bg-secondary', 'text-secondary-foreground');
-      expect(screen.getByText('🎨')).toBeInTheDocument();
+      expect(screen.getByTestId('paint-brush-icon')).toBeInTheDocument();
     });
 
     it('should show test badge with correct icon', () => {
@@ -242,7 +267,7 @@ describe('AgentCard Component', () => {
 
       const badge = screen.getByText('Test Engineer').parentElement;
       expect(badge).toHaveClass('bg-secondary', 'text-secondary-foreground');
-      expect(screen.getByText('🧪')).toBeInTheDocument();
+      expect(screen.getByTestId('test-tube-icon')).toBeInTheDocument();
     });
 
     it('should show default badge for unknown agent type', () => {
@@ -257,7 +282,7 @@ describe('AgentCard Component', () => {
 
       const badge = screen.getByText('Custom Agent').parentElement;
       expect(badge).toHaveClass('bg-muted', 'text-foreground');
-      expect(screen.getByText('🤖')).toBeInTheDocument();
+      expect(screen.getByTestId('bot-icon')).toBeInTheDocument();
     });
   });
 

web-ui/__tests__/components/AgentCard.test.tsx

@@ -11,6 +11,34 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { SWRConfig } from 'swr';
+
+// Mock Hugeicons - must be before component import
+// Include all icons used by AgentList and its child components (AgentAssignmentCard)
+jest.mock('@hugeicons/react', () => {
+  const createMockIcon = (name: string, testId: string) => {
+    const Icon = ({ className }: { className?: string }) => (
+      <svg className={className} data-testid={testId} aria-hidden="true" />
+    );
+    Icon.displayName = name;
+    return Icon;
+  };
+
+  return {
+    // AgentList icons
+    BotIcon: createMockIcon('BotIcon', 'bot-icon'),
+    CheckListIcon: createMockIcon('CheckListIcon', 'checklist-icon'),
+    Alert02Icon: createMockIcon('Alert02Icon', 'alert-icon'),
+    RefreshIcon: createMockIcon('RefreshIcon', 'refresh-icon'),
+    // AgentAssignmentCard icons
+    CrownIcon: createMockIcon('CrownIcon', 'crown-icon'),
+    Settings01Icon: createMockIcon('Settings01Icon', 'settings-icon'),
+    PaintBrush01Icon: createMockIcon('PaintBrush01Icon', 'paint-brush-icon'),
+    TestTube01Icon: createMockIcon('TestTube01Icon', 'test-tube-icon'),
+    Search01Icon: createMockIcon('Search01Icon', 'search-icon'),
+    CheckmarkCircle01Icon: createMockIcon('CheckmarkCircle01Icon', 'checkmark-icon'),
+  };
+});
+
 import { AgentList } from '../../src/components/AgentList';
 import * as agentAssignmentApi from '../../src/api/agentAssignment';
 import type { IssuesResponse } from '../../src/types/api';
@@ -227,7 +255,7 @@ describe('AgentList', () => {
       );
 
       await waitFor(() => {
-        // Check for BotIcon (Hugeicons adds data-testid automatically)
+        // Check for BotIcon (data-testid added explicitly in component source)
         expect(screen.getByTestId('bot-icon')).toBeInTheDocument();
       });
     });

web-ui/__tests__/components/AgentList.test.tsx

@@ -1,21 +1,35 @@
 /**
  * BlockerBadge Component Tests
  * Tests for blocker type badge display (049-human-in-loop, T016)
+ * Updated for emoji-to-Hugeicons migration: icons now use Hugeicons components
  */
 
 import { render, screen } from '@testing-library/react';
 import { BlockerBadge } from '@/components/BlockerBadge';
 
+// Mock Hugeicons
+jest.mock('@hugeicons/react', () => {
+  const React = require('react');
+  return {
+    Alert02Icon: ({ className }: { className?: string }) => (
+      <svg data-testid="Alert02Icon" className={className} aria-hidden="true" />
+    ),
+    Idea01Icon: ({ className }: { className?: string }) => (
+      <svg data-testid="Idea01Icon" className={className} aria-hidden="true" />
+    ),
+  };
+});
+
 describe('BlockerBadge', () => {
   describe('SYNC blocker badge', () => {
     it('renders with correct label', () => {
       render(<BlockerBadge type="SYNC" />);
       expect(screen.getByText('CRITICAL')).toBeInTheDocument();
     });
 
-    it('displays alert icon', () => {
+    it('displays Alert02Icon', () => {
       render(<BlockerBadge type="SYNC" />);
-      expect(screen.getByText('🚨')).toBeInTheDocument();
+      expect(screen.getByTestId('Alert02Icon')).toBeInTheDocument();
     });
 
     it('has red background and text colors', () => {
@@ -51,9 +65,9 @@ describe('BlockerBadge', () => {
       expect(screen.getByText('INFO')).toBeInTheDocument();
     });
 
-    it('displays lightbulb icon', () => {
+    it('displays Idea01Icon', () => {
       render(<BlockerBadge type="ASYNC" />);
-      expect(screen.getByText('💡')).toBeInTheDocument();
+      expect(screen.getByTestId('Idea01Icon')).toBeInTheDocument();
     });
 
     it('has yellow background and text colors', () => {
@@ -102,16 +116,16 @@ describe('BlockerBadge', () => {
   });
 
   describe('icon rendering', () => {
-    it('renders icon with correct size class', () => {
-      const { container } = render(<BlockerBadge type="SYNC" />);
-      const icon = screen.getByText('🚨');
-      expect(icon).toHaveClass('text-sm');
+    it('renders SYNC icon with correct size class', () => {
+      render(<BlockerBadge type="SYNC" />);
+      const icon = screen.getByTestId('Alert02Icon');
+      expect(icon).toHaveClass('h-3.5', 'w-3.5');
     });
 
     it('renders ASYNC icon with correct size class', () => {
-      const { container } = render(<BlockerBadge type="ASYNC" />);
-      const icon = screen.getByText('💡');
-      expect(icon).toHaveClass('text-sm');
+      render(<BlockerBadge type="ASYNC" />);
+      const icon = screen.getByTestId('Idea01Icon');
+      expect(icon).toHaveClass('h-3.5', 'w-3.5');
     });
   });
 });

web-ui/__tests__/components/BlockerBadge.test.tsx

@@ -1,6 +1,7 @@
 /**
  * BlockerPanel Component Tests
  * Tests for blocker list display and sorting (049-human-in-loop, T017)
+ * Updated for emoji-to-Hugeicons migration: icons now use Hugeicons components
  */
 
 import { render, screen, fireEvent } from '@testing-library/react';
@@ -19,6 +20,22 @@ import {
   mockMultipleAsyncBlockers,
 } from '../fixtures/blockers';
 
+// Mock Hugeicons
+jest.mock('@hugeicons/react', () => {
+  const React = require('react');
+  const createMockIcon = (name: string) => {
+    const Icon = ({ className }: { className?: string }) => (
+      <svg data-testid={name} className={className} aria-hidden="true" />
+    );
+    Icon.displayName = name;
+    return Icon;
+  };
+  return {
+    CheckmarkCircle01Icon: createMockIcon('CheckmarkCircle01Icon'),
+    BotIcon: createMockIcon('BotIcon'),
+  };
+});
+
 // Mock BlockerBadge component
 jest.mock('@/components/BlockerBadge', () => ({
   BlockerBadge: ({ type }: { type: string }) => (
@@ -31,7 +48,7 @@ describe('BlockerPanel', () => {
     it('renders empty state when blockers array is empty', () => {
       render(<BlockerPanel blockers={mockEmptyBlockersList} />);
       expect(screen.getByText('No blockers - agents are running smoothly!')).toBeInTheDocument();
-      expect(screen.getByText('✅')).toBeInTheDocument();
+      expect(screen.getByTestId('CheckmarkCircle01Icon')).toBeInTheDocument();
     });
 
     it('displays (0) count in empty state', () => {
@@ -246,12 +263,12 @@ describe('BlockerPanel', () => {
       // Skip first 3 filter buttons, get the first blocker button
       const blockerButton = buttons[3];
       // Should not have the '•' separator for task
-      expect(blockerButton.textContent).not.toMatch(/🤖.*•.*Implement/);
+      expect(blockerButton.textContent).not.toMatch(/•.*Implement/);
     });
 
-    it('displays robot emoji for agent', () => {
+    it('displays BotIcon for agent', () => {
       render(<BlockerPanel blockers={[mockSyncBlocker]} />);
-      expect(screen.getByText('🤖')).toBeInTheDocument();
+      expect(screen.getByTestId('BotIcon')).toBeInTheDocument();
     });
   });
 

web-ui/__tests__/components/BlockerPanel.test.tsx

@@ -66,6 +66,19 @@ jest.mock('@hugeicons/react', () => {
     // Other icons
     Download01Icon: createMockIcon('download-icon'),
     AlertDiamondIcon: createMockIcon('alert-diamond-icon'),
+    // Quality gate icons
+    ChartBarLineIcon: createMockIcon('chart-bar-line-icon'),
+    FileEditIcon: createMockIcon('file-edit-icon'),
+    SparklesIcon: createMockIcon('sparkles-icon'),
+    Settings01Icon: createMockIcon('settings-icon'),
+    PauseIcon: createMockIcon('pause-icon'),
+    RefreshIcon: createMockIcon('refresh-icon'),
+    InformationCircleIcon: createMockIcon('info-circle-icon'),
+    // AgentCard icons (agent type and maturity badges)
+    PaintBrush01Icon: createMockIcon('paint-brush-icon'),
+    SunriseIcon: createMockIcon('sunrise-icon'),
+    BookOpen01Icon: createMockIcon('book-open-icon'),
+    FlashIcon: createMockIcon('flash-icon'),
   };
 });
 

web-ui/__tests__/components/Dashboard.test.tsx

@@ -4,16 +4,35 @@
  */
 
 import { render, screen, waitFor, fireEvent, act } from '@testing-library/react';
-import DiscoveryProgress from '@/components/DiscoveryProgress';
-import { projectsApi, tasksApi } from '@/lib/api';
 import type { DiscoveryProgressResponse } from '@/types/api';
 
-// Mock Hugeicons
-jest.mock('@hugeicons/react', () => ({
-  Cancel01Icon: ({ className }: { className?: string }) => <span className={className} data-testid="cancel-icon" />,
-  CheckmarkCircle01Icon: ({ className }: { className?: string }) => <span className={className} data-testid="checkmark-icon" />,
-  Alert02Icon: ({ className }: { className?: string }) => <span className={className} data-testid="alert-icon" />,
-}));
+// Mock Hugeicons - must be before component imports
+jest.mock('@hugeicons/react', () => {
+  const createMockIcon = (name: string, testId: string) => {
+    const Icon = ({ className }: { className?: string }) => (
+      <svg className={className} data-testid={testId} aria-hidden="true" />
+    );
+    Icon.displayName = name;
+    return Icon;
+  };
+
+  return {
+    Cancel01Icon: createMockIcon('Cancel01Icon', 'cancel-icon'),
+    CheckmarkCircle01Icon: createMockIcon('CheckmarkCircle01Icon', 'checkmark-icon'),
+    Alert02Icon: createMockIcon('Alert02Icon', 'alert-icon'),
+    AlertDiamondIcon: createMockIcon('AlertDiamondIcon', 'alert-diamond-icon'),
+    Idea01Icon: createMockIcon('Idea01Icon', 'idea-icon'),
+    // Dialog component icons
+    Tick01Icon: createMockIcon('Tick01Icon', 'tick-icon'),
+    ArrowDown01Icon: createMockIcon('ArrowDown01Icon', 'arrow-down-icon'),
+    ArrowUp01Icon: createMockIcon('ArrowUp01Icon', 'arrow-up-icon'),
+    CheckmarkSquare01Icon: createMockIcon('CheckmarkSquare01Icon', 'checkmark-square-icon'),
+    CircleIcon: createMockIcon('CircleIcon', 'circle-icon'),
+  };
+});
+
+import DiscoveryProgress from '@/components/DiscoveryProgress';
+import { projectsApi, tasksApi } from '@/lib/api';
 
 // Mock the API
 const mockStartProject = jest.fn();

web-ui/__tests__/components/DiscoveryProgress.test.tsx

@@ -54,12 +54,31 @@ export const simulateWsMessage = (message: Record<string, unknown>) => {
 // Mock Modules Setup
 // =============================================================================
 
-// Mock Hugeicons
-jest.mock('@hugeicons/react', () => ({
-  Cancel01Icon: ({ className }: { className?: string }) => <span className={className} data-testid="cancel-icon" />,
-  CheckmarkCircle01Icon: ({ className }: { className?: string }) => <span className={className} data-testid="checkmark-icon" />,
-  Alert02Icon: ({ className }: { className?: string }) => <span className={className} data-testid="alert-icon" />,
-}));
+// Mock Hugeicons - comprehensive mock for all icons used in DiscoveryProgress and shadcn/ui components
+jest.mock('@hugeicons/react', () => {
+  const createMockIcon = (name: string, testId: string) => {
+    const Icon = ({ className }: { className?: string }) => (
+      <svg className={className} data-testid={testId} aria-hidden="true" />
+    );
+    Icon.displayName = name;
+    return Icon;
+  };
+
+  return {
+    // DiscoveryProgress icons
+    Cancel01Icon: createMockIcon('Cancel01Icon', 'cancel-icon'),
+    CheckmarkCircle01Icon: createMockIcon('CheckmarkCircle01Icon', 'checkmark-icon'),
+    Alert02Icon: createMockIcon('Alert02Icon', 'alert-icon'),
+    AlertDiamondIcon: createMockIcon('AlertDiamondIcon', 'alert-diamond-icon'),
+    Idea01Icon: createMockIcon('Idea01Icon', 'idea-icon'),
+    // shadcn/ui Dialog component icons
+    Tick01Icon: createMockIcon('Tick01Icon', 'tick-icon'),
+    ArrowDown01Icon: createMockIcon('ArrowDown01Icon', 'arrow-down-icon'),
+    ArrowUp01Icon: createMockIcon('ArrowUp01Icon', 'arrow-up-icon'),
+    CheckmarkSquare01Icon: createMockIcon('CheckmarkSquare01Icon', 'checkmark-square-icon'),
+    CircleIcon: createMockIcon('CircleIcon', 'circle-icon'),
+  };
+});
 
 // Mock the API
 jest.mock('@/lib/api', () => ({

web-ui/__tests__/components/DiscoveryProgress.testutils.tsx

@@ -13,6 +13,16 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import { ReactNode } from 'react';
 
+// Mock Hugeicons
+jest.mock('@hugeicons/react', () => {
+  const React = require('react');
+  return {
+    Alert02Icon: ({ className }: { className?: string }) => (
+      <svg data-testid="Alert02Icon" className={className} aria-hidden="true" />
+    ),
+  };
+});
+
 /**
  * Helper to set NODE_ENV for testing (process.env.NODE_ENV is read-only)
  */
@@ -204,8 +214,8 @@ describe('ErrorBoundary', () => {
         </ErrorBoundary>
       );
 
-      // Check for warning emoji
-      expect(screen.getByText('⚠')).toBeInTheDocument();
+      // Check for Alert02Icon
+      expect(screen.getByTestId('Alert02Icon')).toBeInTheDocument();
     });
 
     it('should display error details in development mode', () => {