pi-studio 0.9.23 → 0.9.25

package/client/studio-client.js

@@ -110,7 +110,6 @@
       const openCompanionBtn = document.getElementById("openCompanionBtn");
       const getEditorBtn = document.getElementById("getEditorBtn");
       const zenModeBtn = document.getElementById("zenModeBtn");
-      const loadGitDiffBtn = document.getElementById("loadGitDiffBtn");
       const sendRunBtn = document.getElementById("sendRunBtn");
       const queueSteerBtn = document.getElementById("queueSteerBtn");
       const sendReplBtn = document.getElementById("sendReplBtn");
@@ -237,6 +236,7 @@
       let sourceResetOriginBtn = null;
       let sourceOpenCurrentFileTabBtn = null;
       let sourceOpenCurrentTextCopyTabBtn = null;
+      let sourceSessionSummaryEl = null;
       let initialDocumentApplied = false;
       function normalizeRightViewValue(nextView) {
         const raw = String(nextView || "").trim();
@@ -248,8 +248,10 @@
               ? "repl"
               : (raw === "files"
                 ? "files"
-                : ((raw === "trace" || raw === "thinking") ? "trace" : "markdown"))));
-        if (isEditorOnlyMode && normalized !== "editor-preview" && normalized !== "files" && normalized !== "repl") {
+                : (raw === "changes"
+                  ? "changes"
+                  : ((raw === "trace" || raw === "thinking") ? "trace" : "markdown")))));
+        if (isEditorOnlyMode && normalized !== "editor-preview" && normalized !== "files" && normalized !== "changes" && normalized !== "repl") {
           return "editor-preview";
         }
         return normalized;
@@ -257,13 +259,13 @@
 
       function syncRightViewModeOptions() {
         if (!rightViewSelect || !rightViewSelect.options) return;
-        const editorOnlyAllowed = new Set(["editor-preview", "files", "repl"]);
+        const editorOnlyAllowed = new Set(["editor-preview", "files", "changes", "repl"]);
         Array.from(rightViewSelect.options).forEach((option) => {
           if (!option) return;
           option.disabled = isEditorOnlyMode && !editorOnlyAllowed.has(option.value);
         });
         rightViewSelect.title = isEditorOnlyMode
-          ? "Editor-only views: editor preview, Files, or REPL. F7 cycles when the right pane is active; Cmd/Ctrl+Alt+P switches directly to Preview."
+          ? "Editor-only views: editor preview, Changes, Files, or REPL. F7 cycles when the right pane is active; Cmd/Ctrl+Alt+P switches directly to Preview."
           : "Right pane view mode. F7 cycles when the right pane is active; Cmd/Ctrl+Alt+P switches directly to Preview.";
       }
 
@@ -296,6 +298,19 @@
       let traceAutoScroll = true;
       let traceRenderRaf = null;
       const traceExpandedOutputs = new Set();
+      let gitChangesState = {
+        status: "idle",
+        requestId: null,
+        content: "",
+        label: "",
+        repoRoot: "",
+        branch: "",
+        hasHead: true,
+        files: [],
+        selectedPath: "",
+        message: "",
+        level: "info",
+      };
       const TRACE_OUTPUT_PREVIEW_MAX_LINES = 50;
       const TRACE_OUTPUT_PREVIEW_MAX_CHARS = 8000;
       const TRACE_IMAGE_SAFE_MIME_TYPES = new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
@@ -2485,9 +2500,19 @@
             });
           });
           appendStudioUiRefreshMenuSection(contextMenu.menu, "Suggestions", [cursorContextBtn, sessionContextBtn]);
+          const statusItems = [];
+          if (!isEditorOnlyMode) {
+            sourceSessionSummaryEl = makeStudioUiRefreshElement("div", "source-badge source-session-summary", "Session tree: branch history follows the current Pi branch. Editor text is independent.");
+            sourceSessionSummaryEl.setAttribute("aria-label", "Pi session tree and editor sync behaviour");
+            sourceSessionSummaryEl.title = "Use /tree in the Pi terminal to navigate branches. Studio updates branch history to match the active branch and leaves editor text unchanged.";
+            statusItems.push(sourceSessionSummaryEl);
+          }
           if (syncBadgeEl) {
             syncBadgeEl.hidden = false;
-            appendStudioUiRefreshMenuSection(contextMenu.menu, "Status", [syncBadgeEl]);
+            statusItems.push(syncBadgeEl);
+          }
+          if (statusItems.length > 0) {
+            appendStudioUiRefreshMenuSection(contextMenu.menu, "Status", statusItems);
           }
         }
 
