fix: Detect and render inline math using single dollar delimiters

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>

webclient/src/Article.js

@@ -106,7 +106,7 @@ function Article({ cache }) {
 
 			if (v.nodeName === '#text') {
 				const text = v.data;
-				if (text.includes('\\[') || text.includes('\\(') || text.includes('$$')) {
+				if (text.includes('\\[') || text.includes('\\(') || text.includes('$$') || text.includes('$')) {
 					return <Latex key={key} delimiters={latexDelimiters}>{text}</Latex>;
 				}
 
@@ -135,6 +135,12 @@ function Article({ cache }) {
 				);
 			}
 
+			const textContent = v.textContent.trim();
+			const isMath = (textContent.startsWith('\\(') && textContent.endsWith('\\)')) ||
+				(textContent.startsWith('\\[') && textContent.endsWith('\\]')) ||
+				(textContent.startsWith('$$') && textContent.endsWith('$$')) ||
+				(textContent.startsWith('$') && textContent.endsWith('$') && textContent.indexOf('$') !== textContent.lastIndexOf('$'));
+
 			const props = { key: key };
 			if (v.hasAttributes()) {
 				for (const attr of v.attributes) {
@@ -143,6 +149,28 @@ function Article({ cache }) {
 				}
 			}
 
+			if (isMath) {
+				let mathContent = v.textContent;
+				// align environment requires display math mode
+				if (mathContent.includes('\\begin{align')) {
+					const trimmed = mathContent.trim();
+					if (trimmed.startsWith('\\(')) {
+						// Replace \( and \) with \[ and \] to switch to display mode
+						const firstParen = mathContent.indexOf('\\(');
+						const lastParen = mathContent.lastIndexOf('\\)');
+						mathContent = mathContent.substring(0, firstParen) + '\\[' + mathContent.substring(firstParen + 2, lastParen) + '\\]' + mathContent.substring(lastParen + 2);
+					} else if (trimmed.startsWith('$') && !trimmed.startsWith('$$')) {
+						// Replace $ with $$
+						const firstDollar = mathContent.indexOf('$');
+						const lastDollar = mathContent.lastIndexOf('$');
+						if (firstDollar !== lastDollar) {
+							mathContent = mathContent.substring(0, firstDollar) + '$$' + mathContent.substring(firstDollar + 1, lastDollar) + '$$' + mathContent.substring(lastDollar + 1);
+						}
+					}
+				}
+				return <Tag {...props}><Latex delimiters={latexDelimiters}>{mathContent}</Latex></Tag>;
+			}
+
 			if (VOID_ELEMENTS.includes(Tag)) {
 				return <Tag {...props} />;
 			}