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/ExecutionDiagram/tabs/InfoTab.tsx

@@ -1,6 +1,7 @@
 import { Badge } from '@cameleer/design-system';
 import type { ProcessorNode, ExecutionDetail } from '../types';
 import { attributeBadgeColor } from '../../../utils/attribute-color';
+import { formatDurationShort } from '../../../utils/format-utils';
 import styles from '../ExecutionDiagram.module.css';
 
 interface InfoTabProps {
@@ -22,12 +23,6 @@ function formatTime(iso: string | undefined): string {
   }
 }
 
-function formatDuration(ms: number | undefined): string {
-  if (ms === undefined || ms === null) return '-';
-  if (ms < 1000) return `${ms}ms`;
-  return `${(ms / 1000).toFixed(1)}s`;
-}
-
 function statusClass(status: string): string {
   const s = status?.toUpperCase();
   if (s === 'COMPLETED') return styles.statusCompleted;
@@ -77,7 +72,7 @@ export function InfoTab({ processor, executionDetail }: InfoTabProps) {
 
           <Field label="Start Time" value={formatTime(processor.startTime)} mono />
           <Field label="End Time" value={formatTime(processor.endTime)} mono />
-          <Field label="Duration" value={formatDuration(processor.durationMs)} mono />
+          <Field label="Duration" value={formatDurationShort(processor.durationMs)} mono />
 
           <Field label="Endpoint URI" value={processor.processorType} />
           <Field label="Resolved URI" value={processor.resolvedEndpointUri ?? '-'} mono />
@@ -107,7 +102,7 @@ export function InfoTab({ processor, executionDetail }: InfoTabProps) {
 
         <Field label="Start Time" value={formatTime(executionDetail.startTime)} mono />
         <Field label="End Time" value={formatTime(executionDetail.endTime)} mono />
-        <Field label="Duration" value={formatDuration(executionDetail.durationMs)} mono />
+        <Field label="Duration" value={formatDurationShort(executionDetail.durationMs)} mono />
       </div>
       <Attributes attrs={executionDetail.attributes} />
     </div>

ui/src/components/LayoutShell.tsx

@@ -34,6 +34,7 @@ import type { ReactNode } from 'react';
 import { ContentTabs } from './ContentTabs';
 import { EnvironmentSelector } from './EnvironmentSelector';
 import { useScope } from '../hooks/useScope';
+import { formatDuration } from '../utils/format-utils';
 import {
   buildAppTreeNodes,
   buildAdminTreeNodes,
@@ -162,12 +163,6 @@ function healthToSearchColor(health: string): string {
   }
 }
 
-function formatDuration(ms: number): string {
-  if (ms >= 60_000) return `${(ms / 1000).toFixed(0)}s`;
-  if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`;
-  return `${ms}ms`;
-}
-
 function statusToColor(status: string): string {
   switch (status) {
     case 'COMPLETED': return 'success';

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>
       )}