Add RA syntax highlighter with subscript rendering

Custom syntax highlighter for the RA editor that:
- Renders operators (σ, π, ρ, ×, ⋈, etc.) in purple
- Renders bracket content ([...], {...}) as italic subscript-style text
  with faint brackets to visually approximate mathematical notation
- Renders <- as ← and -> as → for visual clarity
- Highlights strings (green), numbers (amber), logic keywords (blue)
- Highlights -- comments in gray italic
- Supports LaTeX-style _{} notation with faint underscore
- Supports implicit subscripts (σ condition (R))

14 highlighter tests + 96 parser tests, all passing.

https://claude.ai/code/session_01TJyw8nESra9cc5RpVUpmt6

Author: claude

src/App.tsx

@@ -31,6 +31,7 @@ import { format } from "sql-formatter";
 import initSqlJs from "sql.js";
 import ViewsTable, { View } from "./ViewsTable";
 import { raToSQL, RAError } from "./relationalAlgebra";
+import { highlightRA } from "./raHighlight";
 
 import { Info, Settings, XCircle, CheckCircle2, Eye, EyeOff } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -901,10 +902,10 @@ function App() {
             <Editor
               id="placeholder-editor"
               itemID="placeholder-editor"
-              value={t("selectQuestionComment")}
+              value={editorMode === "ra" ? t("raPlaceholder") : t("selectQuestionComment")}
               disabled={true}
               onValueChange={_code => null}
-              highlight={code => highlight(code, languages.sql)}
+              highlight={code => editorMode === "ra" ? highlightRA(code) : highlight(code, languages.sql)}
               padding={10}
               tabSize={2}
               className="font-mono text-base w-full dark:bg-slate-800 bg-slate-100 min-h-32 rounded-md"
@@ -916,7 +917,7 @@ function App() {
               itemID="editor"
               value={query}
               onValueChange={code => setQuery(code)}
-              highlight={code => highlight(code, languages.sql)}
+              highlight={code => editorMode === "ra" ? highlightRA(code) : highlight(code, languages.sql)}
               padding={10}
               tabSize={2}
               className="font-mono text-base w-full dark:bg-slate-800 bg-slate-100 border dark:border-slate-600 border-gray-300 min-h-32 rounded-md"

src/raHighlight.test.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect } from "vitest";
+import { highlightRA } from "./raHighlight";
+
+describe("RA highlighter", () => {
+  it("should highlight σ operator in purple", () => {
+    const html = highlightRA("σ[age > 20](Person)");
+    expect(html).toContain("color: #7c3aed"); // operator color
+    expect(html).toContain("σ");
+  });
+
+  it("should render brackets faintly", () => {
+    const html = highlightRA("σ[age > 20](Person)");
+    expect(html).toContain("opacity: 0.4"); // faint brackets
+  });
+
+  it("should render subscript content in italic gray", () => {
+    const html = highlightRA("π[name](Person)");
+    expect(html).toContain("font-style: italic"); // subscript styling
+  });
+
+  it("should highlight string literals in green", () => {
+    const html = highlightRA("σ[name = 'Alice'](Person)");
+    expect(html).toContain("color: #059669"); // string color
+    expect(html).toContain("Alice");
+  });
+
+  it("should highlight numbers in amber", () => {
+    const html = highlightRA("σ[age > 20](Person)");
+    expect(html).toContain("color: #d97706"); // number color
+  });
+
+  it("should highlight AND/OR in blue", () => {
+    const html = highlightRA("σ[a > 1 and b < 2](T)");
+    expect(html).toContain("color: #2563eb"); // logic color
+    expect(html).toContain("and");
+  });
+
+  it("should highlight comments in gray italic", () => {
+    const html = highlightRA("-- this is a comment\nPerson");
+    expect(html).toContain("font-style: italic");
+    expect(html).toContain("this is a comment");
+  });
+
+  it("should render <- as ← visually", () => {
+    const html = highlightRA("A <- Person");
+    expect(html).toContain("←");
+  });
+
+  it("should render -> as → visually", () => {
+    const html = highlightRA("ρ[name->fullName](Person)");
+    expect(html).toContain("→");
+  });
+
+  it("should handle LaTeX-style _{} notation", () => {
+    const html = highlightRA("σ_{age > 20}(Person)");
+    // Should contain faint underscore and brackets
+    expect(html).toContain("opacity: 0.4");
+    expect(html).toContain("font-style: italic"); // subscript content
+  });
+
+  it("should highlight keyword operators", () => {
+    const html = highlightRA("sigma[age > 20](Person)");
+    expect(html).toContain("color: #7c3aed"); // operator color
+    expect(html).toContain("sigma");
+  });
+
+  it("should highlight binary keyword operators", () => {
+    const html = highlightRA("A cross B");
+    expect(html).toContain("color: #7c3aed");
+    expect(html).toContain("cross");
+  });
+
+  it("should preserve newlines", () => {
+    const html = highlightRA("A <- Person\nA");
+    expect(html).toContain("\n");
+  });
+
+  it("should handle implicit subscripts with whitespace", () => {
+    const html = highlightRA("σ age > 20 (Person)");
+    expect(html).toContain("font-style: italic"); // subscript styling for implicit content
+  });
+});