pi-studio 0.5.57 → 0.5.58

package/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.5.58] — 2026-04-24
+
+### Added
+- Rendered Markdown/editor previews now add small copy controls to code/fenced-content blocks so block contents can be copied directly from the preview.
+- The local comments rail now includes a **Delete all** action for clearing all comments attached to the current document or draft without removing inline `[an: ...]` annotations from the editor text.
+
 ## [0.5.57] — 2026-04-20
 
 ### Changed

package/client/studio-client.js

@@ -133,6 +133,7 @@
       const reviewNotesEmptyStateEl = document.getElementById("reviewNotesEmptyState");
       const reviewNotesAddBtn = document.getElementById("reviewNotesAddBtn");
       const reviewNotesInlineAllBtn = document.getElementById("reviewNotesInlineAllBtn");
+      const reviewNotesDeleteAllBtn = document.getElementById("reviewNotesDeleteAllBtn");
       const reviewNotesCloseBtn = document.getElementById("reviewNotesCloseBtn");
       const reviewNotesDoneBtn = document.getElementById("reviewNotesDoneBtn");
 
@@ -459,16 +460,92 @@
         return "working";
       }
 
+      async function writeTextToClipboard(text) {
+        const content = String(text || "");
+
+        try {
+          await fetchStudioJson("/clipboard", {
+            method: "POST",
+            body: JSON.stringify({ text: content }),
+          });
+          return true;
+        } catch {
+          // Fall back to browser clipboard APIs. The server-side clipboard path
+          // is most reliable for local Studio, but may be unavailable over SSH
+          // or on systems without a clipboard command.
+        }
+
+        // Prefer a copy-event payload first. It runs synchronously inside the
+        // user's click gesture and avoids browser quirks where copying a hidden
+        // textarea reports success but leaves the system clipboard unchanged.
+        if (document.execCommand && typeof document.addEventListener === "function") {
+          let handled = false;
+          const handleCopy = (event) => {
+            if (!event || !event.clipboardData) return;
+            event.clipboardData.setData("text/plain", content);
+            event.preventDefault();
+            handled = true;
+          };
+          try {
+            document.addEventListener("copy", handleCopy, true);
+            const ok = document.execCommand("copy");
+            if (ok && handled) return true;
+          } catch {
+            // Fall through to the other clipboard paths.
+          } finally {
+            document.removeEventListener("copy", handleCopy, true);
+          }
+        }
+
+        if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
+          try {
+            await navigator.clipboard.writeText(content);
+            return true;
+          } catch {
+            // Fall through to the selection-based legacy path.
+          }
+        }
+
+        const textarea = document.createElement("textarea");
+        textarea.value = content;
+        textarea.setAttribute("readonly", "");
+        textarea.style.position = "fixed";
+        textarea.style.top = "0";
+        textarea.style.left = "0";
+        textarea.style.width = "1px";
+        textarea.style.height = "1px";
+        textarea.style.opacity = "0";
+        document.body.appendChild(textarea);
+        const activeEl = document.activeElement;
+        textarea.focus();
+        textarea.select();
+        textarea.setSelectionRange(0, textarea.value.length);
+        let ok = false;
+        try {
+          ok = document.execCommand && document.execCommand("copy");
+        } catch {
+          ok = false;
+        }
+        textarea.remove();
+        if (activeEl && typeof activeEl.focus === "function") {
+          try {
+            activeEl.focus();
+          } catch {
+            // Ignore focus restore failures.
+          }
+        }
+        return Boolean(ok);
+      }
+
       async function copyVisibleWorkingToClipboard() {
         const content = buildVisibleWorkingText();
         if (!content.trim()) {
           setStatus("No visible working details to copy yet.", "warning");
           return;
         }
-        try {
-          await navigator.clipboard.writeText(content);
+        if (await writeTextToClipboard(content)) {
           setStatus("Copied visible working text.", "success");
-        } catch {
+        } else {
           setStatus("Clipboard write failed.", "warning");
         }
       }
@@ -2837,6 +2914,107 @@
         }
       }
 
