pi-studio 0.9.10 → 0.9.12

package/client/studio-client.js

@@ -61,6 +61,7 @@
       const editorSelectionJumpBtn = document.getElementById("editorSelectionJumpBtn");
       const leftPaneEl = document.getElementById("leftPane");
       const rightPaneEl = document.getElementById("rightPane");
+      const paneResizeHandleEl = document.getElementById("paneResizeHandle");
       const sourceBadgeEl = document.getElementById("sourceBadge");
       const syncBadgeEl = document.getElementById("syncBadge");
       let critiqueViewEl = document.getElementById("critiqueView");
@@ -245,6 +246,8 @@
       const REPL_JOURNAL_MAX_ENTRIES = 80;
       const PDF_EXPORT_FETCH_TIMEOUT_MS = 180_000;
       const HTML_EXPORT_FETCH_TIMEOUT_MS = 180_000;
+      const HTML_ARTIFACT_MATH_RENDER_FETCH_TIMEOUT_MS = 30_000;
+      const HTML_ARTIFACT_RESOURCE_FETCH_TIMEOUT_MS = 30_000;
       const EDITOR_TAB_TEXT = "  ";
       const QUIZ_DEFAULT_COUNT = 5;
       const QUIZ_SCOPES = ["editor", "selection", "file", "folder", "repo"];
@@ -287,6 +290,15 @@
           return "python";
         }
       })();
+      let replCommandOverrides = (() => {
+        try {
+          const raw = window.localStorage && window.localStorage.getItem("piStudio.replCommandOverrides");
+          const parsed = raw ? JSON.parse(raw) : {};
+          return parsed && typeof parsed === "object" ? parsed : {};
+        } catch {
+          return {};
+        }
+      })();
       let replTranscript = "";
       let replError = "";
       let replMessage = "";
@@ -951,11 +963,26 @@
         setStatus("Loaded visible working into editor.", "success");
       }
 
-      function normalizeReplRuntime(value) {
+      function getKnownReplRuntime(value) {
         const runtime = String(value || "").trim().toLowerCase();
         return runtime === "shell" || runtime === "python" || runtime === "ipython" || runtime === "julia" || runtime === "r" || runtime === "ghci" || runtime === "clojure"
           ? runtime
-          : "python";
+          : "";
+      }
+
+      function normalizeReplRuntime(value) {
+        return getKnownReplRuntime(value) || "python";
+      }
+
+      function getReplRuntimeLabel(value) {
+        const runtime = normalizeReplRuntime(value);
+        if (runtime === "shell") return "Shell";
+        if (runtime === "python") return "Python";
+        if (runtime === "ipython") return "IPython";
+        if (runtime === "julia") return "Julia";
+        if (runtime === "r") return "R";
+        if (runtime === "ghci") return "GHCi";
+        return "Clojure";
       }
 
       function normalizeReplSession(session) {
@@ -980,6 +1007,47 @@
         }
       }
 
+      function normalizeReplCommandOverride(value) {
+        return String(value || "").replace(/\r?\n/g, " ").replace(/\s+/g, " ").trim().slice(0, 240);
+      }
+
+      function getReplCommandOverride(runtime) {
+        const normalizedRuntime = normalizeReplRuntime(runtime || replRuntime);
+        const value = replCommandOverrides && typeof replCommandOverrides === "object"
+          ? replCommandOverrides[normalizedRuntime]
+          : "";
+        return normalizeReplCommandOverride(value);
+      }
+
+      function persistReplCommandOverrides() {
+        try {
+          if (window.localStorage) window.localStorage.setItem("piStudio.replCommandOverrides", JSON.stringify(replCommandOverrides || {}));
+        } catch {
+          // Ignore storage failures.
+        }
+      }
+
+      function setReplCommandOverride(runtime, command) {
+        const normalizedRuntime = normalizeReplRuntime(runtime || replRuntime);
+        const normalizedCommand = normalizeReplCommandOverride(command);
+        replCommandOverrides = replCommandOverrides && typeof replCommandOverrides === "object" ? replCommandOverrides : {};
+        if (normalizedCommand) {
+          replCommandOverrides[normalizedRuntime] = normalizedCommand;
+        } else {
+          delete replCommandOverrides[normalizedRuntime];
+        }
+        persistReplCommandOverrides();
+      }
+
+      function getCurrentReplStartCommandFromDom() {
+        if (!critiqueViewEl || typeof critiqueViewEl.querySelector !== "function") return getReplCommandOverride(replRuntime);
+        const inputEl = critiqueViewEl.querySelector("[data-repl-command]");
+        if (inputEl && "value" in inputEl) {
+          return normalizeReplCommandOverride(inputEl.value);
+        }
+        return getReplCommandOverride(replRuntime);
+      }
+
       function normalizeReplSendMode(value) {
         return String(value || "").trim().toLowerCase() === "literate" ? "literate" : "raw";
       }
@@ -1055,7 +1123,10 @@
           ? sessions.map(normalizeReplSession).filter(Boolean)
           : [];
         if (replActiveSessionName && !replSessions.some((session) => session.sessionName === replActiveSessionName)) {
-          replActiveSessionName = replSessions[0] ? replSessions[0].sessionName : "";
+          setActiveReplSession("");
+        }
+        if (!getActiveReplSessionForCurrentRuntime()) {
+          selectReplSessionForRuntime(replRuntime, replActiveSessionName);
         }
         return previous !== serializeReplSessionsForCompare(replSessions) || previousActive !== replActiveSessionName;
       }
@@ -1064,9 +1135,43 @@
         return replSessions.find((session) => session.sessionName === replActiveSessionName) || null;
       }
 
