feat(ui): add compact KPI metrics in tab bar (Total, Err%, Avg, P99)

New TabKpis component shows scope-aware metrics with trend arrows
aligned right in the content tab bar. Each metric shows current value
and an arrow indicating change vs previous period (green=good, red=bad).

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

ui/src/components/TabKpis.tsx

@@ -0,0 +1,104 @@
+import { useMemo } from 'react';
+import { useGlobalFilters } from '@cameleer/design-system';
+import { useExecutionStats } from '../api/queries/executions';
+import type { Scope } from '../hooks/useScope';
+import styles from './TabKpis.module.css';
+
+interface TabKpisProps {
+  scope: Scope;
+}
+
+function formatNum(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return n.toLocaleString();
+}
+
+function formatMs(ms: number): string {
+  if (ms >= 60_000) return `${(ms / 1000).toFixed(0)}s`;
+  if (ms >= 1000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${Math.round(ms)}ms`;
+}
+
+function formatPct(pct: number): string {
+  return `${pct.toFixed(1)}%`;
+}
+
+type Trend = 'up' | 'down' | 'flat';
+
+function trend(current: number, previous: number): Trend {
+  if (current > previous) return 'up';
+  if (current < previous) return 'down';
+  return 'flat';
+}
+
+function trendArrow(t: Trend): string {
+  switch (t) {
+    case 'up': return '\u2191';
+    case 'down': return '\u2193';
+    case 'flat': return '\u2192';
+  }
+}
+
+interface Metric {
+  label: string;
+  value: string;
+  trend: Trend;
+  /** Whether "up" is bad (e.g. error rate, latency) */
+  upIsBad?: boolean;
+}
+
+export function TabKpis({ scope }: TabKpisProps) {
+  const { timeRange } = useGlobalFilters();
+  const timeFrom = timeRange.start.toISOString();
+  const timeTo = timeRange.end.toISOString();
+
+  const { data: stats } = useExecutionStats(
+    timeFrom, timeTo,
+    scope.routeId, scope.appId,
+  );
+
+  const metrics: Metric[] = useMemo(() => {
+    if (!stats) return [];
+
+    const total = stats.totalCount ?? 0;
+    const failed = stats.failedCount ?? 0;
+    const prevTotal = stats.prevTotalCount ?? 0;
+    const prevFailed = stats.prevFailedCount ?? 0;
+    const errorRate = total > 0 ? (failed / total) * 100 : 0;
+    const prevErrorRate = prevTotal > 0 ? (prevFailed / prevTotal) * 100 : 0;
+    const avgMs = stats.avgDurationMs ?? 0;
+    const prevAvgMs = stats.prevAvgDurationMs ?? 0;
+    const p99 = stats.p99LatencyMs ?? 0;
+    const prevP99 = stats.prevP99LatencyMs ?? 0;
+
+    return [
+      { label: 'Total', value: formatNum(total), trend: trend(total, prevTotal) },
+      { label: 'Err%', value: formatPct(errorRate), trend: trend(errorRate, prevErrorRate), upIsBad: true },
+      { label: 'Avg', value: formatMs(avgMs), trend: trend(avgMs, prevAvgMs), upIsBad: true },
+      { label: 'P99', value: formatMs(p99), trend: trend(p99, prevP99), upIsBad: true },
+    ];
+  }, [stats]);
+
+  if (metrics.length === 0) return null;
+
+  return (
+    <div className={styles.kpis}>
+      {metrics.map((m) => {
+        const arrowClass = m.trend === 'flat'
+          ? styles.flat
+          : (m.trend === 'up') === m.upIsBad
+            ? styles.bad
+            : styles.good;
+
+        return (
+          <div key={m.label} className={styles.metric}>
+            <span className={styles.label}>{m.label}</span>
+            <span className={styles.value}>{m.value}</span>
+            <span className={`${styles.arrow} ${arrowClass}`}>{trendArrow(m.trend)}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}