pi-studio 0.8.0 → 0.8.2

package/CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [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.
+
+## [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.
+
 ## [0.8.0] — 2026-05-12
 
 ### Added

package/README.md

@@ -35,9 +35,10 @@ Extension for [pi](https://pi.dev) that opens a local two-pane browser workspace
   - 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
 - 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
+- Exports right-pane preview as PDF (pandoc + LaTeX) or standalone HTML, preserving authored HTML artifacts 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

@@ -760,6 +760,7 @@
       const PREVIEW_INPUT_DEBOUNCE_MS = 0;
       const PREVIEW_PENDING_BADGE_DELAY_MS = 220;
       const previewPendingTimers = new WeakMap();
+      const htmlArtifactFramesById = new Map();
       let sourcePreviewRenderTimer = null;
       let sourcePreviewRenderNonce = 0;
       let responsePreviewRenderNonce = 0;
@@ -2550,6 +2551,283 @@
         return "<div class='preview-error'>" + escapeHtml(String(message || "Preview rendering failed.")) + "</div>" + buildPlainMarkdownHtml(markdown, options);
       }
 
+      function stripLeadingHtmlPreviewTrivia(text) {
+        let source = String(text || "").replace(/^\uFEFF/, "").trimStart();
+        let previous = "";
+        while (source && source !== previous) {
+          previous = source;
+          source = source.replace(/^<!--[\s\S]*?-->\s*/, "").trimStart();
+        }
+        return source;
+      }
+
+      function startsWithSingleFencedBlock(text) {
+        const source = String(text || "").trimStart();
+        return /^(`{3,}|~{3,})/.test(source);
+      }
+
+      function isLikelyFullHtmlDocument(text) {
+        const source = stripLeadingHtmlPreviewTrivia(text);
+        if (!source) return false;
+        if (/^<!doctype\s+html\b/i.test(source)) return true;
+        if (/^<html(?:\s|>|$)/i.test(source)) return true;
+        if (/^<body(?:\s|>|$)/i.test(source) && /<\/body\s*>/i.test(source)) return true;
+        return false;
+      }
+
+      function looksLikeHtmlMarkup(text) {
+        return /<[A-Za-z][A-Za-z0-9:-]*(?:\s[^<>]*)?>/.test(String(text || ""));
+      }
+
+      function isHtmlArtifactPreviewText(text, language) {
+        const source = String(text || "");
+        if (!source.trim()) return false;
+        if (startsWithSingleFencedBlock(source)) return false;
+        if (isLikelyFullHtmlDocument(source)) return true;
+        return normalizeFenceLanguage(language || "") === "html" && looksLikeHtmlMarkup(source);
+      }
+
+      const HTML_ARTIFACT_PREVIEW_CSP = "default-src 'none'; script-src 'unsafe-inline' data: blob:; style-src 'unsafe-inline' data: blob:; img-src data: blob:; font-src data: blob:; connect-src 'none'; media-src data: blob:; object-src 'none'; frame-src data: blob:; child-src data: blob:; worker-src blob:; form-action 'none'; base-uri 'none'; navigate-to 'none'";
+      const HTML_ARTIFACT_FRAME_MIN_HEIGHT = 360;
+      const HTML_ARTIFACT_FRAME_FIT_CAP_HEIGHT = 1800;
+      const HTML_ARTIFACT_ZOOM_MIN = 0.5;
+      const HTML_ARTIFACT_ZOOM_MAX = 1.75;
+      const HTML_ARTIFACT_ZOOM_STEP = 0.1;
+
+      function buildHtmlArtifactPreviewResizeScript(previewId) {
+        const idJson = JSON.stringify(String(previewId || ""));
+        return "<script>\n"
+          + "(() => {\n"
+          + "  const PREVIEW_ID = " + idJson.replace(/<\//g, "<\\/") + ";\n"
+          + "  let lastHeight = 0;\n"
+          + "  let scheduled = false;\n"
+          + "  let currentZoom = 1;\n"
+          + "  function applyZoom(value) {\n"
+          + "    const next = Number(value);\n"
+          + "    if (!Number.isFinite(next) || next <= 0) return;\n"
+          + "    currentZoom = Math.max(0.25, Math.min(4, next));\n"
+          + "    document.documentElement.style.zoom = String(currentZoom);\n"
+          + "    lastHeight = 0;\n"
+          + "    scheduleHeight();\n"
+          + "  }\n"
+          + "  function measureHeight() {\n"
+          + "    const body = document.body;\n"
+          + "    const root = document.documentElement;\n"
+          + "    return Math.ceil(Math.max(\n"
+          + "      body ? body.scrollHeight : 0,\n"
+          + "      body ? body.offsetHeight : 0,\n"
+          + "      root ? root.scrollHeight : 0,\n"
+          + "      root ? root.offsetHeight : 0\n"
+          + "    ));\n"
+          + "  }\n"
+          + "  function sendHeight() {\n"
+          + "    scheduled = false;\n"
+          + "    const height = measureHeight();\n"
+          + "    if (!height || Math.abs(height - lastHeight) < 2) return;\n"
+          + "    lastHeight = height;\n"
+          + "    try { parent.postMessage({ type: 'pi-studio-html-artifact-size', id: PREVIEW_ID, height }, '*'); } catch {}\n"
+          + "  }\n"
+          + "  function scheduleHeight() {\n"
+          + "    if (scheduled) return;\n"
+          + "    scheduled = true;\n"
+          + "    requestAnimationFrame(sendHeight);\n"
+          + "  }\n"
+          + "  window.addEventListener('message', (event) => {\n"
+          + "    const data = event && event.data;\n"
+          + "    if (!data || typeof data !== 'object') return;\n"
+          + "    if (data.type !== 'pi-studio-html-artifact-zoom' || data.id !== PREVIEW_ID) return;\n"
+          + "    applyZoom(data.zoom);\n"
+          + "  });\n"
+          + "  window.addEventListener('load', scheduleHeight);\n"
+          + "  window.addEventListener('resize', scheduleHeight);\n"
+          + "  if (typeof ResizeObserver === 'function') {\n"
+          + "    const observer = new ResizeObserver(scheduleHeight);\n"
+          + "    observer.observe(document.documentElement);\n"
+          + "    if (document.body) observer.observe(document.body);\n"
+          + "  }\n"
+          + "  if (typeof MutationObserver === 'function') {\n"
+          + "    const observer = new MutationObserver(scheduleHeight);\n"
+          + "    observer.observe(document.documentElement, { childList: true, subtree: true, attributes: true, characterData: true });\n"
+          + "  }\n"
+          + "  scheduleHeight();\n"
+          + "  setTimeout(scheduleHeight, 80);\n"
+          + "  setTimeout(scheduleHeight, 350);\n"
+          + "})();\n"
+          + "<\/script>";
+      }
+
+      function buildHtmlArtifactPreviewHeadMarkup(previewId) {
+        return "<meta charset=\"utf-8\">\n"
+          + "<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n"
+          + "<meta http-equiv=\"Content-Security-Policy\" content=\"" + escapeHtml(HTML_ARTIFACT_PREVIEW_CSP) + "\">\n"
+          + buildHtmlArtifactPreviewResizeScript(previewId);
+      }
+
+      function buildHtmlArtifactSrcdoc(html, previewId) {
+        const source = String(html || "");
+        const headMarkup = buildHtmlArtifactPreviewHeadMarkup(previewId);
+        if (/<head\b[^>]*>/i.test(source)) {
+          return source.replace(/<head\b[^>]*>/i, (match) => match + "\n" + headMarkup + "\n");
+        }
+        if (/<body\b[^>]*>/i.test(source)) {
+          return source.replace(/<body\b/i, "<head>\n" + headMarkup + "\n</head>\n<body");
+        }
+        if (/<html\b[^>]*>/i.test(source)) {
+          return source.replace(/<html\b[^>]*>/i, (match) => match + "\n<head>\n" + headMarkup + "\n</head>\n");
+        }
+        return "<!doctype html>\n<html>\n<head>\n" + headMarkup + "\n</head>\n<body>\n" + source + "\n</body>\n</html>";
+      }
+
+      function pruneDisconnectedHtmlArtifactFrames() {
+        htmlArtifactFramesById.forEach((record, id) => {
+          if (!record || !record.iframe || !record.iframe.isConnected) {
+            htmlArtifactFramesById.delete(id);
+          }
+        });
+      }
+
+      function handleHtmlArtifactFrameSizeMessage(event) {
+        const data = event && event.data;
+        if (!data || typeof data !== "object" || data.type !== "pi-studio-html-artifact-size") return;
+        const id = typeof data.id === "string" ? data.id : "";
+        const record = id ? htmlArtifactFramesById.get(id) : null;
+        if (!record || !record.iframe || !record.iframe.isConnected) {
+          if (id) htmlArtifactFramesById.delete(id);
+          return;
+        }
+        if (event.source && record.iframe.contentWindow && event.source !== record.iframe.contentWindow) return;
+        const rawHeight = Number(data.height);
+        if (!Number.isFinite(rawHeight) || rawHeight <= 0) return;
+        const measuredHeight = Math.ceil(rawHeight + 2);
+        const capped = measuredHeight > HTML_ARTIFACT_FRAME_FIT_CAP_HEIGHT;
+        const nextHeight = Math.max(
+          HTML_ARTIFACT_FRAME_MIN_HEIGHT,
+          Math.min(HTML_ARTIFACT_FRAME_FIT_CAP_HEIGHT, measuredHeight),
+        );
+        record.iframe.style.height = nextHeight + "px";
+        record.iframe.classList.toggle("is-height-capped", capped);
+        if (record.shell && record.shell.style) {
+          record.shell.style.minHeight = "0";
+          record.shell.classList.toggle("is-height-capped", capped);
+        }
+        if (record.detail) {
+          record.detail.textContent = "HTML artifact";
+        }
+      }
+
+      window.addEventListener("message", handleHtmlArtifactFrameSizeMessage);
+
+      function renderHtmlArtifactPreview(targetEl, html, pane, options) {
+        if (!targetEl) return;
+        const title = options && options.title ? String(options.title) : "HTML artifact preview";
+        const previewId = "html_artifact_" + Date.now().toString(36) + "_" + Math.random().toString(36).slice(2, 10);
+        pruneDisconnectedHtmlArtifactFrames();
+        clearPreviewJumpHighlight(targetEl);
+        finishPreviewRender(targetEl);
+        targetEl.innerHTML = "";
+
+        const shell = document.createElement("div");
+        shell.className = "studio-html-artifact-shell";
+
+        const toolbar = document.createElement("div");
+        toolbar.className = "studio-html-artifact-toolbar";
+        const label = document.createElement("span");
+        label.className = "studio-html-artifact-label";
+        label.textContent = title;
+        const detail = document.createElement("span");
+        detail.className = "studio-html-artifact-detail";
+        detail.textContent = "HTML artifact";
+
+        const tools = document.createElement("span");
+        tools.className = "studio-html-artifact-tools";
+        tools.appendChild(detail);
+
+        const zoomControls = document.createElement("span");
+        zoomControls.className = "studio-html-artifact-zoom-controls";
+        let artifactZoom = 1;
+        let iframe = null;
+        const formatZoomLabel = () => Math.round(artifactZoom * 100) + "%";
+        const postArtifactZoom = () => {
+          if (!iframe || !iframe.contentWindow) return;
+          try {
+            iframe.contentWindow.postMessage({ type: "pi-studio-html-artifact-zoom", id: previewId, zoom: artifactZoom }, "*");
+          } catch {
+            // Ignore iframe postMessage failures.
+          }
+        };
+        const updateZoomUi = () => {
+          zoomResetBtn.textContent = formatZoomLabel();
+          zoomOutBtn.disabled = artifactZoom <= HTML_ARTIFACT_ZOOM_MIN + 0.001;
+          zoomInBtn.disabled = artifactZoom >= HTML_ARTIFACT_ZOOM_MAX - 0.001;
+        };
+        const setArtifactZoom = (nextZoom) => {
+          artifactZoom = Math.max(
+            HTML_ARTIFACT_ZOOM_MIN,
+            Math.min(HTML_ARTIFACT_ZOOM_MAX, Math.round(Number(nextZoom || 1) * 100) / 100),
+          );
+          updateZoomUi();
+          postArtifactZoom();
+        };
+        const makeZoomButton = (text, title, onClick) => {
+          const button = document.createElement("button");
+          button.type = "button";
+          button.className = "studio-html-artifact-zoom-btn";
+          button.textContent = text;
+          button.title = title;
+          button.addEventListener("pointerdown", (event) => { event.stopPropagation(); });
+          button.addEventListener("mousedown", (event) => { event.stopPropagation(); });
+          button.addEventListener("click", (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onClick();
+          });
+          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));
+        zoomResetBtn.classList.add("studio-html-artifact-zoom-reset");
+        const zoomInBtn = makeZoomButton("+", "Zoom in HTML artifact", () => setArtifactZoom(artifactZoom + HTML_ARTIFACT_ZOOM_STEP));
+        zoomControls.appendChild(zoomOutBtn);
+        zoomControls.appendChild(zoomResetBtn);
+        zoomControls.appendChild(zoomInBtn);
+        updateZoomUi();
+        tools.appendChild(zoomControls);
+
+        toolbar.appendChild(label);
+        toolbar.appendChild(tools);
+        shell.appendChild(toolbar);
+
+        iframe = document.createElement("iframe");
+        iframe.className = "studio-html-artifact-frame";
+        iframe.title = title;
+        iframe.loading = "lazy";
+        iframe.referrerPolicy = "no-referrer";
+        iframe.setAttribute("sandbox", "allow-scripts allow-modals");
+        iframe.setAttribute("allow", "clipboard-write");
+        iframe.addEventListener("load", () => { postArtifactZoom(); });
+        iframe.srcdoc = buildHtmlArtifactSrcdoc(html, previewId);
+        shell.appendChild(iframe);
+        htmlArtifactFramesById.set(previewId, { iframe, shell, detail, zoomControls });
+
+        targetEl.appendChild(shell);
+
+        if (pane === "response") {
+          applyPendingResponseScrollReset();
+          scheduleResponsePaneRepaintNudge();
+        }
+      }
+
+      function getRightPaneHtmlArtifactSource() {
+        if (rightView === "editor-preview") {
+          const editorText = prepareEditorTextForPreview(sourceTextEl.value || "");
+          return isHtmlArtifactPreviewText(editorText, editorLanguage) ? editorText : "";
+        }
+        if (rightView === "preview") {
+          return isHtmlArtifactPreviewText(latestResponseMarkdown, "") ? latestResponseMarkdown : "";
+        }
+        return "";
+      }
+
       function stripMatchingQuotes(value) {
         const text = String(value || "").trim();
         if (text.length >= 2) {
@@ -3602,6 +3880,12 @@
           return;
         }
 
+        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");
+          return;
+        }
+
         const markdown = rightView === "editor-preview"
           ? prepareEditorTextForPdfExport(sourceTextEl.value)
           : prepareEditorTextForPreview(latestResponseMarkdown);
@@ -3761,9 +4045,10 @@
           return;
         }
 
-        const markdown = rightView === "editor-preview"
+        const htmlArtifactSource = getRightPaneHtmlArtifactSource();
+        const markdown = htmlArtifactSource || (rightView === "editor-preview"
           ? prepareEditorTextForHtmlExport(sourceTextEl.value)
-          : prepareEditorTextForPreview(latestResponseMarkdown);
+          : prepareEditorTextForPreview(latestResponseMarkdown));
         if (!markdown || !markdown.trim()) {
           setStatus("Nothing to export yet.", "warning");
           return;
@@ -3773,10 +4058,10 @@
         const sourcePath = effectivePath || sourceState.path || "";
         const resourceDir = (!sourcePath && resourceDirInput) ? resourceDirInput.value.trim() : "";
         const isEditorPreview = rightView === "editor-preview";
-        const editorHtmlLanguage = isEditorPreview ? normalizeFenceLanguage(editorLanguage || "") : "";
-        const isLatex = isEditorPreview
+        const editorHtmlLanguage = htmlArtifactSource ? "html" : (isEditorPreview ? normalizeFenceLanguage(editorLanguage || "") : "");
+        const isLatex = htmlArtifactSource ? false : (isEditorPreview
           ? editorHtmlLanguage === "latex"
-          : /\\documentclass\b|\\begin\{document\}/.test(markdown);
+          : /\\documentclass\b|\\begin\{document\}/.test(markdown));
         let filenameHint = isEditorPreview ? "studio-editor-preview.html" : "studio-response-preview.html";
         let titleHint = isEditorPreview ? "Studio editor preview" : "Studio response preview";
         if (sourcePath) {
@@ -4114,6 +4399,10 @@
       function renderSourcePreviewNow() {
         if (editorView !== "preview") return;
         const text = prepareEditorTextForPreview(sourceTextEl.value || "");
+        if (isHtmlArtifactPreviewText(text, editorLanguage)) {
+          renderHtmlArtifactPreview(sourcePreviewEl, text, "source", { title: "Editor HTML artifact preview" });
+          return;
+        }
         if (supportsCodePreviewCommentsForCurrentEditor()) {
           renderCodePreviewWithCommentBlocks(sourcePreviewEl, text, "source");
           return;
@@ -4382,6 +4671,10 @@
             scheduleResponsePaneRepaintNudge();
             return;
           }
+          if (isHtmlArtifactPreviewText(editorText, editorLanguage)) {
+            renderHtmlArtifactPreview(critiqueViewEl, editorText, "response", { title: "Editor HTML artifact preview" });
+            return;
+          }
           if (supportsCodePreviewCommentsForCurrentEditor()) {
             renderCodePreviewWithCommentBlocks(critiqueViewEl, editorText, "response");
             return;
@@ -4402,6 +4695,10 @@
         }
 
         if (rightView === "preview") {
+          if (isHtmlArtifactPreviewText(markdown, "")) {
+            renderHtmlArtifactPreview(critiqueViewEl, markdown, "response", { title: "Response HTML artifact preview" });
+            return;
+          }
           const nonce = ++responsePreviewRenderNonce;
           beginPreviewRender(critiqueViewEl);
           void applyRenderedMarkdown(critiqueViewEl, markdown, "response", nonce);
@@ -4468,6 +4765,8 @@
         const rightPaneShowsPreview = rightView === "preview" || rightView === "editor-preview";
         const exportText = rightView === "editor-preview" ? prepareEditorTextForPreview(sourceTextEl.value) : latestResponseMarkdown;
         const canExportPreview = rightPaneShowsPreview && Boolean(String(exportText || "").trim());
+        const htmlArtifactExportSource = canExportPreview ? getRightPaneHtmlArtifactSource() : "";
+        const isHtmlArtifactPreview = Boolean(htmlArtifactExportSource);
         if (exportPdfBtn) {
           exportPdfBtn.disabled = uiBusy || previewExportInProgress || !canExportPreview;
           exportPdfBtn.textContent = previewExportInProgress ? "Exporting…" : "Export right preview";
@@ -4477,19 +4776,27 @@
             exportPdfBtn.title = "Switch right pane to Response (Preview) or Editor (Preview) to export.";
           } 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.";
           } else {
             exportPdfBtn.title = "Choose PDF or HTML and export the current right-pane preview.";
           }
         }
         if (exportPreviewPdfBtn) {
-          exportPreviewPdfBtn.disabled = uiBusy || previewExportInProgress || !canExportPreview;
+          exportPreviewPdfBtn.disabled = uiBusy || previewExportInProgress || !canExportPreview || isHtmlArtifactPreview;
+          exportPreviewPdfBtn.title = isHtmlArtifactPreview
+            ? "HTML artifact 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 current right-pane preview as standalone HTML.";
         }
         if (exportPreviewControlsEl) {
           exportPreviewControlsEl.title = canExportPreview
-            ? "Choose a format and export the current right-pane preview."
+            ? (isHtmlArtifactPreview ? "Export this HTML artifact." : "Choose a format and export the current right-pane preview.")
             : "Switch right pane to a non-empty preview before exporting.";
         }
         if (!canExportPreview || previewExportInProgress) {

package/client/studio.css

@@ -77,7 +77,7 @@
 
     .export-preview-trigger::after {
       content: "⌄";
-      color: var(--muted);
+      color: var(--studio-info-text, var(--text));
       font-size: 14px;
       line-height: 1;
       transform: translateY(-1px);
@@ -1510,6 +1510,114 @@
       background: #fff;
     }
 
+    .rendered-markdown .studio-html-artifact-shell {
+      display: flex;
+      flex-direction: column;
+      min-height: min(760px, calc(100vh - 190px));
+      border: 1px solid var(--panel-border);
+      border-radius: 12px;
+      background: var(--panel);
+      overflow: hidden;
+      box-shadow: 0 1px 2px var(--shadow-color);
+    }
+
+    .rendered-markdown .studio-html-artifact-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      padding: 8px 10px;
+      border-bottom: 1px solid var(--border-subtle);
+      background: var(--panel-2);
+      color: var(--studio-info-text, var(--muted));
+      font-family: var(--font-ui);
+      font-size: 12px;
+      line-height: 1.25;
+    }
+
+    .rendered-markdown .studio-html-artifact-label {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--text);
+      font-weight: 600;
+    }
+
+    .rendered-markdown .studio-html-artifact-tools {
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      min-width: 0;
+    }
+
+    .rendered-markdown .studio-html-artifact-detail {
+      flex: 0 0 auto;
+      color: var(--muted);
+      font-size: 11px;
+      white-space: nowrap;
+    }
+
+    .rendered-markdown .studio-html-artifact-zoom-controls {
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+      padding: 2px;
+      border: 1px solid var(--control-border);
+      border-radius: 999px;
+      background: var(--panel);
+    }
+
+    .rendered-markdown .studio-html-artifact-zoom-btn {
+      min-width: 24px;
+      height: 22px;
+      padding: 0 7px;
+      border: 0;
+      border-radius: 999px;
+      background: transparent;
+      color: var(--text);
+      font: inherit;
+      font-size: 11px;
+      line-height: 1;
+      cursor: pointer;
+    }
+
+    .rendered-markdown .studio-html-artifact-zoom-btn:not(:disabled):hover,
+    .rendered-markdown .studio-html-artifact-zoom-btn:not(:disabled):focus-visible {
+      background: var(--control-hover-bg, var(--inline-code-bg));
+      outline: none;
+    }
+
+    .rendered-markdown .studio-html-artifact-zoom-btn:disabled {
+      color: var(--muted);
+      cursor: default;
+      opacity: 0.45;
+    }
+
+    .rendered-markdown .studio-html-artifact-zoom-reset {
+      min-width: 42px;
+      color: var(--studio-info-text, var(--text));
+    }
+
+    .rendered-markdown .studio-html-artifact-frame {
+      display: block;
+      flex: 1 1 auto;
+      width: 100%;
+      min-height: 520px;
+      border: 0;
+      background: #fff;
+    }
+
+    .rendered-markdown .studio-html-artifact-shell.is-height-capped .studio-html-artifact-toolbar {
+      border-bottom-color: var(--control-border);
+    }
+
+    .rendered-markdown .studio-html-artifact-frame.is-height-capped {
+      overflow: auto;
+    }
+
     .rendered-markdown .studio-subfigure-group {
       margin: 1.25em auto;
     }
@@ -3013,7 +3121,7 @@
 
     body.studio-ui-refresh .studio-refresh-chip::after {
       content: "⌄";
-      color: var(--muted);
+      color: var(--studio-info-text, var(--text));
       font-size: 14px;
       line-height: 1;
       transform: translateY(-1px);

package/index.ts

@@ -3296,6 +3296,33 @@ function normalizeStudioEditorLanguage(language: string | undefined): string | u
 	return trimmed;
 }
 
+function stripLeadingStudioHtmlTrivia(text: string): string {
+	let source = String(text ?? "").replace(/^\uFEFF/, "").trimStart();
+	let previous = "";
+	while (source && source !== previous) {
+		previous = source;
+		source = source.replace(/^<!--[\s\S]*?-->\s*/, "").trimStart();
+	}
+	return source;
+}
+
+function isStudioHtmlMarkup(text: string): boolean {
+	return /<[A-Za-z][A-Za-z0-9:-]*(?:\s[^<>]*)?>/.test(String(text ?? ""));
+}
+
+function isLikelyStandaloneStudioHtml(text: string, editorLanguage?: string): boolean {
+	const source = String(text ?? "");
+	if (!source.trim()) return false;
+	if (parseStudioSingleFencedCodeBlock(source)) return false;
+
+	const leading = stripLeadingStudioHtmlTrivia(source);
+	if (/^<!doctype\s+html\b/i.test(leading)) return true;
+	if (/^<html(?:\s|>|$)/i.test(leading)) return true;
+	if (/^<body(?:\s|>|$)/i.test(leading) && /<\/body\s*>/i.test(leading)) return true;
+
+	return normalizeStudioEditorLanguage(editorLanguage) === "html" && isStudioHtmlMarkup(source);
+}
+
 function parseStudioSingleFencedCodeBlock(markdown: string): { info: string; content: string } | null {
 	const trimmed = markdown.trim();
 	if (!trimmed) return null;
@@ -3468,6 +3495,7 @@ function isLikelyRawStudioGitDiff(markdown: string): boolean {
 function inferStudioPdfLanguage(markdown: string, editorLanguage?: string): string | undefined {
 	const normalizedEditorLanguage = normalizeStudioEditorLanguage(editorLanguage);
 	if (normalizedEditorLanguage) return normalizedEditorLanguage;
+	if (isLikelyStandaloneStudioHtml(markdown)) return "html";
 
 	const fenced = parseStudioSingleFencedCodeBlock(markdown);
 	if (fenced) {
@@ -4966,6 +4994,9 @@ async function renderStudioStandaloneHtmlWithPandoc(
 	options?: StudioHtmlRenderOptions,
 ): Promise<{ html: Buffer; warning?: string }> {
 	const effectiveEditorLanguage = inferStudioPdfLanguage(markdown, editorLanguage);
+	if (!isLatex && isLikelyStandaloneStudioHtml(markdown, effectiveEditorLanguage)) {
+		return { html: Buffer.from(String(markdown ?? ""), "utf-8") };
+	}
 	const source = !isLatex
 		&& effectiveEditorLanguage
 		&& effectiveEditorLanguage !== "markdown"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.8.0",
+  "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",
   "type": "module",
   "license": "MIT",