fix: align all pages with design system mocks — stat cards, tables, detail panels

Dashboard: correct stat card labels (Exchanges/Success Rate/Errors/Throughput/Latency p99), add detail text, trends, sparklines on all cards, Agent column, LIVE badge, expanded detail panel with Agent/Correlation/Timestamp, "Open full details" link. Agent Health: per-group meta (TPS/routes) in GroupCard header, proper HTML table with column headers for instance list. Agent Instance: stat card detail props (heap info, start date), scope trail with inline status/version/routes badges. Routes: 5th In-Flight stat card, enriched stat card props (detail/trend/sparkline), SLA threshold line on latency chart. Exchange Detail: Agent stat box in header. Also: vite proxy CORS fix, cross-env dev scripts. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 20:28:56 +01:00
parent 752d7ec0e7
commit 4572230c9c
12 changed files with 466 additions and 73 deletions
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -24,6 +24,7 @@
        "@types/react": "^19.2.14",
        "@types/react-dom": "^19.2.3",
        "@vitejs/plugin-react": "^6.0.0",
+        "cross-env": "^10.1.0",
        "eslint": "^9.39.4",
        "eslint-plugin-react-hooks": "^7.0.1",
        "eslint-plugin-react-refresh": "^0.5.2",
@@ -323,6 +324,13 @@
        "tslib": "^2.4.0"
      }
    },
+    "node_modules/@epic-web/invariant": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
+      "integrity": "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@eslint-community/eslint-utils": {
      "version": "4.9.1",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
@@ -1629,6 +1637,24 @@
        "url": "https://opencollective.com/express"
      }
    },
