🤖 perf: lazy-load syntax highlighting with IntersectionObserver

package.json

@@ -82,6 +82,7 @@
   "devDependencies": {
     "@eslint/js": "^9.36.0",
     "@playwright/test": "^1.56.0",
+    "@storybook/addon-docs": "^10.0.0",
     "@storybook/addon-links": "^10.0.0",
     "@storybook/react-vite": "^10.0.0",
     "@storybook/test-runner": "^0.24.0",
@@ -120,6 +121,7 @@
     "eslint": "^9.36.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-storybook": "10.0.0",
     "eslint-plugin-tailwindcss": "4.0.0-beta.0",
     "jest": "^30.1.3",
     "mermaid": "^11.12.0",
@@ -146,9 +148,7 @@
     "typescript-eslint": "^8.45.0",
     "vite": "^7.1.11",
     "vite-plugin-svgr": "^4.5.0",
-    "vite-plugin-top-level-await": "^1.6.0",
-    "eslint-plugin-storybook": "10.0.0",
-    "@storybook/addon-docs": "^10.0.0"
+    "vite-plugin-top-level-await": "^1.6.0"
   },
   "files": [
     "dist/**/*.js",

src/components/Messages/MarkdownComponents.tsx

@@ -1,12 +1,13 @@
 import type { ReactNode } from "react";
-import React, { useState, useEffect } from "react";
+import React, { useMemo } from "react";
 import { Mermaid } from "./Mermaid";
 import {
   getShikiHighlighter,
   mapToShikiLang,
   SHIKI_THEME,
 } from "@/utils/highlighting/shikiHighlighter";
 import { CopyButton } from "@/components/ui/CopyButton";
+import { useIntersectionHighlight } from "@/hooks/useIntersectionHighlight";
 
 interface CodeProps {
   node?: unknown;
@@ -58,21 +59,20 @@ function extractShikiLines(html: string): string[] {
 }
 
 /**
- * CodeBlock component with async Shiki highlighting
- * Displays code with line numbers in a CSS grid
+ * CodeBlock component with lazy async Shiki highlighting
+ * Displays code with line numbers in a CSS grid.
+ * Highlighting is deferred until the block enters the viewport.
  */
 const CodeBlock: React.FC<CodeBlockProps> = ({ code, language }) => {
-  const [highlightedLines, setHighlightedLines] = useState<string[] | null>(null);
-
   // Split code into lines, removing trailing empty line
-  const plainLines = code
-    .split("\n")
-    .filter((line, idx, arr) => idx < arr.length - 1 || line !== "");
-
-  useEffect(() => {
-    let cancelled = false;
+  const plainLines = useMemo(
+    () => code.split("\n").filter((line, idx, arr) => idx < arr.length - 1 || line !== ""),
+    [code]
+  );
 
-    async function highlight() {
+  // Lazy highlight when code block becomes visible
+  const { result: highlightedLines, ref } = useIntersectionHighlight(
+    async () => {
       try {
         const highlighter = await getShikiHighlighter();
         const shikiLang = mapToShikiLang(language);
@@ -89,30 +89,24 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ code, language }) => {
           theme: SHIKI_THEME,
         });
 
-        if (!cancelled) {
-          const lines = extractShikiLines(html);
-          // Remove trailing empty line if present
-          const filteredLines = lines.filter(
-            (line, idx, arr) => idx < arr.length - 1 || line.trim() !== ""
-          );
-          setHighlightedLines(filteredLines.length > 0 ? filteredLines : null);
-        }
+        const lines = extractShikiLines(html);
+        // Remove trailing empty line if present
+        const filteredLines = lines.filter(
+          (line, idx, arr) => idx < arr.length - 1 || line.trim() !== ""
+        );
+        return filteredLines.length > 0 ? filteredLines : null;
       } catch (error) {
         console.warn(`Failed to highlight code block (${language}):`, error);
-        if (!cancelled) setHighlightedLines(null);
+        return null;
       }
-    }
-
-    void highlight();
-    return () => {
-      cancelled = true;
-    };
-  }, [code, language]);
+    },
+    [code, language]
+  );
 
   const lines = highlightedLines ?? plainLines;
 
   return (
-    <div className="code-block-wrapper">
+    <div ref={ref} className="code-block-wrapper">
       <div className="code-block-container">
         {lines.map((content, idx) => (
           <React.Fragment key={idx}>

src/components/shared/DiffRenderer.test.tsx

@@ -1,10 +1,29 @@
 /**
  * Tests for DiffRenderer components
- *
- * These are integration tests that verify the review note feature works end-to-end.
- * We test the line extraction and formatting logic that ReviewNoteInput uses internally.
  */
 
+
+// ============================================================================
+// Component Rendering Tests
+// ============================================================================
+// TODO: Add React Testing Library tests for component rendering
+// These tests would verify:
+// - Plain diff renders immediately
+// - Line numbers display correctly with custom oldStart/newStart
+// - Line selection works before highlighting completes
+// - Height consistency between plain and highlighted modes
+//
+// Note: RTL tests need proper DOM setup which is complex in bun test environment.
+// Consider adding these as integration tests using Playwright or Cypress instead.
+//
+// For now, the critical functionality is covered by the review note logic tests below,
+// and the component works correctly in manual testing.
+// ============================================================================
+
+// ============================================================================
+// Review Note Logic Tests
+// ============================================================================
+
 describe("SelectableDiffRenderer review notes", () => {
   it("should extract correct line content for review notes", () => {
     // Simulate the internal review note building logic