Consider using a React component instead of diff2html for patch preview

services/hackbot-ui/app/globals.css

@@ -811,3 +811,32 @@ ul.chips li.chip {
 .test-plan-summary {
   margin-top: 24px;
 }
+.patch-file {
+  margin-bottom: 20px;
+  overflow-x: auto;
+}
+.patch-file:last-child {
+  margin-bottom: 0;
+}
+.patch-file-header {
+  padding: 8px 12px;
+  margin-bottom: 8px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-family: var(--mono);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  word-break: break-all;
+  overflow-wrap: anywhere;
+}
+.patch-diff {
+  --diff-background-color: var(--bg);
+  --diff-text-color: var(--text);
+  --diff-selection-background-color: rgba(74, 122, 240, 0.3);
+  --diff-gutter-insert-background-color: rgba(46, 160, 67, 0.18);
+  --diff-gutter-delete-background-color: rgba(229, 83, 75, 0.18);
+  --diff-code-insert-background-color: rgba(46, 160, 67, 0.1);
+  --diff-code-delete-background-color: rgba(229, 83, 75, 0.1);
+}

services/hackbot-ui/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 
-import "diff2html/bundles/css/diff2html.min.css";
+import "react-diff-view/style/index.css";
 
 import "./globals.css";
 import { SentryUser } from "@/components/SentryUser";

services/hackbot-ui/components/PatchView.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { html, parse } from "diff2html";
-import { ColorSchemeType } from "diff2html/lib/types";
+import { parseDiff, Diff, Hunk } from "react-diff-view";
 import { useEffect, useState } from "react";
 
 // The artifact every agent that edits source publishes (see
@@ -19,7 +18,7 @@ export function PatchPanel({
   diff: string;
   truncated?: boolean;
 }) {
-  const files = parse(diff);
+  const files = parseDiff(diff);
 
   return (
     <div className="panel">
@@ -36,18 +35,32 @@ export function PatchPanel({
               from the Artifacts list for the rest.
             </p>
           )}
-          {/* diff2html only emits markup for the diff it was given and escapes
-              its content, so this does not render arbitrary agent HTML. */}
-          <div
-            className="patch-diff"
-            dangerouslySetInnerHTML={{
-              __html: html(files, {
-                drawFileList: files.length > 1,
-                matching: "lines",
-                colorScheme: ColorSchemeType.DARK,
-              }),
-            }}
-          />
+          <div className="patch-diff">
+            {files.map((file) => (
+              <div
+                key={`${file.oldPath}-${file.newPath}`}
+                className="patch-file"
+              >
+                {/* Only label files when there's more than one to tell apart. */}
+                {files.length > 1 && (
+                  <div className="patch-file-header">
+                    {/* A deleted file's newPath is /dev/null; fall back to
+                        oldPath so the header shows the actual filename. */}
+                    {file.newPath !== "/dev/null" ? file.newPath : file.oldPath}
+                  </div>
+                )}
+                <Diff
+                  viewType="unified"
+                  diffType={file.type}
+                  hunks={file.hunks}
+                >
+                  {(hunks) =>
+                    hunks.map((hunk) => <Hunk key={hunk.content} hunk={hunk} />)
+                  }
+                </Diff>
+              </div>
+            ))}
+          </div>
         </>
       )}
     </div>

services/hackbot-ui/package.json

@@ -13,9 +13,9 @@
   "dependencies": {
     "@sentry/nextjs": "^10.74.0",
     "better-auth": "^1.6.22",
-    "diff2html": "^3.4.56",
     "next": "^15.5.22",
     "react": "^19.0.0",
+    "react-diff-view": "^3.3.3",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",