+      function normalizeCopyableBlockText(text) {
+        return String(text || "").replace(/\r\n/g, "\n").replace(/\u200b/g, "");
+      }
+
+      function getCopyablePreviewBlockText(blockEl) {
+        if (!blockEl || typeof blockEl.querySelectorAll !== "function") return "";
+        if (blockEl.classList && blockEl.classList.contains("preview-code-lines")) {
+          return normalizeCopyableBlockText(
+            Array.from(blockEl.querySelectorAll(".preview-code-line-content"))
+              .map((lineEl) => lineEl && typeof lineEl.textContent === "string" ? lineEl.textContent : "")
+              .join("\n"),
+          );
+        }
+
+        const codeEl = typeof blockEl.querySelector === "function"
+          ? blockEl.querySelector("pre code, code")
+          : null;
+        if (codeEl && typeof codeEl.textContent === "string") {
+          return normalizeCopyableBlockText(codeEl.textContent);
+        }
+
+        const clone = typeof blockEl.cloneNode === "function" ? blockEl.cloneNode(true) : null;
+        if (clone && typeof clone.querySelectorAll === "function") {
+          Array.from(clone.querySelectorAll(".studio-copy-block-btn")).forEach((buttonEl) => {
+            if (buttonEl && buttonEl.parentNode) buttonEl.parentNode.removeChild(buttonEl);
+          });
+          return normalizeCopyableBlockText(clone.textContent || "");
+        }
+
+        return normalizeCopyableBlockText(blockEl.textContent || "");
+      }
+
+      async function handleCopyPreviewBlockButtonClick(event) {
+        const target = event && event.target;
+        const copyBtn = target instanceof Element ? target.closest(".studio-copy-block-btn") : null;
+        if (!copyBtn) return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (typeof event.stopImmediatePropagation === "function") {
+          event.stopImmediatePropagation();
+        }
+
+        const blockEl = copyBtn.closest(".studio-copyable-block");
+        if (!blockEl) {
+          setStatus("Could not find the block to copy.", "warning");
+          return;
+        }
+
+        const text = getCopyablePreviewBlockText(blockEl);
+        if (!text.trim()) {
+          setStatus("Nothing to copy from this block.", "warning");
+          return;
+        }
+
+        if (copyBtn.dataset && copyBtn.dataset.studioCopyBusy === "1") return;
+        if (copyBtn.dataset) copyBtn.dataset.studioCopyBusy = "1";
+        const ok = await writeTextToClipboard(text);
+        if (ok) {
+          setStatus("Copied block to clipboard.", "success");
+        } else {
+          setStatus("Clipboard write failed.", "warning");
+        }
+        if (copyBtn.dataset) {
+          window.setTimeout(() => {
+            if (copyBtn.dataset) copyBtn.dataset.studioCopyBusy = "0";
+          }, 150);
+        }
+      }
+
+      function decorateCopyablePreviewBlocks(targetEl) {
+        if (!targetEl || typeof targetEl.querySelectorAll !== "function") return;
+        const blocks = Array.from(targetEl.querySelectorAll("div.sourceCode, pre, .preview-code-lines"));
+        blocks.forEach((blockEl) => {
+          if (!blockEl || !(blockEl instanceof Element)) return;
+          if (blockEl.dataset && blockEl.dataset.studioCopyDecorated === "1") return;
+          if (blockEl.matches && blockEl.matches("pre") && blockEl.closest("div.sourceCode")) return;
+          if (blockEl.closest && blockEl.closest("button, .studio-copy-block-btn")) return;
+
+          const initialText = getCopyablePreviewBlockText(blockEl);
+          if (!initialText.trim()) return;
+
+          blockEl.classList.add("studio-copyable-block");
+          if (blockEl.dataset) blockEl.dataset.studioCopyDecorated = "1";
+
+          const copyBtn = document.createElement("button");
+          copyBtn.type = "button";
+          copyBtn.className = "studio-copy-block-btn";
+          copyBtn.textContent = "Copy";
+          copyBtn.title = "Copy this block to the clipboard.";
+          copyBtn.setAttribute("aria-label", "Copy this block to the clipboard");
+          copyBtn.addEventListener("pointerdown", (event) => {
+            event.stopPropagation();
+          });
+          copyBtn.addEventListener("mousedown", (event) => {
+            event.stopPropagation();
+          });
+
+          blockEl.appendChild(copyBtn);
+        });
+      }
+
       async function applyRenderedMarkdown(targetEl, markdown, pane, nonce) {
         const previewPrepared = annotationsEnabled
           ? prepareMarkdownForPandocPreview(markdown)
@@ -2879,6 +3057,7 @@
           if (shouldDecoratePreviewComments) {
             decorateRenderedEditorPreviewComments(targetEl, sourceTextEl.value || "");
           }
+          decorateCopyablePreviewBlocks(targetEl);
 
           // Warn if relative images are present but unlikely to resolve (non-file-backed content)
           if (!sourceState.path && !(resourceDirInput && resourceDirInput.value.trim())) {
@@ -4281,6 +4460,7 @@
         targetEl.innerHTML = buildCodePreviewHtmlWithCommentBlocks(text, editorLanguage || "");
         ensurePreviewSelectionActions(targetEl);
         updatePreviewCommentBlocksForElement(targetEl);
+        decorateCopyablePreviewBlocks(targetEl);
         if (pane === "response") {
           applyPendingResponseScrollReset();
           scheduleResponsePaneRepaintNudge();
@@ -8066,6 +8246,12 @@
             ? "Inline annotations derived from all non-empty comments are currently on. Click to remove them."
             : "Inline annotations derived from all non-empty comments are currently off. Click to add them.";
         }
+        if (reviewNotesDeleteAllBtn) {
+          reviewNotesDeleteAllBtn.disabled = uiBusy || !hasNotes;
+          reviewNotesDeleteAllBtn.title = hasNotes
+            ? "Delete all local comments for this document or draft. Existing inline [an: ...] annotations in the editor text are left unchanged."
+            : "No local comments to delete.";
+        }
         if (reviewNotesDoneBtn) {
           reviewNotesDoneBtn.disabled = !isOpen;
         }
@@ -8417,6 +8603,21 @@
         setStatus("Deleted local comment.", "success");
       }
 
+      function deleteAllReviewNotes() {
+        if (!reviewNotes.length) {
+          setStatus("No local comments to delete.", "warning");
+          return;
+        }
+        const count = reviewNotes.length;
+        const confirmed = window.confirm(
+          "Delete all " + count + " local comment" + (count === 1 ? "" : "s") + " for this document?\n\n"
+            + "Existing inline [an: ...] annotations in the editor text will not be removed.",
+        );
+        if (!confirmed) return;
+        setReviewNotes([]);
+        setStatus("Deleted all local comments.", "success");
+      }
+
       function convertReviewNoteToAnnotation(noteId) {
         if (uiBusy) {
           setStatus("Wait until the current Studio action finishes before toggling inline annotation state.", "warning");
@@ -10078,7 +10279,7 @@
         }
 
         try {
-          await navigator.clipboard.writeText(content);
+          await writeTextToClipboard(content);
           setStatus("Copied response text.", "success");
         } catch (error) {
           setStatus("Clipboard write failed.", "warning");
@@ -10302,7 +10503,7 @@
         }
 
         try {
-          await navigator.clipboard.writeText(content);
+          await writeTextToClipboard(content);
           setStatus("Copied editor text.", "success");
         } catch (error) {
           setStatus("Clipboard write failed.", "warning");
@@ -10386,6 +10587,12 @@
         });
       }
 
