fix: OpenSearch status field mismatch, adopt RouteFlow flows prop

Fix admin OpenSearch page always showing "Disconnected" by aligning
frontend field names (reachable/nodeCount/host) with backend DTO.

Update design system to v0.1.10 and adopt the new multi-flow RouteFlow
API — error-handler nodes now render as labeled segments with error
variant instead of relying on legacy auto-separation.

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

ui/src/pages/Routes/RouteDetail.tsx

@@ -21,7 +21,7 @@ import { useDiagramByRoute } from '../../api/queries/diagrams';
 import { useProcessorMetrics } from '../../api/queries/processor-metrics';
 import { useStatsTimeseries, useSearchExecutions, useExecutionStats } from '../../api/queries/executions';
 import type { ExecutionSummary, AppCatalogEntry, RouteSummary } from '../../api/types';
-import { mapDiagramToRouteNodes } from '../../utils/diagram-mapping';
+import { mapDiagramToRouteNodes, toFlowSegments } from '../../utils/diagram-mapping';
 import styles from './RouteDetail.module.css';
 
 // ── Row types ────────────────────────────────────────────────────────────────
@@ -321,9 +321,9 @@ export default function RouteDetail() {
   }, [health]);
 
   // Route flow from diagram
-  const diagramNodes = useMemo(() => {
+  const diagramFlows = useMemo(() => {
     if (!diagram?.nodes) return [];
-    return mapDiagramToRouteNodes(diagram.nodes, []);
+    return toFlowSegments(mapDiagramToRouteNodes(diagram.nodes, [])).flows;
   }, [diagram]);
 
   // Processor table rows
@@ -458,8 +458,8 @@ export default function RouteDetail() {
       <div className={styles.diagramStatsGrid}>
         <div className={styles.diagramPane}>
           <div className={styles.paneTitle}>Route Diagram</div>
-          {diagramNodes.length > 0 ? (
-            <RouteFlow nodes={diagramNodes} />
+          {diagramFlows.length > 0 ? (
+            <RouteFlow flows={diagramFlows} />
           ) : (
             <div className={styles.emptyText}>
               No diagram available for this route.
@@ -497,12 +497,12 @@ export default function RouteDetail() {
       </div>
 
       {/* Route Flow section */}
-      {diagramNodes.length > 0 && (
+      {diagramFlows.length > 0 && (
         <div className={styles.routeFlowSection}>
           <div className={styles.tableHeader}>
             <span className={styles.tableTitle}>Route Flow</span>
           </div>
-          <RouteFlow nodes={diagramNodes} />
+          <RouteFlow flows={diagramFlows} />
         </div>
       )}