pi-studio 0.8.3 → 0.8.4

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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

package/README.md

@@ -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,7 +34,7 @@ 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 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

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");
       }
@@ -4267,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")) {
@@ -4277,6 +4406,10 @@
           );
         }
 
+        if (blockEl.matches && blockEl.matches("blockquote")) {
+          return getCopyableBlockquoteText(blockEl);
+        }
+
         const codeEl = typeof blockEl.querySelector === "function"
           ? blockEl.querySelector("pre code, code")
           : null;
@@ -4334,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;
@@ -4572,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);
@@ -4665,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"

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;
@@ -6649,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);
@@ -6665,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;
@@ -6706,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 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 describeStudioTraceImageBlock(block: unknown): string {
+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 {
@@ -6745,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);
 				})
@@ -6769,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>) : {};
@@ -8151,6 +8290,7 @@ export default function (pi: ExtensionAPI) {
 			label: deriveToolActivityLabel(toolName, args),
 			argsSummary: summarizeStudioTraceToolArgs(toolName, args),
 			output: "",
+			images: [],
 			startedAt: now,
 			updatedAt: now,
 			status: "pending",
@@ -8168,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();
@@ -10233,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,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.8.3",
+  "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",