+      if (reviewNotesDeleteAllBtn) {
+        reviewNotesDeleteAllBtn.addEventListener("click", () => {
+          deleteAllReviewNotes();
+        });
+      }
+
       if (reviewNoteGutterContentEl) {
         reviewNoteGutterContentEl.addEventListener("click", (event) => {
           const target = event.target;
@@ -10397,6 +10604,20 @@
         });
       }
 
+      document.addEventListener("click", (event) => {
+        const target = event.target;
+        const copyBtn = target instanceof Element ? target.closest(".studio-copy-block-btn") : null;
+        if (!copyBtn) return;
+        void handleCopyPreviewBlockButtonClick(event);
+      }, true);
+
+      document.addEventListener("pointerup", (event) => {
+        const target = event.target;
+        const copyBtn = target instanceof Element ? target.closest(".studio-copy-block-btn") : null;
+        if (!copyBtn) return;
+        void handleCopyPreviewBlockButtonClick(event);
+      }, true);
+
       function handlePreviewCommentActionMouseDown(event) {
         const target = event.target;
         const actionBtn = target instanceof Element ? target.closest(".preview-comment-add, .preview-comment-jump, .preview-comment-summary") : null;
@@ -10483,7 +10704,7 @@
           }
 
           try {
-            await navigator.clipboard.writeText(String(scratchpadText || ""));
+            await writeTextToClipboard(String(scratchpadText || ""));
             setStatus("Copied scratchpad text.", "success");
           } catch (error) {
             setStatus("Clipboard write failed.", "warning");

package/client/studio.css

@@ -1133,6 +1133,43 @@
       white-space: inherit;
     }
 
