pi-studio 0.7.1 → 0.8.1

package/client/studio-client.js

@@ -88,6 +88,10 @@
       const loadCritiqueNotesBtn = document.getElementById("loadCritiqueNotesBtn");
       const loadCritiqueFullBtn = document.getElementById("loadCritiqueFullBtn");
       const copyResponseBtn = document.getElementById("copyResponseBtn");
+      const exportPreviewControlsEl = document.getElementById("exportPreviewControls");
+      const exportPreviewMenuEl = document.getElementById("exportPreviewMenu");
+      const exportPreviewPdfBtn = document.getElementById("exportPreviewPdfBtn");
+      const exportPreviewHtmlBtn = document.getElementById("exportPreviewHtmlBtn");
       const exportPdfBtn = document.getElementById("exportPdfBtn");
       const historyPrevBtn = document.getElementById("historyPrevBtn");
       const historyNextBtn = document.getElementById("historyNextBtn");
@@ -201,6 +205,9 @@
       let responseHistory = [];
       let responseHistoryIndex = -1;
       let traceState = null;
+      let liveTraceState = null;
+      const traceSnapshotCache = new Map();
+      let traceDisplayContext = { mode: "live", responseId: null, historyIndex: -1, total: 0, summary: null };
       let traceFilter = "all";
       let traceAutoScroll = true;
       let traceRenderRaf = null;
@@ -215,7 +222,7 @@
       let terminalActivityLabel = "";
       let lastSpecificToolLabel = "";
       let uiBusy = false;
-      let pdfExportInProgress = false;
+      let previewExportInProgress = false;
       let compactInProgress = false;
       let modelLabel = (document.body && document.body.dataset && document.body.dataset.modelLabel) || "none";
       let terminalSessionLabel = (document.body && document.body.dataset && document.body.dataset.terminalLabel) || "unknown";
@@ -409,6 +416,102 @@
         renderTraceViewIfActive();
       }
 
