pi-studio 0.5.35 → 0.5.37

package/client/studio.css

@@ -220,6 +220,12 @@
       filter: brightness(0.95);
     }
 
+    #scratchpadBtn.has-content {
+      border-color: var(--accent);
+      color: var(--accent);
+      font-weight: 600;
+    }
+
     .section-header select {
       font-weight: 600;
       font-size: 14px;
@@ -523,6 +529,14 @@
       vertical-align: baseline;
     }
 
+    .annotation-preview-marker code {
+      font-family: var(--mono-font, ui-monospace, SFMono-Regular, Menlo, monospace);
+      font-size: 0.95em;
+      background: rgba(0, 0, 0, 0.08);
+      border-radius: 3px;
+      padding: 0 0.2em;
+    }
+
     #sourcePreview {
       flex: 1 1 auto;
       min-height: 0;
@@ -1331,6 +1345,125 @@
       background: var(--panel);
     }
 
+    body.scratchpad-open {
+      overflow: hidden;
+    }
+
+    .scratchpad-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 50;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+      background: rgba(0, 0, 0, 0.48);
+      backdrop-filter: blur(2px);
+    }
+
+    .scratchpad-overlay[hidden] {
+      display: none !important;
+    }
+
+    .scratchpad-dialog {
+      width: min(860px, 100%);
+      max-height: min(82vh, 900px);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      background: var(--panel);
+      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .scratchpad-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 16px 18px 12px;
+      border-bottom: 1px solid var(--border-muted);
+      background: var(--panel-2);
+    }
+
+    .scratchpad-header > div {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    .scratchpad-header h2 {
+      margin: 0;
+      font-size: 17px;
+      font-weight: 600;
+    }
+
+    .scratchpad-description {
+      margin: 6px 0 0;
+      font-size: 12px;
+      line-height: 1.45;
+      color: var(--muted);
+      max-width: none;
+    }
+
+    .scratchpad-close-btn {
+      padding: 6px 10px;
+      line-height: 1;
+      flex: 0 0 auto;
+    }
+
+    .scratchpad-textarea {
+      width: 100%;
+      min-height: 280px;
+      flex: 1 1 auto;
+      border: 0;
+      border-bottom: 1px solid var(--border-muted);
+      border-radius: 0;
+      margin: 0;
+      padding: 16px 18px;
+      background: var(--panel);
+      color: var(--text);
+      font-family: var(--font-mono);
+      font-size: 13px;
+      line-height: 1.55;
+      resize: vertical;
+      outline: none;
+    }
+
+    .scratchpad-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      flex-wrap: wrap;
+      padding: 12px 18px 16px;
+      background: var(--panel);
+    }
+
+    .scratchpad-meta {
+      font-size: 12px;
+      color: var(--muted);
+    }
+
+    .scratchpad-actions {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+
+    #scratchpadDoneBtn:not(:disabled) {
+      background: var(--accent);
+      border-color: var(--accent);
+      color: var(--accent-contrast);
+      font-weight: 600;
+    }
+
+    #scratchpadDoneBtn:not(:disabled):hover {
+      filter: brightness(0.95);
+    }
+
     #status.error { color: var(--error); }
     #status.warning { color: var(--warn); }
     #status.success { color: var(--ok); }

package/index.ts

@@ -8,6 +8,16 @@ import { homedir, tmpdir } from "node:os";
 import { basename, dirname, extname, isAbsolute, join, resolve } from "node:path";
 import { URL, pathToFileURL } from "node:url";
 import { WebSocketServer, WebSocket, type RawData } from "ws";
+import {
+	collectStudioInlineAnnotationMarkers,
+	hasStudioMarkdownAnnotationMarkers,
+	isStudioAnnotationWordChar,
+	normalizeStudioAnnotationText,
+	readStudioAnnotationProtectedTokenAt,
+	replaceStudioInlineAnnotationMarkers,
+	transformStudioMarkdownOutsideFences,
+} from "./shared/studio-annotation-scanner.js";
+import { escapeStudioPdfLatexTextFragment } from "./shared/studio-pdf-escape.js";
 
 type Lens = "writing" | "code";
 type RequestedLens = Lens | "auto";
