pi-studio 0.5.59 → 0.6.0

package/CHANGELOG.md

@@ -4,6 +4,19 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.6.0] — 2026-04-27
+
+### Added
+- The comments rail now includes **Comments → prompt**, which turns non-empty local comments into an editor prompt with line anchors and file labels when available.
+
+### Changed
+- The refreshed Studio layout is now the default, with the classic layout still available via the footer UI switch or `?uiRefresh=0`.
+- Working-view tool output now replaces image/base64 payloads with compact placeholders instead of dumping raw image data.
+
+### Fixed
+- Queued steering now updates Studio's active effective-prompt metadata so response history and prompt loading reflect the original run plus steering messages.
+- Newly arrived responses now force the right response pane to reset to the top, while editor-preview/document views still preserve scroll.
+
 ## [0.5.59] — 2026-04-27
 
 ### Added

package/client/studio-client.js

@@ -132,6 +132,7 @@
       const reviewNotesListEl = document.getElementById("reviewNotesList");
       const reviewNotesEmptyStateEl = document.getElementById("reviewNotesEmptyState");
       const reviewNotesAddBtn = document.getElementById("reviewNotesAddBtn");
+      const reviewNotesPromptBtn = document.getElementById("reviewNotesPromptBtn");
       const reviewNotesInlineAllBtn = document.getElementById("reviewNotesInlineAllBtn");
       const reviewNotesDeleteAllBtn = document.getElementById("reviewNotesDeleteAllBtn");
       const reviewNotesCloseBtn = document.getElementById("reviewNotesCloseBtn");
@@ -674,21 +675,21 @@
         const queryValue = initialQueryParams.has("uiRefresh")
           ? initialQueryParams.get("uiRefresh")
           : (initialQueryParams.has("studioUiRefresh") ? initialQueryParams.get("studioUiRefresh") : null);
