Score breakdown
A score out of 100 whose gauge is split by what goes into it, with the weakest part flagged and a fix to try.
A single score out of 100, with a half-circle gauge split into one segment per factor, each
sized by its weight and filled by the points it earned. The rows under it say what each earned
and why; the weakest factor is flagged in words, and an improvable row offers Improve, which
asks the agent (onImprove) for a proposal you can Apply to lift that factor's points — and the
whole score with it.
Usage
<!-- include core.css + score-breakdown.css + score-breakdown.js -->
<div class="card" data-c="score-breakdown">
<div class="sbx panel">
<div class="sbx-top">
<div class="sbx-g" role="meter" aria-label="Quality score" aria-valuemin="0" aria-valuemax="100">
<svg viewBox="0 0 200 108" aria-hidden="true"></svg>
<div class="sbx-v"><b class="num">0</b><span class="muted">of 100</span></div>
</div>
<div class="sbx-s"><b>Support agent quality</b><span class="sbx-band"><span class="muted sbx-bw">Scoring</span></span></div>
</div>
<div class="sbx-list"></div>
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
factors | ScoreFactor[] | The parts of the score; their weights add up to 100. |
title | string | The gauge label and heading. Defaults to "Quality score". |
previous | number | Last period's score, for the change shown beside the band word. |
since | string | What the change is measured against. Defaults to "since last week". |
open / defaultOpen | string[] | The open rows, by key (controlled / initial). |
onOpenChange | (open: string[]) => void | Fires when a row opens or closes. |
onImprove | (factor) => ScoreProposal | Promise<…> | Called by Improve; while it waits the row says the agent is looking. |
onApply | (factor, proposal) => void | Called by Apply; update the factor's earned and note. |
improvingLabel | string | What the row says while the agent works. Defaults to "Looking into it". |
factor.weight / factor.earned | number | The points a factor can earn and did earn. |
factor.note | string | The agent's one-line note, like "Median reply 6.4s, target under 4s". |
factor.improvable | boolean | Adds an Improve button to the open row. |
factor.detail | string | A line shown first in the open row, like what was changed. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The gauge
segments and the row swatches use the chart palette (--dm-c1…--dm-c6); the band chip, the Weakest
flag and the proposal card tint from the theme tokens (--dm-ok, --dm-warn, --dm-surface,
--dm-line), so the breakdown reads on either background. In Soft the rows and buttons are rounder.