pi-studio 0.5.29 → 0.5.31

package/CHANGELOG.md

@@ -4,6 +4,19 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.5.31] — 2026-03-24
+
+### Fixed
+- The right-pane response view now nudges the browser to repaint after response renders complete, reducing cases where freshly rendered response content stayed visually blank until the user scrolled or interacted with the pane.
+- Newly selected or newly arrived responses now reset the right-pane scroll position to the top by default, while **Editor (Preview)** continues to preserve scroll position so in-place edit/preview workflows still feel natural.
+
+## [0.5.30] — 2026-03-24
+
+### Fixed
+- LaTeX preview now preserves structured display-math environments such as `bmatrix` inside `\[ ... \]` instead of flattening their rows during Markdown math normalization, and preview display equations now center more robustly across browser engines.
+- Studio now highlights custom `[an: ...]` markers in LaTeX editor syntax-highlighting mode, and PDF export renders those markers as styled annotation badges for both Markdown and LaTeX documents instead of leaving the raw bracket syntax in the final PDF.
+- Right-pane response PDF export now also respects the current annotation-visibility mode, so hidden annotations do not leak into exported PDFs as raw `[an: ...]` text.
+
 ## [0.5.29] — 2026-03-21
 
 ### Changed

package/client/studio-client.js

@@ -234,6 +234,7 @@
       let sourcePreviewRenderNonce = 0;
       let responsePreviewRenderNonce = 0;
       let responseEditorPreviewTimer = null;
+      let pendingResponseScrollReset = false;
       let editorMetaUpdateRaf = null;
       let editorHighlightEnabled = false;
       let editorLanguage = "markdown";
@@ -971,6 +972,7 @@
       }
 
       function clearActiveResponseView() {
+        pendingResponseScrollReset = false;
         latestResponseMarkdown = "";
         latestResponseThinking = "";
         latestResponseKind = "annotation";
@@ -1016,13 +1018,13 @@
         }
       }
 
-      function applySelectedHistoryItem() {
+      function applySelectedHistoryItem(options) {
         const item = getSelectedHistoryItem();
         if (!item) {
           clearActiveResponseView();
           return false;
         }
-        handleIncomingResponse(item.markdown, item.kind, item.timestamp, item.thinking);
+        handleIncomingResponse(item.markdown, item.kind, item.timestamp, item.thinking, options);
         return true;
       }
 
@@ -1035,9 +1037,13 @@
           return false;
         }
 
+        const previousItem = getSelectedHistoryItem();
+        const previousId = previousItem && typeof previousItem.id === "string" ? previousItem.id : null;
         const nextIndex = Math.max(0, Math.min(total - 1, Number(index) || 0));
         responseHistoryIndex = nextIndex;
-        const applied = applySelectedHistoryItem();
+        const nextItem = getSelectedHistoryItem();
+        const nextId = nextItem && typeof nextItem.id === "string" ? nextItem.id : null;
+        const applied = applySelectedHistoryItem({ resetScroll: previousId !== nextId });
         updateHistoryControls();
 
         if (applied && !(options && options.silent)) {
@@ -1539,6 +1545,33 @@
         targetEl.classList.remove("preview-pending");
       }
 
