pi-studio 0.8.2 → 0.8.4

package/CHANGELOG.md

@@ -4,15 +4,31 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.8.4] — 2026-05-14
+
+### Added
+- Working view now renders image outputs from tools such as `read`, including bounded image previews in saved Working history.
+- Rendered blockquotes now have hover/focus copy buttons that copy the quote text without Markdown `>` markers.
+
+## [0.8.3] — 2026-05-13
+
+### Changed
+- Updated package, README, and UI wording to describe the feature as interactive HTML preview.
+
+### Fixed
+- **Open new editor** now opens a blank companion editor when the current editor is empty.
+- PDF export now preserves Pandoc YAML front matter while applying Studio Markdown transforms and lets Markdown documents with `header-includes` control their own LaTeX preamble, fixing exports that use YAML-defined commands such as `\firstpageletterhead`.
+- Reduced scroll snap-back after using browser Find by preserving Studio pane scroll positions during pane activation.
+
 ## [0.8.2] — 2026-05-13
 
 ### Changed
-- Improved dark-theme contrast for Studio dropdown arrows and the HTML artifact zoom percentage by using the stronger Studio info text colour token.
+- Improved dark-theme contrast for Studio dropdown arrows and the interactive HTML preview zoom percentage by using the stronger Studio info text colour token.
 
 ## [0.8.1] — 2026-05-13
 
 ### Added
-- Added first-cut HTML artifact preview for straight, unfenced HTML in Studio preview panes, rendered in a sandboxed iframe with inline scripts enabled, network requests blocked by CSP, fit/capped sizing, and toolbar zoom controls; HTML export preserves authored HTML artifacts instead of converting them through Markdown.
+- Added first-cut interactive HTML preview for straight, unfenced HTML in Studio preview panes, rendered in a sandboxed iframe with inline scripts enabled, network requests blocked by CSP, fit/capped sizing, and toolbar zoom controls; HTML export preserves authored HTML previews instead of converting them through Markdown.
 
 ## [0.8.0] — 2026-05-12
 

package/README.md

@@ -1,6 +1,6 @@
 # pi-studio
 
-Extension for [pi](https://pi.dev) that opens a local two-pane browser workspace for working with prompts, responses, live working details, Markdown and LaTeX documents, code files, and other common text-based files side by side. Annotate responses and files, add local comments, write, edit, and run prompts, browse prompt and response history, request critiques, and use live preview for code, Markdown, and LaTeX.
+Extension for [pi](https://pi.dev) that opens a local two-pane browser workspace for working with prompts, responses, live working details, Markdown and LaTeX documents, interactive HTML previews, code files, and other common text-based files side by side. Annotate responses and files, add local comments, write, edit, and run prompts, browse prompt and response history, request critiques, and use live preview for code, Markdown, LaTeX, and interactive HTML.
 
 ## Quick demo
 
@@ -21,7 +21,7 @@ Extension for [pi](https://pi.dev) that opens a local two-pane browser workspace
 - Opens a two-pane browser workspace: **Editor** (left) + **Response/Working/Editor Preview** (right)
 - Supports one canonical full Studio view per Pi session, plus additional editor-only companion views when you just want extra editing/preview surfaces; the editor toolbar can open a detached copy of the current editor text as a companion view
 - Runs editor text directly, or asks for structured critique (auto/writing/code focus)
-- Includes a live **Working** view for following current model/tool activity, with `All` / `Thinking` / `Tools` filters 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
 - 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 a docked **Outline** rail for navigating document structure in the current editor text, with clickable entries that jump in the raw editor and reveal matching preview locations when available
 - Includes local comments anchored to selections/lines, shown in a docked **Comments** rail, with transient **Comment** / **Jump** actions from raw-editor selections plus editor-preview selections for Markdown, LaTeX, and code/text/diff previews, alongside optional inline `[an: ...]` toggles when you want comments reflected in the document text
@@ -34,11 +34,11 @@ Extension for [pi](https://pi.dev) that opens a local two-pane browser workspace
   - shows/hides annotation markers in preview
   - strips markers before send (optional)
   - saves `.annotated.md`
-- Renders Markdown/LaTeX/code previews (math + Mermaid), theme-synced with pi
-- Renders straight, unfenced HTML artifacts in preview via a sandboxed browser iframe with zoom controls, while fenced `html` blocks remain source code
+- Renders Markdown/LaTeX/code previews (math + Mermaid), theme-synced with pi, with copy buttons for code blocks and blockquotes
+- Renders straight, unfenced interactive HTML in preview via a sandboxed browser iframe with zoom controls, while fenced `html` blocks remain source code
 - Embeds local PDFs in Studio Markdown previews via explicit `studio-pdf` fenced blocks
 - Ships optional `pi-studio-dark` and `pi-studio-light` themes tuned for Studio's browser workspace
-- Exports right-pane preview as PDF (pandoc + LaTeX) or standalone HTML, preserving authored HTML artifacts as HTML
+- Exports right-pane preview as PDF (pandoc + LaTeX) or standalone HTML, preserving authored HTML previews as HTML
 - Exports local files headlessly via `/studio-pdf <path>` to `<name>.studio.pdf` or `/studio-html <path>` to `<name>.studio.html`; without a path, those commands export the last model response to a timestamped file
 - Shows model/session/context usage in the footer, plus a compact-context action
 

package/client/studio-client.js

@@ -214,6 +214,7 @@
       const traceExpandedOutputs = new Set();
       const TRACE_OUTPUT_PREVIEW_MAX_LINES = 50;
       const TRACE_OUTPUT_PREVIEW_MAX_CHARS = 8000;
+      const TRACE_IMAGE_SAFE_MIME_TYPES = new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
       let studioRunChainActive = false;
       let queuedSteeringCount = 0;
       let agentBusyFromServer = false;
@@ -287,6 +288,37 @@
           : "pending";
       }
 
+      function normalizeTraceImageMimeType(value) {
+        return typeof value === "string" ? value.trim().toLowerCase() : "";
+      }
+
+      function isTraceImageSafeMimeType(mimeType) {
+        return TRACE_IMAGE_SAFE_MIME_TYPES.has(normalizeTraceImageMimeType(mimeType));
+      }
+
+      function normalizeTraceImage(image, fallbackIndex) {
+        if (!image || typeof image !== "object") return null;
+        const mimeType = normalizeTraceImageMimeType(image.mimeType);
+        if (!isTraceImageSafeMimeType(mimeType)) return null;
+        const data = typeof image.data === "string" ? image.data.replace(/\s+/g, "") : "";
+        if (!data || !/^[A-Za-z0-9+/]*={0,2}$/.test(data)) return null;
+        const byteLength = parseFiniteNumber(image.byteLength);
+        return {
+          id: typeof image.id === "string" && image.id.trim() ? image.id.trim() : ("trace-image-" + fallbackIndex),
+          mimeType,
+          data,
+          byteLength: byteLength == null ? estimateTraceImageByteLength(data) : byteLength,
+          label: parseNonEmptyString(image.label),
+        };
+      }
+
+      function estimateTraceImageByteLength(data) {
+        const compact = String(data || "").replace(/\s+/g, "");
+        if (!compact) return null;
+        const padding = compact.endsWith("==") ? 2 : (compact.endsWith("=") ? 1 : 0);
+        return Math.max(0, Math.floor((compact.length * 3) / 4) - padding);
+      }
+
       function normalizeTraceEntry(entry, fallbackIndex) {
         if (!entry || typeof entry !== "object") return null;
         if (entry.type === "assistant") {
@@ -310,6 +342,9 @@
             label: parseNonEmptyString(entry.label),
             argsSummary: parseNonEmptyString(entry.argsSummary),
             output: typeof entry.output === "string" ? entry.output : "",
+            images: Array.isArray(entry.images)
+              ? entry.images.map((image, imageIndex) => normalizeTraceImage(image, imageIndex)).filter(Boolean)
+              : [],
             startedAt: parseFiniteNumber(entry.startedAt) || Date.now(),
             updatedAt: parseFiniteNumber(entry.updatedAt) || Date.now(),
             status: normalizeTraceEntryStatus(entry.status),
@@ -542,6 +577,22 @@
         });
       }
 
+      function formatTraceImageSize(byteLength) {
+        if (typeof byteLength !== "number" || !Number.isFinite(byteLength) || byteLength < 0) return "unknown size";
+        if (byteLength < 1024) return formatNumber(byteLength) + " B";
+        if (byteLength < 1024 * 1024) return (byteLength / 1024).toFixed(byteLength >= 100 * 1024 ? 0 : 1).replace(/\.0$/, "") + " KB";
+        return (byteLength / (1024 * 1024)).toFixed(byteLength >= 100 * 1024 * 1024 ? 0 : 1).replace(/\.0$/, "") + " MB";
+      }
+
+      function describeTraceImageForText(image) {
+        if (!image || typeof image !== "object") return "";
+        const parts = [];
+        if (image.label) parts.push(String(image.label));
+        parts.push(String(image.mimeType || "image"));
+        parts.push(formatTraceImageSize(image.byteLength));
+        return parts.filter(Boolean).join(" — ");
+      }
+
       function buildVisibleWorkingText(filterOverride) {
         const filter = normalizeTraceFilter(filterOverride || traceFilter);
         const entries = getTraceEntriesForFilter(filter);
@@ -576,6 +627,12 @@
           if (String(entry.output || "").trim()) {
             parts.push("Output:\n" + String(entry.output || "").trim());
           }
+          const imageSummaries = Array.isArray(entry.images)
+            ? entry.images.map(describeTraceImageForText).filter(Boolean)
+            : [];
+          if (imageSummaries.length) {
+            parts.push("Images:\n" + imageSummaries.map((summary) => "- " + summary).join("\n"));
+          }
           return parts.join("\n\n").trim();
         }).filter(Boolean).join("\n\n---\n\n");
       }
