Summary

Git diffs and file patches appear constantly in agent sessions — PR reviews, file edits, debugging sessions. Currently they render as plain code blocks. A colored diff viewer (red/green lines, hunk headers) makes them dramatically easier to read at a glance.

Proposed behavior

Two surfaces:

1. Fenced diff blocks — when the agent outputs a diff inside a fenced code block with diff or patch language hint:

```diff
-old line
+new line
```

Render with colored lines: - lines in red/pink background, + lines in green background, @@ hunk headers in muted blue, unchanged context lines normal.

2. MEDIA: diff files — when the agent saves a .patch or .diff file and outputs MEDIA:/tmp/changes.patch, render it inline with the same coloring rather than as a download.

Implementation

Pure CSS — no library needed. The fenced code block renderer already emits <code class="language-diff">. Add CSS rules that target lines starting with +, -, and @@ inside .language-diff:

.language-diff .line-plus  { background: rgba(0,200,100,.12); color: #4ade80; }
.language-diff .line-minus { background: rgba(220,50,50,.12); color: #f87171; }
.language-diff .line-hunk  { color: var(--muted); font-style: italic; }

This requires the code renderer to wrap individual lines in <span> elements with appropriate classes — a modest change to the <pre><code> output.

Files involved

• static/ui.js — fenced code block renderer, MEDIA restore for .patch/.diff
• static/style.css — diff line coloring