+    "node_modules/cross-env": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz",
+      "integrity": "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@epic-web/invariant": "^1.0.0",
+        "cross-spawn": "^7.0.6"
+      },
+      "bin": {
+        "cross-env": "dist/bin/cross-env.js",
+        "cross-env-shell": "dist/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
--- a/ui/package.json
+++ b/ui/package.json
@@ -5,6 +5,8 @@
  "type": "module",
  "scripts": {
    "dev": "vite",
+    "dev:local": "cross-env VITE_API_TARGET=http://localhost:8081 vite",
+    "dev:remote": "cross-env VITE_API_TARGET=http://192.168.50.86:30090 vite",
    "build": "tsc -p tsconfig.app.json --noEmit && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
@@ -28,6 +30,7 @@
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^6.0.0",
+    "cross-env": "^10.1.0",
    "eslint": "^9.39.4",
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.5.2",
--- a/ui/src/pages/AgentHealth/AgentHealth.module.css
+++ b/ui/src/pages/AgentHealth/AgentHealth.module.css
@@ -19,15 +19,54 @@
  margin-bottom: 20px;
 }

-.instanceRow {
+/* GroupCard meta strip */
+.groupMeta {
  display: flex;
+  gap: 16px;
  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.groupMeta strong {
+  color: var(--text-primary);
+}
+
+/* Instance table */
+.instanceTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.instanceTable thead tr {
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.instanceTable thead th {
+  padding: 6px 8px;
+  text-align: left;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.thStatus {
+  width: 24px;
+}
+
+.tdStatus {
+  width: 24px;
+  padding: 0 4px 0 8px;
+}
+
+.instanceRow {
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid var(--border-subtle);
-  font-size: 12px;
 }

 .instanceRow:last-child {
@@ -38,6 +77,15 @@
  background: var(--bg-hover);
 }

+.instanceRow td {
+  padding: 7px 8px;
+  vertical-align: middle;
+}
+
+.instanceRowActive {
+  background: var(--bg-selected, var(--bg-hover));
+}
+
 .instanceName {
  font-weight: 600;
  color: var(--text-primary);
@@ -49,6 +97,24 @@
  font-family: var(--font-mono);
 }

+.instanceError {
+  font-size: 11px;
+  color: var(--error);
+  font-family: var(--font-mono);
+}
+
+.instanceHeartbeatDead {
+  font-size: 11px;
+  color: var(--error);
+  font-family: var(--font-mono);
+}
+
+.instanceHeartbeatStale {
+  font-size: 11px;
+  color: var(--warning);
+  font-family: var(--font-mono);
+}
+
 .instanceLink {
  color: var(--text-muted);
  text-decoration: none;
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -246,43 +246,102 @@ export default function AgentHealth() {
      <div className={styles.groupGrid}>
        {Object.entries(apps).map(([group, groupAgents]) => {
          const deadInGroup = (groupAgents || []).filter((a: any) => a.status === 'DEAD');
+          const groupTps = (groupAgents || []).reduce((s: number, a: any) => s + (a.tps || 0), 0);
+          const groupActiveRoutes = (groupAgents || []).reduce((s: number, a: any) => s + (a.activeRoutes || 0), 0);
+          const groupTotalRoutes = (groupAgents || []).reduce((s: number, a: any) => s + (a.totalRoutes || 0), 0);
+          const liveInGroup = (groupAgents || []).filter((a: any) => a.status === 'LIVE').length;
          return (
            <GroupCard
              key={group}
              title={group}
-              headerRight={<Badge label={`${groupAgents?.length ?? 0} instances`} />}
+              headerRight={
+                <Badge
+                  label={`${liveInGroup}/${groupAgents?.length ?? 0} LIVE`}
+                  color={
+                    groupAgents?.some((a: any) => a.status === 'DEAD') ? 'error'
+                      : groupAgents?.some((a: any) => a.status === 'STALE') ? 'warning'
+                      : 'success'
+                  }
+                  variant="filled"
+                />
+              }
+              meta={
+                <div className={styles.groupMeta}>
+                  <span><strong>{groupTps.toFixed(1)}</strong> msg/s</span>
+                  <span><strong>{groupActiveRoutes}</strong>/{groupTotalRoutes} routes</span>
+                </div>
+              }
              accent={
                groupAgents?.some((a: any) => a.status === 'DEAD') ? 'error'
                  : groupAgents?.some((a: any) => a.status === 'STALE') ? 'warning'
                  : 'success'
              }
-              onClick={() => navigate(`/agents/${group}`)}
            >
              {deadInGroup.length > 0 && (
                <Alert variant="error">{deadInGroup.length} instance(s) unreachable</Alert>
              )}
-              {(groupAgents || []).map((agent: any) => (
-                <div
-                  key={agent.id}
-                  className={styles.instanceRow}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setSelectedAgent(agent);
-                    navigate(`/agents/${group}/${agent.id}`);
-                  }}
-                >
-                  <StatusDot variant={agent.status === 'LIVE' ? 'live' : agent.status === 'STALE' ? 'stale' : 'dead'} />
-                  <span className={styles.instanceName}>{agent.name}</span>
-                  <Badge label={agent.status} color={agent.status === 'LIVE' ? 'success' : agent.status === 'STALE' ? 'warning' : 'error'} />
-                  <span className={styles.instanceMeta}>{formatUptime(agent.uptimeSeconds)}</span>
-                  {agent.tps != null && <span className={styles.instanceMeta}>{(agent.tps || 0).toFixed(1)} tps</span>}
-                  {agent.errorRate != null && (
-                    <span className={styles.instanceMeta}>{(agent.errorRate * 100).toFixed(1)}% err</span>
-                  )}
-                  <span className={styles.instanceMeta}>{formatRelativeTime(agent.lastHeartbeat)}</span>
-                  <span className={styles.instanceLink} aria-label="View instance">›</span>
-                </div>
-              ))}
+              <table className={styles.instanceTable}>
+                <thead>
+                  <tr>
+                    <th className={styles.thStatus} />
+                    <th>Instance</th>
+                    <th>State</th>
+                    <th>Uptime</th>
+                    <th>TPS</th>
+                    <th>Errors</th>
+                    <th>Heartbeat</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {(groupAgents || []).map((agent: any) => (
+                    <tr
+                      key={agent.id}
+                      className={[
+                        styles.instanceRow,
+                        selectedAgent?.id === agent.id ? styles.instanceRowActive : '',
+                      ].filter(Boolean).join(' ')}
+                      onClick={() => {
+                        setSelectedAgent(agent);
+                        navigate(`/agents/${group}/${agent.id}`);
+                      }}
+                    >
+                      <td className={styles.tdStatus}>
+                        <StatusDot variant={agent.status === 'LIVE' ? 'live' : agent.status === 'STALE' ? 'stale' : 'dead'} />
+                      </td>
+                      <td>
+                        <MonoText size="sm" className={styles.instanceName}>{agent.name ?? agent.id}</MonoText>
+                      </td>
+                      <td>
+                        <Badge
+                          label={agent.status}
+                          color={agent.status === 'LIVE' ? 'success' : agent.status === 'STALE' ? 'warning' : 'error'}
+                          variant="filled"
+                        />
+                      </td>
+                      <td>
+                        <span className={styles.instanceMeta}>{formatUptime(agent.uptimeSeconds)}</span>
+                      </td>
+                      <td>
+                        <span className={styles.instanceMeta}>{agent.tps != null ? `${(agent.tps as number).toFixed(1)}/s` : '—'}</span>
+                      </td>
+                      <td>
+                        <span className={agent.errorRate != null ? styles.instanceError : styles.instanceMeta}>
+                          {agent.errorRate != null ? `${((agent.errorRate as number) * 100).toFixed(1)}%` : '—'}
+                        </span>
+                      </td>
+                      <td>
+                        <span className={
+                          agent.status === 'DEAD' ? styles.instanceHeartbeatDead
+                            : agent.status === 'STALE' ? styles.instanceHeartbeatStale
+                            : styles.instanceMeta
+                        }>
+                          {formatRelativeTime(agent.lastHeartbeat)}
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
            </GroupCard>
          );
        })}
--- a/ui/src/pages/AgentInstance/AgentInstance.module.css
+++ b/ui/src/pages/AgentInstance/AgentInstance.module.css
@@ -110,6 +110,35 @@
  flex-wrap: wrap;
 }

+.scopeTrail {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 16px;
+  font-size: 13px;
+  flex-wrap: wrap;
+}
+
+.scopeLink {
+  color: var(--text-accent, var(--text-primary));
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.scopeLink:hover {
+  text-decoration: underline;
+}
+
+.scopeSep {
+  color: var(--text-muted);
+  font-size: 10px;
+}
+
+.scopeCurrent {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
 .paneTitle {
  font-size: 13px;
  font-weight: 700;
--- a/ui/src/pages/AgentInstance/AgentInstance.tsx
+++ b/ui/src/pages/AgentInstance/AgentInstance.tsx
@@ -122,10 +122,35 @@ export default function AgentInstance() {

          <div className={styles.statStrip}>
            <StatCard label="CPU" value={cpuPct != null ? `${(cpuPct * 100).toFixed(0)}%` : '—'} />
-            <StatCard label="Memory" value={memPct != null ? `${memPct.toFixed(0)}%` : '—'} />
+            <StatCard
+              label="Memory"
+              value={memPct != null ? `${memPct.toFixed(0)}%` : '—'}
+              detail={heapUsed != null && heapMax != null ? `${(heapUsed / (1024 * 1024)).toFixed(0)} MB / ${(heapMax / (1024 * 1024)).toFixed(0)} MB` : undefined}
+            />
            <StatCard label="Throughput" value={agent?.tps != null ? `${agent.tps.toFixed(1)}/s` : '—'} />
            <StatCard label="Errors" value={agent?.errorRate != null ? `${(agent.errorRate * 100).toFixed(1)}%` : '—'} accent={agent?.errorRate > 0 ? 'error' : undefined} />
-            <StatCard label="Uptime" value={formatUptime(agent?.uptimeSeconds)} />
+            <StatCard
+              label="Uptime"
+              value={formatUptime(agent?.uptimeSeconds)}
+              detail={agent?.registeredAt ? `since ${new Date(agent.registeredAt).toLocaleDateString()}` : undefined}
+            />
+          </div>
+
+          <div className={styles.scopeTrail}>
+            <a href="/agents" className={styles.scopeLink}>All Agents</a>
+            <span className={styles.scopeSep}>&#9656;</span>
+            <a href={`/agents/${appId}`} className={styles.scopeLink}>{appId}</a>
+            <span className={styles.scopeSep}>&#9656;</span>
+            <span className={styles.scopeCurrent}>{agent.name}</span>
+            <Badge
+              label={agent.status.toUpperCase()}
+              color={agent.status === 'LIVE' ? 'success' : agent.status === 'STALE' ? 'warning' : 'error'}
+            />
+            {agent.version && <Badge label={agent.version} variant="outlined" />}
+            <Badge
+              label={`${agent.activeRoutes ?? (agent.routeIds?.length ?? 0)}/${agent.totalRoutes ?? (agent.routeIds?.length ?? 0)} routes`}
+              color={(agent.activeRoutes ?? 0) < (agent.totalRoutes ?? 0) ? 'warning' : 'success'}
+            />
          </div>

          <Card className={styles.infoCard}>
--- a/ui/src/pages/Dashboard/Dashboard.module.css
+++ b/ui/src/pages/Dashboard/Dashboard.module.css
@@ -82,3 +82,19 @@
  flex-shrink: 0;
  padding-top: 2px;
 }
+
+.openDetailLink {
+  display: inline-block;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--accent, #c6820e);
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  text-decoration: none;
+}
+
+.openDetailLink:hover {
+  text-decoration: underline;
+}
--- a/ui/src/pages/Dashboard/Dashboard.tsx
+++ b/ui/src/pages/Dashboard/Dashboard.tsx
@@ -1,20 +1,28 @@
 import { useState, useMemo } from 'react';
-import { useParams } from 'react-router';
+import { useParams, useNavigate } from 'react-router';
 import {
-  StatCard, StatusDot, Badge, MonoText, Sparkline,
+  StatCard, StatusDot, Badge, MonoText,
  DataTable, DetailPanel, ProcessorTimeline, RouteFlow,
-  Alert, Collapsible, CodeBlock,
+  Alert, Collapsible, CodeBlock, ShortcutsBar,
 } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
 import { useSearchExecutions, useExecutionStats, useStatsTimeseries, useExecutionDetail, useProcessorSnapshot } from '../../api/queries/executions';
+import { useDiagramByRoute } from '../../api/queries/diagrams';
 import { useGlobalFilters } from '@cameleer/design-system';
 import type { ExecutionSummary } from '../../api/types';
+import { mapDiagramToRouteNodes } from '../../utils/diagram-mapping';
 import styles from './Dashboard.module.css';

 interface Row extends ExecutionSummary { id: string }

+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
 export default function Dashboard() {
  const { appId, routeId } = useParams();
+  const navigate = useNavigate();
  const { timeRange } = useGlobalFilters();
  const timeFrom = timeRange.start.toISOString();
  const timeTo = timeRange.end.toISOString();
@@ -35,29 +43,58 @@ export default function Dashboard() {
  }, true);
  const { data: detail } = useExecutionDetail(selectedId);
  const { data: snapshot } = useProcessorSnapshot(selectedId, processorIdx);
+  const { data: diagram } = useDiagramByRoute(detail?.groupName, detail?.routeId);

  const rows: Row[] = useMemo(() =>
    (searchResult?.data || []).map((e: ExecutionSummary) => ({ ...e, id: e.executionId })),
    [searchResult],
  );

-  const sparklineData = useMemo(() =>
-    (timeseries?.buckets || []).map((b: any) => b.totalCount as number),
-    [timeseries],
-  );
+  const totalCount = stats?.totalCount ?? 0;
+  const failedCount = stats?.failedCount ?? 0;
+  const successRate = totalCount > 0 ? ((totalCount - failedCount) / totalCount * 100) : 100;
+  const throughput = timeWindowSeconds > 0 ? totalCount / timeWindowSeconds : 0;
+
+  const sparkExchanges = useMemo(() =>
+    (timeseries?.buckets || []).map((b: any) => b.totalCount as number), [timeseries]);
+  const sparkErrors = useMemo(() =>
+    (timeseries?.buckets || []).map((b: any) => b.failedCount as number), [timeseries]);
+  const sparkLatency = useMemo(() =>
+    (timeseries?.buckets || []).map((b: any) => b.p99DurationMs as number), [timeseries]);
+  const sparkThroughput = useMemo(() =>
+    (timeseries?.buckets || []).map((b: any) => {
+      const bucketSeconds = timeWindowSeconds / Math.max((timeseries?.buckets || []).length, 1);
+      return bucketSeconds > 0 ? (b.totalCount as number) / bucketSeconds : 0;
+    }), [timeseries, timeWindowSeconds]);
+
+  const prevTotal = stats?.prevTotalCount ?? 0;
+  const prevFailed = stats?.prevFailedCount ?? 0;
+  const exchangeTrend = prevTotal > 0 ? ((totalCount - prevTotal) / prevTotal * 100) : 0;
+  const prevSuccessRate = prevTotal > 0 ? ((prevTotal - prevFailed) / prevTotal * 100) : 100;
+  const successRateDelta = successRate - prevSuccessRate;
+  const errorDelta = failedCount - prevFailed;

  const columns: Column<Row>[] = [
    {
      key: 'status', header: 'Status', width: '80px',
-      render: (v) => <StatusDot variant={v === 'COMPLETED' ? 'success' : v === 'FAILED' ? 'error' : 'running'} />,
+      render: (v, row) => (
+        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+          <StatusDot variant={v === 'COMPLETED' ? 'success' : v === 'FAILED' ? 'error' : 'running'} />
+          <MonoText size="xs">{v === 'COMPLETED' ? 'OK' : v === 'FAILED' ? 'ERR' : 'RUN'}</MonoText>
+        </span>
+      ),
    },
-    { key: 'routeId', header: 'Route', render: (v) => <MonoText size="sm">{String(v)}</MonoText> },
-    { key: 'groupName', header: 'App', render: (v) => <Badge label={String(v)} color="auto" /> },
-    { key: 'executionId', header: 'Exchange ID', render: (v) => <MonoText size="xs">{String(v).slice(0, 12)}</MonoText> },
-    { key: 'startTime', header: 'Started', sortable: true, render: (v) => new Date(v as string).toLocaleTimeString() },
+    { key: 'routeId', header: 'Route', sortable: true, render: (v) => <span>{String(v)}</span> },
+    { key: 'groupName', header: 'Application', sortable: true, render: (v) => <span>{String(v ?? '')}</span> },
+    { key: 'executionId', header: 'Exchange ID', sortable: true, render: (v) => <MonoText size="xs">{String(v)}</MonoText> },
+    { key: 'startTime', header: 'Started', sortable: true, render: (v) => <MonoText size="xs">{new Date(v as string).toISOString().replace('T', ' ').slice(0, 19)}</MonoText> },
    {
      key: 'durationMs', header: 'Duration', sortable: true,
-      render: (v) => `${v}ms`,
+      render: (v) => <MonoText size="sm">{formatDuration(v as number)}</MonoText>,
+    },
+    {
+      key: 'agentId', header: 'Agent',
+      render: (v) => v ? <Badge label={String(v)} color="auto" /> : null,
    },
  ];

@@ -67,23 +104,42 @@ export default function Dashboard() {
      content: (
        <>
          <div className={styles.panelSection}>
-            <div className={styles.panelSectionTitle}>Details</div>
+            <button
+              className={styles.openDetailLink}
+              onClick={() => navigate(`/exchanges/${detail.executionId}`)}
+            >
+              Open full details &#x2192;
+            </button>
+          </div>
+          <div className={styles.panelSection}>
+            <div className={styles.panelSectionTitle}>Overview</div>
            <div className={styles.overviewGrid}>
              <div className={styles.overviewRow}>
-                <span className={styles.overviewLabel}>Exchange ID</span>
-                <MonoText size="sm">{detail.executionId}</MonoText>
+                <span className={styles.overviewLabel}>Status</span>
+                <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                  <StatusDot variant={detail.status === 'COMPLETED' ? 'success' : 'error'} />
+                  <span>{detail.status}</span>
+                </span>
              </div>
              <div className={styles.overviewRow}>
-                <span className={styles.overviewLabel}>Status</span>
-                <Badge label={detail.status} color={detail.status === 'COMPLETED' ? 'success' : 'error'} />
+                <span className={styles.overviewLabel}>Duration</span>
+                <MonoText size="sm">{formatDuration(detail.durationMs)}</MonoText>
              </div>
              <div className={styles.overviewRow}>
                <span className={styles.overviewLabel}>Route</span>
                <span>{detail.routeId}</span>
              </div>
              <div className={styles.overviewRow}>
-                <span className={styles.overviewLabel}>Duration</span>
-                <span>{detail.durationMs}ms</span>
+                <span className={styles.overviewLabel}>Agent</span>
+                <MonoText size="sm">{detail.agentId ?? '—'}</MonoText>
+              </div>
+              <div className={styles.overviewRow}>
+                <span className={styles.overviewLabel}>Correlation</span>
+                <MonoText size="xs">{detail.correlationId ?? '—'}</MonoText>
+              </div>
+              <div className={styles.overviewRow}>
+                <span className={styles.overviewLabel}>Timestamp</span>
+                <MonoText size="xs">{detail.startTime ? new Date(detail.startTime).toISOString().replace('T', ' ').slice(0, 19) : '—'}</MonoText>
              </div>
            </div>
          </div>
@@ -118,42 +174,71 @@ export default function Dashboard() {
        ) : <div style={{ padding: '1rem' }}>No processor data</div>;
      })(),
    },
+    {
+      label: 'Route Flow', value: 'flow',
+      content: diagram ? (
+        <RouteFlow
+          nodes={mapDiagramToRouteNodes(
+            diagram.nodes || [],
+            detail.processors?.length ? detail.processors : (detail.children ?? [])
+          )}
+          onNodeClick={(_node, _i) => { /* optionally select processor */ }}
+        />
+      ) : <div style={{ padding: '1rem' }}>No diagram available</div>,
+    },
  ] : [];

  return (
    <div>
      <div className={styles.healthStrip}>
        <StatCard
-          label="Throughput"
-          value={timeWindowSeconds > 0 ? `${((stats?.totalCount ?? 0) / timeWindowSeconds).toFixed(2)} ex/s` : '0.00 ex/s'}
-          sparkline={sparklineData}
+          label="Exchanges"
+          value={totalCount.toLocaleString()}
+          detail={`${successRate.toFixed(1)}% success rate`}
+          trend={exchangeTrend > 0 ? 'up' : exchangeTrend < 0 ? 'down' : 'neutral'}
+          trendValue={exchangeTrend > 0 ? `+${exchangeTrend.toFixed(0)}%` : `${exchangeTrend.toFixed(0)}%`}
+          sparkline={sparkExchanges}
+          accent="amber"
        />
        <StatCard
-          label="Error Rate"
-          value={(stats?.totalCount ?? 0) > 0 ? `${((stats?.failedCount ?? 0) / stats!.totalCount * 100).toFixed(1)}%` : '0.0%'}
+          label="Success Rate"
+          value={`${successRate.toFixed(1)}%`}
+          detail={`${(totalCount - failedCount).toLocaleString()} ok / ${failedCount} error`}
+          trend={successRateDelta >= 0 ? 'up' : 'down'}
+          trendValue={`${successRateDelta >= 0 ? '+' : ''}${successRateDelta.toFixed(1)}%`}
+          accent="success"
+        />
+        <StatCard
+          label="Errors"
+          value={failedCount}
+          detail={`${failedCount} errors in selected period`}
+          trend={errorDelta > 0 ? 'up' : errorDelta < 0 ? 'down' : 'neutral'}
+          trendValue={errorDelta > 0 ? `+${errorDelta}` : `${errorDelta}`}
+          sparkline={sparkErrors}
          accent="error"
        />
        <StatCard
-          label="Avg Latency"
-          value={`${stats?.avgDurationMs ?? 0}ms`}
-        />
-        <StatCard
-          label="P99 Latency"
-          value={`${stats?.p99LatencyMs ?? 0}ms`}
-          accent="warning"
-        />
-        <StatCard
-          label="In-Flight"
-          value={stats?.activeCount ?? 0}
+          label="Throughput"
+          value={throughput.toFixed(1)}
+          detail={`${throughput.toFixed(1)} msg/s`}
+          sparkline={sparkThroughput}
          accent="running"
        />
+        <StatCard
+          label="Latency p99"
+          value={stats?.p99LatencyMs ?? 0}
+          detail={`${stats?.p99LatencyMs ?? 0}ms`}
+          sparkline={sparkLatency}
+          accent="warning"
+        />
      </div>

      <div className={styles.tableSection}>
        <div className={styles.tableHeader}>
          <span className={styles.tableTitle}>Recent Exchanges</span>
          <div className={styles.tableRight}>
-            <span className={styles.tableMeta}>{rows.length} results</span>
+            <span className={styles.tableMeta}>{rows.length} of {searchResult?.total ?? 0} exchanges</span>
+            <Badge label="LIVE" color="success" />
          </div>
        </div>
        <DataTable
--- a/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx
+++ b/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx
@@ -68,6 +68,10 @@ export default function ExchangeDetail() {
              <div className={styles.headerStatLabel}>Duration</div>
              <div className={styles.headerStatValue}>{detail.durationMs}ms</div>
            </div>
+            <div className={styles.headerStat}>
+              <div className={styles.headerStatLabel}>Agent</div>
+              <div className={styles.headerStatValue}>{detail.agentId}</div>
+            </div>
            <div className={styles.headerStat}>
              <div className={styles.headerStatLabel}>Processors</div>
              <div className={styles.headerStatValue}>{countProcessors(detail.processors || detail.children || [])}</div>
--- a/ui/src/pages/Routes/RoutesMetrics.module.css
+++ b/ui/src/pages/Routes/RoutesMetrics.module.css
@@ -1,6 +1,6 @@
 .statStrip {
  display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 16px;
 }
--- a/ui/src/pages/Routes/RoutesMetrics.tsx
+++ b/ui/src/pages/Routes/RoutesMetrics.tsx
@@ -81,13 +81,84 @@ export default function RoutesMetrics() {
    },
  ];

+  const errorRate = stats?.totalCount
+    ? (((stats.failedCount ?? 0) / stats.totalCount) * 100)
+    : 0;
+  const prevErrorRate = stats?.prevTotalCount
+    ? (((stats.prevFailedCount ?? 0) / stats.prevTotalCount) * 100)
+    : 0;
+  const errorTrend: 'up' | 'down' | 'neutral' = errorRate > prevErrorRate ? 'up' : errorRate < prevErrorRate ? 'down' : 'neutral';
+  const errorTrendValue = stats?.prevTotalCount
+    ? `${Math.abs(errorRate - prevErrorRate).toFixed(2)}%`
+    : undefined;
+
+  const p99Ms = stats?.p99LatencyMs ?? 0;
+  const prevP99Ms = stats?.prevP99LatencyMs ?? 0;
+  const latencyTrend: 'up' | 'down' | 'neutral' = p99Ms > prevP99Ms ? 'up' : p99Ms < prevP99Ms ? 'down' : 'neutral';
+  const latencyTrendValue = prevP99Ms ? `${Math.abs(p99Ms - prevP99Ms)}ms` : undefined;
+
+  const totalCount = stats?.totalCount ?? 0;
+  const prevTotalCount = stats?.prevTotalCount ?? 0;
+  const throughputTrend: 'up' | 'down' | 'neutral' = totalCount > prevTotalCount ? 'up' : totalCount < prevTotalCount ? 'down' : 'neutral';
+  const throughputTrendValue = prevTotalCount
+    ? `${Math.abs(((totalCount - prevTotalCount) / prevTotalCount) * 100).toFixed(0)}%`
+    : undefined;
+
+  const successRate = stats?.totalCount
+    ? (((stats.totalCount - (stats.failedCount ?? 0)) / stats.totalCount) * 100)
+    : 100;
+
+  const activeCount = stats?.activeCount ?? 0;
+
+  const errorSparkline = (timeseries?.buckets || []).map((b: any) => b.failedCount as number);
+  const latencySparkline = (timeseries?.buckets || []).map((b: any) => b.p99DurationMs as number);
+
  return (
    <div>
      <div className={styles.statStrip}>
-        <StatCard label="Total Throughput" value={stats?.totalCount ?? 0} sparkline={sparklineData} />
-        <StatCard label="Error Rate" value={stats?.totalCount ? `${(((stats.failedCount ?? 0) / stats.totalCount) * 100).toFixed(1)}%` : '0%'} accent="error" />
-        <StatCard label="P99 Latency" value={`${stats?.p99LatencyMs ?? 0}ms`} accent="warning" />
-        <StatCard label="Success Rate" value={stats?.totalCount ? `${(((stats.totalCount - (stats.failedCount ?? 0)) / stats.totalCount) * 100).toFixed(1)}%` : '100%'} accent="success" />
+        <StatCard
+          label="Total Throughput"
+          value={totalCount.toLocaleString()}
+          detail="exchanges"
+          trend={throughputTrend}
+          trendValue={throughputTrendValue}
+          accent="amber"
+          sparkline={sparklineData}
+        />
+        <StatCard
+          label="System Error Rate"
+          value={`${errorRate.toFixed(2)}%`}
+          detail={`${stats?.failedCount ?? 0} errors / ${totalCount.toLocaleString()} total`}
+          trend={errorTrend}
+          trendValue={errorTrendValue}
+          accent={errorRate < 1 ? 'success' : 'error'}
+          sparkline={errorSparkline}
+        />
+        <StatCard
+          label="P99 Latency"
+          value={`${p99Ms}ms`}
+          detail={`Avg: ${stats?.avgDurationMs ?? 0}ms`}
+          trend={latencyTrend}
+          trendValue={latencyTrendValue}
+          accent={p99Ms > 300 ? 'error' : p99Ms > 200 ? 'warning' : 'success'}
+          sparkline={latencySparkline}
+        />
+        <StatCard
+          label="Success Rate"
+          value={`${successRate.toFixed(1)}%`}
+          detail={`${activeCount} active routes`}
+          accent="success"
+          sparkline={sparklineData.map((v, i) => {
+            const failed = errorSparkline[i] ?? 0;
+            return v > 0 ? ((v - failed) / v) * 100 : 100;
+          })}
+        />
+        <StatCard
+          label="In-Flight"
+          value={activeCount}
+          detail="active exchanges"
+          accent="amber"
+        />
      </div>

      <div className={styles.tableSection}>
@@ -111,7 +182,11 @@ export default function RoutesMetrics() {
          </div>
          <div className={styles.chartCard}>
            <div className={styles.chartTitle}>Latency</div>
-            <LineChart series={[{ label: 'Latency', data: chartData.map((d: any, i: number) => ({ x: i, y: d.latency })) }]} height={200} />
+            <LineChart
+              series={[{ label: 'Latency', data: chartData.map((d: any, i: number) => ({ x: i, y: d.latency })) }]}
+              height={200}
+              threshold={{ value: 300, label: 'SLA 300ms' }}
+            />
          </div>
          <div className={styles.chartCard}>
            <div className={styles.chartTitle}>Errors</div>
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -13,6 +13,11 @@ export default defineConfig({
        target: apiTarget,
        changeOrigin: true,
        secure: false,
+        configure: (proxy) => {
+          proxy.on('proxyReq', (proxyReq) => {
+            proxyReq.removeHeader('origin');
+          });
+        },
      },
    },
  },