fix: improve diagram node readability and add UI to SonarQube scan

- Increase node width (160→220), height (40→50), spacing (90→120)
- Use SVG clipPath for text instead of character-count truncation
- Add UI sources, ESLint report, and sonar-scanner CLI to SonarQube workflow

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

ui/src/components/ProcessDiagram/DiagramNode.tsx

@@ -5,6 +5,8 @@ import { colorForType, iconForType } from './node-colors';
 import { ConfigBadge } from './ConfigBadge';
 
 const TOP_BAR_HEIGHT = 6;
+const TEXT_LEFT = 32;
+const TEXT_RIGHT_PAD = 24;
 const CORNER_RADIUS = 4;
 
 interface DiagramNodeProps {
@@ -109,22 +111,27 @@ export function DiagramNode({
       <rect x={0} y={0} width={w} height={TOP_BAR_HEIGHT} rx={CORNER_RADIUS} fill={topBarColor} />
       <rect x={CORNER_RADIUS} y={0} width={w - CORNER_RADIUS * 2} height={TOP_BAR_HEIGHT} fill={topBarColor} />
 
+      {/* Clip path for text area */}
+      <clipPath id={`clip-${node.id}`}>
+        <rect x={TEXT_LEFT} y={TOP_BAR_HEIGHT} width={w - TEXT_LEFT - TEXT_RIGHT_PAD} height={h - TOP_BAR_HEIGHT} />
+      </clipPath>
+
       {/* Icon */}
-      <text x={14} y={h / 2 + 6} fill={statusColor ?? color} fontSize={14}>
+      <text x={14} y={h / 2 + 4} fill={statusColor ?? color} fontSize={14}>
         {icon}
       </text>
 
-      {/* Type name */}
-      <text x={32} y={h / 2 + 1} fill={labelColor} fontSize={11} fontWeight={600}>
-        {typeName}
-      </text>
-
-      {/* Detail label (truncated) */}
-      {detail && detail !== typeName && (
-        <text x={32} y={h / 2 + 14} fill={isFailed ? '#C0392B' : '#5C5347'} fontSize={10}>
-          {detail.length > 22 ? detail.slice(0, 20) + '...' : detail}
+      {/* Type name + detail (clipped to available width) */}
+      <g clipPath={`url(#clip-${node.id})`}>
+        <text x={TEXT_LEFT} y={h / 2 - 1} fill={labelColor} fontSize={11} fontWeight={600}>
+          {typeName}
         </text>
-      )}
+        {detail && detail !== typeName && (
+          <text x={TEXT_LEFT} y={h / 2 + 12} fill={isFailed ? '#C0392B' : '#5C5347'} fontSize={10}>
+            {detail}
+          </text>
+        )}
+      </g>
 
       {/* Config badges */}
       {config && <ConfigBadge nodeWidth={w} config={config} />}