pi-studio 0.5.45 → 0.5.46

package/client/studio-client.js

@@ -53,6 +53,7 @@
       const lineNumberGutterContentEl = document.getElementById("lineNumberGutterContent");
       const lineNumberMeasureEl = document.getElementById("lineNumberMeasure");
       const sourcePreviewEl = document.getElementById("sourcePreview");
+      const editorSelectionCommentBtn = document.getElementById("editorSelectionCommentBtn");
       const leftPaneEl = document.getElementById("leftPane");
       const rightPaneEl = document.getElementById("rightPane");
       const sourceBadgeEl = document.getElementById("sourceBadge");
@@ -304,6 +305,8 @@
       let reviewNotesLoadNonce = 0;
       let pendingReviewNoteFocusId = null;
       let pendingReviewNoteInlineFocusId = null;
+      let activePreviewCommentSelection = null;
+      const previewJumpHighlightState = new WeakMap();
       const PREVIEW_ANNOTATION_PLACEHOLDER_PREFIX = "PISTUDIOANNOT";
       const annotationHelpers = globalThis.PiStudioAnnotationHelpers;
       if (!annotationHelpers || typeof annotationHelpers.collectInlineAnnotationMarkers !== "function") {
@@ -2528,6 +2531,7 @@
             if (nonce !== responsePreviewRenderNonce || (rightView !== "preview" && rightView !== "editor-preview")) return;
           }
 
+          clearPreviewJumpHighlight(targetEl);
           finishPreviewRender(targetEl);
           targetEl.innerHTML = sanitizeRenderedHtml(renderedHtml, markdown);
           applyPreviewAnnotationPlaceholdersToElement(targetEl, previewPrepared.placeholders);
@@ -2541,6 +2545,15 @@
           await renderMermaidInElement(targetEl);
           await renderMathFallbackInElement(targetEl);
 
+          const shouldDecoratePreviewComments = supportsPreviewCommentsForCurrentEditor()
+            && (
+              (pane === "source" && editorView === "preview")
+              || (pane === "response" && rightView === "editor-preview")
+            );
+          if (shouldDecoratePreviewComments) {
+            decorateRenderedEditorPreviewComments(targetEl, sourceTextEl.value || "");
+          }
+
           // Warn if relative images are present but unlikely to resolve (non-file-backed content)
           if (!sourceState.path && !(resourceDirInput && resourceDirInput.value.trim())) {
             var hasRelativeImages = /!\[.*?\]\((?!https?:\/\/|data:)[^)]+\)/.test(markdown || "");
@@ -2562,6 +2575,7 @@
           }
 
           const detail = error && error.message ? error.message : String(error || "unknown error");
+          clearPreviewJumpHighlight(targetEl);
           finishPreviewRender(targetEl);
           targetEl.innerHTML = buildPreviewErrorHtml("Preview renderer unavailable (" + detail + "). Showing plain markdown.", markdown);
           if (pane === "response") {
@@ -2905,6 +2919,9 @@
         const value = String(nextText || "");
         const preserveScroll = Boolean(options && options.preserveScroll);
         const preserveSelection = Boolean(options && options.preserveSelection);
+        if (activePreviewCommentSelection) {
+          clearPreviewCommentSelection();
+        }
         const previousScrollTop = sourceTextEl.scrollTop;
         const previousScrollLeft = sourceTextEl.scrollLeft;
         const previousSelectionStart = sourceTextEl.selectionStart;
@@ -2943,6 +2960,7 @@
         if (!options || options.updateMeta !== false) {
           scheduleEditorMetaUpdate();
         }
+        updateEditorSelectionCommentUi();
       }
 
       function setEditorView(nextView) {
@@ -2961,6 +2979,7 @@
         }
 
         if (!showPreview) {
+          clearPreviewJumpHighlight(sourcePreviewEl);
           finishPreviewRender(sourcePreviewEl);
         }
 
@@ -2975,6 +2994,7 @@
           scheduleEditorLineNumberRender();
         }
         updateReviewNotesUi();
+        updateEditorSelectionCommentUi();
       }
 
       function setRightView(nextView) {
@@ -2989,6 +3009,9 @@
           window.clearTimeout(responseEditorPreviewTimer);
           responseEditorPreviewTimer = null;
         }
+        if (rightView !== "editor-preview") {
+          clearPreviewJumpHighlight(critiqueViewEl);
+        }
 
         refreshResponseUi();
         syncActionButtons();
@@ -4082,6 +4105,7 @@
           lineStart,
           lineEnd,
           selectedText: typeof note.selectedText === "string" ? note.selectedText : "",
+          selectedDisplayText: typeof note.selectedDisplayText === "string" ? note.selectedDisplayText : "",
         };
       }
 
@@ -4171,6 +4195,7 @@
         }
         updateReviewNotesUi();
         renderReviewNotesList();
+        refreshRenderedEditorPreviewComments();
         if (editorView === "markdown") {
           scheduleEditorLineNumberRender();
         }
@@ -4192,7 +4217,7 @@
       }
 
       function summarizeReviewNoteQuote(note) {
-        const normalized = String(note && note.selectedText ? note.selectedText : "")
+        const normalized = String(note && (note.selectedDisplayText || note.selectedText) ? (note.selectedDisplayText || note.selectedText) : "")
           .replace(/\s+/g, " ")
           .trim();
         if (!normalized) return "Anchor: current line / empty selection";
@@ -4252,6 +4277,7 @@
             lineStart: getLineNumberAtOffset(current, safeStart),
             lineEnd: getLineNumberAtOffset(current, Math.max(safeStart, safeEnd - 1)),
             selectedText: current.slice(safeStart, safeEnd),
+            selectedDisplayText: current.slice(safeStart, safeEnd),
           };
         }
         const lineRange = getLineRangeAtOffset(current, safeStart);
@@ -4261,6 +4287,23 @@
           lineStart: lineRange.lineNumber,
           lineEnd: lineRange.lineNumber,
           selectedText: current.slice(lineRange.start, lineRange.end),
+          selectedDisplayText: current.slice(lineRange.start, lineRange.end),
+        };
+      }
+
+      function getEditorLineAnchorForReviewNote() {
+        const current = String(sourceTextEl.value || "");
+        const caret = typeof sourceTextEl.selectionStart === "number"
+          ? sourceTextEl.selectionStart
+          : 0;
+        const lineRange = getLineRangeAtOffset(current, Math.max(0, Math.min(caret, current.length)));
+        return {
+          selectionStart: lineRange.start,
+          selectionEnd: lineRange.end,
+          lineStart: lineRange.lineNumber,
+          lineEnd: lineRange.lineNumber,
+          selectedText: current.slice(lineRange.start, lineRange.end),
+          selectedDisplayText: current.slice(lineRange.start, lineRange.end),
         };
       }
 
@@ -4314,6 +4357,972 @@
         return lineMap;
       }
 