+      function shouldDisplayLiveTrace() {
+        return !Array.isArray(responseHistory)
+          || responseHistory.length === 0
+          || responseHistoryIndex < 0
+          || responseHistoryIndex >= responseHistory.length - 1;
+      }
+
+      function setTraceDisplayContext(nextContext) {
+        const fallback = { mode: "live", responseId: null, historyIndex: -1, total: 0, summary: null };
+        traceDisplayContext = Object.assign(fallback, nextContext && typeof nextContext === "object" ? nextContext : {});
+      }
+
+      function ensureLiveTraceState() {
+        if (!liveTraceState) liveTraceState = createEmptyTraceState();
+        return liveTraceState;
+      }
+
+      function upsertTraceEntryInState(state, entry) {
+        const normalized = normalizeTraceEntry(entry, Array.isArray(state.entries) ? state.entries.length : 0);
+        if (!normalized) return null;
+        if (!Array.isArray(state.entries)) state.entries = [];
+        const index = state.entries.findIndex((candidate) => candidate.id === normalized.id);
+        if (index >= 0) {
+          state.entries[index] = normalized;
+        } else {
+          state.entries.push(normalized);
+        }
+        state.updatedAt = normalized.updatedAt;
+        return normalized;
+      }
+
+      function replaceLiveTraceState(nextState) {
+        liveTraceState = normalizeTraceState(nextState);
+        if (shouldDisplayLiveTrace()) {
+          setTraceDisplayContext({ mode: "live", responseId: null, historyIndex: responseHistoryIndex, total: responseHistory.length, summary: null });
+          replaceTraceState(liveTraceState);
+        }
+      }
+
+      function upsertLiveTraceEntry(entry) {
+        const normalized = upsertTraceEntryInState(ensureLiveTraceState(), entry);
+        if (!normalized) return;
+        if (shouldDisplayLiveTrace()) {
+          setTraceDisplayContext({ mode: "live", responseId: null, historyIndex: responseHistoryIndex, total: responseHistory.length, summary: null });
+          upsertTraceEntry(normalized);
+        }
+      }
+
+      function appendLiveTraceAssistantDelta(entryId, deltaKind, delta, updatedAt) {
+        if (typeof delta !== "string" || !delta) return;
+        const state = ensureLiveTraceState();
+        const targetId = typeof entryId === "string" && entryId.trim() ? entryId.trim() : null;
+        let entry = targetId ? state.entries.find((candidate) => candidate.id === targetId) : null;
+        if (!entry || entry.type !== "assistant") {
+          entry = normalizeTraceEntry({
+            id: targetId || ("trace-assistant-live-" + Date.now()),
+            type: "assistant",
+            startedAt: updatedAt,
+            updatedAt,
+            thinking: "",
+            text: "",
+            status: "streaming",
+            stopReason: null,
+          }, state.entries.length);
+          if (!entry) return;
+          state.entries.push(entry);
+        }
+        if (deltaKind === "thinking") {
+          entry.thinking += delta;
+        } else {
+          entry.text += delta;
+        }
+        entry.status = "streaming";
+        entry.updatedAt = parseFiniteNumber(updatedAt) || Date.now();
+        state.updatedAt = entry.updatedAt;
+        if (shouldDisplayLiveTrace()) {
+          setTraceDisplayContext({ mode: "live", responseId: null, historyIndex: responseHistoryIndex, total: responseHistory.length, summary: null });
+          appendTraceAssistantDelta(entryId, deltaKind, delta, updatedAt);
+        }
+      }
+
+      function updateLiveTraceStatusFromMessage(message) {
+        if (!message || typeof message !== "object") return;
+        const state = ensureLiveTraceState();
+        state.runId = parseNonEmptyString(message.runId) || state.runId;
+        if (Object.prototype.hasOwnProperty.call(message, "requestId")) state.requestId = parseNonEmptyString(message.requestId);
+        if (Object.prototype.hasOwnProperty.call(message, "requestKind")) state.requestKind = parseNonEmptyString(message.requestKind);
+        if (Object.prototype.hasOwnProperty.call(message, "startedAt")) state.startedAt = parseFiniteNumber(message.startedAt);
+        if (Object.prototype.hasOwnProperty.call(message, "updatedAt")) state.updatedAt = parseFiniteNumber(message.updatedAt);
+        if (Object.prototype.hasOwnProperty.call(message, "status")) state.status = normalizeTraceStatus(message.status);
+        if (shouldDisplayLiveTrace()) {
+          setTraceDisplayContext({ mode: "live", responseId: null, historyIndex: responseHistoryIndex, total: responseHistory.length, summary: null });
+          updateTraceStatusFromMessage(message);
+        }
+      }
+
       function normalizeTraceFilter(filter) {
         return filter === "thinking" || filter === "tools" ? filter : "all";
       }
@@ -657,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;
@@ -1034,7 +1138,11 @@
           }
           rightIdentityEl.appendChild(rightTitleGroupEl);
           const rightToolsEl = makeStudioUiRefreshElement("div", "studio-refresh-pane-tools");
-          if (exportPdfBtn) rightToolsEl.appendChild(exportPdfBtn);
+          if (exportPreviewControlsEl) {
+            rightToolsEl.appendChild(exportPreviewControlsEl);
+          } else if (exportPdfBtn) {
+            rightToolsEl.appendChild(exportPdfBtn);
+          }
           rightHeaderEl.replaceChildren(rightIdentityEl, rightToolsEl);
         }
 
@@ -2027,6 +2135,20 @@
         return kind === "critique" ? "critique" : "annotation";
       }
 
+      function normalizeTraceSummary(summary) {
+        if (!summary || typeof summary !== "object") return null;
+        return {
+          hasTrace: summary.hasTrace === true,
+          entryCount: typeof summary.entryCount === "number" && Number.isFinite(summary.entryCount)
+            ? Math.max(0, Math.floor(summary.entryCount))
+            : 0,
+          startedAt: parseFiniteNumber(summary.startedAt),
+          updatedAt: parseFiniteNumber(summary.updatedAt),
+          status: normalizeTraceStatus(summary.status),
+          truncated: summary.truncated === true,
+        };
+      }
+
       function normalizeHistoryItem(item, fallbackIndex) {
         if (!item || typeof item !== "object") return null;
         if (typeof item.markdown !== "string") return null;
@@ -2057,6 +2179,7 @@
         const promptTriggerText = typeof item.promptTriggerText === "string"
           ? item.promptTriggerText
           : (item.promptTriggerText == null ? null : String(item.promptTriggerText));
+        const traceSummary = normalizeTraceSummary(item.traceSummary);
 
         return {
           id,
@@ -2069,6 +2192,7 @@
           promptTriggerKind,
           promptSteeringCount,
           promptTriggerText,
+          traceSummary,
         };
       }
 
