pi-studio 0.9.24 → 0.9.26

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to `pi-studio` are documented here.
 
+## [0.9.26] — 2026-06-04
+
+### Fixed
+- Made Studio Markdown previews compatible with older Pandoc versions by falling back to `--self-contained` when `--embed-resources` is unavailable.
+
+## [0.9.25] — 2026-06-01
+
+### Changed
+- Render common Working-view tool inputs more readably, with summaries for edit/write/read/bash calls and raw inputs available behind collapsible details.
+
 ## [0.9.24] — 2026-06-01
 
 ### Added

package/client/studio-client.js

@@ -9018,6 +9018,166 @@
           + "</div>";
       }
 
+      function parseTraceToolArgsObject(inputText) {
+        const value = String(inputText || "").trim();
+        if (!value || (value[0] !== "{" && value[0] !== "[")) return null;
+        try {
+          const parsed = JSON.parse(value);
+          return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : null;
+        } catch {
+          return null;
+        }
+      }
+
+      function countTraceTextLines(text) {
+        const value = String(text || "");
+        return value ? value.split(/\n/).length : 0;
+      }
+
+      function formatTraceTextMetrics(text) {
+        const value = String(text || "");
+        const lines = countTraceTextLines(value);
+        const chars = value.length;
+        return formatCompactNumber(lines) + " line" + (lines === 1 ? "" : "s")
+          + ", " + formatCompactNumber(chars) + " char" + (chars === 1 ? "" : "s");
+      }
+
+      function renderTraceToolField(label, value, className) {
+        const text = String(value || "").trim();
+        if (!text) return "";
+        const extraClass = className ? " " + String(className) : "";
+        return "<div class='trace-tool-field'>"
+          + "<span class='trace-tool-field-label'>" + escapeHtml(label) + "</span>"
+          + "<code class='trace-tool-field-value" + extraClass + "' title='" + escapeHtml(text) + "'>" + escapeHtml(text) + "</code>"
+          + "</div>";
+      }
+
+      function renderTraceRawInputDetails(inputText, outputKey) {
+        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 + ">"
+          + "<summary>Raw input</summary>"
+          + "<div class='trace-tool-details-body'>"
+          + renderTraceOutput(value, rawKey, { label: "Raw input" })
+          + "</div>"
+          + "</details>";
+      }
+
+      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 + ">"
+          + "<summary>" + escapeHtml(summary) + "</summary>"
+          + "<div class='trace-tool-details-body'>"
+          + renderTraceOutput(value || emptyText, outputKey, { label })
+          + "</div>"
+          + "</details>";
+      }
+
+      function renderTraceEditInput(entry, payload, inputText) {
+        const path = payload && typeof payload.path === "string" ? payload.path : "";
+        const edits = payload && Array.isArray(payload.edits) ? payload.edits : [];
+        const replacements = edits
+          .map((edit, index) => {
+            const item = edit && typeof edit === "object" ? edit : {};
+            return {
+              index,
+              oldText: typeof item.oldText === "string" ? item.oldText : "",
+              newText: typeof item.newText === "string" ? item.newText : "",
+            };
+          })
+          .filter((edit) => edit.oldText || edit.newText);
+        const replacementCount = replacements.length || edits.length;
+        const fields = "<div class='trace-tool-fields'>"
+          + renderTraceToolField("Path", path, "trace-tool-path")
+          + renderTraceToolField("Changes", replacementCount + " replacement" + (replacementCount === 1 ? "" : "s"), "")
+          + "</div>";
+        const changes = replacements.length
+          ? "<div class='trace-tool-change-list'>" + replacements.map((edit, displayIndex) => {
+            const oldMetrics = formatTraceTextMetrics(edit.oldText);
+            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 + ">"
+              + "<summary>Replacement " + escapeHtml(String(displayIndex + 1)) + " · " + escapeHtml(oldMetrics) + " → " + escapeHtml(newMetrics) + "</summary>"
+              + "<div class='trace-tool-change-body'>"
+              + "<div class='trace-tool-change-grid'>"
+              + "<div class='trace-tool-change-column'><div class='trace-tool-code-label'>Old text</div>"
+              + renderTraceOutput(edit.oldText || "[empty]", oldKey, { label: "Old text" })
+              + "</div>"
+              + "<div class='trace-tool-change-column'><div class='trace-tool-code-label'>New text</div>"
+              + renderTraceOutput(edit.newText || "[empty]", newKey, { label: "New text" })
+              + "</div>"
+              + "</div>"
+              + "</div>"
+              + "</details>";
+          }).join("") + "</div>"
+          : "";
+        return "<div class='trace-tool-input trace-tool-input-edit'>"
+          + fields
+          + changes
+          + renderTraceRawInputDetails(inputText, entry.id + ":input")
+          + "</div>";
+      }
+
+      function renderTraceWriteInput(entry, payload, inputText) {
+        const path = payload && typeof payload.path === "string" ? payload.path : "";
+        const content = payload && typeof payload.content === "string" ? payload.content : null;
+        const fields = "<div class='trace-tool-fields'>"
+          + renderTraceToolField("Path", path, "trace-tool-path")
+          + (content !== null ? renderTraceToolField("Content", formatTraceTextMetrics(content), "") : "")
+          + "</div>";
+        const contentDetails = content !== null
+          ? renderTraceToolTextDetails("Content · " + formatTraceTextMetrics(content), content, entry.id + ":write:content", "Content", { className: "trace-tool-content" })
+          : "";
+        return "<div class='trace-tool-input trace-tool-input-write'>"
+          + fields
+          + contentDetails
+          + renderTraceRawInputDetails(inputText, entry.id + ":input")
+          + "</div>";
+      }
+
+      function renderTraceReadInput(entry, payload, inputText) {
+        const path = payload && typeof payload.path === "string" ? payload.path : "";
+        const offset = payload && (typeof payload.offset === "number" || typeof payload.offset === "string") ? String(payload.offset) : "";
+        const limit = payload && (typeof payload.limit === "number" || typeof payload.limit === "string") ? String(payload.limit) : "";
+        const fields = "<div class='trace-tool-fields'>"
+          + renderTraceToolField("Path", path, "trace-tool-path")
+          + renderTraceToolField("Offset", offset ? "line " + offset : "", "")
+          + renderTraceToolField("Limit", limit ? limit + " lines" : "", "")
+          + "</div>";
+        return "<div class='trace-tool-input trace-tool-input-read'>"
+          + fields
+          + renderTraceRawInputDetails(inputText, entry.id + ":input")
+          + "</div>";
+      }
+
+      function renderTraceCommandInput(entry, inputText, label) {
+        const value = String(inputText || "").trim();
+        if (!value) return "";
+        return "<div class='trace-tool-input trace-tool-input-command'>"
+          + "<div class='trace-tool-code-label'>" + escapeHtml(label || "Command") + "</div>"
+          + renderTraceOutput(value, entry.id + ":input", { label: label || "Command" })
+          + "</div>";
+      }
+
+      function renderTraceToolInput(entry) {
+        const inputText = String(entry.args || entry.argsSummary || "").trim();
+        if (!inputText) return "";
+        const toolName = String(entry.toolName || "").trim().toLowerCase();
+        if (toolName === "bash") return renderTraceCommandInput(entry, inputText, "Command");
+        if (toolName === "repl_send" || toolName === "studio_repl_send") return renderTraceCommandInput(entry, inputText, "Code");
+        const payload = parseTraceToolArgsObject(inputText);
+        if (payload && toolName === "edit") return renderTraceEditInput(entry, payload, inputText);
+        if (payload && toolName === "write") return renderTraceWriteInput(entry, payload, inputText);
+        if (payload && toolName === "read") return renderTraceReadInput(entry, payload, inputText);
+        return renderTraceOutput(inputText, entry.id + ":input", { label: "Input" });
+      }
+
       function renderTraceImages(images) {
         const normalizedImages = Array.isArray(images)
           ? images.map((image, index) => normalizeTraceImage(image, index)).filter(Boolean)
@@ -9382,9 +9542,9 @@
           }
 
           const title = entry.label || entry.toolName || "tool";