@@ -18,6 +28,7 @@ type StudioPromptMode = "response" | "run" | "effective";
 type StudioPromptTriggerKind = "run" | "steer";
 
 const STUDIO_CSS_URL = new URL("./client/studio.css", import.meta.url);
+const STUDIO_ANNOTATION_HELPERS_URL = new URL("./client/studio-annotation-helpers.js", import.meta.url);
 const STUDIO_CLIENT_URL = new URL("./client/studio-client.js", import.meta.url);
 
 interface StudioServerState {
@@ -3023,14 +3034,6 @@ function inferStudioPdfLanguage(markdown: string, editorLanguage?: string): stri
 	return undefined;
 }
 
-function escapeStudioPdfLatexTextFragment(text: string): string {
-	return String(text ?? "")
-		.replace(/\\/g, "\\textbackslash{}")
-		.replace(/([{}%#$&_])/g, "\\$1")
-		.replace(/~/g, "\\textasciitilde{}")
-		.replace(/\^/g, "\\textasciicircum{}");
-}
-
 function escapeStudioPdfLatexText(text: string): string {
 	const normalized = String(text ?? "")
 		.replace(/\r\n/g, "\n")
@@ -3085,71 +3088,158 @@ function escapeStudioPdfLatexText(text: string): string {
 	return out.trim();
 }
 
-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 renderStudioAnnotationCodeSpanPdfLatex(rawToken: string): string {
+	const raw = String(rawToken ?? "");
+	if (!raw || raw[0] !== "`") return escapeStudioPdfLatexTextFragment(raw);
+
+	let fenceLength = 1;
+	while (raw[fenceLength] === "`") fenceLength += 1;
+	const fence = "`".repeat(fenceLength);
+	if (raw.length < fenceLength * 2 || raw.slice(raw.length - fenceLength) !== fence) {
+		return escapeStudioPdfLatexTextFragment(raw);
+	}
+
+	return `\\texttt{${escapeStudioPdfLatexTextFragment(raw.slice(fenceLength, raw.length - fenceLength))}}`;
 }
 
-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;
+function canOpenStudioAnnotationEmphasisDelimiter(source: string, startIndex: number, delimiter: string): boolean {
+	if (source.slice(startIndex, startIndex + delimiter.length) !== delimiter) return false;
+	const prev = startIndex > 0 ? source[startIndex - 1] ?? "" : "";
+	const next = source[startIndex + delimiter.length] ?? "";
+	if (!next || /\s/.test(next)) return false;
+	return !isStudioAnnotationWordChar(prev);
+}
 
-	const flushPlain = () => {
-		if (plainBuffer.length === 0) return;
-		out.push(replaceStudioAnnotationMarkersForPdfInSegment(plainBuffer.join("\n")));
-		plainBuffer = [];
-	};
+function canCloseStudioAnnotationEmphasisDelimiter(source: string, startIndex: number, delimiter: string): boolean {
+	if (source.slice(startIndex, startIndex + delimiter.length) !== delimiter) return false;
+	const prev = startIndex > 0 ? source[startIndex - 1] ?? "" : "";
+	const next = source[startIndex + delimiter.length] ?? "";
+	if (!prev || /\s/.test(prev)) return false;
+	return !isStudioAnnotationWordChar(next);
+}
 
-	for (const line of lines) {
-		const trimmed = line.trimStart();
-		const fenceMatch = trimmed.match(/^(`{3,}|~{3,})/);
+function renderStudioAnnotationPdfLatexContent(text: string): string {
+	const source = String(text ?? "");
+	let out = "";
+	let plainStart = 0;
+	let index = 0;
 
-		if (fenceMatch) {
-			const marker = fenceMatch[1]!;
-			const markerChar = marker[0] as "`" | "~";
-			const markerLength = marker.length;
+	while (index < source.length) {
+		const token = readStudioAnnotationProtectedTokenAt(source, index);
+		if (!token) {
+			index += 1;
+			continue;
+		}
 
-			if (!inFence) {
-				flushPlain();
-				inFence = true;
-				fenceChar = markerChar;
-				fenceLength = markerLength;
-				out.push(line);
-				continue;
-			}
+		if (index > plainStart) {
+			out += renderStudioAnnotationPlainTextPdfLatex(source.slice(plainStart, index));
+		}
 
-			if (fenceChar === markerChar && markerLength >= fenceLength) {
-				inFence = false;
-				fenceChar = undefined;
-				fenceLength = 0;
-			}
+		if (token.type === "code") {
+			out += renderStudioAnnotationCodeSpanPdfLatex(token.raw);
+		} else if (token.type === "math") {
+			out += escapeStudioPdfLatexText(token.raw);
+		} else {
+			out += escapeStudioPdfLatexTextFragment(token.raw);
+		}
 
-			out.push(line);
+		index = token.end;
+		plainStart = index;
+	}
+
+	if (plainStart < source.length) {
+		out += renderStudioAnnotationPlainTextPdfLatex(source.slice(plainStart));
+	}
+
+	return out;
+}
+
+function readStudioAnnotationPdfEmphasisSpanAt(source: string, startIndex: number, delimiter: string, commandName: string): { end: number; latex: string } | null {
+	if (!canOpenStudioAnnotationEmphasisDelimiter(source, startIndex, delimiter)) return null;
+
+	let index = startIndex + delimiter.length;
+	while (index < source.length) {
+		if (source[index] === "\\") {
+			index = Math.min(source.length, index + 2);
 			continue;
 		}
 
-		if (inFence) {
-			out.push(line);
-		} else {
-			plainBuffer.push(line);
+		const protectedToken = readStudioAnnotationProtectedTokenAt(source, index);
+		if (protectedToken) {
+			index = protectedToken.end;
+			continue;
+		}
+
+		if (canCloseStudioAnnotationEmphasisDelimiter(source, index, delimiter)) {
+			const inner = source.slice(startIndex + delimiter.length, index);
+			return {
+				end: index + delimiter.length,
+				latex: `\\${commandName}{${renderStudioAnnotationPdfLatexContent(inner)}}`,
+			};
 		}
+
+		index += 1;
 	}
 
-	flushPlain();
-	return out.join("\n");
+	return null;
+}
+
+function renderStudioAnnotationPlainTextPdfLatex(text: string): string {
+	const source = String(text ?? "");
+	let out = "";
+	let index = 0;
+
+	while (index < source.length) {
+		const strongMatch = readStudioAnnotationPdfEmphasisSpanAt(source, index, "**", "textbf")
+			?? readStudioAnnotationPdfEmphasisSpanAt(source, index, "__", "textbf");
+		if (strongMatch) {
+			out += strongMatch.latex;
+			index = strongMatch.end;
+			continue;
+		}
+
+		const emphasisMatch = readStudioAnnotationPdfEmphasisSpanAt(source, index, "*", "emph")
+			?? readStudioAnnotationPdfEmphasisSpanAt(source, index, "_", "emph");
+		if (emphasisMatch) {
+			out += emphasisMatch.latex;
+			index = emphasisMatch.end;
+			continue;
+		}
+
+		out += escapeStudioPdfLatexTextFragment(source[index] ?? "");
+		index += 1;
+	}
+
+	return out;
+}
+
+function renderStudioAnnotationPdfLatex(text: string): string {
+	const normalized = normalizeStudioAnnotationText(text);
+	if (!normalized) return "";
+	return renderStudioAnnotationPdfLatexContent(normalized).trim();
+}
+
+function replaceStudioAnnotationMarkersForPdfInSegment(text: string): string {
+	const replaced = replaceStudioInlineAnnotationMarkers(
+		String(text ?? ""),
+		(marker) => {
+			const cleaned = renderStudioAnnotationPdfLatex(marker.body);
+			if (!cleaned) return "";
+			return `\\studioannotation{${cleaned}}`;
+		},
+	);
+
+	return String(replaced ?? "")
+		.replace(/\{\[\}\s*an:\s*([\s\S]*?)\s*\{\]\}/gi, (_match, markerText: string) => {
+			const cleaned = renderStudioAnnotationPdfLatex(markerText);
+			if (!cleaned) return "";
+			return `\\studioannotation{${cleaned}}`;
+		});
+}
+
+function replaceStudioAnnotationMarkersForPdf(markdown: string): string {
+	if (!hasStudioMarkdownAnnotationMarkers(markdown)) return String(markdown ?? "");
+	return transformStudioMarkdownOutsideFences(markdown, (segment) => replaceStudioAnnotationMarkersForPdfInSegment(segment));
 }
 
 interface StudioPdfRenderOptions {
@@ -4146,38 +4236,19 @@ function replaceStudioAnnotationMarkersInDiffTokenLine(line: string, macroName:
 	if (!tokenMatch) return line;
 
 	const body = tokenMatch[1] ?? "";
-	const markerPattern = /\[an:\s*([^\]]+?)\]/gi;
-	let lastIndex = 0;
-	let rewritten = "";
-	let match: RegExpExecArray | null;
-
 	const wrapText = (text: string): string => text ? `\\${macroName}{${text}}` : "";
+	const rewritten = replaceStudioInlineAnnotationMarkers(
+		body,
+		(marker) => {
+			const markerText = decodeStudioGeneratedCodeLatexText(normalizeStudioAnnotationText(marker.body));
+			const cleaned = makeStudioHighlightingMathScriptsVerbatimSafe(renderStudioAnnotationPdfLatex(markerText));
+			if (!cleaned) return "";
+			return `\\studioannotation{${cleaned}}`;
+		},
+		(segment) => wrapText(segment),
+	);
 
-	while ((match = markerPattern.exec(body)) !== null) {
-		const token = match[0] ?? "";
-		const start = match.index;
-		if (start > lastIndex) {
-			rewritten += wrapText(body.slice(lastIndex, start));
-		}
-
-		const markerText = decodeStudioGeneratedCodeLatexText((match[1] ?? "").replace(/\s{2,}/g, " ").trim());
-		const cleaned = makeStudioHighlightingMathScriptsVerbatimSafe(escapeStudioPdfLatexText(markerText));
-		if (cleaned) {
-			rewritten += `\\studioannotation{${cleaned}}`;
-		}
-
-		lastIndex = start + token.length;
-		if (token.length === 0) {
-			markerPattern.lastIndex += 1;
-		}
-	}
-
-	if (lastIndex === 0) return line;
-	if (lastIndex < body.length) {
-		rewritten += wrapText(body.slice(lastIndex));
-	}
-
-	return rewritten || wrapText(body);
+	return rewritten === body ? line : (rewritten || wrapText(body));
 }
 
 function rewriteStudioGeneratedDiffHighlighting(latex: string): string {
@@ -4496,7 +4567,7 @@ async function renderStudioPdfWithPandoc(
 		}
 	};
 
-	if (isLatex && (latexSubfigurePdfTransform.groups.length > 0 || /\[an:\s*[^\]]+\]/i.test(sourceWithResolvedRefs))) {
+	if (isLatex && (latexSubfigurePdfTransform.groups.length > 0 || collectStudioInlineAnnotationMarkers(sourceWithResolvedRefs).length > 0)) {
 		return await renderStudioPdfFromGeneratedLatex(
 			sourceWithResolvedRefs,
 			pandocCommand,
@@ -5627,6 +5698,7 @@ function buildStudioHtml(
 	};
 	const cssVarsBlock = Object.entries(vars).map(([k, v]) => `      ${k}: ${v};`).join("\n");
 	const stylesheetHref = `/studio.css?token=${encodeURIComponent(studioToken ?? "")}`;
+	const annotationHelpersScriptHref = `/studio-annotation-helpers.js?token=${encodeURIComponent(studioToken ?? "")}`;
 	const clientScriptHref = `/studio-client.js?token=${encodeURIComponent(studioToken ?? "")}`;
 	const faviconHref = buildStudioFaviconDataUri(style);
 	const bootConfigJson = JSON.stringify({ mermaidConfig }).replace(/</g, "\\u003c");
@@ -5668,6 +5740,7 @@ ${cssVarsBlock}
         </div>
         <div class="section-header-actions">
           <button id="leftFocusBtn" class="pane-focus-btn" type="button" title="Show only the editor pane. Shortcut: F10 or Cmd/Ctrl+Esc.">Focus pane</button>
+          <button id="scratchpadBtn" type="button" title="Open a local persistent scratchpad for quick notes. Scratchpad text is never run, critiqued, or exported unless you explicitly insert it into the editor.">Scratchpad</button>
         </div>
       </div>
       <div class="source-wrap">
@@ -5803,11 +5876,34 @@ ${cssVarsBlock}
     <span class="shortcut-hint">Focus pane: F10 (or Cmd/Ctrl+Esc) to toggle · Run / queue steering: Cmd/Ctrl+Enter · Stop request: Esc</span>
   </footer>
 
+  <div id="scratchpadOverlay" class="scratchpad-overlay" hidden>
+    <div id="scratchpadDialog" class="scratchpad-dialog" role="dialog" aria-modal="true" aria-labelledby="scratchpadTitle">
+      <div class="scratchpad-header">
+        <div>
+          <h2 id="scratchpadTitle">Scratchpad</h2>
+          <p class="scratchpad-description">Local persistent notes for thoughts you want to park while working. Closing the scratchpad does not clear it: notes persist locally until you edit or clear them. Scratchpad text is not run, critiqued, sent, or exported unless you explicitly insert it into the editor.</p>
+        </div>
+        <button id="scratchpadCloseBtn" type="button" class="scratchpad-close-btn" aria-label="Keep current scratchpad text and close scratchpad" title="Keep current scratchpad text and close scratchpad">✕</button>
+      </div>
+      <textarea id="scratchpadText" class="scratchpad-textarea" placeholder="Jot quick thoughts, TODOs, or prompt ideas here..."></textarea>
+      <div class="scratchpad-footer">
+        <span id="scratchpadMeta" class="scratchpad-meta">Empty · local only</span>
+        <div class="scratchpad-actions">
+          <button id="scratchpadInsertBtn" type="button" title="Insert the scratchpad text into the editor at the current selection, or append it if no editor selection is available.">Insert into editor</button>
+          <button id="scratchpadCopyBtn" type="button" title="Copy scratchpad text to the clipboard.">Copy</button>
+          <button id="scratchpadClearBtn" type="button" title="Clear scratchpad text.">Clear</button>
+          <button id="scratchpadDoneBtn" type="button" title="Keep the current scratchpad text and close the scratchpad.">Keep and close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <!-- Defer sanitizer script so studio can boot/connect even if CDN is slow or blocked. -->
   <script defer src="https://cdn.jsdelivr.net/npm/dompurify@3.2.6/dist/purify.min.js"></script>
   <script>
     window.__PI_STUDIO_BOOT__ = ${bootConfigJson};
   </script>
+  <script src="${annotationHelpersScriptHref}"></script>
   <script src="${clientScriptHref}"></script>
 </body>
 </html>`;
@@ -7353,7 +7449,7 @@ export default function (pi: ExtensionAPI) {
 			return;
 		}
 
-		if (requestUrl.pathname === "/studio-client.js") {
+		if (requestUrl.pathname === "/studio-annotation-helpers.js" || requestUrl.pathname === "/studio-client.js") {
 			const token = requestUrl.searchParams.get("token") ?? "";
 			if (token !== serverState.token) {
 				respondText(res, 403, "Invalid or expired studio token. Re-run /studio.");
@@ -7367,8 +7463,15 @@ export default function (pi: ExtensionAPI) {
 				return;
 			}
 
+			const targetUrl = requestUrl.pathname === "/studio-annotation-helpers.js"
+				? STUDIO_ANNOTATION_HELPERS_URL
+				: STUDIO_CLIENT_URL;
+			const targetLabel = requestUrl.pathname === "/studio-annotation-helpers.js"
+				? "studio annotation helper script"
+				: "studio client script";
+
 			try {
-				const clientScript = readFileSync(STUDIO_CLIENT_URL, "utf-8");
+				const clientScript = readFileSync(targetUrl, "utf-8");
 				res.writeHead(200, {
 					"Content-Type": "application/javascript; charset=utf-8",
 					"Cache-Control": "no-store",
@@ -7377,7 +7480,7 @@ export default function (pi: ExtensionAPI) {
 				});
 				res.end(clientScript);
 			} catch (error) {
-				respondText(res, 500, `Failed to load studio client script: ${error instanceof Error ? error.message : String(error)}`);
+				respondText(res, 500, `Failed to load ${targetLabel}: ${error instanceof Error ? error.message : String(error)}`);
 			}
 			return;
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.5.35",
+  "version": "0.5.37",
   "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",
@@ -18,11 +18,15 @@
   "files": [
     "index.ts",
     "client",
+    "shared",
     "README.md",
     "CHANGELOG.md",
     "WORKFLOW.md",
     "assets/screenshots"
   ],
+  "scripts": {
+    "test": "node --test"
+  },
   "pi": {
     "extensions": [
       "./index.ts"