@@ -2078,6 +2202,48 @@
         return responseHistory[responseHistoryIndex] || null;
       }
 
+      function syncTraceForSelectedHistoryItem() {
+        const item = getSelectedHistoryItem();
+        const total = Array.isArray(responseHistory) ? responseHistory.length : 0;
+        const index = responseHistoryIndex;
+        if (!item) {
+          setTraceDisplayContext({ mode: "live", responseId: null, historyIndex: index, total, summary: null });
+          replaceTraceState(liveTraceState || createEmptyTraceState());
+          return;
+        }
+        if (index >= total - 1) {
+          setTraceDisplayContext({ mode: "live", responseId: null, historyIndex: index, total, summary: item.traceSummary || null });
+          replaceTraceState(liveTraceState || createEmptyTraceState());
+          return;
+        }
+
+        const summary = item.traceSummary || null;
+        if (!summary || !summary.hasTrace) {
+          setTraceDisplayContext({ mode: "missing", responseId: item.id, historyIndex: index, total, summary });
+          replaceTraceState(createEmptyTraceState());
+          return;
+        }
+
+        const cached = traceSnapshotCache.get(item.id);
+        if (cached) {
+          setTraceDisplayContext({ mode: "history", responseId: item.id, historyIndex: index, total, summary });
+          replaceTraceState(cached);
+          return;
+        }
+
+        setTraceDisplayContext({ mode: "loading", responseId: item.id, historyIndex: index, total, summary });
+        replaceTraceState({
+          runId: null,
+          requestId: null,
+          requestKind: null,
+          status: "idle",
+          startedAt: summary.startedAt || null,
+          updatedAt: summary.updatedAt || null,
+          entries: [],
+        });
+        sendMessage({ type: "get_trace_snapshot", responseHistoryId: item.id });
+      }
+
       function clearActiveResponseView() {
         pendingResponseScrollReset = false;
         latestResponseMarkdown = "";
@@ -2152,6 +2318,7 @@
         const nextId = nextItem && typeof nextItem.id === "string" ? nextItem.id : null;
         const applied = applySelectedHistoryItem({ resetScroll: previousId !== nextId });
         updateHistoryControls();
+        syncTraceForSelectedHistoryItem();
 
         if (applied && !(options && options.silent)) {
           const item = getSelectedHistoryItem();
@@ -2202,20 +2369,43 @@
         return selectHistoryIndex(targetIndex, { silent: Boolean(options && options.silent) });
       }
 
+      function getTraceHistoryContextLabel() {
+        const context = traceDisplayContext || {};
+        const total = typeof context.total === "number" && Number.isFinite(context.total) ? context.total : responseHistory.length;
+        const index = typeof context.historyIndex === "number" && Number.isFinite(context.historyIndex) ? context.historyIndex : responseHistoryIndex;
+        if (context.mode === "history" || context.mode === "missing" || context.mode === "loading") {
+          return total > 0 && index >= 0 ? ("response " + (index + 1) + "/" + total) : "selected response";
+        }
+        return "live";
+      }
+
       function updateReferenceBadge() {
         if (!referenceBadgeEl) return;
 
         if (rightView === "trace") {
           const state = traceState || createEmptyTraceState();
+          const context = traceDisplayContext || {};
           const entryCount = getTraceEntriesForFilter(traceFilter).length;
           const time = formatReferenceTime(state.startedAt || state.updatedAt);
+          if (context.mode === "loading") {
+            referenceBadgeEl.textContent = "Working: loading " + getTraceHistoryContextLabel();
+            return;
+          }
+          if (context.mode === "missing") {
+            referenceBadgeEl.textContent = "Working: no saved working for " + getTraceHistoryContextLabel();
+            return;
+          }
           if (state.status === "idle") {
             referenceBadgeEl.textContent = "Working: no active run yet";
             return;
           }
-          const statusLabel = state.status === "running" ? "live" : "complete";
+          const statusLabel = context.mode === "history"
+            ? "saved"
+            : (state.status === "running" ? "live" : "complete");
           referenceBadgeEl.textContent = "Working: " + statusLabel
+            + (context.mode === "history" ? (" · " + getTraceHistoryContextLabel()) : "")
             + (entryCount ? (" · " + entryCount + " entr" + (entryCount === 1 ? "y" : "ies")) : "")
+            + (context.summary && context.summary.truncated ? " · truncated" : "")
             + (time ? (" · " + time) : "");
           return;
         }
@@ -2305,6 +2495,15 @@
         return prepared;
       }
 
+      function prepareEditorTextForHtmlExport(text) {
+        const prepared = prepareEditorTextForPreview(text);
+        const lang = normalizeFenceLanguage(editorLanguage || "");
+        if (lang && lang !== "markdown" && lang !== "latex") {
+          return wrapAsFencedCodeBlock(prepared, lang);
+        }
+        return prepared;
+      }
+
       function updateSyncBadge(normalizedEditorText) {
         if (!syncBadgeEl) return;
 
@@ -2352,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) {
@@ -3387,7 +3863,7 @@
       }
 
       async function exportRightPanePdf() {
-        if (uiBusy || pdfExportInProgress) {
+        if (uiBusy || previewExportInProgress) {
           setStatus("Studio is busy.", "warning");
           return;
         }
@@ -3404,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);
@@ -3427,7 +3909,7 @@
           filenameHint = stem + "-preview.pdf";
         }
 
-        pdfExportInProgress = true;
+        previewExportInProgress = true;
         updateResultActionButtons();
         setStatus("Exporting PDF…", "warning");
 
@@ -3540,11 +4022,202 @@
           const detail = error && error.message ? error.message : String(error || "unknown error");
           setStatus("PDF export failed: " + detail, "error");
         } finally {
-          pdfExportInProgress = false;
+          previewExportInProgress = false;
           updateResultActionButtons();
         }
       }
 
