What problem does it solve? Adding a new Prometheus metric to the agentbox dashboard requires touching four separate layers (BFF API route, type definitions, React Query options, i18n keys, and UI components), and missing any step or misusing PromQL patterns leads to broken charts, type errors, or inconsistent data. ## Core Features & Use Cases - Full-stack recipe: Step-by-step instructions covering the Next.js BFF route, TypeScript response types, queryOptions, i18n keys, and AdminMetricsSection integration. - Instant vs time series guidance: Decision table and code templates for stat cards (instant queries with increase()) versus charts (range queries with rate() or histogram_quantile()). - PromQL conventions: Enforced rate-window ladder, selector building cheatsheet (buildClusterMatcher vs buildSelector), and per-query error isolation with .catch(() => null). - Use Case: When asked to "add a bandwidth metric card", follow the recipe to create the envoy-bandwidth route, add MyMetricData types, wire queryOptions, add i18n strings, and render a StatCard, then verify with pnpm exec tsc --noEmit. ## Quick Start Add a new Prometheus stat card to the dashboard showing total requests over the selected time range, following the full-stack recipe from BFF route to UI component.
