Add grades

api/openapi.yaml

@@ -297,11 +297,17 @@ components:
       type: object
       required:
         - dns_score
+        - dns_grade
         - authentication_score
+        - authentication_grade
         - spam_score
+        - spam_grade
         - blacklist_score
-        - content_score
+        - blacklist_grade
         - header_score
+        - header_grade
+        - content_score
+        - content_grade
       properties:
         dns_score:
           type: integer
@@ -309,36 +315,66 @@ components:
           maximum: 100
           description: DNS records score (in percentage)
           example: 42
+        dns_grade:
+          type: string
+          enum: [A+, A, B, C, D, E, F]
+          description: Letter grade representation of the score (A+ is best, F is worst)
+          example: "A"
         authentication_score:
           type: integer
           minimum: 0
           maximum: 100
           description: SPF/DKIM/DMARC score (in percentage)
           example: 28
+        authentication_grade:
+          type: string
+          enum: [A+, A, B, C, D, E, F]
+          description: Letter grade representation of the score (A+ is best, F is worst)
+          example: "A"
         spam_score:
           type: integer
           minimum: 0
           maximum: 100
           description: SpamAssassin score (in percentage)
           example: 15
+        spam_grade:
+          type: string
+          enum: [A+, A, B, C, D, E, F]
+          description: Letter grade representation of the score (A+ is best, F is worst)
+          example: "A"
         blacklist_score:
           type: integer
           minimum: 0
           maximum: 100
           description: Blacklist check score (in percentage)
           example: 20
-        content_score:
-          type: integer
-          minimum: 0
-          maximum: 100
-          description: Content quality score (in percentage)
-          example: 18
+        blacklist_grade:
+          type: string
+          enum: [A+, A, B, C, D, E, F]
+          description: Letter grade representation of the score (A+ is best, F is worst)
+          example: "A"
         header_score:
           type: integer
           minimum: 0
           maximum: 100
           description: Header quality score (in percentage)
           example: 9
+        header_grade:
+          type: string
+          enum: [A+, A, B, C, D, E, F]
+          description: Letter grade representation of the score (A+ is best, F is worst)
+          example: "A"
+        content_score:
+          type: integer
+          minimum: 0
+          maximum: 100
+          description: Content quality score (in percentage)
+          example: 18
+        content_grade:
+          type: string
+          enum: [A+, A, B, C, D, E, F]
+          description: Letter grade representation of the score (A+ is best, F is worst)
+          example: "A"
 
     ContentAnalysis:
       type: object

pkg/analyzer/authentication.go