+      function isReplSessionRuntimeCompatible(session, runtime) {
+        if (!session) return false;
+        const sessionRuntime = getKnownReplRuntime(session.runtime);
+        return Boolean(sessionRuntime) && sessionRuntime === normalizeReplRuntime(runtime);
+      }
+
+      function getReplSessionsForRuntime(runtime) {
+        const normalizedRuntime = normalizeReplRuntime(runtime);
+        return replSessions.filter((session) => isReplSessionRuntimeCompatible(session, normalizedRuntime));
+      }
+
+      function selectReplSessionForRuntime(runtime, preferredSessionName) {
+        const sessions = getReplSessionsForRuntime(runtime);
+        const preferred = String(preferredSessionName || "").trim();
+        const selected = sessions.find((session) => session.sessionName === preferred) || sessions[0] || null;
+        setActiveReplSession(selected ? selected.sessionName : "");
+        return selected;
+      }
+
+      function setActiveReplSessionForCurrentRuntime(sessionName) {
+        const name = String(sessionName || "").trim();
+        const candidate = name ? replSessions.find((session) => session.sessionName === name) : null;
+        if (candidate && isReplSessionRuntimeCompatible(candidate, replRuntime)) {
+          setActiveReplSession(candidate.sessionName);
+          return candidate;
+        }
+        return selectReplSessionForRuntime(replRuntime, replActiveSessionName);
+      }
+
+      function getActiveReplSessionForCurrentRuntime() {
+        const session = getActiveReplSession();
+        return isReplSessionRuntimeCompatible(session, replRuntime) ? session : null;
+      }
+
       function buildActiveReplPromptContext() {
         if (rightView !== "repl") return "";
-        const session = getActiveReplSession();
+        const session = getActiveReplSessionForCurrentRuntime();
         if (!session) return "";
         const runtime = session.runtime && session.runtime !== "unknown" ? session.runtime : "unknown";
         return [
@@ -1161,7 +1266,7 @@
       }
 
       function getActiveReplRuntime() {
-        const session = getActiveReplSession();
+        const session = getActiveReplSessionForCurrentRuntime();
         if (session && session.runtime && session.runtime !== "unknown") return normalizeReplRuntime(session.runtime);
         return normalizeReplRuntime(replRuntime);
       }
@@ -1501,7 +1606,7 @@
 
       function stripStudioReplSubmissionEcho(delta) {
         let value = String(delta || "").replace(/^\s+/, "");
-        // The raw mirror below remains raw; REPL Studio cards hide only the
+        // The raw mirror below remains raw; Studio record cards hide only the
         // temp-file wrapper used to submit multiline snippets safely. The
         // pi-studio-re fragment catches IPython's wrapped pi-studio-repl paths.
         const submissionEchoPatterns = [
@@ -1565,11 +1670,11 @@
       function buildReplJournalMarkdown(entries) {
         const visibleEntries = Array.isArray(entries) ? entries : getVisibleReplJournalEntries();
         const sessionName = getActiveReplJournalSessionName();
-        const lines = ["# REPL Studio", "", "Generated: " + new Date().toLocaleString()];
+        const lines = ["# Studio REPL Record", "", "Generated: " + new Date().toLocaleString()];
         if (sessionName) lines.push("Session: `" + sessionName + "`");
         lines.push("");
         if (!visibleEntries.length) {
-          lines.push(sessionName ? ("_No REPL Studio entries for `" + sessionName + "` yet._") : "_No REPL Studio entries yet._");
+          lines.push(sessionName ? ("_No Studio REPL record entries for `" + sessionName + "` yet._") : "_No Studio REPL record entries yet._");
           return lines.join("\n");
         }
         visibleEntries.forEach((entry, index) => {
@@ -1601,11 +1706,11 @@
       async function copyReplJournalToClipboard() {
         const entries = getVisibleReplJournalEntries();
         if (!entries.length) {
-          setStatus("No REPL Studio entries to copy for this session yet.", "warning");
+          setStatus("No Studio REPL record entries to copy for this session yet.", "warning");
           return;
         }
         if (await writeTextToClipboard(buildReplJournalMarkdown(entries))) {
-          setStatus("Copied REPL Studio session as Markdown.", "success");
+          setStatus("Copied Studio REPL record as Markdown.", "success");
         } else {
           setStatus("Clipboard write failed.", "warning");
         }
@@ -1614,7 +1719,7 @@
       function exportReplJournalMarkdown() {
         const entries = getVisibleReplJournalEntries();
         if (!entries.length) {
-          setStatus("No REPL Studio entries to export for this session yet.", "warning");
+          setStatus("No Studio REPL record entries to export for this session yet.", "warning");
           return;
         }
         const blob = new Blob([buildReplJournalMarkdown(entries)], { type: "text/markdown;charset=utf-8" });
@@ -1628,7 +1733,7 @@
         link.click();
         link.remove();
         window.setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
-        setStatus("Exported REPL Studio session Markdown.", "success");
+        setStatus("Exported Studio REPL record Markdown.", "success");
       }
 
       function clearReplJournal() {
@@ -1640,27 +1745,27 @@
         }
         activeReplJournalEntryId = "";
         persistReplJournalEntries();
-        setStatus(sessionName ? "Cleared REPL Studio for this session." : "Cleared REPL Studio.", "success");
+        setStatus(sessionName ? "Cleared Studio REPL record for this session." : "Cleared Studio REPL record.", "success");
         renderReplViewIfActive({ force: true });
       }
 
       function loadReplJournalIntoEditor() {
         const entries = getVisibleReplJournalEntries();
         if (!entries.length) {
-          setStatus("No REPL Studio entries to load for this session yet.", "warning");
+          setStatus("No Studio REPL record entries to load for this session yet.", "warning");
           return;
         }
         const markdown = buildReplJournalMarkdown(entries);
         setEditorText(markdown, { preserveScroll: false, preserveSelection: false });
-        setSourceState({ source: "blank", label: "REPL Studio", path: null });
+        setSourceState({ source: "blank", label: "Studio REPL Record", path: null });
         setEditorLanguage("markdown");
-        setStatus("Loaded REPL Studio session into editor.", "success");
+        setStatus("Loaded Studio REPL record into editor.", "success");
       }
 
       function addSelectedReplJournalNote() {
         const note = getSelectedOrCurrentParagraphForReplNote();
         if (!note.trim()) {
-          setStatus("Select prose or place the cursor in a paragraph to add a REPL Studio note.", "warning");
+          setStatus("Select prose or place the cursor in a paragraph to add a Studio REPL record note.", "warning");
           return;
         }
         addReplJournalEntry({
@@ -1671,14 +1776,14 @@
           sessionName: replActiveSessionName,
           runtime: getActiveReplRuntime(),
         });
-        setStatus("Added note to REPL Studio.", "success");
+        setStatus("Added note to Studio REPL record.", "success");
         renderReplViewIfActive({ force: true });
       }
 
       function sendReplPayload(payload) {
-        const session = getActiveReplSession();
+        const session = getActiveReplSessionForCurrentRuntime();
         if (!session) {
-          setStatus("Start or select a REPL session first.", "warning");
+          setStatus("Start or select a " + getReplRuntimeLabel(replRuntime) + " REPL session first.", "warning");
           return;
         }
         if (!payload || payload.error) {
@@ -1696,7 +1801,7 @@
               runtime: getActiveReplRuntime(),
               skippedChunks: payload.skippedChunks,
             });
-            setStatus("Added prose to REPL Studio.", "success");
+            setStatus("Added prose to Studio REPL record.", "success");
             renderReplViewIfActive({ force: true });
           } else {
             setStatus("No code or prose found to send.", "warning");
@@ -1770,6 +1875,11 @@
       let fileBackedBaselineText = null;
       let activePane = "left";
       let paneFocusTarget = "off";
+      let paneSplitPercent = 50;
+      const PANE_SPLIT_STORAGE_KEY = "piStudio.paneSplitPercent";
+      const PANE_SPLIT_MIN_PERCENT = 20;
+      const PANE_SPLIT_MAX_PERCENT = 80;
+      const PANE_SPLIT_SNAP_TO_CENTER_PERCENT = 1;
       const EDITOR_HIGHLIGHT_MAX_CHARS = 100_000;
       const EDITOR_HIGHLIGHT_STORAGE_KEY = "piStudio.editorHighlightEnabled";
       const EDITOR_LANGUAGE_STORAGE_KEY = "piStudio.editorLanguage";
@@ -2430,7 +2540,7 @@
 
       function getTerminalBusyStatus() {
         if (terminalActivityPhase === "tool") {
-          if (terminalActivityLabel) {
+          if (terminalActivityLabel && !isGenericToolLabel(terminalActivityLabel)) {
             return "Terminal: " + withEllipsis(terminalActivityLabel);
           }
           return terminalActivityToolName
@@ -2474,7 +2584,7 @@
         const action = getStudioActionLabel(kind);
         const queueSuffix = studioRunChainActive ? formatQueuedSteeringSuffix() : "";
         if (terminalActivityPhase === "tool") {
-          if (terminalActivityLabel) {
+          if (terminalActivityLabel && !isGenericToolLabel(terminalActivityLabel)) {
             return "Studio: " + withEllipsis(terminalActivityLabel) + queueSuffix;
           }
           return terminalActivityToolName
@@ -3001,6 +3111,142 @@
         setStatus(descriptor.fileBacked ? "Detached editor from file origin into a new draft." : "Reset editor origin to a new draft.", "success");
       }
 
+      function clampPaneSplitPercent(value) {
+        const numeric = Number(value);
+        if (!Number.isFinite(numeric)) return 50;
+        const clamped = Math.max(PANE_SPLIT_MIN_PERCENT, Math.min(PANE_SPLIT_MAX_PERCENT, Math.round(numeric * 10) / 10));
+        return Math.abs(clamped - 50) <= PANE_SPLIT_SNAP_TO_CENTER_PERCENT ? 50 : clamped;
+      }
+
+      function applyPaneSplitPercent(percent, options) {
+        paneSplitPercent = clampPaneSplitPercent(percent);
+        const rightPercent = Math.round((100 - paneSplitPercent) * 10) / 10;
+        document.documentElement.style.setProperty("--studio-left-pane-fr", paneSplitPercent + "fr");
+        document.documentElement.style.setProperty("--studio-right-pane-fr", rightPercent + "fr");
+        if (paneResizeHandleEl) {
+          paneResizeHandleEl.setAttribute("aria-valuemin", String(PANE_SPLIT_MIN_PERCENT));
+          paneResizeHandleEl.setAttribute("aria-valuemax", String(PANE_SPLIT_MAX_PERCENT));
+          paneResizeHandleEl.setAttribute("aria-valuenow", String(Math.round(paneSplitPercent)));
+          paneResizeHandleEl.setAttribute("aria-valuetext", "Editor " + Math.round(paneSplitPercent) + " percent, response " + Math.round(rightPercent) + " percent");
+        }
+        if (!options || options.persist !== false) {
+          try {
+            if (window.localStorage) window.localStorage.setItem(PANE_SPLIT_STORAGE_KEY, String(paneSplitPercent));
+          } catch {
+            // Ignore localStorage failures.
+          }
+        }
+      }
+
+      function resetPaneSplitPercent() {
+        applyPaneSplitPercent(50);
+        setStatus("Pane split reset to 50/50.");
+      }
+
+      function loadPaneSplitPercent() {
+        if (isEditorOnlyMode) return;
+        let stored = "";
+        try {
+          stored = window.localStorage ? String(window.localStorage.getItem(PANE_SPLIT_STORAGE_KEY) || "") : "";
+        } catch {
+          stored = "";
+        }
+        applyPaneSplitPercent(stored ? Number(stored) : 50, { persist: false });
+      }
+
+      function getPaneSplitPercentFromPointerEvent(event) {
+        const mainEl = paneResizeHandleEl && typeof paneResizeHandleEl.closest === "function"
+          ? paneResizeHandleEl.closest("main")
+          : null;
+        if (!mainEl || typeof mainEl.getBoundingClientRect !== "function") return paneSplitPercent;
+        const rect = mainEl.getBoundingClientRect();
+        if (!rect.width) return paneSplitPercent;
+        const x = typeof event.clientX === "number" ? event.clientX : (rect.left + rect.width / 2);
+        return ((x - rect.left) / rect.width) * 100;
+      }
+
+      function setupPaneResizeHandle() {
+        if (!paneResizeHandleEl || isEditorOnlyMode) return;
+        loadPaneSplitPercent();
+        let dragging = false;
+        let movedDuringDrag = false;
+        let pointerStartX = 0;
+        let activePaneResizePointerId = null;
+        const finishDrag = () => {
+          if (!dragging) return;
+          dragging = false;
+          if (document.body && document.body.classList) document.body.classList.remove("pane-resizing");
+          try {
+            if (typeof paneResizeHandleEl.releasePointerCapture === "function" && activePaneResizePointerId != null) {
+              paneResizeHandleEl.releasePointerCapture(activePaneResizePointerId);
+            }
+          } catch {
+            // Ignore pointer-capture cleanup failures.
+          }
+          activePaneResizePointerId = null;
+          if (movedDuringDrag) {
+            setStatus("Pane split: editor " + Math.round(paneSplitPercent) + "%, response " + Math.round(100 - paneSplitPercent) + "%.");
+          }
+          movedDuringDrag = false;
+        };
+        paneResizeHandleEl.addEventListener("pointerdown", (event) => {
+          if (event.button != null && event.button !== 0) return;
+          event.preventDefault();
+          event.stopPropagation();
+          dragging = true;
+          movedDuringDrag = false;
+          pointerStartX = typeof event.clientX === "number" ? event.clientX : 0;
+          activePaneResizePointerId = event.pointerId;
+          if (document.body && document.body.classList) document.body.classList.add("pane-resizing");
+          try {
+            if (typeof paneResizeHandleEl.focus === "function") paneResizeHandleEl.focus({ preventScroll: true });
+          } catch {
+            try { paneResizeHandleEl.focus(); } catch {}
+          }
+          try {
+            if (typeof paneResizeHandleEl.setPointerCapture === "function") paneResizeHandleEl.setPointerCapture(event.pointerId);
+          } catch {
+            // Ignore pointer-capture failures.
+          }
+        });
+        paneResizeHandleEl.addEventListener("pointermove", (event) => {
+          if (!dragging) return;
+          const movement = typeof event.clientX === "number" ? Math.abs(event.clientX - pointerStartX) : 0;
+          if (!movedDuringDrag && movement < 3) return;
+          movedDuringDrag = true;
+          event.preventDefault();
+          applyPaneSplitPercent(getPaneSplitPercentFromPointerEvent(event));
+        });
+        paneResizeHandleEl.addEventListener("pointerup", finishDrag);
+        paneResizeHandleEl.addEventListener("pointercancel", finishDrag);
+        paneResizeHandleEl.addEventListener("dblclick", (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          resetPaneSplitPercent();
+        });
+        paneResizeHandleEl.addEventListener("keydown", (event) => {
+          if (event.key === "Home") {
+            event.preventDefault();
+            applyPaneSplitPercent(PANE_SPLIT_MIN_PERCENT);
+            return;
+          }
+          if (event.key === "End") {
+            event.preventDefault();
+            applyPaneSplitPercent(PANE_SPLIT_MAX_PERCENT);
+            return;
+          }
+          if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
+            event.preventDefault();
+            resetPaneSplitPercent();
+            return;
+          }
+          if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+          event.preventDefault();
+          const step = event.shiftKey ? 10 : 5;
+          applyPaneSplitPercent(paneSplitPercent + (event.key === "ArrowLeft" ? -step : step));
+        });
+      }
+
       function updatePaneFocusButtons() {
         [
           [leftFocusBtn, "left"],
@@ -3239,6 +3485,40 @@
         return false;
       }
 
+      function triggerResponseHistoryShortcut(action) {
+        if (isEditorOnlyMode) {
+          setStatus("Response history is unavailable in editor-only Studio.", "warning");
+          return false;
+        }
+        const total = Array.isArray(responseHistory) ? responseHistory.length : 0;
+        if (total <= 0) {
+          setStatus("No response history available yet.", "warning");
+          return false;
+        }
+        if (action === "previous") {
+          if (responseHistoryIndex <= 0) {
+            setStatus("Already at the first response.", "warning");
+            return false;
+          }
+          return selectHistoryIndex(responseHistoryIndex - 1);
+        }
+        if (action === "next") {
+          if (responseHistoryIndex >= total - 1) {
+            setStatus("Already at the latest response.", "warning");
+            return false;
+          }
+          return selectHistoryIndex(responseHistoryIndex + 1);
+        }
+        if (action === "latest") {
+          if (responseHistoryIndex >= total - 1) {
+            setStatus("Already viewing the latest response.");
+            return false;
+          }
+          return selectHistoryIndex(total - 1);
+        }
+        return false;
+      }
+
       function isTextEntryShortcutTarget(target) {
         if (!(target instanceof Element)) return false;
         const editable = target.closest("input, textarea, select, [contenteditable]");
@@ -3254,6 +3534,7 @@
         if (!event || event.defaultPrevented) return;
 
         const key = typeof event.key === "string" ? event.key : "";
+        const code = typeof event.code === "string" ? event.code : "";
         const plainEscape = key === "Escape"
           && !event.metaKey
           && !event.ctrlKey
@@ -3354,6 +3635,24 @@
           return;
         }
 
+        if (!isTextEntryShortcutTarget(event.target) && !event.metaKey && !event.ctrlKey && event.altKey && !event.shiftKey) {
+          if (key === "ArrowLeft") {
+            event.preventDefault();
+            triggerResponseHistoryShortcut("previous");
+            return;
+          }
+          if (key === "ArrowRight") {
+            event.preventDefault();
+            triggerResponseHistoryShortcut("next");
+            return;
+          }
+          if (key.toLowerCase() === "l" || code === "KeyL") {
+            event.preventDefault();
+            triggerResponseHistoryShortcut("latest");
+            return;
+          }
+        }
+
         const isPaneSwitchShortcut = key === "F6" && !event.metaKey && !event.ctrlKey && !event.altKey;
         if (isPaneSwitchShortcut) {
           event.preventDefault();
@@ -3968,6 +4267,11 @@
           + "      root ? root.offsetHeight : 0\n"
           + "    ));\n"
           + "  }\n"
+          + "  function getScrollTop() {\n"
+          + "    const body = document.body;\n"
+          + "    const root = document.documentElement;\n"
+          + "    return window.scrollY || (root ? root.scrollTop : 0) || (body ? body.scrollTop : 0) || 0;\n"
+          + "  }\n"
           + "  function sendHeight() {\n"
           + "    scheduled = false;\n"
           + "    const height = measureHeight();\n"
@@ -3980,13 +4284,301 @@
           + "    scheduled = true;\n"
           + "    requestAnimationFrame(sendHeight);\n"
           + "  }\n"
+          + "  function decodeFragment(value) {\n"
+          + "    const text = String(value || '').replace(/^#/, '');\n"
+          + "    try { return decodeURIComponent(text); } catch { return text; }\n"
+          + "  }\n"
+          + "  function findNamedFragmentTarget(fragment) {\n"
+          + "    const decoded = decodeFragment(fragment);\n"
+          + "    if (!decoded) return document.documentElement || document.body;\n"
+          + "    return document.getElementById(decoded) || document.getElementsByName(decoded)[0] || null;\n"
+          + "  }\n"
+          + "  function postFragmentScroll(target) {\n"
+          + "    if (!target || typeof target.getBoundingClientRect !== 'function') return;\n"
+          + "    const rect = target.getBoundingClientRect();\n"
+          + "    const scrollTop = getScrollTop();\n"
+          + "    try {\n"
+          + "      parent.postMessage({ type: 'pi-studio-html-artifact-fragment', id: PREVIEW_ID, targetTop: Math.max(0, rect.top + scrollTop), scrollTop, viewportHeight: window.innerHeight || 0, documentHeight: measureHeight() }, '*');\n"
+          + "    } catch {}\n"
+          + "  }\n"
+          + "  function scrollFragmentIntoView(fragment, options) {\n"
+          + "    const target = findNamedFragmentTarget(fragment);\n"
+          + "    if (!target) return false;\n"
+          + "    const behavior = options && options.smooth === false ? 'auto' : 'smooth';\n"
+          + "    try { target.scrollIntoView({ block: 'start', inline: 'nearest', behavior }); } catch { try { target.scrollIntoView(true); } catch {} }\n"
+          + "    postFragmentScroll(target);\n"
+          + "    setTimeout(() => postFragmentScroll(target), 80);\n"
+          + "    setTimeout(() => postFragmentScroll(target), 300);\n"
+          + "    return true;\n"
+          + "  }\n"
+          + "  function getAnchorFromClickTarget(target) {\n"
+          + "    let node = target;\n"
+          + "    if (node && node.nodeType === 3) node = node.parentElement;\n"
+          + "    return node && typeof node.closest === 'function' ? node.closest('a[href]') : null;\n"
+          + "  }\n"
+          + "  function getSameDocumentFragment(anchor) {\n"
+          + "    if (!anchor || typeof anchor.getAttribute !== 'function') return null;\n"
+          + "    if (anchor.hasAttribute('download')) return null;\n"
+          + "    const target = String(anchor.getAttribute('target') || '').trim().toLowerCase();\n"
+          + "    if (target && target !== '_self') return null;\n"
+          + "    const rawHref = String(anchor.getAttribute('href') || '').trim();\n"
+          + "    if (!rawHref) return null;\n"
+          + "    if (rawHref.charAt(0) === '#') return rawHref.slice(1);\n"
+          + "    const hashIndex = rawHref.indexOf('#');\n"
+          + "    if (hashIndex < 0) return null;\n"
+          + "    const beforeHash = rawHref.slice(0, hashIndex);\n"
+          + "    const currentWithoutHash = String(window.location && window.location.href || '').split('#')[0];\n"
+          + "    if (!beforeHash || beforeHash === currentWithoutHash || beforeHash === 'about:srcdoc') return rawHref.slice(hashIndex + 1);\n"
+          + "    return null;\n"
+          + "  }\n"
+          + "  function writeFragmentHistory(fragment) {\n"
+          + "    try {\n"
+          + "      if (history && typeof history.pushState === 'function') {\n"
+          + "        history.pushState(null, '', fragment ? '#' + encodeURIComponent(decodeFragment(fragment)) : '#');\n"
+          + "      }\n"
+          + "    } catch {}\n"
+          + "  }\n"
+          + "  function handleFragmentAnchorClick(event) {\n"
+          + "    if (!event || event.defaultPrevented) return;\n"
+          + "    if (typeof event.button === 'number' && event.button !== 0) return;\n"
+          + "    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;\n"
+          + "    const anchor = getAnchorFromClickTarget(event.target);\n"
+          + "    const fragment = getSameDocumentFragment(anchor);\n"
+          + "    if (fragment == null) return;\n"
+          + "    if (!scrollFragmentIntoView(fragment)) return;\n"
+          + "    event.preventDefault();\n"
+          + "    writeFragmentHistory(fragment);\n"
+          + "  }\n"
+          + "  const htmlMathPlaceholders = new Map();\n"
+          + "  let htmlMathSerial = 0;\n"
+          + "  let htmlMathScanScheduled = false;\n"
+          + "  function delimiterListIncludes(list, start, end) {\n"
+          + "    if (!Array.isArray(list)) return false;\n"
+          + "    return list.some((entry) => Array.isArray(entry) && entry[0] === start && entry[1] === end);\n"
+          + "  }\n"
+          + "  function getHtmlMathDelimiterConfig() {\n"
+          + "    const mathJax = window.MathJax && typeof window.MathJax === 'object' ? window.MathJax : null;\n"
+          + "    const tex = mathJax && mathJax.tex && typeof mathJax.tex === 'object' ? mathJax.tex : null;\n"
+          + "    return {\n"
+          + "      inlineDollar: Boolean(tex && delimiterListIncludes(tex.inlineMath, '$', '$')),\n"
+          + "      displayDollar: Boolean(tex && delimiterListIncludes(tex.displayMath, '$$', '$$')),\n"
+          + "    };\n"
+          + "  }\n"
+          + "  function isEscapedAt(text, index) {\n"
+          + "    let count = 0;\n"
+          + "    let pos = index - 1;\n"
+          + "    while (pos >= 0 && text.charAt(pos) === '\\\\') { count += 1; pos -= 1; }\n"
+          + "    return count % 2 === 1;\n"
+          + "  }\n"
+          + "  function findUnescapedDelimiter(text, delimiter, fromIndex) {\n"
+          + "    let index = Math.max(0, Number(fromIndex) || 0);\n"
+          + "    while (index < text.length) {\n"
+          + "      index = text.indexOf(delimiter, index);\n"
+          + "      if (index < 0) return -1;\n"
+          + "      if (!isEscapedAt(text, index)) return index;\n"
+          + "      index += Math.max(1, delimiter.length);\n"
+          + "    }\n"
+          + "    return -1;\n"
+          + "  }\n"
+          + "  function textMightContainMath(text, config) {\n"
+          + "    if (!text) return false;\n"
+          + "    if (text.indexOf('\\\\(') !== -1 || text.indexOf('\\\\[') !== -1) return true;\n"
+          + "    return Boolean((config.inlineDollar || config.displayDollar) && text.indexOf('$') !== -1);\n"
+          + "  }\n"
+          + "  function findNextMathSegment(text, startIndex, config) {\n"
+          + "    for (let index = startIndex; index < text.length; index += 1) {\n"
+          + "      if (text.startsWith('\\\\(', index)) {\n"
+          + "        const end = findUnescapedDelimiter(text, '\\\\)', index + 2);\n"
+          + "        if (end > index + 2) return { start: index, end: end + 2, tex: text.slice(index + 2, end).trim(), display: false };\n"
+          + "      }\n"
+          + "      if (text.startsWith('\\\\[', index)) {\n"
+          + "        const end = findUnescapedDelimiter(text, '\\\\]', index + 2);\n"
+          + "        if (end > index + 2) return { start: index, end: end + 2, tex: text.slice(index + 2, end).trim(), display: true };\n"
+          + "      }\n"
+          + "      if (config.displayDollar && text.startsWith('$$', index) && !isEscapedAt(text, index)) {\n"
+          + "        const end = findUnescapedDelimiter(text, '$$', index + 2);\n"
+          + "        if (end > index + 2) return { start: index, end: end + 2, tex: text.slice(index + 2, end).trim(), display: true };\n"
+          + "      }\n"
+          + "      if (config.inlineDollar && text.charAt(index) === '$' && text.charAt(index + 1) !== '$' && !isEscapedAt(text, index)) {\n"
+          + "        const end = findUnescapedDelimiter(text, '$', index + 1);\n"
+          + "        if (end > index + 1) return { start: index, end: end + 1, tex: text.slice(index + 1, end).trim(), display: false };\n"
+          + "      }\n"
+          + "    }\n"
+          + "    return null;\n"
+          + "  }\n"
+          + "  function parseHtmlMathSegments(text, config, maxCount) {\n"
+          + "    const segments = [];\n"
+          + "    let index = 0;\n"
+          + "    const maxSegments = Math.max(1, Number(maxCount) || 1);\n"
+          + "    while (index < text.length && segments.length < maxSegments) {\n"
+          + "      const segment = findNextMathSegment(text, index, config);\n"
+          + "      if (!segment) break;\n"
+          + "      if (segment.tex) segments.push(segment);\n"
+          + "      index = Math.max(segment.end, segment.start + 1);\n"
+          + "    }\n"
+          + "    return segments;\n"
+          + "  }\n"
+          + "  function shouldSkipHtmlMathTextNode(node) {\n"
+          + "    let el = node && node.parentElement;\n"
+          + "    while (el) {\n"
+          + "      const tag = el.tagName ? el.tagName.toLowerCase() : '';\n"
+          + "      if (['script', 'style', 'textarea', 'pre', 'code', 'math', 'svg', 'mjx-container'].indexOf(tag) !== -1) return true;\n"
+          + "      if (el.classList && (el.classList.contains('pi-studio-html-math') || el.classList.contains('MathJax'))) return true;\n"
+          + "      el = el.parentElement;\n"
+          + "    }\n"
+          + "    return false;\n"
+          + "  }\n"
+          + "  function replaceTextNodeWithHtmlMathPlaceholders(node, segments) {\n"
+          + "    if (!node || !node.parentNode || !segments || segments.length === 0) return [];\n"
+          + "    const text = String(node.nodeValue || '');\n"
+          + "    const fragment = document.createDocumentFragment();\n"
+          + "    const items = [];\n"
+          + "    let index = 0;\n"
+          + "    segments.forEach((segment) => {\n"
+          + "      if (segment.start > index) fragment.appendChild(document.createTextNode(text.slice(index, segment.start)));\n"
+          + "      const mathId = PREVIEW_ID + '_math_' + (++htmlMathSerial).toString(36);\n"
+          + "      const span = document.createElement('span');\n"
+          + "      span.className = 'pi-studio-html-math pi-studio-html-math-' + (segment.display ? 'display' : 'inline');\n"
+          + "      span.setAttribute('data-pi-studio-html-math-id', mathId);\n"
+          + "      span.setAttribute('aria-busy', 'true');\n"
+          + "      span.textContent = text.slice(segment.start, segment.end);\n"
+          + "      htmlMathPlaceholders.set(mathId, span);\n"
+          + "      items.push({ mathId, tex: segment.tex, display: Boolean(segment.display) });\n"
+          + "      fragment.appendChild(span);\n"
+          + "      index = segment.end;\n"
+          + "    });\n"
+          + "    if (index < text.length) fragment.appendChild(document.createTextNode(text.slice(index)));\n"
+          + "    node.parentNode.replaceChild(fragment, node);\n"
+          + "    return items;\n"
+          + "  }\n"
+          + "  function applyRenderedHtmlMath(results) {\n"
+          + "    if (!Array.isArray(results)) return;\n"
+          + "    results.forEach((result) => {\n"
+          + "      if (!result || typeof result !== 'object') return;\n"
+          + "      const mathId = typeof result.mathId === 'string' ? result.mathId : '';\n"
+          + "      const placeholder = mathId ? htmlMathPlaceholders.get(mathId) : null;\n"
+          + "      if (!placeholder || !placeholder.isConnected) return;\n"
+          + "      placeholder.removeAttribute('aria-busy');\n"
+          + "      if (result.ok === true && typeof result.html === 'string' && result.html.trim()) {\n"
+          + "        placeholder.innerHTML = result.html;\n"
+          + "        placeholder.classList.add('pi-studio-html-math-rendered');\n"
+          + "      } else {\n"
+          + "        placeholder.classList.add('pi-studio-html-math-failed');\n"
+          + "        if (typeof result.error === 'string' && result.error) placeholder.title = result.error;\n"
+          + "      }\n"
+          + "      htmlMathPlaceholders.delete(mathId);\n"
+          + "    });\n"
+          + "    scheduleHeight();\n"
+          + "  }\n"
+          + "  function runHtmlMathRenderScan() {\n"
+          + "    htmlMathScanScheduled = false;\n"
+          + "    if (!document.body || typeof document.createTreeWalker !== 'function') return;\n"
+          + "    const nodeFilterApi = typeof NodeFilter !== 'undefined' ? NodeFilter : { SHOW_TEXT: 4, FILTER_ACCEPT: 1, FILTER_REJECT: 2 };\n"
+          + "    const config = getHtmlMathDelimiterConfig();\n"
+          + "    const nodes = [];\n"
+          + "    const walker = document.createTreeWalker(document.body, nodeFilterApi.SHOW_TEXT, {\n"
+          + "      acceptNode(node) {\n"
+          + "        const text = String(node && node.nodeValue || '');\n"
+          + "        if (!textMightContainMath(text, config)) return nodeFilterApi.FILTER_REJECT;\n"
+          + "        if (shouldSkipHtmlMathTextNode(node)) return nodeFilterApi.FILTER_REJECT;\n"
+          + "        return nodeFilterApi.FILTER_ACCEPT;\n"
+          + "      }\n"
+          + "    });\n"
+          + "    while (walker.nextNode()) nodes.push(walker.currentNode);\n"
+          + "    const items = [];\n"
+          + "    for (const node of nodes) {\n"
+          + "      const remaining = 250 - items.length;\n"
+          + "      if (remaining <= 0) break;\n"
+          + "      const text = String(node && node.nodeValue || '');\n"
+          + "      const segments = parseHtmlMathSegments(text, config, remaining);\n"
+          + "      if (segments.length === 0) continue;\n"
+          + "      items.push(...replaceTextNodeWithHtmlMathPlaceholders(node, segments));\n"
+          + "    }\n"
+          + "    if (items.length > 0) {\n"
+          + "      try { parent.postMessage({ type: 'pi-studio-html-artifact-render-math', id: PREVIEW_ID, items }, '*'); } catch {}\n"
+          + "    }\n"
+          + "  }\n"
+          + "  function scheduleHtmlMathRenderScan() {\n"
+          + "    if (htmlMathScanScheduled) return;\n"
+          + "    htmlMathScanScheduled = true;\n"
+          + "    requestAnimationFrame(runHtmlMathRenderScan);\n"
+          + "  }\n"
+          + "  const htmlResourcePlaceholders = new Map();\n"
+          + "  let htmlResourceSerial = 0;\n"
+          + "  let htmlResourceScanScheduled = false;\n"
+          + "  function shouldResolveHtmlPreviewResourceUrl(value) {\n"
+          + "    const raw = String(value || '').trim();\n"
+          + "    if (!raw || raw.charAt(0) === '#') return false;\n"
+          + "    if (/^(?:data|blob|http|https|about|javascript|mailto):/i.test(raw)) return false;\n"
+          + "    if (/^\\/\\//.test(raw)) return false;\n"
+          + "    return /\\.(?:png|jpe?g|gif|webp)(?:[?#].*)?$/i.test(raw);\n"
+          + "  }\n"
+          + "  function scanHtmlPreviewResources() {\n"
+          + "    htmlResourceScanScheduled = false;\n"
+          + "    if (!document.body) return;\n"
+          + "    const items = [];\n"
+          + "    const images = Array.prototype.slice.call(document.querySelectorAll('img[src]'));\n"
+          + "    images.forEach((image) => {\n"
+          + "      if (!image || !image.getAttribute) return;\n"
+          + "      if (image.getAttribute('data-pi-studio-html-resource-resolved') === 'true') return;\n"
+          + "      const raw = String(image.getAttribute('src') || '').trim();\n"
+          + "      if (!shouldResolveHtmlPreviewResourceUrl(raw)) return;\n"
+          + "      let resourceId = image.getAttribute('data-pi-studio-html-resource-id') || '';\n"
+          + "      if (!resourceId) {\n"
+          + "        resourceId = PREVIEW_ID + '_resource_' + (++htmlResourceSerial).toString(36);\n"
+          + "        image.setAttribute('data-pi-studio-html-resource-id', resourceId);\n"
+          + "      }\n"
+          + "      htmlResourcePlaceholders.set(resourceId, image);\n"
+          + "      items.push({ resourceId, url: raw });\n"
+          + "    });\n"
+          + "    if (items.length > 0) {\n"
+          + "      try { parent.postMessage({ type: 'pi-studio-html-artifact-resolve-resources', id: PREVIEW_ID, resources: items.slice(0, 100) }, '*'); } catch {}\n"
+          + "    }\n"
+          + "  }\n"
+          + "  function scheduleHtmlPreviewResourceScan() {\n"
+          + "    if (htmlResourceScanScheduled) return;\n"
+          + "    htmlResourceScanScheduled = true;\n"
+          + "    requestAnimationFrame(scanHtmlPreviewResources);\n"
+          + "  }\n"
+          + "  function applyResolvedHtmlPreviewResources(results) {\n"
+          + "    if (!Array.isArray(results)) return;\n"
+          + "    results.forEach((result) => {\n"
+          + "      if (!result || typeof result !== 'object') return;\n"
+          + "      const resourceId = typeof result.resourceId === 'string' ? result.resourceId : '';\n"
+          + "      const image = resourceId ? htmlResourcePlaceholders.get(resourceId) : null;\n"
+          + "      if (!image || !image.isConnected) return;\n"
+          + "      if (result.ok === true && typeof result.dataUrl === 'string' && result.dataUrl) {\n"
+          + "        image.setAttribute('src', result.dataUrl);\n"
+          + "        image.setAttribute('data-pi-studio-html-resource-resolved', 'true');\n"
+          + "      } else if (typeof result.error === 'string' && result.error) {\n"
+          + "        image.setAttribute('title', result.error);\n"
+          + "      }\n"
+          + "      htmlResourcePlaceholders.delete(resourceId);\n"
+          + "    });\n"
+          + "    scheduleHeight();\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"
+          + "    if (!data || typeof data !== 'object' || data.id !== PREVIEW_ID) return;\n"
+          + "    if (data.type === 'pi-studio-html-artifact-zoom') {\n"
+          + "      applyZoom(data.zoom);\n"
+          + "      return;\n"
+          + "    }\n"
+          + "    if (data.type === 'pi-studio-html-artifact-math-rendered') {\n"
+          + "      applyRenderedHtmlMath(data.results);\n"
+          + "      return;\n"
+          + "    }\n"
+          + "    if (data.type === 'pi-studio-html-artifact-resources-resolved') {\n"
+          + "      applyResolvedHtmlPreviewResources(data.results);\n"
+          + "    }\n"
           + "  });\n"
-          + "  window.addEventListener('load', scheduleHeight);\n"
+          + "  document.addEventListener('click', handleFragmentAnchorClick);\n"
+          + "  document.addEventListener('DOMContentLoaded', () => { scheduleHtmlMathRenderScan(); scheduleHtmlPreviewResourceScan(); });\n"
+          + "  window.addEventListener('hashchange', () => {\n"
+          + "    const hash = String(window.location && window.location.hash || '');\n"
+          + "    if (hash) scrollFragmentIntoView(hash.slice(1), { smooth: false });\n"
+          + "  });\n"
+          + "  window.addEventListener('load', () => { scheduleHeight(); scheduleHtmlMathRenderScan(); scheduleHtmlPreviewResourceScan(); });\n"
           + "  window.addEventListener('resize', scheduleHeight);\n"
           + "  if (typeof ResizeObserver === 'function') {\n"
           + "    const observer = new ResizeObserver(scheduleHeight);\n"
@@ -3994,20 +4586,32 @@
           + "    if (document.body) observer.observe(document.body);\n"
           + "  }\n"
           + "  if (typeof MutationObserver === 'function') {\n"
-          + "    const observer = new MutationObserver(scheduleHeight);\n"
+          + "    const observer = new MutationObserver(() => { scheduleHeight(); scheduleHtmlMathRenderScan(); scheduleHtmlPreviewResourceScan(); });\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"
+          + "  setTimeout(() => { scheduleHtmlMathRenderScan(); scheduleHtmlPreviewResourceScan(); }, 0);\n"
+          + "  setTimeout(() => { scheduleHtmlMathRenderScan(); scheduleHtmlPreviewResourceScan(); }, 120);\n"
+          + "  setTimeout(() => { scheduleHtmlMathRenderScan(); scheduleHtmlPreviewResourceScan(); }, 500);\n"
           + "})();\n"
           + "<\/script>";
       }
 
+      function buildHtmlArtifactPreviewMathStyle() {
+        return "<style data-pi-studio-html-preview-math>\n"
+          + ".pi-studio-html-math-display{display:block;margin:0.75em 0;overflow-x:auto;text-align:center;}\n"
+          + ".pi-studio-html-math-display>math{display:block;margin:0 auto;}\n"
+          + ".pi-studio-html-math-inline>math{vertical-align:-0.15em;}\n"
+          + "</style>\n";
+      }
+
       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"
+          + buildHtmlArtifactPreviewMathStyle()
           + buildHtmlArtifactPreviewResizeScript(previewId);
       }
 
@@ -4067,7 +4671,244 @@
         }
       }
 
+      function handleHtmlArtifactFrameFragmentMessage(event) {
+        const data = event && event.data;
+        if (!data || typeof data !== "object" || data.type !== "pi-studio-html-artifact-fragment") 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;
+        if (record.shell && record.shell.classList && record.shell.classList.contains("is-focused")) return;
+
+        const scrollContainer = record.shell && typeof record.shell.closest === "function"
+          ? record.shell.closest(".panel-scroll")
+          : null;
+        const isCapped = Boolean(record.iframe.classList && record.iframe.classList.contains("is-height-capped"));
+        const documentHeight = Number(data.documentHeight);
+        const viewportHeight = Number(data.viewportHeight);
+        const isInternallyScrollable = isCapped
+          || (Number.isFinite(documentHeight) && Number.isFinite(viewportHeight) && documentHeight > viewportHeight + 2);
+        if (!scrollContainer || isInternallyScrollable) {
+          if (typeof record.iframe.scrollIntoView === "function") {
+            try {
+              record.iframe.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "smooth" });
+            } catch {
+              record.iframe.scrollIntoView(false);
+            }
+          }
+          return;
+        }
+
+        const rawTargetTop = Number(data.targetTop);
+        const offsetInFrame = Number.isFinite(rawTargetTop) && rawTargetTop > 0 ? rawTargetTop : 0;
+        const iframeRect = record.iframe.getBoundingClientRect();
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const topPadding = 12;
+        const nextTop = Math.max(
+          0,
+          scrollContainer.scrollTop + iframeRect.top - containerRect.top + offsetInFrame - topPadding,
+        );
+        try {
+          scrollContainer.scrollTo({ top: nextTop, behavior: "smooth" });
+        } catch {
+          scrollContainer.scrollTop = nextTop;
+        }
+      }
+
+      function normalizeHtmlArtifactMathRenderItems(rawItems) {
+        if (!Array.isArray(rawItems)) return [];
+        return rawItems.slice(0, 250).map((item) => {
+          const raw = item && typeof item === "object" ? item : null;
+          const mathId = raw && typeof raw.mathId === "string" ? raw.mathId : "";
+          const tex = raw && typeof raw.tex === "string" ? raw.tex : "";
+          if (!mathId || !tex.trim()) return null;
+          return {
+            mathId,
+            tex,
+            display: Boolean(raw.display),
+          };
+        }).filter(Boolean);
+      }
+
+      async function fetchRenderedHtmlArtifactMath(items) {
+        const token = getToken();
+        if (!token) {
+          throw new Error("Missing Studio token in URL.");
+        }
+        const response = await fetchWithTimeout("/render-math?token=" + encodeURIComponent(token), {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ items }),
+        }, HTML_ARTIFACT_MATH_RENDER_FETCH_TIMEOUT_MS, "HTML preview math render");
+
+        const rawBody = await response.text();
+        let payload = null;
+        try {
+          payload = rawBody ? JSON.parse(rawBody) : null;
+        } catch {
+          payload = null;
+        }
+        if (!response.ok) {
+          const message = payload && typeof payload.error === "string"
+            ? payload.error
+            : "HTML preview math render failed with HTTP " + response.status + ".";
+          throw new Error(message);
+        }
+        if (!payload || payload.ok !== true || !Array.isArray(payload.results)) {
+          throw new Error("HTML preview math renderer returned an invalid payload.");
+        }
+        return payload.results;
+      }
+
+      function postHtmlArtifactMathResults(record, results) {
+        if (!record || !record.iframe || !record.iframe.isConnected || !record.iframe.contentWindow) return;
+        try {
+          record.iframe.contentWindow.postMessage({
+            type: "pi-studio-html-artifact-math-rendered",
+            id: record.id || "",
+            results: Array.isArray(results) ? results : [],
+          }, "*");
+        } catch {
+          // Ignore iframe postMessage failures.
+        }
+      }
+
+      async function renderHtmlArtifactMathItems(record, items) {
+        if (!record || !Array.isArray(items) || items.length === 0) return;
+        if (record.detail) record.detail.textContent = "HTML preview · rendering math";
+        try {
+          const results = await fetchRenderedHtmlArtifactMath(items);
+          postHtmlArtifactMathResults(record, results);
+        } catch (error) {
+          console.error("HTML preview math render failed:", error);
+          postHtmlArtifactMathResults(record, items.map((item) => ({
+            mathId: item.mathId,
+            ok: false,
+            error: error && error.message ? error.message : String(error || "HTML preview math render failed."),
+          })));
+        } finally {
+          if (record.detail) record.detail.textContent = "HTML preview";
+        }
+      }
+
+      function handleHtmlArtifactFrameMathRenderMessage(event) {
+        const data = event && event.data;
+        if (!data || typeof data !== "object" || data.type !== "pi-studio-html-artifact-render-math") 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 items = normalizeHtmlArtifactMathRenderItems(data.items);
+        if (items.length === 0) return;
+
+        record.mathRenderBatchCount = Math.max(0, Number(record.mathRenderBatchCount) || 0) + 1;
+        record.mathRenderItemCount = Math.max(0, Number(record.mathRenderItemCount) || 0) + items.length;
+        if (record.mathRenderBatchCount > 24 || record.mathRenderItemCount > 1000) {
+          postHtmlArtifactMathResults(record, items.map((item) => ({
+            mathId: item.mathId,
+            ok: false,
+            error: "HTML preview math render limit reached.",
+          })));
+          return;
+        }
+
+        void renderHtmlArtifactMathItems(record, items);
+      }
+
+      function normalizeHtmlArtifactResourceItems(rawItems) {
+        if (!Array.isArray(rawItems)) return [];
+        return rawItems.slice(0, 100).map((item) => {
+          const raw = item && typeof item === "object" ? item : null;
+          const resourceId = raw && typeof raw.resourceId === "string" ? raw.resourceId : "";
+          const url = raw && typeof raw.url === "string" ? raw.url : "";
+          if (!resourceId || !url.trim()) return null;
+          return { resourceId, url };
+        }).filter(Boolean);
+      }
+
+      function buildHtmlArtifactResourceFetchUrl(record, resourceUrl) {
+        const token = getToken();
+        if (!token) return "";
+        const params = new URLSearchParams({ token, path: String(resourceUrl || "") });
+        if (record && record.sourcePath) {
+          params.set("sourcePath", record.sourcePath);
+        } else if (record && record.resourceDir) {
+          params.set("resourceDir", record.resourceDir);
+        }
+        return "/html-preview-resource?" + params.toString();
+      }
+
+      function postHtmlArtifactResourceResults(record, results) {
+        if (!record || !record.iframe || !record.iframe.isConnected || !record.iframe.contentWindow) return;
+        try {
+          record.iframe.contentWindow.postMessage({
+            type: "pi-studio-html-artifact-resources-resolved",
+            id: record.id || "",
+            results: Array.isArray(results) ? results : [],
+          }, "*");
+        } catch {
+          // Ignore iframe postMessage failures.
+        }
+      }
+
+      async function fetchHtmlArtifactResource(record, item) {
+        const resourceId = item && item.resourceId ? item.resourceId : "";
+        try {
+          const fetchUrl = buildHtmlArtifactResourceFetchUrl(record, item.url);
+          if (!fetchUrl) throw new Error("Missing Studio token in URL.");
+          const response = await fetchWithTimeout(fetchUrl, { method: "GET" }, HTML_ARTIFACT_RESOURCE_FETCH_TIMEOUT_MS, "HTML preview resource load");
+          const payload = await response.json().catch(() => null);
+          if (!response.ok || !payload || payload.ok !== true || typeof payload.dataUrl !== "string") {
+            const message = payload && typeof payload.error === "string" ? payload.error : "HTML preview resource load failed with HTTP " + response.status + ".";
+            throw new Error(message);
+          }
+          return { resourceId, ok: true, dataUrl: payload.dataUrl };
+        } catch (error) {
+          return { resourceId, ok: false, error: error && error.message ? error.message : String(error || "HTML preview resource load failed.") };
+        }
+      }
+
+      async function resolveHtmlArtifactResources(record, items) {
+        if (!record || !Array.isArray(items) || items.length === 0) return;
+        if (record.detail) record.detail.textContent = "HTML preview · loading local images";
+        const results = await Promise.all(items.map((item) => fetchHtmlArtifactResource(record, item)));
+        postHtmlArtifactResourceResults(record, results);
+        if (record.detail) record.detail.textContent = "HTML preview";
+      }
+
+      function handleHtmlArtifactFrameResourceMessage(event) {
+        const data = event && event.data;
+        if (!data || typeof data !== "object" || data.type !== "pi-studio-html-artifact-resolve-resources") 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 items = normalizeHtmlArtifactResourceItems(data.resources);
+        if (items.length === 0) return;
+        record.resourceResolveBatchCount = Math.max(0, Number(record.resourceResolveBatchCount) || 0) + 1;
+        record.resourceResolveItemCount = Math.max(0, Number(record.resourceResolveItemCount) || 0) + items.length;
+        if (record.resourceResolveBatchCount > 12 || record.resourceResolveItemCount > 300) {
+          postHtmlArtifactResourceResults(record, items.map((item) => ({ resourceId: item.resourceId, ok: false, error: "HTML preview local image load limit reached." })));
+          return;
+        }
+        void resolveHtmlArtifactResources(record, items);
+      }
+
       window.addEventListener("message", handleHtmlArtifactFrameSizeMessage);
+      window.addEventListener("message", handleHtmlArtifactFrameFragmentMessage);
+      window.addEventListener("message", handleHtmlArtifactFrameMathRenderMessage);
+      window.addEventListener("message", handleHtmlArtifactFrameResourceMessage);
 
       function isStudioHtmlFocusOpen() {
         return Boolean(studioHtmlFocusOverlayEl && studioHtmlFocusOverlayEl.hidden === false && studioHtmlFocusShellEl);
@@ -4375,7 +5216,19 @@
         iframe.addEventListener("load", () => { postArtifactZoom(); });
         iframe.srcdoc = buildHtmlArtifactSrcdoc(html, previewId);
         shell.appendChild(iframe);
-        htmlArtifactFramesById.set(previewId, { iframe, shell, detail, zoomControls });
+        htmlArtifactFramesById.set(previewId, {
+          id: previewId,
+          iframe,
+          shell,
+          detail,
+          zoomControls,
+          sourcePath: options && options.sourcePath ? String(options.sourcePath) : "",
+          resourceDir: options && options.resourceDir ? String(options.resourceDir) : "",
+          mathRenderBatchCount: 0,
+          mathRenderItemCount: 0,
+          resourceResolveBatchCount: 0,
+          resourceResolveItemCount: 0,
+        });
 
         targetEl.appendChild(shell);
 
@@ -5490,12 +6343,16 @@
         const action = actionBtn.getAttribute("data-repl-action") || "";
         if (action === "start" || action === "new-session") {
           const requestId = makeRequestId();
+          const command = getCurrentReplStartCommandFromDom();
+          setReplCommandOverride(replRuntime, command);
           replBusy = true;
           replError = "";
-          replMessage = (action === "new-session" ? "Starting new " : "Starting ") + replRuntime + " REPL…";
+          replMessage = (action === "new-session" ? "Starting new " : "Starting ") + getReplRuntimeLabel(replRuntime) + " session" + (command ? " with custom command" : "") + "…";
           syncActionButtons();
           renderReplViewIfActive({ force: true });
-          if (!sendMessage({ type: "repl_start_request", requestId, runtime: replRuntime, newSession: action === "new-session" })) {
+          const message = { type: "repl_start_request", requestId, runtime: replRuntime, newSession: action === "new-session" };
+          if (command) message.command = command;
+          if (!sendMessage(message)) {
             replBusy = false;
             syncActionButtons();
           }
@@ -5599,13 +6456,29 @@
         if (!(target instanceof Element)) return;
         const runtimeSelect = target.closest("[data-repl-runtime]");
         if (runtimeSelect && "value" in runtimeSelect) {
+          const previousActive = replActiveSessionName;
           setReplRuntime(runtimeSelect.value);
+          selectReplSessionForRuntime(replRuntime, previousActive);
+          replError = "";
+          replMessage = "";
+          if (replActiveSessionName) {
+            requestReplCapture();
+          } else {
+            replTranscript = "";
+            replCapturedAt = 0;
+            syncActionButtons();
+          }
           renderReplViewIfActive({ force: true });
           return;
         }
+        const commandInput = target.closest("[data-repl-command]");
+        if (commandInput && "value" in commandInput) {
+          setReplCommandOverride(replRuntime, commandInput.value);
+          return;
+        }
         const sessionSelect = target.closest("[data-repl-session]");
         if (sessionSelect && "value" in sessionSelect) {
-          setActiveReplSession(sessionSelect.value);
+          setActiveReplSessionForCurrentRuntime(sessionSelect.value);
           replError = "";
           replMessage = "";
           replFollow = true;
@@ -5719,12 +6592,34 @@
           const source = codeEl ? codeEl.textContent : preEl.textContent;
 
           const wrapper = document.createElement("div");
-          wrapper.className = "mermaid-container";
+          wrapper.className = "mermaid-container studio-copyable-block";
+          if (wrapper.dataset) {
+            wrapper.dataset.mermaidSource = source || "";
+            wrapper.dataset.studioCopyDecorated = "1";
+          }
 
           const diagramEl = document.createElement("div");
           diagramEl.className = "mermaid";
           diagramEl.textContent = source || "";
 
+          const copyBtn = document.createElement("button");
+          copyBtn.type = "button";
+          copyBtn.className = "studio-copy-block-btn studio-copy-mermaid-source-btn";
+          copyBtn.textContent = "Copy source";
+          copyBtn.title = "Copy this Mermaid source to the clipboard.";
+          copyBtn.setAttribute("aria-label", "Copy Mermaid source to the clipboard");
+          copyBtn.addEventListener("pointerdown", (event) => {
+            event.stopPropagation();
+          });
+          copyBtn.addEventListener("mousedown", (event) => {
+            event.stopPropagation();
+          });
+
+          const toolbarEl = document.createElement("div");
+          toolbarEl.className = "mermaid-source-toolbar";
+          toolbarEl.appendChild(copyBtn);
+
+          wrapper.appendChild(toolbarEl);
           wrapper.appendChild(diagramEl);
           preEl.replaceWith(wrapper);
         });
@@ -5867,12 +6762,12 @@
         const exportingReplJournal = rightView === "repl";
         const rightPaneShowsPreview = rightView === "preview" || rightView === "editor-preview";
         if (!rightPaneShowsPreview && !exportingReplJournal) {
-          setStatus("Switch right pane to Response (Preview), Editor (Preview), or REPL Studio to export PDF.", "warning");
+          setStatus("Switch right pane to Response (Preview), Editor (Preview), or REPL to export PDF.", "warning");
           return;
         }
         const replJournalExportEntries = exportingReplJournal ? getVisibleReplJournalEntries() : [];
         if (exportingReplJournal && !replJournalExportEntries.length) {
-          setStatus("No REPL Studio entries to export for this session yet.", "warning");
+          setStatus("No Studio REPL record entries to export for this session yet.", "warning");
           return;
         }
 
@@ -6040,12 +6935,12 @@
         const exportingReplJournal = rightView === "repl";
         const rightPaneShowsPreview = rightView === "preview" || rightView === "editor-preview";
         if (!rightPaneShowsPreview && !exportingReplJournal) {
-          setStatus("Switch right pane to Response (Preview), Editor (Preview), or REPL Studio to export HTML.", "warning");
+          setStatus("Switch right pane to Response (Preview), Editor (Preview), or REPL to export HTML.", "warning");
           return;
         }
         const replJournalExportEntries = exportingReplJournal ? getVisibleReplJournalEntries() : [];
         if (exportingReplJournal && !replJournalExportEntries.length) {
-          setStatus("No REPL Studio entries to export for this session yet.", "warning");
+          setStatus("No Studio REPL record entries to export for this session yet.", "warning");
           return;
         }
 
@@ -6067,7 +6962,7 @@
           ? editorHtmlLanguage === "latex"
           : /\\documentclass\b|\\begin\{document\}/.test(markdown));
         let filenameHint = exportingReplJournal ? "repl-studio.html" : (isEditorPreview ? "studio-editor-preview.html" : "studio-response-preview.html");
-        let titleHint = exportingReplJournal ? "REPL Studio" : (isEditorPreview ? "Studio editor preview" : "Studio response preview");
+        let titleHint = exportingReplJournal ? "Studio REPL Record" : (isEditorPreview ? "Studio editor preview" : "Studio response preview");
         if (sourcePath) {
           const baseName = sourcePath.split(/[\\/]/).pop() || "studio";
           const stem = baseName.replace(/\.[^.]+$/, "") || "studio";
@@ -6300,6 +7195,9 @@
 
       function getCopyablePreviewBlockText(blockEl) {
         if (!blockEl || typeof blockEl.querySelectorAll !== "function") return "";
+        if (blockEl.classList && blockEl.classList.contains("mermaid-container") && blockEl.dataset && typeof blockEl.dataset.mermaidSource === "string") {
+          return normalizeCopyableBlockText(blockEl.dataset.mermaidSource);
+        }
         if (blockEl.classList && blockEl.classList.contains("preview-code-lines")) {
           return normalizeCopyableBlockText(
             Array.from(blockEl.querySelectorAll(".preview-code-line-content"))
@@ -6480,7 +7378,7 @@
         if (editorView !== "preview") return;
         const text = prepareEditorTextForPreview(sourceTextEl.value || "");
         if (isHtmlArtifactPreviewText(text, editorLanguage)) {
-          renderHtmlArtifactPreview(sourcePreviewEl, text, "source", { title: "Editor HTML preview" });
+          renderHtmlArtifactPreview(sourcePreviewEl, text, "source", { title: "Editor HTML preview", ...getHtmlPreviewResourceContextOptions() });
           return;
         }
         if (supportsCodePreviewCommentsForCurrentEditor()) {
@@ -6763,10 +7661,9 @@
         const visibleEntries = getVisibleReplJournalEntries();
         const hasEntries = visibleEntries.length > 0;
         const entryCount = visibleEntries.length;
-        const hiddenEntryCount = getHiddenReplJournalEntryCount();
         const sessionName = getActiveReplJournalSessionName();
         const collapsedClass = replJournalCollapsed ? " is-collapsed" : "";
-        const toggleButton = "<button type='button' data-repl-action='journal-toggle' aria-expanded='" + (replJournalCollapsed ? "false" : "true") + "'>" + (replJournalCollapsed ? "Show REPL Studio" : "Hide REPL Studio") + "</button>";
+        const toggleButton = "<button type='button' data-repl-action='journal-toggle' aria-expanded='" + (replJournalCollapsed ? "false" : "true") + "'>" + (replJournalCollapsed ? "Show record" : "Hide record") + "</button>";
         const toggleActions = "<div class='repl-journal-actions'>" + toggleButton + "</div>";
         const summaryText = hasEntries
           ? (entryCount + " Studio entr" + (entryCount === 1 ? "y" : "ies") + (sessionName ? " for " + sessionName : "") + ". Export is Markdown.")
@@ -6774,7 +7671,7 @@
         if (replJournalCollapsed) {
           return "<section class='repl-journal repl-journal-compact" + collapsedClass + "'>"
             + "<div class='repl-journal-compact-row'>"
-            + "<div class='repl-journal-compact-title'><span class='repl-journal-chip'>REPL Studio</span><span>" + escapeHtml(summaryText) + "</span></div>"
+            + "<div class='repl-journal-compact-title'><span class='repl-journal-chip'>Studio REPL Record</span><span>" + escapeHtml(summaryText) + "</span></div>"
             + "<div class='repl-journal-actions'>" + toggleButton + "</div>"
             + "</div>"
             + "</section>";
@@ -6812,14 +7709,14 @@
         }).join("");
         const emptyText = sessionName
           ? (String(transcript || "").trim()
-            ? "No REPL Studio entries for this tmux session yet. The raw tmux mirror below still has this session's history; send code from Studio to build a clean record."
-            : "No REPL Studio entries for this tmux session yet. Send code from the editor, or use More → Add note (Literate send) to record prose.")
-          : "No REPL Studio entries yet. Send code from the editor, or use More → Add note (Literate send) to record prose.";
+            ? "No Studio REPL record entries yet. The raw tmux mirror below still has this session's history; send code from Studio to build a clean record."
+            : "No Studio REPL record entries yet. Send code from the editor, or use More → Add note (Literate send) to record prose.")
+          : "No Studio REPL record entries yet. Send code from the editor, or use More → Add note (Literate send) to record prose.";
         const terminalContent = banner
           + (hasEntries ? cards : "<div class='repl-studio-empty'>" + escapeHtml(emptyText) + "</div>");
         return "<section class='repl-journal'>"
-          + "<div class='repl-journal-header'><div><h3>REPL Studio</h3><p>Clean collaborative Studio REPL record for the selected tmux session. The raw tmux mirror is available below.</p></div>" + toggleActions + "</div>"
-          + (hiddenEntryCount ? "<div class='repl-journal-omitted'>" + escapeHtml(String(hiddenEntryCount)) + " entr" + (hiddenEntryCount === 1 ? "y" : "ies") + " from other REPL sessions hidden.</div>" : "")
+          + "<div class='repl-journal-header'><h3>Studio REPL Record</h3>" + toggleActions + "</div>"
+          + "<p class='repl-journal-description'>Clean record for the selected tmux session. Raw tmux mirror below.</p>"
           + (omitted ? "<div class='repl-journal-omitted'>Showing latest 12 entries for this session; " + escapeHtml(String(omitted)) + " older entries remain in export.</div>" : "")
           + "<div class='repl-journal-list'>" + terminalContent + "</div>"
           + "</section>";
@@ -6843,7 +7740,7 @@
             + "</section>";
         }
         return "<section class='repl-mirror'>"
-          + "<div class='repl-journal-header'><div><h3>Raw REPL mirror</h3><p>Best-effort tmux pane mirror. Useful for directly typed commands and debugging; REPL Studio above is the cleaner record.</p></div>" + actions + "</div>"
+          + "<div class='repl-journal-header'><div><h3>Raw REPL Mirror</h3><p>Best-effort tmux pane mirror. Useful for directly typed commands and debugging; the Studio record above is cleaner.</p></div>" + actions + "</div>"
           + body
           + "</section>";
       }
@@ -6863,10 +7760,13 @@
           ["ghci", "GHCi"],
           ["clojure", "Clojure"],
         ].map(([value, label]) => "<option value='" + escapeHtml(value) + "'" + (replRuntime === value ? " selected" : "") + ">" + escapeHtml(label) + "</option>").join("");
-        const sessionOptions = replSessions.length
-          ? replSessions.map((session) => "<option value='" + escapeHtml(session.sessionName) + "'" + (session.sessionName === replActiveSessionName ? " selected" : "") + ">" + escapeHtml(session.label || session.sessionName) + "</option>").join("")
-          : "<option value=''>No REPL sessions</option>";
-        const activeSession = getActiveReplSession();
+        const runtimeLabel = getReplRuntimeLabel(replRuntime);
+        const visibleSessions = getReplSessionsForRuntime(replRuntime);
+        const sessionOptions = visibleSessions.length
+          ? visibleSessions.map((session) => "<option value='" + escapeHtml(session.sessionName) + "'" + (session.sessionName === replActiveSessionName ? " selected" : "") + ">" + escapeHtml(session.label || session.sessionName) + "</option>").join("")
+          : "<option value=''>None</option>";
+        const replCommand = getReplCommandOverride(replRuntime);
+        const activeSession = getActiveReplSessionForCurrentRuntime();
         const transcript = trimReplTranscript(replTranscript);
         const emptyMessage = replTmuxAvailable === false
           ? "tmux is not available. Install tmux to use Studio REPL sessions."
@@ -6880,17 +7780,17 @@
           + "<div class='repl-toolbar'>"
           + "<div class='repl-controls'>"
           + "<label class='repl-control-label'>Runtime <select data-repl-runtime aria-label='REPL runtime'>" + runtimeOptions + "</select></label>"
-          + "<button type='button' data-repl-action='start'" + (replBusy || replTmuxAvailable === false ? " disabled" : "") + " title='Start or attach to the default session for this runtime.'>Start</button>"
-          + "<label class='repl-control-label'>Session <select data-repl-session aria-label='REPL session'" + (replSessions.length ? "" : " disabled") + ">" + sessionOptions + "</select></label>"
+          + "<label class='repl-control-label repl-command-label'>Start cmd <input data-repl-command type='text' value='" + escapeHtml(replCommand) + "' placeholder='default' aria-label='REPL start command' title='Command used by Start for this runtime. Leave blank for the default; use this for envs, e.g. .venv/bin/python, uv run python, or conda run --no-capture-output -n env python.'></label>"
+          + "<button class='repl-start-btn' type='button' data-repl-action='start'" + (replBusy || replTmuxAvailable === false ? " disabled" : "") + " title='Start or switch to a " + escapeHtml(runtimeLabel) + " session using the selected runtime and start command.'>Start</button>"
+          + "<label class='repl-control-label repl-session-label'>Session <select data-repl-session aria-label='REPL session'" + (visibleSessions.length ? "" : " disabled") + ">" + sessionOptions + "</select></label>"
           + "<details class='repl-more-controls'>"
           + "<summary title='More REPL actions'>More</summary>"
           + "<div class='repl-more-menu'>"
-          + "<button type='button' data-repl-action='new-session'" + (replBusy || replTmuxAvailable === false ? " disabled" : "") + " title='Start a new additional session for this runtime.'>New session</button>"
           + "<button type='button' data-repl-action='stop-session'" + (canStopActiveSession ? "" : " disabled") + " title='Stop the selected Studio-owned REPL session.'>Stop session</button>"
           + "<button type='button' data-repl-action='interrupt'" + (activeSession && !replBusy ? "" : " disabled") + " title='Send Ctrl+C to the active REPL session.'>Interrupt</button>"
           + "<button type='button' data-repl-action='copy-attach-command'" + (activeSession ? "" : " disabled") + " title='Copy command for attaching to this tmux session in a terminal.'>Copy attach command</button>"
           + "<button type='button' data-repl-action='run-all-chunks'" + (canSendToActiveSession ? "" : " disabled") + " title='Literate send: send all fenced code chunks matching the active REPL runtime.'>Run all chunks</button>"
-          + "<button type='button' data-repl-action='journal-note' title='Add the selected prose/current paragraph to REPL Studio (Literate send) without sending it to the runtime.'>Add note</button>"
+          + "<button type='button' data-repl-action='journal-note' title='Add the selected prose/current paragraph to the Studio REPL record (Literate send) without sending it to the runtime.'>Add note</button>"
           + "<button type='button' data-repl-action='refresh'>Refresh</button>"
           + "<button type='button' data-repl-action='follow'>Follow: " + (replFollow ? "On" : "Off") + "</button>"
           + "</div>"
@@ -7074,7 +7974,7 @@
             return;
           }
           if (isHtmlArtifactPreviewText(editorText, editorLanguage)) {
-            renderHtmlArtifactPreview(critiqueViewEl, editorText, "response", { title: "Editor HTML preview" });
+            renderHtmlArtifactPreview(critiqueViewEl, editorText, "response", { title: "Editor HTML preview", ...getHtmlPreviewResourceContextOptions() });
             return;
           }
           if (supportsCodePreviewCommentsForCurrentEditor()) {
@@ -7098,7 +7998,7 @@
 
         if (rightView === "preview") {
           if (isHtmlArtifactPreviewText(markdown, "")) {
-            renderHtmlArtifactPreview(critiqueViewEl, markdown, "response", { title: "Response HTML preview" });
+            renderHtmlArtifactPreview(critiqueViewEl, markdown, "response", { title: "Response HTML preview", ...getHtmlPreviewResourceContextOptions() });
             return;
           }
           const nonce = ++responsePreviewRenderNonce;
@@ -7177,19 +8077,19 @@
           exportPdfBtn.disabled = uiBusy || previewExportInProgress || !canExportPreview;
           exportPdfBtn.textContent = previewExportInProgress
             ? "Exporting…"
-            : (exportingReplJournal ? "Export REPL Studio" : "Export right preview");
+            : (exportingReplJournal ? "Export record" : "Export right preview");
           if (rightView === "trace") {
             exportPdfBtn.title = "Working view does not support preview export.";
           } else if (exportingReplJournal && !replJournalExportEntries.length) {
-            exportPdfBtn.title = "No REPL Studio entries to export for this session yet.";
+            exportPdfBtn.title = "No Studio REPL record entries to export for this session yet.";
           } else if (rightView === "markdown") {
-            exportPdfBtn.title = "Switch right pane to Response (Preview), Editor (Preview), or REPL Studio to export.";
+            exportPdfBtn.title = "Switch right pane to Response (Preview), Editor (Preview), or REPL to export.";
           } else if (!canExportPreview) {
             exportPdfBtn.title = "Nothing to export yet.";
           } else if (isHtmlArtifactPreview) {
             exportPdfBtn.title = "This is an interactive HTML preview. Export as HTML; PDF export is not available yet.";
           } else if (exportingReplJournal) {
-            exportPdfBtn.title = "Choose PDF or HTML and export REPL Studio.";
+            exportPdfBtn.title = "Choose PDF or HTML and export the Studio REPL record.";
           } else {
             exportPdfBtn.title = "Choose PDF or HTML and export the current right-pane preview.";
           }
@@ -7198,20 +8098,20 @@
           exportPreviewPdfBtn.disabled = uiBusy || previewExportInProgress || !canExportPreview || isHtmlArtifactPreview;
           exportPreviewPdfBtn.title = isHtmlArtifactPreview
             ? "Interactive HTML preview PDF export is not available yet."
-            : (exportingReplJournal ? "Export REPL Studio as PDF." : "Export the current right-pane preview as PDF.");
+            : (exportingReplJournal ? "Export the Studio REPL record as PDF." : "Export the current right-pane preview as PDF.");
         }
         if (exportPreviewHtmlBtn) {
           exportPreviewHtmlBtn.disabled = uiBusy || previewExportInProgress || !canExportPreview;
           exportPreviewHtmlBtn.title = isHtmlArtifactPreview
             ? "Export the authored HTML preview."
-            : (exportingReplJournal ? "Export REPL Studio as standalone HTML." : "Export the current right-pane preview as standalone HTML.");
+            : (exportingReplJournal ? "Export the Studio REPL record as standalone HTML." : "Export the current right-pane preview as standalone HTML.");
         }
         if (exportPreviewControlsEl) {
           exportPreviewControlsEl.title = canExportPreview
             ? (exportingReplJournal
-              ? "Choose a format and export REPL Studio."
+              ? "Choose a format and export the Studio REPL record."
               : (isHtmlArtifactPreview ? "Export this HTML preview." : "Choose a format and export the current right-pane preview."))
-            : (exportingReplJournal ? "No REPL Studio entries to export for this session yet." : "Switch right pane to a non-empty preview before exporting.");
+            : (exportingReplJournal ? "No Studio REPL record entries to export for this session yet." : "Switch right pane to a non-empty preview before exporting.");
         }
         if (!canExportPreview || previewExportInProgress) {
           closeExportPreviewMenu();
@@ -7242,6 +8142,15 @@
         return null;
       }
 
+      function getHtmlPreviewResourceContextOptions() {
+        const sourcePath = getEffectiveSavePath() || sourceState.path || "";
+        const resourceDir = resourceDirInput && resourceDirInput.value.trim() ? resourceDirInput.value.trim() : "";
+        return {
+          sourcePath,
+          resourceDir: sourcePath ? "" : resourceDir,
+        };
+      }
+
       function buildAnnotatedSaveSuggestion() {
         const effectivePath = getEffectiveSavePath() || sourceState.path || "";
         if (effectivePath) {
@@ -13835,7 +14744,7 @@
           sendRunBtn.classList.toggle("request-stop-active", directIsStop);
           sendRunBtn.classList.toggle("repl-secondary-action", rightView === "repl" && !directIsStop);
           sendRunBtn.disabled = wsState === "Disconnected" || (!directIsStop && (uiBusy || critiqueIsStop));
-          const replHint = rightView === "repl" && getActiveReplSession()
+          const replHint = rightView === "repl" && getActiveReplSessionForCurrentRuntime()
             ? " Sends text to Pi, not the REPL; use Send chunk/selection or Send to REPL to execute code in the active REPL."
             : "";
           sendRunBtn.title = directIsStop
@@ -13856,7 +14765,7 @@
             : "Queue steering is available while Run editor text is active.";
         }
 
-        const hasReplSession = Boolean(getActiveReplSession());
+        const hasReplSession = Boolean(getActiveReplSessionForCurrentRuntime());
         if (sendReplBtn) {
           const showReplSend = rightView === "repl";
           sendReplBtn.hidden = !showReplSend;
@@ -14224,7 +15133,7 @@
           replTmuxAvailable = typeof message.tmuxAvailable === "boolean" ? message.tmuxAvailable : replTmuxAvailable;
           const sessionsChanged = setReplSessions(message.sessions);
           if (typeof message.activeSessionName === "string" && message.activeSessionName.trim()) {
-            setActiveReplSession(message.activeSessionName);
+            setActiveReplSessionForCurrentRuntime(message.activeSessionName);
           }
           const journalChanged = mergeReplJournalEntries(message.journalEntries);
           if (typeof message.transcript === "string") replTranscript = trimReplTranscript(message.transcript);
@@ -14277,7 +15186,7 @@
             }
           }
           if (typeof message.activeSessionName === "string" && message.activeSessionName.trim()) {
-            setActiveReplSession(message.activeSessionName);
+            setActiveReplSessionForCurrentRuntime(message.activeSessionName);
           }
           let journalChanged = mergeReplJournalEntries(message.journalEntries);
           if (typeof message.transcript === "string") {
@@ -15092,6 +16001,8 @@
         rightPaneEl.addEventListener("focusin", (event) => activatePaneFromInteraction("right", event));
       }
 
+      setupPaneResizeHandle();
+
       if (leftFocusBtn) {
         leftFocusBtn.addEventListener("click", () => {
           if (paneFocusTarget === "left") {