+      function scheduleResponsePaneRepaintNudge() {
+        if (!critiqueViewEl || typeof critiqueViewEl.getBoundingClientRect !== "function") return;
+        const schedule = typeof window.requestAnimationFrame === "function"
+          ? window.requestAnimationFrame.bind(window)
+          : (cb) => window.setTimeout(cb, 16);
+
+        schedule(() => {
+          if (!critiqueViewEl || !critiqueViewEl.isConnected) return;
+          void critiqueViewEl.getBoundingClientRect();
+          if (!critiqueViewEl.classList) return;
+          critiqueViewEl.classList.add("response-repaint-nudge");
+          schedule(() => {
+            if (!critiqueViewEl || !critiqueViewEl.classList) return;
+            critiqueViewEl.classList.remove("response-repaint-nudge");
+          });
+        });
+      }
+
+      function applyPendingResponseScrollReset() {
+        if (!pendingResponseScrollReset || !critiqueViewEl) return false;
+        if (rightView === "editor-preview") return false;
+        critiqueViewEl.scrollTop = 0;
+        critiqueViewEl.scrollLeft = 0;
+        pendingResponseScrollReset = false;
+        return true;
+      }
+
       async function getMermaidApi() {
         if (mermaidModulePromise) {
           return mermaidModulePromise;
@@ -1715,7 +1748,9 @@
           return;
         }
 
-        const markdown = rightView === "editor-preview" ? prepareEditorTextForPdfExport(sourceTextEl.value) : latestResponseMarkdown;
+        const markdown = rightView === "editor-preview"
+          ? prepareEditorTextForPdfExport(sourceTextEl.value)
+          : prepareEditorTextForPreview(latestResponseMarkdown);
         if (!markdown || !markdown.trim()) {
           setStatus("Nothing to export yet.", "warning");
           return;
@@ -1881,6 +1916,11 @@
               appendPreviewNotice(targetEl, "Images not displaying? Set working dir in the editor pane or open via /studio <path>.");
             }
           }
+
+          if (pane === "response") {
+            applyPendingResponseScrollReset();
+            scheduleResponsePaneRepaintNudge();
+          }
         } catch (error) {
           if (pane === "source") {
             if (nonce !== sourcePreviewRenderNonce || editorView !== "preview") return;
@@ -1891,6 +1931,10 @@
           const detail = error && error.message ? error.message : String(error || "unknown error");
           finishPreviewRender(targetEl);
           targetEl.innerHTML = buildPreviewErrorHtml("Preview renderer unavailable (" + detail + "). Showing plain markdown.", markdown);
+          if (pane === "response") {
+            applyPendingResponseScrollReset();
+            scheduleResponsePaneRepaintNudge();
+          }
         }
       }
 
@@ -1960,11 +2004,13 @@
           if (!editorText.trim()) {
             finishPreviewRender(critiqueViewEl);
             critiqueViewEl.innerHTML = "<pre class='plain-markdown'>Editor is empty.</pre>";
+            scheduleResponsePaneRepaintNudge();
             return;
           }
           if (editorLanguage && editorLanguage !== "markdown" && editorLanguage !== "latex") {
             finishPreviewRender(critiqueViewEl);
             critiqueViewEl.innerHTML = "<div class='response-markdown-highlight'>" + highlightCode(editorText, editorLanguage, "preview") + "</div>";
+            scheduleResponsePaneRepaintNudge();
             return;
           }
           const nonce = ++responsePreviewRenderNonce;
@@ -1979,6 +2025,8 @@
           critiqueViewEl.innerHTML = thinking && thinking.trim()
             ? buildPlainMarkdownHtml(thinking)
             : "<pre class='plain-markdown'>No thinking available for this response.</pre>";
+          applyPendingResponseScrollReset();
+          scheduleResponsePaneRepaintNudge();
           return;
         }
 
@@ -1986,6 +2034,8 @@
         if (!markdown || !markdown.trim()) {
           finishPreviewRender(critiqueViewEl);
           critiqueViewEl.innerHTML = "<pre class='plain-markdown'>No response yet. Run editor text or critique editor text.</pre>";
+          applyPendingResponseScrollReset();
+          scheduleResponsePaneRepaintNudge();
           return;
         }
 
@@ -2003,16 +2053,22 @@
               "Response is too large for markdown highlighting. Showing plain markdown.",
               markdown,
             );
+            applyPendingResponseScrollReset();
+            scheduleResponsePaneRepaintNudge();
             return;
           }
 
           finishPreviewRender(critiqueViewEl);
           critiqueViewEl.innerHTML = "<div class='response-markdown-highlight'>" + highlightMarkdown(markdown) + "</div>";