-        const isTruthy = (value) => ["1", "true", "yes", "on", "v2", "refresh"].indexOf(normalize(value)) !== -1;
-        const isFalsey = (value) => ["0", "false", "no", "off"].indexOf(normalize(value)) !== -1;
+        const isTruthy = (value) => ["1", "true", "yes", "on", "v2", "refresh", "fresh"].indexOf(normalize(value)) !== -1;
+        const isFalsey = (value) => ["0", "false", "no", "off", "classic"].indexOf(normalize(value)) !== -1;
         if (queryValue !== null) {
-          const enabled = isTruthy(queryValue) || (!isFalsey(queryValue) && normalize(queryValue) !== "");
+          const normalizedQuery = normalize(queryValue);
+          const enabled = isTruthy(queryValue) || (!isFalsey(queryValue) && normalizedQuery !== "");
           try {
-            if (enabled) window.localStorage && window.localStorage.setItem(STUDIO_UI_REFRESH_STORAGE_KEY, "1");
-            else window.localStorage && window.localStorage.removeItem(STUDIO_UI_REFRESH_STORAGE_KEY);
+            window.localStorage && window.localStorage.setItem(STUDIO_UI_REFRESH_STORAGE_KEY, enabled ? "1" : "0");
           } catch {}
           return enabled;
         }
         try {
-          return Boolean(window.localStorage && window.localStorage.getItem(STUDIO_UI_REFRESH_STORAGE_KEY) === "1");
-        } catch {
-          return false;
-        }
+          const stored = window.localStorage ? window.localStorage.getItem(STUDIO_UI_REFRESH_STORAGE_KEY) : null;
+          if (stored !== null) return stored !== "0" && !isFalsey(stored);
+        } catch {}
+        return true;
       }
 
       function makeStudioUiRefreshElement(tagName, className, text) {
@@ -841,8 +842,7 @@
 
       function setStudioUiRefreshPreference(enabled) {
         try {
-          if (enabled) window.localStorage && window.localStorage.setItem(STUDIO_UI_REFRESH_STORAGE_KEY, "1");
-          else window.localStorage && window.localStorage.removeItem(STUDIO_UI_REFRESH_STORAGE_KEY);
+          window.localStorage && window.localStorage.setItem(STUDIO_UI_REFRESH_STORAGE_KEY, enabled ? "1" : "0");
         } catch {}
         try {
           const url = new URL(window.location.href);
@@ -855,7 +855,7 @@
 
       function setupStudioUiRefreshToggleButton() {
         if (!footerMetaEl || document.getElementById("studioUiRefreshToggleBtn")) return;
-        const button = makeStudioUiRefreshElement("button", "footer-compact-btn studio-ui-refresh-toggle", studioUiRefreshEnabled ? "UI: Refresh" : "UI: Classic");
+        const button = makeStudioUiRefreshElement("button", "footer-compact-btn studio-ui-refresh-toggle", studioUiRefreshEnabled ? "UI: Fresh" : "UI: Classic");
         button.id = "studioUiRefreshToggleBtn";
         button.type = "button";
         button.title = studioUiRefreshEnabled
@@ -1265,7 +1265,24 @@
         }
       }
 
-      function formatContextUsageText() {
+      function formatCompactNumber(value) {
+        if (typeof value !== "number" || !Number.isFinite(value)) return "?";
+        const sign = value < 0 ? "-" : "";
+        const abs = Math.abs(value);
+        if (abs < 1000) return sign + formatNumber(abs);
+        const units = [
+          { divisor: 1_000_000_000, suffix: "B" },
+          { divisor: 1_000_000, suffix: "M" },
+          { divisor: 1_000, suffix: "k" },
+        ];
+        const unit = units.find((entry) => abs >= entry.divisor) || units[units.length - 1];
+        const scaled = abs / unit.divisor;
+        const decimals = scaled >= 100 ? 0 : 1;
+        return sign + scaled.toFixed(decimals).replace(/\.0$/, "") + unit.suffix;
+      }
+
+      function formatContextUsageText(compact) {
+        const formatContextNumber = compact ? formatCompactNumber : formatNumber;
         const hasWindow = typeof contextWindow === "number" && Number.isFinite(contextWindow) && contextWindow > 0;
         const hasTokens = typeof contextTokens === "number" && Number.isFinite(contextTokens) && contextTokens >= 0;
         let percentValue = typeof contextPercent === "number" && Number.isFinite(contextPercent)
@@ -1280,12 +1297,12 @@
           return "Context: unknown";
         }
         if (!hasTokens && hasWindow) {
-          return "Context: ? / " + formatNumber(contextWindow);
+          return "Context: ? / " + formatContextNumber(contextWindow);
         }
 
-        let text = "Context: " + formatNumber(contextTokens);
+        let text = "Context: " + formatContextNumber(contextTokens);
         if (hasWindow) {
-          text += " / " + formatNumber(contextWindow);
+          text += " / " + formatContextNumber(contextWindow);
         }
         if (percentValue != null && Number.isFinite(percentValue)) {
           const bounded = Math.max(0, Math.min(100, percentValue));
@@ -1515,14 +1532,16 @@
       function updateFooterMeta() {
         const modelText = modelLabel && modelLabel.trim() ? modelLabel.trim() : "none";
         const terminalText = terminalSessionLabel && terminalSessionLabel.trim() ? terminalSessionLabel.trim() : "unknown";
-        const contextText = formatContextUsageText();
+        const contextText = formatContextUsageText(true);
+        const contextTitleText = formatContextUsageText(false);
         const text = "Model: " + modelText + " · Terminal: " + terminalText + " · " + contextText;
+        const titleText = "Model: " + modelText + " · Terminal: " + terminalText + " · " + contextTitleText;
         if (footerMetaTextEl) {
           footerMetaTextEl.textContent = text;
-          footerMetaTextEl.title = text;
+          footerMetaTextEl.title = titleText;
         } else if (footerMetaEl) {
           footerMetaEl.textContent = text;
-          footerMetaEl.title = text;
+          footerMetaEl.title = titleText;
         }
         updateDocumentTitle();
       }
@@ -5750,6 +5769,87 @@
         };
       }
 
+      function getDiffFileLabelForLine(source, lineNumber) {
+        const lines = String(source || "").replace(/\r\n/g, "\n").split("\n");
+        const safeLine = Math.max(1, Math.min(Math.floor(Number(lineNumber) || 1), Math.max(1, lines.length)));
+        let currentFile = "";
+        for (let i = 0; i < safeLine; i += 1) {
+          const line = String(lines[i] || "");
+          const diffMatch = line.match(/^diff --git\s+a\/(.+?)\s+b\/(.+?)\s*$/);
+          if (diffMatch) {
+            currentFile = diffMatch[2] || diffMatch[1] || currentFile;
+            continue;
+          }
+          const plusMatch = line.match(/^\+\+\+\s+(?:b\/)?(.+)\s*$/);
+          if (plusMatch && plusMatch[1] && plusMatch[1] !== "/dev/null") {
+            currentFile = plusMatch[1];
+          }
+        }
+        return currentFile.trim();
+      }
+
+      function getReviewNotePromptFileLabel(note, source) {
+        if (sourceState && sourceState.path) return String(sourceState.path);
+        const bounds = getResolvedReviewNoteLineBounds(note, source);
+        const diffFile = bounds ? getDiffFileLabelForLine(source, bounds.lineStart) : "";
+        if (diffFile) return diffFile;
+        const descriptor = getCurrentStudioDocumentDescriptor();
+        return descriptor && descriptor.fileBacked ? descriptor.label : "";
+      }
+
+      function formatReviewNotePromptLineRange(bounds, note) {
+        const start = bounds ? bounds.lineStart : Math.max(1, Number(note && note.lineStart) || 1);
+        const end = bounds ? bounds.lineEnd : Math.max(start, Number(note && note.lineEnd) || start);
+        return start === end ? "L" + start : ("L" + start + "-L" + end);
+      }
+
+      function buildReviewNotesPrompt() {
+        const source = String(sourceTextEl && sourceTextEl.value ? sourceTextEl.value : "");
+        const notes = getDisplayReviewNotes().filter((note) => String(note && note.text ? note.text : "").trim());
+        if (!notes.length) return "";
+
+        const descriptor = getCurrentStudioDocumentDescriptor();
+        const documentLabel = descriptor && descriptor.label ? descriptor.label : (sourceState && sourceState.label ? sourceState.label : "Studio document");
+        const parts = [
+          "Please address the following Studio comments. Use the file names and line numbers as anchors. The full document is not included here, only the comments and their anchors.",
+          "Document: " + documentLabel,
+          "",
+          "## Comments",
+        ];
+
+        notes.forEach((note, index) => {
+          const bounds = getResolvedReviewNoteLineBounds(note, source);
+          const fileLabel = getReviewNotePromptFileLabel(note, source);
+          const location = (fileLabel ? (fileLabel + ":") : "") + formatReviewNotePromptLineRange(bounds, note);
+          const comment = String(note && note.text ? note.text : "").trim();
+          const anchor = String(note && (note.selectedDisplayText || note.selectedText) ? (note.selectedDisplayText || note.selectedText) : "")
+            .replace(/\s+/g, " ")
+            .trim();
+          parts.push(
+            "### Comment " + (index + 1) + " — " + location,
+            "",
+            comment,
+          );
+          if (anchor) {
+            parts.push("", "> " + anchor.replace(/\n/g, "\n> "));
+          }
+          parts.push("");
+        });
+
+        return parts.join("\n").replace(/\n{3,}/g, "\n\n").trim() + "\n";
+      }
+
+      function loadReviewNotesPromptIntoEditor() {
+        const prompt = buildReviewNotesPrompt();
+        if (!prompt.trim()) {
+          setStatus("No non-empty comments to load as a prompt.", "warning");
+          return;
+        }
+        setEditorText(prompt, { preserveScroll: false, preserveSelection: false });
+        setSourceState({ source: "blank", label: "comments prompt", path: null });
+        setStatus("Loaded comments prompt into editor.", "success");
+      }
+
       function buildReviewNoteLineMap(text) {
         const source = String(text || "");
         const lineMap = new Map();
@@ -8573,12 +8673,19 @@
               ? "Select preview text and use Comment for a local preview-anchored comment."
               : "Switch to Editor (Raw) to comment on the current line.");
         }
+        if (reviewNotesPromptBtn) {
+          const promptCandidates = reviewNotes.filter((note) => String(note && note.text ? note.text : "").trim());
+          reviewNotesPromptBtn.disabled = uiBusy || promptCandidates.length === 0;
+          reviewNotesPromptBtn.title = promptCandidates.length > 0
+            ? "Load local comments, line numbers, and file labels into the editor as a prompt."
+            : "No non-empty local comments to load as a prompt.";
+        }
         if (reviewNotesInlineAllBtn) {
           const currentText = String(sourceTextEl && sourceTextEl.value ? sourceTextEl.value : "");
           const toggleCandidates = getDisplayReviewNotes().filter((note) => getReviewNoteInlineState(note, currentText).canToggle);
           const allInline = toggleCandidates.length > 0 && toggleCandidates.every((note) => getReviewNoteInlineState(note, currentText).exists);
           reviewNotesInlineAllBtn.disabled = uiBusy || toggleCandidates.length === 0;
-          reviewNotesInlineAllBtn.textContent = allInline ? "All inline: On" : "All inline: Off";
+          reviewNotesInlineAllBtn.textContent = allInline ? "Inline: On" : "Inline: Off";
           reviewNotesInlineAllBtn.setAttribute("aria-pressed", allInline ? "true" : "false");
           reviewNotesInlineAllBtn.title = allInline
             ? "Inline annotations derived from all non-empty comments are currently on. Click to remove them."
@@ -9705,6 +9812,7 @@
           setBusy(false);
           setWsState("Ready");
 
+          pendingResponseScrollReset = true;
           let appliedFromHistory = false;
           if (Array.isArray(message.responseHistory)) {
             appliedFromHistory = setResponseHistory(message.responseHistory, {
@@ -9733,6 +9841,9 @@
           if (pendingRequestId) return;
 
           const hasHistory = Array.isArray(message.responseHistory);
+          if (followLatest) {
+            pendingResponseScrollReset = true;
+          }
           if (hasHistory) {
             setResponseHistory(message.responseHistory, {
               autoSelectLatest: followLatest,
@@ -9756,7 +9867,7 @@
               return;
             }
 
-            if (!hasHistory && applyLatestPayload(payload)) {
+            if (!hasHistory && applyLatestPayload(payload, { resetScroll: true })) {
               queuedLatestResponse = null;
               updateResultActionButtons();
               setStatus("Updated from latest response.", "success");
@@ -10926,6 +11037,12 @@
         });
       }
 
+      if (reviewNotesPromptBtn) {
+        reviewNotesPromptBtn.addEventListener("click", () => {
+          loadReviewNotesPromptIntoEditor();
+        });
+      }
+
       if (reviewNotesInlineAllBtn) {
         reviewNotesInlineAllBtn.addEventListener("click", () => {
           toggleAllReviewNotesInlineAnnotations();

package/client/studio.css

@@ -2113,7 +2113,13 @@
 
     .review-notes-dock-footer .scratchpad-actions {
       width: 100%;
-      justify-content: space-between;
+      gap: 6px;
+      justify-content: flex-end;
+    }
+
+    .review-notes-dock-footer .scratchpad-actions button {
+      padding: 5px 7px;
+      font-size: 11px;
     }
 
     .outline-list {
@@ -2315,48 +2321,48 @@
       }
     }
 
-    /* Opt-in editor-side layout refresh prototype. Enabled with ?uiRefresh=1 or localStorage piStudio.uiRefresh=1. */
+    /* Default refreshed Studio layout. Classic layout remains available with ?uiRefresh=0 or the footer UI switch. */
     body.studio-ui-refresh {
-      font-size: 14px;
+      font-size: 13px;
     }
 
     body.studio-ui-refresh > header {
-      padding: 9px 14px;
-      gap: 10px;
+      padding: 8px 12px;
+      gap: 9px;
     }
 
     body.studio-ui-refresh h1 {
-      font-size: 17px;
+      font-size: 16px;
     }
 
     body.studio-ui-refresh .app-logo {
-      font-size: 20px;
+      font-size: 18px;
     }
 
     body.studio-ui-refresh .app-subtitle {
-      font-size: 11px;
+      font-size: 10px;
     }
 
     body.studio-ui-refresh > header .controls {
-      gap: 6px;
+      gap: 5px;
     }
 
     body.studio-ui-refresh > header button,
     body.studio-ui-refresh > header .file-label,
     body.studio-ui-refresh #responseActions button,
     body.studio-ui-refresh #responseActions select {
-      padding: 6px 8px;
-      font-size: 13px;
+      padding: 5px 7px;
+      font-size: 12px;
     }
 
     body.studio-ui-refresh main {
-      gap: 10px;
-      padding: 10px;
+      gap: 9px;
+      padding: 9px;
     }
 
     body.studio-ui-refresh footer {
-      padding: 8px 10px;
-      font-size: 12px;
+      padding: 7px 9px;
+      font-size: 11px;
     }
 
     .studio-ui-refresh-toggle {
@@ -2378,9 +2384,9 @@
       position: relative;
       z-index: 30;
       display: grid;
-      gap: 7px;
+      gap: 6px;
       background: transparent;
-      padding: 8px 10px 7px;
+      padding: 7px 9px 6px;
       overflow: visible;
     }
 
@@ -2402,7 +2408,7 @@
     body.studio-ui-refresh .studio-refresh-action-line {
       display: flex;
       align-items: center;
-      gap: 7px;
+      gap: 6px;
       min-width: 0;
       flex-wrap: wrap;
     }
@@ -2412,7 +2418,7 @@
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto;
       align-items: center;
-      gap: 10px;
+      gap: 9px;
       min-width: 0;
     }
 
@@ -2420,8 +2426,8 @@
       display: grid;
       grid-template-columns: auto minmax(0, 1fr);
       align-items: center;
-      column-gap: 10px;
-      row-gap: 6px;
+      column-gap: 9px;
+      row-gap: 5px;
     }
 
     body.studio-ui-refresh .studio-refresh-title-group,
@@ -2437,7 +2443,7 @@
     }
 
     body.studio-ui-refresh .studio-refresh-title-group {
-      gap: 3px;
+      gap: 2px;
     }
 
     body.studio-ui-refresh .studio-refresh-pane-tools {
@@ -2448,15 +2454,15 @@
     body.studio-ui-refresh .studio-refresh-sep {
       display: inline-block;
       width: 1px;
-      height: 18px;
+      height: 16px;
       background: var(--border-muted);
       margin: 0 1px;
       flex: 0 0 1px;
     }
 
     body.studio-ui-refresh .studio-refresh-icon {
-      width: 17px;
-      height: 17px;
+      width: 15px;
+      height: 15px;
       stroke: currentColor;
       stroke-width: 1.85;
       stroke-linecap: round;
@@ -2473,7 +2479,7 @@
     body.studio-ui-refresh .studio-refresh-toolbar select {
       border-color: transparent;
       background: transparent;
-      font-size: 14px;
+      font-size: 13px;
     }
 
     body.studio-ui-refresh #leftSectionHeader select:hover,
@@ -2487,7 +2493,7 @@
 
     body.studio-ui-refresh #leftSectionHeader #editorViewSelect,
     body.studio-ui-refresh #rightSectionHeader #rightViewSelect {
-      font-size: 15px;
+      font-size: 14px;
       font-weight: 750;
       padding: 3px 5px;
       max-width: 230px;
@@ -2495,7 +2501,7 @@
 
     body.studio-ui-refresh .studio-refresh-static-title {
       color: var(--text);
-      font-size: 15px;
+      font-size: 14px;
       font-weight: 700;
       padding: 3px 5px;
       max-width: 230px;
@@ -2504,9 +2510,9 @@
 
     body.studio-ui-refresh #leftFocusBtn,
     body.studio-ui-refresh #rightFocusBtn {
-      width: 32px;
-      min-width: 32px;
-      min-height: 32px;
+      width: 29px;
+      min-width: 29px;
+      min-height: 29px;
       padding: 0;
       color: var(--muted);
       align-items: center;
@@ -2518,8 +2524,8 @@
     body.studio-ui-refresh #resourceDirLabel {
       border-color: transparent;
       background: transparent;
-      padding: 4px 6px;
-      font-size: 14px;
+      padding: 3px 5px;
+      font-size: 13px;
       border-radius: 8px;
     }
 
@@ -2548,11 +2554,11 @@
     body.studio-ui-refresh #syncBadge {
       display: inline-flex;
       align-items: center;
-      gap: 6px;
-      min-height: 26px;
+      gap: 5px;
+      min-height: 24px;
       border: 0;
       border-radius: 999px;
-      padding: 3px 9px;
+      padding: 2px 8px;
       background: var(--panel-2);
       color: var(--muted);
       opacity: 1;
@@ -2564,8 +2570,8 @@
 
     body.studio-ui-refresh #syncBadge::before {
       content: "";
-      width: 7px;
-      height: 7px;
+      width: 6px;
+      height: 6px;
       border-radius: 999px;
       background: var(--success, #22c55e);
       box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #22c55e) 14%, transparent);
@@ -2577,8 +2583,8 @@
     body.studio-ui-refresh #exportPdfBtn,
     body.studio-ui-refresh .studio-refresh-tool-tab {
       font-weight: 500;
-      padding: 6px 9px;
-      border-radius: 9px;
+      padding: 5px 8px;
+      border-radius: 8px;
     }
 
     body.studio-ui-refresh #exportPdfBtn {
@@ -2611,33 +2617,99 @@
     }
 
     body.studio-ui-refresh .source-body {
-      padding: 8px;
+      padding: 7px;
+    }
+
+    body.studio-ui-refresh textarea {
+      font-size: 12px;
+      line-height: 1.42;
+    }
+
+    body.studio-ui-refresh .editor-highlight,
+    body.studio-ui-refresh .editor-line-number-measure {
+      font-size: 12px;
+      line-height: 1.42;
+    }
+
+    body.studio-ui-refresh #sourceText,
+    body.studio-ui-refresh .editor-highlight {
+      padding: 9px 9px 9px calc(9px + var(--editor-review-note-gutter-width) + var(--editor-line-number-gutter-width));
+    }
+
+    body.studio-ui-refresh .editor-line-number-gutter-content {
+      padding: 9px 7px 9px 0;
+      font-size: 11px;
+      line-height: 1.42;
+    }
+
+    body.studio-ui-refresh .editor-review-note-gutter-content {
+      padding: 9px 4px;
+    }
+
+    body.studio-ui-refresh .panel-scroll {
+      padding: 11px;
+      line-height: 1.48;
+      font-size: 13px;
+    }
+
+    body.studio-ui-refresh .rendered-markdown {
+      line-height: 1.52;
+      font-size: 13.5px;
+    }
+
+    body.studio-ui-refresh .plain-markdown,
+    body.studio-ui-refresh .response-markdown-highlight {
+      font-size: 12px;
+      line-height: 1.42;
+    }
+
+    body.studio-ui-refresh .rendered-markdown pre {
+      padding: 11px 13px;
+    }
+
+    body.studio-ui-refresh .trace-panel,
+    body.studio-ui-refresh .trace-card,
+    body.studio-ui-refresh .trace-toolbar,
+    body.studio-ui-refresh .trace-summary,
+    body.studio-ui-refresh .trace-controls,
+    body.studio-ui-refresh .trace-card-header {
+      gap: 7px;
+    }
+
+    body.studio-ui-refresh .trace-card {
+      padding: 9px 11px;
+    }
+
+    body.studio-ui-refresh .trace-output {
+      padding: 9px 10px;
+      font-size: 12px;
+      line-height: 1.42;
     }
 
     body.studio-ui-refresh .studio-refresh-toolbar {
       position: relative;
-      padding: 9px 12px 10px;
+      padding: 8px 10px 9px;
       overflow: visible;
     }
 
     body.studio-ui-refresh .studio-refresh-toolbar-main {
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto;
-      gap: 12px;
+      gap: 10px;
       align-items: start;
       min-width: 0;
     }
 
     body.studio-ui-refresh .studio-refresh-toolbar-actions {
       display: grid;
-      gap: 7px;
+      gap: 6px;
       justify-items: start;
       min-width: 0;
     }
 
     body.studio-ui-refresh .studio-refresh-toolbar-state {
       display: grid;
-      gap: 7px;
+      gap: 6px;
       justify-items: end;
       align-content: start;
       min-width: max-content;
@@ -2646,18 +2718,18 @@
     body.studio-ui-refresh .studio-refresh-chip {
       display: inline-flex;
       align-items: center;
-      gap: 6px;
-      border-radius: 9px;
+      gap: 5px;
+      border-radius: 8px;
       color: var(--text);
       white-space: nowrap;
-      padding: 6px 9px;
-      font-size: 14px;
+      padding: 5px 8px;
+      font-size: 13px;
     }
 
     body.studio-ui-refresh .studio-refresh-chip::after {
       content: "⌄";
       color: var(--muted);
-      font-size: 15px;
+      font-size: 14px;
       line-height: 1;
       transform: translateY(-1px);
     }
@@ -2749,27 +2821,24 @@
     }
 
     body.studio-ui-refresh #copyDraftBtn:only-child {
-      min-height: 32px;
-      padding: 5px 9px;
+      min-height: 29px;
+      padding: 4px 8px;
     }
 
     body.studio-ui-refresh #sendRunBtn,
     body.studio-ui-refresh #queueSteerBtn,
     body.studio-ui-refresh #loadResponseBtn:not([hidden]) {
-      height: 30px;
-      min-height: 30px;
-      padding: 4px 10px;
-      font-size: 13px;
+      height: 28px;
+      min-height: 28px;
+      padding: 4px 9px;
+      font-size: 12px;
       line-height: 1.2;
       border-radius: 8px;
     }
 
-    body.studio-ui-refresh #sendRunBtn {
-      min-width: 9.2rem;
-    }
-
+    body.studio-ui-refresh #sendRunBtn,
     body.studio-ui-refresh #queueSteerBtn {
-      min-width: auto;
+      min-width: 8.6rem;
     }
 
     body.studio-ui-refresh #queueSteerBtn:not(:disabled) {

package/index.ts

@@ -5764,34 +5764,74 @@ function createEmptyStudioTraceState(): StudioTraceState {
 	};
 }
 
+function sanitizeStudioTraceOutputText(text: string): string {
+	return String(text || "")
+		.replace(/data:image\/([a-zA-Z0-9.+-]+);base64,[A-Za-z0-9+/=\r\n]+/g, (_match, subtype: string) => `[Image: image/${subtype || "unknown"} data omitted]`)
+		.replace(/(\"(?:data|image|base64|content)\"\s*:\s*\")[A-Za-z0-9+/=]{1000,}(\")/g, "$1[base64 data omitted]$2")
+		.replace(/\b[A-Za-z0-9+/]{3000,}={0,2}\b/g, "[base64 data omitted]");
+}
+
+function isStudioTraceImageBlock(block: unknown): boolean {
+	if (!block || typeof block !== "object") return false;
+	const payload = block as Record<string, unknown>;
+	const type = typeof payload.type === "string" ? payload.type.toLowerCase() : "";
+	if (type.includes("image")) return true;
+	const mime = typeof payload.mimeType === "string"
+		? payload.mimeType
+		: (typeof payload.media_type === "string" ? payload.media_type : "");
+	if (mime.toLowerCase().startsWith("image/")) return true;
+	const source = payload.source && typeof payload.source === "object" ? payload.source as Record<string, unknown> : null;
+	const sourceMime = source && typeof source.media_type === "string" ? source.media_type : "";
+	return sourceMime.toLowerCase().startsWith("image/");
+}
+
+function describeStudioTraceImageBlock(block: unknown): string {
+	const payload = (block && typeof block === "object") ? block as Record<string, unknown> : {};
+	const source = payload.source && typeof payload.source === "object" ? payload.source as Record<string, unknown> : null;
+	const mime = typeof payload.mimeType === "string"
+		? payload.mimeType
+		: (typeof payload.media_type === "string"
+			? payload.media_type
+			: (source && typeof source.media_type === "string" ? source.media_type : "image"));
+	return `[Image: ${mime || "image"} output omitted from Working view]`;
+}
+
+function stringifyStudioTraceObject(value: unknown): string {
+	try {
+		return sanitizeStudioTraceOutputText(JSON.stringify(value, (_key, item) => {
+			if (typeof item === "string") {
+				if (/^data:image\//i.test(item)) return "[image data URI omitted]";
+				if (/^[A-Za-z0-9+/=]{1000,}$/.test(item)) return "[base64 data omitted]";
+			}
+			return item;
+		}, 2));
+	} catch {
+		return sanitizeStudioTraceOutputText(String(value));
+	}
+}
+
 function formatStudioTraceOutput(result: unknown): string {
 	if (result == null) return "";
-	if (typeof result === "string") return result;
+	if (typeof result === "string") return sanitizeStudioTraceOutputText(result);
 	if (Array.isArray(result)) {
 		return result.map((item) => formatStudioTraceOutput(item)).filter(Boolean).join("\n");
 	}
 	if (typeof result === "object") {
+		if (isStudioTraceImageBlock(result)) return describeStudioTraceImageBlock(result);
 		const payload = result as { content?: Array<{ type?: string; text?: string }> };
 		if (Array.isArray(payload.content)) {
 			return payload.content
 				.map((block) => {
-					if (block && block.type === "text" && typeof block.text === "string") return block.text;
-					try {
-						return JSON.stringify(block, null, 2);
-					} catch {
-						return String(block);
-					}
+					if (isStudioTraceImageBlock(block)) return describeStudioTraceImageBlock(block);
+					if (block && block.type === "text" && typeof block.text === "string") return sanitizeStudioTraceOutputText(block.text);
+					return stringifyStudioTraceObject(block);
 				})
 				.filter(Boolean)
 				.join("\n");
 		}
-		try {
-			return JSON.stringify(result, null, 2);
-		} catch {
-			return String(result);
-		}
+		return stringifyStudioTraceObject(result);
 	}
-	return String(result);
+	return sanitizeStudioTraceOutputText(String(result));
 }
 
 function summarizeStudioTraceToolArgs(toolName: string, args: unknown): string | null {
@@ -6260,8 +6300,9 @@ ${cssVarsBlock}
               <div id="reviewNotesList" class="review-notes-list" aria-live="polite"></div>
               <div class="review-notes-dock-footer">
                 <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="reviewNotesAddBtn" type="button" title="Create a new local comment on the current editor line.">Line</button>
+                  <button id="reviewNotesPromptBtn" type="button" title="Load local comments, line numbers, and file labels into the editor as a prompt.">Comments → prompt</button>
+                  <button id="reviewNotesInlineAllBtn" type="button" title="Toggle inline annotations for all non-empty comments.">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>
@@ -7228,6 +7269,20 @@ export default function (pi: ExtensionAPI) {
 			promptTriggerText: descriptor.promptTriggerText,
 		};
 		queuedStudioDirectRequests.push(queuedRequest);
+
+		// Steering is delivered into the currently running Studio turn rather than
+		// becoming a fully separate visible response request. Keep the active direct
+		// request metadata aligned with the effective prompt chain so persisted
+		// prompt metadata, response history, and "Load effective prompt" all refer
+		// to the original run plus queued steering, not just the original run.
+		if (activeRequest && activeRequest.kind === "direct") {
+			activeRequest.prompt = descriptor.prompt;
+			activeRequest.promptMode = descriptor.promptMode;
+			activeRequest.promptTriggerKind = descriptor.promptTriggerKind;
+			activeRequest.promptSteeringCount = descriptor.promptSteeringCount;
+			activeRequest.promptTriggerText = descriptor.promptTriggerText;
+		}
+
 		return queuedRequest;
 	};
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.5.59",
+  "version": "0.6.0",
   "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",