refactor: consolidate breadcrumbs to single TopBar instance

Remove duplicate in-page breadcrumbs (ExchangeDetail, AgentHealth scope
trail) and improve the global TopBar breadcrumb with semantic labels and
a context-based override for pages with richer navigation data.

- Add BreadcrumbProvider from design system v0.1.12
- LayoutShell: label map prettifies URL segments (apps→Applications, etc.)
- ExchangeDetail: uses useBreadcrumb() to set semantic trail via context
- AgentHealth: remove scope trail, keep live-count badge standalone

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

ui/src/pages/ExchangeDetail/ExchangeDetail.tsx

@@ -2,8 +2,8 @@ import { useState, useMemo, useCallback, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router'
 import {
   Badge, StatusDot, MonoText, CodeBlock, InfoCallout,
-  ProcessorTimeline, Breadcrumb, Spinner, RouteFlow, useToast,
-  LogViewer, ButtonGroup, SectionHeader,
+  ProcessorTimeline, Spinner, RouteFlow, useToast,
+  LogViewer, ButtonGroup, SectionHeader, useBreadcrumb,
 } from '@cameleer/design-system'
 import type { ProcessorStep, RouteNode, NodeBadge, LogEntry, ButtonGroupItem } from '@cameleer/design-system'
 import { useExecutionDetail, useProcessorSnapshot } from '../../api/queries/executions'
@@ -256,6 +256,15 @@ export default function ExchangeDetail() {
     return correlationData.data
   }, [correlationData])
 
+  // Set semantic breadcrumb in TopBar when detail is loaded
+  const breadcrumbItems = useMemo(() => detail ? [
+    { label: 'Applications', href: '/apps' },
+    { label: detail.applicationName || 'App', href: `/apps/${detail.applicationName}` },
+    { label: detail.routeId, href: `/apps/${detail.applicationName}/${detail.routeId}` },
+    { label: detail.executionId?.slice(0, 12) || '' },
+  ] : null, [detail?.applicationName, detail?.routeId, detail?.executionId])
+  useBreadcrumb(breadcrumbItems)
+
   // Exchange logs from OpenSearch (filtered by exchangeId via MDC)
   const { data: rawLogs } = useApplicationLogs(
     detail?.applicationName,
@@ -288,11 +297,6 @@ export default function ExchangeDetail() {
   if (!detail) {
     return (
       <div className={styles.content}>
-        <Breadcrumb items={[
-          { label: 'Applications', href: '/apps' },
-          { label: 'Exchanges' },
-          { label: id ?? 'Unknown' },
-        ]} />
         <InfoCallout variant="warning">Exchange &quot;{id}&quot; not found.</InfoCallout>
       </div>
     )
@@ -304,14 +308,6 @@ export default function ExchangeDetail() {
   return (
     <div className={styles.content}>
 
-      {/* Breadcrumb */}
-      <Breadcrumb items={[
-        { label: 'Applications', href: '/apps' },
-        { label: detail.applicationName || 'App', href: `/apps/${detail.applicationName}` },
-        { label: detail.routeId, href: `/apps/${detail.applicationName}/${detail.routeId}` },
-        { label: detail.executionId?.slice(0, 12) || '' },
-      ]} />
-
       {/* Exchange header card */}
       <div className={styles.exchangeHeader}>
         <div className={styles.headerRow}>