+      function supportsPreviewCommentsForCurrentEditor() {
+        return editorLanguage === "markdown";
+      }
+
+      function getPreviewCommentBlockKindLabel(kind) {
+        if (kind === "heading") return "heading";
+        if (kind === "blockquote") return "quote block";
+        if (kind === "list") return "list";
+        if (kind === "code") return "code block";
+        if (kind === "table") return "table";
+        return "paragraph";
+      }
+
+      function supportsPreviewSelectionCommentsForBlockKind(kind) {
+        return kind === "paragraph" || kind === "heading" || kind === "blockquote" || kind === "list";
+      }
+
+      function normalizeVisiblePreviewText(text) {
+        return String(text || "").replace(/\s+/g, " ").trim();
+      }
+
+      function appendMappedPreviewSlice(chars, rawOffsets, lineText, lineBaseOffset, start, end) {
+        const safeStart = Math.max(0, Math.min(start, lineText.length));
+        const safeEnd = Math.max(safeStart, Math.min(end, lineText.length));
+        for (let i = safeStart; i < safeEnd; i += 1) {
+          chars.push(lineText[i]);
+          rawOffsets.push(lineBaseOffset + i);
+        }
+      }
+
+      function buildPreviewSelectionSourceBody(blockText, kind) {
+        const source = String(blockText || "");
+        const lines = source.split("\n");
+        const lineOffsets = [];
+        let runningOffset = 0;
+        for (const line of lines) {
+          lineOffsets.push(runningOffset);
+          runningOffset += line.length + 1;
+        }
+
+        const chars = [];
+        const rawOffsets = [];
+
+        function appendLineWithStart(lineIndex, start, end) {
+          const line = lineIndex >= 0 && lineIndex < lines.length ? lines[lineIndex] : "";
+          appendMappedPreviewSlice(chars, rawOffsets, line, lineOffsets[lineIndex] || 0, start, end);
+          if (lineIndex < lines.length - 1) {
+            chars.push("\n");
+            rawOffsets.push((lineOffsets[lineIndex] || 0) + line.length);
+          }
+        }
+
+        if (kind === "heading") {
+          const firstLine = lines[0] || "";
+          const atxMatch = firstLine.match(/^ {0,3}#{1,6}(?:[ \t]+|$)/);
+          if (atxMatch) {
+            const start = atxMatch[0].length;
+            let end = firstLine.length;
+            const closingMatch = firstLine.slice(start).match(/[ \t]+#+[ \t]*$/);
+            if (closingMatch) {
+              end -= closingMatch[0].length;
+            }
+            appendMappedPreviewSlice(chars, rawOffsets, firstLine, lineOffsets[0] || 0, start, end);
+            return { text: chars.join(""), rawOffsets };
+          }
+          if (lines.length >= 2 && /^ {0,3}(?:={3,}|-{3,})\s*$/.test(lines[1] || "")) {
+            appendMappedPreviewSlice(chars, rawOffsets, firstLine, lineOffsets[0] || 0, 0, firstLine.length);
+            return { text: chars.join(""), rawOffsets };
+          }
+        }
+
+        for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+          const line = lines[lineIndex] || "";
+          if (kind === "blockquote") {
+            const prefixMatch = line.match(/^ {0,3}> ?/);
+            appendLineWithStart(lineIndex, prefixMatch ? prefixMatch[0].length : 0, line.length);
+            continue;
+          }
+          if (kind === "list") {
+            if (!line.trim()) {
+              appendLineWithStart(lineIndex, 0, 0);
+              continue;
+            }
+            const itemMatch = line.match(/^ {0,3}(?:[*+-]|\d+[.)])(?:[ \t]+|$)/);
+            if (itemMatch) {
+              appendLineWithStart(lineIndex, itemMatch[0].length, line.length);
+              continue;
+            }
+            const continuationMatch = line.match(/^(?: {1,4}|\t)/);
+            appendLineWithStart(lineIndex, continuationMatch ? continuationMatch[0].length : 0, line.length);
+            continue;
+          }
+          appendLineWithStart(lineIndex, 0, line.length);
+        }
+
+        return { text: chars.join(""), rawOffsets };
+      }
+
+      function buildPreviewInlineDisplayMap(text, rawOffsets) {
+        const source = String(text || "");
+        const rawMap = Array.isArray(rawOffsets) ? rawOffsets : [];
+        const displayChars = [];
+        const charStarts = [];
+        const charEnds = [];
+
+        function appendChar(character, rawStart, rawEnd) {
+          displayChars.push(character);
+          charStarts.push(rawStart);
+          charEnds.push(rawEnd);
+        }
+
+        function appendNestedRange(startIndex, endIndex) {
+          const nested = buildPreviewInlineDisplayMap(
+            source.slice(startIndex, endIndex),
+            rawMap.slice(startIndex, endIndex),
+          );
+          for (let i = 0; i < nested.text.length; i += 1) {
+            appendChar(nested.text[i], nested.charStarts[i], nested.charEnds[i]);
+          }
+        }
+
+        let index = 0;
+        while (index < source.length) {
+          const remaining = source.slice(index);
+          const linkMatch = remaining.match(/^!?\[([^\]]*)\]\(([^)]*)\)/);
+          if (linkMatch) {
+            const labelStart = index + (remaining[0] === "!" ? 2 : 1);
+            const labelEnd = labelStart + String(linkMatch[1] || "").length;
+            appendNestedRange(labelStart, labelEnd);
+            index += linkMatch[0].length;
+            continue;
+          }
+
+          if (source[index] === "`") {
+            let tickCount = 1;
+            while (source[index + tickCount] === "`") tickCount += 1;
+            const fence = "`".repeat(tickCount);
+            const closeIndex = source.indexOf(fence, index + tickCount);
+            if (closeIndex >= 0) {
+              for (let i = index + tickCount; i < closeIndex; i += 1) {
+                appendChar(source[i], rawMap[i], rawMap[i] + 1);
+              }
+              index = closeIndex + tickCount;
+              continue;
+            }
+          }
+
+          if (source[index] === "\\" && index + 1 < source.length) {
+            appendChar(source[index + 1], rawMap[index], rawMap[index + 1] + 1);
+            index += 2;
+            continue;
+          }
+
+          const htmlTagMatch = remaining.match(/^<\/?[A-Za-z][^>]*>/);
+          if (htmlTagMatch) {
+            index += htmlTagMatch[0].length;
+            continue;
+          }
+
+          const emphasisMatch = remaining.match(/^(?:\*\*\*|\*\*|\*|___|__|_|~~)/);
+          if (emphasisMatch) {
+            index += emphasisMatch[0].length;
+            continue;
+          }
+
+          appendChar(source[index], rawMap[index], rawMap[index] + 1);
+          index += 1;
+        }
+
+        return {
+          text: displayChars.join(""),
+          charStarts,
+          charEnds,
+        };
+      }
+
+      function buildNormalizedPreviewDisplayMap(displayText, charStarts, charEnds) {
+        const source = String(displayText || "");
+        const outChars = [];
+        const outStarts = [];
+        const outEnds = [];
+        let pendingWhitespaceStart = null;
+        let pendingWhitespaceEnd = null;
+
+        for (let i = 0; i < source.length; i += 1) {
+          const character = source[i];
+          if (/\s/.test(character)) {
+            if (outChars.length === 0) continue;
+            if (pendingWhitespaceStart == null) {
+              pendingWhitespaceStart = charStarts[i];
+            }
+            pendingWhitespaceEnd = charEnds[i];
+            continue;
+          }
+
+          if (pendingWhitespaceStart != null && pendingWhitespaceEnd != null) {
+            outChars.push(" ");
+            outStarts.push(pendingWhitespaceStart);
+            outEnds.push(pendingWhitespaceEnd);
+            pendingWhitespaceStart = null;
+            pendingWhitespaceEnd = null;
+          }
+
+          outChars.push(character);
+          outStarts.push(charStarts[i]);
+          outEnds.push(charEnds[i]);
+        }
+
+        return {
+          text: outChars.join(""),
+          charStarts: outStarts,
+          charEnds: outEnds,
+        };
+      }
+
+      function buildNormalizedDomTextMap(rootEl) {
+        if (!rootEl || typeof document.createTreeWalker !== "function") {
+          return { text: "", charStarts: [], charEnds: [] };
+        }
+        const walker = document.createTreeWalker(rootEl, NodeFilter.SHOW_TEXT);
+        const chars = [];
+        const starts = [];
+        const ends = [];
+        let node = walker.nextNode();
+        while (node) {
+          const textNode = node;
+          const value = typeof textNode.nodeValue === "string" ? textNode.nodeValue : "";
+          for (let i = 0; i < value.length; i += 1) {
+            chars.push(value[i]);
+            starts.push({ node: textNode, offset: i });
+            ends.push({ node: textNode, offset: i + 1 });
+          }
+          node = walker.nextNode();
+        }
+        return buildNormalizedPreviewDisplayMap(chars.join(""), starts, ends);
+      }
+
+      function findPreferredNormalizedTextMatch(haystack, needle, preferredIndex) {
+        const source = String(haystack || "");
+        const query = String(needle || "");
+        if (!source || !query) return -1;
+        let bestIndex = -1;
+        let bestScore = Number.POSITIVE_INFINITY;
+        const desiredIndex = Number.isFinite(preferredIndex) ? Math.max(0, preferredIndex) : 0;
+        for (let matchIndex = source.indexOf(query); matchIndex >= 0; matchIndex = source.indexOf(query, matchIndex + 1)) {
+          const score = Math.abs(matchIndex - desiredIndex);
+          if (score < bestScore) {
+            bestScore = score;
+            bestIndex = matchIndex;
+          }
+        }
+        return bestIndex;
+      }
+
+      function buildPreviewSelectionDisplayMap(blockText, kind) {
+        const body = buildPreviewSelectionSourceBody(blockText, kind);
+        const inlineMap = buildPreviewInlineDisplayMap(body.text, body.rawOffsets);
+        return buildNormalizedPreviewDisplayMap(inlineMap.text, inlineMap.charStarts, inlineMap.charEnds);
+      }
+
+      function getPreviewCommentBlockKey(blockEl) {
+        if (!blockEl || !blockEl.dataset) return "";
+        return [
+          String(blockEl.dataset.reviewNoteStart || ""),
+          String(blockEl.dataset.reviewNoteEnd || ""),
+          String(blockEl.dataset.previewCommentKind || ""),
+        ].join(":");
+      }
+
+      function getPreviewCommentSelectionKey(selection) {
+        if (!selection) return "";
+        return [
+          String(selection.blockKey || ""),
+          String(selection.selectionStart || 0),
+          String(selection.selectionEnd || 0),
+          String(selection.selectedDisplayText || ""),
+        ].join(":");
+      }
+
+      function setActivePreviewCommentSelection(nextSelection) {
+        const currentKey = getPreviewCommentSelectionKey(activePreviewCommentSelection);
+        const nextKey = getPreviewCommentSelectionKey(nextSelection);
+        if (currentKey === nextKey) return;
+        activePreviewCommentSelection = nextSelection || null;
+        refreshRenderedEditorPreviewComments();
+      }
+
+      function clearPreviewCommentSelection() {
+        setActivePreviewCommentSelection(null);
+      }
+
+      function findPreviewCommentBlockFromNode(node) {
+        if (!node) return null;
+        const element = node instanceof Element ? node : node.parentElement;
+        return element && typeof element.closest === "function"
+          ? element.closest(".preview-comment-block")
+          : null;
+      }
+
+      function unwrapPreviewJumpHighlightElement(element) {
+        if (!element || !element.parentNode) return;
+        const parent = element.parentNode;
+        while (element.firstChild) {
+          parent.insertBefore(element.firstChild, element);
+        }
+        parent.removeChild(element);
+        if (typeof parent.normalize === "function") {
+          parent.normalize();
+        }
+      }
+
+      function clearPreviewJumpHighlight(targetEl) {
+        if (!targetEl) return;
+        const state = previewJumpHighlightState.get(targetEl);
+        if (!state) return;
+        if (state.timer != null) {
+          window.clearTimeout(state.timer);
+        }
+        if (state.inlineHighlightEl) {
+          unwrapPreviewJumpHighlightElement(state.inlineHighlightEl);
+        }
+        if (state.contentEl && state.contentEl.classList) {
+          state.contentEl.classList.remove("preview-jump-highlight");
+        }
+        previewJumpHighlightState.delete(targetEl);
+      }
+
+      function setPreviewJumpHighlight(targetEl, contentEl, inlineHighlightEl) {
+        if (!targetEl || !contentEl) return;
+        clearPreviewJumpHighlight(targetEl);
+        if (contentEl.classList) {
+          contentEl.classList.add("preview-jump-highlight");
+        }
+        const timer = window.setTimeout(() => {
+          clearPreviewJumpHighlight(targetEl);
+        }, 1800);
+        previewJumpHighlightState.set(targetEl, {
+          contentEl,
+          inlineHighlightEl: inlineHighlightEl || null,
+          timer,
+        });
+      }
+
+      function rangesOverlap(startA, endA, startB, endB) {
+        const safeStartA = Math.max(0, Number(startA) || 0);
+        const safeStartB = Math.max(0, Number(startB) || 0);
+        const safeEndA = Math.max(safeStartA + 1, Number(endA) || safeStartA);
+        const safeEndB = Math.max(safeStartB + 1, Number(endB) || safeStartB);
+        return safeStartA < safeEndB && safeStartB < safeEndA;
+      }
+
+      function scanMarkdownPreviewCommentBlocks(markdown) {
+        const source = String(markdown || "").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;
+        }
+
+        function getLine(index) {
+          return index >= 0 && index < lines.length ? String(lines[index] || "") : "";
+        }
+
+        function isBlankLine(index) {
+          return /^\s*$/.test(getLine(index));
+        }
+
+        function lineStartsFence(index) {
+          return getLine(index).match(/^ {0,3}(`{3,}|~{3,})(.*)$/);
+        }
+
+        function isAtxHeadingLine(index) {
+          return /^ {0,3}#{1,6}(?:[ \t]+|$)/.test(getLine(index));
+        }
+
+        function isSetextUnderlineLine(index) {
+          return /^ {0,3}(?:={3,}|-{3,})\s*$/.test(getLine(index));
+        }
+
+        function isThematicBreakLine(index) {
+          return /^ {0,3}(?:(?:-\s*){3,}|(?:_\s*){3,}|(?:\*\s*){3,})$/.test(getLine(index));
+        }
+
+        function isBlockquoteLine(index) {
+          return /^ {0,3}> ?/.test(getLine(index));
+        }
+
+        function isListLine(index) {
+          return /^ {0,3}(?:[*+-]|\d+[.)])(?:[ \t]+|$)/.test(getLine(index));
+        }
+
+        function isContinuationIndentedLine(index) {
+          return /^(?: {2,}|\t+)/.test(getLine(index));
+        }
+
+        function isPotentialTableRow(index) {
+          const line = getLine(index);
+          return /\|/.test(line) && !/^\s*</.test(line);
+        }
+
+        function isTableDividerLine(index) {
+          return /^\s*\|?(?:\s*:?-{3,}:?\s*\|)+(?:\s*:?-{3,}:?\s*)?\|?\s*$/.test(getLine(index));
+        }
+
+        function isHtmlCommentStart(index) {
+          return /^\s*<!--/.test(getLine(index));
+        }
+
+        function makeBlock(kind, startLineIndex, endLineIndex) {
+          const safeStartLine = Math.max(0, Math.min(startLineIndex, Math.max(0, lines.length - 1)));
+          const safeEndLine = Math.max(safeStartLine, Math.min(endLineIndex, Math.max(0, lines.length - 1)));
+          const start = lineOffsets[safeStartLine] || 0;
+          const end = (lineOffsets[safeEndLine] || 0) + getLine(safeEndLine).length;
+          return {
+            kind,
+            start,
+            end,
+            lineStart: safeStartLine + 1,
+            lineEnd: safeEndLine + 1,
+          };
+        }
+
+        const blocks = [];
+        let index = 0;
+
+        if (/^\s*---\s*$/.test(getLine(0))) {
+          for (let i = 1; i < Math.min(lines.length, 80); i += 1) {
+            if (/^\s*(?:---|\.\.\.)\s*$/.test(getLine(i))) {
+              index = i + 1;
+              break;
+            }
+          }
+        }
+
+        while (index < lines.length) {
+          if (isBlankLine(index)) {
+            index += 1;
+            continue;
+          }
+
+          if (isHtmlCommentStart(index)) {
+            let endComment = index;
+            while (endComment < lines.length && getLine(endComment).indexOf("-->") === -1) {
+              endComment += 1;
+            }
+            index = Math.min(lines.length, endComment + 1);
+            continue;
+          }
+
+          if (isThematicBreakLine(index)) {
+            index += 1;
+            continue;
+          }
+
+          const fenceMatch = lineStartsFence(index);
+          if (fenceMatch) {
+            const marker = fenceMatch[1] || "";
+            const markerChar = marker[0] || "`";
+            const markerLength = marker.length;
+            let endFence = index;
+            for (let i = index + 1; i < lines.length; i += 1) {
+              const closingMatch = getLine(i).match(/^ {0,3}(`{3,}|~{3,})\s*$/);
+              if (closingMatch && closingMatch[1] && closingMatch[1][0] === markerChar && closingMatch[1].length >= markerLength) {
+                endFence = i;
+                break;
+              }
+              endFence = i;
+            }
+            blocks.push(makeBlock("code", index, endFence));
+            index = endFence + 1;
+            continue;
+          }
+
+          if (isAtxHeadingLine(index)) {
+            blocks.push(makeBlock("heading", index, index));
+            index += 1;
+            continue;
+          }
+
+          if (!isBlankLine(index) && index + 1 < lines.length && isSetextUnderlineLine(index + 1)) {
+            blocks.push(makeBlock("heading", index, index + 1));
+            index += 2;
+            continue;
+          }
+
+          if (isPotentialTableRow(index) && index + 1 < lines.length && isTableDividerLine(index + 1)) {
+            let endTable = index + 1;
+            for (let i = index + 2; i < lines.length; i += 1) {
+              if (isBlankLine(i) || !isPotentialTableRow(i)) break;
+              endTable = i;
+            }
+            blocks.push(makeBlock("table", index, endTable));
+            index = endTable + 1;
+            continue;
+          }
+
+          if (isBlockquoteLine(index)) {
+            let endQuote = index;
+            for (let i = index + 1; i < lines.length; i += 1) {
+              if (isBlockquoteLine(i)) {
+                endQuote = i;
+                continue;
+              }
+              if (isBlankLine(i) && i + 1 < lines.length && isBlockquoteLine(i + 1)) {
+                endQuote = i;
+                continue;
+              }
+              break;
+            }
+            blocks.push(makeBlock("blockquote", index, endQuote));
+            index = endQuote + 1;
+            continue;
+          }
+
+          if (isListLine(index)) {
+            let endList = index;
+            for (let i = index + 1; i < lines.length; i += 1) {
+              if (isBlankLine(i)) {
+                if (i + 1 < lines.length && (isListLine(i + 1) || isContinuationIndentedLine(i + 1))) {
+                  endList = i;
+                  continue;
+                }
+                break;
+              }
+              if (isListLine(i) || isContinuationIndentedLine(i)) {
+                endList = i;
+                continue;
+              }
+              if (isAtxHeadingLine(i) || isBlockquoteLine(i) || lineStartsFence(i) || (isPotentialTableRow(i) && i + 1 < lines.length && isTableDividerLine(i + 1))) {
+                break;
+              }
+              endList = i;
+            }
+            blocks.push(makeBlock("list", index, endList));
+            index = endList + 1;
+            continue;
+          }
+
+          let endParagraph = index;
+          for (let i = index + 1; i < lines.length; i += 1) {
+            if (isBlankLine(i) || isHtmlCommentStart(i) || lineStartsFence(i) || isAtxHeadingLine(i) || isBlockquoteLine(i) || isListLine(i)) {
+              break;
+            }
+            if (i + 1 < lines.length && (isSetextUnderlineLine(i + 1) || (isPotentialTableRow(i) && isTableDividerLine(i + 1)))) {
+              break;
+            }
+            endParagraph = i;
+          }
+          blocks.push(makeBlock("paragraph", index, endParagraph));
+          index = endParagraph + 1;
+        }
+
+        return blocks;
+      }
+
+      function getPreviewCommentTargetKind(element) {
+        if (!element || !(element instanceof Element)) return "";
+        const tag = element.tagName ? element.tagName.toUpperCase() : "";
+        if (/^H[1-6]$/.test(tag)) return "heading";
+        if (tag === "P") return "paragraph";
+        if (tag === "BLOCKQUOTE") return "blockquote";
+        if (tag === "UL" || tag === "OL") return "list";
+        if (tag === "TABLE") return "table";
+        if (tag === "PRE") return "code";
+        if (element.classList) {
+          if (
+            element.classList.contains("sourceCode")
+            || element.classList.contains("mermaid-container")
+          ) {
+            return "code";
+          }
+          if (
+            element.classList.contains("callout-note")
+            || element.classList.contains("callout-tip")
+            || element.classList.contains("callout-warning")
+            || element.classList.contains("callout-important")
+            || element.classList.contains("callout-caution")
+          ) {
+            return "blockquote";
+          }
+        }
+        return "";
+      }
+
+      function isPreviewCommentTargetElement(element) {
+        return Boolean(getPreviewCommentTargetKind(element));
+      }
+
+      function collectPreviewCommentTargetElements(targetEl) {
+        if (!targetEl || typeof targetEl.querySelectorAll !== "function") return [];
+        const selector = "h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, table, div.sourceCode, pre, .callout-note, .callout-tip, .callout-warning, .callout-important, .callout-caution, .mermaid-container";
+        return Array.from(targetEl.querySelectorAll(selector)).filter((element) => {
+          if (!isPreviewCommentTargetElement(element)) return false;
+          let ancestor = element.parentElement;
+          while (ancestor && ancestor !== targetEl) {
+            if (ancestor.classList && ancestor.classList.contains("preview-comment-block")) return false;
+            if (isPreviewCommentTargetElement(ancestor)) return false;
+            ancestor = ancestor.parentElement;
+          }
+          return true;
+        }).map((element) => ({
+          element,
+          kind: getPreviewCommentTargetKind(element),
+        }));
+      }
+
+      function getNormalizedPreviewCommentSourceBlockText(sourceText, sourceBlock) {
+        if (!sourceBlock) return "";
+        const blockText = String(sourceText || "").slice(sourceBlock.start, sourceBlock.end);
+        if (supportsPreviewSelectionCommentsForBlockKind(sourceBlock.kind)) {
+          return normalizeVisiblePreviewText(buildPreviewSelectionDisplayMap(blockText, sourceBlock.kind).text);
+        }
+        if (sourceBlock.kind === "code") {
+          return normalizeVisiblePreviewText(
+            blockText
+              .replace(/^ {0,3}(`{3,}|~{3,}).*$/gm, "")
+              .replace(/^ {0,3}$/gm, ""),
+          );
+        }
+        if (sourceBlock.kind === "table") {
+          return normalizeVisiblePreviewText(
+            blockText
+              .replace(/^\s*\|?(?:\s*:?-{3,}:?\s*\|)+(?:\s*:?-{3,}:?\s*)?\|?\s*$/gm, "")
+              .replace(/\|/g, " "),
+          );
+        }
+        return normalizeVisiblePreviewText(blockText);
+      }
+
+      function getNormalizedPreviewCommentTargetText(targetEntry) {
+        if (!targetEntry) return "";
+        if (typeof targetEntry.normalizedText === "string") return targetEntry.normalizedText;
+        targetEntry.normalizedText = normalizeVisiblePreviewText(
+          targetEntry.element && typeof targetEntry.element.textContent === "string"
+            ? targetEntry.element.textContent
+            : "",
+        );
+        return targetEntry.normalizedText;
+      }
+
+      function findMatchingPreviewCommentTargetIndex(sourceText, sourceBlock, targetBlocks, startIndex) {
+        const desiredKind = sourceBlock ? sourceBlock.kind : "";
+        const desiredText = getNormalizedPreviewCommentSourceBlockText(sourceText, sourceBlock);
+        let fallbackIndex = -1;
+        let containsIndex = -1;
+
+        for (let i = Math.max(0, startIndex || 0); i < targetBlocks.length; i += 1) {
+          const targetEntry = targetBlocks[i];
+          if (!targetEntry || targetEntry.kind !== desiredKind) continue;
+          if (fallbackIndex < 0) fallbackIndex = i;
+          const targetText = getNormalizedPreviewCommentTargetText(targetEntry);
+          if (desiredText && targetText) {
+            if (targetText === desiredText) {
+              return i;
+            }
+            if (containsIndex < 0 && (targetText.includes(desiredText) || desiredText.includes(targetText))) {
+              containsIndex = i;
+            }
+          }
+        }
+
+        if (containsIndex >= 0) return containsIndex;
+        return fallbackIndex;
+      }
+
+      function getPreviewCommentNotesForRange(start, end, sourceText, displayNotes) {
+        const source = String(sourceText || "");
+        const notes = Array.isArray(displayNotes) ? displayNotes : getDisplayReviewNotes();
+        return notes.filter((note) => {
+          const range = resolveReviewNoteRange(note, source);
+          return range && rangesOverlap(range.start, range.end, start, end);
+        });
+      }
+
+      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 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);
+
+        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");
+        }
+      }
+
+      function updatePreviewCommentBlocksForElement(targetEl) {
+        if (!targetEl || typeof targetEl.querySelectorAll !== "function") return;
+        const sourceText = String(sourceTextEl && sourceTextEl.value ? sourceTextEl.value : "");
+        Array.from(targetEl.querySelectorAll(".preview-comment-block")).forEach((blockEl) => {
+          updatePreviewCommentBlockState(blockEl, sourceText);
+        });
+      }
+
+      function decorateRenderedEditorPreviewComments(targetEl, sourceText) {
+        if (!targetEl || typeof targetEl.querySelectorAll !== "function") return;
+        const sourceBlocks = scanMarkdownPreviewCommentBlocks(sourceText);
+        const targetBlocks = collectPreviewCommentTargetElements(targetEl);
+        if (sourceBlocks.length === 0 || targetBlocks.length === 0) return;
+
+        let targetIndex = 0;
+        for (const sourceBlock of sourceBlocks) {
+          const matchedTargetIndex = findMatchingPreviewCommentTargetIndex(sourceText, sourceBlock, targetBlocks, targetIndex);
+          if (matchedTargetIndex < 0) continue;
+
+          const targetEntry = targetBlocks[matchedTargetIndex];
+          targetIndex = matchedTargetIndex + 1;
+          const originalElement = targetEntry && targetEntry.element ? targetEntry.element : null;
+          if (!originalElement || !originalElement.parentNode) continue;
+
+          const wrapper = document.createElement("div");
+          wrapper.className = "preview-comment-block";
+          wrapper.dataset.reviewNoteStart = String(sourceBlock.start);
+          wrapper.dataset.reviewNoteEnd = String(sourceBlock.end);
+          wrapper.dataset.reviewNoteLineStart = String(sourceBlock.lineStart);
+          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.textContent = "Comment";
+          controls.appendChild(addBtn);
+
+          originalElement.replaceWith(wrapper);
+          wrapper.appendChild(controls);
+          originalElement.classList.add("preview-comment-block-content");
+          wrapper.appendChild(originalElement);
+        }
+
+        updatePreviewCommentBlocksForElement(targetEl);
+      }
+
+      function refreshRenderedEditorPreviewComments() {
+        if (sourcePreviewEl && !sourcePreviewEl.hidden) {
+          updatePreviewCommentBlocksForElement(sourcePreviewEl);
+        }
+        if (critiqueViewEl && rightView === "editor-preview") {
+          updatePreviewCommentBlocksForElement(critiqueViewEl);
+        }
+      }
+
+      function buildReviewNoteAnchorFromPreviewBlock(blockEl) {
+        if (!blockEl || !blockEl.dataset) return null;
+        const source = String(sourceTextEl && sourceTextEl.value ? sourceTextEl.value : "");
+        const selectionStart = Math.max(0, Math.min(Number(blockEl.dataset.reviewNoteStart) || 0, source.length));
+        const selectionEnd = Math.max(selectionStart, Math.min(Number(blockEl.dataset.reviewNoteEnd) || selectionStart, source.length));
+        const lineStart = Math.max(1, Number(blockEl.dataset.reviewNoteLineStart) || 1);
+        const lineEnd = Math.max(lineStart, Number(blockEl.dataset.reviewNoteLineEnd) || lineStart);
+        return {
+          selectionStart,
+          selectionEnd,
+          lineStart,
+          lineEnd,
+          selectedText: source.slice(selectionStart, selectionEnd),
+          selectedDisplayText: source.slice(selectionStart, selectionEnd),
+        };
+      }
+
+      function buildReviewNoteAnchorFromPreviewSelection(blockEl, contentEl, range) {
+        if (!blockEl || !blockEl.dataset || !contentEl || !range) return null;
+        const kind = String(blockEl.dataset.previewCommentKind || "");
+        if (!supportsPreviewSelectionCommentsForBlockKind(kind)) return null;
+        if (!contentEl.contains(range.startContainer) || !contentEl.contains(range.endContainer)) return null;
+
+        const source = String(sourceTextEl && sourceTextEl.value ? sourceTextEl.value : "");
+        const blockStart = Math.max(0, Math.min(Number(blockEl.dataset.reviewNoteStart) || 0, source.length));
+        const blockEnd = Math.max(blockStart, Math.min(Number(blockEl.dataset.reviewNoteEnd) || blockStart, source.length));
+        if (blockEnd <= blockStart) return null;
+
+        const sourceBlockText = source.slice(blockStart, blockEnd);
+        const displayMap = buildPreviewSelectionDisplayMap(sourceBlockText, kind);
+        if (!displayMap.text || !displayMap.charStarts.length || !displayMap.charEnds.length) return null;
+
+        const prefixRange = document.createRange();
+        prefixRange.selectNodeContents(contentEl);
+        prefixRange.setEnd(range.startContainer, range.startOffset);
+        const prefixText = normalizeVisiblePreviewText(prefixRange.toString());
+        const selectedDisplayText = normalizeVisiblePreviewText(range.toString());
+        if (!selectedDisplayText) return null;
+
+        const desiredStart = Math.max(0, Math.min(prefixText.length, displayMap.text.length));
+        const bestIndex = findPreferredNormalizedTextMatch(displayMap.text, selectedDisplayText, desiredStart);
+        if (bestIndex < 0) return null;
+
+        const endIndex = bestIndex + selectedDisplayText.length - 1;
+        const rawStartRel = displayMap.charStarts[bestIndex];
+        const rawEndRel = displayMap.charEnds[endIndex];
+        if (!Number.isFinite(rawStartRel) || !Number.isFinite(rawEndRel) || rawEndRel <= rawStartRel) {
+          return null;
+        }
+
+        const selectionStart = blockStart + rawStartRel;
+        const selectionEnd = blockStart + rawEndRel;
+        return {
+          selectionStart,
+          selectionEnd,
+          lineStart: getLineNumberAtOffset(source, selectionStart),
+          lineEnd: getLineNumberAtOffset(source, Math.max(selectionStart, selectionEnd - 1)),
+          selectedText: source.slice(selectionStart, selectionEnd),
+          selectedDisplayText,
+        };
+      }
+
+      function getPreviewJumpNormalizedSelectionStart(note, blockEl, range) {
+        if (!note || !blockEl || !blockEl.dataset || !range) return 0;
+        const kind = String(blockEl.dataset.previewCommentKind || "");
+        const source = String(sourceTextEl && sourceTextEl.value ? sourceTextEl.value : "");
+        const blockStart = Math.max(0, Math.min(Number(blockEl.dataset.reviewNoteStart) || 0, source.length));
+        const blockEnd = Math.max(blockStart, Math.min(Number(blockEl.dataset.reviewNoteEnd) || blockStart, source.length));
+        const displayMap = buildPreviewSelectionDisplayMap(source.slice(blockStart, blockEnd), kind);
+        if (!displayMap || !displayMap.charStarts || displayMap.charStarts.length === 0) return 0;
+        const relativeStart = Math.max(0, range.start - blockStart);
+        for (let i = 0; i < displayMap.charStarts.length; i += 1) {
+          const charStart = Number(displayMap.charStarts[i]);
+          const charEnd = Number(displayMap.charEnds[i]);
+          if (charEnd > relativeStart && charStart <= relativeStart) {
+            return i;
+          }
+          if (charStart >= relativeStart) {
+            return i;
+          }
+        }
+        return Math.max(0, displayMap.text.length - 1);
+      }
+
+      function createPreviewJumpInlineHighlight(contentEl, blockEl, note, range) {
+        if (!contentEl || !note || !range) return null;
+        const selectedDisplayText = normalizeVisiblePreviewText(note.selectedDisplayText || note.selectedText || "");
+        if (!selectedDisplayText) return null;
+        const domMap = buildNormalizedDomTextMap(contentEl);
+        if (!domMap.text || !domMap.charStarts.length || !domMap.charEnds.length) return null;
+        const preferredStart = getPreviewJumpNormalizedSelectionStart(note, blockEl, range);
+        const matchIndex = findPreferredNormalizedTextMatch(domMap.text, selectedDisplayText, preferredStart);
+        if (matchIndex < 0) return null;
+        const endIndex = matchIndex + selectedDisplayText.length - 1;
+        const startRef = domMap.charStarts[matchIndex];
+        const endRef = domMap.charEnds[endIndex];
+        if (!startRef || !endRef || !startRef.node || !endRef.node) return null;
+
+        const domRange = document.createRange();
+        domRange.setStart(startRef.node, startRef.offset);
+        domRange.setEnd(endRef.node, endRef.offset);
+
+        const highlightEl = document.createElement("span");
+        highlightEl.className = "preview-comment-inline-highlight";
+        try {
+          domRange.surroundContents(highlightEl);
+        } catch {
+          const fragment = domRange.extractContents();
+          highlightEl.appendChild(fragment);
+          domRange.insertNode(highlightEl);
+        }
+        return highlightEl;
+      }
+
+      function findPreviewCommentBlockForRange(targetEl, range) {
+        if (!targetEl || !range || typeof targetEl.querySelectorAll !== "function") return null;
+        let bestBlock = null;
+        let bestScore = Number.NEGATIVE_INFINITY;
+        Array.from(targetEl.querySelectorAll(".preview-comment-block")).forEach((blockEl) => {
+          const blockStart = Math.max(0, Number(blockEl.dataset && blockEl.dataset.reviewNoteStart) || 0);
+          const blockEnd = Math.max(blockStart, Number(blockEl.dataset && blockEl.dataset.reviewNoteEnd) || blockStart);
+          const overlapStart = Math.max(blockStart, range.start);
+          const overlapEnd = Math.min(blockEnd, range.end);
+          const overlap = Math.max(0, overlapEnd - overlapStart);
+          const contains = range.start >= blockStart && range.end <= blockEnd;
+          const distance = contains
+            ? 0
+            : Math.min(Math.abs(range.start - blockEnd), Math.abs(range.end - blockStart));
+          const score = contains
+            ? (1000000 - (blockEnd - blockStart))
+            : (overlap > 0 ? overlap : -distance);
+          if (score > bestScore) {
+            bestScore = score;
+            bestBlock = blockEl;
+          }
+        });
+        return bestBlock;
+      }
+
+      function revealReviewNoteInPreviewElement(targetEl, note) {
+        if (!targetEl || !note) return false;
+        const source = String(sourceTextEl && sourceTextEl.value ? sourceTextEl.value : "");
+        const range = resolveReviewNoteRange(note, source);
+        if (!range) return false;
+        const blockEl = findPreviewCommentBlockForRange(targetEl, range);
+        if (!blockEl) return false;
+        const contentEl = blockEl.querySelector(".preview-comment-block-content") || blockEl;
+        const inlineHighlightEl = createPreviewJumpInlineHighlight(contentEl, blockEl, note, range);
+        if (typeof blockEl.scrollIntoView === "function") {
+          blockEl.scrollIntoView({ block: "center", inline: "nearest" });
+        }
+        setPreviewJumpHighlight(targetEl, contentEl, inlineHighlightEl);
+        return true;
+      }
+
+      function revealReviewNoteInPreview(note) {
+        if (rightView === "editor-preview" && critiqueViewEl && critiqueViewEl.isConnected) {
+          revealReviewNoteInPreviewElement(critiqueViewEl, note);
+        }
+      }
+
+      function updateActivePreviewCommentSelectionFromDom() {
+        const selection = typeof window.getSelection === "function" ? window.getSelection() : null;
+        if (!selection || selection.rangeCount <= 0 || selection.isCollapsed) {
+          clearPreviewCommentSelection();
+          return;
+        }
+
+        const range = selection.getRangeAt(0);
+        const startBlock = findPreviewCommentBlockFromNode(range.startContainer);
+        const endBlock = findPreviewCommentBlockFromNode(range.endContainer);
+        if (!startBlock || !endBlock || startBlock !== endBlock) {
+          clearPreviewCommentSelection();
+          return;
+        }
+
+        const contentEl = startBlock.querySelector(".preview-comment-block-content");
+        if (!contentEl || !contentEl.contains(range.startContainer) || !contentEl.contains(range.endContainer)) {
+          clearPreviewCommentSelection();
+          return;
+        }
+
+        const anchor = buildReviewNoteAnchorFromPreviewSelection(startBlock, contentEl, range);
+        if (!anchor) {
+          clearPreviewCommentSelection();
+          return;
+        }
+
+        setActivePreviewCommentSelection({
+          ...anchor,
+          blockKey: getPreviewCommentBlockKey(startBlock),
+        });
+      }
+
       function getDisplayReviewNotes() {
         const source = String(sourceTextEl && sourceTextEl.value ? sourceTextEl.value : "");
         return reviewNotes.slice().sort((left, right) => {
@@ -4386,6 +5395,7 @@
         reviewNotes = cloneReviewNotes(nextNotes);
         updateReviewNotesUi();
         renderReviewNotesList();
+        refreshRenderedEditorPreviewComments();
         if (editorView === "markdown") {
           scheduleEditorLineNumberRender();
         }
@@ -4394,6 +5404,22 @@
         }
       }
 
+      function updateEditorSelectionCommentUi() {
+        if (!editorSelectionCommentBtn) return;
+        const hasSelection = Boolean(
+          editorView === "markdown"
+          && document.activeElement === sourceTextEl
+          && typeof sourceTextEl.selectionStart === "number"
+          && typeof sourceTextEl.selectionEnd === "number"
+          && sourceTextEl.selectionEnd > sourceTextEl.selectionStart
+        );
+        editorSelectionCommentBtn.hidden = !hasSelection;
+        if (hasSelection) {
+          editorSelectionCommentBtn.title = "Create a new local comment from the current editor selection.";
+          editorSelectionCommentBtn.setAttribute("aria-label", editorSelectionCommentBtn.title);
+        }
+      }
+
       function updateReviewNotesUi() {
         const descriptor = getCurrentStudioDocumentDescriptor();
         const count = reviewNotes.length;
@@ -4421,8 +5447,10 @@
         if (reviewNotesAddBtn) {
           reviewNotesAddBtn.disabled = editorView !== "markdown";
           reviewNotesAddBtn.title = editorView === "markdown"
-            ? "Create a new local comment from the current editor selection, or from the current line if nothing is selected."
-            : "Switch to Editor (Raw) to anchor a comment to the current selection or line.";
+            ? "Create a new local comment on the current editor line."
+            : (supportsPreviewCommentsForCurrentEditor()
+              ? "Select preview text and use Comment for a local preview-anchored comment."
+              : "Switch to Editor (Raw) to comment on the current line.");
         }
         if (reviewNotesInlineAllBtn) {
           const currentText = String(sourceTextEl && sourceTextEl.value ? sourceTextEl.value : "");
@@ -4580,12 +5608,49 @@
         pendingReviewNoteInlineFocusId = null;
       }
 
-      function addReviewNoteFromEditorSelection() {
-        if (editorView !== "markdown") {
-          setStatus("Switch to Editor (Raw) before adding an anchored comment.", "warning");
-          return;
+      function focusReviewNotesForPreviewBlock(blockEl) {
+        if (!blockEl) return;
+        const start = Math.max(0, Number(blockEl.dataset && blockEl.dataset.reviewNoteStart) || 0);
+        const end = Math.max(start, Number(blockEl.dataset && blockEl.dataset.reviewNoteEnd) || start);
+        const source = String(sourceTextEl && sourceTextEl.value ? sourceTextEl.value : "");
+        const notes = getPreviewCommentNotesForRange(start, end, source);
+        if (!notes.length) return;
+        focusReviewNoteInPanel(notes[0].id);
+      }
+
+      function addReviewNoteFromPreviewBlock(blockEl) {
+        const anchor = buildReviewNoteAnchorFromPreviewBlock(blockEl);
+        if (!anchor) return null;
+        return addReviewNoteFromAnchor(anchor, {
+          statusMessage: "Added local comment from editor preview.",
+        });
+      }
+
+      function addReviewNoteFromPreviewSelection(blockEl) {
+        if (!blockEl) return null;
+        const blockKey = getPreviewCommentBlockKey(blockEl);
+        const anchor = activePreviewCommentSelection && activePreviewCommentSelection.blockKey === blockKey
+          ? activePreviewCommentSelection
+          : null;
+        if (!anchor) {
+          setStatus("Select some preview text within a single block first.", "warning");
+          return null;
         }
-        const anchor = getEditorAnchorForReviewNote();
+        const note = addReviewNoteFromAnchor(anchor, {
+          statusMessage: "Added local comment from preview selection.",
+        });
+        if (note) {
+          const selection = typeof window.getSelection === "function" ? window.getSelection() : null;
+          if (selection && typeof selection.removeAllRanges === "function") {
+            selection.removeAllRanges();
+          }
+          clearPreviewCommentSelection();
+        }
+        return note;
+      }
+
+      function addReviewNoteFromAnchor(anchor, options) {
+        if (!anchor || typeof anchor !== "object") return null;
         const note = normalizeReviewNote({
           id: makeRequestId(),
           text: "",
@@ -4596,14 +5661,47 @@
           lineStart: anchor.lineStart,
           lineEnd: anchor.lineEnd,
           selectedText: anchor.selectedText,
+          selectedDisplayText: typeof anchor.selectedDisplayText === "string" ? anchor.selectedDisplayText : (typeof anchor.selectedText === "string" ? anchor.selectedText : ""),
         });
-        if (!note) return;
+        if (!note) return null;
+        if (editorSelectionCommentBtn) {
+          editorSelectionCommentBtn.hidden = true;
+        }
         pendingReviewNoteFocusId = note.id;
         setReviewNotes(reviewNotes.concat([note]));
         if (!isReviewNotesOpen()) {
           openReviewNotes();
         }
-        setStatus("Added local comment.", "success");
+        const schedule = typeof window.requestAnimationFrame === "function"
+          ? window.requestAnimationFrame.bind(window)
+          : (cb) => window.setTimeout(cb, 16);
+        schedule(() => {
+          updateEditorSelectionCommentUi();
+        });
+        if (!options || options.status !== false) {
+          setStatus((options && options.statusMessage) || "Added local comment.", "success");
+        }
+        return note;
+      }
+
+      function addReviewNoteFromEditorSelection() {
+        if (editorView !== "markdown") {
+          setStatus("Switch to Editor (Raw) before adding an anchored comment.", "warning");
+          return;
+        }
+        addReviewNoteFromAnchor(getEditorAnchorForReviewNote(), {
+          statusMessage: "Added local comment.",
+        });
+      }
+
+      function addReviewNoteFromEditorLine() {
+        if (editorView !== "markdown") {
+          setStatus("Switch to Editor (Raw) before adding a line comment.", "warning");
+          return;
+        }
+        addReviewNoteFromAnchor(getEditorLineAnchorForReviewNote(), {
+          statusMessage: "Added local line comment.",
+        });
       }
 
       function jumpToReviewNote(noteId) {
@@ -4624,6 +5722,7 @@
           : (cb) => window.setTimeout(cb, 16);
         schedule(() => {
           scrollEditorRangeIntoView(range);
+          revealReviewNoteInPreview(note);
         });
       }
 
@@ -6116,14 +7215,43 @@
       });
 
       sourceTextEl.addEventListener("input", () => {
+        if (activePreviewCommentSelection) {
+          clearPreviewCommentSelection();
+        }
         renderSourcePreview({ previewDelayMs: PREVIEW_INPUT_DEBOUNCE_MS });
         scheduleEditorMetaUpdate();
+        updateEditorSelectionCommentUi();
         if (isReviewNotesOpen() && reviewNotes.length > 0) {
           renderReviewNotesList();
           updateReviewNotesUi();
         }
       });
 
+      sourceTextEl.addEventListener("select", () => {
+        updateEditorSelectionCommentUi();
+      });
+
+      sourceTextEl.addEventListener("keyup", () => {
+        updateEditorSelectionCommentUi();
+      });
+
+      sourceTextEl.addEventListener("mouseup", () => {
+        updateEditorSelectionCommentUi();
+      });
+
+      sourceTextEl.addEventListener("focus", () => {
+        updateEditorSelectionCommentUi();
+      });
+
+      sourceTextEl.addEventListener("blur", () => {
+        const schedule = typeof window.requestAnimationFrame === "function"
+          ? window.requestAnimationFrame.bind(window)
+          : (cb) => window.setTimeout(cb, 16);
+        schedule(() => {
+          updateEditorSelectionCommentUi();
+        });
+      });
+
       sourceTextEl.addEventListener("scroll", () => {
         if (editorView !== "markdown") return;
         syncEditorHighlightScroll();
@@ -6487,6 +7615,15 @@
 
       if (reviewNotesAddBtn) {
         reviewNotesAddBtn.addEventListener("click", () => {
+          addReviewNoteFromEditorLine();
+        });
+      }
+
+      if (editorSelectionCommentBtn) {
+        editorSelectionCommentBtn.addEventListener("mousedown", (event) => {
+          event.preventDefault();
+        });
+        editorSelectionCommentBtn.addEventListener("click", () => {
           addReviewNoteFromEditorSelection();
         });
       }
@@ -6508,6 +7645,42 @@
         });
       }
 
+      function handlePreviewCommentActionMouseDown(event) {
+        const target = event.target;
+        const actionBtn = target instanceof Element ? target.closest(".preview-comment-add, .preview-comment-summary") : null;
+        if (!actionBtn) return;
+        event.preventDefault();
+      }
+
+      function handlePreviewCommentActionClick(event) {
+        const target = event.target;
+        const actionBtn = target instanceof Element ? target.closest(".preview-comment-add, .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 !== "selection") return;
+        addReviewNoteFromPreviewSelection(blockEl);
+      }
+
+      if (leftPaneEl) {
+        leftPaneEl.addEventListener("mousedown", handlePreviewCommentActionMouseDown);
+        leftPaneEl.addEventListener("click", handlePreviewCommentActionClick);
+      }
+
+      if (rightPaneEl) {
+        rightPaneEl.addEventListener("mousedown", handlePreviewCommentActionMouseDown);
+        rightPaneEl.addEventListener("click", handlePreviewCommentActionClick);
+      }
+
+      if (typeof document.addEventListener === "function") {
+        document.addEventListener("selectionchange", () => {
+          updateActivePreviewCommentSelectionFromDom();
+        });
+      }
+
       if (scratchpadBtn) {
         scratchpadBtn.addEventListener("click", () => {
           openScratchpad();