fix(frontend): render investigation reasoning as markdown

Author: hugbubby

src/typescript/frontend/package.json

@@ -15,11 +15,13 @@
   "dependencies": {
     "@sveltejs/adapter-node": "^5.5.3",
     "@sveltejs/kit": "^2.52.2",
+    "markdown-it": "^14.1.1",
     "svelte": "^5.53.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.56.1",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@types/markdown-it": "^14.1.2",
     "svelte-check": "^4.2.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",

src/typescript/frontend/src/lib/claim-markdown.ts

@@ -0,0 +1,22 @@
+import MarkdownIt from "markdown-it";
+
+const markdownRenderer = new MarkdownIt({
+  html: false,
+  linkify: true,
+  breaks: true,
+});
+
+const defaultLinkOpenRenderer =
+  markdownRenderer.renderer.rules["link_open"] ??
+  ((tokens, index, options, _env, self) => self.renderToken(tokens, index, options));
+
+markdownRenderer.renderer.rules["link_open"] = (tokens, index, options, env, self) => {
+  const token = tokens[index];
+  token?.attrSet("target", "_blank");
+  token?.attrSet("rel", "noopener noreferrer");
+  return defaultLinkOpenRenderer(tokens, index, options, env, self);
+};
+
+export function renderClaimReasoningHtml(markdown: string): string {
+  return markdownRenderer.render(markdown);
+}

src/typescript/frontend/src/routes/corrections/[id]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { PageData } from "./$types";
   import type { PublicInvestigationResult } from "./+page.server";
+  import { renderClaimReasoningHtml } from "$lib/claim-markdown";
 
   const { data }: { data: PageData } = $props();
 
@@ -120,7 +121,8 @@
 
                   <details class="claim-details">
                     <summary>Full reasoning</summary>
-                    <div class="reasoning">{claim.reasoning}</div>
+                    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                    <div class="reasoning">{@html renderClaimReasoningHtml(claim.reasoning)}</div>
                   </details>
 
                   {#if claim.sources.length > 0}
@@ -364,7 +366,78 @@
     margin-top: 0.5rem;
     padding-left: 0.75rem;
     border-left: 2px solid var(--color-border);
-    white-space: pre-wrap;
+  }
+
+  .reasoning :global(p) {
+    margin: 0 0 0.875rem;
+  }
+
+  .reasoning :global(p:last-child) {
+    margin-bottom: 0;
+  }
+
+  .reasoning :global(h1),
+  .reasoning :global(h2),
+  .reasoning :global(h3),
+  .reasoning :global(h4) {
+    color: var(--color-text);
+    font-weight: 600;
+    line-height: 1.4;
+    margin: 1rem 0 0.5rem;
+  }
+
+  .reasoning :global(h1) {
+    font-size: 1.1rem;
+  }
+
+  .reasoning :global(h2) {
+    font-size: 1rem;
+  }
+
+  .reasoning :global(h3),
+  .reasoning :global(h4) {
+    font-size: 0.9375rem;
+  }
+
+  .reasoning :global(ul),
+  .reasoning :global(ol) {
+    margin: 0.5rem 0 0.875rem 1.25rem;
+    padding: 0;
+  }
+
+  .reasoning :global(li) {
+    margin-bottom: 0.375rem;
+  }
+
+  .reasoning :global(a) {
+    color: var(--color-accent);
+  }
+
+  .reasoning :global(a:hover) {
+    text-decoration: underline;
+  }
+
+  .reasoning :global(code) {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 0.8125rem;
+    padding: 0.125rem 0.25rem;
+    border-radius: 4px;
+    background: var(--color-bg);
+    color: var(--color-text);
+  }
+
+  .reasoning :global(pre) {
+    overflow-x: auto;
+    padding: 0.75rem;
+    border-radius: 8px;
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
+    margin: 0.75rem 0;
+  }
+
+  .reasoning :global(pre code) {
+    background: transparent;
+    padding: 0;
   }
 
   /* Sources */

src/typescript/frontend/test/unit/claim-markdown.test.ts

@@ -0,0 +1,24 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { renderClaimReasoningHtml } from "../../src/lib/claim-markdown.js";
+
+describe("renderClaimReasoningHtml", () => {
+  it("renders headings, emphasis, and safe links as HTML", () => {
+    const html = renderClaimReasoningHtml(
+      "### Contradictory evidence\n\n**Bold** text and [source](https://example.com).",
+    );
+
+    assert.match(html, /<h3>Contradictory evidence<\/h3>/);
+    assert.match(html, /<strong>Bold<\/strong>/);
+    assert.match(html, /href="https:\/\/example\.com"/);
+    assert.match(html, /target="_blank"/);
+    assert.match(html, /rel="noopener noreferrer"/);
+  });
+
+  it("escapes raw HTML instead of rendering it", () => {
+    const html = renderClaimReasoningHtml('<script>alert("xss")</script>');
+
+    assert.equal(html.includes("<script>"), false);
+    assert.equal(html.includes("&lt;script&gt;alert"), true);
+  });
+});