From 15077d70809994815ddb1b5fa6b019382f0f61b0 Mon Sep 17 00:00:00 2001
From: Federico Jaramillo Martinez <federico@klingit.com>
Date: Fri, 8 May 2026 09:43:00 +0200
Subject: [PATCH] Add syntax highlighting for git diffs

---
 package-lock.json                           | 10 ++++++++++
 package.json                                |  1 +
 src/client/src/components/CodeViewer.ts     |  4 +++-
 src/client/src/components/WorkspacePanel.ts |  2 +-
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b9bf3ad..3afd998 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@codemirror/lang-markdown": "^6.5.0",
         "@codemirror/lang-python": "^6.2.1",
         "@codemirror/lang-rust": "^6.0.2",
+        "@codemirror/legacy-modes": "^6.5.2",
         "@earendil-works/pi-coding-agent": "^0.74.0",
         "@fastify/static": "^8.3.0",
         "@fastify/websocket": "^11.2.0",
@@ -991,6 +992,15 @@
         "style-mod": "^4.0.0"
       }
     },
+    "node_modules/@codemirror/legacy-modes": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-6.5.2.tgz",
+      "integrity": "sha512-/jJbwSTazlQEDOQw2FJ8LEEKVS72pU0lx6oM54kGpL8t/NJ2Jda3CZ4pcltiKTdqYSRk3ug1B3pil1gsjA6+8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0"
+      }
+    },
     "node_modules/@codemirror/lint": {
       "version": "6.9.6",
       "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.6.tgz",
diff --git a/package.json b/package.json
index a71f4e8..e50821c 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@codemirror/lang-markdown": "^6.5.0",
     "@codemirror/lang-python": "^6.2.1",
     "@codemirror/lang-rust": "^6.0.2",
+    "@codemirror/legacy-modes": "^6.5.2",
     "@earendil-works/pi-coding-agent": "^0.74.0",
     "@fastify/static": "^8.3.0",
     "@fastify/websocket": "^11.2.0",
diff --git a/src/client/src/components/CodeViewer.ts b/src/client/src/components/CodeViewer.ts
index 97280a4..57ebcee 100644
--- a/src/client/src/components/CodeViewer.ts
+++ b/src/client/src/components/CodeViewer.ts
@@ -1,7 +1,7 @@
 import { EditorState, type Extension } from "@codemirror/state";
 import { EditorView, keymap, lineNumbers } from "@codemirror/view";
 import { defaultKeymap } from "@codemirror/commands";
-import { syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
+import { syntaxHighlighting, defaultHighlightStyle, StreamLanguage } from "@codemirror/language";
 import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
 import { markdown } from "@codemirror/lang-markdown";
@@ -10,6 +10,7 @@ import { html as htmlLang } from "@codemirror/lang-html";
 import { python } from "@codemirror/lang-python";
 import { rust } from "@codemirror/lang-rust";
 import { go } from "@codemirror/lang-go";
+import { diff } from "@codemirror/legacy-modes/mode/diff";
 import { LitElement, css, html } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 
@@ -108,6 +109,7 @@ function languageExtensions(language: string | undefined): Extension[] {
     case "python": return [python()];
     case "rust": return [rust()];
     case "go": return [go()];
+    case "diff": return [StreamLanguage.define(diff)];
     default: return [];
   }
 }
diff --git a/src/client/src/components/WorkspacePanel.ts b/src/client/src/components/WorkspacePanel.ts
index 5336e92..1db0501 100644
--- a/src/client/src/components/WorkspacePanel.ts
+++ b/src/client/src/components/WorkspacePanel.ts
@@ -117,7 +117,7 @@ export class WorkspacePanel extends LitElement {
     if (diff === undefined) return html`<p class="muted">Loading diff…</p>`;
     return html`
       <div class="viewer-header"><strong>${diff.path ?? "diff"}</strong><small>${diff.staged ? "staged" : "unstaged"}${diff.truncated ? " · truncated" : ""}</small></div>
-      <code-viewer .content=${diff.diff !== "" ? diff.diff : "No unstaged diff."}></code-viewer>
+      <code-viewer .content=${diff.diff !== "" ? diff.diff : "No unstaged diff."} .language=${"diff"}></code-viewer>
     `;
   }