pi-studio 0.5.50 → 0.5.52

package/client/studio-client.js

@@ -53,7 +53,9 @@
       const lineNumberGutterContentEl = document.getElementById("lineNumberGutterContent");
       const lineNumberMeasureEl = document.getElementById("lineNumberMeasure");
       const sourcePreviewEl = document.getElementById("sourcePreview");
+      const editorSelectionActionsEl = document.getElementById("editorSelectionActions");
       const editorSelectionCommentBtn = document.getElementById("editorSelectionCommentBtn");
+      const editorSelectionJumpBtn = document.getElementById("editorSelectionJumpBtn");
       const leftPaneEl = document.getElementById("leftPane");
       const rightPaneEl = document.getElementById("rightPane");
       const sourceBadgeEl = document.getElementById("sourceBadge");
@@ -102,6 +104,7 @@
       const leftFocusBtn = document.getElementById("leftFocusBtn");
       const rightFocusBtn = document.getElementById("rightFocusBtn");
       const reviewNotesBtn = document.getElementById("reviewNotesBtn");
+      const outlineBtn = document.getElementById("outlineBtn");
       const scratchpadBtn = document.getElementById("scratchpadBtn");
       const scratchpadOverlayEl = document.getElementById("scratchpadOverlay");
       const scratchpadDialogEl = document.getElementById("scratchpadDialog");
@@ -112,6 +115,13 @@
       const scratchpadClearBtn = document.getElementById("scratchpadClearBtn");
       const scratchpadCloseBtn = document.getElementById("scratchpadCloseBtn");
       const scratchpadDoneBtn = document.getElementById("scratchpadDoneBtn");
+      const outlineOverlayEl = document.getElementById("outlineOverlay");
+      const outlineDialogEl = document.getElementById("outlineDialog");
+      const outlineMetaEl = document.getElementById("outlineMeta");
+      const outlineListEl = document.getElementById("outlineList");
+      const outlineEmptyStateEl = document.getElementById("outlineEmptyState");
+      const outlineCloseBtn = document.getElementById("outlineCloseBtn");
+      const outlineDoneBtn = document.getElementById("outlineDoneBtn");
       const reviewNotesOverlayEl = document.getElementById("reviewNotesOverlay");
       const reviewNotesDialogEl = document.getElementById("reviewNotesDialog");
       const reviewNotesMetaEl = document.getElementById("reviewNotesMeta");
@@ -303,6 +313,8 @@
       let reviewNotesReturnFocusEl = null;
       let reviewNotesPersistTimer = null;
       let reviewNotesLoadNonce = 0;
+      let outlineEntries = [];
+      let outlineReturnFocusEl = null;
       let pendingReviewNoteFocusId = null;
       let pendingReviewNoteInlineFocusId = null;
       let activePreviewCommentSelection = null;
@@ -1128,6 +1140,12 @@
           && typeof reviewNotesDialogEl.contains === "function"
           && reviewNotesDialogEl.contains(event.target)
         );
+        const outlineOwnsEvent = Boolean(
+          outlineDialogEl
+          && event.target
+          && typeof outlineDialogEl.contains === "function"
+          && outlineDialogEl.contains(event.target)
+        );
 
         if (isScratchpadOpen() && plainEscape) {
           event.preventDefault();
@@ -1141,7 +1159,13 @@
           return;
         }
 
-        if (scratchpadOwnsEvent || reviewNotesOwnsEvent) {
+        if (isOutlineOpen() && plainEscape) {
+          event.preventDefault();
+          closeOutline();
+          return;
+        }
+
+        if (scratchpadOwnsEvent || reviewNotesOwnsEvent || outlineOwnsEvent) {
           return;
         }
 
@@ -2989,6 +3013,7 @@
           scheduleEditorMetaUpdate();
         }
         updateEditorSelectionCommentUi();
+        updateOutlineUi();
       }
 
       function setEditorView(nextView) {
@@ -3023,6 +3048,7 @@
         }
         updateReviewNotesUi();
         updateEditorSelectionCommentUi();
+        updateOutlineUi();
       }
 
       function setRightView(nextView) {
@@ -3859,11 +3885,6 @@
               + " data-review-note-line-end='" + String(lineNumber) + "'"
               + " data-preview-comment-kind='" + escapeHtml(kind) + "'"
               + ">"
-              + "<div class='preview-comment-controls'>"
-              + "<button type='button' class='preview-comment-summary' hidden></button>"
-              + "<button type='button' class='preview-comment-add' data-preview-comment-action='comment'>Comment</button>"
-              + "<button type='button' class='preview-comment-jump' data-preview-comment-action='jump'>Jump</button>"
-              + "</div>"
               + "<div class='preview-comment-block-content preview-code-line-content'>" + lineHtml + "</div>"
               + "</div>",
           );
@@ -3879,6 +3900,7 @@
         clearPreviewJumpHighlight(targetEl);
         finishPreviewRender(targetEl);
         targetEl.innerHTML = buildCodePreviewHtmlWithCommentBlocks(text, editorLanguage || "");
+        ensurePreviewSelectionActions(targetEl);
         updatePreviewCommentBlocksForElement(targetEl);
         if (pane === "response") {
           applyPendingResponseScrollReset();
@@ -4027,6 +4049,10 @@
         return Boolean(scratchpadOverlayEl && !scratchpadOverlayEl.hidden);
       }
 
+      function isOutlineOpen() {
+        return Boolean(outlineOverlayEl && !outlineOverlayEl.hidden);
+      }
+
       function isReviewNotesOpen() {
         return Boolean(reviewNotesOverlayEl && !reviewNotesOverlayEl.hidden);
       }
@@ -4200,6 +4226,400 @@
         };
       }
 