@@ -3720,12 +3745,12 @@
 
       function triggerResponseHistoryShortcut(action) {
         if (isEditorOnlyMode) {
-          setStatus("Response history is unavailable in editor-only Studio.", "warning");
+          setStatus("Branch history is unavailable in editor-only Studio.", "warning");
           return false;
         }
         const total = Array.isArray(responseHistory) ? responseHistory.length : 0;
         if (total <= 0) {
-          setStatus("No response history available yet.", "warning");
+          setStatus("No branch history available yet.", "warning");
           return false;
         }
         if (action === "previous") {
@@ -4208,7 +4233,7 @@
           ? responseHistoryIndex + 1
           : 0;
         if (historyIndexBadgeEl) {
-          historyIndexBadgeEl.textContent = "History: " + selected + "/" + total;
+          historyIndexBadgeEl.textContent = "Branch history: " + selected + "/" + total;
         }
         if (historyPrevBtn) {
           historyPrevBtn.disabled = total <= 1 || responseHistoryIndex <= 0;
@@ -4267,7 +4292,7 @@
           const item = getSelectedHistoryItem();
           if (item) {
             const responseLabel = item.kind === "critique" ? "critique" : "response";
-            setStatus("Viewing " + responseLabel + " history " + (nextIndex + 1) + "/" + total + ".");
+            setStatus("Viewing " + responseLabel + " in current branch history " + (nextIndex + 1) + "/" + total + ".");
           }
         }
         return applied;
@@ -4337,6 +4362,14 @@
           return;
         }
 
+        if (rightView === "changes") {
+          const count = getGitChangedFiles().length;
+          referenceBadgeEl.textContent = gitChangesState.status === "loading"
+            ? "Changes: loading"
+            : (count ? ("Changes: " + count + " file" + (count === 1 ? "" : "s")) : "Changes: none");
+          return;
+        }
+
         if (rightView === "trace") {
           const state = traceState || createEmptyTraceState();
           const context = traceDisplayContext || {};
@@ -4389,7 +4422,7 @@
         const selected = total > 0 && responseHistoryIndex >= 0 && responseHistoryIndex < total
           ? responseHistoryIndex + 1
           : 0;
-        const historyPrefix = total > 0 ? "Response history " + selected + "/" + total + " · " : "";
+        const historyPrefix = total > 0 ? "Branch history " + selected + "/" + total + " · " : "";
         referenceBadgeEl.textContent = time
           ? historyPrefix + responseLabel + " · " + time
           : historyPrefix + responseLabel;
@@ -7788,6 +7821,7 @@
         critiqueViewEl.addEventListener("click", handleTracePaneClick);
         critiqueViewEl.addEventListener("click", handleReplPaneClick);
         critiqueViewEl.addEventListener("click", handleFilesPaneClick);
+        critiqueViewEl.addEventListener("click", handleGitChangesPaneClick);
         critiqueViewEl.addEventListener("change", handleReplPaneChange);
       }
 
@@ -8984,6 +9018,166 @@
           + "</div>";
       }
 
