pi-studio 0.9.32 → 0.9.33

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.9.33] — 2026-06-16
+
+### Added
+- Added `Cmd/Ctrl+Alt+E` to switch the right pane directly to Editor Preview.
+
+### Changed
+- Calmed annotation and comment affordance styling so annotations read more like highlighted feedback and less like heavy badges.
+- Slightly muted active Stop button styling while keeping it in the theme error colour family.
+- Derived PDF annotation colours from the active theme accent hue while keeping a light, print-friendly background.
+
+### Fixed
+- Preserved the Working view scroll position when switching between `All`, `Thinking`, and `Tools` filters unless the view was already pinned to the bottom.
+- Rendered standalone long `[an: ...]` annotations correctly in LaTeX-mode PDF exports even when Pandoc wraps the escaped marker across generated LaTeX lines.
+
 ## [0.9.32] — 2026-06-10
 
 ### Added

package/README.md

@@ -22,7 +22,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 want extra editing/preview surfaces; editor-only views can also browse files and use the Studio REPL send controls without taking over the full Studio session view
 - Includes a global **Zen** mode for hiding secondary Studio chrome without changing the current left/right pane layout
 - Runs editor text directly, asks for structured critique (auto/writing/code focus), offers a manual **Suggest completion** action for short cursor-aware continuations (`Option/Alt+Tab` where available or `Cmd/Ctrl+Shift+Space` from the editor, `Tab` to insert a visible suggestion) with an optional editor-plus-latest-response context mode, or opens **Quiz me** for a Studio-native active-recall loop over the current editor text, selection, current file, folder, or repo, with optional focus guidance for shaping question selection
-- Includes a live **Working** view for following current model/tool activity, with `All` / `Thinking` / `Tools` filters, image previews for image-producing tool outputs, plus **Load visible into editor** and **Copy visible** actions; when cycling response history, Working follows saved working details for the selected response when available, and `Cmd/Ctrl+Alt+W` switches the right pane directly to Working
+- Includes a live **Working** view for following current model/tool activity, with `All` / `Thinking` / `Tools` filters, image previews for image-producing tool outputs, plus **Load visible into editor** and **Copy visible** actions; when cycling response history, Working follows saved working details for the selected response when available, and `Cmd/Ctrl+Alt+P` / `Cmd/Ctrl+Alt+E` / `Cmd/Ctrl+Alt+W` switch directly between Response Preview, Editor Preview, and Working
 - Includes a right-pane **Changes** view for browsing the current git diff by file, previewing per-file diffs, opening changed files, loading the full diff into the editor, and copying the diff
 - Includes a right-pane **Files** view for browsing the current Pi session/resource directory, opening folders, opening the Files root in Finder/the system file manager, loading text/code/CSV/TSV documents into the editor, previewing PDFs/images, opening PDF/image previews in a new Studio tab, converting DOCX/ODT documents to editable Markdown when Pandoc is available after confirmation, copying paths, setting the current folder as the Studio working directory, and revealing files in the file manager
 - Includes an optional tmux-backed **REPL** view for Shell, Python, IPython, Julia, R, GHCi, and Clojure sessions, with Raw/Literate send modes, `Cmd/Ctrl+Shift+Enter` **Send to REPL**, session start/stop/interrupt controls, a compact refresh-persistent **Studio REPL Record** of user and Pi-sent code, a secondary raw tmux mirror, agent-facing `studio_repl_status` / `studio_repl_send` tools, and Markdown/PDF/HTML export

package/client/studio-client.js

@@ -269,8 +269,8 @@
           option.disabled = isEditorOnlyMode && !editorOnlyAllowed.has(option.value);
         });
         rightViewSelect.title = isEditorOnlyMode
