Skip to content

feat(quality): Quality score badge on every artifact (inject-quality-badge.py)#20

Draft
ramsani wants to merge 6 commits into
mainfrom
feature/quality-badge
Draft

feat(quality): Quality score badge on every artifact (inject-quality-badge.py)#20
ramsani wants to merge 6 commits into
mainfrom
feature/quality-badge

Conversation

@ramsani
Copy link
Copy Markdown
Owner

@ramsani ramsani commented May 16, 2026

feat(quality): Quality Score Badge on Every Generated Artifact

What

Implements Issue #14 — Quality Score Badge on every generated artifact.

New file: scripts/inject-quality-badge.py

Injects a quality score badge into an HTML artifact's body. Badge design:

  • Score pill (e.g., 92/100 ✓) with color-coded tier
  • Tier colors: green (90+), blue (75-89), yellow (60-74), red (<60)
  • Shows checks passed count (e.g., 11/13 checks passed)
  • Accessible: aria-label, WCAG AA color contrast, dark mode compatible
  • CSS injected inline so it works as standalone HTML without external styles

Modified: scripts/deliver-artifact.py

Added --badge flag that calls inject-quality-badge.py after artifact approval.

New test: tests/test_quality_badge.py

  • test_badge_90(): Score 90+ shows green .quality-passed badge
  • test_badge_78(): Score 75-89 shows blue .quality-ok badge
  • test_badge_idempotent(): Badge not injected twice on repeated calls

Why

The deliver-artifact.py script computes a quality score (0-100) but the score was invisible to stakeholders receiving an artifact. The badge:

  1. Trust signal: User sees at a glance the artifact passed the quality gate
  2. Accountability: Contributors see how their patterns perform
  3. Comparability: Multiple artifacts compared by score without running audit

Acceptance Criteria (from #14)

  • Every artifact passed by deliver-artifact.py --badge renders a quality badge in its HTML header
  • Badge shows score (0-100), pass/fail status, and check count
  • Badge color follows score tiers (green 90+, blue 75-89, yellow 60-74, red <60)
  • Badge is accessible: has aria-label, sufficient color contrast
  • Badge renders correctly in both light and dark mode
  • audit-artifact.py --json output unchanged (backward compatible)
  • Badge injection is idempotent (repeated calls don't add multiple badges)
  • Tests validate all three scenarios

Testing

# Test badge injection
python scripts/inject-quality-badge.py --help
python scripts/inject-quality-badge.py /tmp/test.html --score 92 --checks-passed 11 --checks-total 13

# Test deliver-artifact integration
python scripts/deliver-artifact.py --help | grep badge

# Run tests
python tests/test_quality_badge.py

# Verify badge in artifact
grep 'quality-badge' /tmp/test.html
# Expected: quality-badge-header, quality-badge quality-passed

Closes #14

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

🖼️ Artifact Gallery: Visual showcase of 5-6 real generated artifacts in README

1 participant