feat(admin): show reported message content in report detail

admin-web/src/App.tsx

@@ -7,7 +7,12 @@ import {
   useState,
 } from "react";
 import { ApiFailure, request } from "./api";
-import type { FeedbackDetail, FeedbackSummary, Report } from "./types";
+import type {
+  FeedbackDetail,
+  FeedbackSummary,
+  Report,
+  ReportDetail as ReportDetailData,
+} from "./types";
 import { useResource } from "./useResource";
 
 function usePath() {
@@ -131,7 +136,10 @@ function Reports() {
 }
 
 function ReportDetail({ id }: { id: string }) {
-  const resource = useResource(() => request<Report>(`/reports/${id}`), id);
+  const resource = useResource(
+    () => request<ReportDetailData>(`/reports/${id}`),
+    id,
+  );
   return (
     <Page
       eyebrow="Moderation"
@@ -164,6 +172,32 @@ function ReportDetail({ id }: { id: string }) {
               <dd>
                 <code>{report.target}</code>
               </dd>
+              {report.targetKind === "event" ? (
+                <>
+                  <dt>Message</dt>
+                  <dd>
+                    {report.message ? (
+                      <div className="reported-message">
+                        {report.message.deletedAt ? (
+                          <span className="status">Deleted</span>
+                        ) : null}
+                        <p>{report.message.content}</p>
+                        <div className="reported-message-meta">
+                          <span>Author</span>
+                          <code>{report.message.authorPubkey}</code>
+                          <span>Created</span>
+                          <time>{date(report.message.createdAt)}</time>
+                        </div>
+                      </div>
+                    ) : (
+                      <p className="message-unavailable">
+                        Message content is unavailable. It may have expired or
+                        been removed from event storage.
+                      </p>
+                    )}
+                  </dd>
+                </>
+              ) : null}
               <dt>Note</dt>
               <dd className="sensitive">
                 {report.note ?? "No note provided."}

admin-web/src/styles.css

@@ -496,6 +496,38 @@ dd {
   margin: 0;
 }
 
+.reported-message {
+  display: grid;
+  justify-items: start;
+  gap: 1rem;
+  border-left: 3px solid #d7d72e;
+  border-radius: 0 0.8rem 0.8rem 0;
+  background: #f6f6f1;
+  padding: 1rem;
+}
+
+.reported-message p,
+.message-unavailable {
+  margin: 0;
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.reported-message-meta {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 0.4rem 0.75rem;
+  width: 100%;
+  color: rgb(35 30 30 / 48%);
+  font-size: 0.78rem;
+}
+
+.message-unavailable {
+  color: rgb(35 30 30 / 60%);
+  font-style: italic;
+}
+
 .sensitive {
   border-left: 3px solid #d7d72e;
   border-radius: 0 0.8rem 0.8rem 0;

admin-web/src/types.ts

@@ -12,6 +12,17 @@ export interface Report {
   createdAt: string;
 }
 
+export interface ReportedMessage {
+  authorPubkey: string;
+  content: string;
+  createdAt: string;
+  deletedAt: string | null;
+}
+
+export interface ReportDetail extends Report {
+  message: ReportedMessage | null;
+}
+
 export interface FeedbackSummary {
   id: string;
   communityId: string;

admin-web/tests/routes.spec.ts

@@ -58,6 +58,72 @@ test("report rows render the relay response contract", async ({ page }) => {
   await expect(page.getByText("Unknown date")).toHaveCount(0);
 });
 
+test("event report detail renders the reported message content", async ({
+  page,
+}) => {
+  const id = "0e6caad8-1e18-4cd7-84fa-7264103f0a08";
+  await page.route(`**/api/admin/v1/reports/${id}`, (route) =>
+    route.fulfill({
+      contentType: "application/json",
+      body: JSON.stringify({
+        id,
+        communityId: "6d474feb-c50a-44e4-a0b5-f30532df49bc",
+        communityHost: "design.buzz.xyz",
+        reporterPubkey: "21".repeat(32),
+        targetKind: "event",
+        target: "12".repeat(32),
+        reportType: "spam",
+        status: "open",
+        createdAt: "2026-07-17T17:30:00Z",
+        message: {
+          authorPubkey: "31".repeat(32),
+          content:
+            "This is the complete reported message.\nIt preserves lines.",
+          createdAt: "2026-07-17T17:25:00Z",
+          deletedAt: null,
+        },
+      }),
+    }),
+  );
+
+  await page.goto(`/reports/${id}`);
+  await expect(
+    page.getByText("This is the complete reported message.", { exact: false }),
+  ).toBeVisible();
+  await expect(page.getByText("31".repeat(32))).toBeVisible();
+  await expect(
+    page.getByText("Message content is unavailable", { exact: false }),
+  ).toHaveCount(0);
+});
+
+test("event report detail explains when message content is unavailable", async ({
+  page,
+}) => {
+  const id = "0e6caad8-1e18-4cd7-84fa-7264103f0a09";
+  await page.route(`**/api/admin/v1/reports/${id}`, (route) =>
+    route.fulfill({
+      contentType: "application/json",
+      body: JSON.stringify({
+        id,
+        communityId: "6d474feb-c50a-44e4-a0b5-f30532df49bc",
+        communityHost: "design.buzz.xyz",
+        reporterPubkey: "21".repeat(32),
+        targetKind: "event",
+        target: "12".repeat(32),
+        reportType: "spam",
+        status: "open",
+        createdAt: "2026-07-17T17:30:00Z",
+        message: null,
+      }),
+    }),
+  );
+
+  await page.goto(`/reports/${id}`);
+  await expect(
+    page.getByText("Message content is unavailable", { exact: false }),
+  ).toBeVisible();
+});
+
 test("feedback cards open the complete submission", async ({ page }) => {
   const id = "feed0000-0000-4000-8000-000000000001";
   const fullBody = `${"Long feedback ".repeat(30)}end of feedback`;