-          ? "Editor-only views: editor preview, Changes, Files, or REPL. F7 cycles when the right pane is active; Cmd/Ctrl+Alt+P switches directly to Preview."
-          : "Right pane view mode. F7 cycles when the right pane is active; Cmd/Ctrl+Alt+P switches directly to Preview; Cmd/Ctrl+Alt+W switches directly to Working.";
+          ? "Editor-only views: editor preview, Changes, Files, or REPL. F7 cycles when the right pane is active; Cmd/Ctrl+Alt+P or Cmd/Ctrl+Alt+E switches directly to Preview."
+          : "Right pane view mode. F7 cycles when the right pane is active; Cmd/Ctrl+Alt+P switches directly to Response Preview; Cmd/Ctrl+Alt+E switches directly to Editor Preview; Cmd/Ctrl+Alt+W switches directly to Working.";
       }
 
       function getInitialRightView(source) {
@@ -859,7 +859,7 @@
         const normalized = normalizeTraceFilter(nextFilter);
         if (traceFilter === normalized) return;
         traceFilter = normalized;
-        traceAutoScroll = true;
+        traceAutoScroll = rightView === "trace" ? shouldStickTraceToBottom() : traceAutoScroll;
         renderTraceViewIfActive();
       }
 
@@ -3817,6 +3817,13 @@
         setStatus("Right pane view: Working.");
       }
 
+      function switchRightPaneToEditorPreview() {
+        const snapshot = snapshotStudioScrollablePositions();
+        setRightView("editor-preview");
+        scheduleStudioScrollablePositionRestore(snapshot);
+        setStatus("Right pane view: Editor (Preview).");
+      }
+
       function cycleActivePaneView(direction) {
         if (activePane === "right") {
           if (!rightViewSelect || rightViewSelect.disabled) {
@@ -4135,6 +4142,16 @@
           return;
         }
 
+        const isEditorPreviewShortcut = (key.toLowerCase() === "e" || code === "KeyE")
+          && (event.metaKey || event.ctrlKey)
+          && event.altKey
+          && !event.shiftKey;
+        if (isEditorPreviewShortcut) {
+          event.preventDefault();
+          switchRightPaneToEditorPreview();
+          return;
+        }
+
         const isContentFocusShortcut = key === "F8" && !event.metaKey && !event.ctrlKey && !event.altKey;
         if (isContentFocusShortcut) {
           event.preventDefault();

package/client/studio.css

@@ -210,15 +210,17 @@
 
     #sendRunBtn.request-stop-active,
     #critiqueBtn.request-stop-active {
-      background: var(--error);
-      border-color: var(--error);
+      background: color-mix(in srgb, var(--error) 82%, var(--panel));
+      border-color: color-mix(in srgb, var(--error) 88%, var(--panel));
       color: var(--error-contrast);
-      font-weight: 600;
+      font-weight: 700;
     }
 
     #sendRunBtn.request-stop-active:not(:disabled):hover,
     #critiqueBtn.request-stop-active:not(:disabled):hover {
-      filter: brightness(0.95);
+      background: var(--error);
+      border-color: var(--error);
+      filter: none;
     }
 
     .file-label {
@@ -930,17 +932,17 @@
       padding: 0 10px;
       font-size: 12px;
       line-height: 1;
-      background: var(--accent-soft);
-      border-color: var(--accent);
-      color: var(--accent);
+      background: color-mix(in srgb, var(--panel) 88%, var(--accent-soft));
+      border-color: var(--control-border);
+      color: var(--text);
       box-shadow: 0 1px 2px var(--shadow-color);
     }
 
     .editor-selection-action-btn:hover,
     .editor-selection-action-btn:focus-visible {
-      background: var(--accent-soft-strong);
+      background: var(--accent-soft);
       color: var(--accent);
-      border-color: var(--accent);
+      border-color: color-mix(in srgb, var(--accent) 45%, var(--control-border));
     }
 
     .editor-selection-actions[hidden],
@@ -1043,12 +1045,12 @@
     }
 
     .hl-annotation {
-      color: var(--accent);
-      background: var(--accent-soft);
+      color: color-mix(in srgb, var(--accent) 72%, var(--text));
+      background: color-mix(in srgb, var(--accent-soft) 58%, transparent);
       border: 0;
-      border-radius: 4px;
+      border-radius: 3px;
       padding: 0;
-      box-shadow: inset 0 0 0 1px var(--marker-border);
+      box-shadow: inset 0 -0.08em 0 color-mix(in srgb, var(--accent) 26%, transparent);
     }
 
     .hl-annotation-muted {
@@ -1057,10 +1059,10 @@
     }
 
     .annotation-preview-marker {
-      color: var(--accent);
-      background: var(--accent-soft);
-      border: 1px solid var(--marker-border);
-      border-radius: 4px;
+      color: color-mix(in srgb, var(--accent) 72%, var(--text));
+      background: color-mix(in srgb, var(--accent-soft) 58%, transparent);
+      border: 1px solid color-mix(in srgb, var(--marker-border) 26%, transparent);
+      border-radius: 3px;
       display: inline-block;
       max-width: 100%;
       padding: 0 4px;
@@ -1068,6 +1070,20 @@
       vertical-align: baseline;
     }
 