+      function buildOutlineLineIndex(text) {
+        const source = String(text || "").replace(/\r\n/g, "\n");
+        const lines = source.split("\n");
+        const lineOffsets = [];
+        let runningOffset = 0;
+        for (const line of lines) {
+          lineOffsets.push(runningOffset);
+          runningOffset += line.length + 1;
+        }
+        return { source, lines, lineOffsets };
+      }
+
+      function makeOutlineEntry(options) {
+        const entry = options && typeof options === "object" ? options : {};
+        const label = typeof entry.label === "string" ? entry.label.trim() : "";
+        if (!label) return null;
+        const selectionStart = Math.max(0, Math.floor(Number(entry.selectionStart) || 0));
+        const selectionEnd = Math.max(selectionStart, Math.floor(Number(entry.selectionEnd) || selectionStart));
+        return {
+          id: typeof entry.id === "string" && entry.id ? entry.id : makeRequestId(),
+          kind: typeof entry.kind === "string" && entry.kind ? entry.kind : "section",
+          depth: Math.max(1, Math.floor(Number(entry.depth) || 1)),
+          label,
+          lineStart: Math.max(1, Math.floor(Number(entry.lineStart) || 1)),
+          lineEnd: Math.max(Math.max(1, Math.floor(Number(entry.lineStart) || 1)), Math.floor(Number(entry.lineEnd) || Math.max(1, Math.floor(Number(entry.lineStart) || 1)))),
+          selectionStart,
+          selectionEnd,
+          selectedText: typeof entry.selectedText === "string" ? entry.selectedText : "",
+          selectedDisplayText: typeof entry.selectedDisplayText === "string" && entry.selectedDisplayText ? entry.selectedDisplayText : label,
+        };
+      }
+
+      function getOutlineKindLabel(kind) {
+        switch (String(kind || "")) {
+          case "heading": return "Heading";
+          case "section": return "Section";
+          case "subsection": return "Subsection";
+          case "subsubsection": return "Subsubsection";
+          case "paragraph": return "Paragraph";
+          case "subparagraph": return "Subparagraph";
+          case "class": return "Class";
+          case "function": return "Function";
+          case "interface": return "Interface";
+          case "enum": return "Enum";
+          case "type": return "Type";
+          case "struct": return "Struct";
+          case "module": return "Module";
+          case "macro": return "Macro";
+          case "file": return "File";
+          case "hunk": return "Hunk";
+          default: return "Item";
+        }
+      }
+
+      function getOutlineKindBadge(kind) {
+        switch (String(kind || "")) {
+          case "section": return "§";
+          case "subsection": return "§§";
+          case "subsubsection": return "§3";
+          case "paragraph": return "¶";
+          case "subparagraph": return "¶2";
+          case "class": return "class";
+          case "function": return "def";
+          case "interface": return "iface";
+          case "enum": return "enum";
+          case "type": return "type";
+          case "struct": return "struct";
+          case "module": return "mod";
+          case "macro": return "macro";
+          case "file": return "file";
+          case "hunk": return "@@";
+          default: return "#";
+        }
+      }
+
+      function scanMarkdownOutlineEntries(text) {
+        const { source, lines, lineOffsets } = buildOutlineLineIndex(text);
+        const entries = [];
+        let activeFence = null;
+
+        for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+          const line = String(lines[lineIndex] || "");
+          const fenceMatch = line.match(/^ {0,3}(`{3,}|~{3,})/);
+          if (fenceMatch) {
+            if (!activeFence) {
+              activeFence = fenceMatch[1];
+            } else if (fenceMatch[1][0] === activeFence[0] && fenceMatch[1].length >= activeFence.length) {
+              activeFence = null;
+            }
+            continue;
+          }
+          if (activeFence) continue;
+
+          const atxMatch = line.match(/^ {0,3}(#{1,6})[ \t]+(.+?)(?:[ \t]+#+[ \t]*)?$/);
+          if (atxMatch) {
+            const label = normalizeVisiblePreviewText(atxMatch[2] || "");
+            const entry = makeOutlineEntry({
+              kind: atxMatch[1].length === 1 ? "section" : atxMatch[1].length === 2 ? "subsection" : atxMatch[1].length === 3 ? "subsubsection" : "heading",
+              depth: atxMatch[1].length,
+              label,
+              lineStart: lineIndex + 1,
+              lineEnd: lineIndex + 1,
+              selectionStart: lineOffsets[lineIndex] || 0,
+              selectionEnd: (lineOffsets[lineIndex] || 0) + line.length,
+              selectedText: line,
+              selectedDisplayText: label,
+            });
+            if (entry) entries.push(entry);
+            continue;
+          }
+
+          const nextLine = lineIndex + 1 < lines.length ? String(lines[lineIndex + 1] || "") : "";
+          const setextMatch = nextLine.match(/^ {0,3}(=+|-+)\s*$/);
+          if (setextMatch && normalizeVisiblePreviewText(line)) {
+            const depth = setextMatch[1][0] === "=" ? 1 : 2;
+            const label = normalizeVisiblePreviewText(line);
+            const entry = makeOutlineEntry({
+              kind: depth === 1 ? "section" : "subsection",
+              depth,
+              label,
+              lineStart: lineIndex + 1,
+              lineEnd: lineIndex + 1,
+              selectionStart: lineOffsets[lineIndex] || 0,
+              selectionEnd: (lineOffsets[lineIndex] || 0) + line.length,
+              selectedText: line,
+              selectedDisplayText: label,
+            });
+            if (entry) entries.push(entry);
+            lineIndex += 1;
+          }
+        }
+
+        return entries;
+      }
+
+      const LATEX_OUTLINE_LEVEL_BY_COMMAND = {
+        part: 1,
+        chapter: 1,
+        section: 1,
+        subsection: 2,
+        subsubsection: 3,
+        paragraph: 4,
+        subparagraph: 5,
+      };
+
+      function scanLatexOutlineEntries(text) {
+        const source = String(text || "").replace(/\r\n/g, "\n");
+        const bodyRange = findLatexDocumentBodyRange(source);
+        const bodyStart = Math.max(0, Math.min(bodyRange.start, source.length));
+        const bodyEnd = Math.max(bodyStart, Math.min(bodyRange.end, source.length));
+        const bodyText = source.slice(bodyStart, bodyEnd);
+        const { lines, lineOffsets } = buildOutlineLineIndex(bodyText);
+        const entries = [];
+
+        function getLine(index) {
+          return index >= 0 && index < lines.length ? String(lines[index] || "") : "";
+        }
+
+        function getStrippedLine(index) {
+          return stripLatexPreviewComments(getLine(index)).trim();
+        }
+
+        function isBibliographyCommandLine(index) {
+          return /^\\(?:bibliographystyle|bibliography|printbibliography)\b/i.test(getStrippedLine(index));
+        }
+
+        for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+          let chunk = getLine(lineIndex);
+          let endLineIndex = lineIndex;
+          let heading = readLatexHeadingChunk(chunk);
+          if (/^\s*\\(?:part|chapter|section|subsection|subsubsection|paragraph|subparagraph)\b/.test(chunk)) {
+            while (!heading && endLineIndex + 1 < lines.length && endLineIndex < lineIndex + 5) {
+              endLineIndex += 1;
+              chunk += "\n" + getLine(endLineIndex);
+              heading = readLatexHeadingChunk(chunk);
+            }
+          }
+          if (heading) {
+            const label = extractLatexPreviewVisibleText(heading.titleText || "");
+            const kind = String(heading.commandName || "section").replace(/\*$/, "").toLowerCase();
+            const entry = makeOutlineEntry({
+              kind,
+              depth: LATEX_OUTLINE_LEVEL_BY_COMMAND[kind] || 1,
+              label,
+              lineStart: lineIndex + 1,
+              lineEnd: endLineIndex + 1,
+              selectionStart: bodyStart + (lineOffsets[lineIndex] || 0),
+              selectionEnd: bodyStart + (lineOffsets[endLineIndex] || 0) + getLine(endLineIndex).length,
+              selectedText: source.slice(bodyStart + (lineOffsets[lineIndex] || 0), bodyStart + (lineOffsets[endLineIndex] || 0) + getLine(endLineIndex).length),
+              selectedDisplayText: label,
+            });
+            if (entry) entries.push(entry);
+            lineIndex = endLineIndex;
+            continue;
+          }
+
+          if (isBibliographyCommandLine(lineIndex)) {
+            let endLine = lineIndex;
+            while (endLine + 1 < lines.length && isBibliographyCommandLine(endLine + 1)) {
+              endLine += 1;
+            }
+            const entry = makeOutlineEntry({
+              kind: "section",
+              depth: 1,
+              label: "References",
+              lineStart: lineIndex + 1,
+              lineEnd: endLine + 1,
+              selectionStart: bodyStart + (lineOffsets[lineIndex] || 0),
+              selectionEnd: bodyStart + (lineOffsets[endLine] || 0) + getLine(endLine).length,
+              selectedText: source.slice(bodyStart + (lineOffsets[lineIndex] || 0), bodyStart + (lineOffsets[endLine] || 0) + getLine(endLine).length),
+              selectedDisplayText: "References",
+            });
+            if (entry) entries.push(entry);
+            lineIndex = endLine;
+          }
+        }
+
+        return entries;
+      }
+
+      function scanPythonOutlineEntries(text) {
+        const { lines, lineOffsets } = buildOutlineLineIndex(text);
+        const entries = [];
+        for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+          const line = String(lines[lineIndex] || "");
+          const classMatch = line.match(/^(\s*)class\s+([A-Za-z_][A-Za-z0-9_]*)\b/);
+          const defMatch = line.match(/^(\s*)(?:async\s+def|def)\s+([A-Za-z_][A-Za-z0-9_]*)\s*\(/);
+          const match = classMatch || defMatch;
+          if (!match) continue;
+          const indent = String(match[1] || "").replace(/\t/g, "    ").length;
+          const label = String(match[2] || "");
+          const kind = classMatch ? "class" : "function";
+          const entry = makeOutlineEntry({
+            kind,
+            depth: Math.max(1, Math.floor(indent / 4) + 1),
+            label,
+            lineStart: lineIndex + 1,
+            lineEnd: lineIndex + 1,
+            selectionStart: lineOffsets[lineIndex] || 0,
+            selectionEnd: (lineOffsets[lineIndex] || 0) + line.length,
+            selectedText: line,
+            selectedDisplayText: label,
+          });
+          if (entry) entries.push(entry);
+        }
+        return entries;
+      }
+
+      function scanJsLikeOutlineEntries(text) {
+        const { lines, lineOffsets } = buildOutlineLineIndex(text);
+        const entries = [];
+        for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+          const line = String(lines[lineIndex] || "");
+          const patterns = [
+            { kind: "class", match: line.match(/^(\s*)(?:export\s+)?(?:default\s+)?class\s+([A-Za-z_$][A-Za-z0-9_$]*)\b/) },
+            { kind: "function", match: line.match(/^(\s*)(?:export\s+)?(?:default\s+)?(?:async\s+)?function\s+([A-Za-z_$][A-Za-z0-9_$]*)\s*\(/) },
+            { kind: "function", match: line.match(/^(\s*)(?:export\s+)?(?:const|let|var)\s+([A-Za-z_$][A-Za-z0-9_$]*)\s*=\s*(?:async\s*)?(?:\([^)]*\)|[A-Za-z_$][A-Za-z0-9_$]*)\s*=>/) },
+            { kind: "interface", match: line.match(/^(\s*)(?:export\s+)?interface\s+([A-Za-z_$][A-Za-z0-9_$]*)\b/) },
+            { kind: "enum", match: line.match(/^(\s*)(?:export\s+)?enum\s+([A-Za-z_$][A-Za-z0-9_$]*)\b/) },
+            { kind: "type", match: line.match(/^(\s*)(?:export\s+)?type\s+([A-Za-z_$][A-Za-z0-9_$]*)\b/) },
+          ];
+          const found = patterns.find((entry) => entry.match);
+          if (!found || !found.match) continue;
+          const indent = String(found.match[1] || "").replace(/\t/g, "  ").length;
+          const label = String(found.match[2] || "");
+          const entry = makeOutlineEntry({
+            kind: found.kind,
+            depth: Math.max(1, Math.floor(indent / 2) + 1),
+            label,
+            lineStart: lineIndex + 1,
+            lineEnd: lineIndex + 1,
+            selectionStart: lineOffsets[lineIndex] || 0,
+            selectionEnd: (lineOffsets[lineIndex] || 0) + line.length,
+            selectedText: line,
+            selectedDisplayText: label,
+          });
+          if (entry) entries.push(entry);
+        }
+        return entries;
+      }
+
+      function scanJuliaOutlineEntries(text) {
+        const { lines, lineOffsets } = buildOutlineLineIndex(text);
+        const entries = [];
+        for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+          const line = String(lines[lineIndex] || "");
+          const patterns = [
+            { kind: "module", match: line.match(/^(\s*)module\s+([A-Za-z_][A-Za-z0-9_]*)\b/) },
+            { kind: "struct", match: line.match(/^(\s*)(?:mutable\s+)?struct\s+([A-Za-z_][A-Za-z0-9_]*)\b/) },
+            { kind: "function", match: line.match(/^(\s*)function\s+([A-Za-z_][A-Za-z0-9_!]*)\s*\(/) },
+            { kind: "macro", match: line.match(/^(\s*)macro\s+([A-Za-z_][A-Za-z0-9_!]*)\b/) },
+          ];
+          const found = patterns.find((entry) => entry.match);
+          if (!found || !found.match) continue;
+          const indent = String(found.match[1] || "").replace(/\t/g, "  ").length;
+          const label = String(found.match[2] || "");
+          const entry = makeOutlineEntry({
+            kind: found.kind,
+            depth: Math.max(1, Math.floor(indent / 2) + 1),
+            label,
+            lineStart: lineIndex + 1,
+            lineEnd: lineIndex + 1,
+            selectionStart: lineOffsets[lineIndex] || 0,
+            selectionEnd: (lineOffsets[lineIndex] || 0) + line.length,
+            selectedText: line,
+            selectedDisplayText: label,
+          });
+          if (entry) entries.push(entry);
+        }
+        return entries;
+      }
+
+      function scanBashOutlineEntries(text) {
+        const { lines, lineOffsets } = buildOutlineLineIndex(text);
+        const entries = [];
+        for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+          const line = String(lines[lineIndex] || "");
+          const match = line.match(/^(\s*)(?:function\s+)?([A-Za-z_][A-Za-z0-9_]*)\s*\(\)\s*\{/);
+          if (!match) continue;
+          const indent = String(match[1] || "").replace(/\t/g, "  ").length;
+          const label = String(match[2] || "");
+          const entry = makeOutlineEntry({
+            kind: "function",
+            depth: Math.max(1, Math.floor(indent / 2) + 1),
+            label,
+            lineStart: lineIndex + 1,
+            lineEnd: lineIndex + 1,
+            selectionStart: lineOffsets[lineIndex] || 0,
+            selectionEnd: (lineOffsets[lineIndex] || 0) + line.length,
+            selectedText: line,
+            selectedDisplayText: label,
+          });
+          if (entry) entries.push(entry);
+        }
+        return entries;
+      }
+
+      function scanDiffOutlineEntries(text) {
+        const { lines, lineOffsets } = buildOutlineLineIndex(text);
+        const entries = [];
+        for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+          const line = String(lines[lineIndex] || "");
+          let kind = "";
+          let label = "";
+          let depth = 1;
+          const fileMatch = line.match(/^diff\s+--git\s+a\/([^\s]+)\s+b\/([^\s]+)/);
+          if (fileMatch) {
+            kind = "file";
+            label = String(fileMatch[2] || fileMatch[1] || "");
+            depth = 1;
+          } else if (/^@@/.test(line)) {
+            kind = "hunk";
+            label = line.replace(/^@@\s*|\s*@@.*$/g, "").trim() || line.trim();
+            depth = 2;
+          }
+          if (!kind || !label) continue;
+          const entry = makeOutlineEntry({
+            kind,
+            depth,
+            label,
+            lineStart: lineIndex + 1,
+            lineEnd: lineIndex + 1,
+            selectionStart: lineOffsets[lineIndex] || 0,
+            selectionEnd: (lineOffsets[lineIndex] || 0) + line.length,
+            selectedText: line,
+            selectedDisplayText: label,
+          });
+          if (entry) entries.push(entry);
+        }
+        return entries;
+      }
+
+      function scanOutlineEntries(text, language) {
+        switch (String(language || "").toLowerCase()) {
+          case "markdown":
+            return scanMarkdownOutlineEntries(text);
+          case "latex":
+            return scanLatexOutlineEntries(text);
+          case "python":
+            return scanPythonOutlineEntries(text);
+          case "javascript":
+          case "typescript":
+            return scanJsLikeOutlineEntries(text);
+          case "julia":
+            return scanJuliaOutlineEntries(text);
+          case "bash":
+            return scanBashOutlineEntries(text);
+          case "diff":
+            return scanDiffOutlineEntries(text);
+          default:
+            return [];
+        }
+      }
+
       function cloneReviewNotes(notes) {
         return Array.isArray(notes)
           ? notes
@@ -5575,8 +5995,23 @@
         return bestIndex;
       }
 
+      function buildLiteralPreviewDisplayMap(text, rawOffsets) {
+        const source = String(text || "");
+        const rawMap = Array.isArray(rawOffsets) ? rawOffsets : [];
+        const charStarts = [];
+        const charEnds = [];
+        for (let i = 0; i < source.length; i += 1) {
+          charStarts.push(rawMap[i]);
+          charEnds.push(rawMap[i] + 1);
+        }
+        return buildNormalizedPreviewDisplayMap(source, charStarts, charEnds);
+      }
+
       function buildPreviewSelectionDisplayMap(blockText, kind) {
         const body = buildPreviewSelectionSourceBody(blockText, kind);
+        if (kind === "code-line" || kind === "diff-line" || kind === "text-line") {
+          return buildLiteralPreviewDisplayMap(body.text, body.rawOffsets);
+        }
         const inlineMap = buildPreviewInlineDisplayMap(body.text, body.rawOffsets);
         return buildNormalizedPreviewDisplayMap(inlineMap.text, inlineMap.charStarts, inlineMap.charEnds);
       }
@@ -5593,6 +6028,7 @@
       function getPreviewCommentSelectionKey(selection) {
         if (!selection) return "";
         return [
+          String(selection.paneId || ""),
           String(selection.blockKey || ""),
           String(selection.selectionStart || 0),
           String(selection.selectionEnd || 0),
@@ -5620,6 +6056,96 @@
           : null;
       }
 
+      function getPreviewSelectionPaneIdForNode(node) {
+        if (!node) return "";
+        const element = node instanceof Element ? node : node.parentElement;
+        const paneEl = element && typeof element.closest === "function"
+          ? element.closest("#sourcePreview, #critiqueView")
+          : null;
+        return paneEl && paneEl.id ? String(paneEl.id) : "";
+      }
+
+      function getPreviewSelectionPaneElement(paneId) {
+        if (paneId === "sourcePreview") return sourcePreviewEl;
+        if (paneId === "critiqueView") return critiqueViewEl;
+        return null;
+      }
+
+      function getActivePreviewSelectionForPane(paneId) {
+        if (!paneId) return null;
+        return activePreviewCommentSelection && activePreviewCommentSelection.paneId === paneId
+          ? activePreviewCommentSelection
+          : null;
+      }
+
+      function ensurePreviewSelectionActions(targetEl) {
+        if (!targetEl || typeof document.createElement !== "function") return null;
+        const paneId = targetEl.id ? String(targetEl.id) : "";
+        if (!paneId) return null;
+        const existing = Array.from(targetEl.children || []).find((child) => child.classList && child.classList.contains("preview-selection-actions"));
+        if (existing) {
+          existing.dataset.previewPane = paneId;
+          return existing;
+        }
+
+        const actionsEl = document.createElement("div");
+        actionsEl.className = "preview-selection-actions";
+        actionsEl.dataset.previewPane = paneId;
+        actionsEl.hidden = true;
+
+        const commentBtn = document.createElement("button");
+        commentBtn.type = "button";
+        commentBtn.className = "preview-comment-add";
+        commentBtn.dataset.previewCommentAction = "comment";
+        commentBtn.textContent = "Comment";
+        commentBtn.hidden = true;
+        actionsEl.appendChild(commentBtn);
+
+        const jumpBtn = document.createElement("button");
+        jumpBtn.type = "button";
+        jumpBtn.className = "preview-comment-jump";
+        jumpBtn.dataset.previewCommentAction = "jump";
+        jumpBtn.textContent = "Jump";
+        jumpBtn.hidden = true;
+        actionsEl.appendChild(jumpBtn);
+
+        targetEl.insertBefore(actionsEl, targetEl.firstChild || null);
+        return actionsEl;
+      }
+
+      function updatePreviewSelectionActions(targetEl) {
+        if (!targetEl) return;
+        const actionsEl = ensurePreviewSelectionActions(targetEl);
+        if (!actionsEl) return;
+        const paneId = targetEl.id ? String(targetEl.id) : "";
+        const selection = getActivePreviewSelectionForPane(paneId);
+        const commentBtn = actionsEl.querySelector(".preview-comment-add");
+        const jumpBtn = actionsEl.querySelector(".preview-comment-jump");
+        if (!selection) {
+          actionsEl.hidden = true;
+          if (commentBtn) commentBtn.hidden = true;
+          if (jumpBtn) jumpBtn.hidden = true;
+          return;
+        }
+        const lineLabel = summarizeReviewNoteAnchor(selection).toLowerCase();
+        const blockKindLabel = getPreviewCommentBlockKindLabel(selection.previewCommentKind || "paragraph");
+        actionsEl.hidden = false;
+        if (commentBtn) {
+          commentBtn.hidden = false;
+          commentBtn.dataset.previewCommentMode = "selection";
+          commentBtn.dataset.previewPane = paneId;
+          commentBtn.title = "Add a local comment from the current preview selection on this " + blockKindLabel + " (" + lineLabel + ").";
+          commentBtn.setAttribute("aria-label", commentBtn.title || "Comment");
+        }
+        if (jumpBtn) {
+          jumpBtn.hidden = false;
+          jumpBtn.dataset.previewCommentMode = "selection";
+          jumpBtn.dataset.previewPane = paneId;
+          jumpBtn.title = "Jump to the current preview selection on this " + blockKindLabel + " in the raw editor (" + lineLabel + ").";
+          jumpBtn.setAttribute("aria-label", jumpBtn.title || "Jump");
+        }
+      }
+
       function unwrapPreviewJumpHighlightElement(element) {
         if (!element || !element.parentNode) return;
         const parent = element.parentNode;
@@ -6449,52 +6975,26 @@
 
       function updatePreviewCommentBlockState(blockEl, sourceText, displayNotes) {
         if (!blockEl || !blockEl.dataset) return;
-        const lineStart = Math.max(1, Number(blockEl.dataset.reviewNoteLineStart) || 1);
-        const lineEnd = Math.max(lineStart, Number(blockEl.dataset.reviewNoteLineEnd) || lineStart);
-        const summaryBtn = blockEl.querySelector(".preview-comment-summary");
-        const addBtn = blockEl.querySelector(".preview-comment-add");
-        const jumpBtn = blockEl.querySelector(".preview-comment-jump");
-        const lineLabel = summarizeReviewNoteAnchor({ lineStart: lineStart, lineEnd: lineEnd }).toLowerCase();
-        const blockKindLabel = getPreviewCommentBlockKindLabel(blockEl.dataset.previewCommentKind || "paragraph");
         const blockKey = getPreviewCommentBlockKey(blockEl);
-        const hasSelection = Boolean(activePreviewCommentSelection && activePreviewCommentSelection.blockKey === blockKey);
+        const paneId = getPreviewSelectionPaneIdForNode(blockEl);
+        const hasSelection = Boolean(
+          activePreviewCommentSelection
+          && activePreviewCommentSelection.paneId === paneId
+          && activePreviewCommentSelection.blockKey === blockKey
+        );
 
         blockEl.classList.remove("has-comments");
         blockEl.classList.toggle("has-selection", hasSelection);
-
-        if (summaryBtn) {
-          summaryBtn.hidden = true;
-          summaryBtn.textContent = "";
-          summaryBtn.dataset.reviewNoteId = "";
-        }
-
-        if (addBtn) {
-          addBtn.hidden = !hasSelection;
-          addBtn.textContent = "Comment";
-          addBtn.dataset.previewCommentMode = hasSelection ? "selection" : "";
-          addBtn.title = hasSelection
-            ? ("Add a local comment from the current preview selection on this " + blockKindLabel + " (" + lineLabel + ").")
-            : "";
-          addBtn.setAttribute("aria-label", addBtn.title || "Comment");
-        }
-
-        if (jumpBtn) {
-          jumpBtn.hidden = !hasSelection;
-          jumpBtn.textContent = "Jump";
-          jumpBtn.dataset.previewCommentMode = hasSelection ? "selection" : "";
-          jumpBtn.title = hasSelection
-            ? ("Jump to the current preview selection on this " + blockKindLabel + " in the raw editor (" + lineLabel + ").")
-            : "";
-          jumpBtn.setAttribute("aria-label", jumpBtn.title || "Jump");
-        }
       }
 
       function updatePreviewCommentBlocksForElement(targetEl) {
         if (!targetEl || typeof targetEl.querySelectorAll !== "function") return;
+        ensurePreviewSelectionActions(targetEl);
         const sourceText = String(sourceTextEl && sourceTextEl.value ? sourceTextEl.value : "");
         Array.from(targetEl.querySelectorAll(".preview-comment-block")).forEach((blockEl) => {
           updatePreviewCommentBlockState(blockEl, sourceText);
         });
+        updatePreviewSelectionActions(targetEl);
       }
 
       function decorateRenderedEditorPreviewComments(targetEl, sourceText) {
@@ -6522,43 +7022,20 @@
           wrapper.dataset.reviewNoteLineEnd = String(sourceBlock.lineEnd);
           wrapper.dataset.previewCommentKind = sourceBlock.kind;
 
-          const controls = document.createElement("div");
-          controls.className = "preview-comment-controls";
-
-          const summaryBtn = document.createElement("button");
-          summaryBtn.type = "button";
-          summaryBtn.className = "preview-comment-summary";
-          summaryBtn.hidden = true;
-          controls.appendChild(summaryBtn);
-
-          const addBtn = document.createElement("button");
-          addBtn.type = "button";
-          addBtn.className = "preview-comment-add";
-          addBtn.dataset.previewCommentAction = "comment";
-          addBtn.textContent = "Comment";
-          controls.appendChild(addBtn);
-
-          const jumpBtn = document.createElement("button");
-          jumpBtn.type = "button";
-          jumpBtn.className = "preview-comment-jump";
-          jumpBtn.dataset.previewCommentAction = "jump";
-          jumpBtn.textContent = "Jump";
-          controls.appendChild(jumpBtn);
-
           originalElement.replaceWith(wrapper);
-          wrapper.appendChild(controls);
           originalElement.classList.add("preview-comment-block-content");
           wrapper.appendChild(originalElement);
         }
 
+        ensurePreviewSelectionActions(targetEl);
         updatePreviewCommentBlocksForElement(targetEl);
       }
 
       function refreshRenderedEditorPreviewComments() {
-        if (sourcePreviewEl && !sourcePreviewEl.hidden) {
+        if (sourcePreviewEl) {
           updatePreviewCommentBlocksForElement(sourcePreviewEl);
         }
-        if (critiqueViewEl && rightView === "editor-preview") {
+        if (critiqueViewEl) {
           updatePreviewCommentBlocksForElement(critiqueViewEl);
         }
       }
@@ -6792,10 +7269,11 @@
       }
 
       function revealReviewNoteInPreview(note) {
-        if (!supportsPreviewCommentsForCurrentEditor()) return;
+        if (!supportsPreviewCommentsForCurrentEditor()) return false;
         if (rightView === "editor-preview" && critiqueViewEl && critiqueViewEl.isConnected) {
-          revealReviewNoteInPreviewElement(critiqueViewEl, note);
+          return revealReviewNoteInPreviewElement(critiqueViewEl, note);
         }
+        return false;
       }
 
       function updateActivePreviewCommentSelectionFromDom() {
@@ -6827,7 +7305,9 @@
 
         setActivePreviewCommentSelection({
           ...anchor,
+          paneId: getPreviewSelectionPaneIdForNode(startBlock),
           blockKey: getPreviewCommentBlockKey(startBlock),
+          previewCommentKind: String(startBlock.dataset && startBlock.dataset.previewCommentKind || "paragraph"),
         });
       }
 
@@ -6922,11 +7402,27 @@
           && typeof sourceTextEl.selectionEnd === "number"
           && sourceTextEl.selectionEnd > sourceTextEl.selectionStart
         );
+        const canJumpToPreview = Boolean(
+          hasSelection
+          && rightView === "editor-preview"
+          && critiqueViewEl
+          && supportsPreviewCommentsForCurrentEditor()
+        );
         editorSelectionCommentBtn.hidden = !hasSelection;
+        if (editorSelectionJumpBtn) {
+          editorSelectionJumpBtn.hidden = !canJumpToPreview;
+        }
+        if (editorSelectionActionsEl) {
+          editorSelectionActionsEl.hidden = !hasSelection;
+        }
         if (hasSelection) {
           editorSelectionCommentBtn.title = "Create a new local comment from the current editor selection.";
           editorSelectionCommentBtn.setAttribute("aria-label", editorSelectionCommentBtn.title);
         }
+        if (editorSelectionJumpBtn && canJumpToPreview) {
+          editorSelectionJumpBtn.title = "Jump to the current editor selection in the preview.";
+          editorSelectionJumpBtn.setAttribute("aria-label", editorSelectionJumpBtn.title);
+        }
       }
 
       function clearSuppressedEditorSelectionComment() {
@@ -6937,6 +7433,138 @@
         updateEditorSelectionCommentUi();
       }
 
+      function getOutlineEntriesForCurrentEditor() {
+        return scanOutlineEntries(sourceTextEl && sourceTextEl.value ? sourceTextEl.value : "", editorLanguage || "markdown");
+      }
+
+      function updateOutlineUi() {
+        outlineEntries = getOutlineEntriesForCurrentEditor();
+        const descriptor = getCurrentStudioDocumentDescriptor();
+        const count = outlineEntries.length;
+        const hasEntries = count > 0;
+        const isOpen = isOutlineOpen();
+        if (outlineBtn) {
+          outlineBtn.textContent = "Outline";
+          outlineBtn.classList.remove("has-content");
+          outlineBtn.classList.toggle("is-active", isOpen);
+          outlineBtn.setAttribute("aria-pressed", isOpen ? "true" : "false");
+          outlineBtn.title = isOpen
+            ? "Hide document outline."
+            : (hasEntries
+              ? (count + " outline entr" + (count === 1 ? "y" : "ies") + " for " + descriptor.label + ". Open the outline rail.")
+              : "Open document outline for the current editor text.");
+        }
+        if (outlineMetaEl) {
+          outlineMetaEl.textContent = hasEntries
+            ? (count + " entr" + (count === 1 ? "y" : "ies") + " · " + (editorLanguage || "text") + " · " + descriptor.label)
+            : ("No outline entries · " + (editorLanguage || "text"));
+        }
+        if (outlineDoneBtn) {
+          outlineDoneBtn.disabled = !isOpen;
+        }
+        if (outlineEmptyStateEl) {
+          outlineEmptyStateEl.hidden = hasEntries;
+        }
+        renderOutlineList();
+      }
+
+      function renderOutlineList() {
+        if (!outlineListEl) return;
+        outlineListEl.innerHTML = "";
+        for (const entry of outlineEntries) {
+          const itemBtn = document.createElement("button");
+          itemBtn.type = "button";
+          itemBtn.className = "outline-entry";
+          itemBtn.dataset.outlineId = String(entry.id || "");
+          itemBtn.style.paddingLeft = (10 + Math.max(0, (entry.depth || 1) - 1) * 14) + "px";
+          itemBtn.title = getOutlineKindLabel(entry.kind) + " · line " + String(entry.lineStart || 1) + "\n" + String(entry.label || "");
+
+          const kindEl = document.createElement("span");
+          kindEl.className = "outline-entry-kind";
+          kindEl.textContent = getOutlineKindBadge(entry.kind);
+          itemBtn.appendChild(kindEl);
+
+          const titleEl = document.createElement("span");
+          titleEl.className = "outline-entry-title";
+          titleEl.textContent = String(entry.label || "");
+          itemBtn.appendChild(titleEl);
+
+          const metaEl = document.createElement("span");
+          metaEl.className = "outline-entry-meta";
+          metaEl.textContent = "L" + String(entry.lineStart || 1);
+          itemBtn.appendChild(metaEl);
+
+          outlineListEl.appendChild(itemBtn);
+        }
+      }
+
+      function buildOutlineEntryAnchor(entry) {
+        if (!entry) return null;
+        return normalizeReviewNote({
+          selectionStart: entry.selectionStart,
+          selectionEnd: entry.selectionEnd,
+          lineStart: entry.lineStart,
+          lineEnd: entry.lineEnd,
+          selectedText: entry.selectedText,
+          selectedDisplayText: entry.selectedDisplayText || entry.label,
+        });
+      }
+
+      function jumpToOutlineEntry(entryId) {
+        const entry = outlineEntries.find((candidate) => candidate && String(candidate.id || "") === String(entryId || ""));
+        if (!entry) return false;
+        const anchor = buildOutlineEntryAnchor(entry);
+        if (!anchor) return false;
+        return jumpToReviewAnchor(anchor, {
+          statusMessage: "Jumped to outline entry.",
+          afterJump: () => {
+            revealReviewNoteInPreview(anchor);
+          },
+        });
+      }
+
+      function closeOutline(options) {
+        if (!outlineOverlayEl || outlineOverlayEl.hidden) return;
+        outlineOverlayEl.hidden = true;
+        updateOutlineUi();
+        if (editorView === "markdown") {
+          scheduleEditorLineNumberRender();
+        }
+        const focusTarget = options && Object.prototype.hasOwnProperty.call(options, "focusTarget")
+          ? options.focusTarget
+          : (outlineReturnFocusEl || outlineBtn || sourceTextEl);
+        outlineReturnFocusEl = null;
+        if (focusTarget && typeof focusTarget.focus === "function") {
+          const schedule = typeof window.requestAnimationFrame === "function"
+            ? window.requestAnimationFrame.bind(window)
+            : (cb) => window.setTimeout(cb, 16);
+          schedule(() => focusTarget.focus());
+        }
+      }
+
+      function openOutline() {
+        if (!outlineOverlayEl) return;
+        if (isReviewNotesOpen()) {
+          closeReviewNotes({ focusTarget: null });
+        }
+        outlineReturnFocusEl = document.activeElement && document.activeElement !== document.body
+          ? document.activeElement
+          : sourceTextEl;
+        outlineOverlayEl.hidden = false;
+        updateOutlineUi();
+        if (editorView === "markdown") {
+          scheduleEditorLineNumberRender();
+        }
+      }
+
+      function toggleOutline() {
+        if (isOutlineOpen()) {
+          closeOutline({ focusTarget: outlineBtn || sourceTextEl });
+        } else {
+          openOutline();
+        }
+      }
+
       function updateReviewNotesUi() {
         const descriptor = getCurrentStudioDocumentDescriptor();
         const count = reviewNotes.length;
@@ -7143,17 +7771,12 @@
         });
       }
 
-      function getActivePreviewSelectionAnchorForBlock(blockEl) {
-        if (!blockEl) return null;
-        const blockKey = getPreviewCommentBlockKey(blockEl);
-        return activePreviewCommentSelection && activePreviewCommentSelection.blockKey === blockKey
-          ? activePreviewCommentSelection
-          : null;
+      function getActivePreviewSelectionAnchorForPane(paneId) {
+        return getActivePreviewSelectionForPane(paneId);
       }
 
-      function addReviewNoteFromPreviewSelection(blockEl) {
-        if (!blockEl) return null;
-        const anchor = getActivePreviewSelectionAnchorForBlock(blockEl);
+      function addReviewNoteFromPreviewSelection(paneId) {
+        const anchor = getActivePreviewSelectionAnchorForPane(paneId);
         if (!anchor) {
           setStatus("Select some preview text within a single block first.", "warning");
           return null;
@@ -7189,6 +7812,12 @@
         if (editorSelectionCommentBtn) {
           editorSelectionCommentBtn.hidden = true;
         }
+        if (editorSelectionJumpBtn) {
+          editorSelectionJumpBtn.hidden = true;
+        }
+        if (editorSelectionActionsEl) {
+          editorSelectionActionsEl.hidden = true;
+        }
         const shouldOpenReviewNotes = !isReviewNotesOpen();
         pendingReviewNoteFocusId = note.id;
         setReviewNotes(reviewNotes.concat([note]));
@@ -7218,6 +7847,30 @@
         });
       }
 
+      function jumpToEditorSelectionInPreview() {
+        if (editorView !== "markdown") {
+          setStatus("Switch to Editor (Raw) before jumping from an editor selection.", "warning");
+          return false;
+        }
+        if (rightView !== "editor-preview" || !critiqueViewEl || !supportsPreviewCommentsForCurrentEditor()) {
+          setStatus("Open Editor (Preview) on the right to jump the current editor selection there.", "warning");
+          return false;
+        }
+        const anchor = getEditorAnchorForReviewNote();
+        const jumped = revealReviewNoteInPreview(anchor);
+        if (!jumped) {
+          setStatus("Could not find the current editor selection in the preview.", "warning");
+          return false;
+        }
+        const current = String(sourceTextEl.value || "");
+        const range = resolveReviewNoteRange(anchor, current);
+        if (range) {
+          scrollEditorRangeIntoView(range);
+        }
+        setStatus("Jumped to the current editor selection in the preview.", "success");
+        return true;
+      }
+
       function addReviewNoteFromEditorLine() {
         if (editorView !== "markdown") {
           setStatus("Switch to Editor (Raw) before adding a line comment.", "warning");
@@ -7260,23 +7913,44 @@
         return true;
       }
 
-      function jumpToPreviewSelection(blockEl) {
-        if (!blockEl) return false;
-        const anchor = getActivePreviewSelectionAnchorForBlock(blockEl);
+      function jumpToPreviewSelection(paneId) {
+        const anchor = getActivePreviewSelectionAnchorForPane(paneId);
         if (!anchor) {
           setStatus("Select some preview text within a single block first.", "warning");
           return false;
         }
-        const jumped = jumpToReviewAnchor(anchor, {
+        const previewNote = normalizeReviewNote(anchor);
+        const jumped = jumpToReviewAnchor(previewNote, {
           statusMessage: "Jumped to preview selection in the raw editor.",
+          afterJump: () => {
+            const paneEl = getPreviewSelectionPaneElement(paneId);
+            if (paneEl && previewNote) {
+              revealReviewNoteInPreviewElement(paneEl, previewNote);
+            }
+            const schedule = typeof window.requestAnimationFrame === "function"
+              ? window.requestAnimationFrame.bind(window)
+              : (cb) => window.setTimeout(cb, 16);
+            schedule(() => {
+              const selection = typeof window.getSelection === "function" ? window.getSelection() : null;
+              if (selection && typeof selection.removeAllRanges === "function") {
+                selection.removeAllRanges();
+              }
+              clearPreviewCommentSelection();
+              const current = String(sourceTextEl && sourceTextEl.value ? sourceTextEl.value : "");
+              const range = resolveReviewNoteRange(previewNote, current);
+              if (range && sourceTextEl) {
+                try {
+                  sourceTextEl.focus({ preventScroll: true });
+                } catch {
+                  sourceTextEl.focus();
+                }
+                if (typeof sourceTextEl.setSelectionRange === "function") {
+                  sourceTextEl.setSelectionRange(range.start, range.end);
+                }
+              }
+            });
+          },
         });
-        if (jumped) {
-          const selection = typeof window.getSelection === "function" ? window.getSelection() : null;
-          if (selection && typeof selection.removeAllRanges === "function") {
-            selection.removeAllRanges();
-          }
-          clearPreviewCommentSelection();
-        }
         return jumped;
       }
 
@@ -7429,6 +8103,9 @@
         if (isReviewNotesOpen()) {
           closeReviewNotes({ focusTarget: null });
         }
+        if (isOutlineOpen()) {
+          closeOutline({ focusTarget: null });
+        }
         scratchpadReturnFocusEl = document.activeElement && document.activeElement !== document.body
           ? document.activeElement
           : sourceTextEl;
@@ -7472,6 +8149,9 @@
         if (isScratchpadOpen()) {
           closeScratchpad({ focusTarget: null });
         }
+        if (isOutlineOpen()) {
+          closeOutline({ focusTarget: null });
+        }
         reviewNotesReturnFocusEl = document.activeElement && document.activeElement !== document.body
           ? document.activeElement
           : sourceTextEl;
@@ -7589,6 +8269,7 @@
         if (editorView === "preview") {
           scheduleSourcePreviewRender(0);
         }
+        updateOutlineUi();
       }
 
       function setEditorHighlightMode(mode) {
@@ -8788,6 +9469,7 @@
         renderSourcePreview({ previewDelayMs: PREVIEW_INPUT_DEBOUNCE_MS });
         scheduleEditorMetaUpdate();
         updateEditorSelectionCommentUi();
+        updateOutlineUi();
         if (isReviewNotesOpen() && reviewNotes.length > 0) {
           renderReviewNotesList();
           updateReviewNotesUi();
@@ -9176,6 +9858,35 @@
         });
       }
 
+      if (outlineBtn) {
+        outlineBtn.addEventListener("click", () => {
+          toggleOutline();
+        });
+      }
+
+      if (outlineCloseBtn) {
+        outlineCloseBtn.addEventListener("click", () => {
+          closeOutline();
+        });
+      }
+
+      if (outlineDoneBtn) {
+        outlineDoneBtn.addEventListener("click", () => {
+          closeOutline();
+        });
+      }
+
+      if (outlineListEl) {
+        outlineListEl.addEventListener("click", (event) => {
+          const target = event.target;
+          const entryBtn = target instanceof Element ? target.closest(".outline-entry") : null;
+          if (!entryBtn) return;
+          const outlineId = entryBtn.getAttribute("data-outline-id") || "";
+          if (!outlineId) return;
+          jumpToOutlineEntry(outlineId);
+        });
+      }
+
       if (reviewNotesCloseBtn) {
         reviewNotesCloseBtn.addEventListener("click", () => {
           closeReviewNotes();
@@ -9203,6 +9914,15 @@
         });
       }
 
+      if (editorSelectionJumpBtn) {
+        editorSelectionJumpBtn.addEventListener("mousedown", (event) => {
+          event.preventDefault();
+        });
+        editorSelectionJumpBtn.addEventListener("click", () => {
+          jumpToEditorSelectionInPreview();
+        });
+      }
+
       if (reviewNotesInlineAllBtn) {
         reviewNotesInlineAllBtn.addEventListener("click", () => {
           toggleAllReviewNotesInlineAnnotations();
@@ -9231,18 +9951,17 @@
         const target = event.target;
         const actionBtn = target instanceof Element ? target.closest(".preview-comment-add, .preview-comment-jump, .preview-comment-summary") : null;
         if (!actionBtn) return;
-        const blockEl = actionBtn.closest(".preview-comment-block");
-        if (!blockEl) return;
         event.preventDefault();
         event.stopPropagation();
         const mode = String(actionBtn.dataset && actionBtn.dataset.previewCommentMode ? actionBtn.dataset.previewCommentMode : "");
         if (!mode || !mode.startsWith("selection")) return;
+        const paneId = String(actionBtn.dataset && actionBtn.dataset.previewPane ? actionBtn.dataset.previewPane : "");
         const action = String(actionBtn.dataset && actionBtn.dataset.previewCommentAction ? actionBtn.dataset.previewCommentAction : "comment");
         if (action === "jump") {
-          jumpToPreviewSelection(blockEl);
+          jumpToPreviewSelection(paneId);
           return;
         }
-        addReviewNoteFromPreviewSelection(blockEl);
+        addReviewNoteFromPreviewSelection(paneId);
       }
 
       if (leftPaneEl) {