feat(messages): add optional LaTeX math rendering

package.json

@@ -47,12 +47,15 @@
     "@tauri-apps/plugin-updater": "^2.10.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
+    "katex": "^0.16.44",
     "lucide-react": "^0.562.0",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
+    "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
     "tauri-plugin-liquid-glass-api": "^0.1.6",
     "vscode-material-icons": "^0.1.1"
   },

src-tauri/src/types.rs

@@ -499,6 +499,11 @@ pub(crate) struct AppSettings {
         rename = "showMessageFilePath"
     )]
     pub(crate) show_message_file_path: bool,
+    #[serde(
+        default = "default_math_rendering_enabled",
+        rename = "mathRenderingEnabled"
+    )]
+    pub(crate) math_rendering_enabled: bool,
     #[serde(
         default = "default_chat_history_scrollback_items",
         rename = "chatHistoryScrollbackItems"
@@ -715,6 +720,10 @@ fn default_show_message_file_path() -> bool {
     true
 }
 
+fn default_math_rendering_enabled() -> bool {
+    false
+}
+
 fn default_chat_history_scrollback_items() -> Option<u32> {
     Some(200)
 }
@@ -1157,6 +1166,7 @@ impl Default for AppSettings {
             theme: default_theme(),
             usage_show_remaining: default_usage_show_remaining(),
             show_message_file_path: default_show_message_file_path(),
+            math_rendering_enabled: default_math_rendering_enabled(),
             chat_history_scrollback_items: default_chat_history_scrollback_items(),
             thread_title_autogeneration_enabled: false,
             automatic_app_update_checks_enabled: true,
@@ -1323,6 +1333,7 @@ mod tests {
         assert_eq!(settings.theme, "system");
         assert!(!settings.usage_show_remaining);
         assert!(settings.show_message_file_path);
+        assert!(!settings.math_rendering_enabled);
         assert_eq!(settings.chat_history_scrollback_items, Some(200));
         assert!(!settings.thread_title_autogeneration_enabled);
         assert!(settings.automatic_app_update_checks_enabled);

src/App.tsx

@@ -1,4 +1,5 @@
 import { lazy, Suspense } from "react";
+import "katex/dist/katex.min.css";
 import "./styles/base.css";
 import "./styles/ds-tokens.css";
 import "./styles/ds-modal.css";

src/features/app/components/MainApp.tsx

@@ -1580,6 +1580,7 @@ export default function MainApp() {
       composerCodeBlockCopyUseModifier:
         appSettings.composerCodeBlockCopyUseModifier,
       showMessageFilePath: appSettings.showMessageFilePath,
+      mathRenderingEnabled: appSettings.mathRenderingEnabled,
       openAppTargets: appSettings.openAppTargets,
       selectedOpenAppId: appSettings.selectedOpenAppId,
       experimentalAppsEnabled: appSettings.experimentalAppsEnabled,

src/features/app/hooks/useMainAppLayoutSurfaces.ts

@@ -22,6 +22,7 @@ type UseMainAppLayoutSurfacesArgs = {
     | "usageShowRemaining"
     | "composerCodeBlockCopyUseModifier"
     | "showMessageFilePath"
+    | "mathRenderingEnabled"
     | "openAppTargets"
     | "selectedOpenAppId"
     | "experimentalAppsEnabled"
@@ -444,6 +445,7 @@ function buildPrimarySurface({
       openTargets: appSettings.openAppTargets,
       selectedOpenAppId: appSettings.selectedOpenAppId,
       codeBlockCopyUseModifier: appSettings.composerCodeBlockCopyUseModifier,
+      enableMathRendering: appSettings.mathRenderingEnabled,
       showMessageFilePath: appSettings.showMessageFilePath,
       userInputRequests,
       onUserInputSubmit,

src/features/messages/components/Markdown.test.tsx

@@ -557,4 +557,86 @@ describe("Markdown file-like href behavior", () => {
     expect(screen.getByText("Ready")).toBeTruthy();
   });
 
+  it("renders inline dollar math when enabled", () => {
+    const { container } = render(
+      <Markdown
+        value="Euler identity: $e^{i\\pi}+1=0$"
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelector(".katex")).toBeTruthy();
+    expect(container.textContent).toContain("Euler identity");
+  });
+
+  it("renders block math when enabled", () => {
+    const { container } = render(
+      <Markdown
+        value={["$$", "\\nabla \\cdot \\mathbf{E} = \\frac{\\rho}{\\varepsilon_0}", "$$"].join(
+          "\n",
+        )}
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelector(".katex-display")).toBeTruthy();
+  });
+
+  it("supports \\(inline\\) and \\[block\\] LaTeX delimiters when enabled", () => {
+    const { container } = render(
+      <Markdown
+        value={[
+          "Inline: \\(x^2 + y^2\\)",
+          "",
+          "\\[",
+          "\\int_0^1 x^2\\,dx = \\frac{1}{3}",
+          "\\]",
+        ].join("\n")}
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelectorAll(".katex").length).toBeGreaterThanOrEqual(2);
+    expect(container.querySelector(".katex-display")).toBeTruthy();
+  });
+
+  it("does not render math inside fenced code blocks", () => {
+    const { container } = render(
+      <Markdown
+        value={["```text", "$e^{i\\pi}+1=0$", "\\(x^2\\)", "```"].join("\n")}
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelector(".katex")).toBeNull();
+    expect(container.textContent).toContain("$e^{i\\pi}+1=0$");
+    expect(container.textContent).toContain("\\(x^2\\)");
+  });
+
+  it("keeps math-like delimiters literal inside long fences with nested shorter fences", () => {
+    const { container } = render(
+      <Markdown
+        value={[
+          "````text",
+          "inner fence marker:",
+          "```",
+          "\\(x^2\\)",
+          "\\[x+y\\]",
+          "````",
+          "Outside: \\(z^2\\)",
+        ].join("\n")}
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelector(".katex")).toBeTruthy();
+    expect(container.textContent).toContain("\\(x^2\\)");
+    expect(container.textContent).toContain("\\[x+y\\]");
+  });
+
 });

src/features/messages/components/Markdown.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState, type ReactNode, type MouseEvent } from "react";
 import ReactMarkdown, { type Components } from "react-markdown";
+import rehypeKatex from "rehype-katex";
 import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
 import { openUrl } from "@tauri-apps/plugin-opener";
 import {
   describeFileTarget,
@@ -20,6 +22,7 @@ type MarkdownProps = {
   codeBlock?: boolean;
   codeBlockStyle?: "default" | "message";
   codeBlockCopyUseModifier?: boolean;
+  enableMathRendering?: boolean;
   showFilePath?: boolean;
   workspacePath?: string | null;
   onOpenFileLink?: (path: ParsedFileLocation) => void;
@@ -296,6 +299,120 @@ function normalizeListIndentation(value: string) {
   return normalized.join("\n");
 }
 
+type MarkdownFenceState = {
+  marker: "`" | "~";
+  length: number;
+};
+
+const MARKDOWN_FENCE_OPENER_PATTERN = /^ {0,3}(`{3,}|~{3,})(.*)$/;
+const MARKDOWN_FENCE_CLOSER_PATTERN = /^ {0,3}(`{3,}|~{3,})[ \t]*$/;
+const INLINE_CODE_PLACEHOLDER_PREFIX = "\u0000CODExINLINECODE";
+const INLINE_CODE_PLACEHOLDER_SUFFIX = "\u0000";
+const INLINE_CODE_PATTERN = /(`+)([\s\S]*?)\1/g;
+
+function parseFenceOpener(line: string): MarkdownFenceState | null {
+  const match = line.match(MARKDOWN_FENCE_OPENER_PATTERN);
+  if (!match) {
+    return null;
+  }
+  const sequence = match[1];
+  const marker = sequence[0];
+  if (marker !== "`" && marker !== "~") {
+    return null;
+  }
+  return {
+    marker,
+    length: sequence.length,
+  };
+}
+
+function isFenceCloser(line: string, activeFence: MarkdownFenceState) {
+  const match = line.match(MARKDOWN_FENCE_CLOSER_PATTERN);
+  if (!match) {
+    return false;
+  }
+  const sequence = match[1];
+  return sequence[0] === activeFence.marker && sequence.length >= activeFence.length;
+}
+
+function normalizeLatexMathDelimitersInChunk(value: string) {
+  const inlineCodeSpans: string[] = [];
+  const withMaskedInlineCode = value.replace(INLINE_CODE_PATTERN, (match) => {
+    const index = inlineCodeSpans.length;
+    inlineCodeSpans.push(match);
+    return `${INLINE_CODE_PLACEHOLDER_PREFIX}${index}${INLINE_CODE_PLACEHOLDER_SUFFIX}`;
+  });
+
+  const withBlockMath = withMaskedInlineCode.replace(
+    /\\\[([\s\S]*?)\\\]/g,
+    (match, body: string) => {
+      const trimmed = body.trim();
+      if (!trimmed) {
+        return match;
+      }
+      return `$$\n${trimmed}\n$$`;
+    },
+  );
+  const withInlineMath = withBlockMath.replace(
+    /\\\(([\s\S]*?)\\\)/g,
+    (match, body: string) => {
+      const trimmed = body.trim();
+      if (!trimmed) {
+        return match;
+      }
+      return `$${trimmed}$`;
+    },
+  );
+
+  return withInlineMath.replace(
+    new RegExp(
+      `${INLINE_CODE_PLACEHOLDER_PREFIX}(\\d+)${INLINE_CODE_PLACEHOLDER_SUFFIX}`,
+      "g",
+    ),
+    (_match, indexString: string) => {
+      const index = Number(indexString);
+      return inlineCodeSpans[index] ?? _match;
+    },
+  );
+}
+
+function normalizeLatexMathDelimiters(value: string) {
+  const lines = value.split(/\r?\n/);
+  const output: string[] = [];
+  let activeFence: MarkdownFenceState | null = null;
+  let nonFenceChunk: string[] = [];
+
+  const flushNonFenceChunk = () => {
+    if (nonFenceChunk.length === 0) {
+      return;
+    }
+    output.push(normalizeLatexMathDelimitersInChunk(nonFenceChunk.join("\n")));
+    nonFenceChunk = [];
+  };
+
+  for (const line of lines) {
+    if (activeFence) {
+      output.push(line);
+      if (isFenceCloser(line, activeFence)) {
+        activeFence = null;
+      }
+      continue;
+    }
+
+    const fenceOpener = parseFenceOpener(line);
+    if (fenceOpener) {
+      flushNonFenceChunk();
+      activeFence = fenceOpener;
+      output.push(line);
+      continue;
+    }
+    nonFenceChunk.push(line);
+  }
+
+  flushNonFenceChunk();
+  return output.join("\n");
+}
+
 function LinkBlock({ urls }: LinkBlockProps) {
   return (
     <div className="markdown-linkblock">
@@ -434,15 +551,20 @@ export function Markdown({
   codeBlock,
   codeBlockStyle = "default",
   codeBlockCopyUseModifier = false,
+  enableMathRendering = false,
   showFilePath = true,
   workspacePath = null,
   onOpenFileLink,
   onOpenFileLinkMenu,
   onOpenThreadLink,
 }: MarkdownProps) {
+  const markdownValue = codeBlock ? value : normalizeListIndentation(value);
+  const mathNormalizedValue = !codeBlock && enableMathRendering
+    ? normalizeLatexMathDelimiters(markdownValue)
+    : markdownValue;
   const normalizedValue = codeBlock
-    ? value
-    : normalizeStructuredReviewTables(normalizeListIndentation(value));
+    ? mathNormalizedValue
+    : normalizeStructuredReviewTables(mathNormalizedValue);
   const content = codeBlock
     ? `\`\`\`\n${normalizedValue}\n\`\`\``
     : normalizedValue;
@@ -611,7 +733,12 @@ export function Markdown({
   return (
     <div className={className}>
       <ReactMarkdown
-        remarkPlugins={[remarkGfm, remarkFileLinks]}
+        remarkPlugins={
+          enableMathRendering
+            ? [remarkGfm, remarkMath, remarkFileLinks]
+            : [remarkGfm, remarkFileLinks]
+        }
+        rehypePlugins={enableMathRendering ? [rehypeKatex] : undefined}
         urlTransform={(url) => {
           const hasScheme = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url);
           // Keep file-like hrefs intact before scheme sanitization runs, otherwise