refactor: extract duplicated utility functions into shared modules

Consolidate 20+ duplicate function definitions across UI components into
three shared util files (format-utils, agent-utils, config-draft-utils).

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

ui/src/components/ProcessDiagram/DiagramNode.tsx

@@ -3,6 +3,7 @@ import type { DiagramNode as DiagramNodeType } from '../../api/queries/diagrams'
 import type { NodeConfig, LatencyHeatmapEntry } from './types';
 import type { NodeExecutionState } from '../ExecutionDiagram/types';
 import { colorForType, iconForType, type IconElement } from './node-colors';
+import { formatDurationShort } from '../../utils/format-utils';
 
 const TOP_BAR_HEIGHT = 6;
 const TEXT_LEFT = 32;
@@ -37,11 +38,6 @@ function heatmapBorderColor(pct: number): string {
   return `hsl(${Math.round(hue)}, 60%, 50%)`;
 }
 
-function formatDuration(ms: number): string {
-  if (ms < 1000) return `${ms}ms`;
-  return `${(ms / 1000).toFixed(1)}s`;
-}
-
 export function DiagramNode({
   node, isHovered, isSelected, config,
   executionState, overlayActive, heatmapEntry,
@@ -273,7 +269,7 @@ export function DiagramNode({
           fontSize={9}
           fontWeight={500}
         >
-          {formatDuration(executionState.durationMs)}
+          {formatDurationShort(executionState.durationMs)}
         </text>
       )}
 
@@ -287,7 +283,7 @@ export function DiagramNode({
           fontSize={9}
           fontWeight={600}
         >
-          {formatDuration(heatmapEntry.avgDurationMs)}
+          {formatDurationShort(heatmapEntry.avgDurationMs)}
         </text>
       )}