Function ScoreRing

src/webview/render.ts:74–88

({ score, color, size }: { score: number; color: string; size: number })

}

export function ScoreRing({ score, color, size }: { score: number; color: string; size: number }) {
  const r = (size - 6) / 2;
  const c = Math.PI * 2 * r;
  const offset = c - (score / 100) * c;
  const fontSize = size > 80 ? 22 : size > 60 ? 20 : 14;
  return html`
    <svg class="score-ring" width=${size} height=${size} viewBox=${'0 0 ' + size + ' ' + size}>
      <circle cx=${size / 2} cy=${size / 2} r=${r} fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="5"/>
      <circle cx=${size / 2} cy=${size / 2} r=${r} fill="none" stroke=${color} stroke-width="5"
        stroke-dasharray=${c} stroke-dashoffset=${offset} stroke-linecap="round"
        transform=${'rotate(-90 ' + size / 2 + ' ' + size / 2 + ')'}/>
      <text x=${size / 2} y=${size / 2} text-anchor="middle" dominant-baseline="central"
        fill=${color} font-size=${fontSize} font-weight="700">${score}</text>
    </svg>`;
}

export function PctBadge({ pct, label }: { pct: number; label: string }) {
  if (pct === 0) return html`<span class="trend-badge trend-stable">${label} 0%</span>`;