+    .annotation-preview-marker strong {
+      color: color-mix(in srgb, var(--accent) 82%, var(--text));
+      font-weight: 750;
+    }
+
+    .annotation-preview-marker em {
+      color: color-mix(in srgb, currentColor 82%, var(--muted));
+    }
+
+    .annotation-preview-marker s {
+      color: color-mix(in srgb, currentColor 70%, var(--muted));
+      text-decoration-thickness: 0.08em;
+    }
+
     .annotation-preview-marker code {
       font-family: var(--mono-font, ui-monospace, SFMono-Regular, Menlo, monospace);
       font-size: 0.95em;
@@ -1216,9 +1232,9 @@
       padding: 0 10px;
       font-size: 12px;
       line-height: 1;
-      background: var(--accent-soft);
-      border-color: var(--accent);
-      color: var(--accent);
+      background: color-mix(in srgb, var(--panel) 88%, var(--accent-soft));
+      border-color: var(--control-border);
+      color: var(--text);
       box-shadow: 0 1px 2px var(--shadow-color);
       pointer-events: auto;
     }
@@ -1227,9 +1243,9 @@
     .preview-comment-add:focus-visible,
     .preview-comment-jump:hover,
     .preview-comment-jump:focus-visible {
-      background: var(--accent-soft-strong);
+      background: var(--accent-soft);
       color: var(--accent);
-      border-color: var(--accent);
+      border-color: color-mix(in srgb, var(--accent) 45%, var(--control-border));
     }
 
     .preview-jump-highlight {
@@ -5779,10 +5795,10 @@
     }
 
     body.studio-ui-refresh .studio-refresh-review-btn.request-stop-active {
-      background: var(--error);
-      border-color: var(--error);
+      background: color-mix(in srgb, var(--error) 82%, var(--panel));
+      border-color: color-mix(in srgb, var(--error) 88%, var(--panel));
       color: var(--error-contrast);
-      font-weight: 600;
+      font-weight: 700;
     }
 
     body.studio-ui-refresh .studio-refresh-review-btn.request-stop-active::after {
@@ -5790,10 +5806,10 @@
     }
 
     body.studio-ui-refresh .studio-refresh-menu #critiqueBtn.request-stop-active {
-      background: var(--error);
-      border-color: var(--error);
+      background: color-mix(in srgb, var(--error) 82%, var(--panel));
+      border-color: color-mix(in srgb, var(--error) 88%, var(--panel));
       color: var(--error-contrast);
-      font-weight: 600;
+      font-weight: 700;
     }
 
     .studio-preview-link-menu {

package/index.ts

@@ -1066,7 +1066,23 @@ function buildStudioPdfCalloutTitleSizeCommand(options?: StudioPdfRenderOptions)
 	return "\\footnotesize";
 }
 