+      function parseTraceToolArgsObject(inputText) {
+        const value = String(inputText || "").trim();
+        if (!value || (value[0] !== "{" && value[0] !== "[")) return null;
+        try {
+          const parsed = JSON.parse(value);
+          return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : null;
+        } catch {
+          return null;
+        }
+      }
+
+      function countTraceTextLines(text) {
+        const value = String(text || "");
+        return value ? value.split(/\n/).length : 0;
+      }
+
+      function formatTraceTextMetrics(text) {
+        const value = String(text || "");
+        const lines = countTraceTextLines(value);
+        const chars = value.length;
+        return formatCompactNumber(lines) + " line" + (lines === 1 ? "" : "s")
+          + ", " + formatCompactNumber(chars) + " char" + (chars === 1 ? "" : "s");
+      }
+
+      function renderTraceToolField(label, value, className) {
+        const text = String(value || "").trim();
+        if (!text) return "";
+        const extraClass = className ? " " + String(className) : "";
+        return "<div class='trace-tool-field'>"
+          + "<span class='trace-tool-field-label'>" + escapeHtml(label) + "</span>"
+          + "<code class='trace-tool-field-value" + extraClass + "' title='" + escapeHtml(text) + "'>" + escapeHtml(text) + "</code>"
+          + "</div>";
+      }
+
+      function renderTraceRawInputDetails(inputText, outputKey) {
+        const value = String(inputText || "").trim();
+        if (!value) return "";
+        const rawKey = outputKey + ":raw-input";
+        const openAttr = traceExpandedOutputs.has(rawKey) ? " open" : "";
+        return "<details class='trace-tool-details trace-tool-raw-input'" + openAttr + ">"
+          + "<summary>Raw input</summary>"
+          + "<div class='trace-tool-details-body'>"
+          + renderTraceOutput(value, rawKey, { label: "Raw input" })
+          + "</div>"
+          + "</details>";
+      }
+
+      function renderTraceToolTextDetails(summary, text, outputKey, label, options) {
+        const value = String(text || "");
+        const emptyText = options && typeof options.emptyText === "string" ? options.emptyText : "[empty]";
+        const openAttr = traceExpandedOutputs.has(outputKey) ? " open" : "";
+        return "<details class='trace-tool-details" + (options && options.className ? " " + escapeHtml(options.className) : "") + "'" + openAttr + ">"
+          + "<summary>" + escapeHtml(summary) + "</summary>"
+          + "<div class='trace-tool-details-body'>"
+          + renderTraceOutput(value || emptyText, outputKey, { label })
+          + "</div>"
+          + "</details>";
+      }
+
+      function renderTraceEditInput(entry, payload, inputText) {
+        const path = payload && typeof payload.path === "string" ? payload.path : "";
+        const edits = payload && Array.isArray(payload.edits) ? payload.edits : [];
+        const replacements = edits
+          .map((edit, index) => {
+            const item = edit && typeof edit === "object" ? edit : {};
+            return {
+              index,
+              oldText: typeof item.oldText === "string" ? item.oldText : "",
+              newText: typeof item.newText === "string" ? item.newText : "",
+            };
+          })
+          .filter((edit) => edit.oldText || edit.newText);
+        const replacementCount = replacements.length || edits.length;
+        const fields = "<div class='trace-tool-fields'>"
+          + renderTraceToolField("Path", path, "trace-tool-path")
+          + renderTraceToolField("Changes", replacementCount + " replacement" + (replacementCount === 1 ? "" : "s"), "")
+          + "</div>";
+        const changes = replacements.length
+          ? "<div class='trace-tool-change-list'>" + replacements.map((edit, displayIndex) => {
+            const oldMetrics = formatTraceTextMetrics(edit.oldText);
+            const newMetrics = formatTraceTextMetrics(edit.newText);
+            const oldKey = entry.id + ":edit:" + edit.index + ":old";
+            const newKey = entry.id + ":edit:" + edit.index + ":new";
+            const openAttr = traceExpandedOutputs.has(oldKey) || traceExpandedOutputs.has(newKey) ? " open" : "";
+            return "<details class='trace-tool-details trace-tool-change'" + openAttr + ">"
+              + "<summary>Replacement " + escapeHtml(String(displayIndex + 1)) + " · " + escapeHtml(oldMetrics) + " → " + escapeHtml(newMetrics) + "</summary>"
+              + "<div class='trace-tool-change-body'>"
+              + "<div class='trace-tool-change-grid'>"
+              + "<div class='trace-tool-change-column'><div class='trace-tool-code-label'>Old text</div>"
+              + renderTraceOutput(edit.oldText || "[empty]", oldKey, { label: "Old text" })
+              + "</div>"
+              + "<div class='trace-tool-change-column'><div class='trace-tool-code-label'>New text</div>"
+              + renderTraceOutput(edit.newText || "[empty]", newKey, { label: "New text" })
+              + "</div>"
+              + "</div>"
+              + "</div>"
+              + "</details>";
+          }).join("") + "</div>"
+          : "";
+        return "<div class='trace-tool-input trace-tool-input-edit'>"
+          + fields
+          + changes
+          + renderTraceRawInputDetails(inputText, entry.id + ":input")
+          + "</div>";
+      }
+
+      function renderTraceWriteInput(entry, payload, inputText) {
+        const path = payload && typeof payload.path === "string" ? payload.path : "";
+        const content = payload && typeof payload.content === "string" ? payload.content : null;
+        const fields = "<div class='trace-tool-fields'>"
+          + renderTraceToolField("Path", path, "trace-tool-path")
+          + (content !== null ? renderTraceToolField("Content", formatTraceTextMetrics(content), "") : "")
+          + "</div>";
+        const contentDetails = content !== null
+          ? renderTraceToolTextDetails("Content · " + formatTraceTextMetrics(content), content, entry.id + ":write:content", "Content", { className: "trace-tool-content" })
+          : "";
+        return "<div class='trace-tool-input trace-tool-input-write'>"
+          + fields
+          + contentDetails
+          + renderTraceRawInputDetails(inputText, entry.id + ":input")
+          + "</div>";
+      }
+
+      function renderTraceReadInput(entry, payload, inputText) {
+        const path = payload && typeof payload.path === "string" ? payload.path : "";
+        const offset = payload && (typeof payload.offset === "number" || typeof payload.offset === "string") ? String(payload.offset) : "";
+        const limit = payload && (typeof payload.limit === "number" || typeof payload.limit === "string") ? String(payload.limit) : "";
+        const fields = "<div class='trace-tool-fields'>"
+          + renderTraceToolField("Path", path, "trace-tool-path")
+          + renderTraceToolField("Offset", offset ? "line " + offset : "", "")
+          + renderTraceToolField("Limit", limit ? limit + " lines" : "", "")
+          + "</div>";
+        return "<div class='trace-tool-input trace-tool-input-read'>"
+          + fields
+          + renderTraceRawInputDetails(inputText, entry.id + ":input")
+          + "</div>";
+      }
+
+      function renderTraceCommandInput(entry, inputText, label) {
+        const value = String(inputText || "").trim();
+        if (!value) return "";
+        return "<div class='trace-tool-input trace-tool-input-command'>"
+          + "<div class='trace-tool-code-label'>" + escapeHtml(label || "Command") + "</div>"
+          + renderTraceOutput(value, entry.id + ":input", { label: label || "Command" })
+          + "</div>";
+      }
+
+      function renderTraceToolInput(entry) {
+        const inputText = String(entry.args || entry.argsSummary || "").trim();
+        if (!inputText) return "";
+        const toolName = String(entry.toolName || "").trim().toLowerCase();
+        if (toolName === "bash") return renderTraceCommandInput(entry, inputText, "Command");
+        if (toolName === "repl_send" || toolName === "studio_repl_send") return renderTraceCommandInput(entry, inputText, "Code");
+        const payload = parseTraceToolArgsObject(inputText);
+        if (payload && toolName === "edit") return renderTraceEditInput(entry, payload, inputText);
+        if (payload && toolName === "write") return renderTraceWriteInput(entry, payload, inputText);
+        if (payload && toolName === "read") return renderTraceReadInput(entry, payload, inputText);
+        return renderTraceOutput(inputText, entry.id + ":input", { label: "Input" });
+      }
+
       function renderTraceImages(images) {
         const normalizedImages = Array.isArray(images)
           ? images.map((image, index) => normalizeTraceImage(image, index)).filter(Boolean)
@@ -9348,9 +9542,9 @@
           }
 
           const title = entry.label || entry.toolName || "tool";
