feat: add GitHub-style diff viewer with colored backgrounds

Replace basic syntax highlighting with custom DiffView component that shows:
- Green background for additions with + indicator
- Red background for deletions with − indicator
- Blue background for hunk headers
- Left border color coding for quick visual scanning

js/cf-webapp/src/components/observability2/llm-calls-timeline.tsx

@@ -155,6 +155,60 @@ const CodeFileDisplay = memo(function CodeFileDisplay({
   )
 })
 
+/** Custom diff viewer with GitHub-style coloring */
+const DiffView = memo(function DiffView({ diff }: { diff: string }) {
+  const lines = diff.split("\n")
+
+  return (
+    <div className="font-mono text-sm bg-gray-900 overflow-x-auto">
+      {lines.map((line, index) => {
+        const isAddition = line.startsWith("+")
+        const isDeletion = line.startsWith("-")
+        const isHunkHeader = line.startsWith("@@")
+
+        // Determine line styling
+        let bgClass = ""
+        let textClass = "text-gray-300"
+        let lineContent = line
+
+        if (isHunkHeader) {
+          bgClass = "bg-blue-900/30"
+          textClass = "text-blue-400"
+        } else if (isAddition) {
+          bgClass = "bg-green-900/40"
+          textClass = "text-green-300"
+          lineContent = line.substring(1) // Remove the + prefix
+        } else if (isDeletion) {
+          bgClass = "bg-red-900/40"
+          textClass = "text-red-300"
+          lineContent = line.substring(1) // Remove the - prefix
+        } else if (line.startsWith(" ")) {
+          lineContent = line.substring(1) // Remove the space prefix for context lines
+        }
+
+        return (
+          <div
+            key={index}
+            className={`flex ${bgClass} border-l-2 ${
+              isAddition ? "border-green-500" : isDeletion ? "border-red-500" : "border-transparent"
+            }`}
+          >
+            {/* Line indicator */}
+            <div className="w-8 flex-shrink-0 text-right pr-2 select-none">
+              {isAddition && <span className="text-green-500">+</span>}
+              {isDeletion && <span className="text-red-500">−</span>}
+            </div>
+            {/* Line content */}
+            <pre className={`flex-1 px-2 py-0.5 ${textClass} whitespace-pre`}>
+              {lineContent || " "}
+            </pre>
+          </div>
+        )
+      })}
+    </div>
+  )
+})
+
 interface CandidateCodeDisplayProps {
   candidateCode: string
   originalCode: string | null
@@ -320,14 +374,7 @@ const CandidateCodeDisplay = memo(function CandidateCodeDisplay({
               {parsedCandidate.code}
             </SyntaxHighlighter>
           ) : unifiedDiff ? (
-            <SyntaxHighlighter
-              language="diff"
-              style={oneDark}
-              customStyle={{ margin: 0, padding: "1rem", fontSize: "0.875rem", lineHeight: 1.5 }}
-              showLineNumbers
-            >
-              {unifiedDiff}
-            </SyntaxHighlighter>
+            <DiffView diff={unifiedDiff} />
           ) : (
             <div className="p-4 text-sm text-gray-500 dark:text-gray-400">
               No original code available for comparison