-function buildStudioPdfPreamble(options?: StudioPdfRenderOptions, extraPreamble = ""): string {
+function formatStudioPdfHtmlColor(color: string, fallback: string): string {
+	return hexToRgb(color) ? color.replace(/^#/, "").toUpperCase() : fallback;
+}
+
+function buildStudioPdfAnnotationColors(style: StudioThemeStyle): { bg: string; border: string; text: string } {
+	const accent = hexToRgb(style.palette.accent) ? style.palette.accent : "#2F6FEB";
+	const page = "#FFFFFF";
+	const darkText = "#0E1616";
+	return {
+		bg: formatStudioPdfHtmlColor(blendColors(accent, page, 0.91), "F1F7FF"),
+		border: formatStudioPdfHtmlColor(blendColors(accent, page, 0.68), "C7DDFF"),
+		text: formatStudioPdfHtmlColor(blendColors(accent, darkText, style.mode === "light" ? 0.40 : 0.34), "1F5FBF"),
+	};
+}
+
+function buildStudioPdfPreamble(options?: StudioPdfRenderOptions, extraPreamble = "", themeStyle?: StudioThemeStyle): string {
+	const annotationColors = buildStudioPdfAnnotationColors(themeStyle ?? getStudioThemeStyle());
 	const sectionHeadingSize = buildStudioPdfHeadingSizeCommand(options?.sectionSize, "\\Large");
 	const subsectionHeadingSize = buildStudioPdfHeadingSizeCommand(options?.subsectionSize, "\\large");
 	const subsubsectionHeadingSize = buildStudioPdfHeadingSizeCommand(options?.subsubsectionSize, "\\normalsize");
@@ -1088,9 +1104,9 @@ function buildStudioPdfPreamble(options?: StudioPdfRenderOptions, extraPreamble
 \\usepackage{xcolor}
 \\usepackage{varwidth}
 \\usepackage[normalem]{ulem}
-\\definecolor{StudioAnnotationBg}{HTML}{EAF3FF}
-\\definecolor{StudioAnnotationBorder}{HTML}{8CB8FF}
-\\definecolor{StudioAnnotationText}{HTML}{1F5FBF}
+\\definecolor{StudioAnnotationBg}{HTML}{${annotationColors.bg}}
+\\definecolor{StudioAnnotationBorder}{HTML}{${annotationColors.border}}
+\\definecolor{StudioAnnotationText}{HTML}{${annotationColors.text}}
 \\definecolor{StudioCodeBlockBg}{HTML}{F6F8FA}
 \\definecolor{StudioDiffAddText}{HTML}{1A7F37}
 \\definecolor{StudioDiffDelText}{HTML}{CF222E}
@@ -6501,9 +6517,20 @@ ${literalPdfConfig.fontSizeCommand}\\section*{${title.replace(/[{}\\]/g, "").tri
 function replaceStudioAnnotationMarkersInGeneratedLatex(latex: string): string {
 	const lines = String(latex ?? "").split("\n");
 	const out: string[] = [];
+	const pendingTextLines: string[] = [];
 	const rawEnvStack: string[] = [];
 	const rawEnvNames = new Set(["verbatim", "Verbatim", "Highlighting", "lstlisting"]);
 
+	const hasRawEnvBoundary = (line: string): boolean => {
+		const envPattern = /\\(begin|end)\{([^}]+)\}/g;
+		let match: RegExpExecArray | null;
+		while ((match = envPattern.exec(line)) !== null) {
+			const envName = match[2];
+			if (envName && rawEnvNames.has(envName)) return true;
+		}
+		return false;
+	};
+
 	const updateRawEnvStack = (line: string) => {
 		const envPattern = /\\(begin|end)\{([^}]+)\}/g;
 		let match: RegExpExecArray | null;
@@ -6524,6 +6551,12 @@ function replaceStudioAnnotationMarkersInGeneratedLatex(latex: string): string {
 		}
 	};
 
+	const flushPendingText = () => {
+		if (pendingTextLines.length === 0) return;
+		out.push(replaceStudioAnnotationMarkersForPdfInSegment(pendingTextLines.join("\n")));
+		pendingTextLines.length = 0;
+	};
+
 	for (const line of lines) {
 		if (rawEnvStack.length > 0) {
 			out.push(line);
@@ -6531,10 +6564,17 @@ function replaceStudioAnnotationMarkersInGeneratedLatex(latex: string): string {
 			continue;
 		}
 
-		out.push(replaceStudioAnnotationMarkersForPdfInSegment(line));
-		updateRawEnvStack(line);
+		if (hasRawEnvBoundary(line)) {
+			flushPendingText();
+			out.push(line);
+			updateRawEnvStack(line);
+			continue;
+		}
+
+		pendingTextLines.push(line);
 	}
 
+	flushPendingText();
 	return out.join("\n");
 }
 
@@ -6727,6 +6767,7 @@ async function renderStudioPdfFromGeneratedLatex(
 	alignedImageBlocks: StudioPdfAlignedImageBlock[] = [],
 	pdfOptions?: StudioPdfRenderOptions,
 	extraPreamble = "",
+	themeStyle?: StudioThemeStyle,
 ): Promise<{ pdf: Buffer; warning?: string }> {
 	const tempDir = join(tmpdir(), `pi-studio-pdf-${Date.now()}-${randomUUID()}`);
 	const preamblePath = join(tempDir, "_pdf_preamble.tex");
@@ -6734,7 +6775,7 @@ async function renderStudioPdfFromGeneratedLatex(
 	const outputPath = join(tempDir, "studio-export.pdf");
 
 	await mkdir(tempDir, { recursive: true });
-	await writeFile(preamblePath, buildStudioPdfPreamble(pdfOptions, extraPreamble), "utf-8");
+	await writeFile(preamblePath, buildStudioPdfPreamble(pdfOptions, extraPreamble, themeStyle), "utf-8");
 
 	const pandocArgs = [
 		"-f", inputFormat,
@@ -6805,6 +6846,7 @@ async function renderStudioPdfWithPandoc(
 	editorPdfLanguage?: string,
 	sourcePath?: string,
 	pdfOptions?: StudioPdfRenderOptions,
+	themeStyle?: StudioThemeStyle,
 ): Promise<{ pdf: Buffer; warning?: string }> {
 	const pandocCommand = process.env.PANDOC_PATH?.trim() || "pandoc";
 	const pdfEngine = process.env.PANDOC_PDF_ENGINE?.trim() || "xelatex";
@@ -6842,7 +6884,7 @@ async function renderStudioPdfWithPandoc(
 		const outputPath = join(tempDir, "studio-export.pdf");
 
 		await mkdir(tempDir, { recursive: true });
-		await writeFile(preamblePath, buildStudioPdfPreamble(pdfOptions), "utf-8");
+		await writeFile(preamblePath, buildStudioPdfPreamble(pdfOptions, "", themeStyle), "utf-8");
 
 		const hasYamlHeaderIncludesForPdf = inputFormat !== "latex" && hasStudioYamlHeaderIncludes(markdownForPdf);
 		const headerIncludeArgs = hasYamlHeaderIncludesForPdf ? [] : ["--include-in-header", preamblePath];
@@ -6895,6 +6937,8 @@ async function renderStudioPdfWithPandoc(
 			[],
 			[],
 			pdfOptions,
+			"",
+			themeStyle,
 		);
 	}
 
@@ -6915,6 +6959,8 @@ async function renderStudioPdfWithPandoc(
 				[],
 				[],
 				pdfOptions,
+				"",
+				themeStyle,
 			);
 		} catch {
 			const fenced = parseStudioSingleFencedCodeBlock(diffMarkdown);
@@ -6941,7 +6987,7 @@ async function renderStudioPdfWithPandoc(
 	const outputPath = join(tempDir, "studio-export.pdf");
 
 	await mkdir(tempDir, { recursive: true });
-	await writeFile(preamblePath, buildStudioPdfPreamble(pdfOptions, extraPdfPreamble), "utf-8");
+	await writeFile(preamblePath, buildStudioPdfPreamble(pdfOptions, extraPdfPreamble, themeStyle), "utf-8");
 
 	const mermaidPrepared: StudioMermaidPdfPreprocessResult = isLatex
 		? { markdown: normalizedMarkdownBody, found: 0, replaced: 0, failed: 0, missingCli: false }
@@ -6964,6 +7010,7 @@ async function renderStudioPdfWithPandoc(
 			pdfAlignedImageTransform.blocks,
 			pdfOptions,
 			extraPdfPreamble,
+			themeStyle,
 		);
 		await rm(tempDir, { recursive: true, force: true }).catch(() => undefined);
 		return { pdf: rendered.pdf, warning: mermaidPrepared.warning ?? rendered.warning };
@@ -10514,7 +10561,7 @@ ${cssVarsBlock}
     <section id="rightPane">
       <div id="rightSectionHeader" class="section-header">
         <div class="section-header-main">
-          <select id="rightViewSelect" aria-label="Response view mode" title="Right pane view mode. F7 cycles when the right pane is active; Cmd/Ctrl+Alt+P switches directly to Preview; Cmd/Ctrl+Alt+W switches directly to Working.">
+          <select id="rightViewSelect" aria-label="Response view mode" title="Right pane view mode. F7 cycles when the right pane is active; Cmd/Ctrl+Alt+P switches directly to Response Preview; Cmd/Ctrl+Alt+E switches directly to Editor Preview; Cmd/Ctrl+Alt+W switches directly to Working.">
             <option value="markdown">Response (Raw)</option>
             <option value="preview" selected>Response (Preview)</option>
             <option value="editor-preview">Editor (Preview)</option>
@@ -10608,7 +10655,8 @@ ${cssVarsBlock}
           <dl>
             <div><dt>F6</dt><dd>Switch between editor and right pane</dd></div>
             <div><dt>F7 / Shift+F7</dt><dd>Cycle the active pane's view</dd></div>
-            <div><dt>Cmd/Ctrl+Alt+P</dt><dd>Switch the right pane directly to Preview</dd></div>
+            <div><dt>Cmd/Ctrl+Alt+P</dt><dd>Switch the right pane directly to Response Preview</dd></div>
+            <div><dt>Cmd/Ctrl+Alt+E</dt><dd>Switch the right pane directly to Editor Preview</dd></div>
             <div><dt>Cmd/Ctrl+Alt+W</dt><dd>Switch the right pane directly to Working</dd></div>
             <div><dt>F8</dt><dd>Focus editor text</dd></div>
             <div><dt>Shift+F8</dt><dd>Focus right-pane content</dd></div>
@@ -13553,7 +13601,7 @@ export default function (pi: ExtensionAPI) {
 		const filename = sanitizePdfFilename(requestedFilename || (isLatex ? "studio-latex-preview.pdf" : "studio-preview.pdf"));
 
 		try {
-			const { pdf, warning } = await renderStudioPdfWithPandoc(markdown, isLatex, resourcePath, editorPdfLanguage, sourcePath || undefined);
+			const { pdf, warning } = await renderStudioPdfWithPandoc(markdown, isLatex, resourcePath, editorPdfLanguage, sourcePath || undefined, undefined, getStudioThemeStyle(lastCommandCtx?.ui?.theme));
 			const writeResult = writeStudioPreviewExportFile(buildStudioPreviewExportPath(sourcePath || undefined, userResourceDir || undefined, studioCwd, filename), pdf);
 			const exportId = storePreparedPdfExport(pdf, filename, warning, writeResult.filePath ?? undefined);
 			const token = serverState?.token ?? "";
@@ -14984,6 +15032,7 @@ export default function (pi: ExtensionAPI) {
 				editorPdfLanguage,
 				source.sourcePath,
 				pdfOptions,
+				getStudioThemeStyle(ctx.ui.theme),
 			);
 			await writeFile(source.outputPath, pdf);
 			const openError = await maybeOpenStudioExportPath(source.outputPath, params.open);
@@ -15296,6 +15345,7 @@ export default function (pi: ExtensionAPI) {
 						editorPdfLanguage,
 						undefined,
 						pdfOptions,
+						getStudioThemeStyle(ctx.ui.theme),
 					);
 					await writeFile(outputPath, pdf);
 
@@ -15354,6 +15404,7 @@ export default function (pi: ExtensionAPI) {
 					editorPdfLanguage,
 					file.resolvedPath,
 					pdfOptions,
+					getStudioThemeStyle(ctx.ui.theme),
 				);
 				await writeFile(outputPath, pdf);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.9.32",
+  "version": "0.9.33",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, active quiz, prompt/response history, live previews, and tmux-backed REPL/literate REPL workflows",
   "type": "module",
   "license": "MIT",