feat: replace Unicode diagram icons with lucide SVG icons

Each of the ~40 node types now has a distinct, semantically meaningful
lucide icon rendered as crisp SVG paths. Compound node headers also
show their icon left-aligned in the header bar.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/components/ProcessDiagram/CompoundNode.tsx

@@ -1,7 +1,7 @@
 import type { DiagramNode as DiagramNodeType, DiagramEdge as DiagramEdgeType } from '../../api/queries/diagrams';
 import type { NodeConfig } from './types';
 import type { NodeExecutionState, IterationInfo } from '../ExecutionDiagram/types';
-import { colorForType, isCompoundType } from './node-colors';
+import { colorForType, isCompoundType, iconForType, type IconElement } from './node-colors';
 import { DiagramNode } from './DiagramNode';
 import { DiagramEdge } from './DiagramEdge';
 import styles from './ProcessDiagram.module.css';
@@ -118,7 +118,15 @@ export function CompoundNode({
       <rect x={0} y={0} width={w} height={HEADER_HEIGHT} rx={CORNER_RADIUS} fill={color} />
       <rect x={CORNER_RADIUS} y={CORNER_RADIUS} width={w - CORNER_RADIUS * 2} height={HEADER_HEIGHT - CORNER_RADIUS} fill={color} />
 
-      {/* Header label */}
+      {/* Header icon (left-aligned) */}
+      <g transform={`translate(6, ${HEADER_HEIGHT / 2 - 5}) scale(0.417)`}>
+        {iconForType(node.type).map((el: IconElement, i: number) =>
+          'd' in el
+            ? <path key={i} d={el.d} fill="none" stroke="white" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+            : <circle key={i} cx={el.cx} cy={el.cy} r={el.r} fill="none" stroke="white" strokeWidth={2} />
+        )}
+      </g>
+      {/* Header label (centered) */}
       <text
         x={w / 2}
         y={HEADER_HEIGHT / 2 + 4}