-          const inputText = entry.args || entry.argsSummary || "";
-          const argsSummary = inputText
-            ? "<div class='trace-section trace-section-input'><div class='trace-section-label'>Input</div>" + renderTraceOutput(inputText, entry.id + ":input", { label: "Input" }) + "</div>"
+          const inputHtml = renderTraceToolInput(entry);
+          const argsSummary = inputHtml
+            ? "<div class='trace-section trace-section-input'><div class='trace-section-label'>Input</div>" + inputHtml + "</div>"
             : "";
           const imageOutput = renderTraceImages(entry.images);
           const outputPieces = [];

package/client/studio.css

@@ -3549,6 +3549,118 @@
       background: var(--panel);
     }
 
+    .trace-tool-input {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-width: 0;
+    }
+
+    .trace-tool-fields {
+      display: grid;
+      gap: 5px;
+      padding: 8px 9px;
+      border: 1px solid var(--panel-border);
+      border-radius: 8px;
+      background: var(--panel);
+    }
+
+    .trace-tool-field {
+      display: grid;
+      grid-template-columns: minmax(58px, auto) minmax(0, 1fr);
+      gap: 8px;
+      align-items: baseline;
+      min-width: 0;
+      font-size: 12px;
+    }
+
+    .trace-tool-field-label,
+    .trace-tool-code-label {
+      color: var(--muted);
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+
+    .trace-tool-field-value {
+      min-width: 0;
+      color: var(--text);
+      overflow-wrap: anywhere;
+      white-space: pre-wrap;
+      font-family: var(--font-mono);
+      font-size: 12px;
+    }
+
+    .trace-tool-path {
+      color: var(--studio-info-text, var(--muted));
+    }
+
+    .trace-tool-change-list {
+      display: flex;
+      flex-direction: column;
+      gap: 7px;
+    }
+
+    .trace-tool-details {
+      border: 1px solid var(--panel-border);
+      border-radius: 8px;
+      background: var(--panel);
+      overflow: hidden;
+    }
+
+    .trace-tool-details > summary {
+      cursor: pointer;
+      user-select: none;
+      padding: 7px 9px;
+      color: var(--studio-info-text, var(--muted));
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 1.35;
+    }
+
+    .trace-tool-details[open] > summary {
+      border-bottom: 1px solid var(--border-subtle);
+      background: var(--panel-2);
+    }
+
+    .trace-tool-details-body,
+    .trace-tool-change-body {
+      padding: 8px;
+    }
+
+    .trace-tool-change-grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: 8px;
+    }
+
+    .trace-tool-change-column {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+      min-width: 0;
+    }
+
+    .trace-tool-input-command > .trace-output,
+    .trace-tool-details-body .trace-output,
+    .trace-tool-change-column .trace-output {
+      border: 1px solid var(--panel-border);
+      border-radius: 8px;
+      background: var(--panel);
+    }
+
+    .trace-tool-raw-input > summary {
+      color: var(--muted);
+      font-weight: 500;
+    }
+
+    @container (max-width: 720px) {
+      .trace-tool-change-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
     .trace-image-gallery {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));