@@ -1954,6 +2011,51 @@
         updatePaneFocusButtons();
       }
 
+      function snapshotStudioScrollablePositions() {
+        return [sourceTextEl, sourcePreviewEl, critiqueViewEl]
+          .filter((el) => el && typeof el.scrollTop === "number" && typeof el.scrollLeft === "number")
+          .map((el) => ({ el, top: el.scrollTop, left: el.scrollLeft }));
+      }
+
+      function restoreStudioScrollablePositions(snapshot) {
+        if (!Array.isArray(snapshot)) return;
+        snapshot.forEach((entry) => {
+          const el = entry && entry.el;
+          if (!el || !el.isConnected) return;
+          if (typeof entry.top === "number") el.scrollTop = entry.top;
+          if (typeof entry.left === "number") el.scrollLeft = entry.left;
+        });
+        syncEditorHighlightScroll();
+      }
+
+      function scheduleStudioScrollablePositionRestore(snapshot) {
+        if (!Array.isArray(snapshot) || snapshot.length === 0) return;
+        const schedule = typeof window.requestAnimationFrame === "function"
+          ? window.requestAnimationFrame.bind(window)
+          : (cb) => window.setTimeout(cb, 16);
+        window.setTimeout(() => restoreStudioScrollablePositions(snapshot), 0);
+        schedule(() => {
+          restoreStudioScrollablePositions(snapshot);
+          schedule(() => restoreStudioScrollablePositions(snapshot));
+        });
+      }
+
+      function shouldPreserveScrollForPaneActivationEvent(event) {
+        const target = event && event.target;
+        if (!(target instanceof Element)) return true;
+        if (target.closest("button, select, input, a, [role='button'], .studio-copy-block-btn, .preview-comment-add, .preview-comment-jump")) {
+          return false;
+        }
+        return true;
+      }
+
+      function activatePaneFromInteraction(nextPane, event) {
+        const shouldPreserveScroll = shouldPreserveScrollForPaneActivationEvent(event);
+        const snapshot = shouldPreserveScroll ? snapshotStudioScrollablePositions() : [];
+        setActivePane(nextPane);
+        if (shouldPreserveScroll) scheduleStudioScrollablePositionRestore(snapshot);
+      }
+
       function setActivePane(nextPane) {
         activePane = nextPane === "right" ? "right" : "left";
 
@@ -2711,7 +2813,7 @@
           record.shell.classList.toggle("is-height-capped", capped);
         }
         if (record.detail) {
-          record.detail.textContent = "HTML artifact";
+          record.detail.textContent = "HTML preview";
         }
       }
 
@@ -2719,7 +2821,7 @@
 
       function renderHtmlArtifactPreview(targetEl, html, pane, options) {
         if (!targetEl) return;
-        const title = options && options.title ? String(options.title) : "HTML artifact preview";
+        const title = options && options.title ? String(options.title) : "HTML preview";
         const previewId = "html_artifact_" + Date.now().toString(36) + "_" + Math.random().toString(36).slice(2, 10);
         pruneDisconnectedHtmlArtifactFrames();
         clearPreviewJumpHighlight(targetEl);
@@ -2736,7 +2838,7 @@
         label.textContent = title;
         const detail = document.createElement("span");
         detail.className = "studio-html-artifact-detail";
-        detail.textContent = "HTML artifact";
+        detail.textContent = "HTML preview";
 
         const tools = document.createElement("span");
         tools.className = "studio-html-artifact-tools";
@@ -2783,10 +2885,10 @@
           });
           return button;
         };
