feat(web-ui): migrate @hugeicons/react 0.3.4 → 1.x (#869) (#873)

* feat(web-ui): migrate @hugeicons/react 0.3.4 → 1.x (#869)

@hugeicons/react 1.x split the icon data (now @hugeicons/core-free-icons)
from the renderer (@hugeicons/react exports only HugeiconsIcon). The
previous bump attempt (#850) failed with 388 Turbopack errors because
the named icon exports (Add01Icon, etc.) were removed in 1.x.

This migration:
- Bumps @hugeicons/react to ^1.1.9 and adds @hugeicons/core-free-icons ^4.2.2.
- Rewrites every @hugeicons/react import (61 files) to import HugeiconsIcon
  from @hugeicons/react and the icon data from @hugeicons/core-free-icons.
- Wraps every <IconName .../> JSX usage in <HugeiconsIcon icon={IconName} .../>.
- Updates 7 value-typed icon maps (eventStyles, RecentActivityFeed,
  FileTreePanel, BlockerCard, AppSidebar, NotificationCenter,
  BatchExecutionMonitor, VerificationEvent) from ComponentType<>/ElementType
  to IconSvgElement, with consumer call sites updated to render via
  <HugeiconsIcon icon={...} />.
- Updates the Jest mock: @hugeicons/react now mocks HugeiconsIcon; a new
  @hugeicons/core-free-icons mock returns stable icon-name sentinels so
  tests can assert on data-testid='icon-<Name>' patterns.

All 56 unique icon names used in the app exist 1:1 in core-free-icons@4.2.2
— no renames needed. Free-tier (MIT) icons only; no Pro packs introduced.

Verified: npm run build (Turbopack) green, npm test 1052/1052 green,
npm run lint clean, tsc --noEmit clean for app source.

* refactor(blockers): rename ORIGIN_CONFIG.Icon → .icon for camelCase consistency

After the hugeicons 1.x migration, the Icon field holds IconSvgElement
data (not a React component), so the other 6 icon-map sites were renamed
to camelCase (icon, stateIcon, navIcon, config.icon, etc.). ORIGIN_CONFIG
was the lone outlier still using PascalCase. Aligns it with the rest of
the migration.

Addresses claude[bot] review nit on PR #873.

* refactor(notifications): rename iconForNotification Icon → icon for camelCase

Final consistency fix: the iconForNotification() return type used a
capitalized 'Icon' field, same pattern as the ORIGIN_CONFIG fix in
f824c19. Now all 8 value-typed icon maps use camelCase field names
(icon, stateIcon, navIcon, config.icon, origin.icon, activityIcons,
changeTypeIcon, statusConfig) consistently.

Addresses claude[bot] follow-up review nit on PR #873.

Author: frankbria

web-ui/__mocks__/@hugeicons/core-free-icons.js

@@ -0,0 +1,22 @@
+// Test mock for @hugeicons/core-free-icons (1.x icon data package).
+//
+// In production, each icon is a readonly array of [tag, attrs] tuples (an
+// `IconSvgElement`). For unit tests we don't need real SVG data — we just
+// need a stable sentinel that the @hugeicons/react mock can identify. Each
+// accessed `XxxIcon` property returns `{ __iconName: '<name>' }`, which the
+// HugeiconsIcon mock renders as `<svg data-testid="icon-<name>" />`.
+//
+// A Proxy keeps this resilient to new icons being added without touching
+// this file.
+
+module.exports = new Proxy(
+  {},
+  {
+    get(_target, prop) {
+      if (typeof prop !== 'string') return undefined;
+      // Non-string symbols (e.g. Symbol.toStringTag, inspect customs) → undefined.
+      // Any string property access returns a stable sentinel object.
+      return { __iconName: prop };
+    },
+  },
+);

web-ui/__mocks__/@hugeicons/react.js

@@ -1,88 +1,23 @@
 const React = require('react');
 
-const createIconMock = (name) => {
-  const IconComponent = React.forwardRef((props, ref) => {
-    return React.createElement('svg', {
-      'data-testid': `icon-${name}`,
-      ref,
-      ...props,
-    });
+const HugeiconsIcon = React.forwardRef(function HugeiconsIcon(
+  { icon, altIcon, showAlt, size, color, strokeWidth, absoluteStrokeWidth, primaryColor, secondaryColor, disableSecondaryOpacity, ...rest },
+  ref,
+) {
+  const iconName = icon && typeof icon === 'object' && '__iconName' in icon ? icon.__iconName : 'unknown';
+  const effectiveIcon = showAlt && altIcon ? altIcon : icon;
+  const effectiveName =
+    effectiveIcon && typeof effectiveIcon === 'object' && '__iconName' in effectiveIcon
+      ? effectiveIcon.__iconName
+      : iconName;
+  return React.createElement('svg', {
+    'data-testid': `icon-${effectiveName}`,
+    ref,
+    ...rest,
   });
-  IconComponent.displayName = name;
-  return IconComponent;
-};
+});
 
 module.exports = {
-  // WorkspaceHeader
-  Folder01Icon: createIconMock('Folder01Icon'),
-  Loading03Icon: createIconMock('Loading03Icon'),
-  // WorkspaceStatsCards
-  CodeIcon: createIconMock('CodeIcon'),
-  Task01Icon: createIconMock('Task01Icon'),
-  PlayIcon: createIconMock('PlayIcon'),
-  // QuickActions
-  FileEditIcon: createIconMock('FileEditIcon'),
-  GitBranchIcon: createIconMock('GitBranchIcon'),
-  // RecentActivityFeed
-  Time01Icon: createIconMock('Time01Icon'),
-  CheckmarkCircle01Icon: createIconMock('CheckmarkCircle01Icon'),
-  Alert02Icon: createIconMock('Alert02Icon'),
-  // WorkspaceSelector
-  Cancel01Icon: createIconMock('Cancel01Icon'),
-  // PRD components
-  Upload04Icon: createIconMock('Upload04Icon'),
-  MessageSearch01Icon: createIconMock('MessageSearch01Icon'),
-  TaskEdit01Icon: createIconMock('TaskEdit01Icon'),
-  TestTube01Icon: createIconMock('TestTube01Icon'),
-  ArtificialIntelligence01Icon: createIconMock('ArtificialIntelligence01Icon'),
-  SentIcon: createIconMock('SentIcon'),
-  // AppSidebar
-  Home01Icon: createIconMock('Home01Icon'),
-  Add01Icon: createIconMock('Add01Icon'),
-  // PipelineProgressBar
-  Tick01Icon: createIconMock('Tick01Icon'),
-  // Task Board components
-  PlayCircleIcon: createIconMock('PlayCircleIcon'),
-  LinkCircleIcon: createIconMock('LinkCircleIcon'),
-  ViewIcon: createIconMock('ViewIcon'),
-  Search01Icon: createIconMock('Search01Icon'),
-  CheckListIcon: createIconMock('CheckListIcon'),
-  // Execution Monitor components
-  Idea01Icon: createIconMock('Idea01Icon'),
-  ArrowTurnBackwardIcon: createIconMock('ArrowTurnBackwardIcon'),
-  CommandLineIcon: createIconMock('CommandLineIcon'),
-  AlertDiamondIcon: createIconMock('AlertDiamondIcon'),
-  WifiDisconnected01Icon: createIconMock('WifiDisconnected01Icon'),
-  SidebarLeftIcon: createIconMock('SidebarLeftIcon'),
-  ArrowDown01Icon: createIconMock('ArrowDown01Icon'),
-  ArrowUp01Icon: createIconMock('ArrowUp01Icon'),
-  StopIcon: createIconMock('StopIcon'),
-  // AgentChatPanel
-  ArrowRight01Icon: createIconMock('ArrowRight01Icon'),
-  Alert01Icon: createIconMock('Alert01Icon'),
-  // SplitPane
-  ArrowLeft01Icon: createIconMock('ArrowLeft01Icon'),
-  // Proof page
-  InformationCircleIcon: createIconMock('InformationCircleIcon'),
-  // FileTreePanel / DiffViewer
-  FileAddIcon: createIconMock('FileAddIcon'),
-  FileRemoveIcon: createIconMock('FileRemoveIcon'),
-  // BlockerCard origin badges
-  Settings01Icon: createIconMock('Settings01Icon'),
-  UserCircle02Icon: createIconMock('UserCircle02Icon'),
-  // PRHistoryPanel
-  ArrowUpRight01Icon: createIconMock('ArrowUpRight01Icon'),
-  // Costs page
-  MoneyBag02Icon: createIconMock('MoneyBag02Icon'),
-  Analytics01Icon: createIconMock('Analytics01Icon'),
-  ChartLineData01Icon: createIconMock('ChartLineData01Icon'),
-  // NotificationCenter
-  Notification02Icon: createIconMock('Notification02Icon'),
-  // GitHub issue import (issue #564)
-  GithubIcon: createIconMock('GithubIcon'),
-  // Auth / login (issue #336)
-  Login01Icon: createIconMock('Login01Icon'),
-  Logout01Icon: createIconMock('Logout01Icon'),
-  LockIcon: createIconMock('LockIcon'),
-  Mail01Icon: createIconMock('Mail01Icon'),
+  HugeiconsIcon,
+  default: HugeiconsIcon,
 };

web-ui/jest.config.js

@@ -12,6 +12,7 @@ const customJestConfig = {
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
     '^@hugeicons/react$': '<rootDir>/__mocks__/@hugeicons/react.js',
+    '^@hugeicons/core-free-icons$': '<rootDir>/__mocks__/@hugeicons/core-free-icons.js',
   },
   testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
   testPathIgnorePatterns: [

web-ui/package-lock.json

@@ -15,7 +15,8 @@
     "test:e2e:headed": "npx playwright test --headed"
   },
   "dependencies": {
-    "@hugeicons/react": "^0.3.0",
+    "@hugeicons/core-free-icons": "^4.2.2",
+    "@hugeicons/react": "^1.1.9",
     "@radix-ui/react-alert-dialog": "^1.1.19",
     "@radix-ui/react-checkbox": "^1.3.7",
     "@radix-ui/react-dialog": "^1.1.15",

web-ui/package.json

@@ -2,11 +2,8 @@
 
 import { useState } from 'react';
 import useSWR from 'swr';
-import {
-  MoneyBag02Icon,
-  Task01Icon,
-  Analytics01Icon,
-} from '@hugeicons/react';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { MoneyBag02Icon, Task01Icon, Analytics01Icon } from '@hugeicons/core-free-icons';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { SpendBarChart } from '@/components/costs/SpendBarChart';
 import { TopTasksTable } from '@/components/costs/TopTasksTable';
@@ -126,7 +123,7 @@ export default function CostsPage() {
               <Card>
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <CardTitle className="text-sm font-medium">Total Spend</CardTitle>
-                  <MoneyBag02Icon className="h-4 w-4 text-muted-foreground" />
+                  <HugeiconsIcon icon={MoneyBag02Icon} className="h-4 w-4 text-muted-foreground" />
                 </CardHeader>
                 <CardContent>
                   <p
@@ -141,7 +138,7 @@ export default function CostsPage() {
               <Card>
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <CardTitle className="text-sm font-medium">Tasks Run</CardTitle>
-                  <Task01Icon className="h-4 w-4 text-muted-foreground" />
+                  <HugeiconsIcon icon={Task01Icon} className="h-4 w-4 text-muted-foreground" />
                 </CardHeader>
                 <CardContent>
                   <p
@@ -156,7 +153,7 @@ export default function CostsPage() {
               <Card>
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <CardTitle className="text-sm font-medium">Avg Cost / Task</CardTitle>
-                  <Analytics01Icon className="h-4 w-4 text-muted-foreground" />
+                  <HugeiconsIcon icon={Analytics01Icon} className="h-4 w-4 text-muted-foreground" />
                 </CardHeader>
                 <CardContent>
                   <p

web-ui/src/app/costs/page.tsx

@@ -3,7 +3,8 @@
 import { Suspense, useState, useEffect } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
-import { Loading03Icon } from '@hugeicons/react';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { Loading03Icon } from '@hugeicons/core-free-icons';
 import { tasksApi } from '@/lib/api';
 import { BatchExecutionMonitor } from '@/components/execution/BatchExecutionMonitor';
 import { WorkspaceSelector } from '@/components/workspace/WorkspaceSelector';
@@ -20,7 +21,7 @@ export default function ExecutionLandingPage() {
     <Suspense
       fallback={
         <main className="flex min-h-screen items-center justify-center bg-background">
-          <Loading03Icon className="h-6 w-6 animate-spin text-muted-foreground" />
+          <HugeiconsIcon icon={Loading03Icon} className="h-6 w-6 animate-spin text-muted-foreground" />
         </main>
       }
     >
@@ -109,7 +110,7 @@ function ExecutionLandingContent() {
   if (taskIdParam || resolving) {
     return (
       <main className="flex min-h-screen items-center justify-center bg-background">
-        <Loading03Icon className="h-6 w-6 animate-spin text-muted-foreground" />
+        <HugeiconsIcon icon={Loading03Icon} className="h-6 w-6 animate-spin text-muted-foreground" />
       </main>
     );
   }