+      async function exportRightPaneHtml() {
+        if (uiBusy || previewExportInProgress) {
+          setStatus("Studio is busy.", "warning");
+          return;
+        }
+
+        const token = getToken();
+        if (!token) {
+          setStatus("Missing Studio token in URL. Re-run /studio.", "error");
+          return;
+        }
+
+        const rightPaneShowsPreview = rightView === "preview" || rightView === "editor-preview";
+        if (!rightPaneShowsPreview) {
+          setStatus("Switch right pane to Response (Preview) or Editor (Preview) to export HTML.", "warning");
+          return;
+        }
+
+        const htmlArtifactSource = getRightPaneHtmlArtifactSource();
+        const markdown = htmlArtifactSource || (rightView === "editor-preview"
+          ? prepareEditorTextForHtmlExport(sourceTextEl.value)
+          : prepareEditorTextForPreview(latestResponseMarkdown));
+        if (!markdown || !markdown.trim()) {
+          setStatus("Nothing to export yet.", "warning");
+          return;
+        }
+
+        const effectivePath = getEffectiveSavePath();
+        const sourcePath = effectivePath || sourceState.path || "";
+        const resourceDir = (!sourcePath && resourceDirInput) ? resourceDirInput.value.trim() : "";
+        const isEditorPreview = rightView === "editor-preview";
+        const editorHtmlLanguage = htmlArtifactSource ? "html" : (isEditorPreview ? normalizeFenceLanguage(editorLanguage || "") : "");
+        const isLatex = htmlArtifactSource ? false : (isEditorPreview
+          ? editorHtmlLanguage === "latex"
+          : /\\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) {
+          const baseName = sourcePath.split(/[\\/]/).pop() || "studio";
+          const stem = baseName.replace(/\.[^.]+$/, "") || "studio";
+          filenameHint = stem + "-preview.html";
+          titleHint = stem + " preview";
+        }
+
+        previewExportInProgress = true;
+        updateResultActionButtons();
+        setStatus("Exporting HTML…", "warning");
+
+        try {
+          const response = await fetch("/export-html?token=" + encodeURIComponent(token), {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              markdown: String(markdown || ""),
+              sourcePath: sourcePath,
+              resourceDir: resourceDir,
+              isLatex: isLatex,
+              editorHtmlLanguage: editorHtmlLanguage,
+              filenameHint: filenameHint,
+              title: titleHint,
+            }),
+          });
+
+          const contentType = String(response.headers.get("content-type") || "").toLowerCase();
+          if (!response.ok) {
+            let message = "HTML export failed with HTTP " + response.status + ".";
+            if (contentType.includes("application/json")) {
+              const payload = await response.json().catch(() => null);
+              if (payload && typeof payload.error === "string") {
+                message = payload.error;
+              }
+            } else {
+              const text = await response.text().catch(() => "");
+              if (text && text.trim()) {
+                message = text.trim();
+              }
+            }
+            throw new Error(message);
+          }
+
+          if (contentType.includes("application/json")) {
+            const payload = await response.json().catch(() => null);
+            if (!payload || typeof payload.downloadUrl !== "string") {
+              throw new Error("HTML export prepared successfully, but Studio did not receive a download URL.");
+            }
+
+            const exportWarning = typeof payload.warning === "string" ? payload.warning.trim() : "";
+            const openError = typeof payload.openError === "string" ? payload.openError.trim() : "";
+            const openedExternal = payload.openedExternal === true;
+            let downloadName = typeof payload.filename === "string" && payload.filename.trim()
+              ? payload.filename.trim()
+              : (filenameHint || "studio-preview.html");
+            if (!/\.html?$/i.test(downloadName)) {
+              downloadName += ".html";
+            }
+
+            if (openedExternal) {
+              if (exportWarning) {
+                setStatus("Opened HTML in default browser with warning: " + exportWarning, "warning");
+              } else {
+                setStatus("Opened HTML in default browser: " + downloadName, "success");
+              }
+              return;
+            }
+
+            const link = document.createElement("a");
+            link.href = payload.downloadUrl;
+            link.download = downloadName;
+            link.rel = "noopener";
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+
+            if (openError) {
+              if (exportWarning) {
+                setStatus("Opened browser fallback because external viewer failed (" + openError + "). Warning: " + exportWarning, "warning");
+              } else {
+                setStatus("Opened browser fallback because external viewer failed (" + openError + ").", "warning");
+              }
+            } else if (exportWarning) {
+              setStatus("Exported HTML with warning: " + exportWarning, "warning");
+            } else {
+              setStatus("Exported HTML: " + downloadName, "success");
+            }
+            return;
+          }
+
+          const exportWarning = String(response.headers.get("x-pi-studio-export-warning") || "").trim();
+          const blob = await response.blob();
+          const headerFilename = parseContentDispositionFilename(response.headers.get("content-disposition"));
+          let downloadName = headerFilename || filenameHint || "studio-preview.html";
+          if (!/\.html?$/i.test(downloadName)) {
+            downloadName += ".html";
+          }
+
+          const blobUrl = URL.createObjectURL(blob);
+          const link = document.createElement("a");
+          link.href = blobUrl;
+          link.download = downloadName;
+          link.rel = "noopener";
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+          window.setTimeout(() => {
+            URL.revokeObjectURL(blobUrl);
+          }, 1800);
+
+          if (exportWarning) {
+            setStatus("Exported HTML with warning: " + exportWarning, "warning");
+          } else {
+            setStatus("Exported HTML: " + downloadName, "success");
+          }
+        } catch (error) {
+          const detail = error && error.message ? error.message : String(error || "unknown error");
+          setStatus("HTML export failed: " + detail, "error");
+        } finally {
+          previewExportInProgress = false;
+          updateResultActionButtons();
+        }
+      }
+
+      function closeExportPreviewMenu() {
+        if (!exportPreviewMenuEl) return;
+        exportPreviewMenuEl.hidden = true;
+        if (exportPdfBtn) {
+          exportPdfBtn.classList.remove("is-open");
+          exportPdfBtn.setAttribute("aria-expanded", "false");
+        }
+      }
+
+      function toggleExportPreviewMenu() {
+        if (!exportPreviewMenuEl || !exportPdfBtn || exportPdfBtn.disabled) return;
+        if (typeof closeStudioUiRefreshMenus === "function") {
+          closeStudioUiRefreshMenus();
+        }
+        const willOpen = exportPreviewMenuEl.hidden;
+        exportPreviewMenuEl.hidden = !willOpen;
+        exportPdfBtn.classList.toggle("is-open", willOpen);
+        exportPdfBtn.setAttribute("aria-expanded", willOpen ? "true" : "false");
+      }
+
+      function exportRightPaneFormat(format) {
+        closeExportPreviewMenu();
+        if (format === "html") {
+          return exportRightPaneHtml();
+        }
+        return exportRightPanePdf();
+      }
+
       function normalizeCopyableBlockText(text) {
         return String(text || "").replace(/\r\n/g, "\n").replace(/\u200b/g, "");
       }