+    .rendered-markdown .studio-copyable-block {
+      position: relative;
+    }
+
+    .rendered-markdown .studio-copy-block-btn {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      z-index: 4;
+      padding: 3px 8px;
+      border-radius: 999px;
+      border: 1px solid var(--border-muted);
+      background: var(--panel);
+      color: var(--muted);
+      font-family: var(--font-ui);
+      font-size: 11px;
+      font-weight: 700;
+      line-height: 1.4;
+      opacity: 0.25;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
+      cursor: pointer;
+      pointer-events: auto;
+      user-select: none;
+    }
+
+    .rendered-markdown .studio-copy-block-btn:active {
+      transform: translateY(1px);
+    }
+
+    .rendered-markdown .studio-copyable-block:hover > .studio-copy-block-btn,
+    .rendered-markdown .studio-copy-block-btn:focus-visible {
+      opacity: 1;
+      color: var(--text);
+      border-color: var(--accent-soft-strong);
+      background: var(--panel);
+    }
+
     .rendered-markdown :not(pre) > code {
       background: rgba(127, 127, 127, 0.13);
       border: 1px solid var(--md-codeblock-border);
@@ -2226,7 +2263,8 @@
       background: var(--panel-2);
     }
 
-    .review-note-delete-btn:not(:disabled) {
+    .review-note-delete-btn:not(:disabled),
+    #reviewNotesDeleteAllBtn:not(:disabled) {
       border-color: var(--warn-border);
       color: var(--warn);
     }

package/index.ts

@@ -4078,6 +4078,86 @@ async function preprocessStudioMermaidForPdf(markdown: string, workDir: string):
 	};
 }
 
