Render markdown/safe-HTML in issue messages with raw toggle

private-web/package.json

@@ -23,6 +23,9 @@
 		"react-dom": "^19.2.5",
 		"react-markdown": "^10.1.0",
 		"react-router-dom": "^7.14.2",
+		"rehype-raw": "^7.0.0",
+		"rehype-sanitize": "^6.0.0",
+		"remark-breaks": "^4.0.0",
 		"remark-gfm": "^4.0.1"
 	},
 	"devDependencies": {

private-web/src/components/IssueRow.tsx

@@ -19,6 +19,7 @@ import { Link as RouterLink } from "react-router-dom";
 import { useApi, useApiAction } from "../api";
 import { useIsAdmin } from "../hooks/useIsAdmin";
 import { humanDuration } from "../lib/humanDuration";
+import MessageView from "./MessageView";
 import NotesList, { AddNoteButton } from "./NotesList";
 import SeverityChip from "./SeverityChip";
 import StatusSnapshotPanel, { StatusSnapshotButton } from "./StatusSnapshot";
@@ -324,18 +325,7 @@ function Body({
 	return (
 		<Box sx={{ mt: 1 }}>
 			<IssueMeta issue={issue} />
-			<Typography
-				variant="body2"
-				component="pre"
-				sx={{
-					m: 0,
-					whiteSpace: "pre-wrap",
-					fontFamily: "monospace",
-					fontSize: "0.85em",
-				}}
-			>
-				{issue.message}
-			</Typography>
+			<MessageView message={issue.message} />
 			{isAdmin && (
 				<IssueActions
 					issue={issue}

private-web/src/components/Markdown.tsx

@@ -1,8 +1,27 @@
 import { Box } from "@mui/material";
 import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
+import remarkBreaks from "remark-breaks";
 import remarkGfm from "remark-gfm";
 
-export default function Markdown({ children }: { children: string }) {
+/** Renders markdown with GFM extensions and a sanitised subset of inline
+ * HTML. Sources sometimes wrap their messages in `<b>`, `<a>`, `<code>`
+ * and similar — those pass through; anything dangerous (scripts, inline
+ * event handlers, iframes, etc.) is stripped by `rehype-sanitize`'s
+ * default GitHub-compatible schema. Pass `preserveNewlines` when input
+ * may be plain text with significant line breaks (e.g. log messages),
+ * which converts soft breaks to `<br>`. */
+export default function Markdown({
+	children,
+	preserveNewlines = false,
+}: {
+	children: string;
+	preserveNewlines?: boolean;
+}) {
+	const remarkPlugins = preserveNewlines
+		? [remarkGfm, remarkBreaks]
+		: [remarkGfm];
 	return (
 		<Box
 			sx={{
@@ -47,7 +66,12 @@ export default function Markdown({ children }: { children: string }) {
 				},
 			}}
 		>
-			<ReactMarkdown remarkPlugins={[remarkGfm]}>{children}</ReactMarkdown>
+			<ReactMarkdown
+				remarkPlugins={remarkPlugins}
+				rehypePlugins={[rehypeRaw, rehypeSanitize]}
+			>
+				{children}
+			</ReactMarkdown>
 		</Box>
 	);
 }