package/index.ts

@@ -5898,6 +5898,28 @@ function decorateStudioPandocSyntaxHtml(html: string): string {
 	);
 }
 
+const studioPandocHtmlResourceFlagCache = new Map<string, Promise<"--embed-resources" | "--self-contained">>();
+
+async function getStudioPandocHtmlResourceFlag(pandocCommand: string): Promise<"--embed-resources" | "--self-contained"> {
+	let cached = studioPandocHtmlResourceFlagCache.get(pandocCommand);
+	if (!cached) {
+		cached = runStudioSubprocess(pandocCommand, ["--help"], {
+			timeoutMs: 5_000,
+			stdoutMaxBytes: 250_000,
+			stderrMaxBytes: 20_000,
+			label: "pandoc capability probe",
+			notFoundMessage: "pandoc was not found. Install pandoc or set PANDOC_PATH to the pandoc binary.",
+		}).then((result) => {
+			if (result.code !== 0) {
+				throw new Error(`pandoc capability probe failed with exit code ${result.code}${result.stderr ? `: ${result.stderr}` : ""}`);
+			}
+			return result.stdout.includes("--embed-resources") ? "--embed-resources" : "--self-contained";
+		});
+		studioPandocHtmlResourceFlagCache.set(pandocCommand, cached);
+	}
+	return cached;
+}
+
 async function renderStudioMarkdownWithPandoc(markdown: string, isLatex?: boolean, resourcePath?: string, sourcePath?: string): Promise<string> {
 	const pandocCommand = process.env.PANDOC_PATH?.trim() || "pandoc";
 	const markdownWithNormalizedFences = isLatex ? markdown : normalizeStudioMarkdownSmartFences(markdown);
@@ -5925,7 +5947,7 @@ async function renderStudioMarkdownWithPandoc(markdown: string, isLatex?: boolea
 		await mkdir(htmlTemplateDir, { recursive: true });
 		const htmlTemplatePath = join(htmlTemplateDir, "template.html");
 		await writeFile(htmlTemplatePath, STUDIO_PANDOC_HTML_FRAGMENT_TEMPLATE, "utf-8");
-		args.push("--embed-resources", "--standalone", `--template=${htmlTemplatePath}`);
+		args.push(await getStudioPandocHtmlResourceFlag(pandocCommand), "--standalone", `--template=${htmlTemplatePath}`);
 	}
 	const normalizedMarkdown = isLatex
 		? sourceWithResolvedRefs
@@ -5955,7 +5977,7 @@ async function renderStudioMarkdownWithPandoc(markdown: string, isLatex?: boolea
 	}
 
 	let renderedHtml = pandocResult.stdout;
-	// When --standalone was used for --embed-resources, extract only the <body> content.
+	// When --standalone is used for embedded resources, extract only the <body> content.
 	if (resourcePath) {
 		const bodyMatch = renderedHtml.match(/<body[^>]*>([\s\S]*)<\/body>/i);
 		if (!bodyMatch) {

package/package.json

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