@@ -3726,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;
@@ -3857,17 +4534,27 @@
         const visibleWorking = buildVisibleWorkingText(filter);
         const hasVisibleContent = Boolean(visibleWorking.trim());
         const started = formatReferenceTime(state.startedAt || state.updatedAt);
-        const statusLabel = state.status === "running"
-          ? "Live"
-          : (state.status === "complete" ? "Complete" : "Idle");
+        const context = traceDisplayContext || {};
+        const statusLabel = context.mode === "history"
+          ? "Saved"
+          : (context.mode === "loading"
+            ? "Loading"
+            : (context.mode === "missing"
+              ? "Not saved"
+              : (state.status === "running" ? "Live" : (state.status === "complete" ? "Complete" : "Idle"))));
         const filterMeta = filter === "thinking"
           ? "Thinking only"
           : (filter === "tools" ? "Tools only" : null);
+        const historyMeta = (context.mode === "history" || context.mode === "missing" || context.mode === "loading")
+          ? getTraceHistoryContextLabel()
+          : null;
         const toolbar = "<div class='trace-toolbar'>"
           + "<div class='trace-summary'>"
           + "<span class='trace-summary-badge'>Working</span>"
           + "<span class='trace-summary-status trace-status-" + escapeHtml(String(state.status || "idle")) + "'>" + escapeHtml(statusLabel) + "</span>"
