From d94879e85b8d87edc10f19291ba498e4bc7aedf4 Mon Sep 17 00:00:00 2001
From: Nexus Dev <nexus@local>
Date: Wed, 1 Apr 2026 16:37:56 +0000
Subject: [PATCH] feat(21-02): install rehype-highlight and add hljs theme CSS
 overrides

- Add rehype-highlight ^7.0.2 to ui/package.json dependencies
- Add highlight.js syntax theme CSS overrides to ui/src/index.css
- Cover Catppuccin Mocha (.dark), Tokyo Night (.theme-tokyo-night), Catppuccin Latte (:root)
---
 ui/package.json  |  1 +
 ui/src/index.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+)

diff --git a/ui/package.json b/ui/package.json
index 4e0041c2..f40e6188 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -57,6 +57,7 @@
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^7.1.5",
+    "rehype-highlight": "^7.0.2",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.4.1"
   },
diff --git a/ui/src/index.css b/ui/src/index.css
index 274e51b7..c2cf4852 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -150,6 +150,65 @@
   --sidebar-ring: #7aa2f7;
 }
 
+/* -- highlight.js syntax theme overrides (chat code blocks) ------------- */
+
+/* Base hljs reset -- ensure code blocks use our themed variables */
+.hljs {
+  background: var(--code-block-bg, hsl(var(--card))) !important;
+  color: var(--code-block-fg, hsl(var(--card-foreground))) !important;
+}
+
+/* Catppuccin Mocha (default dark) */
+.dark .hljs { --code-block-bg: #1e1e2e; --code-block-fg: #cdd6f4; }
+.dark .hljs-keyword { color: #cba6f7; }
+.dark .hljs-string { color: #a6e3a1; }
+.dark .hljs-number { color: #fab387; }
+.dark .hljs-comment { color: #6c7086; font-style: italic; }
+.dark .hljs-function { color: #89b4fa; }
+.dark .hljs-title { color: #89b4fa; }
+.dark .hljs-built_in { color: #f38ba8; }
+.dark .hljs-type { color: #f9e2af; }
+.dark .hljs-attr { color: #89dceb; }
+.dark .hljs-variable { color: #cdd6f4; }
+.dark .hljs-literal { color: #fab387; }
+.dark .hljs-meta { color: #f5e0dc; }
+.dark .hljs-selector-class { color: #89dceb; }
+.dark .hljs-selector-tag { color: #cba6f7; }
+
+/* Tokyo Night */
+.theme-tokyo-night .hljs { --code-block-bg: #1a1b26; --code-block-fg: #a9b1d6; }
+.theme-tokyo-night .hljs-keyword { color: #bb9af7; }
+.theme-tokyo-night .hljs-string { color: #9ece6a; }
+.theme-tokyo-night .hljs-number { color: #ff9e64; }
+.theme-tokyo-night .hljs-comment { color: #565f89; font-style: italic; }
+.theme-tokyo-night .hljs-function { color: #7aa2f7; }
+.theme-tokyo-night .hljs-title { color: #7aa2f7; }
+.theme-tokyo-night .hljs-built_in { color: #f7768e; }
+.theme-tokyo-night .hljs-type { color: #e0af68; }
+.theme-tokyo-night .hljs-attr { color: #73daca; }
+.theme-tokyo-night .hljs-variable { color: #a9b1d6; }
+.theme-tokyo-night .hljs-literal { color: #ff9e64; }
+.theme-tokyo-night .hljs-meta { color: #c0caf5; }
+.theme-tokyo-night .hljs-selector-class { color: #73daca; }
+.theme-tokyo-night .hljs-selector-tag { color: #bb9af7; }
+
+/* Catppuccin Latte (light) */
+:root .hljs { --code-block-bg: #eff1f5; --code-block-fg: #4c4f69; }
+:root .hljs-keyword { color: #8839ef; }
+:root .hljs-string { color: #40a02b; }
+:root .hljs-number { color: #fe640b; }
+:root .hljs-comment { color: #9ca0b0; font-style: italic; }
+:root .hljs-function { color: #1e66f5; }
+:root .hljs-title { color: #1e66f5; }
+:root .hljs-built_in { color: #d20f39; }
+:root .hljs-type { color: #df8e1d; }
+:root .hljs-attr { color: #179299; }
+:root .hljs-variable { color: #4c4f69; }
+:root .hljs-literal { color: #fe640b; }
+:root .hljs-meta { color: #dc8a78; }
+:root .hljs-selector-class { color: #179299; }
+:root .hljs-selector-tag { color: #8839ef; }
+
 @layer base {
   * {
     @apply border-border;