+interface StudioClipboardCommand {
+	command: string;
+	args: string[];
+	label: string;
+}
+
+function getStudioClipboardCommands(): StudioClipboardCommand[] {
+	if (process.platform === "darwin") {
+		return [{ command: "pbcopy", args: [], label: "pbcopy" }];
+	}
+	if (process.platform === "win32") {
+		return [{ command: "cmd.exe", args: ["/c", "clip"], label: "clip" }];
+	}
+	return [
+		{ command: "wl-copy", args: [], label: "wl-copy" },
+		{ command: "xclip", args: ["-selection", "clipboard"], label: "xclip" },
+		{ command: "xsel", args: ["--clipboard", "--input"], label: "xsel" },
+	];
+}
+
+function writeStudioClipboardWithCommand(spec: StudioClipboardCommand, text: string): Promise<void> {
+	return new Promise((resolve, reject) => {
+		const child = spawn(spec.command, spec.args, { stdio: ["pipe", "ignore", "pipe"] });
+		const stderrChunks: Buffer[] = [];
+		let settled = false;
+		const timer = setTimeout(() => {
+			if (settled) return;
+			settled = true;
+			try {
+				child.kill();
+			} catch {
+				// Ignore kill failures.
+			}
+			reject(new Error(`${spec.label} timed out.`));
+		}, 3000);
+
+		const fail = (error: Error) => {
+			if (settled) return;
+			settled = true;
+			clearTimeout(timer);
+			reject(error);
+		};
+
+		child.stderr.on("data", (chunk: Buffer | string) => {
+			stderrChunks.push(typeof chunk === "string" ? Buffer.from(chunk) : chunk);
+		});
+
+		child.once("error", (error) => {
+			fail(error instanceof Error ? error : new Error(String(error)));
+		});
+
+		child.once("close", (code) => {
+			if (settled) return;
+			settled = true;
+			clearTimeout(timer);
+			if (code === 0) {
+				resolve();
+				return;
+			}
+			const stderr = Buffer.concat(stderrChunks).toString("utf-8").trim();
+			reject(new Error(`${spec.label} exited with code ${code}${stderr ? `: ${stderr}` : ""}`));
+		});
+
+		child.stdin.end(text, "utf-8");
+	});
+}
+
+async function writeStudioSystemClipboard(text: string): Promise<{ ok: true; method: string } | { ok: false; error: string }> {
+	const errors: string[] = [];
+	for (const spec of getStudioClipboardCommands()) {
+		try {
+			await writeStudioClipboardWithCommand(spec, text);
+			return { ok: true, method: spec.label };
+		} catch (error) {
+			errors.push(`${spec.label}: ${error instanceof Error ? error.message : String(error)}`);
+		}
+	}
+	return { ok: false, error: errors.join("; ") || "No system clipboard command is available." };
+}
+
 async function renderStudioMarkdownWithPandoc(markdown: string, isLatex?: boolean, resourcePath?: string, sourcePath?: string): Promise<string> {
 	const pandocCommand = process.env.PANDOC_PATH?.trim() || "pandoc";
 	const markdownWithoutHtmlComments = isLatex ? markdown : stripStudioMarkdownHtmlComments(markdown);
@@ -6182,6 +6262,7 @@ ${cssVarsBlock}
                 <div class="scratchpad-actions">
                   <button id="reviewNotesAddBtn" type="button" title="Create a new local comment on the current editor line.">Line comment</button>
                   <button id="reviewNotesInlineAllBtn" type="button" title="Toggle inline annotations for all non-empty comments.">All inline: Off</button>
+                  <button id="reviewNotesDeleteAllBtn" type="button" title="Delete all local comments for this document or draft.">Delete all</button>
                   <button id="reviewNotesDoneBtn" type="button" title="Hide the comments rail.">Hide</button>
                 </div>
               </div>
@@ -7902,6 +7983,49 @@ export default function (pi: ExtensionAPI) {
 		respondJson(res, 200, { ok: true });
 	};
 
+	const handleClipboardRequest = async (req: IncomingMessage, res: ServerResponse) => {
+		const method = (req.method ?? "GET").toUpperCase();
+		if (method !== "POST") {
+			res.setHeader("Allow", "POST");
+			respondJson(res, 405, { ok: false, error: "Method not allowed. Use POST." });
+			return;
+		}
+
+		let rawBody = "";
+		try {
+			rawBody = await readRequestBody(req, REQUEST_BODY_MAX_BYTES);
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			const status = message.includes("exceeds") ? 413 : 400;
+			respondJson(res, status, { ok: false, error: message });
+			return;
+		}
+
+		let parsedBody: unknown;
+		try {
+			parsedBody = rawBody ? JSON.parse(rawBody) : {};
+		} catch {
+			respondJson(res, 400, { ok: false, error: "Invalid JSON body." });
+			return;
+		}
+
+		const text =
+			parsedBody && typeof parsedBody === "object" && typeof (parsedBody as { text?: unknown }).text === "string"
+				? (parsedBody as { text: string }).text
+				: null;
+		if (text === null) {
+			respondJson(res, 400, { ok: false, error: "Missing clipboard text in request body." });
+			return;
+		}
+
+		const result = await writeStudioSystemClipboard(text);
+		if (result.ok) {
+			respondJson(res, 200, { ok: true, method: result.method });
+			return;
+		}
+		respondJson(res, 500, { ok: false, error: result.error });
+	};
+
 	const handleReviewNotesRequest = async (req: IncomingMessage, res: ServerResponse, requestUrl: URL) => {
 		const method = (req.method ?? "GET").toUpperCase();
 		if (method === "GET") {
@@ -8240,6 +8364,21 @@ export default function (pi: ExtensionAPI) {
 			return;
 		}
 
+		if (requestUrl.pathname === "/clipboard") {
+			const token = requestUrl.searchParams.get("token") ?? "";
+			if (token !== serverState.token) {
+				respondJson(res, 403, { ok: false, error: "Invalid or expired studio token. Re-run /studio." });
+				return;
+			}
+			void handleClipboardRequest(req, res).catch((error) => {
+				respondJson(res, 500, {
+					ok: false,
+					error: `Clipboard write failed: ${error instanceof Error ? error.message : String(error)}`,
+				});
+			});
+			return;
+		}
+
 		if (requestUrl.pathname === "/render-preview") {
 			const token = requestUrl.searchParams.get("token") ?? "";
 			if (token !== serverState.token) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.5.57",
+  "version": "0.5.58",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, prompt/response history, and live Markdown/LaTeX/code preview",
   "type": "module",
   "license": "MIT",