+          + (historyMeta ? ("<span class='trace-summary-meta'>" + escapeHtml(historyMeta) + "</span>") : "")
           + (started ? ("<span class='trace-summary-meta'>Started " + escapeHtml(started) + "</span>") : "")
+          + (context.summary && context.summary.truncated ? "<span class='trace-summary-meta'>Truncated</span>" : "")
           + (filterMeta ? ("<span class='trace-summary-meta'>" + escapeHtml(filterMeta) + "</span>") : "")
           + "</div>"
           + "<div class='trace-controls'>"
@@ -3882,13 +4569,17 @@
           + "</div>";
 
         if (!entries.length) {
-          const emptyMessage = filter === "thinking"
-            ? "No thinking steps in this working view yet."
-            : (filter === "tools"
-              ? "No tool steps in this working view yet."
-              : (state.status === "running"
-                ? "Waiting for the first model or tool update…"
-                : "No live working view yet. Start a run or critique to watch working details here."));
+          const emptyMessage = context.mode === "loading"
+            ? "Loading saved working for this response…"
+            : (context.mode === "missing"
+              ? "No working was saved for this response."
+              : (filter === "thinking"
+                ? "No thinking steps in this working view yet."
+                : (filter === "tools"
+                  ? "No tool steps in this working view yet."
+                  : (state.status === "running"
+                    ? "Waiting for the first model or tool update…"
+                    : "No live working view yet. Start a run or critique to watch working details here."))));
           return "<div class='trace-panel'>" + toolbar + "<div class='trace-empty'>" + escapeHtml(emptyMessage) + "</div></div>";
         }
 
@@ -3980,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;
@@ -4000,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);
@@ -4065,19 +4764,44 @@
 
         const rightPaneShowsPreview = rightView === "preview" || rightView === "editor-preview";
         const exportText = rightView === "editor-preview" ? prepareEditorTextForPreview(sourceTextEl.value) : latestResponseMarkdown;
