pi-studio 0.9.30 → 0.9.32

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.9.32] — 2026-06-10
+
+### Added
+- Added `Cmd/Ctrl+Alt+W` to switch the right pane directly to Working, matching the existing direct Preview shortcut.
+
+### Fixed
+- Preserved expanded Working-view detail sections while live working updates stream in.
+
+## [0.9.31] — 2026-06-09
+
+### Fixed
+- Render long PDF annotations as full-width display-style boxes at their marker position so exported feedback avoids clipping while preserving the surrounding annotation order.
+- Avoided annotation placeholder collisions in HTML exports with ten or more annotations.
+
 ## [0.9.30] — 2026-06-09
 
 ### Fixed

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
+- 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 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

@@ -270,7 +270,7 @@
         });
         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.";
+          : "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.";
       }
 
       function getInitialRightView(source) {
@@ -302,6 +302,7 @@
       let traceAutoScroll = true;
       let traceRenderRaf = null;
       const traceExpandedOutputs = new Set();
+      const traceOpenDetails = new Set();
       let gitChangesState = {
         status: "idle",
         requestId: null,
@@ -683,6 +684,7 @@
         traceState = normalizeTraceState(nextState);
         if ((traceState.runId || null) !== previousRunId) {
           traceExpandedOutputs.clear();
+          traceOpenDetails.clear();
         }
         renderTraceViewIfActive();
       }
@@ -3804,6 +3806,17 @@
         setStatus("Right pane view: " + String(label || "Preview") + ".");
       }
 
