Show what the spam filter said, in the message details

The filter in front of the mailbox scores every delivered message and
writes its working into headers, and none of it was being read. A message
in Junk gave no reason for being there.

Nothing here scores anything. The headers are parsed and shown, so this
cannot disagree with the filter that actually made the decision.

Two formats cover what sits in front of a Stalwart mailbox in practice:
the SpamAssassin-shaped X-Spam-* set, which Stalwart's own filter writes,
and Rspamd's X-Spamd-Result. A header in neither shape is left unread
rather than guessed at, since a misparsed score shown confidently is worse
than no panel at all. Mail that arrived without any of them shows nothing.

Rules are listed largest mover first and signed, because which way a rule
pushed is the point, and the biggest contributor is the answer to why the
message scored what it did.

Two things it deliberately will not do. A score is always given the
threshold it was measured against, because 6.7 is damning against 5 and
unremarkable against 15 -- the number alone is not something a reader can
act on; where no threshold was stated, it says so rather than implying
one. And where the filter recorded no verdict, none is derived from score
against threshold: the filter applies policy we cannot see, and putting a
verdict in its mouth would be inventing one.

The mock writes the same headers at delivery -- spam in Junk, clean in the
Inbox, nothing on mail this account wrote -- so the panel can be developed
and demoed against it.

web/src/views/mail/MessageView.tsx

@@ -10,6 +10,7 @@ import { useContacts } from "@/store/contacts";
 import { useCalendar } from "@/store/calendar";
 import { startAppointment } from "@/lib/appointment";
 import { client } from "@/jmap/client";
+import { spamReport, type SpamReport } from "@/lib/spamScore";
 import { formatFullDate, formatListDate, formatSize } from "@/lib/format";
 import { displayName, formatAddress } from "@/lib/address";
 import { EMAIL_BASE_CSS, TEXT_EMAIL_CSS, htmlDeclaresColors, sanitizeEmailHtml } from "@/lib/html";
@@ -112,6 +113,7 @@ export const MessageView = memo(function MessageView({ email: e, expanded, wasUn
   const isHighPriority = /^[12]/.test(e["header:X-Priority:asText"] ?? "") || /high/i.test(e["header:Importance:asText"] ?? "");
   const receiptRequested = Boolean(e["header:Disposition-Notification-To:asAddresses"]?.length);
   const authFailed = /\b(dkim|spf|dmarc)=fail\b/i.test(e["header:Authentication-Results:asText"] ?? "");
+  const spam = useMemo(() => spamReport(e), [e]);
 
   const openSource = async () => {
     setShowSource(true);
@@ -265,6 +267,7 @@ export const MessageView = memo(function MessageView({ email: e, expanded, wasUn
               {e.messageId?.[0] && <><dt>{translate("Message-ID")}</dt><dd className="mono small">{e.messageId[0]}</dd></>}
               {e["header:List-Id:asText"] && <><dt>{translate("List")}</dt><dd>{e["header:List-Id:asText"]}</dd></>}
               <dt>{translate("Size")}</dt><dd>{formatSize(e.size)}</dd>
+              {spam && <><dt>{translate("Spam filter")}</dt><dd><SpamSummary report={spam} /></dd></>}
               {receiptRequested && <><dt>{translate("Receipt")}</dt><dd>{receipt.offer ? `Requested, to ${receipt.to!.email}. Never sent automatically.` : refusalText(receipt.refusal!)}</dd></>}
             </dl>
           )}
@@ -552,6 +555,53 @@ function TextBody({ text }: { text: string }) {
   );
 }
 
+/* ---------- Spam ---------- */
+
+/**
+ * What the filter said, not what we think of it. The verdict line only claims
+ * as much as the header did: where the filter stated one, it is shown; where
+ * it only left a score, the score is shown on its own rather than being turned
+ * into a verdict here.
+ *
+ * A score is always given its threshold where the header carried one, because
+ * the number is unreadable without it -- 6.7 is damning against 5 and
+ * unremarkable against 15. Where none was stated, that is said.
+ */
+function SpamSummary({ report }: { report: SpamReport }) {
+  const { verdict, score, threshold, rules } = report;
+  return (
+    <div className="spam-summary">
+      <div>
+        {verdict === "spam" && <strong>{translate("Marked as spam")}</strong>}
+        {verdict === "clean" && <strong>{translate("Not spam")}</strong>}
+        {verdict === null && <strong>{translate("No verdict recorded")}</strong>}
+        {score !== null && (
+          <span className="hint">
+            {" — "}
+            {threshold !== null
+              ? translate("scored {score} against a threshold of {threshold}", { score: String(score), threshold: String(threshold) })
+              : translate("scored {score}, with no threshold stated", { score: String(score) })}
+          </span>
+        )}
+      </div>
+      {rules.length > 0 && (
+        <ul className="spam-rules">
+          {rules.map((r, i) => (
+            <li key={`${r.name}-${i}`}>
+              <span className="mono small">{r.name}</span>
+              {r.detail && <span className="hint truncate">{r.detail}</span>}
+              {/* Signed, because which way a rule pushed is the whole point. */}
+              <span className={`spam-weight ${r.score > 0 ? "bad" : r.score < 0 ? "good" : ""}`}>
+                {r.score > 0 ? `+${r.score}` : String(r.score)}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
 /* ---------- Attachments ---------- */
 
 export function attachmentIcon(type: string, name?: string | null) {