pi-studio 0.5.47 → 0.5.48

package/CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.5.48] — 2026-04-07
+
+### Added
+- Editor-preview comments now also work for code, plain-text, and diff files using line-based preview selection anchors, so code/text review can use the same local comments workflow as Markdown preview.
+
+### Fixed
+- LaTeX editor preview now correctly treats `.tex`/LaTeX editor content as LaTeX in preview even when the document is only a fragment rather than a full `\documentclass` wrapper.
+- Ordinary response preview no longer flips into LaTeX mode just because quoted LaTeX commands like `` `\\documentclass` `` or `` `\\begin{document}` `` appear in a normal response.
+
+### Changed
+- LaTeX preview comments remain disabled for now; the earlier heuristic preview-side mapping attempts were removed in favor of keeping the rendering fixes and waiting for a more pipeline-grounded LaTeX comment design.
+
 ## [0.5.47] — 2026-04-07
 
 ### Changed

package/README.md

@@ -18,7 +18,7 @@ Extension for [pi](https://pi.dev) that opens a local two-pane browser workspace
 - Supports one canonical full Studio view per Pi session, plus additional editor-only companion views when you just want extra editing/preview surfaces
 - Runs editor text directly, or asks for structured critique (auto/writing/code focus)
 - Includes a local persistent scratchpad for quick notes you want to keep out of the main editor until you're ready to copy or insert them
-- Includes local comments anchored to selections/lines, shown in a docked **Comments** rail, with **Comment** actions from raw-editor and editor-preview selections plus optional inline `[an: ...]` toggles when you want them in the document text
+- Includes local comments anchored to selections/lines, shown in a docked **Comments** rail, with **Comment** actions from raw-editor selections plus editor-preview selections for Markdown and code/text/diff previews, alongside optional inline `[an: ...]` toggles when you want comments reflected in the document text
 - Browses response history (`Prev/Next/Last`) and loads either:
   - response text
   - critique notes/full critique

package/client/studio-client.js

@@ -1534,19 +1534,25 @@
 
       function sanitizeRenderedHtml(html, markdown) {
         const rawHtml = typeof html === "string" ? html : "";
-        const mathAnnotationStripped = rawHtml
-          .replace(/<annotation-xml\b[\s\S]*?<\/annotation-xml>/gi, "")
-          .replace(/<annotation\b[\s\S]*?<\/annotation>/gi, "");
+        const mathAnnotationPreserved = rawHtml.replace(/<math\b([^>]*)>([\s\S]*?)<\/math>/gi, (match, attrs, inner) => {
+          const texAnnotationMatch = String(inner || "").match(/<annotation\b[^>]*encoding="application\/x-tex"[^>]*>([\s\S]*?)<\/annotation>/i);
+          const texSource = texAnnotationMatch ? String(texAnnotationMatch[1] || "").trim() : "";
+          const cleanedInner = String(inner || "")
+            .replace(/<annotation-xml\b[\s\S]*?<\/annotation-xml>/gi, "")
+            .replace(/<annotation\b[\s\S]*?<\/annotation>/gi, "");
+          const texAttr = texSource ? (" data-tex-source=\"" + escapeHtml(texSource) + "\"") : "";
+          return "<math" + attrs + texAttr + ">" + cleanedInner + "</math>";
+        });
 
         if (window.DOMPurify && typeof window.DOMPurify.sanitize === "function") {
-          return window.DOMPurify.sanitize(mathAnnotationStripped, {
+          return window.DOMPurify.sanitize(mathAnnotationPreserved, {
             USE_PROFILES: {
               html: true,
               mathMl: true,
               svg: true,
             },
             ADD_TAGS: ["embed"],
-            ADD_ATTR: ["src", "type", "title", "width", "height", "style", "data-fig-align"],
+            ADD_ATTR: ["src", "type", "title", "width", "height", "style", "data-fig-align", "data-tex-source"],
             ADD_DATA_URI_TAGS: ["embed"],
           });
         }
@@ -2275,7 +2281,7 @@
         }
       }
 
-      async function renderMarkdownWithPandoc(markdown) {
+      async function renderMarkdownWithPandoc(markdown, options) {
         const token = getToken();
         if (!token) {
           throw new Error("Missing Studio token in URL.");
@@ -2288,20 +2294,26 @@
         const controller = typeof AbortController === "function" ? new AbortController() : null;
         const timeoutId = controller ? window.setTimeout(() => controller.abort(), 8000) : null;
 
+        const previewOptions = options && typeof options === "object" ? options : {};
+
         let response;
         try {
           const effectivePath = getEffectiveSavePath();
           const sourcePath = effectivePath || sourceState.path || "";
+          const payload = {
+            markdown: String(markdown || ""),
+            sourcePath: sourcePath,
+            resourceDir: (!sourcePath && resourceDirInput) ? resourceDirInput.value.trim() : "",
+          };
+          if (previewOptions.includeEditorLanguage) {
+            payload.editorLanguage = String(editorLanguage || "");
+          }
           response = await fetch("/render-preview?token=" + encodeURIComponent(token), {
             method: "POST",
             headers: {
               "Content-Type": "application/json",
             },
-            body: JSON.stringify({
-              markdown: String(markdown || ""),
-              sourcePath: sourcePath,
-              resourceDir: (!sourcePath && resourceDirInput) ? resourceDirInput.value.trim() : "",
-            }),
+            body: JSON.stringify(payload),
             signal: controller ? controller.signal : undefined,
           });
         } catch (error) {
@@ -2526,7 +2538,9 @@
           : { markdown: stripAnnotationMarkers(String(markdown || "")), placeholders: [] };
 
         try {
-          const renderedHtml = await renderMarkdownWithPandoc(previewPrepared.markdown);
+          const renderedHtml = await renderMarkdownWithPandoc(previewPrepared.markdown, {
+            includeEditorLanguage: pane === "source" || rightView === "editor-preview",
+          });
 
           if (pane === "source") {
             if (nonce !== sourcePreviewRenderNonce || editorView !== "preview") return;
@@ -2591,9 +2605,8 @@
       function renderSourcePreviewNow() {
         if (editorView !== "preview") return;
         const text = prepareEditorTextForPreview(sourceTextEl.value || "");
-        if (editorLanguage && editorLanguage !== "markdown" && editorLanguage !== "latex") {
-          finishPreviewRender(sourcePreviewEl);
-          sourcePreviewEl.innerHTML = "<div class='response-markdown-highlight'>" + highlightCode(text, editorLanguage, "preview") + "</div>";
+        if (supportsCodePreviewCommentsForCurrentEditor()) {
+          renderCodePreviewWithCommentBlocks(sourcePreviewEl, text, "source");
           return;
         }
         const nonce = ++sourcePreviewRenderNonce;
@@ -2660,10 +2673,8 @@
             scheduleResponsePaneRepaintNudge();
             return;
           }
-          if (editorLanguage && editorLanguage !== "markdown" && editorLanguage !== "latex") {
-            finishPreviewRender(critiqueViewEl);
-            critiqueViewEl.innerHTML = "<div class='response-markdown-highlight'>" + highlightCode(editorText, editorLanguage, "preview") + "</div>";
-            scheduleResponsePaneRepaintNudge();
+          if (supportsCodePreviewCommentsForCurrentEditor()) {
+            renderCodePreviewWithCommentBlocks(critiqueViewEl, editorText, "response");
             return;
           }
           const nonce = ++responsePreviewRenderNonce;
@@ -3798,6 +3809,68 @@
         return out.join("<br>");
       }
 
+      function supportsCodePreviewCommentsForCurrentEditor() {
+        return Boolean(editorLanguage) && editorLanguage !== "markdown" && editorLanguage !== "latex";
+      }
+
+      function getCodePreviewCommentKind(language) {
+        const lang = normalizeFenceLanguage(language || "");
+        if (lang === "diff") return "diff-line";
+        if (lang === "text") return "text-line";
+        return "code-line";
+      }
+
+      function buildCodePreviewHtmlWithCommentBlocks(text, language) {
+        const source = String(text || "").replace(/\r\n/g, "\n");
+        const lines = source.split("\n");
+        const lang = normalizeFenceLanguage(language || "");
+        const kind = getCodePreviewCommentKind(lang);
+        const html = [];
+        let offset = 0;
+
+        for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+          const line = String(lines[lineIndex] || "");
+          const start = offset;
+          const end = start + line.length;
+          const lineNumber = lineIndex + 1;
+          const lineHtml = line.length === 0
+            ? "<span class='hl-code'>" + EMPTY_OVERLAY_LINE + "</span>"
+            : (lang ? highlightCodeLine(line, lang, "preview") : escapeHtml(line));
+
+          html.push(
+            "<div class='preview-comment-block preview-comment-line-block'"
+              + " data-review-note-start='" + String(start) + "'"
+              + " data-review-note-end='" + String(end) + "'"
+              + " data-review-note-line-start='" + String(lineNumber) + "'"
+              + " data-review-note-line-end='" + String(lineNumber) + "'"
+              + " data-preview-comment-kind='" + escapeHtml(kind) + "'"
+              + ">"
+              + "<div class='preview-comment-controls'>"
+              + "<button type='button' class='preview-comment-summary' hidden></button>"
+              + "<button type='button' class='preview-comment-add'>Comment</button>"
+              + "</div>"
+              + "<div class='preview-comment-block-content preview-code-line-content'>" + lineHtml + "</div>"
+              + "</div>",
+          );
+
+          offset = end + 1;
+        }
+
+        return "<div class='response-markdown-highlight preview-code-lines'>" + html.join("") + "</div>";
+      }
+
+      function renderCodePreviewWithCommentBlocks(targetEl, text, pane) {
+        if (!targetEl) return;
+        clearPreviewJumpHighlight(targetEl);
+        finishPreviewRender(targetEl);
+        targetEl.innerHTML = buildCodePreviewHtmlWithCommentBlocks(text, editorLanguage || "");
+        updatePreviewCommentBlocksForElement(targetEl);
+        if (pane === "response") {
+          applyPendingResponseScrollReset();
+          scheduleResponsePaneRepaintNudge();
+        }
+      }
+
       function detectLanguageFromName(name) {
         if (!name) return "";
         var dot = name.lastIndexOf(".");
@@ -4361,7 +4434,10 @@
       }
 
       function supportsPreviewCommentsForCurrentEditor() {
-        return editorLanguage === "markdown";
+        // LaTeX preview comments are intentionally disabled for now.
+        // The initial client-side source/block heuristics were too unreliable on complex real documents.
+        // Keep the independent LaTeX rendering fixes, but only enable preview comments where mapping is robust.
+        return editorLanguage === "markdown" || supportsCodePreviewCommentsForCurrentEditor();
       }
 
       function getPreviewCommentBlockKindLabel(kind) {
@@ -4370,11 +4446,20 @@
         if (kind === "list") return "list";
         if (kind === "code") return "code block";
         if (kind === "table") return "table";
+        if (kind === "code-line") return "code line";
+        if (kind === "diff-line") return "diff line";
+        if (kind === "text-line") return "text line";
         return "paragraph";
       }
 
       function supportsPreviewSelectionCommentsForBlockKind(kind) {
-        return kind === "paragraph" || kind === "heading" || kind === "blockquote" || kind === "list";
+        return kind === "paragraph"
+          || kind === "heading"
+          || kind === "blockquote"
+          || kind === "list"
+          || kind === "code-line"
+          || kind === "diff-line"
+          || kind === "text-line";
       }
 
       function normalizeVisiblePreviewText(text) {
@@ -4711,6 +4796,11 @@
         return safeStartA < safeEndB && safeStartB < safeEndA;
       }
 
+      function scanSourcePreviewCommentBlocks(markdown) {
+        if (editorLanguage !== "markdown") return [];
+        return scanMarkdownPreviewCommentBlocks(markdown);
+      }
+
       function scanMarkdownPreviewCommentBlocks(markdown) {
         const source = String(markdown || "").replace(/\r\n/g, "\n");
         const lines = source.split("\n");
@@ -5077,7 +5167,7 @@
 
       function decorateRenderedEditorPreviewComments(targetEl, sourceText) {
         if (!targetEl || typeof targetEl.querySelectorAll !== "function") return;
-        const sourceBlocks = scanMarkdownPreviewCommentBlocks(sourceText);
+        const sourceBlocks = scanSourcePreviewCommentBlocks(sourceText);
         const targetBlocks = collectPreviewCommentTargetElements(targetEl);
         if (sourceBlocks.length === 0 || targetBlocks.length === 0) return;
 
@@ -5271,12 +5361,43 @@
         return bestBlock;
       }
 
+      function getPreviewNoteNormalizedSelectionText(note) {
+        const direct = normalizeVisiblePreviewText(note && (note.selectedDisplayText || note.selectedText) ? (note.selectedDisplayText || note.selectedText) : "");
+        if (direct) return direct;
+        return "";
+      }
+
+      function findPreviewCommentBlockForNoteText(targetEl, note) {
+        if (!targetEl || !note || typeof targetEl.querySelectorAll !== "function") return null;
+        const selectionText = getPreviewNoteNormalizedSelectionText(note);
+        if (!selectionText) return null;
+
+        let bestBlock = null;
+        let bestScore = Number.NEGATIVE_INFINITY;
+        Array.from(targetEl.querySelectorAll(".preview-comment-block")).forEach((blockEl) => {
+          const contentEl = blockEl.querySelector(".preview-comment-block-content") || blockEl;
+          const blockText = normalizeVisiblePreviewText(buildNormalizedDomTextMap(contentEl).text);
+          if (!blockText) return;
+          const matchIndex = blockText.indexOf(selectionText);
+          if (matchIndex < 0) return;
+          const lineStart = Math.max(1, Number(blockEl.dataset && blockEl.dataset.reviewNoteLineStart) || 1);
+          const desiredLine = Math.max(1, Number(note && note.lineStart) || 1);
+          const proximityPenalty = Math.abs(lineStart - desiredLine);
+          const score = 1000000 - (matchIndex * 4) - proximityPenalty - Math.max(0, blockText.length - selectionText.length);
+          if (score > bestScore) {
+            bestScore = score;
+            bestBlock = blockEl;
+          }
+        });
+        return bestBlock;
+      }
+
       function revealReviewNoteInPreviewElement(targetEl, note) {
         if (!targetEl || !note) return false;
         const source = String(sourceTextEl && sourceTextEl.value ? sourceTextEl.value : "");
         const range = resolveReviewNoteRange(note, source);
         if (!range) return false;
-        const blockEl = findPreviewCommentBlockForRange(targetEl, range);
+        const blockEl = findPreviewCommentBlockForRange(targetEl, range) || findPreviewCommentBlockForNoteText(targetEl, note);
         if (!blockEl) return false;
         const contentEl = blockEl.querySelector(".preview-comment-block-content") || blockEl;
         const inlineHighlightEl = createPreviewJumpInlineHighlight(contentEl, blockEl, note, range);
@@ -5288,6 +5409,7 @@
       }
 
       function revealReviewNoteInPreview(note) {
+        if (!supportsPreviewCommentsForCurrentEditor()) return;
         if (rightView === "editor-preview" && critiqueViewEl && critiqueViewEl.isConnected) {
           revealReviewNoteInPreviewElement(critiqueViewEl, note);
         }
@@ -7689,7 +7811,7 @@
         event.preventDefault();
         event.stopPropagation();
         const mode = String(actionBtn.dataset && actionBtn.dataset.previewCommentMode ? actionBtn.dataset.previewCommentMode : "");
-        if (mode !== "selection") return;
+        if (!mode || !mode.startsWith("selection")) return;
         addReviewNoteFromPreviewSelection(blockEl);
       }
 

package/client/studio.css

@@ -898,6 +898,24 @@
       scroll-margin-top: 24px;
     }
 
+    .preview-comment-line-block {
+      min-height: 1.5em;
+    }
+
+    .preview-code-lines {
+      white-space: pre-wrap;
+      word-break: break-word;
+      overflow-wrap: anywhere;
+    }
+
+    .preview-code-line-content {
+      display: block;
+      min-height: 1.5em;
+      white-space: inherit;
+      word-break: inherit;
+      overflow-wrap: inherit;
+    }
+
     .preview-comment-controls {
       position: absolute;
       top: 0;

package/index.ts

@@ -10,6 +10,7 @@ import { basename, dirname, extname, isAbsolute, join, resolve } from "node:path
 import { URL, pathToFileURL } from "node:url";
 import { WebSocketServer, WebSocket, type RawData } from "ws";
 import {
+	advancePastStudioInlineBacktickSpan,
 	collectStudioInlineAnnotationMarkers,
 	hasStudioMarkdownAnnotationMarkers,
 	isStudioAnnotationWordChar,
@@ -3263,6 +3264,26 @@ function inferStudioPdfLanguage(markdown: string, editorLanguage?: string): stri
 	return undefined;
 }
 
+function stripStudioMarkdownInlineCodeSpans(markdown: string): string {
+	const source = String(markdown ?? "");
+	let out = "";
+	let index = 0;
+	while (index < source.length) {
+		if (source[index] === "`") {
+			index = advancePastStudioInlineBacktickSpan(source, index);
+			continue;
+		}
+		out += source[index];
+		index += 1;
+	}
+	return out;
+}
+
+function isLikelyStandaloneLatexPreview(markdown: string): boolean {
+	const outsideFences = transformStudioMarkdownOutsideFences(markdown, (segment: string) => stripStudioMarkdownInlineCodeSpans(segment));
+	return /\\documentclass\b|\\begin\{document\}/.test(outsideFences);
+}
+
 function escapeStudioPdfLatexText(text: string): string {
 	const normalized = String(text ?? "")
 		.replace(/\r\n/g, "\n")
@@ -4043,9 +4064,15 @@ function prepareStudioPdfMarkdown(markdown: string, isLatex?: boolean, editorLan
 }
 
 function stripMathMlAnnotationTags(html: string): string {
-	return html
-		.replace(/<annotation-xml\b[\s\S]*?<\/annotation-xml>/gi, "")
-		.replace(/<annotation\b[\s\S]*?<\/annotation>/gi, "");
+	return String(html ?? "").replace(/<math\b([^>]*)>([\s\S]*?)<\/math>/gi, (_match, attrs, inner) => {
+		const texAnnotationMatch = String(inner ?? "").match(/<annotation\b[^>]*encoding="application\/x-tex"[^>]*>([\s\S]*?)<\/annotation>/i);
+		const texSource = texAnnotationMatch ? String(texAnnotationMatch[1] ?? "").trim() : "";
+		const cleanedInner = String(inner ?? "")
+			.replace(/<annotation-xml\b[\s\S]*?<\/annotation-xml>/gi, "")
+			.replace(/<annotation\b[\s\S]*?<\/annotation>/gi, "");
+		const texAttr = texSource ? ` data-tex-source="${escapeStudioHtmlText(texSource)}"` : "";
+		return `<math${attrs}${texAttr}>${cleanedInner}</math>`;
+	});
 }
 
 function normalizeObsidianImages(markdown: string): string {
@@ -7869,8 +7896,17 @@ export default function (pi: ExtensionAPI) {
 				parsedBody && typeof parsedBody === "object" && typeof (parsedBody as { resourceDir?: unknown }).resourceDir === "string"
 					? (parsedBody as { resourceDir: string }).resourceDir
 					: "";
+			const requestedEditorLanguage =
+				parsedBody && typeof parsedBody === "object" && typeof (parsedBody as { editorLanguage?: unknown }).editorLanguage === "string"
+					? (parsedBody as { editorLanguage: string }).editorLanguage
+					: "";
 			const resourcePath = resolveStudioBaseDir(sourcePath || undefined, userResourceDir || undefined, studioCwd);
-			const isLatex = /\\documentclass\b|\\begin\{document\}/.test(markdown);
+			const editorPreviewLanguage = normalizeStudioEditorLanguage(requestedEditorLanguage);
+			const isLatex = editorPreviewLanguage === "latex"
+				|| (
+					(editorPreviewLanguage === undefined || editorPreviewLanguage === "markdown")
+					&& isLikelyStandaloneLatexPreview(markdown)
+				);
 			const html = await renderStudioMarkdownWithPandoc(markdown, isLatex, resourcePath, sourcePath || undefined);
 			respondJson(res, 200, { ok: true, html, renderer: "pandoc" });
 		} catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.5.47",
+  "version": "0.5.48",
   "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",