feat: rework Metrics into Routes with 3-level hierarchy and mock-matching KPI header

- Rename Metrics to Routes with /routes, /routes/:appId, /routes/:appId/:routeId
- Sidebar: Routes is now a collapsible tree (apps > routes) like Applications/Agents
- KPI header matching mock-v3-metrics-dashboard: throughput with sparkline, error rate,
  latency percentiles (P50/P95/P99), active routes with mini donut, in-flight exchanges
- Same KPI header used consistently across all 3 levels with scoped data
- Route detail level shows per-processor performance table and RouteFlow diagram
- Added appId to RouteMetricRow and filled missing route entries in mock data
- Fix sidebar section toggle indentation

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

src/App.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useCallback } from 'react'
 import { Routes, Route, Navigate, useNavigate } from 'react-router-dom'
 import { Dashboard } from './pages/Dashboard/Dashboard'
-import { Metrics } from './pages/Metrics/Metrics'
+import { Routes as RoutesPage } from './pages/Routes/Routes'
 import { ExchangeDetail } from './pages/ExchangeDetail/ExchangeDetail'
 import { AgentHealth } from './pages/AgentHealth/AgentHealth'
 import { AgentInstance } from './pages/AgentInstance/AgentInstance'
@@ -82,7 +82,9 @@ export default function App() {
         <Route path="/apps" element={<Dashboard />} />
         <Route path="/apps/:id" element={<Dashboard />} />
         <Route path="/apps/:id/:routeId" element={<Dashboard />} />
-        <Route path="/metrics" element={<Metrics />} />
+        <Route path="/routes" element={<RoutesPage />} />
+        <Route path="/routes/:appId" element={<RoutesPage />} />
+        <Route path="/routes/:appId/:routeId" element={<RoutesPage />} />
         <Route path="/exchanges/:id" element={<ExchangeDetail />} />
         <Route path="/agents/:appId/:instanceId" element={<AgentInstance />} />
         <Route path="/agents/*" element={<AgentHealth />} />