@@ -463,9 +463,9 @@ func textprotoCanonical(s string) string {
 
 // CalculateAuthenticationScore calculates the authentication score from auth results
 // Returns a score from 0-100 where higher is better
-func (a *AuthenticationAnalyzer) CalculateAuthenticationScore(results *api.AuthenticationResults) int {
+func (a *AuthenticationAnalyzer) CalculateAuthenticationScore(results *api.AuthenticationResults) (int, string) {
 	if results == nil {
-		return 0
+		return 0, ""
 	}
 
 	score := 0
@@ -530,5 +530,5 @@ func (a *AuthenticationAnalyzer) CalculateAuthenticationScore(results *api.Authe
 		score = 100
 	}
 
-	return score
+	return score, ScoreToGrade(score)
 }

pkg/analyzer/authentication_test.go

@@ -322,7 +322,7 @@ func TestGetAuthenticationScore(t *testing.T) {
 
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
-			score := scorer.CalculateAuthenticationScore(tt.results)
+			score, _ := scorer.CalculateAuthenticationScore(tt.results)
 
 			if score != tt.expectedScore {
 				t.Errorf("Score = %v, want %v", score, tt.expectedScore)

pkg/analyzer/content.go

@@ -726,9 +726,9 @@ func (c *ContentAnalyzer) GenerateContentAnalysis(results *ContentResults) *api.
 }
 
 // CalculateContentScore calculates the content score (0-20 points)
-func (c *ContentAnalyzer) CalculateContentScore(results *ContentResults) int {
+func (c *ContentAnalyzer) CalculateContentScore(results *ContentResults) (int, string) {
 	if results == nil {
-		return 0
+		return 0, ""
 	}
 
 	var score int = 10
@@ -819,5 +819,5 @@ func (c *ContentAnalyzer) CalculateContentScore(results *ContentResults) int {
 		score = 100
 	}
 
-	return score
+	return score, ScoreToGrade(score)
 }

pkg/analyzer/dns.go

@@ -444,9 +444,9 @@ func (d *DNSAnalyzer) validateBIMI(record string) bool {
 
 // CalculateDNSScore calculates the DNS score from records results
 // Returns a score from 0-100 where higher is better
-func (d *DNSAnalyzer) CalculateDNSScore(results *api.DNSResults) int {
+func (d *DNSAnalyzer) CalculateDNSScore(results *api.DNSResults) (int, string) {
 	if results == nil {
-		return 0
+		return 0, ""
 	}
 
 	score := 0
@@ -525,7 +525,7 @@ func (d *DNSAnalyzer) CalculateDNSScore(results *api.DNSResults) int {
 	// BIMI is optional but indicates advanced email branding
 	if results.BimiRecord != nil && results.BimiRecord.Valid {
 		if score >= 100 {
-			return 100
+			return 100, "A+"
 		}
 	}
 
@@ -539,5 +539,5 @@ func (d *DNSAnalyzer) CalculateDNSScore(results *api.DNSResults) int {
 		score = 0
 	}
 
-	return score
+	return score, ScoreToGrade(score)
 }

pkg/analyzer/headers.go

@@ -37,12 +37,13 @@ func NewHeaderAnalyzer() *HeaderAnalyzer {
 }
 
 // CalculateHeaderScore evaluates email structural quality from header analysis
-func (h *HeaderAnalyzer) CalculateHeaderScore(analysis *api.HeaderAnalysis) int {
+func (h *HeaderAnalyzer) CalculateHeaderScore(analysis *api.HeaderAnalysis) (int, rune) {
 	if analysis == nil || analysis.Headers == nil {
-		return 0
+		return 0, ' '
 	}
 
 	score := 0
+	maxGrade := 6
 	headers := *analysis.Headers
 
 	// Check required headers (RFC 5322) - 40 points
@@ -60,6 +61,7 @@ func (h *HeaderAnalyzer) CalculateHeaderScore(analysis *api.HeaderAnalysis) int
 		score += 40
 	} else {
 		score += int(40 * (float32(presentRequired) / float32(requiredCount)))
+		maxGrade = 1
 	}
 
 	// Check recommended headers (30 points)
@@ -80,9 +82,15 @@ func (h *HeaderAnalyzer) CalculateHeaderScore(analysis *api.HeaderAnalysis) int
 	}
 	score += presentRecommended * 30 / recommendedCount
 
+	if presentRecommended < recommendedCount {
+		maxGrade -= 1
+	}
+
 	// Check for proper MIME structure (20 points)
 	if analysis.HasMimeStructure != nil && *analysis.HasMimeStructure {
 		score += 20
+	} else {
+		maxGrade -= 1
 	}
 
 	// Check Message-ID format (10 points)
@@ -90,15 +98,20 @@ func (h *HeaderAnalyzer) CalculateHeaderScore(analysis *api.HeaderAnalysis) int
 		// If Valid is set and true, award points
 		if check.Valid != nil && *check.Valid {
 			score += 10
+		} else {
+			maxGrade -= 1
 		}
+	} else {
+		maxGrade -= 1
 	}
 
 	// Ensure score doesn't exceed 100
 	if score > 100 {
 		score = 100
 	}
+	grade := 'A' + max(6-maxGrade, 0)
 
-	return score
+	return score, rune(grade)
 }
 
 // isValidMessageID checks if a Message-ID has proper format

pkg/analyzer/headers_test.go

@@ -109,7 +109,7 @@ func TestCalculateHeaderScore(t *testing.T) {
 		t.Run(tt.name, func(t *testing.T) {
 			// Generate header analysis first
 			analysis := analyzer.GenerateHeaderAnalysis(tt.email)
-			score := analyzer.CalculateHeaderScore(analysis)
+			score, _ := analyzer.CalculateHeaderScore(analysis)
 			if score < tt.minScore || score > tt.maxScore {
 				t.Errorf("CalculateHeaderScore() = %v, want between %v and %v", score, tt.minScore, tt.maxScore)
 			}

pkg/analyzer/rbl.go

@@ -240,13 +240,14 @@ func (r *RBLChecker) reverseIP(ipStr string) string {
 }
 
 // CalculateRBLScore calculates the blacklist contribution to deliverability
-func (r *RBLChecker) CalculateRBLScore(results *RBLResults) int {
+func (r *RBLChecker) CalculateRBLScore(results *RBLResults) (int, string) {
 	if results == nil || len(results.IPsChecked) == 0 {
 		// No IPs to check, give benefit of doubt
-		return 100
+		return 100, ""
 	}
 
-	return 100 - results.ListedCount*100/len(r.RBLs)
+	percentage := 100 - results.ListedCount*100/len(r.RBLs)
+	return percentage, ScoreToGrade(percentage)
 }
 
 // GetUniqueListedIPs returns a list of unique IPs that are listed on at least one RBL

pkg/analyzer/rbl_test.go

@@ -326,7 +326,7 @@ func TestGetBlacklistScore(t *testing.T) {
 
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
-			score := checker.CalculateRBLScore(tt.results)
+			score, _ := checker.CalculateRBLScore(tt.results)
 			if score != tt.expectedScore {
 				t.Errorf("GetBlacklistScore() = %v, want %v", score, tt.expectedScore)
 			}

pkg/analyzer/report.go

@@ -96,42 +96,54 @@ func (r *ReportGenerator) GenerateReport(testID uuid.UUID, results *AnalysisResu
 
 	// Calculate scores directly from analyzers (no more checks array)
 	dnsScore := 0
+	var dnsGrade string
 	if results.DNS != nil {
-		dnsScore = r.dnsAnalyzer.CalculateDNSScore(results.DNS)
+		dnsScore, dnsGrade = r.dnsAnalyzer.CalculateDNSScore(results.DNS)
 	}
 
 	authScore := 0
+	var authGrade string
 	if results.Authentication != nil {
-		authScore = r.authAnalyzer.CalculateAuthenticationScore(results.Authentication)
+		authScore, authGrade = r.authAnalyzer.CalculateAuthenticationScore(results.Authentication)
 	}
 
 	contentScore := 0
+	var contentGrade string
 	if results.Content != nil {
-		contentScore = r.contentAnalyzer.CalculateContentScore(results.Content)
+		contentScore, contentGrade = r.contentAnalyzer.CalculateContentScore(results.Content)
 	}
 
 	headerScore := 0
+	var headerGrade rune
 	if results.Headers != nil {
-		headerScore = r.headerAnalyzer.CalculateHeaderScore(results.Headers)
+		headerScore, headerGrade = r.headerAnalyzer.CalculateHeaderScore(results.Headers)
 	}
 
 	blacklistScore := 0
+	var blacklistGrade string
 	if results.RBL != nil {
-		blacklistScore = r.rblChecker.CalculateRBLScore(results.RBL)
+		blacklistScore, blacklistGrade = r.rblChecker.CalculateRBLScore(results.RBL)
 	}
 
 	spamScore := 0
+	var spamGrade string
 	if results.SpamAssassin != nil {
-		spamScore = r.spamAnalyzer.CalculateSpamAssassinScore(results.SpamAssassin)
+		spamScore, spamGrade = r.spamAnalyzer.CalculateSpamAssassinScore(results.SpamAssassin)
 	}
 
 	report.Summary = &api.ScoreSummary{
 		DnsScore:            dnsScore,
+		DnsGrade:            api.ScoreSummaryDnsGrade(dnsGrade),
 		AuthenticationScore: authScore,
+		AuthenticationGrade: api.ScoreSummaryAuthenticationGrade(authGrade),
 		BlacklistScore:      blacklistScore,
+		BlacklistGrade:      api.ScoreSummaryBlacklistGrade(blacklistGrade),
 		ContentScore:        contentScore,
+		ContentGrade:        api.ScoreSummaryContentGrade(contentGrade),
 		HeaderScore:         headerScore,
+		HeaderGrade:         api.ScoreSummaryHeaderGrade(headerGrade),
 		SpamScore:           spamScore,
+		SpamGrade:           api.ScoreSummarySpamGrade(spamGrade),
 	}
 
 	// Add authentication results
@@ -187,6 +199,41 @@ func (r *ReportGenerator) GenerateReport(testID uuid.UUID, results *AnalysisResu
 	}
 
 	report.Grade = ScoreToReportGrade(report.Score)
+	categoryGrades := []string{
+		string(report.Summary.DnsGrade),
+		string(report.Summary.AuthenticationGrade),
+		string(report.Summary.BlacklistGrade),
+		string(report.Summary.ContentGrade),
+		string(report.Summary.HeaderGrade),
+		string(report.Summary.SpamGrade),
+	}
+	if report.Score >= 100 {
+		hasLessThanA := false
+
+		for _, grade := range categoryGrades {
+			if len(grade) < 1 || grade[0] != 'A' {
+				hasLessThanA = true
+			}
+		}
+
+		if !hasLessThanA {
+			report.Grade = "A+"
+		}
+	} else {
+		var minusGrade byte = 0
+		for _, grade := range categoryGrades {
+			if len(grade) == 0 {
+				minusGrade = 255
+				break
+			} else if grade[0]-'A' > minusGrade {
+				minusGrade = grade[0] - 'A'
+			}
+		}
+
+		if minusGrade < 255 {
+			report.Grade = api.ReportGrade(string([]byte{'A' + minusGrade}))
+		}
+	}
 
 	return report
 }

pkg/analyzer/scoring.go

@@ -28,9 +28,9 @@ import (
 // ScoreToGrade converts a percentage score (0-100) to a letter grade
 func ScoreToGrade(score int) string {
 	switch {
-	case score >= 97:
+	case score > 100:
 		return "A+"
-	case score >= 93:
+	case score > 95:
 		return "A"
 	case score >= 85:
 		return "B"

pkg/analyzer/spamassassin.go

@@ -193,9 +193,9 @@ func (a *SpamAssassinAnalyzer) parseSpamReport(report string, result *api.SpamAs
 }
 
 // CalculateSpamAssassinScore calculates the SpamAssassin contribution to deliverability
-func (a *SpamAssassinAnalyzer) CalculateSpamAssassinScore(result *api.SpamAssassinResult) int {
+func (a *SpamAssassinAnalyzer) CalculateSpamAssassinScore(result *api.SpamAssassinResult) (int, string) {
 	if result == nil {
-		return 100 // No spam scan results, assume good
+		return 100, "" // No spam scan results, assume good
 	}
 
 	// SpamAssassin score typically ranges from -10 to +20
@@ -206,12 +206,15 @@ func (a *SpamAssassinAnalyzer) CalculateSpamAssassinScore(result *api.SpamAssass
 	score := result.Score
 
 	// Convert SpamAssassin score to 0-100 scale (inverted - lower SA score is better)
-	if score <= 0 {
-		return 100 // Perfect score for ham
+	if score < 0 {
+		return 100, "A+" // Perfect score for ham
+	} else if score == 0 {
+		return 100, "A" // Perfect score for ham
 	} else if score >= result.RequiredScore {
-		return 0 // Failed spam test
+		return 0, "F" // Failed spam test
 	} else {
 		// Linear scale between 0 and required threshold
-		return 100 - int(math.Round(float64(score*100/result.RequiredScore)))
+		percentage := 100 - int(math.Round(float64(score*100/result.RequiredScore)))
+		return percentage, ScoreToGrade(percentage - 15)
 	}
 }

web/src/lib/components/AuthenticationCard.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
     import type { Authentication, DNSResults, ReportSummary } from "$lib/api/types.gen";
+    import { getScoreColorClass } from "$lib/score";
+    import GradeDisplay from "./GradeDisplay.svelte";
 
     interface Props {
         authentication: Authentication;
+        authenticationGrade?: string;
         authenticationScore?: number;
         dnsResults?: DNSResults;
     }
 
-    let { authentication, authenticationScore, dnsResults }: Props = $props();
+    let { authentication, authenticationGrade, authenticationScore, dnsResults }: Props = $props();
 
     function getAuthResultClass(result: string): string {
         switch (result) {
@@ -57,11 +60,16 @@
                 <i class="bi bi-shield-check me-2"></i>
                 Authentication
             </span>
-            {#if authenticationScore !== undefined}
-                <span class="badge bg-secondary">
-                    {authenticationScore}%
-                </span>
-            {/if}
+            <span>
+                {#if authenticationScore !== undefined}
+                    <span class="badge bg-{getScoreColorClass(authenticationScore)}">
+                        {authenticationScore}%
+                    </span>
+                {/if}
+                {#if authenticationGrade !== undefined}
+                    <GradeDisplay grade={authenticationGrade} size="small" />
+                {/if}
+            </span>
         </h4>
     </div>
     <div class="card-body">

web/src/lib/components/BlacklistCard.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
     import type { RBLCheck } from "$lib/api/types.gen";
+    import { getScoreColorClass } from "$lib/score";
+    import GradeDisplay from "./GradeDisplay.svelte";
 
     interface Props {
         blacklists: Record<string, RBLCheck[]>;
+        blacklistGrade?: string;
         blacklistScore?: number;
     }
 
-    let { blacklists, blacklistScore }: Props = $props();
+    let { blacklists, blacklistGrade, blacklistScore }: Props = $props();
 </script>
 
 <div class="card shadow-sm">
@@ -16,11 +19,16 @@
                 <i class="bi bi-shield-exclamation me-2"></i>
                 Blacklist Checks
             </span>
-            {#if blacklistScore !== undefined}
-                <span class="badge bg-secondary">
-                    {blacklistScore}%
-                </span>
-            {/if}
+            <span>
+                {#if blacklistScore !== undefined}
+                    <span class="badge bg-{getScoreColorClass(blacklistScore)}">
+                        {blacklistScore}%
+                    </span>
+                {/if}
+                {#if blacklistGrade !== undefined}
+                    <GradeDisplay grade={blacklistGrade} size="small" />
+                {/if}
+            </span>
         </h4>
     </div>
     <div class="card-body">

web/src/lib/components/ContentAnalysisCard.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
     import type { ContentAnalysis } from "$lib/api/types.gen";
+    import { getScoreColorClass } from "$lib/score";
+    import GradeDisplay from "./GradeDisplay.svelte";
 
     interface Props {
         contentAnalysis: ContentAnalysis;
+        contentGrade?: string;
         contentScore?: number;
     }
 
-    let { contentAnalysis, contentScore }: Props = $props();
+    let { contentAnalysis, contentGrade, contentScore }: Props = $props();
 </script>
 
 <div class="card shadow-sm">
@@ -16,11 +19,16 @@
                 <i class="bi bi-file-text me-2"></i>
                 Content Analysis
             </span>
-            {#if contentScore !== undefined}
-                <span class="badge bg-secondary">
-                    {contentScore}%
-                </span>
-            {/if}
+            <span>
+                {#if contentScore !== undefined}
+                    <span class="badge bg-{getScoreColorClass(contentScore)}">
+                        {contentScore}%
+                    </span>
+                {/if}
+                {#if contentGrade !== undefined}
+                    <GradeDisplay grade={contentGrade} size="small" />
+                {/if}
+            </span>
         </h4>
     </div>
     <div class="card-body">

web/src/lib/components/DnsRecordsCard.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
     import type { DNSResults } from "$lib/api/types.gen";
+    import { getScoreColorClass } from "$lib/score";
+    import GradeDisplay from "./GradeDisplay.svelte";
 
     interface Props {
         dnsResults?: DNSResults;
+        dnsGrade?: string;
         dnsScore?: number;
     }
 
-    let { dnsResults, dnsScore }: Props = $props();
+    let { dnsResults, dnsGrade, dnsScore }: Props = $props();
 </script>
 
 <div class="card shadow-sm">
@@ -16,11 +19,16 @@
                 <i class="bi bi-diagram-3 me-2"></i>
                 DNS Records
             </span>
-            {#if dnsScore !== undefined}
-                <span class="badge bg-secondary">
-                    {dnsScore}%
-                </span>
-            {/if}
+            <span>
+                {#if dnsScore !== undefined}
+                    <span class="badge bg-{getScoreColorClass(dnsScore)}">
+                        {dnsScore}%
+                    </span>
+                {/if}
+                {#if dnsGrade !== undefined}
+                    <GradeDisplay grade={dnsGrade} size="small" />
+                {/if}
+            </span>
         </h4>
     </div>
     <div class="card-body">

web/src/lib/components/GradeDisplay.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    interface Props {
+        grade?: string;
+        score: number;
+        size?: "small" | "medium" | "large";
+    }
+
+    let { grade, score, size = "medium" }: Props = $props();
+
+    function getGradeColor(grade?: string): string {
+        if (!grade) return "#6b7280"; // Gray for no grade
+
+        const baseLetter = grade.charAt(0).toUpperCase();
+        const modifier = grade.length > 1 ? grade.charAt(1) : "";
+
+        // Gradient from green (A+) to red (F)
+        switch (baseLetter) {
+            case "A":
+                if (modifier === "+") return "#22c55e"; // Bright green
+                if (modifier === "-") return "#16a34a"; // Green
+                return "#22c55e"; // Green
+            case "B":
+                if (modifier === "+") return "#84cc16"; // Lime
+                if (modifier === "-") return "#65a30d"; // Darker lime
+                return "#84cc16"; // Lime
+            case "C":
+                if (modifier === "+") return "#eab308"; // Yellow
+                if (modifier === "-") return "#ca8a04"; // Darker yellow
+                return "#eab308"; // Yellow
+            case "D":
+                if (modifier === "+") return "#f97316"; // Orange
+                if (modifier === "-") return "#ea580c"; // Darker orange
+                return "#f97316"; // Orange
+            case "F":
+                return "#dc2626"; // Red
+            default:
+                return "#6b7280"; // Gray
+        }
+    }
+
+    function getSizeClass(size: "small" | "medium" | "large"): string {
+        if (size === "small") return "fs-4";
+        if (size === "large") return "display-1";
+        return "fs-2";
+    }
+</script>
+
+<strong
+    class={getSizeClass(size)}
+    style="color: {getGradeColor(grade)}; font-weight: 700;"
+>
+    {#if grade}
+        {grade}
+    {:else}
+        {score}%
+    {/if}
+</strong>
+
+<style>
+    strong {
+        transition: color 0.3s ease;
+    }
+</style>

web/src/lib/components/HeaderAnalysisCard.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
     import type { HeaderAnalysis } from "$lib/api/types.gen";
+    import { getScoreColorClass } from "$lib/score";
+    import GradeDisplay from "./GradeDisplay.svelte";
 
     interface Props {
         headerAnalysis: HeaderAnalysis;
+        headerGrade?: string;
         headerScore?: number;
     }
 
-    let { headerAnalysis, headerScore }: Props = $props();
+    let { headerAnalysis, headerGrade, headerScore }: Props = $props();
 </script>
 
 <div class="card shadow-sm">
@@ -16,11 +19,16 @@
                 <i class="bi bi-list-ul me-2"></i>
                 Header Analysis
             </span>
-            {#if headerScore !== undefined}
-                <span class="badge bg-secondary">
-                    {headerScore}%
-                </span>
-            {/if}
+            <span>
+                {#if headerScore !== undefined}
+                    <span class="badge bg-{getScoreColorClass(headerScore)}">
+                        {headerScore}%
+                    </span>
+                {/if}
+                {#if headerGrade !== undefined}
+                    <GradeDisplay grade={headerGrade} size="small" />
+                {/if}
+            </span>
         </h4>
     </div>
     <div class="card-body">

web/src/lib/components/ScoreCard.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { ScoreSummary } from "$lib/api/types.gen";
+    import GradeDisplay from "./GradeDisplay.svelte";
 
     interface Props {
         grade: string;
@@ -9,14 +10,6 @@
 
     let { grade, score, summary }: Props = $props();
 
-    function getScoreClass(score: number): string {
-        if (score >= 90) return "score-excellent";
-        if (score >= 70) return "score-good";
-        if (score >= 50) return "score-warning";
-        if (score >= 30) return "score-poor";
-        return "score-bad";
-    }
-
     function getScoreLabel(score: number): string {
         if (score >= 90) return "Excellent";
         if (score >= 70) return "Good";
@@ -28,9 +21,9 @@
 
 <div class="card shadow-lg bg-white">
     <div class="card-body p-5 text-center">
-        <h1 class="display-1 fw-bold mb-3 {getScoreClass(score)}">
-            {grade}
-        </h1>
+        <div class="mb-3">
+            <GradeDisplay {grade} {score} size="large" />
+        </div>
         <h3 class="fw-bold mb-2">{getScoreLabel(score)}</h3>
         <p class="text-muted mb-4">Overall Deliverability Score</p>
 
@@ -38,84 +31,37 @@
             <div class="row g-3 text-start">
                 <div class="col-md-6 col-lg">
                     <div class="p-2 bg-light rounded text-center">
-                        <strong
-                            class="fs-2"
-                            class:text-success={summary.dns_score >= 100}
-                            class:text-warning={summary.dns_score < 100 &&
-                                summary.dns_score >= 50}
-                            class:text-danger={summary.dns_score < 50}
-                        >
-                            {summary.dns_score}%
-                        </strong>
+                        <GradeDisplay grade={summary.dns_grade} score={summary.dns_score} />
                         <small class="text-muted d-block">DNS</small>
                     </div>
                 </div>
                 <div class="col-md-6 col-lg">
                     <div class="p-2 bg-light rounded text-center">
-                        <strong
-                            class="fs-2"
-                            class:text-success={summary.authentication_score >= 100}
-                            class:text-warning={summary.authentication_score < 100 &&
-                                summary.authentication_score >= 50}
-                            class:text-danger={summary.authentication_score < 50}
-                        >
-                            {summary.authentication_score}%
-                        </strong>
+                        <GradeDisplay grade={summary.authentication_grade} score={summary.authentication_score} />
                         <small class="text-muted d-block">Authentication</small>
                     </div>
                 </div>
                 <div class="col-md-6 col-lg">
                     <div class="p-2 bg-light rounded text-center">
-                        <strong
-                            class="fs-2"
-                            class:text-success={summary.blacklist_score >= 100}
-                            class:text-warning={summary.blacklist_score < 100 &&
-                                summary.blacklist_score >= 50}
-                            class:text-danger={summary.blacklist_score < 50}
-                        >
-                            {summary.blacklist_score}%
-                        </strong>
+                        <GradeDisplay grade={summary.blacklist_grade} score={summary.blacklist_score} />
                         <small class="text-muted d-block">Blacklists</small>
                     </div>
                 </div>
                 <div class="col-md-6 col-lg">
                     <div class="p-2 bg-light rounded text-center">
-                        <strong
-                            class="fs-2"
-                            class:text-success={summary.header_score >= 100}
-                            class:text-warning={summary.header_score < 100 &&
-                                summary.header_score >= 50}
-                            class:text-danger={summary.header_score < 50}
-                        >
-                            {summary.header_score}%
-                        </strong>
+                        <GradeDisplay grade={summary.header_grade} score={summary.header_score} />
                         <small class="text-muted d-block">Headers</small>
                     </div>
                 </div>
                 <div class="col-md-6 col-lg">
                     <div class="p-2 bg-light rounded text-center">
-                        <strong
-                            class="fs-2"
-                            class:text-success={summary.spam_score >= 100}
-                            class:text-warning={summary.spam_score < 100 && summary.spam_score >= 50}
-                            class:text-danger={summary.spam_score < 50}
-                        >
-                            {summary.spam_score}%
-                        </strong>
+                        <GradeDisplay grade={summary.spam_grade} score={summary.spam_score} />
                         <small class="text-muted d-block">Spam Score</small>
                     </div>
                 </div>
                 <div class="col-md-6 col-lg">
                     <div class="p-2 bg-light rounded text-center">
-                        <strong
-                            class="fs-2"
-                            class:text-success={summary.content_score >= 100}
-                            class:text-warning={summary.content_score < 100 &&
-                                summary.content_score >= 50}
-                            class:text-danger={summary.content_score < 50}
-                        >
-                            {summary.content_score}%
-                        </strong>
+                        <GradeDisplay grade={summary.content_grade} score={summary.content_score} />
                         <small class="text-muted d-block">Content</small>
                     </div>
                 </div>

web/src/lib/components/SpamAssassinCard.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
     import type { SpamAssassinResult } from "$lib/api/types.gen";
+    import { getScoreColorClass } from "$lib/score";
+    import GradeDisplay from "./GradeDisplay.svelte";
 
     interface Props {
         spamassassin: SpamAssassinResult;
+        spamGrade: string;
         spamScore: number;
     }
 
-    let { spamassassin, spamScore }: Props = $props();
+    let { spamassassin, spamGrade, spamScore }: Props = $props();
 </script>
 
 <div class="card">
@@ -16,11 +19,16 @@
                 <i class="bi bi-bug me-2"></i>
                 SpamAssassin Analysis
             </span>
-            {#if spamScore !== undefined}
-                <span class="badge bg-secondary">
-                    {spamScore}%
-                </span>
-            {/if}
+            <span>
+                {#if spamScore !== undefined}
+                    <span class="badge bg-{getScoreColorClass(spamScore)}">
+                        {spamScore}%
+                    </span>
+                {/if}
+                {#if spamGrade !== undefined}
+                    <GradeDisplay grade={spamGrade} size="small" />
+                {/if}
+            </span>
         </h4>
     </div>
     <div class="card-body">

web/src/lib/score.ts

@@ -0,0 +1,5 @@
+export function getScoreColorClass(percentage: number): string {
+    if (percentage >= 85) return "success";
+    if (percentage >= 50) return "warning";
+    return "danger";
+}

web/src/routes/test/[test]/+page.svelte

@@ -81,12 +81,6 @@
         stopPolling();
     });
 
-    function getScoreColorClass(percentage: number): string {
-        if (percentage >= 80) return "text-success";
-        if (percentage >= 50) return "text-warning";
-        return "text-danger";
-    }
-
     async function handleReanalyze() {
         if (!testId || reanalyzing) return;
 
@@ -150,6 +144,7 @@
                     <div class="col-12">
                         <DnsRecordsCard
                             dnsResults={report.dns_results}
+                            dnsGrade={report.summary?.dns_grade}
                             dnsScore={report.summary?.dns_score}
                         />
                     </div>
@@ -162,6 +157,7 @@
                     <div class="col-12">
                         <AuthenticationCard
                             authentication={report.authentication}
+                            authenticationGrade={report.summary?.authentication_grade}
                             authenticationScore={report.summary?.authentication_score}
                             dnsResults={report.dns_results}
                         />
@@ -175,6 +171,7 @@
                     <div class="col-12">
                         <BlacklistCard
                             blacklists={report.blacklists}
+                            blacklistGrade={report.summary?.blacklist_grade}
                             blacklistScore={report.summary?.blacklist_score}
                         />
                     </div>
@@ -187,6 +184,7 @@
                     <div class="col-12">
                         <HeaderAnalysisCard
                             headerAnalysis={report.header_analysis}
+                            headerGrade={report.summary?.header_grade}
                             headerScore={report.summary?.header_score}
                         />
                     </div>
@@ -199,6 +197,7 @@
                     <div class="col-12">
                         <SpamAssassinCard
                             spamassassin={report.spamassassin}
+                            spamGrade={report.summary?.spam_grade}
                             spamScore={report.summary?.spam_score}
                         />
                     </div>
@@ -211,6 +210,7 @@
                     <div class="col-12">
                         <ContentAnalysisCard
                             contentAnalysis={report.content_analysis}
+                            contentGrade={report.summary?.content_grade}
                             contentScore={report.summary?.content_score}
                         />
                     </div>