Merge branch 'dev_pnpm' into 'dev'

Dev pnpm

See merge request kantz/tutor_react!11

math-tutor/README.md

@@ -33,7 +33,8 @@ Frontend (Vite):
 
 ``` powershell
 cd math-tutor/frontend
-npm install
+corepack enable
+pnpm install --frozen-lockfile
 ```
 
 ## Run the app
@@ -50,7 +51,7 @@ Frontend (Vite):
 
 ```powershell
 cd math-tutor/frontend
-npm run dev
+pnpm run dev
 ```
 
 ### Task Deep Links
@@ -75,9 +76,22 @@ Add the frontend- and backend-adress in the `backend/.env`-file in the frontend-
 
 ```powershell
 python -m uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
-npm run dev -- --host 0.0.0.0
+pnpm run dev -- --host 0.0.0.0
 ```
 
+### Frontend package manager policy (pnpm)
+
+- Required versions:
+  - Node.js: 22.x or newer
+  - pnpm: pinned via `math-tutor/frontend/package.json` (`packageManager`)
+- Lockfile policy:
+  - Commit `pnpm-lock.yaml`.
+  - Use `pnpm install --frozen-lockfile` in local CI-like checks and Docker builds.
+- Install-script policy (strict):
+  - Dependency build/install scripts are allowlisted.
+  - After adding/updating dependencies, run `pnpm approve-builds` and review what is allowed.
+  - Check blocked scripts with `pnpm ignored-builds`.
+
 ### Vite Proxy (Development)
 
 The frontend now supports a dev proxy for API calls:

math-tutor/frontend/Dockerfile

@@ -2,11 +2,13 @@ FROM node:22-alpine AS build
 
 WORKDIR /app
 
-COPY package*.json ./
-RUN npm ci
+RUN corepack enable
+
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
 
 COPY . .
-RUN npm run build
+RUN pnpm run build
 
 FROM nginx:1.27-alpine
 

math-tutor/frontend/package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "packageManager": "pnpm@10.30.3",
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
@@ -32,5 +33,8 @@
   },
   "overrides": {
     "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": []
   }
 }

math-tutor/frontend/src/components/Chat/MessageBubble.tsx

-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
 import type { RetrievedDoc } from "../Retrieval/DocPanel";
 import { t } from "../../i18n";
+import { escapeAsterisksInsideMath } from "../../utils/mathMarkdown";
 
 type MessageBubbleProps = {
   role: "user" | "assistant";
@@ -28,6 +29,7 @@ export default function MessageBubble({
 }: MessageBubbleProps) {
   const bubbleRef = useRef<HTMLDivElement | null>(null);
   const [isRawView, setIsRawView] = useState(false);
+  const renderedText = useMemo(() => escapeAsterisksInsideMath(text), [text]);
 
   useEffect(() => {
     if (isRawView) {
@@ -146,7 +148,7 @@ export default function MessageBubble({
               },
             }}
           >
-            {text}
+            {renderedText}
           </ReactMarkdown>
         )}
       </div>

math-tutor/frontend/src/components/Retrieval/DocCard.tsx

-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import ReactMarkdown from "react-markdown";
 import { t } from "../../i18n";
+import { escapeAsterisksInsideMath } from "../../utils/mathMarkdown";
 
 declare global {
   interface Window {
@@ -30,6 +31,10 @@ export default function DocCard({
   defaultOpen = false,
 }: DocCardProps) {
   const contentRef = useRef<HTMLDivElement | null>(null);
+  const renderedSnippet = useMemo(
+    () => escapeAsterisksInsideMath(snippetMarkdown),
+    [snippetMarkdown]
+  );
 
   useEffect(() => {
     const typeset = () => {
@@ -60,7 +65,7 @@ export default function DocCard({
       </summary>
       {subtitle ? <div className="doc-subtitle">{subtitle}</div> : null}
       <div className="doc-snippet" ref={contentRef}>
-        <ReactMarkdown>{snippetMarkdown}</ReactMarkdown>
+        <ReactMarkdown>{renderedSnippet}</ReactMarkdown>
       </div>
       <div className="doc-actions">
         <button className="btn small" type="button" onClick={onInspect}>

math-tutor/frontend/src/utils/mathMarkdown.ts

+const MATH_SEGMENT_PATTERN =
+  /(\$\$[\s\S]*?\$\$|\\\[[\s\S]*?\\\]|\\\([\s\S]*?\\\)|\$(?:\\.|[^$\\\n])+\$)/g;
+
+const escapeAsterisks = (value: string) => value.replace(/\*/g, "\\*");
+
+export const escapeAsterisksInsideMath = (input: string): string => {
+  return input.replace(MATH_SEGMENT_PATTERN, (segment) => {
+    if (segment.startsWith("$$") && segment.endsWith("$$")) {
+      const inner = segment.slice(2, -2);
+      return `$$${escapeAsterisks(inner)}$$`;
+    }
+    if (segment.startsWith("\\[") && segment.endsWith("\\]")) {
+      const inner = segment.slice(2, -2);
+      return `\\[${escapeAsterisks(inner)}\\]`;
+    }
+    if (segment.startsWith("\\(") && segment.endsWith("\\)")) {
+      const inner = segment.slice(2, -2);
+      return `\\(${escapeAsterisks(inner)}\\)`;
+    }
+    if (segment.startsWith("$") && segment.endsWith("$")) {
+      const inner = segment.slice(1, -1);
+      return `$${escapeAsterisks(inner)}$`;
+    }
+    return segment;
+  });
+};
+