-        const zoomOutBtn = makeZoomButton("−", "Zoom out HTML artifact", () => setArtifactZoom(artifactZoom - HTML_ARTIFACT_ZOOM_STEP));
-        const zoomResetBtn = makeZoomButton("100%", "Reset HTML artifact zoom", () => setArtifactZoom(1));
+        const zoomOutBtn = makeZoomButton("−", "Zoom out HTML preview", () => setArtifactZoom(artifactZoom - HTML_ARTIFACT_ZOOM_STEP));
+        const zoomResetBtn = makeZoomButton("100%", "Reset HTML preview zoom", () => setArtifactZoom(1));
         zoomResetBtn.classList.add("studio-html-artifact-zoom-reset");
-        const zoomInBtn = makeZoomButton("+", "Zoom in HTML artifact", () => setArtifactZoom(artifactZoom + HTML_ARTIFACT_ZOOM_STEP));
+        const zoomInBtn = makeZoomButton("+", "Zoom in HTML preview", () => setArtifactZoom(artifactZoom + HTML_ARTIFACT_ZOOM_STEP));
         zoomControls.appendChild(zoomOutBtn);
         zoomControls.appendChild(zoomResetBtn);
         zoomControls.appendChild(zoomInBtn);
@@ -3882,7 +3984,7 @@
 
         const htmlArtifactSource = getRightPaneHtmlArtifactSource();
         if (htmlArtifactSource) {
-          setStatus("PDF export does not support HTML artifacts yet. Export as HTML or use the browser print dialog inside the artifact.", "warning");
+          setStatus("PDF export does not support interactive HTML previews yet. Export as HTML or use the browser print dialog inside the preview.", "warning");
           return;
         }
 
@@ -4222,6 +4324,78 @@
         return String(text || "").replace(/\r\n/g, "\n").replace(/\u200b/g, "");
       }
 
+      function getCopyableBlockquoteText(blockEl) {
+        const clone = blockEl && typeof blockEl.cloneNode === "function" ? blockEl.cloneNode(true) : null;
+        const sourceEl = clone && typeof clone.querySelectorAll === "function" ? clone : blockEl;
+        if (!sourceEl) return "";
+        if (typeof sourceEl.querySelectorAll === "function") {
+          Array.from(sourceEl.querySelectorAll(".studio-copy-block-btn")).forEach((buttonEl) => {
+            if (buttonEl && buttonEl.parentNode) buttonEl.parentNode.removeChild(buttonEl);
+          });
+        }
+
+        const blockTags = new Set(["ADDRESS", "ARTICLE", "ASIDE", "BLOCKQUOTE", "DIV", "FIGCAPTION", "FIGURE", "FOOTER", "H1", "H2", "H3", "H4", "H5", "H6", "HEADER", "LI", "OL", "P", "PRE", "SECTION", "TABLE", "TBODY", "TD", "TH", "THEAD", "TR", "UL"]);
+        const isElementBlock = (node) => node && node.nodeType === 1 && blockTags.has(String(node.tagName || "").toUpperCase());
+
+        const collectInlineText = (node) => {
+          if (!node) return "";
+          if (node.nodeType === Node.TEXT_NODE) return node.nodeValue || "";
+          if (node.nodeType !== Node.ELEMENT_NODE) return "";
+          const tag = String(node.tagName || "").toUpperCase();
+          if (tag === "SCRIPT" || tag === "STYLE" || tag === "BUTTON") return "";
+          if (tag === "BR") return "\n";
+          const childText = Array.from(node.childNodes || []).map(collectInlineText).join("");
+          return isElementBlock(node) ? childText.trim() : childText;
+        };
+
+        const collectBlocks = (node) => {
+          if (!node) return [];
+          const parts = [];
+          let inlineBuffer = "";
+          const flushInline = () => {
+            const text = inlineBuffer.replace(/[ \t]+\n/g, "\n").trim();
+            if (text) parts.push(text);
+            inlineBuffer = "";
+          };
+
+          Array.from(node.childNodes || []).forEach((child) => {
+            if (child.nodeType === Node.TEXT_NODE) {
+              inlineBuffer += child.nodeValue || "";
+              return;
+            }
+            if (child.nodeType !== Node.ELEMENT_NODE) return;
+            const tag = String(child.tagName || "").toUpperCase();
+            if (tag === "SCRIPT" || tag === "STYLE" || tag === "BUTTON") return;
+            if (tag === "BR") {
+              inlineBuffer += "\n";
+              return;
+            }
+            if (isElementBlock(child)) {
+              flushInline();
+              if (tag === "UL" || tag === "OL") {
+                Array.from(child.children || []).forEach((item, itemIndex) => {
+                  if (!item || String(item.tagName || "").toUpperCase() !== "LI") return;
+                  const prefix = tag === "OL" ? (String(itemIndex + 1) + ". ") : "- ";
+                  const itemText = collectInlineText(item).trim();
+                  if (itemText) parts.push(prefix + itemText);
+                });
+                return;
+              }
+              const blockText = tag === "BLOCKQUOTE"
+                ? collectBlocks(child).join("\n\n").trim()
+                : collectInlineText(child).trim();
+              if (blockText) parts.push(blockText);
+              return;
+            }
+            inlineBuffer += collectInlineText(child);
+          });
+          flushInline();
+          return parts;
+        };
+
+        return normalizeCopyableBlockText(collectBlocks(sourceEl).join("\n\n")).trim();
+      }
+
       function getCopyablePreviewBlockText(blockEl) {
         if (!blockEl || typeof blockEl.querySelectorAll !== "function") return "";
         if (blockEl.classList && blockEl.classList.contains("preview-code-lines")) {
@@ -4232,6 +4406,10 @@
           );
         }
 
+        if (blockEl.matches && blockEl.matches("blockquote")) {
+          return getCopyableBlockquoteText(blockEl);
+        }
+
         const codeEl = typeof blockEl.querySelector === "function"
           ? blockEl.querySelector("pre code, code")
           : null;