-        const canExportPdf = rightPaneShowsPreview && Boolean(String(exportText || "").trim());
+        const canExportPreview = rightPaneShowsPreview && Boolean(String(exportText || "").trim());
+        const htmlArtifactExportSource = canExportPreview ? getRightPaneHtmlArtifactSource() : "";
+        const isHtmlArtifactPreview = Boolean(htmlArtifactExportSource);
         if (exportPdfBtn) {
-          exportPdfBtn.disabled = uiBusy || pdfExportInProgress || !canExportPdf;
+          exportPdfBtn.disabled = uiBusy || previewExportInProgress || !canExportPreview;
+          exportPdfBtn.textContent = previewExportInProgress ? "Exporting…" : "Export right preview";
           if (rightView === "trace") {
-            exportPdfBtn.title = "Working view does not support PDF export.";
+            exportPdfBtn.title = "Working view does not support preview export.";
           } else if (rightView === "markdown") {
-            exportPdfBtn.title = "Switch right pane to Response (Preview) or Editor (Preview) to export PDF.";
-          } else if (!canExportPdf) {
+            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 = "Export the current right-pane preview as PDF via pandoc + xelatex.";
+            exportPdfBtn.title = "Choose PDF or HTML and export the current right-pane preview.";
           }
         }
+        if (exportPreviewPdfBtn) {
+          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
+            ? (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) {
+          closeExportPreviewMenu();
+        }
 
         pullLatestBtn.disabled = uiBusy || followLatest;
         pullLatestBtn.textContent = queuedLatestResponse ? "Fetch latest response *" : "Fetch latest response";
@@ -10014,7 +10738,7 @@
           }
 
           if (message.traceState) {
-            replaceTraceState(message.traceState);
+            replaceLiveTraceState(message.traceState);
           }
 
           let appliedHistory = false;
@@ -10064,22 +10788,41 @@
         }
 
         if (message.type === "trace_reset") {
-          replaceTraceState(message.trace);
+          replaceLiveTraceState(message.trace);
           return;
         }
 
         if (message.type === "trace_status") {
-          updateTraceStatusFromMessage(message);
+          updateLiveTraceStatusFromMessage(message);
           return;
         }
 
         if (message.type === "trace_entry_upsert") {
-          upsertTraceEntry(message.entry);
+          upsertLiveTraceEntry(message.entry);
           return;
         }
 
         if (message.type === "trace_assistant_delta") {
-          appendTraceAssistantDelta(message.entryId, message.deltaKind, message.delta, message.updatedAt);
+          appendLiveTraceAssistantDelta(message.entryId, message.deltaKind, message.delta, message.updatedAt);
+          return;
+        }
+
+        if (message.type === "trace_snapshot") {
+          const responseId = typeof message.responseHistoryId === "string" ? message.responseHistoryId.trim() : "";
+          if (responseId && message.traceState) {
+            const normalizedSnapshot = normalizeTraceState(message.traceState);
+            traceSnapshotCache.set(responseId, normalizedSnapshot);
+            if (traceDisplayContext && traceDisplayContext.responseId === responseId) {
+              setTraceDisplayContext({
+                mode: "history",
+                responseId,
+                historyIndex: responseHistoryIndex,
+                total: responseHistory.length,
+                summary: normalizeTraceSummary(message.summary) || (getSelectedHistoryItem() ? getSelectedHistoryItem().traceSummary : null),
+              });
+              replaceTraceState(normalizedSnapshot);
+            }
+          }
           return;
         }
 
@@ -11189,11 +11932,35 @@
       });
 
       if (exportPdfBtn) {
-        exportPdfBtn.addEventListener("click", () => {
-          void exportRightPanePdf();
+        exportPdfBtn.addEventListener("click", (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          toggleExportPreviewMenu();
+        });
+      }
+
+      if (exportPreviewMenuEl) {
+        exportPreviewMenuEl.addEventListener("click", (event) => {
+          const target = event.target;
+          const actionBtn = target instanceof Element ? target.closest("[data-export-preview-format]") : null;
+          if (!actionBtn) return;
+          event.preventDefault();
+          event.stopPropagation();
+          if (actionBtn.disabled) return;
+          const format = String(actionBtn.getAttribute("data-export-preview-format") || "pdf").toLowerCase();
+          void exportRightPaneFormat(format === "html" ? "html" : "pdf");
         });
       }
 
+      document.addEventListener("click", (event) => {
+        const target = event.target;
+        if (target instanceof Element && target.closest("#exportPreviewControls")) return;
+        closeExportPreviewMenu();
+      });
+      document.addEventListener("keydown", (event) => {
+        if (event.key === "Escape") closeExportPreviewMenu();
+      });
+
       saveAsBtn.addEventListener("click", () => {
         const content = sourceTextEl.value;
         if (!content.trim()) {