chore: replace Unicode/emoji icons with Lucide React

Adds lucide-react and replaces all HTML entity and emoji icons across the UI with proper SVG icon components. Tree-shaken — only imported icons are bundled. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-27 23:16:39 +01:00
parent e9b1c94d1a
commit 41111b082c
10 changed files with 57 additions and 52 deletions
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -10,6 +10,7 @@
      "dependencies": {
        "@cameleer/design-system": "^0.1.17",
        "@tanstack/react-query": "^5.90.21",
+        "lucide-react": "^1.7.0",
        "openapi-fetch": "^0.17.0",
        "react": "^19.2.4",
        "react-dom": "^19.2.4",
@@ -2583,6 +2584,15 @@
        "yallist": "^3.0.2"
      }
    },
+    "node_modules/lucide-react": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.7.0.tgz",
+      "integrity": "sha512-yI7BeItCLZJTXikmK4KNUGCKoGzSvbKlfCvw44bU4fXAL6v3gYS4uHD1jzsLkfwODYwI6Drw5Tu9Z5ulDe0TSg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/minimatch": {
      "version": "3.1.5",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
--- a/ui/package.json
+++ b/ui/package.json
@@ -16,6 +16,7 @@
  "dependencies": {
    "@cameleer/design-system": "^0.1.17",
    "@tanstack/react-query": "^5.90.21",
+    "lucide-react": "^1.7.0",
    "openapi-fetch": "^0.17.0",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
--- a/ui/src/components/ProcessDiagram/DiagramNode.tsx
+++ b/ui/src/components/ProcessDiagram/DiagramNode.tsx
@@ -133,31 +133,19 @@ export function DiagramNode({
      {isCompleted && (
        <>
          <circle cx={w - 10} cy={TOP_BAR_HEIGHT + 8} r={6} fill="#3D7C47" />
-          <text
-            x={w - 10}
-            y={TOP_BAR_HEIGHT + 11}
-            textAnchor="middle"
-            fill="white"
-            fontSize={9}
-            fontWeight={700}
-          >
-            &#x2713;
-          </text>
+          <path
+            d={`M${w - 13} ${TOP_BAR_HEIGHT + 8} l2 2 4-4`}
+            fill="none" stroke="white" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round"
+          />
        </>
      )}
      {isFailed && (
        <>
          <circle cx={w - 10} cy={TOP_BAR_HEIGHT + 8} r={6} fill="#C0392B" />
-          <text
-            x={w - 10}
-            y={TOP_BAR_HEIGHT + 11}
-            textAnchor="middle"
-            fill="white"
-            fontSize={9}
-            fontWeight={700}
-          >
-            !
-          </text>
+          <path
+            d={`M${w - 10} ${TOP_BAR_HEIGHT + 5} v4 M${w - 10} ${TOP_BAR_HEIGHT + 10.5} v0.5`}
+            fill="none" stroke="white" strokeWidth={1.5} strokeLinecap="round"
+          />
        </>
      )}

@@ -177,15 +165,13 @@ export function DiagramNode({

      {/* Sub-route failure: drill-down arrow at bottom-left */}
      {isFailed && executionState?.subRouteFailed && (
-        <text
-          x={6}
-          y={h - 4}
-          fill="#C0392B"
-          fontSize={11}
-          fontWeight={700}
-        >
-          &#x21B3;
-        </text>
+        <g transform={`translate(4, ${h - 14})`}>
+          <path
+            d="M2 2 v5 a3 3 0 003 3 h5"
+            fill="none" stroke="#C0392B" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round"
+          />
+          <path d="M8 8 l2 2 -2 2" fill="none" stroke="#C0392B" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+        </g>
      )}
    </g>
  );
--- a/ui/src/components/ProcessDiagram/NodeToolbar.tsx
+++ b/ui/src/components/ProcessDiagram/NodeToolbar.tsx
@@ -1,4 +1,6 @@
 import { useCallback, useRef, useState } from 'react';
+import { Search, Footprints, Droplets, Ellipsis } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
 import type { NodeAction } from './types';
 import styles from './ProcessDiagram.module.css';

@@ -14,11 +16,11 @@ interface NodeToolbarProps {
  onMouseLeave: () => void;
 }

-const ACTIONS: { icon: string; action: NodeAction; title: string }[] = [
-  { icon: '\uD83D\uDD0D', action: 'inspect', title: 'Inspect' },
-  { icon: '\uD83D\uDC63', action: 'toggle-trace', title: 'Toggle tracing' },
-  { icon: '\uD83D\uDEB0', action: 'configure-tap', title: 'Configure tap' },
-  { icon: '\u22EF', action: 'copy-id', title: 'Copy ID' },
+const ACTIONS: { Icon: LucideIcon; action: NodeAction; title: string }[] = [
+  { Icon: Search, action: 'inspect', title: 'Inspect' },
+  { Icon: Footprints, action: 'toggle-trace', title: 'Toggle tracing' },
+  { Icon: Droplets, action: 'configure-tap', title: 'Configure tap' },
+  { Icon: Ellipsis, action: 'copy-id', title: 'Copy ID' },
 ];

 export function NodeToolbar({
@@ -41,7 +43,7 @@ export function NodeToolbar({
            onAction(nodeId, a.action);
          }}
        >
-          {a.icon}
+          <a.Icon size={14} />
        </button>
      ))}
    </div>
--- a/ui/src/pages/Admin/AppConfigDetailPage.tsx
+++ b/ui/src/pages/Admin/AppConfigDetailPage.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router';
+import { ArrowLeft, Pencil, X } from 'lucide-react';
 import {
  Button, SectionHeader, MonoText, Badge, DataTable, Spinner, Toggle, useToast,
 } from '@cameleer/design-system';
@@ -248,7 +249,7 @@ export default function AppConfigDetailPage() {
        if (row.captureMode === null) return null;
        return (
          <button className={styles.removeBtn} title="Remove" onClick={() => updateTracedProcessor(row.processorId, 'REMOVE')}>
-            &times;
+            <X size={14} />
          </button>
        );
      },
@@ -303,7 +304,7 @@ export default function AppConfigDetailPage() {
  return (
    <div className={styles.page}>
      <div className={styles.toolbar}>
-        <button className={styles.backBtn} onClick={() => navigate('/admin/appconfig')}>&larr; Back</button>
+        <button className={styles.backBtn} onClick={() => navigate('/admin/appconfig')}><ArrowLeft size={14} /> Back</button>
        {editing ? (
          <div className={styles.toolbarActions}>
            <Button onClick={handleSave} disabled={updateConfig.isPending}>
@@ -312,7 +313,7 @@ export default function AppConfigDetailPage() {
            <button className={styles.cancelBtn} onClick={cancelEditing}>Cancel</button>
          </div>
        ) : (
-          <button className={styles.editBtn} onClick={startEditing}>&#x270E; Edit</button>
+          <button className={styles.editBtn} onClick={startEditing}><Pencil size={14} /> Edit</button>
        )}
      </div>

--- a/ui/src/pages/Admin/AppConfigPage.tsx
+++ b/ui/src/pages/Admin/AppConfigPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useMemo, useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router';
+import { Pencil, X } from 'lucide-react';
 import {
  DataTable, Badge, MonoText, DetailPanel, SectionHeader, Button, Toggle, Spinner, useToast,
 } from '@cameleer/design-system';
@@ -197,7 +198,7 @@ function AppConfigDetail({ appId, onClose }: { appId: string; onClose: () => voi
    ...(editing ? [{
      key: '_remove' as const, header: '', width: '36px',
      render: (_v: unknown, row: TracedTapRow) => row.captureMode === null ? null : (
-        <button className={styles.removeBtn} title="Remove" onClick={() => updateTracedProcessor(row.processorId, 'REMOVE')}>&times;</button>
+        <button className={styles.removeBtn} title="Remove" onClick={() => updateTracedProcessor(row.processorId, 'REMOVE')}><X size={14} /></button>
      ),
    }] : []),
  ], [editing, processorToRoute]);
@@ -233,7 +234,7 @@ function AppConfigDetail({ appId, onClose }: { appId: string; onClose: () => voi
            </Button>
          </div>
        ) : (
-          <button className={styles.editBtn} onClick={startEditing} title="Edit configuration">&#x270E;</button>
+          <button className={styles.editBtn} onClick={startEditing} title="Edit configuration"><Pencil size={14} /></button>
        )}
      </div>

--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -1,5 +1,6 @@
 import { useState, useMemo, useCallback } from 'react';
 import { useParams, useNavigate } from 'react-router';
+import { ExternalLink, RefreshCw, Pencil } from 'lucide-react';
 import {
  StatCard, StatusDot, Badge, MonoText, ProgressBar,
  GroupCard, DataTable, LineChart, EventFeed, DetailPanel,
@@ -357,7 +358,7 @@ export default function AgentHealth() {
              navigate(`/agents/${row.application}/${row.id}`);
            }}
          >
-            &#x2197;
+            <ExternalLink size={14} />
          </button>
        ),
      },
@@ -621,7 +622,7 @@ export default function AgentHealth() {
                <span className={styles.configLabel}>Metrics</span>
                <Badge label={appConfig.metricsEnabled ? 'On' : 'Off'} color={appConfig.metricsEnabled ? 'success' : 'error'} variant="filled" />
              </div>
-              <button className={styles.configEditBtn} title="Edit config" onClick={startConfigEdit}>&#x270E;</button>
+              <button className={styles.configEditBtn} title="Edit config" onClick={startConfigEdit}><Pencil size={14} /></button>
            </>
          )}
        </div>
@@ -695,7 +696,7 @@ export default function AgentHealth() {
                {logSortAsc ? '\u2191' : '\u2193'}
              </button>
              <button className={styles.refreshBtn} onClick={() => setLogRefreshTo(new Date().toISOString())} title="Refresh">
-                &#x21bb;
+                <RefreshCw size={14} />
              </button>
            </div>
          </div>
@@ -745,7 +746,7 @@ export default function AgentHealth() {
                {eventSortAsc ? '\u2191' : '\u2193'}
              </button>
              <button className={styles.refreshBtn} onClick={() => setEventRefreshTo(new Date().toISOString())} title="Refresh">
-                &#x21bb;
+                <RefreshCw size={14} />
              </button>
            </div>
          </div>
--- a/ui/src/pages/AgentInstance/AgentInstance.tsx
+++ b/ui/src/pages/AgentInstance/AgentInstance.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
 import { useParams, Link } from 'react-router';
+import { RefreshCw, ChevronRight } from 'lucide-react';
 import {
  StatCard, StatusDot, Badge, LineChart, AreaChart, BarChart,
  EventFeed, Spinner, EmptyState, SectionHeader, MonoText,
@@ -230,11 +231,11 @@ export default function AgentInstance() {
            <Link to="/agents" className={styles.scopeLink}>
              All Agents
            </Link>
-            <span className={styles.scopeSep}>&#9656;</span>
+            <span className={styles.scopeSep}><ChevronRight size={12} /></span>
            <Link to={`/agents/${appId}`} className={styles.scopeLink}>
              {appId}
            </Link>
-            <span className={styles.scopeSep}>&#9656;</span>
+            <span className={styles.scopeSep}><ChevronRight size={12} /></span>
            <span className={styles.scopeCurrent}>{agent.name}</span>
            <StatusDot variant={statusVariant} />
            <Badge label={agent.status} color={statusColor} />
@@ -407,7 +408,7 @@ export default function AgentInstance() {
                {logSortAsc ? '\u2191' : '\u2193'}
              </button>
              <button className={styles.refreshBtn} onClick={() => setLogRefreshTo(new Date().toISOString())} title="Refresh">
-                &#x21bb;
+                <RefreshCw size={14} />
              </button>
            </div>
          </div>
@@ -457,7 +458,7 @@ export default function AgentInstance() {
                {eventSortAsc ? '\u2191' : '\u2193'}
              </button>
              <button className={styles.refreshBtn} onClick={() => setEventRefreshTo(new Date().toISOString())} title="Refresh">
-                &#x21bb;
+                <RefreshCw size={14} />
              </button>
            </div>
          </div>
--- a/ui/src/pages/Dashboard/Dashboard.tsx
+++ b/ui/src/pages/Dashboard/Dashboard.tsx
@@ -1,5 +1,6 @@
 import { useState, useMemo, useCallback } from 'react'
 import { useParams, useNavigate } from 'react-router'
+import { ExternalLink, AlertTriangle } from 'lucide-react'
 import {
  DataTable,
  DetailPanel,
@@ -344,7 +345,7 @@ export default function Dashboard() {
            navigate(`/exchanges/${row.executionId}`)
          }}
        >
-          &#x2197;
+          <ExternalLink size={14} />
        </button>
      ),
    }
@@ -418,7 +419,7 @@ export default function Dashboard() {
            expandedContent={(row: Row) =>
              row.errorMessage ? (
                <div className={styles.inlineError}>
-                  <span className={styles.inlineErrorIcon}>{'\u26A0'}</span>
+                  <span className={styles.inlineErrorIcon}><AlertTriangle size={14} /></span>
                  <div>
                    <div className={styles.inlineErrorText}>{row.errorMessage}</div>
                    <div className={styles.inlineErrorHint}>Click to view full stack trace</div>
--- a/ui/src/pages/Routes/RouteDetail.tsx
+++ b/ui/src/pages/Routes/RouteDetail.tsx
@@ -1,5 +1,6 @@
 import { useState, useMemo, useCallback } from 'react';
 import { useParams, useNavigate, useSearchParams, Link } from 'react-router';
+import { Pencil, Trash2 } from 'lucide-react';
 import {
  KpiStrip,
  Badge,
@@ -613,8 +614,8 @@ export default function RouteDetail() {
      width: '80px',
      render: (_, row) => (
        <div className={styles.tapActions}>
-          <button className={styles.tapActionBtn} title="Edit" onClick={() => openTapModal(row)}>&#x270E;</button>
-          <button className={styles.tapActionBtn} title="Delete" onClick={() => setDeletingTap(row)}>&#x1F5D1;</button>
+          <button className={styles.tapActionBtn} title="Edit" onClick={() => openTapModal(row)}><Pencil size={14} /></button>
+          <button className={styles.tapActionBtn} title="Delete" onClick={() => setDeletingTap(row)}><Trash2 size={14} /></button>
        </div>
      ),
    },