pi-studio 0.9.42 → 0.9.44

package/client/studio-client.js

@@ -1,4 +1,4 @@
-    (() => {
+    (async () => {
       const statusLineEl = document.getElementById("statusLine");
       const statusEl = document.getElementById("status");
       const statusSpinnerEl = document.getElementById("statusSpinner");
@@ -81,6 +81,8 @@
       const pullLatestBtn = document.getElementById("pullLatestBtn");
       const insertHeaderBtn = document.getElementById("insertHeaderBtn");
       const critiqueBtn = document.getElementById("critiqueBtn");
+      const showMeBtn = document.getElementById("showMeBtn");
+      const showMeResponseBtn = document.getElementById("showMeResponseBtn");
       const quizBtn = document.getElementById("quizBtn");
       const lensSelect = document.getElementById("lensSelect");
       const fileInput = document.getElementById("fileInput");
@@ -90,6 +92,7 @@
       const resourceDirInput = document.getElementById("resourceDirInput");
       const resourceDirClearBtn = document.getElementById("resourceDirClearBtn");
       const loadResponseBtn = document.getElementById("loadResponseBtn");
+      const annotateResponseBtn = document.getElementById("annotateResponseBtn");
       const loadCritiqueNotesBtn = document.getElementById("loadCritiqueNotesBtn");
       const loadCritiqueFullBtn = document.getElementById("loadCritiqueFullBtn");
       const copyResponseBtn = document.getElementById("copyResponseBtn");
@@ -209,9 +212,21 @@
       };
 
       const navigationHelpers = globalThis.PiStudioNavigationHelpers;
-      if (!navigationHelpers || typeof navigationHelpers.readPaneFocusTarget !== "function") {
+      if (
+        !navigationHelpers
+        || typeof navigationHelpers.readPaneFocusTarget !== "function"
+        || typeof navigationHelpers.ensureStudioTabStateId !== "function"
+        || typeof navigationHelpers.readStudioWorkspaceState !== "function"
+        || typeof navigationHelpers.persistStudioWorkspaceState !== "function"
+        || typeof navigationHelpers.clearStudioWorkspaceState !== "function"
+      ) {
         throw new Error("Studio navigation helpers failed to load.");
       }
+      const showMeHelpers = globalThis.PiStudioShowMeHelpers;
+      if (!showMeHelpers || typeof showMeHelpers.chooseStudioShowMeFocus !== "function") {
+        throw new Error("Studio Show me helpers failed to load.");
+      }
+      const studioTabStateId = navigationHelpers.ensureStudioTabStateId(window);
       const initialQueryParams = new URLSearchParams(window.location.search || "");
       const initialPaneFocusTarget = navigationHelpers.readPaneFocusTarget(window.location);
       const skipInitialWorkspaceRestore = initialQueryParams.get("skipWorkspaceRestore") === "1";
@@ -2059,8 +2074,9 @@
       const PANE_SPLIT_MIN_PERCENT = 20;
       const PANE_SPLIT_MAX_PERCENT = 80;
       const PANE_SPLIT_SNAP_TO_CENTER_PERCENT = 1;
-      const STUDIO_WORKSPACE_STORAGE_KEY = "piStudio.workspaceState.v1";
       const STUDIO_WORKSPACE_MAX_TEXT_CHARS = 900_000;
+      const STUDIO_WORKSPACE_PERSIST_INTERVAL_MS = 300;
+      const STUDIO_WORKSPACE_RECOVERY_FETCH_TIMEOUT_MS = 1_500;
       const EDITOR_HIGHLIGHT_MAX_CHARS = 100_000;
       const EDITOR_HIGHLIGHT_STORAGE_KEY = "piStudio.editorHighlightEnabled";
       const EDITOR_LANGUAGE_STORAGE_KEY = "piStudio.editorLanguage";
@@ -2217,6 +2233,8 @@
       let workspacePersistenceReady = false;
       let workspacePersistTimer = null;
       let workspaceRestoredFromBrowser = false;
+      let workspaceServerPersistenceBlocked = false;
+      let lastWorkspacePersistenceSavedAt = 0;
       let suppressedEditorSelectionStart = null;
       let suppressedEditorSelectionEnd = null;
       const previewJumpHighlightState = new WeakMap();
@@ -2528,6 +2546,7 @@
         buttonEl.setAttribute("aria-expanded", "false");
         buttonEl.addEventListener("click", (event) => {
           event.stopPropagation();
+          if (name === "review") syncShowMeButton();
           if (name === "review" && getAbortablePendingKind() === "critique") {
             requestCancelForPendingRequest("critique");
             return;
@@ -2549,7 +2568,7 @@
         if (!isEditorOnlyMode && critiqueBtn && lensSelect) {
           const reviewButton = makeStudioUiRefreshElement("button", "studio-refresh-tool-tab studio-refresh-review-btn", "Review");
           reviewMenu = makeStudioUiRefreshMenu(reviewButton, "review", "studio-refresh-review-anchor");
-          appendStudioUiRefreshMenuSection(reviewMenu.menu, "Action", [critiqueBtn, quizBtn]);
+          appendStudioUiRefreshMenuSection(reviewMenu.menu, "Action", [critiqueBtn, showMeBtn, showMeResponseBtn, quizBtn]);
           appendStudioUiRefreshMenuSection(reviewMenu.menu, "Setting", [lensSelect]);
         }
 
@@ -2875,7 +2894,7 @@
         if (isEditorOnlyMode) {
           return "Editor-only mode: edit, browse files, annotate, preview, save, suggest, refresh file-backed text, or send to a REPL.";
         }
-        return "Edit, load, or annotate text, then run, save, send to pi editor, or critique.";
+        return "Edit, load, or annotate text, then run, save, review, or ask Studio to show the current structure.";
       }
 
       function normalizeTerminalPhase(phase) {
@@ -2943,6 +2962,7 @@
       function getStudioActionLabel(kind) {
         if (kind === "annotation") return "sending annotated reply";
         if (kind === "critique") return "running critique";
+        if (kind === "show-me") return "building a compact explanation";
         if (kind === "direct") return "running editor text";
         if (kind === "compact") return "compacting context";
         if (kind === "send_to_editor") return "sending to pi editor";
@@ -3128,7 +3148,7 @@
       }
 
       function isTitleAttentionRequestKind(kind) {
-        return kind === "annotation" || kind === "critique" || kind === "direct";
+        return kind === "annotation" || kind === "critique" || kind === "show-me" || kind === "direct";
       }
 
       function armTitleAttentionForRequest(requestId, kind) {
@@ -3162,6 +3182,7 @@
 
       function getTitleAttentionMessage(kind) {
         if (kind === "critique") return "● Critique ready";
+        if (kind === "show-me") return "● Visual explanation ready";
         if (kind === "direct") return "● Response ready";
         return "● Reply ready";
       }
@@ -3199,6 +3220,7 @@
       function getTitleActionMessage(kind) {
         if (kind === "annotation") return "Replying…";
         if (kind === "critique") return "Critiquing…";
+        if (kind === "show-me") return "Showing…";
         if (kind === "direct") return "Running…";
         if (kind === "compact") return "Compacting…";
         if (kind === "send_to_editor") return "Sending to editor…";
@@ -3239,6 +3261,7 @@
 
         if (terminalActivityPhase === "responding") {
           if (activeKind === "critique") return "Critiquing…";
+          if (activeKind === "show-me") return "Showing…";
           if (activeKind === "annotation") return "Replying…";
           if (activeKind === "direct") return "Thinking…";
           return "Working…";
@@ -3605,11 +3628,13 @@
       });
 
       document.addEventListener("visibilitychange", () => {
-        if (!document.hidden) {
-          windowHasFocus = typeof document.hasFocus === "function" ? document.hasFocus() : windowHasFocus;
-          if (windowHasFocus) {
-            clearTitleAttention();
-          }
+        if (document.hidden) {
+          flushWorkspacePersistence({ beacon: false });
+          return;
+        }
+        windowHasFocus = typeof document.hasFocus === "function" ? document.hasFocus() : windowHasFocus;
+        if (windowHasFocus) {
+          clearTitleAttention();
         }
       });
 
@@ -3863,6 +3888,7 @@
           document.body.classList.add("pane-focus-right");
         }
         updatePaneFocusButtons();
+        updateResultActionButtons();
       }
 
       function persistPaneFocusUrlState() {
@@ -4416,7 +4442,7 @@
 
         if (plainEscape) {
           const activeKind = getAbortablePendingKind();
-          if (activeKind === "direct" || activeKind === "critique") {
+          if (activeKind === "direct" || activeKind === "critique" || activeKind === "show-me") {
             event.preventDefault();
             requestCancelForPendingRequest(activeKind);
             return;
@@ -4494,7 +4520,10 @@
       }
 
       function normalizeHistoryKind(kind) {
-        return kind === "critique" ? "critique" : "annotation";
+        if (kind === "critique") return "critique";
+        if (kind === "show-me") return "show-me";
+        if (kind === "direct") return "direct";
+        return "annotation";
       }
 
       function normalizeTraceSummary(summary) {
@@ -4564,6 +4593,61 @@
         return responseHistory[responseHistoryIndex] || null;
       }
 
+      function getStudioShowMeFocus(target) {
+        const selection = getEditorSelectionRange();
+        const selectedResponse = getSelectedHistoryItem();
+        const responseText = selectedResponse && typeof selectedResponse.markdown === "string"
+          ? selectedResponse.markdown
+          : latestResponseMarkdown;
+        const total = Array.isArray(responseHistory) ? responseHistory.length : 0;
+        const selected = total > 0 && responseHistoryIndex >= 0 && responseHistoryIndex < total
+          ? responseHistoryIndex + 1
+          : 0;
+        return showMeHelpers.chooseStudioShowMeFocus({
+          target: target === "response" ? "response" : "editor",
+          selectionText: selection.selected,
+          responseText,
+          responseVisible: (rightView === "markdown" || rightView === "preview") && paneFocusTarget !== "left",
+          editorText: sourceTextEl.value,
+          responseIndex: selected,
+          responseTotal: total,
+        });
+      }
+
+      function syncShowMeButton() {
+        if (!showMeBtn) return;
+        const showMeIsStop = getAbortablePendingKind() === "show-me";
+        const unavailableForRunChain = studioRunChainActive && !showMeIsStop;
+        const editorFocus = getStudioShowMeFocus("editor");
+        const responseFocus = getStudioShowMeFocus("response");
+        const showEditorAction = showMeIsStop || editorFocus.sourceKind !== "context" || !responseFocus;
+        showMeBtn.hidden = !showEditorAction;
+        const editorMenuItem = showMeBtn.closest(".studio-refresh-menu-item");
+        if (editorMenuItem) editorMenuItem.hidden = !showEditorAction;
+        showMeBtn.textContent = showMeIsStop ? "Stop showing" : editorFocus.actionLabel;
+        showMeBtn.classList.toggle("request-stop-active", showMeIsStop);
+        showMeBtn.disabled = showMeIsStop
+          ? wsState === "Disconnected"
+          : isEditorOnlyMode || wsState === "Disconnected" || uiBusy || unavailableForRunChain;
+        showMeBtn.title = showMeIsStop
+          ? "Stop the running Show me request. Shortcut: Esc."
+          : (isEditorOnlyMode
+            ? "Show me is unavailable in editor-only mode."
+            : (unavailableForRunChain
+              ? "Show me is unavailable while Run editor text is active."
+              : "Explain the " + editorFocus.sourceLabel + " using the smallest useful visual or structural representation."));
+        if (showMeResponseBtn) {
+          showMeResponseBtn.hidden = !responseFocus;
+          const responseMenuItem = showMeResponseBtn.closest(".studio-refresh-menu-item");
+          if (responseMenuItem) responseMenuItem.hidden = !responseFocus;
+          showMeResponseBtn.disabled = !responseFocus || showMeIsStop || isEditorOnlyMode || wsState === "Disconnected" || uiBusy || unavailableForRunChain;
+          showMeResponseBtn.textContent = "Explain displayed response";
+          showMeResponseBtn.title = responseFocus
+            ? "Explain the " + responseFocus.sourceLabel + " using the smallest useful visual or structural representation."
+            : "Available when a response is displayed in the right pane.";
+        }
+      }
+
       function syncTraceForSelectedHistoryItem() {
         const item = getSelectedHistoryItem();
         const total = Array.isArray(responseHistory) ? responseHistory.length : 0;
@@ -4651,6 +4735,7 @@
               : "Load the prompt that generated the selected response into the editor.")
             : "Prompt unavailable for the selected response.";
         }
+        syncShowMeButton();
       }
 
       function applySelectedHistoryItem(options) {
@@ -4685,7 +4770,9 @@
         if (applied && !(options && options.silent)) {
           const item = getSelectedHistoryItem();
           if (item) {
-            const responseLabel = item.kind === "critique" ? "critique" : "response";
+            const responseLabel = item.kind === "critique"
+              ? "critique"
+              : (item.kind === "show-me" ? "visual explanation" : "response");
             setStatus("Viewing " + responseLabel + " in current branch history " + (nextIndex + 1) + "/" + total + ".");
           }
         }
@@ -4827,7 +4914,9 @@
         }
 
         const time = formatReferenceTime(latestResponseTimestamp);
-        const responseLabel = latestResponseKind === "critique" ? "assistant critique" : "assistant response";
+        const responseLabel = latestResponseKind === "critique"
+          ? "assistant critique"
+          : (latestResponseKind === "show-me" ? "visual explanation" : "assistant response");
         const total = Array.isArray(responseHistory) ? responseHistory.length : 0;
         const selected = total > 0 && responseHistoryIndex >= 0 && responseHistoryIndex < total
           ? responseHistoryIndex + 1
@@ -10971,12 +11060,23 @@
         const critiqueNotesLoaded = Boolean(critiqueNotes) && normalizedEditor === latestCritiqueNotesNormalized;
 
         loadResponseBtn.hidden = isCritiqueResponse;
+        annotateResponseBtn.hidden = isCritiqueResponse;
         loadCritiqueNotesBtn.hidden = !isCritiqueResponse;
         loadCritiqueFullBtn.hidden = !isCritiqueResponse;
 
         loadResponseBtn.disabled = uiBusy || !hasResponse || responseLoaded || isCritiqueResponse;
         loadResponseBtn.textContent = responseLoaded ? "Response already in editor" : "Load response into editor";
 
+        const annotationWorkspaceReady = responseLoaded
+          && editorView === "markdown"
+          && rightView === "editor-preview"
+          && paneFocusTarget === "off";
+        annotateResponseBtn.disabled = uiBusy || !hasResponse || isCritiqueResponse || annotationWorkspaceReady;
+        annotateResponseBtn.textContent = annotationWorkspaceReady ? "Response ready to annotate" : "Annotate response";
+        annotateResponseBtn.title = annotationWorkspaceReady
+          ? "The selected response is exactly in the raw editor with Editor Preview open."
+          : "Load the selected response into the raw editor and show Editor Preview. This replaces the current editor text.";
+
         loadCritiqueNotesBtn.disabled = uiBusy || !isCritiqueResponse || !critiqueNotes || critiqueNotesLoaded;
         loadCritiqueNotesBtn.textContent = critiqueNotesLoaded ? "Critique notes already in editor" : "Load critique notes into editor";
 
@@ -11061,6 +11161,7 @@
 
         updateSyncBadge(normalizedEditor);
         syncStudioQuartoDirtyUi();
+        syncShowMeButton();
       }
 
       function refreshResponseUi() {
@@ -11377,34 +11478,46 @@
         return "source:" + normalized.source + ":" + normalized.label;
       }
 
-      function getWorkspacePersistenceStorage() {
+      function readPersistedWorkspaceState() {
         try {
-          return window.sessionStorage || null;
+          return navigationHelpers.readStudioWorkspaceState(window, studioTabStateId);
         } catch {
           return null;
         }
       }
 
-      function clearLegacyWorkspacePersistenceStorage() {
-        try {
-          if (window.localStorage) window.localStorage.removeItem(STUDIO_WORKSPACE_STORAGE_KEY);
-        } catch {}
-      }
-
-      function readPersistedWorkspaceState() {
+      async function readServerWorkspaceRecoveryState() {
+        if (skipInitialWorkspaceRestore) return { status: "skipped", state: null };
+        const controller = typeof AbortController === "function" ? new AbortController() : null;
+        const timer = controller
+          ? window.setTimeout(() => controller.abort(), STUDIO_WORKSPACE_RECOVERY_FETCH_TIMEOUT_MS)
+          : null;
         try {
-          const storage = getWorkspacePersistenceStorage();
-          const raw = storage ? storage.getItem(STUDIO_WORKSPACE_STORAGE_KEY) : null;
-          if (!raw) return null;
-          const parsed = JSON.parse(raw);
-          if (!parsed || typeof parsed !== "object" || parsed.version !== 1) return null;
-          if (typeof parsed.text !== "string") return null;
-          return parsed;
+          const payload = await fetchStudioJson("/tab-workspace-state", {
+            query: { tabStateId: studioTabStateId },
+            signal: controller ? controller.signal : undefined,
+          });
+          const state = payload && payload.state && typeof payload.state === "object" ? payload.state : null;
+          return { status: state ? "found" : "empty", state };
         } catch {
-          return null;
+          return { status: "unavailable", state: null };
+        } finally {
+          if (timer !== null) window.clearTimeout(timer);
         }
       }
 
+      function getWorkspaceStateSavedAt(state) {
+        return state && typeof state.savedAt === "number" && Number.isFinite(state.savedAt)
+          ? state.savedAt
+          : 0;
+      }
+
+      function chooseNewestRestorableWorkspaceState(states) {
+        return states
+          .filter((state) => shouldRestorePersistedWorkspaceState(state))
+          .sort((a, b) => getWorkspaceStateSavedAt(b) - getWorkspaceStateSavedAt(a))[0] || null;
+      }
+
       function shouldRestorePersistedWorkspaceState(state) {
         if (skipInitialWorkspaceRestore) return false;
         if (!state || typeof state.text !== "string") return false;
@@ -11417,9 +11530,10 @@
       }
 
       function buildWorkspacePersistencePayload() {
+        lastWorkspacePersistenceSavedAt = Math.max(Date.now(), lastWorkspacePersistenceSavedAt + 1);
         return {
           version: 1,
-          savedAt: Date.now(),
+          savedAt: lastWorkspacePersistenceSavedAt,
           sourceState: normalizeWorkspaceSourceState(sourceState),
           resourceDir: getCurrentResourceDirValue(),
           editorView,
@@ -11434,38 +11548,63 @@
         };
       }
 
-      function persistWorkspaceStateNow() {
+      function sendServerWorkspaceRecoveryState(payload, options) {
+        if ((options && options.skipServer) || (workspaceServerPersistenceBlocked && !(options && options.forceServer))) return;
+        const body = { tabStateId: studioTabStateId, state: payload };
+        if (ws && ws.readyState === WebSocket.OPEN) {
+          try {
+            ws.send(JSON.stringify({ type: "workspace_state_update", ...body }));
+            return;
+          } catch {
+            // Fall through to the authenticated HTTP path.
+          }
+        }
+        if (options && options.beacon && trySendStudioJsonBeacon("/tab-workspace-state", body)) return;
+        void fetchStudioJson("/tab-workspace-state", {
+          method: "POST",
+          body: JSON.stringify(body),
+          keepalive: Boolean(options && options.beacon),
+        }).catch(() => {
+          // Session storage remains the in-page fallback if server recovery fails.
+        });
+      }
+
+      function persistWorkspaceStateNow(options) {
         if (!workspacePersistenceReady) return;
         try {
-          const storage = getWorkspacePersistenceStorage();
-          if (!storage) return;
-          clearLegacyWorkspacePersistenceStorage();
           const payload = buildWorkspacePersistencePayload();
           if (payload.text.length > STUDIO_WORKSPACE_MAX_TEXT_CHARS) {
-            storage.removeItem(STUDIO_WORKSPACE_STORAGE_KEY);
+            navigationHelpers.clearStudioWorkspaceState(window, studioTabStateId);
+            sendServerWorkspaceRecoveryState({
+              ...payload,
+              sourceState: { source: "recovery-omitted", label: "oversized editor", path: null, draftId: null },
+              resourceDir: "",
+              rightView: "editor-preview",
+              text: "",
+            }, { ...(options || {}), forceServer: true });
             return;
           }
-          storage.setItem(STUDIO_WORKSPACE_STORAGE_KEY, JSON.stringify(payload));
+          navigationHelpers.persistStudioWorkspaceState(window, studioTabStateId, payload);
+          sendServerWorkspaceRecoveryState(payload, options);
         } catch {
-          // Ignore browser storage failures and quota limits.
+          // Ignore browser storage, serialization, and recovery-request failures.
         }
       }
 
       function scheduleWorkspacePersistence() {
-        if (!workspacePersistenceReady) return;
-        if (workspacePersistTimer !== null) window.clearTimeout(workspacePersistTimer);
+        if (!workspacePersistenceReady || workspacePersistTimer !== null) return;
         workspacePersistTimer = window.setTimeout(() => {
           workspacePersistTimer = null;
           persistWorkspaceStateNow();
-        }, 160);
+        }, STUDIO_WORKSPACE_PERSIST_INTERVAL_MS);
       }
 
-      function flushWorkspacePersistence() {
+      function flushWorkspacePersistence(options) {
         if (workspacePersistTimer !== null) {
           window.clearTimeout(workspacePersistTimer);
           workspacePersistTimer = null;
         }
-        persistWorkspaceStateNow();
+        persistWorkspaceStateNow(options || { beacon: true });
       }
 
       function clearPersistedWorkspaceState() {
@@ -11474,10 +11613,16 @@
           workspacePersistTimer = null;
         }
         try {
-          const storage = getWorkspacePersistenceStorage();
-          if (storage) storage.removeItem(STUDIO_WORKSPACE_STORAGE_KEY);
+          navigationHelpers.clearStudioWorkspaceState(window, studioTabStateId);
+          const marker = buildWorkspacePersistencePayload();
+          sendServerWorkspaceRecoveryState({
+            ...marker,
+            sourceState: { source: "recovery-cleared", label: "cleared editor", path: null, draftId: null },
+            resourceDir: "",
+            rightView: "editor-preview",
+            text: "",
+          }, { beacon: true, forceServer: true });
         } catch {}
-        clearLegacyWorkspacePersistenceStorage();
       }
 
       function applyPersistedWorkspaceState(state) {
@@ -12555,6 +12700,8 @@
           headers,
           body: init.body,
           cache: "no-store",
+          signal: init.signal,
+          keepalive: init.keepalive === true,
         });
         let payload = null;
         try {
@@ -19202,7 +19349,7 @@
 
       function getAbortablePendingKind() {
         if (!pendingRequestId) return null;
-        return pendingKind === "direct" || pendingKind === "critique" ? pendingKind : null;
+        return pendingKind === "direct" || pendingKind === "critique" || pendingKind === "show-me" ? pendingKind : null;
       }
 
       function requestCancelForPendingRequest(expectedKind) {
@@ -19345,6 +19492,7 @@
               ? "Resume the current Studio quiz."
               : "Open an active quiz for the current editor selection or document.");
         }
+        syncShowMeButton();
         syncStudioUiRefreshReviewTrigger();
       }
 
@@ -19427,7 +19575,7 @@
             ? timestamp
             : Date.now();
         const responseThinking = typeof thinking === "string" ? thinking : "";
-        const responseKind = kind === "critique" ? "critique" : "annotation";
+        const responseKind = normalizeHistoryKind(kind);
         const resetScroll = options && Object.prototype.hasOwnProperty.call(options, "resetScroll")
           ? Boolean(options.resetScroll)
           : (
@@ -19445,7 +19593,7 @@
         latestResponseThinking = responseThinking;
         latestResponseKind = responseKind;
         latestResponseTimestamp = responseTimestamp;
-        latestResponseIsStructuredCritique = isStructuredCritique(markdown);
+        latestResponseIsStructuredCritique = responseKind === "critique" && isStructuredCritique(markdown);
         latestResponseHasContent = Boolean(markdown && markdown.trim());
         latestResponseNormalized = normalizeForCompare(markdown);
         latestResponseThinkingNormalized = normalizeForCompare(latestResponseThinking);
@@ -19463,7 +19611,7 @@
 
       function applyLatestPayload(payload, options) {
         if (!payload || typeof payload.markdown !== "string") return false;
-        const responseKind = payload.kind === "critique" ? "critique" : "annotation";
+        const responseKind = normalizeHistoryKind(payload.kind);
         handleIncomingResponse(payload.markdown, responseKind, payload.timestamp, payload.thinking, options);
         return true;
       }
@@ -19674,8 +19822,8 @@
           if (!appliedHistory && message.lastResponse && typeof message.lastResponse.markdown === "string") {
             const lastMarkdown = message.lastResponse.markdown;
             const lastResponseKind =
-              message.lastResponse.kind === "critique"
-                ? "critique"
+              typeof message.lastResponse.kind === "string"
+                ? normalizeHistoryKind(message.lastResponse.kind)
                 : (isStructuredCritique(lastMarkdown) ? "critique" : "annotation");
             handleIncomingResponse(lastMarkdown, lastResponseKind, message.lastResponse.timestamp, message.lastResponse.thinking);
           }
@@ -19919,7 +20067,7 @@
           const responseKind =
             typeof message.kind === "string"
               ? message.kind
-              : (pendingKind === "critique" ? "critique" : "annotation");
+              : normalizeHistoryKind(pendingKind);
 
           stickyStudioKind = responseKind;
           pendingRequestId = null;
@@ -19944,6 +20092,8 @@
 
           if (responseKind === "critique") {
             setStatus("Critique ready.", "success");
+          } else if (responseKind === "show-me") {
+            setStatus("Visual explanation ready.", "success");
           } else if (responseKind === "direct") {
             setStatus("Model response ready.", "success");
           } else {
@@ -19970,7 +20120,7 @@
 
           if (typeof message.markdown === "string") {
             const payload = {
-              kind: message.kind === "critique" ? "critique" : "annotation",
+              kind: normalizeHistoryKind(message.kind),
               markdown: message.markdown,
               thinking: typeof message.thinking === "string" ? message.thinking : null,
               timestamp: message.timestamp,
@@ -20909,6 +21059,7 @@
           }
         }
         updateEditorSelectionCommentUi();
+        syncShowMeButton();
       });
 
       sourceTextEl.addEventListener("keyup", () => {
@@ -20987,20 +21138,94 @@
         }
       });
 
+      function submitStudioShowMe(target) {
+        const focus = getStudioShowMeFocus(target);
+        if (!focus) {
+          setStatus("That explanation source is no longer displayed.", "warning");
+          syncShowMeButton();
+          return;
+        }
+        const requestId = beginUiAction("show-me");
+        if (!requestId) return;
+        closeStudioUiRefreshMenus();
+
+        const sent = sendMessage({
+          type: "show_me_request",
+          requestId,
+          sourceKind: focus.sourceKind,
+          sourceLabel: focus.sourceLabel,
+          sourceText: focus.sourceText,
+        });
+
+        if (!sent) {
+          pendingRequestId = null;
+          pendingKind = null;
+          setBusy(false);
+        }
+      }
+
+      if (showMeBtn) {
+        showMeBtn.addEventListener("click", () => {
+          if (getAbortablePendingKind() === "show-me") {
+            requestCancelForPendingRequest("show-me");
+            return;
+          }
+          submitStudioShowMe("editor");
+        });
+      }
+
+      if (showMeResponseBtn) {
+        showMeResponseBtn.addEventListener("click", () => {
+          if (getAbortablePendingKind() === "show-me") return;
+          submitStudioShowMe("response");
+        });
+      }
+
       if (quizBtn) {
         quizBtn.addEventListener("click", () => {
           openQuizOverlay();
         });
       }
 
-      loadResponseBtn.addEventListener("click", () => {
+      function loadSelectedResponseIntoEditor(options) {
         if (!latestResponseMarkdown.trim()) {
           setStatus("No response available yet.", "warning");
-          return;
+          return false;
+        }
+        const prepareForAnnotation = Boolean(options && options.annotate);
+        const currentEditorText = String(sourceTextEl.value || "");
+        const replacingEditedResponse = prepareForAnnotation
+          && sourceState.source === "last-response"
+          && Boolean(currentEditorText.trim())
+          && normalizeForCompare(currentEditorText) !== latestResponseNormalized;
+        if (
+          replacingEditedResponse
+          && !window.confirm("Replace your edited response with a fresh copy? Existing edits and annotations will be lost.")
+        ) {
+          setStatus("Kept the current editor text.");
+          return false;
         }
         setEditorText(latestResponseMarkdown, { preserveScroll: false, preserveSelection: false });
         setSourceState({ source: "last-response", label: "last model response", path: null });
+        if (prepareForAnnotation) {
+          if (editorView !== "markdown") setEditorView("markdown");
+          exitPaneFocus();
+          setRightView("editor-preview");
+          setActivePane("left");
+          window.setTimeout(focusSourceTextNoScroll, 0);
+          setStatus("Response loaded and Editor Preview opened for annotation.", "success");
+          return true;
+        }
         setStatus("Loaded response into editor.", "success");
+        return true;
+      }
+
+      loadResponseBtn.addEventListener("click", () => {
+        loadSelectedResponseIntoEditor();
+      });
+
+      annotateResponseBtn.addEventListener("click", () => {
+        loadSelectedResponseIntoEditor({ annotate: true });
       });
 
       loadCritiqueNotesBtn.addEventListener("click", () => {
@@ -21892,13 +22117,26 @@
       setAnnotationsEnabled(initialAnnotationsEnabled, { silent: true });
       setReplSendMode(replSendMode);
 
-      const persistedWorkspaceState = readPersistedWorkspaceState();
+      const sessionWorkspaceState = readPersistedWorkspaceState();
+      const serverWorkspaceRecovery = await readServerWorkspaceRecoveryState();
+      workspaceServerPersistenceBlocked = serverWorkspaceRecovery.status === "unavailable";
+      const serverWorkspaceState = serverWorkspaceRecovery.state;
+      lastWorkspacePersistenceSavedAt = Math.max(
+        lastWorkspacePersistenceSavedAt,
+        getWorkspaceStateSavedAt(sessionWorkspaceState),
+        getWorkspaceStateSavedAt(serverWorkspaceState),
+      );
+      const persistedWorkspaceState = chooseNewestRestorableWorkspaceState([
+        sessionWorkspaceState,
+        serverWorkspaceState,
+      ]);
       applyPersistedWorkspaceState(persistedWorkspaceState);
 
       setEditorView(editorView);
       setRightView(rightView);
       renderSourcePreview();
       workspacePersistenceReady = true;
+      persistWorkspaceStateNow({ skipServer: serverWorkspaceRecovery.status === "unavailable" });
       if (workspaceRestoredFromBrowser) {
         setStatus("Restored editor workspace from this browser tab. Use Reset editor to discard it.", "success");
       }