feat(agent-platform): observability KPIs as quill MetricCards + clamp negative cost - #2840
Conversation
… negative cost Replace the hand-rolled KpiTile + DeltaChip + Sparkline in the observability KPI strip with quill-charts MetricCard. Each tile now shows the headline value with an embedded sparkline (hover a point to read that day's value), a built-in change pill (arrow + colour driven by goodDirection), and consistent theming — dropping the bespoke tile/chip/sparkline code. Failure rate gains a sparkline too (its daily series was already computed, just unused). Also clamps cost to >= 0, fixing the confusing "$-2.74" spend KPI: a negative `$ai_total_cost_usd` aggregate (an upstream cost-calc artifact) is no longer shown as a negative dollar value. MetricCard's formatValue floors the spend tile + sparkline, and formatSpendUsd (fleet rows) now returns "$0" for non-positive values instead of mis-bucketing them as "<$0.01". Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
React Doctor found no issues in the changed files. 🎉 Reviewed by React Doctor for commit |
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| <KpiCell> | ||
| <MetricCard | ||
| title={tileTitle("Failure rate · 7d")} | ||
| value={kpis.failureRate} | ||
| data={daily.failureRate} | ||
| labels={daily.labels} | ||
| theme={theme} | ||
| formatValue={pct} | ||
| change={ | ||
| deltas.failureRatePoints != null | ||
| ? { value: deltas.failureRatePoints } | ||
| : null | ||
| } | ||
| formatChange={ppDelta} | ||
| goodDirection="down" | ||
| sparklineHeight={28} | ||
| /> | ||
| </KpiCell> |
There was a problem hiding this comment.
KpiTile applied text-(--amber-11) to the headline whenever kpis.failureRate > 0, giving a persistent visual alert independent of trend direction. The new MetricCard's goodDirection="down" only colours the change pill (and only when a delta is available). The ToolTable in the same file still applies text-(--red-11) on non-zero error rates (line 262), so the "warn on any non-zero value" pattern appears intentional. If this signal matters for the KPI tile, MetricCard would need a custom wrapper or an alternative approach to replicate it.
2 participants
Replaces the hand-rolled observability KPI tiles with quill-charts
MetricCard— a "headline number with a graph behind it" — and fixes the confusing negative cost ($-2.74) along the way.KPI strip → MetricCard
KpiTile+DeltaChipand theSparklineimport; each of the 4 tiles (Spend / Sessions / Failure rate / p95) is now aMetricCard.goodDirection, label fromformatChange).daily.failureRateseries was already computed, just unused).tileTitlenode; connected-strip look kept via a smallKpiCellwrapper.Negative-cost fix
A negative
$ai_total_cost_usdaggregate (an upstream LLM-observability cost-calc artifact) was rendering as a literal$-2.74on the Spend KPI. Now clamped to ≥ 0:value={Math.max(0, spendUsd)}, sparkline clamped,formatValuefloors at 0.formatSpendUsd(fleet rows) returns$0for non-positive values instead of mis-bucketing them as<$0.01.Notes
text-4xl(vs the oldtext-[18px]) — bigger, dashboard-style numbers. Easy to dial back if too large in the 4-across strip.MetricCardin the app.🤖 Generated with Claude Code