@@ -4289,7 +4467,7 @@
 
       function decorateCopyablePreviewBlocks(targetEl) {
         if (!targetEl || typeof targetEl.querySelectorAll !== "function") return;
-        const blocks = Array.from(targetEl.querySelectorAll("div.sourceCode, pre, .preview-code-lines"));
+        const blocks = Array.from(targetEl.querySelectorAll("div.sourceCode, pre, .preview-code-lines, blockquote"));
         blocks.forEach((blockEl) => {
           if (!blockEl || !(blockEl instanceof Element)) return;
           if (blockEl.dataset && blockEl.dataset.studioCopyDecorated === "1") return;
@@ -4400,7 +4578,7 @@
         if (editorView !== "preview") return;
         const text = prepareEditorTextForPreview(sourceTextEl.value || "");
         if (isHtmlArtifactPreviewText(text, editorLanguage)) {
-          renderHtmlArtifactPreview(sourcePreviewEl, text, "source", { title: "Editor HTML artifact preview" });
+          renderHtmlArtifactPreview(sourcePreviewEl, text, "source", { title: "Editor HTML preview" });
           return;
         }
         if (supportsCodePreviewCommentsForCurrentEditor()) {
@@ -4527,6 +4705,23 @@
           + "</div>";
       }
 
+      function renderTraceImages(images) {
+        const normalizedImages = Array.isArray(images)
+          ? images.map((image, index) => normalizeTraceImage(image, index)).filter(Boolean)
+          : [];
+        if (!normalizedImages.length) return "";
+        const cards = normalizedImages.map((image) => {
+          const src = "data:" + image.mimeType + ";base64," + image.data;
+          const caption = describeTraceImageForText(image);
+          const alt = image.label || ("Working output image: " + image.mimeType);
+          return "<figure class='trace-image-card'>"
+            + "<img src='" + escapeHtml(src) + "' alt='" + escapeHtml(alt) + "' loading='lazy' decoding='async' />"
+            + "<figcaption class='trace-image-caption'>" + escapeHtml(caption) + "</figcaption>"
+            + "</figure>";
+        }).join("");
+        return "<div class='trace-image-gallery'>" + cards + "</div>";
+      }
+
       function buildTracePanelHtml() {
         const state = traceState || createEmptyTraceState();
         const filter = normalizeTraceFilter(traceFilter);
@@ -4620,8 +4815,12 @@
           const argsSummary = entry.argsSummary
             ? "<div class='trace-section'><div class='trace-section-label'>Input</div>" + renderTraceOutput(entry.argsSummary, entry.id + ":input") + "</div>"
             : "";
-          const output = entry.output
-            ? "<div class='trace-section'><div class='trace-section-label'>Output</div>" + renderTraceOutput(entry.output, entry.id + ":output") + "</div>"
+          const imageOutput = renderTraceImages(entry.images);
+          const outputPieces = [];
+          if (entry.output) outputPieces.push(renderTraceOutput(entry.output, entry.id + ":output"));
+          if (imageOutput) outputPieces.push(imageOutput);
+          const output = outputPieces.length
+            ? "<div class='trace-section'><div class='trace-section-label'>Output</div>" + outputPieces.join("") + "</div>"
             : "<div class='trace-empty-inline'>No output yet.</div>";
           const toolStatusLabel = entry.isError
             ? "Error"
@@ -4672,7 +4871,7 @@
             return;
           }
           if (isHtmlArtifactPreviewText(editorText, editorLanguage)) {
-            renderHtmlArtifactPreview(critiqueViewEl, editorText, "response", { title: "Editor HTML artifact preview" });
+            renderHtmlArtifactPreview(critiqueViewEl, editorText, "response", { title: "Editor HTML preview" });
             return;
           }
           if (supportsCodePreviewCommentsForCurrentEditor()) {
@@ -4696,7 +4895,7 @@
 
         if (rightView === "preview") {
           if (isHtmlArtifactPreviewText(markdown, "")) {
-            renderHtmlArtifactPreview(critiqueViewEl, markdown, "response", { title: "Response HTML artifact preview" });
+            renderHtmlArtifactPreview(critiqueViewEl, markdown, "response", { title: "Response HTML preview" });
             return;
           }
           const nonce = ++responsePreviewRenderNonce;
@@ -4777,7 +4976,7 @@
           } else if (!canExportPreview) {
             exportPdfBtn.title = "Nothing to export yet.";
           } else if (isHtmlArtifactPreview) {
-            exportPdfBtn.title = "This is an HTML artifact preview. Export as HTML; PDF export is not available yet.";
+            exportPdfBtn.title = "This is an interactive HTML preview. Export as HTML; PDF export is not available yet.";
           } else {
             exportPdfBtn.title = "Choose PDF or HTML and export the current right-pane preview.";
           }
@@ -4785,18 +4984,18 @@
         if (exportPreviewPdfBtn) {
           exportPreviewPdfBtn.disabled = uiBusy || previewExportInProgress || !canExportPreview || isHtmlArtifactPreview;
           exportPreviewPdfBtn.title = isHtmlArtifactPreview
-            ? "HTML artifact PDF export is not available yet."
+            ? "Interactive HTML preview PDF export is not available yet."
             : "Export the current right-pane preview as PDF.";
         }
         if (exportPreviewHtmlBtn) {
           exportPreviewHtmlBtn.disabled = uiBusy || previewExportInProgress || !canExportPreview;
           exportPreviewHtmlBtn.title = isHtmlArtifactPreview
-            ? "Export the authored HTML artifact."
+            ? "Export the authored HTML preview."
             : "Export the current right-pane preview as standalone HTML.";
         }
         if (exportPreviewControlsEl) {
           exportPreviewControlsEl.title = canExportPreview
-            ? (isHtmlArtifactPreview ? "Export this HTML artifact." : "Choose a format and export the current right-pane preview.")
+            ? (isHtmlArtifactPreview ? "Export this HTML preview." : "Choose a format and export the current right-pane preview.")
             : "Switch right pane to a non-empty preview before exporting.";
         }
         if (!canExportPreview || previewExportInProgress) {
@@ -11114,9 +11313,12 @@
           setWsState("Ready");
           const targetUrl = resolveCompanionEditorTargetUrl(message);
           const opened = navigatePendingCompanionWindow(responseRequestId, targetUrl);
+          const readyMessage = typeof message.message === "string" && message.message.trim()
+            ? message.message.trim()
+            : "Opened companion editor with a detached copy of the current editor text.";
           setStatus(
             opened
-              ? "Opened companion editor with a detached copy of the current editor text."
+              ? readyMessage
               : (targetUrl ? "Companion editor ready: " + targetUrl : "Companion editor is ready, but Studio did not receive a URL."),
             opened ? "success" : "warning",
           );
@@ -11578,13 +11780,13 @@
       }
 
       if (leftPaneEl) {
-        leftPaneEl.addEventListener("mousedown", () => setActivePane("left"));
-        leftPaneEl.addEventListener("focusin", () => setActivePane("left"));
+        leftPaneEl.addEventListener("mousedown", (event) => activatePaneFromInteraction("left", event));
+        leftPaneEl.addEventListener("focusin", (event) => activatePaneFromInteraction("left", event));
       }
 
       if (rightPaneEl) {
-        rightPaneEl.addEventListener("mousedown", () => setActivePane("right"));
-        rightPaneEl.addEventListener("focusin", () => setActivePane("right"));
+        rightPaneEl.addEventListener("mousedown", (event) => activatePaneFromInteraction("right", event));
+        rightPaneEl.addEventListener("focusin", (event) => activatePaneFromInteraction("right", event));
       }
 
       if (leftFocusBtn) {
@@ -12074,10 +12276,6 @@
       if (openCompanionBtn) {
         openCompanionBtn.addEventListener("click", () => {
           const content = sourceTextEl.value;
-          if (!content.trim()) {
-            setStatus("Editor is empty. Nothing to copy into a companion view.", "warning");
-            return;
-          }
 
           const requestId = beginUiAction("open_editor_only");
           if (!requestId) return;

package/client/studio.css

@@ -1232,6 +1232,10 @@
       position: relative;
     }
 
+    .rendered-markdown blockquote.studio-copyable-block {
+      padding-right: 3.6rem;
+    }
+
     .rendered-markdown .studio-copy-block-btn {
       position: absolute;
       top: 8px;
@@ -2088,6 +2092,48 @@
       background: var(--panel);
     }
 
+    .trace-image-gallery {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
+      gap: 8px;
+      padding: 8px;
+      border: 1px solid var(--panel-border);
+      border-radius: 8px;
+      background: var(--panel);
+    }
+
+    .trace-output-wrap + .trace-image-gallery,
+    .trace-output + .trace-image-gallery {
+      margin-top: 4px;
+    }
+
+    .trace-image-card {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+      min-width: 0;
+      margin: 0;
+      padding: 7px;
+      border: 1px solid var(--border-subtle);
+      border-radius: 7px;
+      background: var(--panel-2);
+    }
+
+    .trace-image-card img {
+      display: block;
+      width: 100%;
+      max-height: 520px;
+      object-fit: contain;
+      border-radius: 5px;
+      background: var(--panel);
+    }
+
+    .trace-image-caption {
+      color: var(--muted);
+      font-size: 11px;
+      overflow-wrap: anywhere;
+    }
+
     .trace-output-truncation {
       display: flex;
       align-items: center;

package/index.ts

@@ -196,6 +196,14 @@ interface StudioTraceAssistantEntry {
 	stopReason: string | null;
 }
 
+interface StudioTraceImage {
+	id: string;
+	mimeType: string;
+	data: string;
+	byteLength: number | null;
+	label: string | null;
+}
+
 interface StudioTraceToolEntry {
 	id: string;
 	type: "tool";
@@ -204,6 +212,7 @@ interface StudioTraceToolEntry {
 	label: string | null;
 	argsSummary: string | null;
 	output: string;
+	images: StudioTraceImage[];
 	startedAt: number;
 	updatedAt: number;
 	status: StudioTraceEntryStatus;
@@ -345,6 +354,11 @@ const MAX_PREPARED_PDF_EXPORTS = 8;
 const MAX_PREPARED_HTML_EXPORTS = 8;
 const STUDIO_TRACE_SNAPSHOT_MAX_ENTRIES = 80;
 const STUDIO_TRACE_SNAPSHOT_MAX_FIELD_CHARS = 20_000;
+const STUDIO_TRACE_IMAGE_MAX_COUNT = 8;
+const STUDIO_TRACE_IMAGE_MAX_BASE64_CHARS = 2_500_000;
+const STUDIO_TRACE_SNAPSHOT_MAX_IMAGES = 12;
+const STUDIO_TRACE_SNAPSHOT_MAX_IMAGE_BASE64_CHARS = 6_000_000;
+const STUDIO_TRACE_IMAGE_SAFE_MIME_TYPES = new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
 const MAX_STUDIO_TRACE_SNAPSHOTS = RESPONSE_HISTORY_LIMIT;
 const TRANSIENT_STUDIO_DOCUMENT_TTL_MS = 30 * 60 * 1000;
 const MAX_TRANSIENT_STUDIO_DOCUMENTS = 16;
@@ -3457,6 +3471,49 @@ function normalizeStudioMarkdownFencedBlocks(markdown: string): string {
 	return out.join("\n");
 }
 
+interface StudioYamlFrontMatterSplit {
+	frontMatter: string;
+	body: string;
+}
+
+function splitStudioYamlFrontMatter(markdown: string): StudioYamlFrontMatterSplit | null {
+	const source = String(markdown ?? "");
+	const match = source.match(/^(\uFEFF?---[ \t]*(?:\r?\n)[\s\S]*?(?:\r?\n)---[ \t]*(?:\r?\n|$))([\s\S]*)$/);
+	if (!match) return null;
+	return {
+		frontMatter: match[1] ?? "",
+		body: match[2] ?? "",
+	};
+}
+
+function mapStudioMarkdownBodyPreservingYamlFrontMatter(markdown: string, transformBody: (body: string) => string): string {
+	const source = String(markdown ?? "");
+	const split = splitStudioYamlFrontMatter(source);
+	if (!split) return transformBody(source);
+	return `${split.frontMatter}${transformBody(split.body)}`;
+}
+
+function stripStudioMarkdownHtmlCommentsPreservingYamlFrontMatter(markdown: string): string {
+	return mapStudioMarkdownBodyPreservingYamlFrontMatter(markdown, (body) => stripStudioMarkdownHtmlComments(body));
+}
+
+function hasStudioYamlHeaderIncludes(markdown: string): boolean {
+	const split = splitStudioYamlFrontMatter(markdown);
+	if (!split) return false;
+	return /^\s*header-includes\s*:/im.test(split.frontMatter);
+}
+
+function prepareStudioMarkdownForPandoc(markdown: string, options?: { preserveLiteralLatexCommands?: boolean }): string {
+	const shouldPreserveLiteralLatexCommands = options?.preserveLiteralLatexCommands !== false;
+	return mapStudioMarkdownBodyPreservingYamlFrontMatter(markdown, (body) => {
+		const normalizedMath = normalizeMathDelimiters(body);
+		const latexReady = shouldPreserveLiteralLatexCommands
+			? preserveLiteralLatexCommandsInMarkdown(normalizedMath)
+			: normalizedMath;
+		return normalizeObsidianImages(latexReady);
+	});
+}
+
 function hasStudioMarkdownDiffFence(markdown: string): boolean {
 	const lines = String(markdown ?? "").replace(/\r\n/g, "\n").split("\n");
 
@@ -4300,8 +4357,10 @@ function prepareStudioPdfMarkdown(markdown: string, isLatex?: boolean, editorLan
 	const annotationReadySource = !effectiveEditorLanguage || effectiveEditorLanguage === "markdown" || effectiveEditorLanguage === "latex"
 		? replaceStudioAnnotationMarkersForPdf(source)
 		: source;
-	const commentStrippedSource = stripStudioMarkdownHtmlComments(annotationReadySource);
-	return normalizeObsidianImages(preserveLiteralLatexCommandsInMarkdown(normalizeMathDelimiters(commentStrippedSource)));
+	const commentStrippedSource = stripStudioMarkdownHtmlCommentsPreservingYamlFrontMatter(annotationReadySource);
+	return prepareStudioMarkdownForPandoc(commentStrippedSource, {
+		preserveLiteralLatexCommands: !hasStudioYamlHeaderIncludes(annotationReadySource),
+	});
 }
 
 function stripMathMlAnnotationTags(html: string): string {
@@ -4559,7 +4618,7 @@ function decorateStudioPandocSyntaxHtml(html: string): string {
 
 async function renderStudioMarkdownWithPandoc(markdown: string, isLatex?: boolean, resourcePath?: string, sourcePath?: string): Promise<string> {
 	const pandocCommand = process.env.PANDOC_PATH?.trim() || "pandoc";
-	const markdownWithoutHtmlComments = isLatex ? markdown : stripStudioMarkdownHtmlComments(markdown);
+	const markdownWithoutHtmlComments = isLatex ? markdown : stripStudioMarkdownHtmlCommentsPreservingYamlFrontMatter(markdown);
 	const markdownWithPreviewPageBreaks = isLatex ? markdownWithoutHtmlComments : replaceStudioPreviewPageBreakCommands(markdownWithoutHtmlComments);
 	const latexSubfigurePreviewTransform = isLatex
 		? preprocessStudioLatexSubfiguresForPreview(markdownWithPreviewPageBreaks)
@@ -4580,7 +4639,7 @@ async function renderStudioMarkdownWithPandoc(markdown: string, isLatex?: boolea
 	}
 	const normalizedMarkdown = isLatex
 		? sourceWithResolvedRefs
-		: normalizeStudioMarkdownFencedBlocks(normalizeObsidianImages(preserveLiteralLatexCommandsInMarkdown(normalizeMathDelimiters(sourceWithResolvedRefs))));
+		: normalizeStudioMarkdownFencedBlocks(prepareStudioMarkdownForPandoc(sourceWithResolvedRefs));
 	const pandocWorkingDir = resolveStudioPandocWorkingDir(resourcePath);
 
 	let renderedHtml = await new Promise<string>((resolve, reject) => {
@@ -5501,6 +5560,8 @@ async function renderStudioPdfWithPandoc(
 		await mkdir(tempDir, { recursive: true });
 		await writeFile(preamblePath, buildStudioPdfPreamble(pdfOptions), "utf-8");
 
+		const hasYamlHeaderIncludesForPdf = inputFormat !== "latex" && hasStudioYamlHeaderIncludes(markdownForPdf);
+		const headerIncludeArgs = hasYamlHeaderIncludesForPdf ? [] : ["--include-in-header", preamblePath];
 		const args = [
 			"-f", inputFormat,
 			"-o", outputPath,
@@ -5508,7 +5569,7 @@ async function renderStudioPdfWithPandoc(
 			...buildStudioPdfPandocVariableArgs(pdfOptions, inputFormat !== "latex"),
 			"-V", "urlcolor=blue",
 			"-V", "linkcolor=blue",
-			"--include-in-header", preamblePath,
+			...headerIncludeArgs,
 			...bibliographyArgs,
 		];
 		if (resourcePath) args.push(`--resource-path=${resourcePath}`);
@@ -5652,6 +5713,8 @@ async function renderStudioPdfWithPandoc(
 		return { pdf: rendered.pdf, warning: mermaidPrepared.warning ?? rendered.warning };
 	}
 
+	const hasYamlHeaderIncludesForPdf = !isLatex && hasStudioYamlHeaderIncludes(markdownForPdf);
+	const headerIncludeArgs = hasYamlHeaderIncludesForPdf ? [] : ["--include-in-header", preamblePath];
 	const args = [
 		"-f", inputFormat,
 		"-o", outputPath,
@@ -5659,7 +5722,7 @@ async function renderStudioPdfWithPandoc(
 		...buildStudioPdfPandocVariableArgs(pdfOptions, !isLatex),
 		"-V", "urlcolor=blue",
 		"-V", "linkcolor=blue",
-		"--include-in-header", preamblePath,
+		...headerIncludeArgs,
 		...bibliographyArgs,
 	];
 	if (resourcePath) args.push(`--resource-path=${resourcePath}`);
@@ -6600,9 +6663,44 @@ function truncateStudioTraceSnapshotText(text: string, maxChars = STUDIO_TRACE_S
 	};
 }
 
+function copyStudioTraceImagesForSnapshot(
+	images: StudioTraceImage[] | undefined,
+	budget: { remainingImages: number; remainingBase64Chars: number },
+): { images: StudioTraceImage[]; omitted: number } {
+	const copied: StudioTraceImage[] = [];
+	let omitted = 0;
+	for (const image of Array.isArray(images) ? images : []) {
+		if (!image || typeof image !== "object") continue;
+		const mimeType = normalizeStudioTraceImageMimeType(image.mimeType);
+		const data = typeof image.data === "string" ? image.data : "";
+		if (!data || !isStudioTraceSafeImageMimeType(mimeType)) {
+			omitted += 1;
+			continue;
+		}
+		if (budget.remainingImages <= 0 || data.length > budget.remainingBase64Chars) {
+			omitted += 1;
+			continue;
+		}
+		copied.push({
+			id: typeof image.id === "string" && image.id.trim() ? image.id : `trace-image-snapshot-${copied.length + 1}`,
+			mimeType,
+			data,
+			byteLength: typeof image.byteLength === "number" && Number.isFinite(image.byteLength) ? image.byteLength : estimateStudioTraceBase64ByteLength(data),
+			label: typeof image.label === "string" && image.label.trim() ? image.label : null,
+		});
+		budget.remainingImages -= 1;
+		budget.remainingBase64Chars -= data.length;
+	}
+	return { images: copied, omitted };
+}
+
 function createStudioTraceSnapshot(source: StudioTraceState): { traceState: StudioTraceState; truncated: boolean } {
 	let truncated = false;
 	const sourceEntries = Array.isArray(source.entries) ? source.entries : [];
+	const imageBudget = {
+		remainingImages: STUDIO_TRACE_SNAPSHOT_MAX_IMAGES,
+		remainingBase64Chars: STUDIO_TRACE_SNAPSHOT_MAX_IMAGE_BASE64_CHARS,
+	};
 	const entries = sourceEntries.slice(-STUDIO_TRACE_SNAPSHOT_MAX_ENTRIES).map((entry) => {
 		if (entry.type === "assistant") {
 			const thinking = truncateStudioTraceSnapshotText(entry.thinking);
@@ -6616,11 +6714,16 @@ function createStudioTraceSnapshot(source: StudioTraceState): { traceState: Stud
 		}
 		const argsSummary = truncateStudioTraceSnapshotText(entry.argsSummary ?? "");
 		const output = truncateStudioTraceSnapshotText(entry.output);
-		truncated = truncated || argsSummary.truncated || output.truncated;
+		const snapshotImages = copyStudioTraceImagesForSnapshot(entry.images, imageBudget);
+		truncated = truncated || argsSummary.truncated || output.truncated || snapshotImages.omitted > 0;
+		const omittedImageNote = snapshotImages.omitted > 0
+			? `[${snapshotImages.omitted} image preview${snapshotImages.omitted === 1 ? "" : "s"} omitted from saved Working view to keep history bounded.]`
+			: "";
 		return {
 			...entry,
 			argsSummary: argsSummary.text || null,
-			output: output.text,
+			output: [output.text, omittedImageNote].filter(Boolean).join("\n"),
+			images: snapshotImages.images,
 		};
 	});
 	if (sourceEntries.length > entries.length) truncated = true;
@@ -6657,29 +6760,102 @@ function sanitizeStudioTraceOutputText(text: string): string {
 		.replace(/\b[A-Za-z0-9+/]{3000,}={0,2}\b/g, "[base64 data omitted]");
 }
 
+function normalizeStudioTraceImageMimeType(value: unknown): string {
+	return typeof value === "string" ? value.trim().toLowerCase() : "";
+}
+
+function getStudioTraceImageMimeType(block: unknown): string {
+	if (!block || typeof block !== "object") return "";
+	const payload = block as Record<string, unknown>;
+	const source = payload.source && typeof payload.source === "object" ? payload.source as Record<string, unknown> : null;
+	return normalizeStudioTraceImageMimeType(
+		payload.mimeType
+			?? payload.mediaType
+			?? payload.media_type
+			?? source?.mimeType
+			?? source?.mediaType
+			?? source?.media_type,
+	);
+}
+
 function isStudioTraceImageBlock(block: unknown): boolean {
 	if (!block || typeof block !== "object") return false;
 	const payload = block as Record<string, unknown>;
 	const type = typeof payload.type === "string" ? payload.type.toLowerCase() : "";
 	if (type.includes("image")) return true;
-	const mime = typeof payload.mimeType === "string"
-		? payload.mimeType
-		: (typeof payload.media_type === "string" ? payload.media_type : "");
-	if (mime.toLowerCase().startsWith("image/")) return true;
+	return getStudioTraceImageMimeType(block).startsWith("image/");
+}
+
+function isStudioTraceSafeImageMimeType(mimeType: string): boolean {
+	return STUDIO_TRACE_IMAGE_SAFE_MIME_TYPES.has(normalizeStudioTraceImageMimeType(mimeType));
+}
+
+function getStudioTraceImageData(block: unknown): string | null {
+	if (!block || typeof block !== "object") return null;
+	const payload = block as Record<string, unknown>;
+	if (typeof payload.data === "string") return payload.data;
 	const source = payload.source && typeof payload.source === "object" ? payload.source as Record<string, unknown> : null;
-	const sourceMime = source && typeof source.media_type === "string" ? source.media_type : "";
-	return sourceMime.toLowerCase().startsWith("image/");
+	if (source && typeof source.data === "string") return source.data;
+	return null;
+}
+
+function normalizeStudioTraceBase64Data(data: string): string | null {
+	const compact = String(data || "").replace(/\s+/g, "");
+	if (!compact || !/^[A-Za-z0-9+/]*={0,2}$/.test(compact)) return null;
+	return compact;
 }
 
-function describeStudioTraceImageBlock(block: unknown): string {
+function estimateStudioTraceBase64ByteLength(data: string): number | null {
+	const compact = normalizeStudioTraceBase64Data(data);
+	if (!compact) return null;
+	const padding = compact.endsWith("==") ? 2 : (compact.endsWith("=") ? 1 : 0);
+	return Math.max(0, Math.floor((compact.length * 3) / 4) - padding);
+}
+
+function formatStudioTraceByteSize(bytes: number | null): string {
+	if (typeof bytes !== "number" || !Number.isFinite(bytes) || bytes < 0) return "unknown size";
+	if (bytes < 1024) return `${Math.round(bytes)} B`;
+	const kib = bytes / 1024;
+	if (kib < 1024) return `${kib.toFixed(kib >= 100 ? 0 : 1).replace(/\.0$/, "")} KB`;
+	const mib = kib / 1024;
+	return `${mib.toFixed(mib >= 100 ? 0 : 1).replace(/\.0$/, "")} MB`;
+}
+
+function describeStudioTraceImageBlock(block: unknown, reason?: string): string {
+	const mime = getStudioTraceImageMimeType(block) || "image";
+	return `[Image: ${mime}${reason ? ` ${reason}` : ""}]`;
+}
+
+function collectStudioTraceImageBlock(block: unknown, images: StudioTraceImage[]): string {
+	const mimeType = getStudioTraceImageMimeType(block) || "image/unknown";
+	if (!isStudioTraceSafeImageMimeType(mimeType)) {
+		return describeStudioTraceImageBlock(block, "omitted from Working view: unsupported image type");
+	}
+	if (images.length >= STUDIO_TRACE_IMAGE_MAX_COUNT) {
+		return describeStudioTraceImageBlock(block, "omitted from Working view: image count limit reached");
+	}
+	const data = getStudioTraceImageData(block);
+	const normalizedData = data ? normalizeStudioTraceBase64Data(data) : null;
+	if (!normalizedData) {
+		return describeStudioTraceImageBlock(block, "omitted from Working view: no base64 data");
+	}
+	if (normalizedData.length > STUDIO_TRACE_IMAGE_MAX_BASE64_CHARS) {
+		const estimatedBytes = estimateStudioTraceBase64ByteLength(normalizedData);
+		return describeStudioTraceImageBlock(block, `omitted from Working view: ${formatStudioTraceByteSize(estimatedBytes)} exceeds image preview limit`);
+	}
 	const payload = (block && typeof block === "object") ? block as Record<string, unknown> : {};
-	const source = payload.source && typeof payload.source === "object" ? payload.source as Record<string, unknown> : null;
-	const mime = typeof payload.mimeType === "string"
-		? payload.mimeType
-		: (typeof payload.media_type === "string"
-			? payload.media_type
-			: (source && typeof source.media_type === "string" ? source.media_type : "image"));
-	return `[Image: ${mime || "image"} output omitted from Working view]`;
+	const hash = createHash("sha256").update(mimeType).update(normalizedData).digest("hex").slice(0, 16);
+	const image: StudioTraceImage = {
+		id: `trace-image-${hash}-${images.length + 1}`,
+		mimeType,
+		data: normalizedData,
+		byteLength: estimateStudioTraceBase64ByteLength(normalizedData),
+		label: typeof payload.label === "string" && payload.label.trim()
+			? payload.label.trim()
+			: (typeof payload.alt === "string" && payload.alt.trim() ? payload.alt.trim() : null),
+	};
+	images.push(image);
+	return "";
 }
 
 function stringifyStudioTraceObject(value: unknown): string {
@@ -6696,19 +6872,19 @@ function stringifyStudioTraceObject(value: unknown): string {
 	}
 }
 
-function formatStudioTraceOutput(result: unknown): string {
+function formatStudioTraceOutputPart(result: unknown, images: StudioTraceImage[]): string {
 	if (result == null) return "";
 	if (typeof result === "string") return sanitizeStudioTraceOutputText(result);
 	if (Array.isArray(result)) {
-		return result.map((item) => formatStudioTraceOutput(item)).filter(Boolean).join("\n");
+		return result.map((item) => formatStudioTraceOutputPart(item, images)).filter(Boolean).join("\n");
 	}
 	if (typeof result === "object") {
-		if (isStudioTraceImageBlock(result)) return describeStudioTraceImageBlock(result);
+		if (isStudioTraceImageBlock(result)) return collectStudioTraceImageBlock(result, images);
 		const payload = result as { content?: Array<{ type?: string; text?: string }> };
 		if (Array.isArray(payload.content)) {
 			return payload.content
 				.map((block) => {
-					if (isStudioTraceImageBlock(block)) return describeStudioTraceImageBlock(block);
+					if (isStudioTraceImageBlock(block)) return collectStudioTraceImageBlock(block, images);
 					if (block && block.type === "text" && typeof block.text === "string") return sanitizeStudioTraceOutputText(block.text);
 					return stringifyStudioTraceObject(block);
 				})
@@ -6720,6 +6896,18 @@ function formatStudioTraceOutput(result: unknown): string {
 	return sanitizeStudioTraceOutputText(String(result));
 }
 
+function formatStudioTraceToolResult(result: unknown): { output: string; images: StudioTraceImage[] } {
+	const images: StudioTraceImage[] = [];
+	return {
+		output: formatStudioTraceOutputPart(result, images),
+		images,
+	};
+}
+
+function formatStudioTraceOutput(result: unknown): string {
+	return formatStudioTraceToolResult(result).output;
+}
+
 function summarizeStudioTraceToolArgs(toolName: string, args: unknown): string | null {
 	const normalizedTool = String(toolName || "").trim().toLowerCase();
 	const payload = (args && typeof args === "object") ? (args as Record<string, unknown>) : {};
@@ -8102,6 +8290,7 @@ export default function (pi: ExtensionAPI) {
 			label: deriveToolActivityLabel(toolName, args),
 			argsSummary: summarizeStudioTraceToolArgs(toolName, args),
 			output: "",
+			images: [],
 			startedAt: now,
 			updatedAt: now,
 			status: "pending",
@@ -8119,9 +8308,11 @@ export default function (pi: ExtensionAPI) {
 		output: string,
 		status: StudioTraceEntryStatus,
 		isError: boolean,
+		images?: StudioTraceImage[],
 	) => {
 		const entry = ensureStudioTraceToolEntry(toolCallId, toolName, args);
 		entry.output = output;
+		if (Array.isArray(images)) entry.images = images;
 		entry.status = status;
 		entry.isError = isError;
 		entry.updatedAt = Date.now();
@@ -8599,9 +8790,10 @@ export default function (pi: ExtensionAPI) {
 			}
 
 			const resourceDir = resolveStudioCompanionResourceDir(msg.path, msg.resourceDir, studioCwd);
+			const hasContent = msg.content.trim().length > 0;
 			const document: InitialStudioDocument = {
 				text: msg.content,
-				label: buildStudioCompanionLabel(msg.label),
+				label: hasContent ? buildStudioCompanionLabel(msg.label) : "blank companion editor",
 				source: "blank",
 				draftId: createStudioDraftId(),
 				resourceDir,
@@ -8614,7 +8806,9 @@ export default function (pi: ExtensionAPI) {
 				requestId: msg.requestId,
 				url,
 				relativeUrl: `${parsedUrl.pathname}${parsedUrl.search}`,
-				message: "Companion editor is ready with a detached copy of the current editor text.",
+				message: hasContent
+					? "Companion editor is ready with a detached copy of the current editor text."
+					: "Blank companion editor is ready.",
 			});
 			return;
 		}
@@ -10181,25 +10375,29 @@ export default function (pi: ExtensionAPI) {
 
 	pi.on("tool_execution_update", async (event) => {
 		if (!agentBusy) return;
+		const formatted = formatStudioTraceToolResult(event.partialResult);
 		updateStudioTraceToolEntry(
 			event.toolCallId,
 			event.toolName,
 			event.args,
-			formatStudioTraceOutput(event.partialResult),
+			formatted.output,
 			"streaming",
 			false,
+			formatted.images,
 		);
 	});
 
 	pi.on("tool_execution_end", async (event) => {
 		if (!agentBusy) return;
+		const formatted = formatStudioTraceToolResult(event.result);
 		updateStudioTraceToolEntry(
 			event.toolCallId,
 			event.toolName,
 			undefined,
-			formatStudioTraceOutput(event.result),
+			formatted.output,
 			event.isError ? "error" : "complete",
 			Boolean(event.isError),
+			formatted.images,
 		);
 		emitDebugEvent("tool_execution_end", { toolName: event.toolName, activeRequestId: activeRequest?.id ?? null, activeRequestKind: activeRequest?.kind ?? null });
 		// Keep tool phase visible until the next tool call, assistant response phase,

package/package.json

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