fix(chat): render LaTeX \\[..\\] / \\(..\\) delimiters (Issue #50)

src/components/CodeEditor.jsx

@@ -17,6 +17,7 @@ import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
+import { normalizeLatexDelimiters } from '../utils/latexNormalizer';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark as prismOneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { api } from '../utils/api';
@@ -138,7 +139,7 @@ function MarkdownPreview({ content }) {
       rehypePlugins={rehypePlugins}
       components={markdownPreviewComponents}
     >
-      {content}
+      {normalizeLatexDelimiters(content ?? '')}
     </ReactMarkdown>
   );
 }

src/components/ResearchLab.jsx

@@ -4,6 +4,7 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
+import { normalizeLatexDelimiters } from '../utils/latexNormalizer';
 import {
   FlaskConical, RefreshCw, FileText, BookOpen, Settings2, Lightbulb,
   GitBranch, FolderOpen, ChevronDown, ChevronRight, ExternalLink,
@@ -755,7 +756,7 @@ function OverviewCard({ instance, config, researchBrief, compact = false }) {
                           rehypePlugins={[rehypeKatex]}
                           components={OVERVIEW_MARKDOWN_COMPONENTS}
                         >
-                          {section.content}
+                          {normalizeLatexDelimiters(section.content)}
                         </ReactMarkdown>
                       </div>
                     </div>
@@ -1915,7 +1916,7 @@ function IdeaCard({ projectName, config, projectFileSet, compact = false }) {
             rehypePlugins={rehypePlugins}
             components={ideaMarkdownComponents}
           >
-            {ideaText}
+            {normalizeLatexDelimiters(ideaText)}
           </ReactMarkdown>
         </div>
       )}
@@ -2244,7 +2245,7 @@ function FileViewer({ projectName, file, onClose }) {
               rehypePlugins={[rehypeKatex]}
               components={markdownComponents}
             >
-              {content}
+              {normalizeLatexDelimiters(content ?? '')}
             </ReactMarkdown>
           </div>
         </div>

src/components/chat/utils/chatFormatting.ts

@@ -1,3 +1,5 @@
+import { normalizeLatexDelimiters } from '../../../utils/latexNormalizer';
+
 export function decodeHtmlEntities(text: string) {
   if (!text) return text;
   return text
@@ -20,11 +22,16 @@ export function normalizeInlineCodeFences(text: string) {
 export function unescapeWithMathProtection(text: string) {
   if (!text || typeof text !== 'string') return text;
 
+  // Rewrite \[..\] / \(..\) into $-delimited form before masking — the mask
+  // below only covers $-delimiters, so without this the \\t → \t replacement
+  // would corrupt \theta / \tau / \n-commands inside bracket-delimited math.
+  let processedText = normalizeLatexDelimiters(text);
+
   const mathBlocks: string[] = [];
   const placeholderPrefix = '__MATH_BLOCK_';
   const placeholderSuffix = '__';
 
-  let processedText = text.replace(/\$\$([\s\S]*?)\$\$|\$([^\$\n]+?)\$/g, (match) => {
+  processedText = processedText.replace(/\$\$([\s\S]*?)\$\$|\$([^\$\n]+?)\$/g, (match) => {
     const index = mathBlocks.length;
     mathBlocks.push(match);
     return `${placeholderPrefix}${index}${placeholderSuffix}`;

src/components/chat/view/subcomponents/ChatContextFilePreview.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
+import { normalizeLatexDelimiters } from '../../../../utils/latexNormalizer';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
@@ -307,7 +308,7 @@ export default function ChatContextFilePreview({
         <div className={`${previewHeightClass} flex-1 overflow-auto bg-muted/10 ${compact ? 'p-3' : 'p-4'}`}>
           <div className={`prose prose-sm max-w-none rounded-2xl border border-border/60 bg-background/90 shadow-sm dark:prose-invert ${compact ? 'p-4' : 'p-5'}`}>
             <ReactMarkdown remarkPlugins={[remarkGfm, remarkMath]} rehypePlugins={[rehypeKatex]}>
-              {content}
+              {normalizeLatexDelimiters(content)}
             </ReactMarkdown>
           </div>
         </div>

src/components/survey/view/SurveyPage.tsx

@@ -2,6 +2,9 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import { normalizeLatexDelimiters } from '../../../utils/latexNormalizer';
 import {
   BookOpen,
   FileText,
@@ -250,7 +253,12 @@ function PreviewContent({
       {file.previewKind === 'markdown' && preview.content ? (
         <div className="min-h-[42rem] overflow-auto rounded-xl border border-border/50 bg-background/60 p-6 shadow-sm">
           <div className="prose prose-sm max-w-none dark:prose-invert">
-            <ReactMarkdown remarkPlugins={[remarkGfm]}>{preview.content}</ReactMarkdown>
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm, remarkMath]}
+              rehypePlugins={[rehypeKatex]}
+            >
+              {normalizeLatexDelimiters(preview.content)}
+            </ReactMarkdown>
           </div>
         </div>
       ) : null}

src/utils/latexNormalizer.ts

@@ -0,0 +1,29 @@
+// remark-math only recognizes $-delimiters; rewrite \[..\] and \(..\) so KaTeX
+// sees them. Fenced code blocks and inline code pass through untouched.
+
+const PROTECTED_SEGMENTS = /```[\s\S]*?```|`[^`\n]*`/g;
+const MATH_DELIMITERS = /\\\[([\s\S]+?)\\\]|\\\(([^\n]+?)\\\)/g;
+
+export function normalizeLatexDelimiters(input: string): string {
+  if (input.length === 0) return input;
+  if (!input.includes('\\[') && !input.includes('\\(')) return input;
+
+  let output = '';
+  let cursor = 0;
+
+  for (const match of input.matchAll(PROTECTED_SEGMENTS)) {
+    const start = match.index;
+    output += rewriteMathDelimiters(input.slice(cursor, start));
+    output += match[0];
+    cursor = start + match[0].length;
+  }
+  output += rewriteMathDelimiters(input.slice(cursor));
+  return output;
+}
+
+function rewriteMathDelimiters(segment: string): string {
+  if (!segment) return segment;
+  return segment.replace(MATH_DELIMITERS, (_, display, inline) =>
+    display !== undefined ? `$$${display}$$` : `$${inline}$`,
+  );
+}