+      function switchRightPaneToWorking() {
+        if (isEditorOnlyMode) {
+          setStatus("Working view is unavailable in editor-only Studio views.", "warning");
+          return;
+        }
+        const snapshot = snapshotStudioScrollablePositions();
+        setRightView("trace");
+        scheduleStudioScrollablePositionRestore(snapshot);
+        setStatus("Right pane view: Working.");
+      }
+
       function cycleActivePaneView(direction) {
         if (activePane === "right") {
           if (!rightViewSelect || rightViewSelect.disabled) {
@@ -4112,6 +4125,16 @@
           return;
         }
 
+        const isWorkingShortcut = (key.toLowerCase() === "w" || code === "KeyW")
+          && (event.metaKey || event.ctrlKey)
+          && event.altKey
+          && !event.shiftKey;
+        if (isWorkingShortcut) {
+          event.preventDefault();
+          switchRightPaneToWorking();
+          return;
+        }
+
         const isContentFocusShortcut = key === "F8" && !event.metaKey && !event.ctrlKey && !event.altKey;
         if (isContentFocusShortcut) {
           event.preventDefault();
@@ -7757,6 +7780,20 @@
         }
       }
 
+      function handleTraceDetailsToggle(event) {
+        if (rightView !== "trace") return;
+        const target = event.target;
+        if (!(target instanceof Element) || !target.matches("details[data-trace-details-key]")) return;
+        const key = target.getAttribute("data-trace-details-key") || "";
+        if (!key) return;
+        if (target.open) {
+          traceOpenDetails.add(key);
+        } else {
+          traceOpenDetails.delete(key);
+        }
+        traceAutoScroll = false;
+      }
+
       async function handleTracePaneClick(event) {
         if (rightView !== "trace") return;
         const target = event.target;
@@ -7951,6 +7988,7 @@
       function attachResponsePaneInteractionHandlers() {
         if (!critiqueViewEl) return;
         critiqueViewEl.addEventListener("scroll", handleTracePaneScroll);
+        critiqueViewEl.addEventListener("toggle", handleTraceDetailsToggle, true);
         critiqueViewEl.addEventListener("click", handleTracePaneClick);
         critiqueViewEl.addEventListener("click", handleReplPaneClick);
         critiqueViewEl.addEventListener("click", handleFilesPaneClick);
@@ -9189,8 +9227,9 @@
         const value = String(inputText || "").trim();
         if (!value) return "";
         const rawKey = outputKey + ":raw-input";
-        const openAttr = traceExpandedOutputs.has(rawKey) ? " open" : "";
-        return "<details class='trace-tool-details trace-tool-raw-input'" + openAttr + ">"
+        const detailsKey = rawKey;
+        const openAttr = traceOpenDetails.has(detailsKey) || traceExpandedOutputs.has(rawKey) ? " open" : "";
+        return "<details class='trace-tool-details trace-tool-raw-input' data-trace-details-key='" + escapeHtml(detailsKey) + "'" + openAttr + ">"
           + "<summary>Raw input</summary>"
           + "<div class='trace-tool-details-body'>"
           + renderTraceOutput(value, rawKey, { label: "Raw input" })
@@ -9201,8 +9240,9 @@
       function renderTraceToolTextDetails(summary, text, outputKey, label, options) {
         const value = String(text || "");
         const emptyText = options && typeof options.emptyText === "string" ? options.emptyText : "[empty]";
-        const openAttr = traceExpandedOutputs.has(outputKey) ? " open" : "";
-        return "<details class='trace-tool-details" + (options && options.className ? " " + escapeHtml(options.className) : "") + "'" + openAttr + ">"
+        const detailsKey = outputKey;
+        const openAttr = traceOpenDetails.has(detailsKey) || traceExpandedOutputs.has(outputKey) ? " open" : "";
+        return "<details class='trace-tool-details" + (options && options.className ? " " + escapeHtml(options.className) : "") + "' data-trace-details-key='" + escapeHtml(detailsKey) + "'" + openAttr + ">"
           + "<summary>" + escapeHtml(summary) + "</summary>"
           + "<div class='trace-tool-details-body'>"
           + renderTraceOutput(value || emptyText, outputKey, { label })
@@ -9234,8 +9274,9 @@
             const newMetrics = formatTraceTextMetrics(edit.newText);
             const oldKey = entry.id + ":edit:" + edit.index + ":old";
             const newKey = entry.id + ":edit:" + edit.index + ":new";
-            const openAttr = traceExpandedOutputs.has(oldKey) || traceExpandedOutputs.has(newKey) ? " open" : "";
-            return "<details class='trace-tool-details trace-tool-change'" + openAttr + ">"
+            const detailsKey = entry.id + ":edit:" + edit.index;
+            const openAttr = traceOpenDetails.has(detailsKey) || traceExpandedOutputs.has(oldKey) || traceExpandedOutputs.has(newKey) ? " open" : "";
+            return "<details class='trace-tool-details trace-tool-change' data-trace-details-key='" + escapeHtml(detailsKey) + "'" + openAttr + ">"
               + "<summary>Replacement " + escapeHtml(String(displayIndex + 1)) + " · " + escapeHtml(oldMetrics) + " → " + escapeHtml(newMetrics) + "</summary>"
               + "<div class='trace-tool-change-body'>"
               + "<div class='trace-tool-change-grid'>"

package/index.ts

@@ -1112,6 +1112,7 @@ function buildStudioPdfPreamble(options?: StudioPdfRenderOptions, extraPreamble
 \\definecolor{StudioCalloutCautionText}{HTML}{A40E26}
 \\definecolor{StudioCalloutCautionLabelBg}{HTML}{FDEBEC}
 \\newcommand{\\studioannotation}[1]{\\begingroup\\setlength{\\fboxsep}{1.5pt}\\fcolorbox{StudioAnnotationBorder}{StudioAnnotationBg}{\\begin{varwidth}{\\dimexpr\\linewidth-2\\fboxsep-2\\fboxrule\\relax}\\raggedright\\textcolor{StudioAnnotationText}{\\sffamily\\footnotesize\\strut #1}\\end{varwidth}}\\endgroup}
+\\newcommand{\\studioblockannotation}[1]{\\par\\smallskip\\noindent\\begingroup\\setlength{\\fboxsep}{1.5pt}\\fcolorbox{StudioAnnotationBorder}{StudioAnnotationBg}{\\begin{minipage}{\\dimexpr\\linewidth-2\\fboxsep-2\\fboxrule\\relax}\\raggedright\\textcolor{StudioAnnotationText}{\\sffamily\\footnotesize\\strut #1}\\end{minipage}}\\endgroup\\par\\smallskip\\noindent\\ignorespaces}
 \\newcommand{\\StudioDiffAddTok}[1]{\\textcolor{StudioDiffAddText}{#1}}
 \\newcommand{\\StudioDiffDelTok}[1]{\\textcolor{StudioDiffDelText}{#1}}
 \\newcommand{\\StudioDiffMetaTok}[1]{\\textcolor{StudioDiffMetaText}{#1}}
@@ -5069,22 +5070,25 @@ function renderStudioAnnotationPdfLatex(text: string): string {
 	return renderStudioAnnotationPdfLatexContent(normalized).trim();
 }
 
+function renderStudioAnnotationPdfBox(markerText: string, block = false): string {
+	const cleaned = renderStudioAnnotationPdfLatex(markerText);
+	if (!cleaned) return "";
+	return block ? `\\studioblockannotation{${cleaned}}` : `\\studioannotation{${cleaned}}`;
+}
+
 function replaceStudioAnnotationMarkersForPdfInSegment(text: string): string {
+	const renderMarker = (markerText: string): string => {
+		const label = normalizeStudioAnnotationText(markerText);
+		if (!label) return "";
+		return renderStudioAnnotationPdfBox(label, shouldRenderStudioAnnotationAsPdfBlock(label));
+	};
 	const replaced = replaceStudioInlineAnnotationMarkers(
 		String(text ?? ""),
-		(marker: { body: string }) => {
-			const cleaned = renderStudioAnnotationPdfLatex(marker.body);
-			if (!cleaned) return "";
-			return `\\studioannotation{${cleaned}}`;
-		},
+		(marker: { body: string }) => renderMarker(marker.body),
 	);
 
 	return String(replaced ?? "")
-		.replace(/\{\[\}\s*an:\s*([\s\S]*?)\s*\{\]\}/gi, (_match, markerText: string) => {
-			const cleaned = renderStudioAnnotationPdfLatex(markerText);
-			if (!cleaned) return "";
-			return `\\studioannotation{${cleaned}}`;
-		});
+		.replace(/\{\[\}\s*an:\s*([\s\S]*?)\s*\{\]\}/gi, (_match, markerText: string) => renderMarker(markerText));
 }
 
 function replaceStudioAnnotationMarkersForPdf(markdown: string): string {
@@ -6096,6 +6100,15 @@ function parseStudioHtmlPdfBlockOptions(body: string): StudioHtmlPdfBlockOptions
 	return options;
 }
 
+// PDF/LaTeX cannot fully mimic the browser's inline-block wrapping for long
+// annotation chips, so long annotations switch to a display box at the marker.
+const STUDIO_PDF_ANNOTATION_DISPLAY_THRESHOLD_CHARS = 115;
+
+function shouldRenderStudioAnnotationAsPdfBlock(text: string): boolean {
+	const normalized = normalizeStudioAnnotationText(text);
+	return normalized.length > STUDIO_PDF_ANNOTATION_DISPLAY_THRESHOLD_CHARS;
+}
+
 function prepareStudioPdfBlocksForHtml(markdown: string): { markdown: string; blocks: StudioHtmlPdfBlock[] } {
 	const blocks: StudioHtmlPdfBlock[] = [];
 	const prefix = `PISTUDIOHTMLPDF${Date.now().toString(36)}${randomUUID().replace(/-/g, "")}TOKEN`;
@@ -6126,7 +6139,7 @@ function prepareStudioAnnotationMarkersForHtml(markdown: string): { markdown: st
 
 function applyStudioAnnotationPlaceholdersToHtml(html: string, placeholders: StudioHtmlAnnotationPlaceholder[]): string {
 	let transformed = String(html ?? "");
-	for (const placeholder of placeholders) {
+	for (const placeholder of [...placeholders].sort((a, b) => b.token.length - a.token.length)) {
 		const tokenPattern = new RegExp(escapeStudioRegExpLiteral(placeholder.token), "g");
 		const markerHtml = `<span class="annotation-preview-marker" title="${escapeStudioHtmlText(placeholder.title)}">${renderStudioAnnotationInlineHtml(placeholder.text)}</span>`;
 		transformed = transformed.replace(tokenPattern, markerHtml);
@@ -10501,7 +10514,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.">
+          <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.">
             <option value="markdown">Response (Raw)</option>
             <option value="preview" selected>Response (Preview)</option>
             <option value="editor-preview">Editor (Preview)</option>
@@ -10596,6 +10609,7 @@ ${cssVarsBlock}
             <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+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>
             <div><dt>F9</dt><dd>Toggle Zen mode</dd></div>

package/package.json

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