fix: replace native SVG tooltip with styled heatmap tooltip overlay

Renders an HTML tooltip below hovered diagram nodes with processor
metrics (avg, p99, % time, invocations, error rate). Styled inline
with the existing NodeToolbar pattern — positioned via screen-space
coordinates, uses DS tokens for background/border/shadow/typography.

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

ui/src/components/ProcessDiagram/DiagramNode.tsx

@@ -102,18 +102,6 @@ export function DiagramNode({
       style={{ cursor: 'pointer' }}
       opacity={isSkipped ? 0.35 : undefined}
     >
-      {/* Processor metrics tooltip */}
-      {heatmapEntry && (
-        <title>{[
-          `${node.id}${heatmapEntry.processorType ? ` (${heatmapEntry.processorType})` : ''}`,
-          `Avg: ${heatmapEntry.avgDurationMs.toLocaleString(undefined, { maximumFractionDigits: 3 })}ms`,
-          `P99: ${heatmapEntry.p99DurationMs.toLocaleString(undefined, { maximumFractionDigits: 3 })}ms`,
-          `Time: ${heatmapEntry.pctOfRoute.toFixed(1)}%`,
-          heatmapEntry.totalCount != null ? `Invocations: ${heatmapEntry.totalCount.toLocaleString()}` : '',
-          heatmapEntry.errorRate != null ? `Errors: ${(heatmapEntry.errorRate * 100).toFixed(2)}%` : '',
-        ].filter(Boolean).join('\n')}</title>
-      )}
-
       {/* Selection ring */}
       {isSelected && (
         <rect

ui/src/components/ProcessDiagram/ProcessDiagram.module.css

@@ -175,6 +175,50 @@
   background: var(--bg-hover);
 }
 
+/* Heatmap tooltip — HTML overlay below hovered node */
+.heatmapTooltip {
+  position: absolute;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-lg);
+  padding: 8px 12px;
+  transform: translate(-50%, 8px);
+  z-index: 10;
+  pointer-events: none;
+  white-space: nowrap;
+  font-size: 12px;
+}
+
+.heatmapTooltipTitle {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.heatmapTooltipGrid {
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: 2px 12px;
+}
+
+.heatmapTooltipLabel {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.heatmapTooltipValue {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-align: right;
+}
+
 .iterationStepper {
   display: flex;
   align-items: center;

ui/src/components/ProcessDiagram/ProcessDiagram.tsx

@@ -411,6 +411,41 @@ export function ProcessDiagram({
         );
       })()}
 
+      {/* Heatmap tooltip — HTML overlay below hovered node */}
+      {toolbar.hoveredNodeId && latencyHeatmap && !onNodeAction && (() => {
+        const hNode = findNodeById(sections, toolbar.hoveredNodeId!);
+        const entry = hNode ? latencyHeatmap.get(hNode.id) : undefined;
+        if (!hNode || !entry) return null;
+        const nodeCenter = (hNode.x ?? 0) + (hNode.width ?? 160) / 2;
+        const nodeBottom = (hNode.y ?? 0) + (hNode.height ?? 40);
+        const screenX = nodeCenter * zoom.state.scale + zoom.state.translateX;
+        const screenY = nodeBottom * zoom.state.scale + zoom.state.translateY;
+        const fmtMs = (v: number) => v.toLocaleString(undefined, { maximumFractionDigits: 3 });
+        return (
+          <div className={styles.heatmapTooltip} style={{ left: screenX, top: screenY }}>
+            <div className={styles.heatmapTooltipTitle}>
+              {hNode.id}{entry.processorType ? ` (${entry.processorType})` : ''}
+            </div>
+            <div className={styles.heatmapTooltipGrid}>
+              <span className={styles.heatmapTooltipLabel}>Avg</span>
+              <span className={styles.heatmapTooltipValue}>{fmtMs(entry.avgDurationMs)}ms</span>
+              <span className={styles.heatmapTooltipLabel}>P99</span>
+              <span className={styles.heatmapTooltipValue}>{fmtMs(entry.p99DurationMs)}ms</span>
+              <span className={styles.heatmapTooltipLabel}>% Time</span>
+              <span className={styles.heatmapTooltipValue}>{entry.pctOfRoute.toFixed(1)}%</span>
+              {entry.totalCount != null && (<>
+                <span className={styles.heatmapTooltipLabel}>Invocations</span>
+                <span className={styles.heatmapTooltipValue}>{entry.totalCount.toLocaleString()}</span>
+              </>)}
+              {entry.errorRate != null && (<>
+                <span className={styles.heatmapTooltipLabel}>Error Rate</span>
+                <span className={styles.heatmapTooltipValue}>{(entry.errorRate * 100).toFixed(2)}%</span>
+              </>)}
+            </div>
+          </div>
+        );
+      })()}
+
       <Minimap
         sections={sections}
         totalWidth={totalWidth}