Split DnsRecordsCard in several components

web/src/lib/components/BimiRecordDisplay.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+    import type { BIMIRecord } from "$lib/api/types.gen";
+
+    interface Props {
+        bimiRecord?: BIMIRecord;
+    }
+
+    let { bimiRecord }: Props = $props();
+</script>
+
+{#if bimiRecord}
+    <div class="card mb-4">
+        <div class="card-header d-flex justify-content-between align-items-center">
+            <h5 class="text-muted mb-0">
+                <i
+                    class="bi"
+                    class:bi-check-circle-fill={bimiRecord.valid}
+                    class:text-success={bimiRecord.valid}
+                    class:bi-x-circle-fill={!bimiRecord.valid}
+                    class:text-danger={!bimiRecord.valid}
+                ></i>
+                Brand Indicators for Message Identification
+            </h5>
+            <span class="badge bg-secondary">BIMI</span>
+        </div>
+        <div class="card-body">
+            <p class="card-text small text-muted mb-2">
+                BIMI allows your brand logo to be displayed next to your emails in supported mail
+                clients. Requires strong DMARC enforcement (quarantine or reject policy) and
+                optionally a Verified Mark Certificate (VMC).
+            </p>
+
+            <hr />
+
+            <div class="mb-2">
+                <strong>Selector:</strong> <code>{bimiRecord.selector}</code>
+                <strong class="ms-3">Domain:</strong> <code>{bimiRecord.domain}</code>
+            </div>
+            <div class="mb-2">
+                <strong>Status:</strong>
+                {#if bimiRecord.valid}
+                    <span class="badge bg-success">Valid</span>
+                {:else}
+                    <span class="badge bg-danger">Invalid</span>
+                {/if}
+            </div>
+            {#if bimiRecord.logo_url}
+                <div class="mb-2">
+                    <strong>Logo URL:</strong>
+                    <a href={bimiRecord.logo_url} target="_blank" rel="noopener noreferrer"
+                        >{bimiRecord.logo_url}</a
+                    >
+                </div>
+            {/if}
+            {#if bimiRecord.vmc_url}
+                <div class="mb-2">
+                    <strong>VMC URL:</strong>
+                    <a href={bimiRecord.vmc_url} target="_blank" rel="noopener noreferrer"
+                        >{bimiRecord.vmc_url}</a
+                    >
+                </div>
+            {/if}
+            {#if bimiRecord.record}
+                <div class="mb-2">
+                    <strong>Record:</strong><br />
+                    <code class="d-block mt-1 text-break">{bimiRecord.record}</code>
+                </div>
+            {/if}
+            {#if bimiRecord.error}
+                <div class="text-danger">
+                    <strong>Error:</strong>
+                    {bimiRecord.error}
+                </div>
+            {/if}
+        </div>
+    </div>
+{/if}

web/src/lib/components/DkimRecordsDisplay.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import type { DKIMRecord } from "$lib/api/types.gen";
+
+    interface Props {
+        dkimRecords?: DKIMRecord[];
+    }
+
+    let { dkimRecords }: Props = $props();
+
+    // Compute overall validity
+    const dkimIsValid = $derived(
+        dkimRecords?.reduce((acc, r) => acc && r.valid, true) ?? false
+    );
+</script>
+
+{#if dkimRecords && dkimRecords.length > 0}
+    <div class="card mb-4">
+        <div class="card-header d-flex justify-content-between align-items-center">
+            <h5 class="text-muted mb-0">
+                <i
+                    class="bi"
+                    class:bi-check-circle-fill={dkimIsValid}
+                    class:text-success={dkimIsValid}
+                    class:bi-x-circle-fill={!dkimIsValid}
+                    class:text-danger={!dkimIsValid}
+                ></i>
+                DomainKeys Identified Mail
+            </h5>
+            <span class="badge bg-secondary">DKIM</span>
+        </div>
+        <div class="card-body">
+            <p class="card-text small text-muted mb-0">DKIM cryptographically signs your emails, proving they haven't been tampered with in transit. Receiving servers verify this signature against your DNS records.</p>
+        </div>
+        <div class="list-group list-group-flush">
+            {#each dkimRecords as dkim}
+                <div class="list-group-item">
+                    <div class="mb-2">
+                        <strong>Selector:</strong> <code>{dkim.selector}</code>
+                        <strong class="ms-3">Domain:</strong> <code>{dkim.domain}</code>
+                    </div>
+                    <div class="mb-2">
+                        <strong>Status:</strong>
+                        {#if dkim.valid}
+                            <span class="badge bg-success">Valid</span>
+                        {:else}
+                            <span class="badge bg-danger">Invalid</span>
+                        {/if}
+                    </div>
+                    {#if dkim.record}
+                        <div class="mb-2">
+                            <strong>Record:</strong><br>
+                            <code class="d-block mt-1 text-break small text-truncate">{dkim.record}</code>
+                        </div>
+                    {/if}
+                    {#if dkim.error}
+                        <div class="text-danger">
+                            <strong>Error:</strong> {dkim.error}
+                        </div>
+                    {/if}
+                </div>
+            {/each}
+        </div>
+    </div>
+{/if}

web/src/lib/components/DmarcRecordDisplay.svelte

@@ -10,7 +10,7 @@
     // Helper function to determine policy strength
     const policyStrength = (policy: string | undefined): number => {
         const strength: Record<string, number> = { none: 0, quarantine: 1, reject: 2 };
-        return strength[policy || 'none'] || 0;
+        return strength[policy || "none"] || 0;
     };
 </script>
 
@@ -22,7 +22,8 @@
                     class="bi"
                     class:bi-check-circle-fill={dmarcRecord.valid && dmarcRecord.policy != "none"}
                     class:text-success={dmarcRecord.valid && dmarcRecord.policy != "none"}
-                    class:bi-arrow-up-circle-fill={dmarcRecord.valid && dmarcRecord.policy == "none"}
+                    class:bi-arrow-up-circle-fill={dmarcRecord.valid &&
+                        dmarcRecord.policy == "none"}
                     class:text-warning={dmarcRecord.valid && dmarcRecord.policy == "none"}
                     class:bi-x-circle-fill={!dmarcRecord.valid}
                     class:text-danger={!dmarcRecord.valid}
@@ -32,7 +33,13 @@
             <span class="badge bg-secondary">DMARC</span>
         </div>
         <div class="card-body">
-            <p class="card-text small text-muted mb-2">DMARC builds on SPF and DKIM by telling receiving servers what to do with emails that fail authentication checks. It also enables reporting so you can monitor your email security.</p>
+            <p class="card-text small text-muted mb-2">
+                DMARC builds on SPF and DKIM by telling receiving servers what to do with emails
+                that fail authentication checks. It also enables reporting so you can monitor your
+                email security.
+            </p>
+
+            <hr />
 
             <!-- Status -->
             <div class="mb-2">
@@ -48,32 +55,44 @@
             {#if dmarcRecord.policy}
                 <div class="mb-3">
                     <strong>Policy:</strong>
-                    <span class="badge {dmarcRecord.policy === 'reject' ? 'bg-success' : dmarcRecord.policy === 'quarantine' ? 'bg-warning' : 'bg-secondary'}">
+                    <span
+                        class="badge {dmarcRecord.policy === 'reject'
+                            ? 'bg-success'
+                            : dmarcRecord.policy === 'quarantine'
+                              ? 'bg-warning'
+                              : 'bg-secondary'}"
+                    >
                         {dmarcRecord.policy}
                     </span>
-                    {#if dmarcRecord.policy === 'reject'}
+                    {#if dmarcRecord.policy === "reject"}
                         <div class="alert alert-success mt-2 mb-0 small">
                             <i class="bi bi-shield-check me-1"></i>
-                            <strong>Maximum protection</strong> — emails failing DMARC checks are rejected. This provides the strongest defense against spoofing and phishing.
+                            <strong>Maximum protection</strong> — emails failing DMARC checks are rejected.
+                            This provides the strongest defense against spoofing and phishing.
                         </div>
-                    {:else if dmarcRecord.policy === 'quarantine'}
+                    {:else if dmarcRecord.policy === "quarantine"}
                         <div class="alert alert-info mt-2 mb-0 small">
                             <i class="bi bi-check-circle me-1"></i>
-                            <strong>Good protection</strong> — emails failing DMARC checks are quarantined (sent to spam). This is a safe middle ground.<br>
+                            <strong>Good protection</strong> — emails failing DMARC checks are
+                            quarantined (sent to spam). This is a safe middle ground.<br />
                             <i class="bi bi-arrow-up-circle me-1"></i>
-                            Once you've validated your configuration and ensured all legitimate mail passes, consider upgrading to <code>p=reject</code> for maximum protection.
+                            Once you've validated your configuration and ensured all legitimate mail
+                            passes, consider upgrading to <code>p=reject</code> for maximum protection.
                         </div>
-                    {:else if dmarcRecord.policy === 'none'}
+                    {:else if dmarcRecord.policy === "none"}
                         <div class="alert alert-warning mt-2 mb-0 small">
                             <i class="bi bi-exclamation-triangle me-1"></i>
-                            <strong>Monitoring only</strong> — emails failing DMARC are delivered normally. This is only recommended during initial setup.<br>
+                            <strong>Monitoring only</strong> — emails failing DMARC are delivered
+                            normally. This is only recommended during initial setup.<br />
                             <i class="bi bi-arrow-up-circle me-1"></i>
-                            After monitoring reports, upgrade to <code>p=quarantine</code> or <code>p=reject</code> to actively protect your domain.
+                            After monitoring reports, upgrade to <code>p=quarantine</code> or
+                            <code>p=reject</code> to actively protect your domain.
                         </div>
                     {:else}
                         <div class="alert alert-danger mt-2 mb-0 small">
                             <i class="bi bi-x-circle me-1"></i>
-                            <strong>Unknown policy</strong> — the policy value is not recognized. Valid options are: none, quarantine, or reject.
+                            <strong>Unknown policy</strong> — the policy value is not recognized. Valid
+                            options are: none, quarantine, or reject.
                         </div>
                     {/if}
                 </div>
@@ -85,18 +104,27 @@
                 {@const subStrength = policyStrength(dmarcRecord.subdomain_policy)}
                 <div class="mb-3">
                     <strong>Subdomain Policy:</strong>
-                    <span class="badge {dmarcRecord.subdomain_policy === 'reject' ? 'bg-success' : dmarcRecord.subdomain_policy === 'quarantine' ? 'bg-warning' : 'bg-secondary'}">
+                    <span
+                        class="badge {dmarcRecord.subdomain_policy === 'reject'
+                            ? 'bg-success'
+                            : dmarcRecord.subdomain_policy === 'quarantine'
+                              ? 'bg-warning'
+                              : 'bg-secondary'}"
+                    >
                         {dmarcRecord.subdomain_policy}
                     </span>
                     {#if subStrength >= mainStrength}
                         <div class="alert alert-success mt-2 mb-0 small">
                             <i class="bi bi-check-circle me-1"></i>
-                            <strong>Good configuration</strong> — subdomain policy is equal to or stricter than main policy.
+                            <strong>Good configuration</strong> — subdomain policy is equal to or stricter
+                            than main policy.
                         </div>
                     {:else}
                         <div class="alert alert-warning mt-2 mb-0 small">
                             <i class="bi bi-exclamation-triangle me-1"></i>
-                            <strong>Weaker subdomain protection</strong> — consider setting <code>sp={dmarcRecord.policy}</code> to match your main policy for consistent protection.
+                            <strong>Weaker subdomain protection</strong> — consider setting
+                            <code>sp={dmarcRecord.policy}</code> to match your main policy for consistent
+                            protection.
                         </div>
                     {/if}
                 </div>
@@ -106,7 +134,9 @@
                     <span class="badge bg-info">Inherits main policy</span>
                     <div class="alert alert-success mt-2 mb-0 small">
                         <i class="bi bi-check-circle me-1"></i>
-                        <strong>Good default</strong> — subdomains inherit the main policy (<code>{dmarcRecord.policy}</code>) which provides consistent protection.
+                        <strong>Good default</strong> — subdomains inherit the main policy (<code
+                            >{dmarcRecord.policy}</code
+                        >) which provides consistent protection.
                     </div>
                 </div>
             {/if}
@@ -115,23 +145,34 @@
             {#if dmarcRecord.percentage !== undefined}
                 <div class="mb-3">
                     <strong>Enforcement Percentage:</strong>
-                    <span class="badge {dmarcRecord.percentage === 100 ? 'bg-success' : dmarcRecord.percentage >= 50 ? 'bg-warning' : 'bg-danger'}">
+                    <span
+                        class="badge {dmarcRecord.percentage === 100
+                            ? 'bg-success'
+                            : dmarcRecord.percentage >= 50
+                              ? 'bg-warning'
+                              : 'bg-danger'}"
+                    >
                         {dmarcRecord.percentage}%
                     </span>
                     {#if dmarcRecord.percentage === 100}
                         <div class="alert alert-success mt-2 mb-0 small">
                             <i class="bi bi-check-circle me-1"></i>
-                            <strong>Full enforcement</strong> — all messages are subject to DMARC policy. This provides maximum protection.
+                            <strong>Full enforcement</strong> — all messages are subject to DMARC policy.
+                            This provides maximum protection.
                         </div>
                     {:else if dmarcRecord.percentage >= 50}
                         <div class="alert alert-warning mt-2 mb-0 small">
                             <i class="bi bi-exclamation-triangle me-1"></i>
-                            <strong>Partial enforcement</strong> — only {dmarcRecord.percentage}% of messages are subject to DMARC policy. Consider increasing to <code>pct=100</code> once you've validated your configuration.
+                            <strong>Partial enforcement</strong> — only {dmarcRecord.percentage}% of
+                            messages are subject to DMARC policy. Consider increasing to
+                            <code>pct=100</code> once you've validated your configuration.
                         </div>
                     {:else}
                         <div class="alert alert-danger mt-2 mb-0 small">
                             <i class="bi bi-x-circle me-1"></i>
-                            <strong>Low enforcement</strong> — only {dmarcRecord.percentage}% of messages are protected. Gradually increase to <code>pct=100</code> for full protection.
+                            <strong>Low enforcement</strong> — only {dmarcRecord.percentage}% of
+                            messages are protected. Gradually increase to <code>pct=100</code> for full
+                            protection.
                         </div>
                     {/if}
                 </div>
@@ -141,7 +182,8 @@
                     <span class="badge bg-success">100% (default)</span>
                     <div class="alert alert-success mt-2 mb-0 small">
                         <i class="bi bi-check-circle me-1"></i>
-                        <strong>Full enforcement</strong> — all messages are subject to DMARC policy by default.
+                        <strong>Full enforcement</strong> — all messages are subject to DMARC policy
+                        by default.
                     </div>
                 </div>
             {/if}
@@ -150,20 +192,28 @@
             {#if dmarcRecord.spf_alignment}
                 <div class="mb-3">
                     <strong>SPF Alignment:</strong>
-                    <span class="badge {dmarcRecord.spf_alignment === 'strict' ? 'bg-success' : 'bg-info'}">
+                    <span
+                        class="badge {dmarcRecord.spf_alignment === 'strict'
+                            ? 'bg-success'
+                            : 'bg-info'}"
+                    >
                         {dmarcRecord.spf_alignment}
                     </span>
-                    {#if dmarcRecord.spf_alignment === 'relaxed'}
+                    {#if dmarcRecord.spf_alignment === "relaxed"}
                         <div class="alert alert-info mt-2 mb-0 small">
                             <i class="bi bi-check-circle me-1"></i>
-                            <strong>Recommended for most senders</strong> — ensures legitimate subdomain mail passes.<br>
+                            <strong>Recommended for most senders</strong> — ensures legitimate
+                            subdomain mail passes.<br />
                             <i class="bi bi-exclamation-triangle me-1"></i>
-                            For maximum brand protection, consider strict alignment (<code>aspf=s</code>) once your sending domains are standardized.
+                            For maximum brand protection, consider strict alignment (<code
+                                >aspf=s</code
+                            >) once your sending domains are standardized.
                         </div>
                     {:else}
                         <div class="alert alert-success mt-2 mb-0 small">
                             <i class="bi bi-shield-check me-1"></i>
-                            <strong>Maximum brand protection</strong> — only exact domain matches are accepted. Ensure all legitimate mail comes from the exact From domain.
+                            <strong>Maximum brand protection</strong> — only exact domain matches are
+                            accepted. Ensure all legitimate mail comes from the exact From domain.
                         </div>
                     {/if}
                 </div>
@@ -173,20 +223,28 @@
             {#if dmarcRecord.dkim_alignment}
                 <div class="mb-3">
                     <strong>DKIM Alignment:</strong>
-                    <span class="badge {dmarcRecord.dkim_alignment === 'strict' ? 'bg-success' : 'bg-info'}">
+                    <span
+                        class="badge {dmarcRecord.dkim_alignment === 'strict'
+                            ? 'bg-success'
+                            : 'bg-info'}"
+                    >
                         {dmarcRecord.dkim_alignment}
                     </span>
-                    {#if dmarcRecord.dkim_alignment === 'relaxed'}
+                    {#if dmarcRecord.dkim_alignment === "relaxed"}
                         <div class="alert alert-info mt-2 mb-0 small">
                             <i class="bi bi-check-circle me-1"></i>
-                            <strong>Recommended for most senders</strong> — ensures legitimate subdomain mail passes.<br>
+                            <strong>Recommended for most senders</strong> — ensures legitimate
+                            subdomain mail passes.<br />
                             <i class="bi bi-exclamation-triangle me-1"></i>
-                            For maximum brand protection, consider strict alignment (<code>adkim=s</code>) once your sending domains are standardized.
+                            For maximum brand protection, consider strict alignment (<code
+                                >adkim=s</code
+                            >) once your sending domains are standardized.
                         </div>
                     {:else}
                         <div class="alert alert-success mt-2 mb-0 small">
                             <i class="bi bi-shield-check me-1"></i>
-                            <strong>Maximum brand protection</strong> — only exact domain matches are accepted. Ensure all DKIM signatures use the exact From domain.
+                            <strong>Maximum brand protection</strong> — only exact domain matches are
+                            accepted. Ensure all DKIM signatures use the exact From domain.
                         </div>
                     {/if}
                 </div>
@@ -195,7 +253,7 @@
             <!-- Record -->
             {#if dmarcRecord.record}
                 <div class="mb-2">
-                    <strong>Record:</strong><br>
+                    <strong>Record:</strong><br />
                     <code class="d-block mt-1 text-break">{dmarcRecord.record}</code>
                 </div>
             {/if}
@@ -203,7 +261,8 @@
             <!-- Error -->
             {#if dmarcRecord.error}
                 <div class="text-danger">
-                    <strong>Error:</strong> {dmarcRecord.error}
+                    <strong>Error:</strong>
+                    {dmarcRecord.error}
                 </div>
             {/if}
         </div>

web/src/lib/components/DnsRecordsCard.svelte

@@ -3,7 +3,10 @@
     import { getScoreColorClass } from "$lib/score";
     import GradeDisplay from "./GradeDisplay.svelte";
     import MxRecordsDisplay from "./MxRecordsDisplay.svelte";
+    import SpfRecordsDisplay from "./SpfRecordsDisplay.svelte";
+    import DkimRecordsDisplay from "./DkimRecordsDisplay.svelte";
     import DmarcRecordDisplay from "./DmarcRecordDisplay.svelte";
+    import BimiRecordDisplay from "./BimiRecordDisplay.svelte";
 
     interface Props {
         dnsResults?: DNSResults;
@@ -75,61 +78,7 @@
             {/if}
 
             <!-- SPF Records (for Return-Path Domain) -->
-            {#if dnsResults.spf_records && dnsResults.spf_records.length > 0}
+            <SpfRecordsDisplay spfRecords={dnsResults.spf_records} />
-                {@const spfIsValid = dnsResults.spf_records.reduce((acc, r) => acc && r.valid, true)}
-                <div class="card mb-4">
-                    <div class="card-header d-flex justify-content-between align-items-center">
-                        <h5 class="text-muted mb-2">
-                            <i
-                                class="bi"
-                                class:bi-check-circle-fill={spfIsValid}
-                                class:text-success={spfIsValid}
-                                class:bi-x-circle-fill={!spfIsValid}
-                                class:text-danger={!spfIsValid}
-                            ></i>
-                            Sender Policy Framework
-                        </h5>
-                        <span class="badge bg-secondary">SPF</span>
-                    </div>
-                    <div class="card-body pb-0">
-                        <p class="card-text small text-muted mb-0">SPF specifies which mail servers are authorized to send emails on behalf of your domain. Receiving servers check the sender's IP address against your SPF record to prevent email spoofing.</p>
-                    </div>
-                    <div class="list-group list-group-flush">
-                        {#each dnsResults.spf_records as spf, index}
-                            <div class="list-group-item">
-                                {#if spf.domain}
-                                    <div class="mb-2">
-                                        <strong>Domain:</strong> <code>{spf.domain}</code>
-                                        {#if index > 0}
-                                            <span class="badge bg-info ms-2">Included</span>
-                                        {/if}
-                                    </div>
-                                {/if}
-                                <div class="mb-2">
-                                    <strong>Status:</strong>
-                                    {#if spf.valid}
-                                        <span class="badge bg-success">Valid</span>
-                                    {:else}
-                                        <span class="badge bg-danger">Invalid</span>
-                                    {/if}
-                                </div>
-                                {#if spf.record}
-                                    <div class="mb-2">
-                                        <strong>Record:</strong><br>
-                                        <code class="d-block mt-1 text-break">{spf.record}</code>
-                                    </div>
-                                {/if}
-                                {#if spf.error}
-                                    <div class="alert alert-{spf.valid ? 'warning' : 'danger'} mb-0 mt-2">
-                                        <i class="bi bi-{spf.valid ? 'exclamation-triangle' : 'x-circle'} me-1"></i>
-                                        <strong>{spf.valid ? 'Warning:' : 'Error:'}</strong> {spf.error}
-                                    </div>
-                                {/if}
-                            </div>
-                        {/each}
-                    </div>
-                </div>
-            {/if}
 
             <hr class="my-4">
 
@@ -154,116 +103,13 @@
             {/if}
 
             <!-- DKIM Records -->
-            {#if dnsResults.dkim_records && dnsResults.dkim_records.length > 0}
+            <DkimRecordsDisplay dkimRecords={dnsResults.dkim_records} />
-                {@const dkimIsValid = dnsResults.dkim_records.reduce((acc, r) => acc && r.valid, true)}
-                <div class="card mb-4">
-                    <div class="card-header d-flex justify-content-between align-items-center">
-                        <h5 class="text-muted mb-0">
-                            <i
-                                class="bi"
-                                class:bi-check-circle-fill={dkimIsValid}
-                                class:text-success={dkimIsValid}
-                                class:bi-x-circle-fill={!dkimIsValid}
-                                class:text-danger={!dkimIsValid}
-                            ></i>
-                            DomainKeys Identified Mail
-                        </h5>
-                        <span class="badge bg-secondary">DKIM</span>
-                    </div>
-                    <div class="card-body pb-0">
-                        <p class="card-text small text-muted mb-0">DKIM cryptographically signs your emails, proving they haven't been tampered with in transit. Receiving servers verify this signature against your DNS records.</p>
-                    </div>
-                    <div class="list-group list-group-flush">
-                        {#each dnsResults.dkim_records as dkim}
-                            <div class="list-group-item">
-                                <div class="mb-2">
-                                    <strong>Selector:</strong> <code>{dkim.selector}</code>
-                                    <strong class="ms-3">Domain:</strong> <code>{dkim.domain}</code>
-                                </div>
-                                <div class="mb-2">
-                                    <strong>Status:</strong>
-                                    {#if dkim.valid}
-                                        <span class="badge bg-success">Valid</span>
-                                    {:else}
-                                        <span class="badge bg-danger">Invalid</span>
-                                    {/if}
-                                </div>
-                                {#if dkim.record}
-                                    <div class="mb-2">
-                                        <strong>Record:</strong><br>
-                                        <code class="d-block mt-1 text-break small text-truncate">{dkim.record}</code>
-                                    </div>
-                                {/if}
-                                {#if dkim.error}
-                                    <div class="text-danger">
-                                        <strong>Error:</strong> {dkim.error}
-                                    </div>
-                                {/if}
-                            </div>
-                        {/each}
-                    </div>
-                </div>
-            {/if}
 
             <!-- DMARC Record -->
             <DmarcRecordDisplay dmarcRecord={dnsResults.dmarc_record} />
 
             <!-- BIMI Record -->
-            {#if dnsResults.bimi_record}
+            <BimiRecordDisplay bimiRecord={dnsResults.bimi_record} />
-                <div class="card mb-4">
-                    <div class="card-header d-flex justify-content-between align-items-center">
-                        <h5 class="text-muted mb-0">
-                            <i
-                                class="bi"
-                                class:bi-check-circle-fill={dnsResults.bimi_record.valid}
-                                class:text-success={dnsResults.bimi_record.valid}
-                                class:bi-x-circle-fill={!dnsResults.bimi_record.valid}
-                                class:text-danger={!dnsResults.bimi_record.valid}
-                            ></i>
-                            Brand Indicators for Message Identification
-                        </h5>
-                        <span class="badge bg-secondary">BIMI</span>
-                    </div>
-                    <div class="card">
-                        <div class="card-body">
-                            <p class="card-text small text-muted mb-2">BIMI allows your brand logo to be displayed next to your emails in supported mail clients. Requires strong DMARC enforcement (quarantine or reject policy) and optionally a Verified Mark Certificate (VMC).</p>
-                            <div class="mb-2">
-                                <strong>Selector:</strong> <code>{dnsResults.bimi_record.selector}</code>
-                                <strong class="ms-3">Domain:</strong> <code>{dnsResults.bimi_record.domain}</code>
-                            </div>
-                            <div class="mb-2">
-                                <strong>Status:</strong>
-                                {#if dnsResults.bimi_record.valid}
-                                    <span class="badge bg-success">Valid</span>
-                                {:else}
-                                    <span class="badge bg-danger">Invalid</span>
-                                {/if}
-                            </div>
-                            {#if dnsResults.bimi_record.logo_url}
-                                <div class="mb-2">
-                                    <strong>Logo URL:</strong> <a href={dnsResults.bimi_record.logo_url} target="_blank" rel="noopener noreferrer">{dnsResults.bimi_record.logo_url}</a>
-                                </div>
-                            {/if}
-                            {#if dnsResults.bimi_record.vmc_url}
-                                <div class="mb-2">
-                                    <strong>VMC URL:</strong> <a href={dnsResults.bimi_record.vmc_url} target="_blank" rel="noopener noreferrer">{dnsResults.bimi_record.vmc_url}</a>
-                                </div>
-                            {/if}
-                            {#if dnsResults.bimi_record.record}
-                                <div class="mb-2">
-                                    <strong>Record:</strong><br>
-                                    <code class="d-block mt-1 text-break">{dnsResults.bimi_record.record}</code>
-                                </div>
-                            {/if}
-                            {#if dnsResults.bimi_record.error}
-                                <div class="text-danger">
-                                    <strong>Error:</strong> {dnsResults.bimi_record.error}
-                                </div>
-                            {/if}
-                        </div>
-                    </div>
-                </div>
-            {/if}
         {/if}
     </div>
 </div>

web/src/lib/components/MxRecordsDisplay.svelte

@@ -28,7 +28,7 @@
         </h5>
         <span class="badge bg-secondary">MX</span>
     </div>
-    <div class="card-body pb-0">
+    <div class="card-body">
         {#if description}
             <p class="card-text small text-muted mb-0">{description}</p>
         {/if}

web/src/lib/components/SpfRecordsDisplay.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import type { SPFRecord } from "$lib/api/types.gen";
+
+    interface Props {
+        spfRecords?: SPFRecord[];
+    }
+
+    let { spfRecords }: Props = $props();
+
+    // Compute overall validity
+    const spfIsValid = $derived(
+        spfRecords?.reduce((acc, r) => acc && r.valid, true) ?? false
+    );
+</script>
+
+{#if spfRecords && spfRecords.length > 0}
+    <div class="card mb-4">
+        <div class="card-header d-flex justify-content-between align-items-center">
+            <h5 class="text-muted mb-2">
+                <i
+                    class="bi"
+                    class:bi-check-circle-fill={spfIsValid}
+                    class:text-success={spfIsValid}
+                    class:bi-x-circle-fill={!spfIsValid}
+                    class:text-danger={!spfIsValid}
+                ></i>
+                Sender Policy Framework
+            </h5>
+            <span class="badge bg-secondary">SPF</span>
+        </div>
+        <div class="card-body">
+            <p class="card-text small text-muted mb-0">SPF specifies which mail servers are authorized to send emails on behalf of your domain. Receiving servers check the sender's IP address against your SPF record to prevent email spoofing.</p>
+        </div>
+        <div class="list-group list-group-flush">
+            {#each spfRecords as spf, index}
+                <div class="list-group-item">
+                    {#if spf.domain}
+                        <div class="mb-2">
+                            <strong>Domain:</strong> <code>{spf.domain}</code>
+                            {#if index > 0}
+                                <span class="badge bg-info ms-2">Included</span>
+                            {/if}
+                        </div>
+                    {/if}
+                    <div class="mb-2">
+                        <strong>Status:</strong>
+                        {#if spf.valid}
+                            <span class="badge bg-success">Valid</span>
+                        {:else}
+                            <span class="badge bg-danger">Invalid</span>
+                        {/if}
+                    </div>
+                    {#if spf.record}
+                        <div class="mb-2">
+                            <strong>Record:</strong><br>
+                            <code class="d-block mt-1 text-break">{spf.record}</code>
+                        </div>
+                    {/if}
+                    {#if spf.error}
+                        <div class="alert alert-{spf.valid ? 'warning' : 'danger'} mb-0 mt-2">
+                            <i class="bi bi-{spf.valid ? 'exclamation-triangle' : 'x-circle'} me-1"></i>
+                            <strong>{spf.valid ? 'Warning:' : 'Error:'}</strong> {spf.error}
+                        </div>
+                    {/if}
+                </div>
+            {/each}
+        </div>
+    </div>
+{/if}