-          const inputText = entry.args || entry.argsSummary || "";
-          const argsSummary = inputText
-            ? "<div class='trace-section trace-section-input'><div class='trace-section-label'>Input</div>" + renderTraceOutput(inputText, entry.id + ":input", { label: "Input" }) + "</div>"
+          const inputHtml = renderTraceToolInput(entry);
+          const argsSummary = inputHtml
+            ? "<div class='trace-section trace-section-input'><div class='trace-section-label'>Input</div>" + inputHtml + "</div>"
             : "";
           const imageOutput = renderTraceImages(entry.images);
           const outputPieces = [];
@@ -9702,7 +9896,222 @@
         }
       }
 
+      function getGitChangesContext() {
+        return getHtmlPreviewResourceContextOptions();
+      }
+
+      function getGitChangedFiles() {
+        return Array.isArray(gitChangesState.files) ? gitChangesState.files : [];
+      }
+
+      function getSelectedGitChangedFile() {
+        const files = getGitChangedFiles();
+        if (!files.length) return null;
+        const selectedPath = String(gitChangesState.selectedPath || "");
+        return files.find((file) => String(file.path || "") === selectedPath) || files[0] || null;
+      }
+
+      function getGitChangeStatusLabel(status) {
+        if (status === "untracked") return "Untracked";
+        if (status === "added") return "Added";
+        if (status === "deleted") return "Deleted";
+        if (status === "renamed") return "Renamed";
+        if (status === "binary") return "Binary";
+        return "Modified";
+      }
+
+      function getGitChangeStatusIcon(status) {
+        if (status === "untracked") return "??";
+        if (status === "added") return "A";
+        if (status === "deleted") return "D";
+        if (status === "renamed") return "R";
+        if (status === "binary") return "BIN";
+        return "M";
+      }
+
+      function buildGitChangesDiffHtml(diffText) {
+        const lines = String(diffText || "").split("\n");
+        return "<pre class='git-changes-diff'><code>" + lines.map((line) => {
+          let cls = "git-changes-line";
+          if (line.startsWith("+++") || line.startsWith("---") || line.startsWith("diff --git") || line.startsWith("@@")) {
+            cls += " git-changes-line-meta";
+          } else if (line.startsWith("+")) {
+            cls += " git-changes-line-add";
+          } else if (line.startsWith("-")) {
+            cls += " git-changes-line-del";
+          }
+          return "<span class='" + cls + "'>" + escapeHtml(line || " ") + "</span>";
+        }).join("\n") + "</code></pre>";
+      }
+
+      function buildGitChangesPanelHtml() {
+        const files = getGitChangedFiles();
+        const selected = getSelectedGitChangedFile();
+        const isLoading = gitChangesState.status === "loading";
+        const hasError = gitChangesState.status === "error";
+        const label = gitChangesState.label || (files.length ? (files.length + " changed") : "Git changes");
+        const branch = gitChangesState.branch || "";
+        const repoRoot = gitChangesState.repoRoot || "";
+        const subtitleParts = [];
+        subtitleParts.push(label);
+        if (branch) subtitleParts.push((gitChangesState.hasHead === false ? "No commits yet on " : "on ") + branch);
+        const rows = files.length
+          ? files.map((file) => {
+            const path = String(file.path || "");
+            const status = String(file.status || "modified");
+            const isSelected = selected && String(selected.path || "") === path;
+            const stats = (Number(file.additions) || 0) || (Number(file.deletions) || 0)
+              ? "<span class='git-changes-stats'><span class='git-changes-additions'>+" + escapeHtml(String(Number(file.additions) || 0)) + "</span><span class='git-changes-deletions'>−" + escapeHtml(String(Number(file.deletions) || 0)) + "</span></span>"
+              : "";
+            return "<button type='button' class='git-changes-file" + (isSelected ? " is-selected" : "") + "' data-git-change-action='select' data-git-change-path='" + escapeHtml(path) + "' title='" + escapeHtml(path) + "'>"
+              + "<span class='git-changes-file-icon git-changes-file-icon-" + escapeHtml(status) + "'>" + escapeHtml(getGitChangeStatusIcon(status)) + "</span>"
+              + "<span class='git-changes-file-name'>" + escapeHtml(path) + "</span>"
+              + "<span class='git-changes-file-status'>" + escapeHtml(getGitChangeStatusLabel(status)) + "</span>"
+              + stats
+              + "</button>";
+          }).join("")
+          : "<div class='git-changes-empty'>" + escapeHtml(isLoading ? "Loading git changes…" : (gitChangesState.message || "No uncommitted git changes.")) + "</div>";
+        const selectedDiff = selected && selected.diff ? String(selected.diff) : String(gitChangesState.content || "");
+        const selectedStatus = selected ? String(selected.status || "modified") : "";
+        const selectedCanOpen = selected && selectedStatus !== "deleted" && gitChangesState.repoRoot;
+        const selectedAbsPath = selectedCanOpen ? String(gitChangesState.repoRoot).replace(/\/$/, "") + "/" + String(selected.path || "") : "";
+        const notice = hasError && gitChangesState.message
+          ? "<div class='git-changes-notice git-changes-notice-" + escapeHtml(gitChangesState.level || "warning") + "'>" + escapeHtml(gitChangesState.message) + "</div>"
+          : "";
+        return "<div class='git-changes-panel'>"
+          + "<div class='git-changes-toolbar'>"
+          + "<div class='git-changes-title-group'>"
+          + "<div class='git-changes-title'>Git changes</div>"
+          + "<div class='git-changes-subtitle'>" + escapeHtml(subtitleParts.filter(Boolean).join(" · ")) + "</div>"
+          + (repoRoot ? "<div class='git-changes-root' title='" + escapeHtml(repoRoot) + "'>" + escapeHtml(repoRoot) + "</div>" : "")
+          + "</div>"
+          + "<div class='git-changes-actions'>"
+          + "<button type='button' data-git-change-action='refresh'" + (isLoading ? " disabled" : "") + ">Refresh</button>"
+          + "<button type='button' data-git-change-action='open' data-git-change-abs-path='" + escapeHtml(selectedAbsPath) + "'" + (selectedCanOpen ? "" : " disabled") + ">Open file</button>"
+          + "<button type='button' data-git-change-action='load'" + (gitChangesState.content ? "" : " disabled") + ">Load diff</button>"
+          + "<button type='button' data-git-change-action='copy'" + (gitChangesState.content ? "" : " disabled") + ">Copy diff</button>"
+          + "</div>"
+          + "</div>"
+          + notice
+          + "<div class='git-changes-body'>"
+          + "<div class='git-changes-file-list' role='list'>" + rows + "</div>"
+          + "<div class='git-changes-diff-pane'>" + (selectedDiff ? buildGitChangesDiffHtml(selectedDiff) : "<div class='git-changes-empty'>Select a changed file.</div>") + "</div>"
+          + "</div>"
+          + "</div>";
+      }
+
+      function getGitChangesScrollSnapshot() {
+        if (!critiqueViewEl) return null;
+        const fileListEl = critiqueViewEl.querySelector(".git-changes-file-list");
+        const diffPaneEl = critiqueViewEl.querySelector(".git-changes-diff-pane");
+        return {
+          paneTop: critiqueViewEl.scrollTop || 0,
+          paneLeft: critiqueViewEl.scrollLeft || 0,
+          fileListTop: fileListEl ? fileListEl.scrollTop || 0 : 0,
+          fileListLeft: fileListEl ? fileListEl.scrollLeft || 0 : 0,
+          diffTop: diffPaneEl ? diffPaneEl.scrollTop || 0 : 0,
+          diffLeft: diffPaneEl ? diffPaneEl.scrollLeft || 0 : 0,
+        };
+      }
+
+      function restoreGitChangesScrollSnapshot(snapshot, options) {
+        if (!critiqueViewEl || !snapshot) return;
+        const fileListEl = critiqueViewEl.querySelector(".git-changes-file-list");
+        const diffPaneEl = critiqueViewEl.querySelector(".git-changes-diff-pane");
+        critiqueViewEl.scrollTop = snapshot.paneTop || 0;
+        critiqueViewEl.scrollLeft = snapshot.paneLeft || 0;
+        if (fileListEl) {
+          fileListEl.scrollTop = snapshot.fileListTop || 0;
+          fileListEl.scrollLeft = snapshot.fileListLeft || 0;
+        }
+        if (diffPaneEl) {
+          if (options && options.resetDiffScroll) {
+            diffPaneEl.scrollTop = 0;
+            diffPaneEl.scrollLeft = 0;
+          } else {
+            diffPaneEl.scrollTop = snapshot.diffTop || 0;
+            diffPaneEl.scrollLeft = snapshot.diffLeft || 0;
+          }
+        }
+      }
+
+      function renderGitChangesView(options) {
+        if (!critiqueViewEl) return;
+        const scrollSnapshot = options && options.preserveScroll ? getGitChangesScrollSnapshot() : null;
+        finishPreviewRender(critiqueViewEl);
+        critiqueViewEl.classList.add("git-changes-host");
+        critiqueViewEl.innerHTML = buildGitChangesPanelHtml();
+        critiqueViewEl.classList.remove("response-scroll-resetting");
+        restoreGitChangesScrollSnapshot(scrollSnapshot, options || {});
+        if (gitChangesState.status === "idle") requestGitChangesSnapshot({ preserveScroll: true });
+        scheduleResponsePaneRepaintNudge();
+      }
+
+      function requestGitChangesSnapshot(options) {
+        const requestId = makeRequestId();
+        const context = getGitChangesContext();
+        gitChangesState = {
+          ...gitChangesState,
+          status: "loading",
+          requestId,
+          message: "",
+          level: "info",
+        };
+        if (rightView === "changes") renderGitChangesView({ preserveScroll: Boolean(options && options.preserveScroll) });
+        const message = { type: "git_changes_request", requestId };
+        if (context.sourcePath) message.sourcePath = context.sourcePath;
+        if (context.resourceDir) message.resourceDir = context.resourceDir;
+        if (!sendMessage(message)) {
+          gitChangesState = { ...gitChangesState, status: "error", message: "Studio is not connected.", level: "error" };
+          if (rightView === "changes") renderGitChangesView({ preserveScroll: true });
+        } else if (options && options.user) {
+          setStatus("Refreshing git changes…", "warning");
+        }
+      }
+
+      async function handleGitChangesPaneClick(event) {
+        if (rightView !== "changes") return;
+        const target = event.target;
+        const actionEl = target instanceof Element ? target.closest("[data-git-change-action]") : null;
+        if (!actionEl) return;
+        event.preventDefault();
+        const action = actionEl.getAttribute("data-git-change-action") || "";
+        if (action === "select") {
+          gitChangesState = { ...gitChangesState, selectedPath: actionEl.getAttribute("data-git-change-path") || "" };
+          renderGitChangesView({ preserveScroll: true, resetDiffScroll: true });
+          return;
+        }
+        if (action === "refresh") {
+          requestGitChangesSnapshot({ user: true, preserveScroll: true });
+          return;
+        }
+        if (action === "copy") {
+          const ok = await writeTextToClipboard(String(gitChangesState.content || ""));
+          setStatus(ok ? "Copied git diff." : "Clipboard write failed.", ok ? "success" : "warning");
+          return;
+        }
+        if (action === "load") {
+          if (!String(gitChangesState.content || "").trim()) {
+            setStatus("No git diff to load.", "warning");
+            return;
+          }
+          setEditorText(String(gitChangesState.content || ""), { preserveScroll: false, preserveSelection: false });
+          setSourceState({ source: "blank", label: gitChangesState.label || "git diff", path: null });
+          setEditorLanguage("diff");
+          setStatus("Loaded current git diff into editor.", "success");
+          return;
+        }
+        if (action === "open") {
+          const absPath = actionEl.getAttribute("data-git-change-abs-path") || "";
+          if (!absPath) return;
+          await openPreviewDocumentHere(absPath, getFileBrowserLocalLinkContext(), { fallbackPath: absPath, fileBackedIntent: true });
+          ensureCurrentEditorFileBackedFromFilesPath(absPath);
+          setStatus("Opened changed file in editor.", "success");
+        }
+      }
+
       function renderActiveResult() {
+        if (critiqueViewEl) critiqueViewEl.classList.toggle("git-changes-host", rightView === "changes");
         if (rightView === "trace") {
           renderTraceView();
           return;
@@ -9718,6 +10127,11 @@
           return;
         }
 
+        if (rightView === "changes") {
+          renderGitChangesView();
+          return;
+        }
+
         if (rightView === "editor-preview") {
           const editorText = prepareEditorTextForPreview(sourceTextEl.value || "");
           if (!editorText.trim()) {
@@ -9796,7 +10210,7 @@
           : normalizeForCompare(sourceTextEl.value);
         const responseLoaded = hasResponse && normalizedEditor === latestResponseNormalized;
         const isCritiqueResponse = hasResponse && latestResponseIsStructuredCritique;
-        const showingAuxiliaryRightPane = rightView === "trace" || rightView === "repl" || rightView === "files";
+        const showingAuxiliaryRightPane = rightView === "trace" || rightView === "repl" || rightView === "files" || rightView === "changes";
 
         if (responseWrapEl) {
           responseWrapEl.hidden = showingAuxiliaryRightPane;
@@ -9839,6 +10253,8 @@
             exportPdfBtn.title = "Working view does not support preview export.";
           } else if (rightView === "files") {
             exportPdfBtn.title = "Files view does not support preview export.";
+          } else if (rightView === "changes") {
+            exportPdfBtn.title = "Changes view does not support preview export.";
           } else if (exportingReplJournal && !replJournalExportEntries.length) {
             exportPdfBtn.title = "No Studio REPL record entries to export for this session yet.";
           } else if (rightView === "markdown") {
@@ -10018,7 +10434,6 @@
         if (clearWorkspaceBtn) clearWorkspaceBtn.disabled = uiBusy;
         sendEditorBtn.disabled = uiBusy || isEditorOnlyMode;
         if (getEditorBtn) getEditorBtn.disabled = uiBusy;
-        if (loadGitDiffBtn) loadGitDiffBtn.disabled = uiBusy;
         syncRunAndCritiqueButtons();
         copyDraftBtn.disabled = uiBusy;
         if (suggestCompletionBtn) {
@@ -10775,6 +11190,9 @@
         if (rightView === "trace" && previousView !== "trace") {
           traceAutoScroll = true;
         }
+        if (rightView === "changes" && previousView !== "changes" && gitChangesState.status === "idle") {
+          requestGitChangesSnapshot();
+        }
         if (rightView === "repl" && previousView !== "repl") {
           replFollow = true;
           startReplPolling();
@@ -13097,17 +13515,24 @@
         if (!scratchpadRecentPanelEl) return;
         scratchpadRecentPanelEl.hidden = !scratchpadRecentVisible;
         if (!scratchpadRecentVisible) return;
+        const headerHtml = "<div class='scratchpad-recent-header'>"
+          + "<div class='scratchpad-recent-heading-group'>"
+          + "<div class='scratchpad-recent-heading'>Recent scratchpads</div>"
+          + "<div class='scratchpad-recent-subtitle'>Load, append, or copy notes saved for other documents and drafts.</div>"
+          + "</div>"
+          + "<button type='button' class='scratchpad-recent-hide-btn' data-scratchpad-recent-action='hide' aria-label='Hide recent scratchpads' title='Hide recent scratchpads'>Hide</button>"
+          + "</div>";
         if (scratchpadRecentLoading) {
-          scratchpadRecentPanelEl.innerHTML = "<div class='scratchpad-recent-loading'>Loading recent scratchpads…</div>";
+          scratchpadRecentPanelEl.innerHTML = headerHtml + "<div class='scratchpad-recent-loading'>Loading recent scratchpads…</div>";
           return;
         }
         const currentKey = getCurrentStudioDocumentDescriptor().key;
         const entries = Array.isArray(scratchpadRecentEntries) ? scratchpadRecentEntries : [];
         if (!entries.length) {
-          scratchpadRecentPanelEl.innerHTML = "<div class='scratchpad-recent-empty'>No other saved scratchpads yet.</div>";
+          scratchpadRecentPanelEl.innerHTML = headerHtml + "<div class='scratchpad-recent-empty'>No other saved scratchpads yet.</div>";
           return;
         }
-        scratchpadRecentPanelEl.innerHTML = "<div class='scratchpad-recent-list'>" + entries.map((entry) => {
+        scratchpadRecentPanelEl.innerHTML = headerHtml + "<div class='scratchpad-recent-list'>" + entries.map((entry) => {
           const key = String(entry && entry.documentKey ? entry.documentKey : "");
           const isCurrent = key === currentKey;
           const label = String(entry && entry.label ? entry.label : key || "scratchpad");
@@ -13145,13 +13570,19 @@
         }
       }
 
+      function hideScratchpadRecentPanel() {
+        scratchpadRecentVisible = false;
+        renderScratchpadRecentPanel();
+        updateScratchpadUi();
+      }
+
       function toggleScratchpadRecentPanel() {
-        scratchpadRecentVisible = !scratchpadRecentVisible;
         if (scratchpadRecentVisible) {
-          void loadScratchpadRecentEntries();
-        } else {
-          renderScratchpadRecentPanel();
+          hideScratchpadRecentPanel();
+          return;
         }
+        scratchpadRecentVisible = true;
+        void loadScratchpadRecentEntries();
         updateScratchpadUi();
       }
 
@@ -13181,6 +13612,7 @@
             if (!confirmed) return;
           }
           setScratchpadText(text);
+          hideScratchpadRecentPanel();
           setStatus("Loaded recent scratchpad into current scratchpad.", "success");
         } catch (error) {
           setStatus("Could not use recent scratchpad: " + (error && error.message ? error.message : String(error || "unknown error")), "warning");
@@ -16864,7 +17296,7 @@
         const hasNotes = count > 0;
         const isOpen = isReviewNotesOpen();
         if (reviewNotesBtn) {
-          reviewNotesBtn.textContent = hasNotes ? "Comments •" : "Comments";
+          reviewNotesBtn.textContent = "Comments";
           reviewNotesBtn.classList.toggle("has-content", hasNotes);
           reviewNotesBtn.classList.toggle("is-active", isOpen);
           reviewNotesBtn.setAttribute("aria-pressed", isOpen ? "true" : "false");
@@ -17466,7 +17898,7 @@
         const hasContent = Boolean(normalized.trim());
         const descriptor = getCurrentStudioDocumentDescriptor();
         if (scratchpadBtn) {
-          scratchpadBtn.textContent = hasContent ? "Scratchpad •" : "Scratchpad";
+          scratchpadBtn.textContent = "Scratchpad";
           scratchpadBtn.classList.toggle("has-content", hasContent);
           scratchpadBtn.title = hasContent
             ? ("Open the local persistent scratchpad for this document/draft. Scope: " + descriptor.label + ". File-backed docs come back across Pi restarts; unsaved drafts stay with this draft instance until saved or cleared.")
@@ -17480,6 +17912,9 @@
         if (scratchpadRecentBtn) {
           scratchpadRecentBtn.textContent = scratchpadRecentVisible ? "Hide recent" : "Recent…";
           scratchpadRecentBtn.setAttribute("aria-expanded", scratchpadRecentVisible ? "true" : "false");
+          scratchpadRecentBtn.title = scratchpadRecentVisible
+            ? "Hide recent scratchpads."
+            : "Show recent non-empty scratchpads saved for other files and drafts.";
         }
         if (scratchpadInsertBtn) scratchpadInsertBtn.disabled = !hasContent;
         if (scratchpadCopyBtn) scratchpadCopyBtn.disabled = !hasContent;
@@ -18571,28 +19006,31 @@
           return;
         }
 
-        if (message.type === "git_diff_snapshot") {
-          if (typeof message.requestId === "string" && pendingRequestId === message.requestId) {
-            pendingRequestId = null;
-            pendingKind = null;
-          }
-
-          const content = typeof message.content === "string" ? message.content : "";
-          const label = typeof message.label === "string" && message.label.trim()
-            ? message.label.trim()
-            : "git diff";
-          setEditorText(content, { preserveScroll: false, preserveSelection: false });
-          setSourceState({ source: "blank", label, path: null });
-          setEditorLanguage("diff");
-          setBusy(false);
-          setWsState("Ready");
-          refreshResponseUi();
-          setStatus(
-            typeof message.message === "string" && message.message.trim()
-              ? message.message
-              : "Loaded current git diff.",
-            "success",
-          );
+        if (message.type === "git_changes_snapshot") {
+          const requestId = typeof message.requestId === "string" ? message.requestId : "";
+          const preserveScroll = Boolean(gitChangesState.requestId && requestId && requestId === gitChangesState.requestId);
+          if (requestId && gitChangesState.requestId && requestId !== gitChangesState.requestId) return;
+          const ok = message.ok !== false;
+          const files = Array.isArray(message.files) ? message.files : [];
+          const selectedPath = files.some((file) => String(file && file.path || "") === String(gitChangesState.selectedPath || ""))
+            ? gitChangesState.selectedPath
+            : (files[0] && files[0].path ? String(files[0].path) : "");
+          gitChangesState = {
+            status: ok ? "ready" : "error",
+            requestId: null,
+            content: ok && typeof message.content === "string" ? message.content : "",
+            label: ok && typeof message.label === "string" ? message.label : "",
+            repoRoot: ok && typeof message.repoRoot === "string" ? message.repoRoot : "",
+            branch: ok && typeof message.branch === "string" ? message.branch : "",
+            hasHead: ok ? message.hasHead !== false : true,
+            files,
+            selectedPath,
+            message: typeof message.message === "string" ? message.message : "",
+            level: typeof message.level === "string" ? message.level : "info",
+          };
+          if (rightView === "changes") renderGitChangesView({ preserveScroll });
+          if (ok) setStatus(files.length ? "Loaded git changes." : "No uncommitted git changes.", files.length ? "success" : "warning");
+          else setStatus(gitChangesState.message || "Could not load git changes.", gitChangesState.level === "error" ? "error" : "warning");
           return;
         }
 
@@ -19248,7 +19686,7 @@
       if (historyPrevBtn) {
         historyPrevBtn.addEventListener("click", () => {
           if (!responseHistory.length) {
-            setStatus("No response history available yet.", "warning");
+            setStatus("No branch history available yet.", "warning");
             return;
           }
           selectHistoryIndex(responseHistoryIndex - 1);
@@ -19258,7 +19696,7 @@
       if (historyNextBtn) {
         historyNextBtn.addEventListener("click", () => {
           if (!responseHistory.length) {
-            setStatus("No response history available yet.", "warning");
+            setStatus("No branch history available yet.", "warning");
             return;
           }
           selectHistoryIndex(responseHistoryIndex + 1);
@@ -19268,7 +19706,7 @@
       if (historyLastBtn) {
         historyLastBtn.addEventListener("click", () => {
           if (!responseHistory.length) {
-            setStatus("No response history available yet.", "warning");
+            setStatus("No branch history available yet.", "warning");
             return;
           }
           selectHistoryIndex(responseHistory.length - 1);
@@ -19295,7 +19733,7 @@
           if (responseHistory.length > 0) {
             selectHistoryIndex(responseHistory.length - 1, { silent: true });
             queuedLatestResponse = null;
-            setStatus("Pulled latest response from history.", "success");
+            setStatus("Pulled latest response from branch history.", "success");
             updateResultActionButtons();
           } else if (applyLatestPayload(queuedLatestResponse)) {
             queuedLatestResponse = null;
@@ -19653,27 +20091,6 @@
         });
       }
 
-      if (loadGitDiffBtn) {
-        loadGitDiffBtn.addEventListener("click", () => {
-          const requestId = beginUiAction("load_git_diff");
-          if (!requestId) return;
-
-          const effectivePath = getEffectiveSavePath();
-          const sent = sendMessage({
-            type: "load_git_diff_request",
-            requestId,
-            sourcePath: effectivePath || sourceState.path || undefined,
-            resourceDir: getCurrentResourceDirValue() || undefined,
-          });
-
-          if (!sent) {
-            pendingRequestId = null;
-            pendingKind = null;
-            setBusy(false);
-          }
-        });
-      }
-
       if (zenModeBtn) {
         zenModeBtn.addEventListener("click", () => {
           setStudioZenMode(!studioZenModeEnabled);
@@ -20039,7 +20456,12 @@
           const actionEl = target instanceof Element ? target.closest("[data-scratchpad-recent-action]") : null;
           if (!actionEl) return;
           event.preventDefault();
+          event.stopPropagation();
           const action = String(actionEl.getAttribute("data-scratchpad-recent-action") || "load");
+          if (action === "hide") {
+            hideScratchpadRecentPanel();
+            return;
+          }
           const key = String(actionEl.getAttribute("data-scratchpad-key") || "");
           void applyScratchpadRecentAction(action, key);
         });