+          applyPendingResponseScrollReset();
+          scheduleResponsePaneRepaintNudge();
           return;
         }
 
         finishPreviewRender(critiqueViewEl);
         critiqueViewEl.innerHTML = buildPlainMarkdownHtml(markdown);
+        applyPendingResponseScrollReset();
+        scheduleResponsePaneRepaintNudge();
       }
 
       function updateResultActionButtons(normalizedEditorText) {
@@ -2558,17 +2614,49 @@
         }
 
         if (lang === "latex") {
-          const texPattern = /(%.*$)|(\\(?:documentclass|usepackage|newtheorem|begin|end|section|subsection|subsubsection|chapter|part|title|author|date|maketitle|tableofcontents|includegraphics|caption|label|ref|eqref|cite|textbf|textit|texttt|emph|footnote|centering|newcommand|renewcommand|providecommand|bibliography|bibliographystyle|bibitem|item|input|include)\b)|(\\[A-Za-z]+)|(\{|\})|(\$\$?(?:[^$\\]|\\.)+\$\$?)|(\[(?:.*?)\])/g;
-          const highlighted = highlightCodeTokens(source, texPattern, (match) => {
-            if (match[1]) return "hl-code-com";
-            if (match[2]) return "hl-code-kw";
-            if (match[3]) return "hl-code-fn";
-            if (match[4]) return "hl-code-op";
-            if (match[5]) return "hl-code-str";
-            if (match[6]) return "hl-code-num";
-            return "hl-code";
-          });
-          return highlighted;
+          const texPattern = /(%.*$)|(\[an:\s*[^\]]+\])|(\\(?:documentclass|usepackage|newtheorem|begin|end|section|subsection|subsubsection|chapter|part|title|author|date|maketitle|tableofcontents|includegraphics|caption|label|ref|eqref|cite|textbf|textit|texttt|emph|footnote|centering|newcommand|renewcommand|providecommand|bibliography|bibliographystyle|bibitem|item|input|include)\b)|(\\[A-Za-z]+)|(\{|\})|(\$\$?(?:[^$\\]|\\.)+\$\$?)|(\[(?:.*?)\])/gi;
+          let out = "";
+          let lastIndex = 0;
+          texPattern.lastIndex = 0;
+
+          let match;
+          while ((match = texPattern.exec(source)) !== null) {
+            const token = match[0] || "";
+            const start = typeof match.index === "number" ? match.index : 0;
+
+            if (start > lastIndex) {
+              out += escapeHtml(source.slice(lastIndex, start));
+            }
+
+            if (match[1]) {
+              out += wrapHighlight("hl-code-com", token);
+            } else if (match[2]) {
+              out += highlightInlineAnnotations(token, renderMode);
+            } else if (match[3]) {
+              out += wrapHighlight("hl-code-kw", token);
+            } else if (match[4]) {
+              out += wrapHighlight("hl-code-fn", token);
+            } else if (match[5]) {
+              out += wrapHighlight("hl-code-op", token);
+            } else if (match[6]) {
+              out += wrapHighlight("hl-code-str", token);
+            } else if (match[7]) {
+              out += wrapHighlight("hl-code-num", token);
+            } else {
+              out += escapeHtml(token);
+            }
+
+            lastIndex = start + token.length;
+            if (token.length === 0) {
+              texPattern.lastIndex += 1;
+            }
+          }
+
+          if (lastIndex < source.length) {
+            out += escapeHtml(source.slice(lastIndex));
+          }
+
+          return out;
         }
 
         if (lang === "diff") {
@@ -3024,15 +3112,29 @@
         return lower.indexOf("## critiques") !== -1 && lower.indexOf("## document") !== -1;
       }
 
