pi-studio 0.9.18 → 0.9.20

package/client/studio.css

@@ -392,7 +392,6 @@
     }
 
     body[data-studio-mode="editor-only"] #editorViewSelect,
-    body[data-studio-mode="editor-only"] #rightViewSelect,
     body[data-studio-mode="editor-only"] #sendRunBtn,
     body[data-studio-mode="editor-only"] #queueSteerBtn,
     body[data-studio-mode="editor-only"] #sendEditorBtn,
@@ -424,7 +423,7 @@
     }
 
     body[data-studio-mode="editor-only"] #rightSectionHeader .section-header-main::before {
-      content: "Preview";
+      content: "View";
       font-weight: 600;
       font-size: 14px;
     }
@@ -2506,6 +2505,35 @@
       white-space: nowrap;
     }
 
+    .rendered-markdown .studio-html-artifact-comment-btn {
+      flex: 0 0 auto;
+      min-height: 24px;
+      padding: 0 9px;
+      border: 1px solid var(--control-border);
+      border-radius: 999px;
+      background: var(--panel);
+      color: var(--text);
+      font: inherit;
+      font-size: 11px;
+      line-height: 1;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    .rendered-markdown .studio-html-artifact-comment-btn:not(:disabled):hover,
+    .rendered-markdown .studio-html-artifact-comment-btn:focus-visible {
+      background: var(--control-hover-bg, var(--inline-code-bg));
+      border-color: var(--control-border-hover, var(--accent));
+      outline: none;
+    }
+
+    .rendered-markdown .studio-html-artifact-comment-btn.is-active,
+    .rendered-markdown .studio-html-artifact-shell.is-comment-mode .studio-html-artifact-comment-btn.is-active {
+      background: var(--accent-soft);
+      border-color: var(--accent);
+      color: var(--accent);
+    }
+
     .rendered-markdown .studio-html-artifact-zoom-controls {
       flex: 0 0 auto;
       display: inline-flex;
@@ -3153,7 +3181,7 @@
     .trace-card {
       display: flex;
       flex-direction: column;
-      gap: 8px;
+      gap: 10px;
       padding: 10px 12px;
       border: 1px solid var(--panel-border);
       border-radius: 10px;
@@ -3179,10 +3207,23 @@
     .trace-section {
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: 6px;
+      padding: 8px;
+      border: 1px solid var(--border-subtle);
+      border-radius: 10px;
+      background: var(--panel);
+    }
+
+    .trace-section + .trace-section {
+      margin-top: 2px;
     }
 
     .trace-section-label {
+      align-self: flex-start;
+      padding: 2px 7px;
+      border: 1px solid var(--border-subtle);
+      border-radius: 999px;
+      background: var(--panel-2);
       font-size: 11px;
       font-weight: 600;
       color: var(--muted);
@@ -4023,6 +4064,10 @@
       line-height: 1.35;
     }
 
+    body[data-studio-mode="editor-only"] .shortcuts-full-only {
+      display: none !important;
+    }
+
     .scratchpad-textarea {
       width: 100%;
       min-height: 280px;

package/index.ts

@@ -209,6 +209,8 @@ interface InitialStudioDocument {
 	resourceDir?: string;
 }
 
+type PersistedStudioReviewNoteAnchorKind = "source" | "html-selection" | "html-element" | "html-page";
+
 interface PersistedStudioReviewNote {
 	id: string;
 	text: string;
@@ -220,6 +222,11 @@ interface PersistedStudioReviewNote {
 	lineEnd: number;
 	selectedText: string;
 	selectedDisplayText?: string;
+	anchorKind?: PersistedStudioReviewNoteAnchorKind;
+	htmlSelector?: string;
+	htmlTag?: string;
+	htmlLabel?: string;
+	htmlPreviewTitle?: string;
 }
 
 interface StudioPersistentState {
@@ -257,6 +264,7 @@ interface StudioTraceToolEntry {
 	toolName: string;
 	label: string | null;
 	argsSummary: string | null;
+	args: string | null;
 	output: string;
 	images: StudioTraceImage[];
 	startedAt: number;
@@ -429,6 +437,7 @@ interface SaveOverRequestMessage {
 interface RefreshFromDiskRequestMessage {
 	type: "refresh_from_disk_request";
 	requestId: string;
+	path?: string;
 }
 
 interface SendToEditorRequestMessage {
@@ -517,6 +526,7 @@ const MAX_PREPARED_PDF_EXPORTS = 8;
 const MAX_PREPARED_HTML_EXPORTS = 8;
 const STUDIO_TRACE_SNAPSHOT_MAX_ENTRIES = 80;
 const STUDIO_TRACE_SNAPSHOT_MAX_FIELD_CHARS = 20_000;
+const STUDIO_TRACE_TOOL_ARGS_MAX_CHARS = 20_000;
 const STUDIO_TRACE_IMAGE_MAX_COUNT = 8;
 const STUDIO_TRACE_IMAGE_MAX_BASE64_CHARS = 2_500_000;
 const STUDIO_TRACE_SNAPSHOT_MAX_IMAGES = 12;
@@ -722,6 +732,10 @@ function createEmptyStudioPersistentState(): StudioPersistentState {
 	};
 }
 
+function normalizePersistedStudioReviewNoteAnchorKind(value: unknown): PersistedStudioReviewNoteAnchorKind {
+	return value === "html-selection" || value === "html-element" || value === "html-page" ? value : "source";
+}
+
 function normalizePersistedStudioReviewNote(value: unknown): PersistedStudioReviewNote | null {
 	if (!value || typeof value !== "object") return null;
 	const candidate = value as Partial<PersistedStudioReviewNote>;
@@ -756,6 +770,11 @@ function normalizePersistedStudioReviewNote(value: unknown): PersistedStudioRevi
 		lineEnd,
 		selectedText: typeof candidate.selectedText === "string" ? candidate.selectedText : "",
 		selectedDisplayText: typeof candidate.selectedDisplayText === "string" ? candidate.selectedDisplayText : "",
+		anchorKind: normalizePersistedStudioReviewNoteAnchorKind(candidate.anchorKind),
+		htmlSelector: typeof candidate.htmlSelector === "string" ? candidate.htmlSelector : "",
+		htmlTag: typeof candidate.htmlTag === "string" ? candidate.htmlTag : "",
+		htmlLabel: typeof candidate.htmlLabel === "string" ? candidate.htmlLabel : "",
+		htmlPreviewTitle: typeof candidate.htmlPreviewTitle === "string" ? candidate.htmlPreviewTitle : "",
 	};
 }
 
@@ -8140,10 +8159,15 @@ function parseIncomingMessage(data: RawData): IncomingStudioMessage | null {
 		};
 	}
 
-	if (msg.type === "refresh_from_disk_request" && typeof msg.requestId === "string") {
+	if (
+		msg.type === "refresh_from_disk_request"
+		&& typeof msg.requestId === "string"
+		&& (msg.path === undefined || typeof msg.path === "string")
+	) {
 		return {
 			type: "refresh_from_disk_request",
 			requestId: msg.requestId,
+			path: typeof msg.path === "string" ? msg.path : undefined,
 		};
 	}
 
@@ -8567,15 +8591,17 @@ function createStudioTraceSnapshot(source: StudioTraceState): { traceState: Stud
 			};
 		}
 		const argsSummary = truncateStudioTraceSnapshotText(entry.argsSummary ?? "");
+		const args = truncateStudioTraceSnapshotText(entry.args ?? entry.argsSummary ?? "");
 		const output = truncateStudioTraceSnapshotText(entry.output);
 		const snapshotImages = copyStudioTraceImagesForSnapshot(entry.images, imageBudget);
-		truncated = truncated || argsSummary.truncated || output.truncated || snapshotImages.omitted > 0;
+		truncated = truncated || argsSummary.truncated || args.truncated || output.truncated || snapshotImages.omitted > 0;
 		const omittedImageNote = snapshotImages.omitted > 0
 			? `[${snapshotImages.omitted} image preview${snapshotImages.omitted === 1 ? "" : "s"} omitted from saved Working view to keep history bounded.]`
 			: "";
 		return {
 			...entry,
 			argsSummary: argsSummary.text || null,
+			args: args.text || null,
 			output: [output.text, omittedImageNote].filter(Boolean).join("\n"),
 			images: snapshotImages.images,
 		};
@@ -8786,6 +8812,34 @@ function summarizeStudioTraceToolArgs(toolName: string, args: unknown): string |
 	}
 }
 
+function truncateStudioTraceToolArgs(text: string): string {
+	const value = sanitizeStudioTraceOutputText(String(text || "").trim());
+	if (!value || value.length <= STUDIO_TRACE_TOOL_ARGS_MAX_CHARS) return value;
+	const keepHead = Math.max(1_000, Math.floor(STUDIO_TRACE_TOOL_ARGS_MAX_CHARS * 0.65));
+	const keepTail = Math.max(1_000, STUDIO_TRACE_TOOL_ARGS_MAX_CHARS - keepHead - 160);
+	const omitted = value.length - keepHead - keepTail;
+	return `${value.slice(0, keepHead)}\n\n… ${omitted} chars omitted from tool input …\n\n${value.slice(value.length - keepTail)}`;
+}
+
+function formatStudioTraceToolArgs(toolName: string, args: unknown): string | null {
+	const normalizedTool = String(toolName || "").trim().toLowerCase();
+	const payload = (args && typeof args === "object") ? (args as Record<string, unknown>) : {};
+	let raw = "";
+	if (normalizedTool === "bash" && typeof payload.command === "string") {
+		raw = payload.command;
+	} else if ((normalizedTool === "repl_send" || normalizedTool === "studio_repl_send") && typeof payload.code === "string") {
+		raw = payload.code;
+	} else {
+		try {
+			raw = JSON.stringify(args, null, 2);
+		} catch {
+			raw = String(args ?? "");
+		}
+	}
+	const truncated = truncateStudioTraceToolArgs(raw);
+	return truncated ? truncated : null;
+}
+
 function isStudioReplRuntime(value: unknown): value is StudioReplRuntime {
 	return value === "shell"
 		|| value === "python"
@@ -9827,7 +9881,7 @@ ${cssVarsBlock}
       <button id="saveOverBtn" type="button" title="Overwrite current file with editor content. Shortcut: Cmd/Ctrl+S.">Save editor</button>
       <button id="refreshFromDiskBtn" type="button" title="Reload the current file-backed document from disk.">Refresh from disk</button>
       <button id="clearWorkspaceBtn" type="button" title="Clear editor text and reset this tab to a fresh blank draft. Saved files and responses are not changed.">Reset editor</button>
-      <label class="file-label" title="Load a local file into editor text.">Load file content<input id="fileInput" type="file" accept=".md,.markdown,.mdx,.qmd,.js,.mjs,.cjs,.jsx,.ts,.mts,.cts,.tsx,.py,.pyw,.sh,.bash,.zsh,.json,.jsonc,.json5,.rs,.c,.h,.cpp,.cxx,.cc,.hpp,.hxx,.jl,.f90,.f95,.f03,.f,.for,.r,.R,.m,.tex,.latex,.diff,.patch,.java,.go,.rb,.swift,.html,.htm,.css,.xml,.yaml,.yml,.toml,.lua,.txt,.rst,.adoc" /></label>
+      <label class="file-label" title="Import a browser-selected text file into the editor as an unsaved copy. It will not be refreshable from disk until you save it.">Import file copy…<input id="fileInput" type="file" accept=".md,.markdown,.mdx,.qmd,.js,.mjs,.cjs,.jsx,.ts,.mts,.cts,.tsx,.py,.pyw,.sh,.bash,.zsh,.json,.jsonc,.json5,.rs,.c,.h,.cpp,.cxx,.cc,.hpp,.hxx,.jl,.f90,.f95,.f03,.f,.for,.r,.R,.m,.tex,.latex,.diff,.patch,.java,.go,.rb,.swift,.html,.htm,.css,.xml,.yaml,.yml,.toml,.lua,.txt,.rst,.adoc" /></label>
       <button id="loadGitDiffBtn" type="button" title="Load the current git diff from the Studio context into the editor.">Load git diff</button>
       <button id="getEditorBtn" type="button" title="Load the current terminal editor draft into Studio.">Load from pi editor</button>
       <button id="zenModeBtn" class="zen-mode-btn" type="button" title="Hide secondary Studio controls. Shortcut: F9.">Zen</button>
@@ -10004,14 +10058,14 @@ ${cssVarsBlock}
               <div class="scratchpad-header">
                 <div>
                   <h2 id="reviewNotesTitle">Comments</h2>
-                  <p class="scratchpad-description">Local comments for editor text. Stay out of the text, anchored to selections or lines, and can be converted into inline <span class="review-notes-inline-token">[an: ...]</span> annotations.</p>
+                  <p class="scratchpad-description">Local comments for editor text and editor previews. They stay out of the text; source-anchored comments can be converted into inline <span class="review-notes-inline-token">[an: ...]</span> annotations.</p>
                 </div>
                 <button id="reviewNotesCloseBtn" type="button" class="scratchpad-close-btn" aria-label="Hide comments" title="Hide comments">✕</button>
               </div>
               <div class="review-notes-toolbar">
                 <span id="reviewNotesMeta" class="scratchpad-meta">No comments</span>
               </div>
-              <div id="reviewNotesEmptyState" class="review-notes-empty">No comments yet for this document. Select text in <strong>Editor (Raw)</strong> or <strong>Editor (Preview)</strong> and use <em>Comment</em>, or use <em>Line comment</em> in <strong>Editor (Raw)</strong>.</div>
+              <div id="reviewNotesEmptyState" class="review-notes-empty">No comments yet for this document. Select text in <strong>Editor (Raw)</strong> or <strong>Editor (Preview)</strong> and use <em>Comment</em>, use <em>Line comment</em> in <strong>Editor (Raw)</strong>, or use <em>Comment mode</em> in an editor HTML preview.</div>
               <div id="reviewNotesList" class="review-notes-list" aria-live="polite"></div>
               <div class="review-notes-dock-footer">
                 <div class="scratchpad-actions">
@@ -10143,14 +10197,14 @@ ${cssVarsBlock}
           <h3>Editor</h3>
           <dl>
             <div><dt>Cmd/Ctrl+S</dt><dd>Save editor</dd></div>
-            <div><dt>Cmd/Ctrl+Enter</dt><dd>Run editor text, or queue steering during an active run</dd></div>
+            <div class="shortcuts-full-only"><dt>Cmd/Ctrl+Enter</dt><dd>Run editor text, or queue steering during an active run</dd></div>
             <div><dt>Option/Alt+Tab or Cmd/Ctrl+Shift+Space</dt><dd>Suggest a completion at the editor cursor</dd></div>
             <div><dt>Tab</dt><dd>Insert a visible completion suggestion; otherwise indent selected editor text</dd></div>
             <div><dt>Esc</dt><dd>Dismiss a visible completion suggestion, close overlays, exit pane focus, or stop an active request</dd></div>
             <div><dt>Shift+Tab</dt><dd>Unindent selected editor text</dd></div>
           </dl>
         </section>
-        <section class="shortcuts-group">
+        <section class="shortcuts-group shortcuts-full-only">
           <h3>Response</h3>
           <dl>
             <div><dt>Alt/Option+←</dt><dd>Previous response when not editing text</dd></div>
@@ -11040,7 +11094,17 @@ export default function (pi: ExtensionAPI) {
 		const existingId = studioTraceToolEntryIds.get(toolCallId);
 		if (existingId) {
 			const existing = studioTraceState.entries.find((entry) => entry.id === existingId);
-			if (existing && existing.type === "tool") return existing;
+			if (existing && existing.type === "tool") {
+				if (args !== undefined) {
+					existing.toolName = toolName;
+					existing.label = deriveToolActivityLabel(toolName, args);
+					existing.argsSummary = summarizeStudioTraceToolArgs(toolName, args);
+					existing.args = formatStudioTraceToolArgs(toolName, args);
+					existing.updatedAt = Date.now();
+					upsertStudioTraceEntry(existing);
+				}
+				return existing;
+			}
 		}
 		if (studioTraceState.runId == null || studioTraceState.status === "idle") {
 			resetStudioTraceForRun();
@@ -11053,6 +11117,7 @@ export default function (pi: ExtensionAPI) {
 			toolName,
 			label: deriveToolActivityLabel(toolName, args),
 			argsSummary: summarizeStudioTraceToolArgs(toolName, args),
+			args: formatStudioTraceToolArgs(toolName, args),
 			output: "",
 			images: [],
 			startedAt: now,
@@ -11075,6 +11140,8 @@ export default function (pi: ExtensionAPI) {
 		images?: StudioTraceImage[],
 	) => {
 		const entry = ensureStudioTraceToolEntry(toolCallId, toolName, args);
+		if (!entry.argsSummary) entry.argsSummary = summarizeStudioTraceToolArgs(toolName, args);
+		if (!entry.args) entry.args = formatStudioTraceToolArgs(toolName, args);
 		entry.output = output;
 		if (Array.isArray(images)) entry.images = images;
 		entry.status = status;
@@ -12225,16 +12292,18 @@ export default function (pi: ExtensionAPI) {
 				sendToClient(client, { type: "busy", requestId: msg.requestId, message: "Studio is busy." });
 				return;
 			}
-			if (!initialStudioDocument || !initialStudioDocument.path) {
+			const requestedPath = typeof msg.path === "string" && msg.path.trim() ? msg.path.trim() : "";
+			const refreshPath = requestedPath || initialStudioDocument?.path || "";
+			if (!refreshPath) {
 				sendToClient(client, {
 					type: "error",
 					requestId: msg.requestId,
-					message: "Refresh from disk is only available for file-backed documents.",
+					message: "Refresh from disk needs a file path. Use Files → Open here, Files → Open file tab, or /studio-editor-only <path> for a refreshable editor tab.",
 				});
 				return;
 			}
 
-			const refreshed = readStudioFile(initialStudioDocument.path, studioCwd);
+			const refreshed = readStudioFile(refreshPath, studioCwd);
 			if (refreshed.ok === false) {
 				sendToClient(client, {
 					type: "error",
@@ -12244,18 +12313,21 @@ export default function (pi: ExtensionAPI) {
 				return;
 			}
 
-			initialStudioDocument = {
+			const refreshedDocument: InitialStudioDocument = {
 				text: refreshed.text,
 				label: refreshed.label,
 				source: "file",
 				path: refreshed.resolvedPath,
 				resourceDir: dirname(refreshed.resolvedPath),
 			};
+			if (!requestedPath || initialStudioDocument?.path === refreshed.resolvedPath) {
+				initialStudioDocument = refreshedDocument;
+			}
 
-			broadcast({
+			sendToClient(client, {
 				type: "studio_document",
 				requestId: msg.requestId,
-				document: initialStudioDocument,
+				document: refreshedDocument,
 				message: `Reloaded ${refreshed.label} from disk.`,
 			});
 			return;
@@ -13666,7 +13738,9 @@ export default function (pi: ExtensionAPI) {
 		if (!agentBusy) return;
 		const toolName = typeof event.toolName === "string" ? event.toolName : "";
 		const input = (event as { input?: unknown }).input;
+		const toolCallId = typeof event.toolCallId === "string" ? event.toolCallId : "";
 		const label = deriveToolActivityLabel(toolName, input);
+		if (toolCallId) ensureStudioTraceToolEntry(toolCallId, toolName, input);
 		emitDebugEvent("tool_call", { toolName, label, activeRequestId: activeRequest?.id ?? null, activeRequestKind: activeRequest?.kind ?? null });
 		setTerminalActivity("tool", toolName, label);
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.9.18",
+  "version": "0.9.20",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, active quiz, prompt/response history, live previews, and tmux-backed REPL/literate REPL workflows",
   "type": "module",
   "license": "MIT",