-      function handleIncomingResponse(markdown, kind, timestamp, thinking) {
+      function handleIncomingResponse(markdown, kind, timestamp, thinking, options) {
         const responseTimestamp =
           typeof timestamp === "number" && Number.isFinite(timestamp) && timestamp > 0
             ? timestamp
             : Date.now();
+        const responseThinking = typeof thinking === "string" ? thinking : "";
+        const responseKind = kind === "critique" ? "critique" : "annotation";
+        const resetScroll = options && Object.prototype.hasOwnProperty.call(options, "resetScroll")
+          ? Boolean(options.resetScroll)
+          : (
+            latestResponseKind !== responseKind
+            || latestResponseTimestamp !== responseTimestamp
+            || latestResponseNormalized !== normalizeForCompare(markdown)
+            || latestResponseThinkingNormalized !== normalizeForCompare(responseThinking)
+          );
+
+        if (resetScroll) {
+          pendingResponseScrollReset = true;
+        }
 
         latestResponseMarkdown = markdown;
-        latestResponseThinking = typeof thinking === "string" ? thinking : "";
-        latestResponseKind = kind === "critique" ? "critique" : "annotation";
+        latestResponseThinking = responseThinking;
+        latestResponseKind = responseKind;
         latestResponseTimestamp = responseTimestamp;
         latestResponseIsStructuredCritique = isStructuredCritique(markdown);
         latestResponseHasContent = Boolean(markdown && markdown.trim());
@@ -3050,10 +3152,10 @@
         refreshResponseUi();
       }
 
-      function applyLatestPayload(payload) {
+      function applyLatestPayload(payload, options) {
         if (!payload || typeof payload.markdown !== "string") return false;
         const responseKind = payload.kind === "critique" ? "critique" : "annotation";
-        handleIncomingResponse(payload.markdown, responseKind, payload.timestamp, payload.thinking);
+        handleIncomingResponse(payload.markdown, responseKind, payload.timestamp, payload.thinking, options);
         return true;
       }
 

package/client/studio.css

@@ -874,7 +874,9 @@
 
     .rendered-markdown mjx-container[display="true"] {
       display: block;
-      margin: 1em 0;
+      width: fit-content;
+      max-width: 100%;
+      margin: 1em auto;
       text-align: center;
       overflow-x: auto;
       overflow-y: hidden;
@@ -893,7 +895,7 @@
 
     .rendered-markdown .studio-display-equation-body math[display="block"],
     .rendered-markdown .studio-display-equation-body mjx-container[display="true"] {
-      margin: 0;
+      margin: 0 auto;
     }
 
     .rendered-markdown .studio-display-equation-number {
@@ -910,7 +912,9 @@
 
     .rendered-markdown math[display="block"] {
       display: block;
-      margin: 1em 0;
+      width: fit-content;
+      max-width: 100%;
+      margin: 1em auto;
       text-align: center;
       overflow-x: auto;
       overflow-y: hidden;
@@ -964,6 +968,12 @@
       opacity: 0.64;
     }
 
+    .panel-scroll.response-repaint-nudge {
+      outline: 1px solid transparent;
+      -webkit-transform: translateZ(0);
+      transform: translateZ(0);
+    }
+
     .preview-error {
       color: var(--warn);
       margin-bottom: 0.75em;

package/index.ts

@@ -205,6 +205,11 @@ const PDF_PREAMBLE = `\\usepackage{titlesec}
 \\titleformat{\\subsubsection}{\\normalsize\\bfseries\\sffamily}{}{0pt}{}
 \\titlespacing*{\\section}{0pt}{1.5ex plus 0.5ex minus 0.2ex}{1ex plus 0.2ex}
 \\titlespacing*{\\subsection}{0pt}{1.2ex plus 0.4ex minus 0.2ex}{0.6ex plus 0.1ex}
+\\usepackage{xcolor}
+\\definecolor{StudioAnnotationBg}{HTML}{EAF3FF}
+\\definecolor{StudioAnnotationBorder}{HTML}{8CB8FF}
+\\definecolor{StudioAnnotationText}{HTML}{1F5FBF}
+\\newcommand{\\studioannotation}[1]{\\begingroup\\setlength{\\fboxsep}{1.5pt}\\fcolorbox{StudioAnnotationBorder}{StudioAnnotationBg}{\\textcolor{StudioAnnotationText}{\\sffamily\\footnotesize\\strut #1}}\\endgroup}
 \\usepackage{caption}
 \\captionsetup[figure]{justification=raggedright,singlelinecheck=false}
 \\usepackage{enumitem}
@@ -2466,6 +2471,9 @@ function isLikelyMathExpression(expr: string): boolean {
 
 function collapseDisplayMathContent(expr: string): string {
 	let content = expr.trim();
+	if (/\\begin\{[^}]+\}|\\end\{[^}]+\}/.test(content)) {
+		return content;
+	}
 	if (content.includes("\\\\") || content.includes("\n")) {
 		content = content.replace(/\\\\\s*/g, " ");
 		content = content.replace(/\s*\n\s*/g, " ");
@@ -2646,6 +2654,85 @@ function inferStudioPdfLanguage(markdown: string, editorLanguage?: string): stri
 	return undefined;
 }
 
+function escapeStudioPdfLatexText(text: string): string {
+	return String(text ?? "")
+		.replace(/\r\n/g, "\n")
+		.replace(/\s*\n\s*/g, " ")
+		.trim()
+		.replace(/\\/g, "\\textbackslash{}")
+		.replace(/([{}%#$&_])/g, "\\$1")
+		.replace(/~/g, "\\textasciitilde{}")
+		.replace(/\^/g, "\\textasciicircum{}")
+		.replace(/\s{2,}/g, " ");
+}
+
+function replaceStudioAnnotationMarkersForPdfInSegment(text: string): string {
+	return String(text ?? "")
+		.replace(/\[an:\s*([^\]]+?)\]/gi, (_match, markerText: string) => {
+			const cleaned = escapeStudioPdfLatexText(markerText);
+			if (!cleaned) return "";
+			return `\\studioannotation{${cleaned}}`;
+		})
+		.replace(/\{\[\}\s*an:\s*([\s\S]*?)\s*\{\]\}/gi, (_match, markerText: string) => {
+			const cleaned = escapeStudioPdfLatexText(markerText);
+			if (!cleaned) return "";
+			return `\\studioannotation{${cleaned}}`;
+		});
+}
+
+function replaceStudioAnnotationMarkersForPdf(markdown: string): string {
+	const lines = String(markdown ?? "").split("\n");
+	const out: string[] = [];
+	let plainBuffer: string[] = [];
+	let inFence = false;
+	let fenceChar: "`" | "~" | undefined;
+	let fenceLength = 0;
+
+	const flushPlain = () => {
+		if (plainBuffer.length === 0) return;
+		out.push(replaceStudioAnnotationMarkersForPdfInSegment(plainBuffer.join("\n")));
+		plainBuffer = [];
+	};
+
+	for (const line of lines) {
+		const trimmed = line.trimStart();
+		const fenceMatch = trimmed.match(/^(`{3,}|~{3,})/);
+
+		if (fenceMatch) {
+			const marker = fenceMatch[1]!;
+			const markerChar = marker[0] as "`" | "~";
+			const markerLength = marker.length;
+
+			if (!inFence) {
+				flushPlain();
+				inFence = true;
+				fenceChar = markerChar;
+				fenceLength = markerLength;
+				out.push(line);
+				continue;
+			}
+
+			if (fenceChar === markerChar && markerLength >= fenceLength) {
+				inFence = false;
+				fenceChar = undefined;
+				fenceLength = 0;
+			}
+
+			out.push(line);
+			continue;
+		}
+
+		if (inFence) {
+			out.push(line);
+		} else {
+			plainBuffer.push(line);
+		}
+	}
+
+	flushPlain();
+	return out.join("\n");
+}
+
 function prepareStudioPdfMarkdown(markdown: string, isLatex?: boolean, editorLanguage?: string): string {
 	if (isLatex) return markdown;
 	const effectiveEditorLanguage = inferStudioPdfLanguage(markdown, editorLanguage);
@@ -2653,7 +2740,10 @@ function prepareStudioPdfMarkdown(markdown: string, isLatex?: boolean, editorLan
 		&& !isStudioSingleFencedCodeBlock(markdown)
 		? wrapStudioCodeAsMarkdown(markdown, effectiveEditorLanguage)
 		: markdown;
-	return normalizeObsidianImages(normalizeMathDelimiters(source));
+	const annotationReadySource = !effectiveEditorLanguage || effectiveEditorLanguage === "markdown" || effectiveEditorLanguage === "latex"
+		? replaceStudioAnnotationMarkersForPdf(source)
+		: source;
+	return normalizeObsidianImages(normalizeMathDelimiters(annotationReadySource));
 }
 
 function stripMathMlAnnotationTags(html: string): string {
@@ -2980,6 +3070,46 @@ async function renderStudioLiteralTextPdf(text: string, title = "Studio export")
 	}
 }
 
+function replaceStudioAnnotationMarkersInGeneratedLatex(latex: string): string {
+	const lines = String(latex ?? "").split("\n");
+	const out: string[] = [];
+	const rawEnvStack: string[] = [];
+	const rawEnvNames = new Set(["verbatim", "Verbatim", "Highlighting", "lstlisting"]);
+
+	const updateRawEnvStack = (line: string) => {
+		const envPattern = /\\(begin|end)\{([^}]+)\}/g;
+		let match: RegExpExecArray | null;
+		while ((match = envPattern.exec(line)) !== null) {
+			const kind = match[1];
+			const envName = match[2];
+			if (!envName || !rawEnvNames.has(envName)) continue;
+			if (kind === "begin") {
+				rawEnvStack.push(envName);
+			} else {
+				for (let i = rawEnvStack.length - 1; i >= 0; i -= 1) {
+					if (rawEnvStack[i] === envName) {
+						rawEnvStack.splice(i, 1);
+						break;
+					}
+				}
+			}
+		}
+	};
+
+	for (const line of lines) {
+		if (rawEnvStack.length > 0) {
+			out.push(line);
+			updateRawEnvStack(line);
+			continue;
+		}
+
+		out.push(replaceStudioAnnotationMarkersForPdfInSegment(line));
+		updateRawEnvStack(line);
+	}
+
+	return out.join("\n");
+}
+
 async function renderStudioPdfFromGeneratedLatex(
 	markdown: string,
 	pandocCommand: string,
@@ -3057,7 +3187,8 @@ async function renderStudioPdfFromGeneratedLatex(
 
 		const generatedLatex = await readFile(latexPath, "utf-8");
 		const injectedLatex = injectStudioLatexPdfSubfigureBlocks(generatedLatex, subfigureGroups, sourcePath, resourcePath);
-		const normalizedLatex = normalizeStudioGeneratedFigureCaptions(injectedLatex);
+		const annotationReadyLatex = replaceStudioAnnotationMarkersInGeneratedLatex(injectedLatex);
+		const normalizedLatex = normalizeStudioGeneratedFigureCaptions(annotationReadyLatex);
 		await writeFile(latexPath, normalizedLatex, "utf-8");
 
 		await new Promise<void>((resolve, reject) => {
@@ -3219,7 +3350,7 @@ async function renderStudioPdfWithPandoc(
 		}
 	};
 
-	if (isLatex && latexSubfigurePdfTransform.groups.length > 0) {
+	if (isLatex && (latexSubfigurePdfTransform.groups.length > 0 || /\[an:\s*[^\]]+\]/i.test(sourceWithResolvedRefs))) {
 		return await renderStudioPdfFromGeneratedLatex(
 			sourceWithResolvedRefs,
 			pandocCommand,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.5.29",
+  "version": "0.5.31",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, prompt/response history, and live Markdown/LaTeX/code preview",
   "type": "module",
   "license": "MIT",