From 60287747b2d960af570cd6ab44c23203ca7e9c56 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Mon, 13 Jul 2026 01:05:22 +0530
Subject: [PATCH 01/18] feat(review): add comments and suggestion mode

---
 README.md                          |  12 +-
 desktop-app/resources/index.html   |  72 ++-
 desktop-app/resources/js/script.js | 917 ++++++++++++++++++++++++++++-
 desktop-app/resources/styles.css   | 614 ++++++++++++++++++-
 index.html                         |  72 ++-
 script.js                          | 917 ++++++++++++++++++++++++++++-
 styles.css                         | 614 ++++++++++++++++++-
 wiki/Features.md                   |  31 +-
 wiki/Usage-Guide.md                |  14 +
 9 files changed, 3228 insertions(+), 35 deletions(-)

diff --git a/README.md b/README.md
index 3b0fb9d3..d6be1e4b 100644
--- a/README.md
+++ b/README.md
@@ -94,11 +94,12 @@ Markdown Viewer handles the usual Markdown basics, but its real value is helping
    - **STL 3D Model Renderer**: inspect 3D model previews alongside technical notes.
    - **ABC Music Player & Sheet Music Viewer**: render sheet music and play notation in the browser.
 
-3. **Live Share Temporary Rooms**: collaborate in real time for quick editing sessions, reviews, or pair-writing, with server-checked host, editable, and view-only capabilities.
-4. **Share Snapshot Links**: create view-only or editable point-in-time links when you need to send a document state quickly. Large stored snapshots expire after 90 days.
-5. **LaTeX Math Notation**: render inline and display formulas with MathJax, useful for math-heavy notes, papers, and technical explanations.
-6. **Markdown to PDF, HTML & PNG Export**: export Markdown, HTML, PNG, Browser Print / Save as PDF, or Legacy Raster PDF for documents that need sharing, printing, or archiving.
-7. **Privacy and Security Controls**: use Private mode to prevent document persistence, clear saved local data, and rely on sanitized previews, hardened export HTML, and restricted desktop native APIs.
+3. **Comments & Suggestions**: open a read-only Review workspace and attach feedback to rendered headings, paragraphs, code blocks, and diagrams without changing the Markdown source. Resolve threads or copy a review summary when the feedback is ready to share.
+4. **Live Share Temporary Rooms**: collaborate in real time for quick editing sessions, reviews, or pair-writing, with server-checked host, editable, and view-only capabilities.
+5. **Share Snapshot Links**: create view-only or editable point-in-time links when you need to send a document state quickly. Large stored snapshots expire after 90 days.
+6. **LaTeX Math Notation**: render inline and display formulas with MathJax, useful for math-heavy notes, papers, and technical explanations.
+7. **Markdown to PDF, HTML & PNG Export**: export Markdown, HTML, PNG, Browser Print / Save as PDF, or Legacy Raster PDF for documents that need sharing, printing, or archiving.
+8. **Privacy and Security Controls**: use Private mode to prevent document persistence, clear saved local data, and rely on sanitized previews, hardened export HTML, and restricted desktop native APIs.
 
 For the full feature list, details, limitations, and privacy notes, see the [features reference](wiki/Features.md#product-summary).
 
@@ -128,6 +129,7 @@ Markdown Viewer works well as a Markdown diagram editor for technical notes, doc
 
 ## Sharing, Collaboration, and Export
 
+- **Comments & Suggestions** provides a local, per-document review layer. Review pins attach comments or suggestions to rendered headings, paragraphs, code blocks, and diagrams while the Markdown stays read-only. Threads can be resolved, reopened, deleted, or copied as a Markdown summary. Review data stays in the local tab workspace and is not automatically included in Share Snapshot or Live Share.
 - **Share Snapshot** creates quick links for point-in-time Markdown sharing. Small documents can stay in the URL hash; larger snapshots use temporary Cloudflare KV storage for up to 90 days when that backend is configured. Snapshot links are bearer links: anyone who has the link can open it.
 <p align="center">
   <img src="https://github.com/user-attachments/assets/e62ca1a0-011a-4b01-90f9-e72638b9a6d5" alt="Share Snapshot" width="90%" />
diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index e4949d34..7e4e6d8c 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -109,6 +109,11 @@ <h1 class="h4 mb-0 me-2">Markdown Viewer<span class="visually-hidden"> - Online
                         <i class="bi bi-broadcast"></i> <span class="btn-text">Live Share</span>
                     </button>
                     <div id="live-share-toolbar-participants" class="live-share-toolbar-participants" aria-label="Live Share participants" hidden></div>
+
+                    <button id="review-toggle" class="tool-button review-toggle" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
+                        <i class="bi bi-chat-square-text"></i> <span class="btn-text">Review</span>
+                        <span id="review-count-badge" class="review-count-badge" aria-label="0 open review items" hidden>0</span>
+                    </button>
                     
                     <div class="dropdown me-1">
                         <button class="tool-button dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Switch Language">
@@ -236,6 +241,11 @@ <h2 class="h5 m-0">Menu</h2>
                                 <span class="mobile-menu-item-label"><i class="bi bi-broadcast me-2"></i><span id="mobile-live-share-label">Live Share</span></span>
                                 <span id="mobile-live-share-participants" class="live-share-toolbar-participants mobile-live-share-participants" aria-label="Live Share participants" hidden></span>
                             </button>
+
+                            <button id="mobile-review-toggle" class="mobile-menu-item" type="button" title="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
+                                <span><i class="bi bi-chat-square-text me-2"></i>Review</span>
+                                <span id="mobile-review-count-badge" class="review-count-badge" aria-label="0 open review items" hidden>0</span>
+                            </button>
                             
                             <div class="mobile-menu-item dropdown w-100 p-0 border-0">
                                 <button class="mobile-menu-item w-100 text-start dropdown-toggle" type="button" id="mobileLanguageDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Switch Language">
@@ -538,6 +548,7 @@ <h3 class="modal-section-title">Application shortcuts</h3>
                 <ul class="modal-list">
                   <li>Use the view buttons in the toolbar to switch between Editor, Split, and Preview modes.</li>
                   <li>Sync scrolling is available in Split view to keep the editor and preview aligned.</li>
+                  <li>Review opens a read-only preview where you can comment on or suggest changes to headings, paragraphs, code blocks, and diagrams.</li>
                   <li>Import, Export, Copy, Share, and Theme toggle actions are always available in the header toolbar.</li>
                 </ul>
               </div>
@@ -1069,7 +1080,66 @@ <h3 class="modal-section-title">Open-source credits</h3>
                         <div class="skeleton-placeholder skeleton-line skeleton-w45"></div>
                     </div>
                 </div>
-            </div>
+                <div id="review-pins-layer" class="review-pins-layer" role="group" aria-label="Review pins" hidden></div>
+            </div>
+            <button id="review-panel-backdrop" class="review-panel-backdrop" type="button" aria-label="Close comments and suggestions" hidden></button>
+            <aside id="review-panel" class="review-panel" aria-labelledby="review-panel-title" hidden>
+                <div class="review-panel-header">
+                    <div>
+                        <p class="review-panel-eyebrow">Review mode</p>
+                        <h2 id="review-panel-title">Comments &amp; suggestions</h2>
+                        <p id="review-panel-summary" class="review-panel-summary">No open feedback</p>
+                    </div>
+                    <button id="review-panel-close" class="review-icon-btn" type="button" aria-label="Close comments and suggestions" title="Close review mode">
+                        <i class="bi bi-x-lg" aria-hidden="true"></i>
+                    </button>
+                </div>
+
+                <div class="review-panel-toolbar">
+                    <div class="review-filter-group" role="group" aria-label="Filter review items">
+                        <button class="review-filter-btn is-active" type="button" data-review-filter="open" aria-pressed="true">Open</button>
+                        <button class="review-filter-btn" type="button" data-review-filter="resolved" aria-pressed="false">Resolved</button>
+                        <button class="review-filter-btn" type="button" data-review-filter="all" aria-pressed="false">All</button>
+                    </div>
+                    <button id="review-copy-summary" class="review-icon-btn" type="button" aria-label="Copy review summary" title="Copy review summary" disabled>
+                        <i class="bi bi-clipboard" aria-hidden="true"></i>
+                    </button>
+                </div>
+
+                <section id="review-composer" class="review-composer" aria-labelledby="review-composer-title" hidden>
+                    <div class="review-composer-heading">
+                        <div>
+                            <p class="review-panel-eyebrow">Selected block</p>
+                            <h3 id="review-composer-title">Add feedback</h3>
+                        </div>
+                        <button id="review-composer-cancel" class="review-icon-btn" type="button" aria-label="Cancel feedback" title="Cancel">
+                            <i class="bi bi-x" aria-hidden="true"></i>
+                        </button>
+                    </div>
+                    <p id="review-composer-anchor" class="review-anchor-preview"></p>
+                    <div class="review-kind-group" role="group" aria-label="Feedback type">
+                        <button class="review-kind-btn is-active" type="button" data-review-kind="comment" aria-pressed="true">
+                            <i class="bi bi-chat-left-text" aria-hidden="true"></i> Comment
+                        </button>
+                        <button class="review-kind-btn" type="button" data-review-kind="suggestion" aria-pressed="false">
+                            <i class="bi bi-lightbulb" aria-hidden="true"></i> Suggestion
+                        </button>
+                    </div>
+                    <label id="review-feedback-label" class="review-feedback-label" for="review-feedback-input">Comment</label>
+                    <textarea id="review-feedback-input" class="review-feedback-input" rows="4" maxlength="2000" placeholder="Leave a focused comment for the author..."></textarea>
+                    <div class="review-composer-footer">
+                        <span id="review-feedback-count" class="review-feedback-count">0 / 2000</span>
+                        <button id="review-feedback-submit" class="review-primary-btn" type="button" disabled>Add comment</button>
+                    </div>
+                </section>
+
+                <div id="review-list" class="review-list" aria-live="polite"></div>
+                <div id="review-empty-state" class="review-empty-state">
+                    <i class="bi bi-chat-square-dots" aria-hidden="true"></i>
+                    <h3>No open feedback</h3>
+                    <p>Use the comment pins in the preview to leave feedback without changing the Markdown.</p>
+                </div>
+            </aside>
         </main>
     </div>
 
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index e692ed31..d66c996c 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -263,6 +263,16 @@ document.addEventListener("DOMContentLoaded", async function () {
   const shareSnapshotViewOnlyTabIds = new Set();
   const SHARE_SNAPSHOT_TAB_KIND = 'share-snapshot';
   const APP_VERSION = '3.9.0';
+  const REVIEW_TARGET_SELECTOR = 'h1, h2, h3, h4, h5, h6, p, pre, .diagram-viewer, .geojson-container, .topojson-container, .stl-container';
+  const REVIEW_TEXT_LIMIT = 2000;
+  let reviewModeActive = false;
+  const reviewPreviousViewModes = new Map();
+  let reviewFilter = 'open';
+  let reviewComposerKind = 'comment';
+  let activeReviewAnchor = null;
+  let reviewPinsResizeObserver = null;
+  let reviewPinsLayoutFrame = null;
+  let reviewTargetSourceSnapshots = new WeakMap();
   let activeModal = null;
   let lastFocusedElement = null;
   let isFindModalOpen = false;
@@ -292,6 +302,7 @@ document.addEventListener("DOMContentLoaded", async function () {
 
   const markdownEditor = document.getElementById("markdown-editor");
   const markdownPreview = document.getElementById("markdown-preview");
+  const reviewPinsLayer = document.getElementById('review-pins-layer');
   const markdownFormatToolbar = document.getElementById("markdown-format-toolbar");
   const themeToggle = document.getElementById("theme-toggle");
   const directionToggle = document.getElementById("direction-toggle");
@@ -318,6 +329,24 @@ document.addEventListener("DOMContentLoaded", async function () {
   const readingTimeElement = document.getElementById("reading-time");
   const wordCountElement = document.getElementById("word-count");
   const charCountElement = document.getElementById("char-count");
+  const reviewToggle = document.getElementById('review-toggle');
+  const mobileReviewToggle = document.getElementById('mobile-review-toggle');
+  const reviewCountBadge = document.getElementById('review-count-badge');
+  const mobileReviewCountBadge = document.getElementById('mobile-review-count-badge');
+  const reviewPanel = document.getElementById('review-panel');
+  const reviewPanelBackdrop = document.getElementById('review-panel-backdrop');
+  const reviewPanelClose = document.getElementById('review-panel-close');
+  const reviewPanelSummary = document.getElementById('review-panel-summary');
+  const reviewCopySummary = document.getElementById('review-copy-summary');
+  const reviewComposer = document.getElementById('review-composer');
+  const reviewComposerAnchor = document.getElementById('review-composer-anchor');
+  const reviewComposerCancel = document.getElementById('review-composer-cancel');
+  const reviewFeedbackLabel = document.getElementById('review-feedback-label');
+  const reviewFeedbackInput = document.getElementById('review-feedback-input');
+  const reviewFeedbackCount = document.getElementById('review-feedback-count');
+  const reviewFeedbackSubmit = document.getElementById('review-feedback-submit');
+  const reviewList = document.getElementById('review-list');
+  const reviewEmptyState = document.getElementById('review-empty-state');
 
   // View Mode Elements - Story 1.1
   const contentContainer = document.querySelector(".content-container");
@@ -395,6 +424,9 @@ document.addEventListener("DOMContentLoaded", async function () {
   }
 
   function getEditorReadOnlyMessage() {
+    if (reviewModeActive) {
+      return 'Review mode keeps the Markdown source read only.';
+    }
     if (isShareSnapshotViewOnlyActive()) {
       return 'This shared snapshot is view only.';
     }
@@ -662,6 +694,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   function applyDirectionToContent(direction) {
     if (markdownEditor) markdownEditor.setAttribute("dir", direction);
     if (markdownPreview) markdownPreview.setAttribute("dir", direction);
+    scheduleReviewPinsLayout();
   }
   applyDirectionToContent(initialDirection);
   updateDirectionToggleUI(initialDirection);
@@ -2377,6 +2410,833 @@ document.addEventListener("DOMContentLoaded", async function () {
   const LIVE_EDIT_ORIGIN = Symbol("markdown-viewer-live-local-edit");
   const LIVE_RELAY_ORIGIN = Symbol("markdown-viewer-live-relay");
 
+  // ========================================
+  // COMMENTS & SUGGESTIONS
+  // ========================================
+
+  function normalizeReviewThreads(rawThreads) {
+    if (!Array.isArray(rawThreads)) return [];
+    return rawThreads.slice(-500).map(function(thread) {
+      if (!thread || typeof thread !== 'object' || !thread.anchor || typeof thread.anchor.key !== 'string') {
+        return null;
+      }
+      const body = typeof thread.body === 'string' ? thread.body.trim().slice(0, REVIEW_TEXT_LIMIT) : '';
+      if (!body) return null;
+      const createdAt = Number.isFinite(Number(thread.createdAt)) ? Number(thread.createdAt) : Date.now();
+      const updatedAt = Number.isFinite(Number(thread.updatedAt)) ? Number(thread.updatedAt) : createdAt;
+      return {
+        id: typeof thread.id === 'string' && thread.id ? thread.id.slice(0, 120) : createReviewId(),
+        anchor: {
+          key: thread.anchor.key.slice(0, 240),
+          type: typeof thread.anchor.type === 'string' ? thread.anchor.type.slice(0, 40) : 'block',
+          label: typeof thread.anchor.label === 'string' ? thread.anchor.label.slice(0, 120) : 'Document block',
+          excerpt: typeof thread.anchor.excerpt === 'string' ? thread.anchor.excerpt.slice(0, 240) : '',
+          duplicateCount: Number.isFinite(Number(thread.anchor.duplicateCount))
+            ? Math.max(1, Number(thread.anchor.duplicateCount))
+            : null,
+          context: typeof thread.anchor.context === 'string' ? thread.anchor.context.slice(0, 80) : null
+        },
+        kind: thread.kind === 'suggestion' ? 'suggestion' : 'comment',
+        body: body,
+        createdAt: createdAt,
+        updatedAt: updatedAt,
+        resolved: thread.resolved === true
+      };
+    }).filter(Boolean);
+  }
+
+  function createReviewId() {
+    if (window.crypto && typeof window.crypto.randomUUID === 'function') {
+      return 'review_' + window.crypto.randomUUID();
+    }
+    return 'review_' + Date.now() + '_' + Math.random().toString(36).slice(2, 10);
+  }
+
+  function getActiveReviewTab() {
+    return tabs.find(function(tab) { return tab.id === activeTabId; }) || null;
+  }
+
+  function getActiveReviewThreads() {
+    const tab = getActiveReviewTab();
+    if (!tab) return [];
+    if (!Array.isArray(tab.reviewThreads)) {
+      tab.reviewThreads = [];
+    }
+    return tab.reviewThreads;
+  }
+
+  function decodeReviewSource(value) {
+    if (!value) return '';
+    try {
+      return decodeURIComponent(value);
+    } catch (_) {
+      return String(value);
+    }
+  }
+
+  function getReviewTargetType(target) {
+    if (!target) return 'block';
+    if (target.matches('.diagram-viewer, .geojson-container, .topojson-container, .stl-container')) return 'diagram';
+    if (target.tagName === 'PRE') return 'code';
+    if (/^H[1-6]$/.test(target.tagName)) return 'heading';
+    if (target.tagName === 'P') return 'paragraph';
+    return 'block';
+  }
+
+  function normalizeReviewSource(source, preserveLines) {
+    const normalized = String(source || '').replace(/\r\n?/g, '\n');
+    if (!preserveLines) {
+      return normalized.replace(/\s+/g, ' ').trim();
+    }
+    return normalized.split('\n').map(function(line) {
+      return line.replace(/[ \t]+$/g, '');
+    }).join('\n').trim();
+  }
+
+  function computeReviewTargetSource(target, type) {
+    if (!target) return '';
+    if (type === 'diagram') {
+      const sourceNode = target.hasAttribute('data-original-code')
+        ? target
+        : target.querySelector('[data-original-code]');
+      return normalizeReviewSource(sourceNode ? decodeReviewSource(sourceNode.getAttribute('data-original-code')) : '', true);
+    }
+    if (type === 'code') {
+      const code = target.querySelector('code');
+      return normalizeReviewSource(code ? code.textContent : target.textContent, true);
+    }
+
+    const clone = target.cloneNode(true);
+    clone.querySelectorAll('.review-target-button, .footnote-backref').forEach(function(node) {
+      node.remove();
+    });
+    clone.querySelectorAll('img').forEach(function(image) {
+      image.replaceWith(document.createTextNode(image.getAttribute('alt') || ''));
+    });
+    return normalizeReviewSource(clone.textContent, false);
+  }
+
+  function getReviewTargetSource(target, type) {
+    const snapshot = target ? reviewTargetSourceSnapshots.get(target) : null;
+    if (snapshot && snapshot.type === type) return snapshot.source;
+    return computeReviewTargetSource(target, type);
+  }
+
+  function snapshotMathReviewTargetSources(mathTargets) {
+    if (!Array.isArray(mathTargets) || mathTargets.length === 0) return;
+    getReviewTargets().forEach(function(target) {
+      if (reviewTargetSourceSnapshots.has(target)) return;
+      const containsMathTarget = mathTargets.some(function(mathTarget) {
+        return mathTarget === target || mathTarget.contains(target) || target.contains(mathTarget);
+      });
+      if (!containsMathTarget) return;
+      const type = getReviewTargetType(target);
+      reviewTargetSourceSnapshots.set(target, {
+        type: type,
+        source: computeReviewTargetSource(target, type)
+      });
+    });
+  }
+
+  function invalidateReviewTargetSourceSnapshots(roots) {
+    (roots || []).forEach(function(root) {
+      const element = root && root.nodeType === Node.ELEMENT_NODE ? root : (root && root.parentElement);
+      if (!element) return;
+      const ancestorTarget = element.closest && element.closest(REVIEW_TARGET_SELECTOR);
+      if (ancestorTarget && markdownPreview.contains(ancestorTarget)) {
+        reviewTargetSourceSnapshots.delete(ancestorTarget);
+      }
+      if (element.matches && element.matches(REVIEW_TARGET_SELECTOR)) {
+        reviewTargetSourceSnapshots.delete(element);
+      }
+      element.querySelectorAll(REVIEW_TARGET_SELECTOR).forEach(function(target) {
+        reviewTargetSourceSnapshots.delete(target);
+      });
+    });
+  }
+
+  function hashReviewSource(value) {
+    let hash = 2166136261;
+    const text = String(value || '');
+    for (let index = 0; index < text.length; index += 1) {
+      hash ^= text.charCodeAt(index);
+      hash = Math.imul(hash, 16777619);
+    }
+    return (hash >>> 0).toString(36);
+  }
+
+  function getReviewTargetLabel(target, type) {
+    if (type === 'heading') return 'Heading ' + target.tagName;
+    if (type === 'paragraph') return 'Paragraph';
+    if (type === 'code') {
+      const code = target.querySelector('code');
+      const languageClass = code ? Array.from(code.classList).find(function(className) {
+        return className !== 'hljs' && className !== 'language-plaintext' && className !== 'plaintext';
+      }) : '';
+      const language = languageClass ? languageClass.replace(/^language-/, '') : '';
+      return language ? language + ' code block' : 'Code block';
+    }
+    if (type === 'diagram') {
+      let engine = target.getAttribute('data-diagram-engine');
+      if (!engine && target.matches('.geojson-container')) engine = 'geojson';
+      if (!engine && target.matches('.topojson-container')) engine = 'topojson';
+      if (!engine && target.matches('.stl-container')) engine = 'stl';
+      const specialLabels = {
+        geojson: 'GeoJSON map',
+        topojson: 'TopoJSON map',
+        stl: 'STL model'
+      };
+      if (specialLabels[engine]) return specialLabels[engine];
+      const engineLabel = engine ? getDiagramEngineLabel(engine) : 'Diagram';
+      return engineLabel === 'Diagram' ? engineLabel : engineLabel + ' diagram';
+    }
+    return 'Document block';
+  }
+
+  function getReviewAnchorDescriptor(target) {
+    if (!target || !target.dataset.reviewAnchor) return null;
+    const type = target.dataset.reviewType || getReviewTargetType(target);
+    const source = getReviewTargetSource(target, type);
+    const excerpt = source.length > 180 ? source.slice(0, 177) + '...' : source;
+    return {
+      key: target.dataset.reviewAnchor,
+      type: type,
+      label: target.dataset.reviewLabel || getReviewTargetLabel(target, type),
+      excerpt: excerpt || 'Empty rendered block',
+      duplicateCount: Math.max(1, Number(target.dataset.reviewDuplicateCount) || 1),
+      context: target.dataset.reviewContext || null
+    };
+  }
+
+  function getReviewTargets() {
+    if (!markdownPreview) return [];
+    return Array.from(markdownPreview.querySelectorAll(REVIEW_TARGET_SELECTOR)).filter(function(target) {
+      const diagramContainer = target.closest('.diagram-viewer, .geojson-container, .topojson-container, .stl-container');
+      if (diagramContainer && diagramContainer !== target) {
+        return false;
+      }
+      return !target.closest('.review-target-button');
+    });
+  }
+
+  function clearReviewDecorations() {
+    if (!markdownPreview) return;
+    if (reviewPinsLayer) reviewPinsLayer.textContent = '';
+    if (reviewPinsResizeObserver) {
+      reviewPinsResizeObserver.disconnect();
+      reviewPinsResizeObserver = null;
+    }
+    if (reviewPinsLayoutFrame) {
+      cancelAnimationFrame(reviewPinsLayoutFrame);
+      reviewPinsLayoutFrame = null;
+    }
+    markdownPreview.querySelectorAll('[data-review-anchor]').forEach(function(target) {
+      target.classList.remove(
+        'review-target',
+        'review-target--heading',
+        'review-target--paragraph',
+        'review-target--code',
+        'review-target--diagram',
+        'has-review-thread',
+        'is-review-target-active'
+      );
+      delete target.dataset.reviewAnchor;
+      delete target.dataset.reviewType;
+      delete target.dataset.reviewLabel;
+      delete target.dataset.reviewDuplicateCount;
+      delete target.dataset.reviewContext;
+    });
+  }
+
+  function positionReviewPins() {
+    reviewPinsLayoutFrame = null;
+    if (!reviewModeActive || !reviewPinsLayer || !previewPaneElement) return;
+    const paneRect = previewPaneElement.getBoundingClientRect();
+    const isRtl = markdownPreview && markdownPreview.getAttribute('dir') === 'rtl';
+    reviewPinsLayer.querySelectorAll('.review-target-button').forEach(function(button) {
+      const anchor = {
+        key: button.dataset.reviewAnchor,
+        duplicateCount: Number(button.dataset.reviewDuplicateCount) || null,
+        context: button.dataset.reviewContext || null
+      };
+      const target = findReviewTarget(anchor);
+      if (!target) {
+        button.hidden = true;
+        return;
+      }
+      button.hidden = false;
+      const targetRect = target.getBoundingClientRect();
+      const isDiagram = target.dataset.reviewType === 'diagram';
+      const top = isDiagram ? targetRect.bottom - 40 : targetRect.top + 4;
+      const left = isRtl ? targetRect.left + 4 : targetRect.right - 4;
+      button.style.top = (top - paneRect.top + previewPaneElement.scrollTop) + 'px';
+      button.style.left = (left - paneRect.left + previewPaneElement.scrollLeft) + 'px';
+      button.style.transform = isRtl ? 'none' : 'translateX(-100%)';
+    });
+  }
+
+  function scheduleReviewPinsLayout() {
+    if (!reviewModeActive || reviewPinsLayoutFrame) return;
+    reviewPinsLayoutFrame = requestAnimationFrame(positionReviewPins);
+  }
+
+  function observeReviewPinLayout() {
+    if (typeof ResizeObserver === 'undefined') {
+      scheduleReviewPinsLayout();
+      return;
+    }
+    reviewPinsResizeObserver = new ResizeObserver(scheduleReviewPinsLayout);
+    reviewPinsResizeObserver.observe(markdownPreview);
+    if (previewPaneElement) reviewPinsResizeObserver.observe(previewPaneElement);
+    scheduleReviewPinsLayout();
+  }
+
+  function decorateReviewTargets() {
+    clearReviewDecorations();
+    if (!reviewModeActive || !markdownPreview || previewContainsSkeleton()) return;
+
+    const threads = getActiveReviewThreads();
+    const threadsByAnchor = new Map();
+    threads.forEach(function(thread) {
+      const key = thread.anchor && thread.anchor.key;
+      if (!key) return;
+      if (!threadsByAnchor.has(key)) threadsByAnchor.set(key, []);
+      threadsByAnchor.get(key).push(thread);
+    });
+
+    const targetEntries = getReviewTargets().map(function(target) {
+      const type = getReviewTargetType(target);
+      const source = getReviewTargetSource(target, type);
+      const signature = type + '\u241f' + source;
+      return { target: target, type: type, source: source, signature: signature };
+    });
+    targetEntries.forEach(function(entry, index) {
+      const before = index > 0 ? targetEntries[index - 1].signature : 'review-start';
+      const after = index < targetEntries.length - 1 ? targetEntries[index + 1].signature : 'review-end';
+      entry.context = hashReviewSource(before) + ':' + hashReviewSource(after);
+    });
+    const signatureCounts = new Map();
+    targetEntries.forEach(function(entry) {
+      signatureCounts.set(entry.signature, (signatureCounts.get(entry.signature) || 0) + 1);
+    });
+
+    const occurrences = new Map();
+    targetEntries.forEach(function(entry) {
+      const target = entry.target;
+      const type = entry.type;
+      const source = entry.source;
+      const signature = entry.signature;
+      const duplicateContext = entry.context;
+      const occurrence = occurrences.get(signature) || 0;
+      occurrences.set(signature, occurrence + 1);
+      const duplicateCount = signatureCounts.get(signature) || 1;
+      const context = duplicateCount > 1 ? duplicateContext : '';
+      const anchorKey = type + ':' + hashReviewSource(signature) + ':' + occurrence;
+      const label = getReviewTargetLabel(target, type);
+      const targetThreads = (threadsByAnchor.get(anchorKey) || []).filter(function(thread) {
+        return (!thread.anchor.duplicateCount || thread.anchor.duplicateCount === duplicateCount) &&
+          (!thread.anchor.context || thread.anchor.context === context);
+      });
+
+      target.dataset.reviewAnchor = anchorKey;
+      target.dataset.reviewType = type;
+      target.dataset.reviewLabel = label;
+      target.dataset.reviewDuplicateCount = String(duplicateCount);
+      target.dataset.reviewContext = context;
+      target.classList.add('review-target', 'review-target--' + type);
+      target.classList.toggle('has-review-thread', targetThreads.length > 0);
+
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'review-target-button';
+      button.dataset.reviewAnchor = anchorKey;
+      button.dataset.reviewDuplicateCount = String(duplicateCount);
+      button.dataset.reviewContext = context;
+      button.dataset.html2canvasIgnore = 'true';
+      button.title = targetThreads.length > 0 ? 'Add feedback to this block' : 'Comment on this block';
+      button.setAttribute('aria-label', targetThreads.length > 0
+        ? 'Add feedback to ' + label + '. ' + targetThreads.length + ' review item' + (targetThreads.length === 1 ? '' : 's') + ' attached.'
+        : 'Add feedback to ' + label);
+
+      const icon = document.createElement('i');
+      icon.className = 'bi bi-chat-square-text';
+      icon.setAttribute('aria-hidden', 'true');
+      button.appendChild(icon);
+      if (targetThreads.length > 0) {
+        button.dataset.reviewCount = String(targetThreads.length);
+      }
+      if (reviewPinsLayer) reviewPinsLayer.appendChild(button);
+    });
+
+    observeReviewPinLayout();
+    renderReviewPanel();
+  }
+
+  function findReviewTarget(anchor) {
+    const anchorKey = typeof anchor === 'string' ? anchor : (anchor && anchor.key);
+    if (!markdownPreview || !anchorKey) return null;
+    const target = Array.from(markdownPreview.querySelectorAll('[data-review-anchor]')).find(function(candidate) {
+      return candidate.dataset.reviewAnchor === anchorKey && !candidate.classList.contains('review-target-button');
+    }) || null;
+    if (!target || !anchor || typeof anchor === 'string') return target;
+    if (anchor.duplicateCount && Number(target.dataset.reviewDuplicateCount) !== Number(anchor.duplicateCount)) return null;
+    if (anchor.context && target.dataset.reviewContext !== anchor.context) return null;
+    return target;
+  }
+
+  function updateReviewCountBadges() {
+    const openCount = getActiveReviewThreads().filter(function(thread) { return !thread.resolved; }).length;
+    [reviewCountBadge, mobileReviewCountBadge].forEach(function(badge) {
+      if (!badge) return;
+      badge.textContent = String(openCount);
+      badge.hidden = openCount === 0;
+      badge.setAttribute('aria-label', openCount + ' open review item' + (openCount === 1 ? '' : 's'));
+    });
+  }
+
+  function formatReviewTime(timestamp) {
+    try {
+      return new Intl.DateTimeFormat(undefined, {
+        dateStyle: 'medium',
+        timeStyle: 'short'
+      }).format(new Date(timestamp));
+    } catch (_) {
+      return new Date(timestamp).toLocaleString();
+    }
+  }
+
+  function createReviewThreadElement(thread) {
+    const target = findReviewTarget(thread.anchor);
+    const item = document.createElement('article');
+    item.className = 'review-thread' + (thread.resolved ? ' is-resolved' : '') + (!target ? ' is-orphaned' : '');
+    item.dataset.reviewId = thread.id;
+    item.dataset.kind = thread.kind;
+
+    const header = document.createElement('div');
+    header.className = 'review-thread-header';
+    const meta = document.createElement('div');
+    meta.className = 'review-thread-meta';
+    const kind = document.createElement('span');
+    kind.className = 'review-kind-label';
+    const kindIcon = document.createElement('i');
+    kindIcon.className = thread.kind === 'suggestion' ? 'bi bi-lightbulb' : 'bi bi-chat-left-text';
+    kindIcon.setAttribute('aria-hidden', 'true');
+    kind.appendChild(kindIcon);
+    kind.appendChild(document.createTextNode(thread.kind === 'suggestion' ? 'Suggestion' : 'Comment'));
+    meta.appendChild(kind);
+    if (thread.resolved) {
+      const status = document.createElement('span');
+      status.className = 'review-status-label';
+      status.textContent = 'Resolved';
+      meta.appendChild(status);
+    }
+    header.appendChild(meta);
+    item.appendChild(header);
+
+    const anchor = document.createElement('button');
+    anchor.type = 'button';
+    anchor.className = 'review-thread-anchor';
+    anchor.dataset.reviewAction = 'focus-anchor';
+    anchor.dataset.reviewId = thread.id;
+    anchor.disabled = !target;
+    anchor.textContent = target
+      ? thread.anchor.label + ': ' + thread.anchor.excerpt
+      : 'Anchor no longer in preview - ' + thread.anchor.label + ': ' + thread.anchor.excerpt;
+    item.appendChild(anchor);
+
+    const body = document.createElement('p');
+    body.className = 'review-thread-body';
+    body.textContent = thread.body;
+    item.appendChild(body);
+
+    const time = document.createElement('time');
+    time.className = 'review-thread-time';
+    time.dateTime = new Date(thread.createdAt).toISOString();
+    time.textContent = formatReviewTime(thread.createdAt);
+    item.appendChild(time);
+
+    const actions = document.createElement('div');
+    actions.className = 'review-thread-actions';
+    const statusButton = document.createElement('button');
+    statusButton.type = 'button';
+    statusButton.className = 'review-thread-action';
+    statusButton.dataset.reviewAction = 'toggle-resolved';
+    statusButton.dataset.reviewId = thread.id;
+    statusButton.textContent = thread.resolved ? 'Reopen' : 'Resolve';
+    actions.appendChild(statusButton);
+    const deleteButton = document.createElement('button');
+    deleteButton.type = 'button';
+    deleteButton.className = 'review-thread-action is-danger';
+    deleteButton.dataset.reviewAction = 'delete';
+    deleteButton.dataset.reviewId = thread.id;
+    deleteButton.textContent = 'Delete';
+    actions.appendChild(deleteButton);
+    item.appendChild(actions);
+
+    return item;
+  }
+
+  function renderReviewPanel() {
+    updateReviewCountBadges();
+    if (!reviewPanel || !reviewList || !reviewEmptyState) return;
+    const threads = getActiveReviewThreads();
+    const openCount = threads.filter(function(thread) { return !thread.resolved; }).length;
+    if (reviewPanelSummary) {
+      reviewPanelSummary.textContent = openCount === 0
+        ? (threads.length === 0 ? 'No feedback yet' : 'All feedback resolved')
+        : openCount + ' open item' + (openCount === 1 ? '' : 's') + (threads.length === openCount ? '' : ' - ' + threads.length + ' total');
+    }
+    if (reviewCopySummary) reviewCopySummary.disabled = threads.length === 0;
+
+    const filteredThreads = threads.filter(function(thread) {
+      if (reviewFilter === 'resolved') return thread.resolved;
+      if (reviewFilter === 'all') return true;
+      return !thread.resolved;
+    }).sort(function(a, b) { return b.createdAt - a.createdAt; });
+
+    reviewList.textContent = '';
+    filteredThreads.forEach(function(thread) {
+      reviewList.appendChild(createReviewThreadElement(thread));
+    });
+    reviewList.hidden = filteredThreads.length === 0;
+    reviewEmptyState.hidden = filteredThreads.length > 0;
+    if (filteredThreads.length === 0) {
+      const title = reviewEmptyState.querySelector('h3');
+      const copy = reviewEmptyState.querySelector('p');
+      if (reviewFilter === 'resolved') {
+        title.textContent = 'No resolved feedback';
+        copy.textContent = 'Resolved comments and suggestions will appear here.';
+      } else if (reviewFilter === 'all') {
+        title.textContent = 'No feedback yet';
+        copy.textContent = 'Use the comment pins in the preview to leave feedback without changing the Markdown.';
+      } else {
+        title.textContent = 'No open feedback';
+        copy.textContent = threads.length > 0
+          ? 'Everything has been resolved. Switch to Resolved or All to review earlier feedback.'
+          : 'Use the comment pins in the preview to leave feedback without changing the Markdown.';
+      }
+    }
+  }
+
+  function updateReviewComposerKind(kind) {
+    reviewComposerKind = kind === 'suggestion' ? 'suggestion' : 'comment';
+    document.querySelectorAll('[data-review-kind]').forEach(function(button) {
+      const active = button.dataset.reviewKind === reviewComposerKind;
+      button.classList.toggle('is-active', active);
+      button.setAttribute('aria-pressed', active ? 'true' : 'false');
+    });
+    if (reviewFeedbackLabel) {
+      reviewFeedbackLabel.textContent = reviewComposerKind === 'suggestion' ? 'Suggested change' : 'Comment';
+    }
+    if (reviewFeedbackInput) {
+      reviewFeedbackInput.placeholder = reviewComposerKind === 'suggestion'
+        ? 'Describe the change you recommend without editing the source...'
+        : 'Leave a focused comment for the author...';
+    }
+    if (reviewFeedbackSubmit) {
+      reviewFeedbackSubmit.textContent = reviewComposerKind === 'suggestion' ? 'Add suggestion' : 'Add comment';
+    }
+  }
+
+  function focusReviewPin(anchor) {
+    const target = findReviewTarget(anchor);
+    if (!target || !reviewPinsLayer) return false;
+    const button = Array.from(reviewPinsLayer.querySelectorAll('.review-target-button')).find(function(candidate) {
+      return candidate.dataset.reviewAnchor === target.dataset.reviewAnchor &&
+        candidate.dataset.reviewContext === target.dataset.reviewContext;
+    }) || null;
+    if (!button) return false;
+    button.focus({ preventScroll: true });
+    return true;
+  }
+
+  function closeReviewComposer(options) {
+    options = options || {};
+    const returnAnchor = activeReviewAnchor;
+    if (activeReviewAnchor) {
+      const previousTarget = findReviewTarget(activeReviewAnchor);
+      if (previousTarget) previousTarget.classList.remove('is-review-target-active');
+    }
+    activeReviewAnchor = null;
+    if (reviewComposer) reviewComposer.hidden = true;
+    if (reviewFeedbackInput) reviewFeedbackInput.value = '';
+    if (reviewFeedbackCount) reviewFeedbackCount.textContent = '0 / ' + REVIEW_TEXT_LIMIT;
+    if (reviewFeedbackSubmit) reviewFeedbackSubmit.disabled = true;
+    if (options.restoreFocus && reviewModeActive && !focusReviewPin(returnAnchor) && reviewPanelClose) {
+      reviewPanelClose.focus();
+    }
+  }
+
+  function openReviewComposer(target) {
+    if (!target) return;
+    const descriptor = getReviewAnchorDescriptor(target);
+    if (!descriptor) return;
+    closeReviewComposer();
+    activeReviewAnchor = descriptor;
+    target.classList.add('is-review-target-active');
+    if (reviewComposerAnchor) {
+      reviewComposerAnchor.textContent = descriptor.label + ': ' + descriptor.excerpt;
+    }
+    updateReviewComposerKind(reviewComposerKind);
+    if (reviewComposer) reviewComposer.hidden = false;
+    if (reviewFeedbackInput) {
+      reviewFeedbackInput.value = '';
+      reviewFeedbackInput.focus();
+    }
+  }
+
+  function persistReviewThreads(message) {
+    saveTabsToStorage(tabs);
+    decorateReviewTargets();
+    renderReviewPanel();
+    if (message) announceToScreenReader(message);
+  }
+
+  function submitReviewFeedback() {
+    if (!activeReviewAnchor || !reviewFeedbackInput) return;
+    const body = reviewFeedbackInput.value.trim();
+    if (!body) return;
+    const returnAnchor = Object.assign({}, activeReviewAnchor);
+    getActiveReviewThreads().push({
+      id: createReviewId(),
+      anchor: Object.assign({}, activeReviewAnchor),
+      kind: reviewComposerKind,
+      body: body.slice(0, REVIEW_TEXT_LIMIT),
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      resolved: false
+    });
+    const label = reviewComposerKind === 'suggestion' ? 'Suggestion added.' : 'Comment added.';
+    closeReviewComposer();
+    persistReviewThreads(label);
+    focusReviewPin(returnAnchor);
+  }
+
+  function focusReviewAnchor(thread) {
+    const target = thread && thread.anchor ? findReviewTarget(thread.anchor) : null;
+    if (!target) return;
+    markdownPreview.querySelectorAll('.is-review-target-active').forEach(function(node) {
+      node.classList.remove('is-review-target-active');
+    });
+    target.classList.add('is-review-target-active');
+    target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    focusReviewPin(thread.anchor);
+    clearTimeout(focusReviewAnchor._timeoutId);
+    focusReviewAnchor._timeoutId = setTimeout(function() {
+      if (!activeReviewAnchor || activeReviewAnchor.key !== thread.anchor.key) {
+        target.classList.remove('is-review-target-active');
+      }
+    }, 1800);
+  }
+
+  function buildReviewSummary() {
+    const tab = getActiveReviewTab();
+    const threads = getActiveReviewThreads().slice().sort(function(a, b) { return a.createdAt - b.createdAt; });
+    const lines = ['# Review: ' + (tab && tab.title ? tab.title : 'Markdown document'), ''];
+    threads.forEach(function(thread, index) {
+      const kind = thread.kind === 'suggestion' ? 'Suggestion' : 'Comment';
+      lines.push((index + 1) + '. **' + kind + '** - ' + thread.anchor.label + (thread.resolved ? ' _(resolved)_' : ''));
+      if (thread.anchor.excerpt) lines.push('   > ' + thread.anchor.excerpt.replace(/\n/g, ' '));
+      thread.body.split('\n').forEach(function(line) {
+        lines.push('   ' + line);
+      });
+      lines.push('');
+    });
+    return lines.join('\n').trim();
+  }
+
+  async function copyReviewSummary() {
+    if (getActiveReviewThreads().length === 0) return;
+    try {
+      await copyTextToClipboard(buildReviewSummary());
+      announceToScreenReader('Review summary copied.');
+      if (reviewCopySummary) {
+        const icon = reviewCopySummary.querySelector('i');
+        if (icon) icon.className = 'bi bi-check-lg';
+        clearTimeout(copyReviewSummary._timeoutId);
+        copyReviewSummary._timeoutId = setTimeout(function() {
+          if (icon) icon.className = 'bi bi-clipboard';
+        }, 1400);
+      }
+    } catch (error) {
+      console.error('Review summary copy failed:', error);
+      alert('Failed to copy review summary: ' + error.message);
+    }
+  }
+
+  function updateReviewBackdrop() {
+    if (!reviewPanelBackdrop) return;
+    reviewPanelBackdrop.hidden = true;
+  }
+
+  function setReviewMode(enabled, options) {
+    options = options || {};
+    const nextState = Boolean(enabled);
+    const wasActive = reviewModeActive;
+    if (nextState && !wasActive) {
+      reviewPreviousViewModes.set(activeTabId, currentViewMode || 'split');
+    }
+    reviewModeActive = nextState;
+    if (reviewModeActive && currentViewMode !== 'preview') {
+      setViewMode('preview');
+    }
+    if (reviewPanel) reviewPanel.hidden = !reviewModeActive;
+    if (reviewPinsLayer) reviewPinsLayer.hidden = !reviewModeActive;
+    if (contentContainer) contentContainer.classList.toggle('is-reviewing', reviewModeActive);
+    [reviewToggle, mobileReviewToggle].forEach(function(button) {
+      if (!button) return;
+      button.classList.toggle('is-active', reviewModeActive);
+      button.setAttribute('aria-expanded', reviewModeActive ? 'true' : 'false');
+      button.setAttribute('aria-pressed', reviewModeActive ? 'true' : 'false');
+    });
+    updateReviewBackdrop();
+    updateLiveEditorAccess();
+    if (reviewModeActive) {
+      decorateReviewTargets();
+      renderReviewPanel();
+      if (options.focusPanel && reviewPanelClose) reviewPanelClose.focus();
+    } else {
+      closeReviewComposer();
+      clearReviewDecorations();
+      const restoreMode = reviewPreviousViewModes.get(activeTabId);
+      reviewPreviousViewModes.clear();
+      if (restoreMode && restoreMode !== currentViewMode) {
+        setViewMode(restoreMode);
+        saveCurrentTabState();
+      }
+      if (options.restoreFocus) {
+        const returnTarget = window.innerWidth < 768 ? mobileMenuToggle : reviewToggle;
+        if (returnTarget) returnTarget.focus();
+      }
+    }
+  }
+
+  function initReviewMode() {
+    tabs.forEach(function(tab) {
+      tab.reviewThreads = normalizeReviewThreads(tab.reviewThreads);
+    });
+    updateReviewCountBadges();
+    renderReviewPanel();
+
+    if (reviewToggle) {
+      reviewToggle.addEventListener('click', function() {
+        setReviewMode(!reviewModeActive, { focusPanel: !reviewModeActive });
+      });
+    }
+    if (mobileReviewToggle) {
+      mobileReviewToggle.addEventListener('click', function() {
+        closeMobileMenu();
+        setReviewMode(!reviewModeActive, { focusPanel: !reviewModeActive });
+      });
+    }
+    if (reviewPanelClose) {
+      reviewPanelClose.addEventListener('click', function() {
+        setReviewMode(false, { restoreFocus: true });
+      });
+    }
+    if (reviewPanelBackdrop) {
+      reviewPanelBackdrop.addEventListener('click', function() {
+        setReviewMode(false, { restoreFocus: true });
+      });
+    }
+    if (reviewComposerCancel) {
+      reviewComposerCancel.addEventListener('click', function() {
+        closeReviewComposer({ restoreFocus: true });
+      });
+    }
+    if (reviewFeedbackInput) {
+      reviewFeedbackInput.addEventListener('input', function() {
+        const length = reviewFeedbackInput.value.length;
+        if (reviewFeedbackCount) reviewFeedbackCount.textContent = length + ' / ' + REVIEW_TEXT_LIMIT;
+        if (reviewFeedbackSubmit) reviewFeedbackSubmit.disabled = reviewFeedbackInput.value.trim().length === 0;
+      });
+      reviewFeedbackInput.addEventListener('keydown', function(event) {
+        if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+          event.preventDefault();
+          submitReviewFeedback();
+        }
+      });
+    }
+    if (reviewFeedbackSubmit) reviewFeedbackSubmit.addEventListener('click', submitReviewFeedback);
+    if (reviewCopySummary) reviewCopySummary.addEventListener('click', copyReviewSummary);
+
+    document.querySelectorAll('[data-review-kind]').forEach(function(button) {
+      button.addEventListener('click', function() {
+        updateReviewComposerKind(button.dataset.reviewKind);
+        if (reviewFeedbackInput) reviewFeedbackInput.focus();
+      });
+    });
+    document.querySelectorAll('[data-review-filter]').forEach(function(button) {
+      button.addEventListener('click', function() {
+        reviewFilter = button.dataset.reviewFilter;
+        document.querySelectorAll('[data-review-filter]').forEach(function(filterButton) {
+          const active = filterButton === button;
+          filterButton.classList.toggle('is-active', active);
+          filterButton.setAttribute('aria-pressed', active ? 'true' : 'false');
+        });
+        renderReviewPanel();
+      });
+    });
+
+    if (reviewPinsLayer) {
+      reviewPinsLayer.addEventListener('click', function(event) {
+        const button = event.target.closest('.review-target-button');
+        if (!button || !reviewModeActive) return;
+        event.preventDefault();
+        event.stopPropagation();
+        const target = findReviewTarget({
+          key: button.dataset.reviewAnchor,
+          duplicateCount: Number(button.dataset.reviewDuplicateCount) || null,
+          context: button.dataset.reviewContext || null
+        });
+        openReviewComposer(target);
+      });
+    }
+
+    if (previewPaneElement) {
+      previewPaneElement.addEventListener('scroll', scheduleReviewPinsLayout, { passive: true });
+    }
+
+    if (reviewList) {
+      reviewList.addEventListener('click', function(event) {
+        const actionButton = event.target.closest('[data-review-action]');
+        if (!actionButton) return;
+        const thread = getActiveReviewThreads().find(function(item) {
+          return item.id === actionButton.dataset.reviewId;
+        });
+        if (!thread) return;
+        const action = actionButton.dataset.reviewAction;
+        if (action === 'focus-anchor') {
+          focusReviewAnchor(thread);
+          return;
+        }
+        if (action === 'toggle-resolved') {
+          thread.resolved = !thread.resolved;
+          thread.updatedAt = Date.now();
+          persistReviewThreads(thread.resolved ? 'Review item resolved.' : 'Review item reopened.');
+          return;
+        }
+        if (action === 'delete' && confirm('Delete this review item?')) {
+          const index = getActiveReviewThreads().indexOf(thread);
+          if (index >= 0) getActiveReviewThreads().splice(index, 1);
+          persistReviewThreads('Review item deleted.');
+        }
+      });
+    }
+
+    window.addEventListener('resize', updateReviewBackdrop);
+    document.addEventListener('keydown', function(event) {
+      if (event.key !== 'Escape' || !reviewModeActive || activeModal) return;
+      if (reviewComposer && !reviewComposer.hidden) {
+        event.preventDefault();
+        closeReviewComposer({ restoreFocus: true });
+      } else {
+        event.preventDefault();
+        setReviewMode(false, { restoreFocus: true });
+      }
+    });
+  }
+
   function refreshLiveEditorUi() {
     if (!liveShareUiReady) return;
     updateLiveAccessDisplay();
@@ -2409,7 +3269,10 @@ document.addEventListener("DOMContentLoaded", async function () {
 
   function loadTabsFromStorage() {
     try {
-      return stripTemporaryTabs(JSON.parse(localStorage.getItem(STORAGE_KEY)) || []);
+      return stripTemporaryTabs(JSON.parse(localStorage.getItem(STORAGE_KEY)) || []).map(function(tab) {
+        tab.reviewThreads = normalizeReviewThreads(tab.reviewThreads);
+        return tab;
+      });
     } catch (e) {
       return [];
     }
@@ -2495,6 +3358,7 @@ document.addEventListener("DOMContentLoaded", async function () {
       content: content,
       scrollPos: 0,
       viewMode: viewMode,
+      reviewThreads: [],
       createdAt: Date.now()
     };
   }
@@ -2882,7 +3746,9 @@ document.addEventListener("DOMContentLoaded", async function () {
     if (!tab) return;
     tab.content = markdownEditor.value;
     tab.scrollPos = markdownEditor.scrollTop;
-    tab.viewMode = currentViewMode || 'split';
+    tab.viewMode = reviewModeActive && reviewPreviousViewModes.has(activeTabId)
+      ? reviewPreviousViewModes.get(activeTabId)
+      : (currentViewMode || 'split');
     if (liveCollaboration && liveCollaboration.tabId === activeTabId) {
       return;
     }
@@ -2890,6 +3756,9 @@ document.addEventListener("DOMContentLoaded", async function () {
   }
 
   function restoreViewMode(mode) {
+    if (reviewModeActive && activeTabId && !reviewPreviousViewModes.has(activeTabId)) {
+      reviewPreviousViewModes.set(activeTabId, mode || 'split');
+    }
     currentViewMode = null;
     setViewMode(mode || 'split');
   }
@@ -2897,6 +3766,8 @@ document.addEventListener("DOMContentLoaded", async function () {
   function switchTab(tabId) {
     if (tabId === activeTabId) return;
     saveCurrentTabState();
+    closeReviewComposer();
+    clearReviewDecorations();
     
     // Clear typing timeout and reset tracking for the new tab
     if (typingTimeout) {
@@ -2920,6 +3791,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     restoreViewMode(tab.viewMode);
     refreshLiveEditorUi();
     renderMarkdown();
+    renderReviewPanel();
     requestAnimationFrame(function() {
       markdownEditor.scrollTop = tab.scrollPos || 0;
       updateLiveCursorPosition();
@@ -2953,6 +3825,10 @@ document.addEventListener("DOMContentLoaded", async function () {
 
     const idx = tabs.findIndex(function(t) { return t.id === tabId; });
     if (idx === -1) return;
+    if (activeTabId === tabId) {
+      closeReviewComposer();
+      clearReviewDecorations();
+    }
     shareSnapshotViewOnlyTabIds.delete(tabId);
     
     // Clean up history of the closed tab
@@ -2986,6 +3862,8 @@ document.addEventListener("DOMContentLoaded", async function () {
     }
     saveTabsToStorage(tabs);
     renderTabBar(tabs, activeTabId);
+    closeReviewComposer();
+    renderReviewPanel();
   }
 
   function deleteTab(tabId) {
@@ -3120,6 +3998,8 @@ document.addEventListener("DOMContentLoaded", async function () {
     function doReset() {
       closeAppModal(modal);
       cleanup();
+      closeReviewComposer();
+      clearReviewDecorations();
       disconnectLiveCollaboration({ restoreOriginal: false, silent: true });
       applyShareSnapshotAccessMode('edit');
       resetShareSnapshotLink();
@@ -3136,6 +4016,8 @@ document.addEventListener("DOMContentLoaded", async function () {
       refreshLiveEditorUi();
       renderMarkdown();
       renderTabBar(tabs, activeTabId);
+      closeReviewComposer();
+      renderReviewPanel();
     }
 
     function doCancel() {
@@ -3465,6 +4347,9 @@ document.addEventListener("DOMContentLoaded", async function () {
     const patchResult = patchPreviewDom(markdownPreview, sanitizedHtml, {
       reusePreviewBlocks: context.previewEngineMode === 'segmented' && !context.force,
     });
+    invalidateReviewTargetSourceSnapshots(
+      patchResult && patchResult.fullReplace ? [markdownPreview] : ((patchResult && patchResult.updatedNodes) || [])
+    );
     applyReferencePreviewLinks(markdownPreview, referenceData.definitions);
     enhanceGitHubAlerts(markdownPreview);
 
@@ -4817,6 +5702,7 @@ ${selector} .arrowheadPath {
     const hasMath = /\$\$|\$[^$]|\\\(|\\\[/.test(rawVal || '') || /```math\b/.test(rawVal || '');
     if (hasMath) {
       const mathTargets = getMathJaxTypesetTargets(roots);
+      snapshotMathReviewTargetSources(mathTargets);
       if (mathTargets.length > 0) {
         ensureMathJaxReady().then(function() {
           if (context.renderId !== previewRenderGeneration) return;
@@ -4827,6 +5713,7 @@ ${selector} .arrowheadPath {
       }
     }
 
+    decorateReviewTargets();
     updateDocumentStats();
     updateFindHighlights();
     cleanupImageObjectUrls();
@@ -5685,6 +6572,10 @@ ${selector} .arrowheadPath {
       mode = 'preview';
       announceToScreenReader(getEditorReadOnlyMessage());
     }
+    if (reviewModeActive && mode !== 'preview') {
+      mode = 'preview';
+      announceToScreenReader('Review mode uses the read-only preview.');
+    }
     if (mode === currentViewMode) return;
 
     const previousMode = currentViewMode;
@@ -10444,6 +11335,7 @@ ${selector} .arrowheadPath {
   }
   
   initTabs();
+  initReviewMode();
   if (loadGlobalState().syncScrollingEnabled === false) toggleSyncScrolling();
   updateMobileStats();
   updateFindHighlights();
@@ -13338,7 +14230,7 @@ ${selector} .arrowheadPath {
   }
 
   function canMutateEditor() {
-    return !isLiveViewOnlyParticipant() && !isShareSnapshotViewOnlyActive();
+    return !reviewModeActive && !isLiveViewOnlyParticipant() && !isShareSnapshotViewOnlyActive();
   }
 
   function isLiveMutatingAction(action) {
@@ -13377,16 +14269,17 @@ ${selector} .arrowheadPath {
     const liveShareDocumentActive = isLiveShareDocumentActive();
     const liveShareGuestDocumentActive = liveShareDocumentActive && !isLiveShareHostDocumentActive();
     const viewOnly = isLiveViewOnlyParticipant() || snapshotViewOnly;
+    const sourceReadOnly = viewOnly || reviewModeActive;
     if (markdownEditor) {
-      markdownEditor.readOnly = viewOnly;
-      markdownEditor.setAttribute('aria-readonly', viewOnly ? 'true' : 'false');
-      markdownEditor.classList.toggle('live-share-readonly-editor', viewOnly);
-      markdownEditor.title = viewOnly ? getEditorReadOnlyMessage() : '';
+      markdownEditor.readOnly = sourceReadOnly;
+      markdownEditor.setAttribute('aria-readonly', sourceReadOnly ? 'true' : 'false');
+      markdownEditor.classList.toggle('live-share-readonly-editor', sourceReadOnly);
+      markdownEditor.title = sourceReadOnly ? getEditorReadOnlyMessage() : '';
     }
 
     viewModeButtons.forEach(function(button) {
       const mode = button.getAttribute('data-view-mode');
-      const shouldDisable = snapshotViewOnly && mode !== 'preview';
+      const shouldDisable = (snapshotViewOnly || reviewModeActive) && mode !== 'preview';
       if (shouldDisable) {
         button.dataset.shareSnapshotDisabled = 'true';
         button.disabled = true;
@@ -13400,7 +14293,7 @@ ${selector} .arrowheadPath {
 
     mobileViewModeButtons.forEach(function(button) {
       const mode = button.getAttribute('data-mode');
-      const shouldDisable = snapshotViewOnly && mode !== 'preview';
+      const shouldDisable = (snapshotViewOnly || reviewModeActive) && mode !== 'preview';
       if (shouldDisable) {
         button.dataset.shareSnapshotDisabled = 'true';
         button.disabled = true;
@@ -13491,10 +14384,10 @@ ${selector} .arrowheadPath {
     });
 
     if (markdownFormatToolbar) {
-      markdownFormatToolbar.classList.toggle('is-live-view-only', viewOnly);
+      markdownFormatToolbar.classList.toggle('is-live-view-only', sourceReadOnly);
       markdownFormatToolbar.querySelectorAll('[data-md-action]').forEach(function(button) {
         const action = button.getAttribute('data-md-action');
-        const shouldDisable = viewOnly && isLiveMutatingAction(action);
+        const shouldDisable = sourceReadOnly && isLiveMutatingAction(action);
         if (shouldDisable) {
           button.dataset.liveViewOnlyDisabled = 'true';
           button.disabled = true;
@@ -13507,7 +14400,7 @@ ${selector} .arrowheadPath {
           button.setAttribute('aria-disabled', 'false');
         }
       });
-      if (!viewOnly) {
+      if (!sourceReadOnly) {
         updateUndoRedoButtons();
       }
     }
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 488e43c9..9846a973 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -23,6 +23,12 @@
   /* Code block background for light mode */
   --skeleton-bg: #e2e8f0;
   --skeleton-glow: rgba(255, 255, 255, 0.65);
+  --review-accent: #8250df;
+  --review-accent-strong: #6639ba;
+  --review-accent-soft: #f3effb;
+  --review-suggestion: #9a6700;
+  --review-suggestion-soft: #fff8c5;
+  --review-panel-shadow: -12px 0 32px rgba(31, 35, 40, 0.16);
 
   /* Find & Replace Panel custom properties (PERF-010 consolidated) */
   --fr-bg: rgba(255, 255, 255, 0.95);
@@ -63,6 +69,12 @@
   /* Code block background for dark mode */
   --skeleton-bg: #2d3139;
   --skeleton-glow: rgba(255, 255, 255, 0.08);
+  --review-accent: #a371f7;
+  --review-accent-strong: #bc8cff;
+  --review-accent-soft: rgba(163, 113, 247, 0.15);
+  --review-suggestion: #d29922;
+  --review-suggestion-soft: rgba(187, 128, 9, 0.16);
+  --review-panel-shadow: -12px 0 32px rgba(0, 0, 0, 0.45);
 
   /* Find & Replace Panel custom properties for dark mode */
   --fr-bg: rgba(28, 33, 40, 0.98);
@@ -5984,6 +5996,588 @@ html[data-theme="dark"] .mermaid svg {
   isolation: isolate;
 }
 
+/* ========================================
+   COMMENTS & SUGGESTIONS
+   ======================================== */
+.review-toggle {
+  position: relative;
+}
+
+.review-toggle.is-active {
+  color: var(--review-accent-strong);
+  background: var(--review-accent-soft);
+  border-color: var(--review-accent);
+}
+
+.review-count-badge {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  background: var(--review-accent);
+  font-size: 0.68rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.review-count-badge[hidden],
+.review-panel[hidden],
+.review-panel-backdrop[hidden],
+.review-composer[hidden] {
+  display: none !important;
+}
+
+#mobile-review-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.review-panel {
+  position: absolute;
+  z-index: 85;
+  inset-block: 0;
+  inset-inline-end: 0;
+  width: min(380px, calc(100% - 48px));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--text-color);
+  background: var(--bg-color);
+  border-inline-start: 1px solid var(--border-color);
+  box-shadow: var(--review-panel-shadow);
+}
+
+.review-panel-backdrop {
+  position: absolute;
+  z-index: 84;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: rgba(31, 35, 40, 0.38);
+  cursor: default;
+}
+
+.review-panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 18px 18px 14px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.review-panel-eyebrow {
+  margin: 0 0 3px;
+  color: var(--review-accent-strong);
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.review-panel-header h2,
+.review-composer-heading h3,
+.review-empty-state h3 {
+  margin: 0;
+  color: var(--text-color);
+  font-weight: 650;
+}
+
+.review-panel-header h2 {
+  font-size: 1rem;
+}
+
+.review-panel-summary {
+  margin: 4px 0 0;
+  color: var(--text-secondary);
+  font-size: 0.78rem;
+}
+
+.review-icon-btn {
+  width: 32px;
+  height: 32px;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.review-icon-btn:hover:not(:disabled) {
+  color: var(--text-color);
+  background: var(--button-hover);
+  border-color: var(--border-color);
+}
+
+.review-icon-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.review-panel-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.review-filter-group,
+.review-kind-group {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px;
+  background: var(--button-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+}
+
+.review-filter-btn,
+.review-kind-btn {
+  color: var(--text-secondary);
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.review-filter-btn {
+  padding: 5px 10px;
+  font-size: 0.74rem;
+}
+
+.review-filter-btn.is-active,
+.review-kind-btn.is-active {
+  color: var(--review-accent-strong);
+  background: var(--bg-color);
+  box-shadow: 0 1px 3px rgba(31, 35, 40, 0.12);
+}
+
+.review-composer {
+  margin: 14px 14px 4px;
+  padding: 14px;
+  background: var(--review-accent-soft);
+  border: 1px solid color-mix(in srgb, var(--review-accent) 45%, var(--border-color));
+  border-radius: 10px;
+}
+
+.review-composer-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.review-composer-heading h3 {
+  font-size: 0.9rem;
+}
+
+.review-anchor-preview {
+  display: -webkit-box;
+  margin: 10px 0 12px;
+  overflow: hidden;
+  color: var(--text-secondary);
+  font-size: 0.78rem;
+  line-height: 1.45;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.review-kind-group {
+  width: 100%;
+  margin-bottom: 12px;
+}
+
+.review-kind-btn {
+  flex: 1;
+  padding: 7px 8px;
+  font-size: 0.76rem;
+}
+
+.review-kind-btn[data-review-kind="suggestion"].is-active {
+  color: var(--review-suggestion);
+  background: var(--review-suggestion-soft);
+}
+
+.review-feedback-label {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--text-color);
+  font-size: 0.76rem;
+  font-weight: 650;
+}
+
+.review-feedback-input {
+  width: 100%;
+  min-height: 92px;
+  padding: 9px 10px;
+  resize: vertical;
+  color: var(--text-color);
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  border-radius: 7px;
+  font: inherit;
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
+.review-feedback-input:focus {
+  border-color: var(--review-accent);
+  outline: 2px solid color-mix(in srgb, var(--review-accent) 24%, transparent);
+  outline-offset: 0;
+}
+
+.review-composer-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 9px;
+}
+
+.review-feedback-count {
+  color: var(--text-secondary);
+  font-size: 0.7rem;
+}
+
+.review-primary-btn {
+  min-height: 32px;
+  padding: 6px 12px;
+  color: #ffffff;
+  background: var(--review-accent);
+  border: 1px solid var(--review-accent-strong);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.76rem;
+  font-weight: 650;
+}
+
+.review-primary-btn:hover:not(:disabled) {
+  background: var(--review-accent-strong);
+}
+
+.review-primary-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.review-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px 14px 18px;
+}
+
+.review-thread {
+  margin-bottom: 10px;
+  padding: 12px;
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  border-inline-start: 3px solid var(--review-accent);
+  border-radius: 8px;
+}
+
+.review-thread[data-kind="suggestion"] {
+  border-inline-start-color: var(--review-suggestion);
+}
+
+.review-thread.is-resolved {
+  opacity: 0.72;
+}
+
+.review-thread.is-orphaned {
+  border-style: dashed;
+}
+
+.review-thread-header,
+.review-thread-meta,
+.review-thread-actions {
+  display: flex;
+  align-items: center;
+}
+
+.review-thread-header {
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.review-thread-meta {
+  min-width: 0;
+  gap: 6px;
+}
+
+.review-kind-label,
+.review-status-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 999px;
+  font-size: 0.67rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.review-kind-label {
+  padding: 5px 7px;
+  color: var(--review-accent-strong);
+  background: var(--review-accent-soft);
+}
+
+.review-thread[data-kind="suggestion"] .review-kind-label {
+  color: var(--review-suggestion);
+  background: var(--review-suggestion-soft);
+}
+
+.review-status-label {
+  color: var(--text-secondary);
+}
+
+.review-thread-anchor {
+  width: 100%;
+  margin: 9px 0 8px;
+  padding: 0;
+  overflow: hidden;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font-size: 0.72rem;
+  line-height: 1.35;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.review-thread-anchor:hover:not(:disabled) {
+  color: var(--review-accent-strong);
+  text-decoration: underline;
+}
+
+.review-thread-anchor:disabled {
+  cursor: default;
+  white-space: normal;
+}
+
+.review-thread-body {
+  margin: 0;
+  color: var(--text-color);
+  font-size: 0.82rem;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.review-thread-time {
+  display: block;
+  margin-top: 9px;
+  color: var(--text-secondary);
+  font-size: 0.67rem;
+}
+
+.review-thread-actions {
+  justify-content: flex-end;
+  gap: 4px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border-color);
+}
+
+.review-thread-action {
+  padding: 5px 7px;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
+.review-thread-action:hover {
+  color: var(--text-color);
+  background: var(--button-hover);
+}
+
+.review-thread-action.is-danger:hover {
+  color: var(--color-danger-fg);
+}
+
+.review-empty-state {
+  margin: auto;
+  padding: 30px 26px;
+  color: var(--text-secondary);
+  text-align: center;
+}
+
+.review-empty-state i {
+  display: block;
+  margin-bottom: 10px;
+  color: var(--review-accent);
+  font-size: 1.7rem;
+}
+
+.review-empty-state h3 {
+  font-size: 0.9rem;
+}
+
+.review-empty-state p {
+  margin: 7px auto 0;
+  max-width: 270px;
+  font-size: 0.76rem;
+  line-height: 1.45;
+}
+
+#markdown-preview .review-target {
+  border-radius: 5px;
+}
+
+#markdown-preview .review-target:not(.review-target--diagram) {
+  padding-inline-end: 44px;
+}
+
+#markdown-preview .review-target--diagram {
+  padding-block-end: 44px;
+}
+
+#markdown-preview .review-target.is-review-target-active {
+  outline: 2px solid var(--review-accent);
+  outline-offset: 4px;
+}
+
+#markdown-preview .review-target.has-review-thread {
+  box-shadow: inset 3px 0 0 var(--review-accent);
+}
+
+[dir="rtl"] #markdown-preview .review-target.has-review-thread {
+  box-shadow: inset -3px 0 0 var(--review-accent);
+}
+
+.review-pins-layer {
+  position: absolute;
+  z-index: 20;
+  inset: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.review-pins-layer[hidden] {
+  display: none !important;
+}
+
+.review-target-button {
+  position: absolute;
+  z-index: 8;
+  min-width: 30px;
+  height: 30px;
+  padding: 0 7px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  color: #ffffff;
+  background: var(--review-accent);
+  border: 1px solid var(--review-accent-strong);
+  border-radius: 999px;
+  box-shadow: 0 2px 8px rgba(31, 35, 40, 0.22);
+  cursor: pointer;
+  font-size: 0.68rem;
+  font-weight: 700;
+  opacity: 1;
+  pointer-events: auto;
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+
+.review-target-button[data-review-count]::after {
+  content: attr(data-review-count);
+}
+
+.review-target-button:hover {
+  background: var(--review-accent-strong);
+}
+
+.review-filter-btn:focus-visible,
+.review-kind-btn:focus-visible,
+.review-icon-btn:focus-visible,
+.review-primary-btn:focus-visible,
+.review-thread-action:focus-visible,
+.review-thread-anchor:focus-visible,
+.review-target-button:focus-visible {
+  outline: 2px solid var(--review-accent);
+  outline-offset: 2px;
+}
+
+@media (min-width: 1080px) {
+  .review-panel {
+    position: relative;
+    inset: auto;
+    width: 380px;
+    height: auto;
+    flex: 0 0 380px;
+    box-shadow: none;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1079px) {
+  .review-panel {
+    width: min(390px, 100%);
+  }
+
+  .content-container.is-reviewing .preview-pane {
+    padding-inline-end: 410px;
+  }
+}
+
+@media (max-width: 767px) {
+  .review-panel {
+    inset-block-start: auto;
+    inset-block-end: 0;
+    width: 100%;
+    height: min(56%, 560px);
+    border-inline-start: 0;
+    border-top: 1px solid var(--border-color);
+    box-shadow: 0 -12px 32px rgba(31, 35, 40, 0.2);
+  }
+
+  .content-container.is-reviewing .preview-pane {
+    padding-bottom: calc(56vh + 20px);
+  }
+
+  .review-panel-header {
+    padding-top: 14px;
+  }
+
+  .review-target-button {
+    min-width: 44px;
+    height: 44px;
+  }
+
+  #markdown-preview .review-target:not(.review-target--diagram) {
+    padding-inline-end: 56px;
+  }
+
+  #markdown-preview .review-target--diagram {
+    padding-block-end: 56px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .review-target-button {
+    transition: none;
+  }
+}
+
 
 
 
@@ -6011,10 +6605,28 @@ html[data-theme="dark"] .mermaid svg {
   .plantuml-toolbar,
   .d2-toolbar,
   .graphviz-toolbar,
-  .stl-toolbar {
+  .stl-toolbar,
+  .review-panel,
+  .review-panel-backdrop,
+  .review-pins-layer,
+  .review-target-button {
     display: none !important;
   }
 
+  #markdown-preview .review-target,
+  #markdown-preview .review-target.has-review-thread,
+  [dir="rtl"] #markdown-preview .review-target.has-review-thread {
+    outline: none !important;
+    box-shadow: none !important;
+    padding-inline-end: 0 !important;
+    padding-block-end: 0 !important;
+  }
+
+  .content-container.is-reviewing .preview-pane {
+    padding-inline-end: 20px !important;
+    padding-bottom: 20px !important;
+  }
+
   .preview-pane {
     width: 100% !important;
     max-width: 100% !important;
diff --git a/index.html b/index.html
index c8a6bd5b..a062a3fc 100644
--- a/index.html
+++ b/index.html
@@ -202,6 +202,11 @@ <h1 class="h4 mb-0 me-2">Markdown Viewer<span class="visually-hidden"> - Online
                         <i class="bi bi-broadcast"></i> <span class="btn-text">Live Share</span>
                     </button>
                     <div id="live-share-toolbar-participants" class="live-share-toolbar-participants" aria-label="Live Share participants" hidden></div>
+
+                    <button id="review-toggle" class="tool-button review-toggle" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
+                        <i class="bi bi-chat-square-text"></i> <span class="btn-text">Review</span>
+                        <span id="review-count-badge" class="review-count-badge" aria-label="0 open review items" hidden>0</span>
+                    </button>
                     
                     <div class="dropdown me-1">
                         <button class="tool-button dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Switch Language">
@@ -329,6 +334,11 @@ <h2 class="h5 m-0">Menu</h2>
                                 <span class="mobile-menu-item-label"><i class="bi bi-broadcast me-2"></i><span id="mobile-live-share-label">Live Share</span></span>
                                 <span id="mobile-live-share-participants" class="live-share-toolbar-participants mobile-live-share-participants" aria-label="Live Share participants" hidden></span>
                             </button>
+
+                            <button id="mobile-review-toggle" class="mobile-menu-item" type="button" title="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
+                                <span><i class="bi bi-chat-square-text me-2"></i>Review</span>
+                                <span id="mobile-review-count-badge" class="review-count-badge" aria-label="0 open review items" hidden>0</span>
+                            </button>
                             
                             <div class="mobile-menu-item dropdown w-100 p-0 border-0">
                                 <button class="mobile-menu-item w-100 text-start dropdown-toggle" type="button" id="mobileLanguageDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Switch Language">
@@ -631,6 +641,7 @@ <h3 class="modal-section-title">Application shortcuts</h3>
                 <ul class="modal-list">
                   <li>Use the view buttons in the toolbar to switch between Editor, Split, and Preview modes.</li>
                   <li>Sync scrolling is available in Split view to keep the editor and preview aligned.</li>
+                  <li>Review opens a read-only preview where you can comment on or suggest changes to headings, paragraphs, code blocks, and diagrams.</li>
                   <li>Import, Export, Copy, Share, and Theme toggle actions are always available in the header toolbar.</li>
                 </ul>
               </div>
@@ -1162,7 +1173,66 @@ <h3 class="modal-section-title">Open-source credits</h3>
                         <div class="skeleton-placeholder skeleton-line skeleton-w45"></div>
                     </div>
                 </div>
-            </div>
+                <div id="review-pins-layer" class="review-pins-layer" role="group" aria-label="Review pins" hidden></div>
+            </div>
+            <button id="review-panel-backdrop" class="review-panel-backdrop" type="button" aria-label="Close comments and suggestions" hidden></button>
+            <aside id="review-panel" class="review-panel" aria-labelledby="review-panel-title" hidden>
+                <div class="review-panel-header">
+                    <div>
+                        <p class="review-panel-eyebrow">Review mode</p>
+                        <h2 id="review-panel-title">Comments &amp; suggestions</h2>
+                        <p id="review-panel-summary" class="review-panel-summary">No open feedback</p>
+                    </div>
+                    <button id="review-panel-close" class="review-icon-btn" type="button" aria-label="Close comments and suggestions" title="Close review mode">
+                        <i class="bi bi-x-lg" aria-hidden="true"></i>
+                    </button>
+                </div>
+
+                <div class="review-panel-toolbar">
+                    <div class="review-filter-group" role="group" aria-label="Filter review items">
+                        <button class="review-filter-btn is-active" type="button" data-review-filter="open" aria-pressed="true">Open</button>
+                        <button class="review-filter-btn" type="button" data-review-filter="resolved" aria-pressed="false">Resolved</button>
+                        <button class="review-filter-btn" type="button" data-review-filter="all" aria-pressed="false">All</button>
+                    </div>
+                    <button id="review-copy-summary" class="review-icon-btn" type="button" aria-label="Copy review summary" title="Copy review summary" disabled>
+                        <i class="bi bi-clipboard" aria-hidden="true"></i>
+                    </button>
+                </div>
+
+                <section id="review-composer" class="review-composer" aria-labelledby="review-composer-title" hidden>
+                    <div class="review-composer-heading">
+                        <div>
+                            <p class="review-panel-eyebrow">Selected block</p>
+                            <h3 id="review-composer-title">Add feedback</h3>
+                        </div>
+                        <button id="review-composer-cancel" class="review-icon-btn" type="button" aria-label="Cancel feedback" title="Cancel">
+                            <i class="bi bi-x" aria-hidden="true"></i>
+                        </button>
+                    </div>
+                    <p id="review-composer-anchor" class="review-anchor-preview"></p>
+                    <div class="review-kind-group" role="group" aria-label="Feedback type">
+                        <button class="review-kind-btn is-active" type="button" data-review-kind="comment" aria-pressed="true">
+                            <i class="bi bi-chat-left-text" aria-hidden="true"></i> Comment
+                        </button>
+                        <button class="review-kind-btn" type="button" data-review-kind="suggestion" aria-pressed="false">
+                            <i class="bi bi-lightbulb" aria-hidden="true"></i> Suggestion
+                        </button>
+                    </div>
+                    <label id="review-feedback-label" class="review-feedback-label" for="review-feedback-input">Comment</label>
+                    <textarea id="review-feedback-input" class="review-feedback-input" rows="4" maxlength="2000" placeholder="Leave a focused comment for the author..."></textarea>
+                    <div class="review-composer-footer">
+                        <span id="review-feedback-count" class="review-feedback-count">0 / 2000</span>
+                        <button id="review-feedback-submit" class="review-primary-btn" type="button" disabled>Add comment</button>
+                    </div>
+                </section>
+
+                <div id="review-list" class="review-list" aria-live="polite"></div>
+                <div id="review-empty-state" class="review-empty-state">
+                    <i class="bi bi-chat-square-dots" aria-hidden="true"></i>
+                    <h3>No open feedback</h3>
+                    <p>Use the comment pins in the preview to leave feedback without changing the Markdown.</p>
+                </div>
+            </aside>
         </main>
     </div>
 
diff --git a/script.js b/script.js
index e692ed31..d66c996c 100644
--- a/script.js
+++ b/script.js
@@ -263,6 +263,16 @@ document.addEventListener("DOMContentLoaded", async function () {
   const shareSnapshotViewOnlyTabIds = new Set();
   const SHARE_SNAPSHOT_TAB_KIND = 'share-snapshot';
   const APP_VERSION = '3.9.0';
+  const REVIEW_TARGET_SELECTOR = 'h1, h2, h3, h4, h5, h6, p, pre, .diagram-viewer, .geojson-container, .topojson-container, .stl-container';
+  const REVIEW_TEXT_LIMIT = 2000;
+  let reviewModeActive = false;
+  const reviewPreviousViewModes = new Map();
+  let reviewFilter = 'open';
+  let reviewComposerKind = 'comment';
+  let activeReviewAnchor = null;
+  let reviewPinsResizeObserver = null;
+  let reviewPinsLayoutFrame = null;
+  let reviewTargetSourceSnapshots = new WeakMap();
   let activeModal = null;
   let lastFocusedElement = null;
   let isFindModalOpen = false;
@@ -292,6 +302,7 @@ document.addEventListener("DOMContentLoaded", async function () {
 
   const markdownEditor = document.getElementById("markdown-editor");
   const markdownPreview = document.getElementById("markdown-preview");
+  const reviewPinsLayer = document.getElementById('review-pins-layer');
   const markdownFormatToolbar = document.getElementById("markdown-format-toolbar");
   const themeToggle = document.getElementById("theme-toggle");
   const directionToggle = document.getElementById("direction-toggle");
@@ -318,6 +329,24 @@ document.addEventListener("DOMContentLoaded", async function () {
   const readingTimeElement = document.getElementById("reading-time");
   const wordCountElement = document.getElementById("word-count");
   const charCountElement = document.getElementById("char-count");
+  const reviewToggle = document.getElementById('review-toggle');
+  const mobileReviewToggle = document.getElementById('mobile-review-toggle');
+  const reviewCountBadge = document.getElementById('review-count-badge');
+  const mobileReviewCountBadge = document.getElementById('mobile-review-count-badge');
+  const reviewPanel = document.getElementById('review-panel');
+  const reviewPanelBackdrop = document.getElementById('review-panel-backdrop');
+  const reviewPanelClose = document.getElementById('review-panel-close');
+  const reviewPanelSummary = document.getElementById('review-panel-summary');
+  const reviewCopySummary = document.getElementById('review-copy-summary');
+  const reviewComposer = document.getElementById('review-composer');
+  const reviewComposerAnchor = document.getElementById('review-composer-anchor');
+  const reviewComposerCancel = document.getElementById('review-composer-cancel');
+  const reviewFeedbackLabel = document.getElementById('review-feedback-label');
+  const reviewFeedbackInput = document.getElementById('review-feedback-input');
+  const reviewFeedbackCount = document.getElementById('review-feedback-count');
+  const reviewFeedbackSubmit = document.getElementById('review-feedback-submit');
+  const reviewList = document.getElementById('review-list');
+  const reviewEmptyState = document.getElementById('review-empty-state');
 
   // View Mode Elements - Story 1.1
   const contentContainer = document.querySelector(".content-container");
@@ -395,6 +424,9 @@ document.addEventListener("DOMContentLoaded", async function () {
   }
 
   function getEditorReadOnlyMessage() {
+    if (reviewModeActive) {
+      return 'Review mode keeps the Markdown source read only.';
+    }
     if (isShareSnapshotViewOnlyActive()) {
       return 'This shared snapshot is view only.';
     }
@@ -662,6 +694,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   function applyDirectionToContent(direction) {
     if (markdownEditor) markdownEditor.setAttribute("dir", direction);
     if (markdownPreview) markdownPreview.setAttribute("dir", direction);
+    scheduleReviewPinsLayout();
   }
   applyDirectionToContent(initialDirection);
   updateDirectionToggleUI(initialDirection);
@@ -2377,6 +2410,833 @@ document.addEventListener("DOMContentLoaded", async function () {
   const LIVE_EDIT_ORIGIN = Symbol("markdown-viewer-live-local-edit");
   const LIVE_RELAY_ORIGIN = Symbol("markdown-viewer-live-relay");
 
+  // ========================================
+  // COMMENTS & SUGGESTIONS
+  // ========================================
+
+  function normalizeReviewThreads(rawThreads) {
+    if (!Array.isArray(rawThreads)) return [];
+    return rawThreads.slice(-500).map(function(thread) {
+      if (!thread || typeof thread !== 'object' || !thread.anchor || typeof thread.anchor.key !== 'string') {
+        return null;
+      }
+      const body = typeof thread.body === 'string' ? thread.body.trim().slice(0, REVIEW_TEXT_LIMIT) : '';
+      if (!body) return null;
+      const createdAt = Number.isFinite(Number(thread.createdAt)) ? Number(thread.createdAt) : Date.now();
+      const updatedAt = Number.isFinite(Number(thread.updatedAt)) ? Number(thread.updatedAt) : createdAt;
+      return {
+        id: typeof thread.id === 'string' && thread.id ? thread.id.slice(0, 120) : createReviewId(),
+        anchor: {
+          key: thread.anchor.key.slice(0, 240),
+          type: typeof thread.anchor.type === 'string' ? thread.anchor.type.slice(0, 40) : 'block',
+          label: typeof thread.anchor.label === 'string' ? thread.anchor.label.slice(0, 120) : 'Document block',
+          excerpt: typeof thread.anchor.excerpt === 'string' ? thread.anchor.excerpt.slice(0, 240) : '',
+          duplicateCount: Number.isFinite(Number(thread.anchor.duplicateCount))
+            ? Math.max(1, Number(thread.anchor.duplicateCount))
+            : null,
+          context: typeof thread.anchor.context === 'string' ? thread.anchor.context.slice(0, 80) : null
+        },
+        kind: thread.kind === 'suggestion' ? 'suggestion' : 'comment',
+        body: body,
+        createdAt: createdAt,
+        updatedAt: updatedAt,
+        resolved: thread.resolved === true
+      };
+    }).filter(Boolean);
+  }
+
+  function createReviewId() {
+    if (window.crypto && typeof window.crypto.randomUUID === 'function') {
+      return 'review_' + window.crypto.randomUUID();
+    }
+    return 'review_' + Date.now() + '_' + Math.random().toString(36).slice(2, 10);
+  }
+
+  function getActiveReviewTab() {
+    return tabs.find(function(tab) { return tab.id === activeTabId; }) || null;
+  }
+
+  function getActiveReviewThreads() {
+    const tab = getActiveReviewTab();
+    if (!tab) return [];
+    if (!Array.isArray(tab.reviewThreads)) {
+      tab.reviewThreads = [];
+    }
+    return tab.reviewThreads;
+  }
+
+  function decodeReviewSource(value) {
+    if (!value) return '';
+    try {
+      return decodeURIComponent(value);
+    } catch (_) {
+      return String(value);
+    }
+  }
+
+  function getReviewTargetType(target) {
+    if (!target) return 'block';
+    if (target.matches('.diagram-viewer, .geojson-container, .topojson-container, .stl-container')) return 'diagram';
+    if (target.tagName === 'PRE') return 'code';
+    if (/^H[1-6]$/.test(target.tagName)) return 'heading';
+    if (target.tagName === 'P') return 'paragraph';
+    return 'block';
+  }
+
+  function normalizeReviewSource(source, preserveLines) {
+    const normalized = String(source || '').replace(/\r\n?/g, '\n');
+    if (!preserveLines) {
+      return normalized.replace(/\s+/g, ' ').trim();
+    }
+    return normalized.split('\n').map(function(line) {
+      return line.replace(/[ \t]+$/g, '');
+    }).join('\n').trim();
+  }
+
+  function computeReviewTargetSource(target, type) {
+    if (!target) return '';
+    if (type === 'diagram') {
+      const sourceNode = target.hasAttribute('data-original-code')
+        ? target
+        : target.querySelector('[data-original-code]');
+      return normalizeReviewSource(sourceNode ? decodeReviewSource(sourceNode.getAttribute('data-original-code')) : '', true);
+    }
+    if (type === 'code') {
+      const code = target.querySelector('code');
+      return normalizeReviewSource(code ? code.textContent : target.textContent, true);
+    }
+
+    const clone = target.cloneNode(true);
+    clone.querySelectorAll('.review-target-button, .footnote-backref').forEach(function(node) {
+      node.remove();
+    });
+    clone.querySelectorAll('img').forEach(function(image) {
+      image.replaceWith(document.createTextNode(image.getAttribute('alt') || ''));
+    });
+    return normalizeReviewSource(clone.textContent, false);
+  }
+
+  function getReviewTargetSource(target, type) {
+    const snapshot = target ? reviewTargetSourceSnapshots.get(target) : null;
+    if (snapshot && snapshot.type === type) return snapshot.source;
+    return computeReviewTargetSource(target, type);
+  }
+
+  function snapshotMathReviewTargetSources(mathTargets) {
+    if (!Array.isArray(mathTargets) || mathTargets.length === 0) return;
+    getReviewTargets().forEach(function(target) {
+      if (reviewTargetSourceSnapshots.has(target)) return;
+      const containsMathTarget = mathTargets.some(function(mathTarget) {
+        return mathTarget === target || mathTarget.contains(target) || target.contains(mathTarget);
+      });
+      if (!containsMathTarget) return;
+      const type = getReviewTargetType(target);
+      reviewTargetSourceSnapshots.set(target, {
+        type: type,
+        source: computeReviewTargetSource(target, type)
+      });
+    });
+  }
+
+  function invalidateReviewTargetSourceSnapshots(roots) {
+    (roots || []).forEach(function(root) {
+      const element = root && root.nodeType === Node.ELEMENT_NODE ? root : (root && root.parentElement);
+      if (!element) return;
+      const ancestorTarget = element.closest && element.closest(REVIEW_TARGET_SELECTOR);
+      if (ancestorTarget && markdownPreview.contains(ancestorTarget)) {
+        reviewTargetSourceSnapshots.delete(ancestorTarget);
+      }
+      if (element.matches && element.matches(REVIEW_TARGET_SELECTOR)) {
+        reviewTargetSourceSnapshots.delete(element);
+      }
+      element.querySelectorAll(REVIEW_TARGET_SELECTOR).forEach(function(target) {
+        reviewTargetSourceSnapshots.delete(target);
+      });
+    });
+  }
+
+  function hashReviewSource(value) {
+    let hash = 2166136261;
+    const text = String(value || '');
+    for (let index = 0; index < text.length; index += 1) {
+      hash ^= text.charCodeAt(index);
+      hash = Math.imul(hash, 16777619);
+    }
+    return (hash >>> 0).toString(36);
+  }
+
+  function getReviewTargetLabel(target, type) {
+    if (type === 'heading') return 'Heading ' + target.tagName;
+    if (type === 'paragraph') return 'Paragraph';
+    if (type === 'code') {
+      const code = target.querySelector('code');
+      const languageClass = code ? Array.from(code.classList).find(function(className) {
+        return className !== 'hljs' && className !== 'language-plaintext' && className !== 'plaintext';
+      }) : '';
+      const language = languageClass ? languageClass.replace(/^language-/, '') : '';
+      return language ? language + ' code block' : 'Code block';
+    }
+    if (type === 'diagram') {
+      let engine = target.getAttribute('data-diagram-engine');
+      if (!engine && target.matches('.geojson-container')) engine = 'geojson';
+      if (!engine && target.matches('.topojson-container')) engine = 'topojson';
+      if (!engine && target.matches('.stl-container')) engine = 'stl';
+      const specialLabels = {
+        geojson: 'GeoJSON map',
+        topojson: 'TopoJSON map',
+        stl: 'STL model'
+      };
+      if (specialLabels[engine]) return specialLabels[engine];
+      const engineLabel = engine ? getDiagramEngineLabel(engine) : 'Diagram';
+      return engineLabel === 'Diagram' ? engineLabel : engineLabel + ' diagram';
+    }
+    return 'Document block';
+  }
+
+  function getReviewAnchorDescriptor(target) {
+    if (!target || !target.dataset.reviewAnchor) return null;
+    const type = target.dataset.reviewType || getReviewTargetType(target);
+    const source = getReviewTargetSource(target, type);
+    const excerpt = source.length > 180 ? source.slice(0, 177) + '...' : source;
+    return {
+      key: target.dataset.reviewAnchor,
+      type: type,
+      label: target.dataset.reviewLabel || getReviewTargetLabel(target, type),
+      excerpt: excerpt || 'Empty rendered block',
+      duplicateCount: Math.max(1, Number(target.dataset.reviewDuplicateCount) || 1),
+      context: target.dataset.reviewContext || null
+    };
+  }
+
+  function getReviewTargets() {
+    if (!markdownPreview) return [];
+    return Array.from(markdownPreview.querySelectorAll(REVIEW_TARGET_SELECTOR)).filter(function(target) {
+      const diagramContainer = target.closest('.diagram-viewer, .geojson-container, .topojson-container, .stl-container');
+      if (diagramContainer && diagramContainer !== target) {
+        return false;
+      }
+      return !target.closest('.review-target-button');
+    });
+  }
+
+  function clearReviewDecorations() {
+    if (!markdownPreview) return;
+    if (reviewPinsLayer) reviewPinsLayer.textContent = '';
+    if (reviewPinsResizeObserver) {
+      reviewPinsResizeObserver.disconnect();
+      reviewPinsResizeObserver = null;
+    }
+    if (reviewPinsLayoutFrame) {
+      cancelAnimationFrame(reviewPinsLayoutFrame);
+      reviewPinsLayoutFrame = null;
+    }
+    markdownPreview.querySelectorAll('[data-review-anchor]').forEach(function(target) {
+      target.classList.remove(
+        'review-target',
+        'review-target--heading',
+        'review-target--paragraph',
+        'review-target--code',
+        'review-target--diagram',
+        'has-review-thread',
+        'is-review-target-active'
+      );
+      delete target.dataset.reviewAnchor;
+      delete target.dataset.reviewType;
+      delete target.dataset.reviewLabel;
+      delete target.dataset.reviewDuplicateCount;
+      delete target.dataset.reviewContext;
+    });
+  }
+
+  function positionReviewPins() {
+    reviewPinsLayoutFrame = null;
+    if (!reviewModeActive || !reviewPinsLayer || !previewPaneElement) return;
+    const paneRect = previewPaneElement.getBoundingClientRect();
+    const isRtl = markdownPreview && markdownPreview.getAttribute('dir') === 'rtl';
+    reviewPinsLayer.querySelectorAll('.review-target-button').forEach(function(button) {
+      const anchor = {
+        key: button.dataset.reviewAnchor,
+        duplicateCount: Number(button.dataset.reviewDuplicateCount) || null,
+        context: button.dataset.reviewContext || null
+      };
+      const target = findReviewTarget(anchor);
+      if (!target) {
+        button.hidden = true;
+        return;
+      }
+      button.hidden = false;
+      const targetRect = target.getBoundingClientRect();
+      const isDiagram = target.dataset.reviewType === 'diagram';
+      const top = isDiagram ? targetRect.bottom - 40 : targetRect.top + 4;
+      const left = isRtl ? targetRect.left + 4 : targetRect.right - 4;
+      button.style.top = (top - paneRect.top + previewPaneElement.scrollTop) + 'px';
+      button.style.left = (left - paneRect.left + previewPaneElement.scrollLeft) + 'px';
+      button.style.transform = isRtl ? 'none' : 'translateX(-100%)';
+    });
+  }
+
+  function scheduleReviewPinsLayout() {
+    if (!reviewModeActive || reviewPinsLayoutFrame) return;
+    reviewPinsLayoutFrame = requestAnimationFrame(positionReviewPins);
+  }
+
+  function observeReviewPinLayout() {
+    if (typeof ResizeObserver === 'undefined') {
+      scheduleReviewPinsLayout();
+      return;
+    }
+    reviewPinsResizeObserver = new ResizeObserver(scheduleReviewPinsLayout);
+    reviewPinsResizeObserver.observe(markdownPreview);
+    if (previewPaneElement) reviewPinsResizeObserver.observe(previewPaneElement);
+    scheduleReviewPinsLayout();
+  }
+
+  function decorateReviewTargets() {
+    clearReviewDecorations();
+    if (!reviewModeActive || !markdownPreview || previewContainsSkeleton()) return;
+
+    const threads = getActiveReviewThreads();
+    const threadsByAnchor = new Map();
+    threads.forEach(function(thread) {
+      const key = thread.anchor && thread.anchor.key;
+      if (!key) return;
+      if (!threadsByAnchor.has(key)) threadsByAnchor.set(key, []);
+      threadsByAnchor.get(key).push(thread);
+    });
+
+    const targetEntries = getReviewTargets().map(function(target) {
+      const type = getReviewTargetType(target);
+      const source = getReviewTargetSource(target, type);
+      const signature = type + '\u241f' + source;
+      return { target: target, type: type, source: source, signature: signature };
+    });
+    targetEntries.forEach(function(entry, index) {
+      const before = index > 0 ? targetEntries[index - 1].signature : 'review-start';
+      const after = index < targetEntries.length - 1 ? targetEntries[index + 1].signature : 'review-end';
+      entry.context = hashReviewSource(before) + ':' + hashReviewSource(after);
+    });
+    const signatureCounts = new Map();
+    targetEntries.forEach(function(entry) {
+      signatureCounts.set(entry.signature, (signatureCounts.get(entry.signature) || 0) + 1);
+    });
+
+    const occurrences = new Map();
+    targetEntries.forEach(function(entry) {
+      const target = entry.target;
+      const type = entry.type;
+      const source = entry.source;
+      const signature = entry.signature;
+      const duplicateContext = entry.context;
+      const occurrence = occurrences.get(signature) || 0;
+      occurrences.set(signature, occurrence + 1);
+      const duplicateCount = signatureCounts.get(signature) || 1;
+      const context = duplicateCount > 1 ? duplicateContext : '';
+      const anchorKey = type + ':' + hashReviewSource(signature) + ':' + occurrence;
+      const label = getReviewTargetLabel(target, type);
+      const targetThreads = (threadsByAnchor.get(anchorKey) || []).filter(function(thread) {
+        return (!thread.anchor.duplicateCount || thread.anchor.duplicateCount === duplicateCount) &&
+          (!thread.anchor.context || thread.anchor.context === context);
+      });
+
+      target.dataset.reviewAnchor = anchorKey;
+      target.dataset.reviewType = type;
+      target.dataset.reviewLabel = label;
+      target.dataset.reviewDuplicateCount = String(duplicateCount);
+      target.dataset.reviewContext = context;
+      target.classList.add('review-target', 'review-target--' + type);
+      target.classList.toggle('has-review-thread', targetThreads.length > 0);
+
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'review-target-button';
+      button.dataset.reviewAnchor = anchorKey;
+      button.dataset.reviewDuplicateCount = String(duplicateCount);
+      button.dataset.reviewContext = context;
+      button.dataset.html2canvasIgnore = 'true';
+      button.title = targetThreads.length > 0 ? 'Add feedback to this block' : 'Comment on this block';
+      button.setAttribute('aria-label', targetThreads.length > 0
+        ? 'Add feedback to ' + label + '. ' + targetThreads.length + ' review item' + (targetThreads.length === 1 ? '' : 's') + ' attached.'
+        : 'Add feedback to ' + label);
+
+      const icon = document.createElement('i');
+      icon.className = 'bi bi-chat-square-text';
+      icon.setAttribute('aria-hidden', 'true');
+      button.appendChild(icon);
+      if (targetThreads.length > 0) {
+        button.dataset.reviewCount = String(targetThreads.length);
+      }
+      if (reviewPinsLayer) reviewPinsLayer.appendChild(button);
+    });
+
+    observeReviewPinLayout();
+    renderReviewPanel();
+  }
+
+  function findReviewTarget(anchor) {
+    const anchorKey = typeof anchor === 'string' ? anchor : (anchor && anchor.key);
+    if (!markdownPreview || !anchorKey) return null;
+    const target = Array.from(markdownPreview.querySelectorAll('[data-review-anchor]')).find(function(candidate) {
+      return candidate.dataset.reviewAnchor === anchorKey && !candidate.classList.contains('review-target-button');
+    }) || null;
+    if (!target || !anchor || typeof anchor === 'string') return target;
+    if (anchor.duplicateCount && Number(target.dataset.reviewDuplicateCount) !== Number(anchor.duplicateCount)) return null;
+    if (anchor.context && target.dataset.reviewContext !== anchor.context) return null;
+    return target;
+  }
+
+  function updateReviewCountBadges() {
+    const openCount = getActiveReviewThreads().filter(function(thread) { return !thread.resolved; }).length;
+    [reviewCountBadge, mobileReviewCountBadge].forEach(function(badge) {
+      if (!badge) return;
+      badge.textContent = String(openCount);
+      badge.hidden = openCount === 0;
+      badge.setAttribute('aria-label', openCount + ' open review item' + (openCount === 1 ? '' : 's'));
+    });
+  }
+
+  function formatReviewTime(timestamp) {
+    try {
+      return new Intl.DateTimeFormat(undefined, {
+        dateStyle: 'medium',
+        timeStyle: 'short'
+      }).format(new Date(timestamp));
+    } catch (_) {
+      return new Date(timestamp).toLocaleString();
+    }
+  }
+
+  function createReviewThreadElement(thread) {
+    const target = findReviewTarget(thread.anchor);
+    const item = document.createElement('article');
+    item.className = 'review-thread' + (thread.resolved ? ' is-resolved' : '') + (!target ? ' is-orphaned' : '');
+    item.dataset.reviewId = thread.id;
+    item.dataset.kind = thread.kind;
+
+    const header = document.createElement('div');
+    header.className = 'review-thread-header';
+    const meta = document.createElement('div');
+    meta.className = 'review-thread-meta';
+    const kind = document.createElement('span');
+    kind.className = 'review-kind-label';
+    const kindIcon = document.createElement('i');
+    kindIcon.className = thread.kind === 'suggestion' ? 'bi bi-lightbulb' : 'bi bi-chat-left-text';
+    kindIcon.setAttribute('aria-hidden', 'true');
+    kind.appendChild(kindIcon);
+    kind.appendChild(document.createTextNode(thread.kind === 'suggestion' ? 'Suggestion' : 'Comment'));
+    meta.appendChild(kind);
+    if (thread.resolved) {
+      const status = document.createElement('span');
+      status.className = 'review-status-label';
+      status.textContent = 'Resolved';
+      meta.appendChild(status);
+    }
+    header.appendChild(meta);
+    item.appendChild(header);
+
+    const anchor = document.createElement('button');
+    anchor.type = 'button';
+    anchor.className = 'review-thread-anchor';
+    anchor.dataset.reviewAction = 'focus-anchor';
+    anchor.dataset.reviewId = thread.id;
+    anchor.disabled = !target;
+    anchor.textContent = target
+      ? thread.anchor.label + ': ' + thread.anchor.excerpt
+      : 'Anchor no longer in preview - ' + thread.anchor.label + ': ' + thread.anchor.excerpt;
+    item.appendChild(anchor);
+
+    const body = document.createElement('p');
+    body.className = 'review-thread-body';
+    body.textContent = thread.body;
+    item.appendChild(body);
+
+    const time = document.createElement('time');
+    time.className = 'review-thread-time';
+    time.dateTime = new Date(thread.createdAt).toISOString();
+    time.textContent = formatReviewTime(thread.createdAt);
+    item.appendChild(time);
+
+    const actions = document.createElement('div');
+    actions.className = 'review-thread-actions';
+    const statusButton = document.createElement('button');
+    statusButton.type = 'button';
+    statusButton.className = 'review-thread-action';
+    statusButton.dataset.reviewAction = 'toggle-resolved';
+    statusButton.dataset.reviewId = thread.id;
+    statusButton.textContent = thread.resolved ? 'Reopen' : 'Resolve';
+    actions.appendChild(statusButton);
+    const deleteButton = document.createElement('button');
+    deleteButton.type = 'button';
+    deleteButton.className = 'review-thread-action is-danger';
+    deleteButton.dataset.reviewAction = 'delete';
+    deleteButton.dataset.reviewId = thread.id;
+    deleteButton.textContent = 'Delete';
+    actions.appendChild(deleteButton);
+    item.appendChild(actions);
+
+    return item;
+  }
+
+  function renderReviewPanel() {
+    updateReviewCountBadges();
+    if (!reviewPanel || !reviewList || !reviewEmptyState) return;
+    const threads = getActiveReviewThreads();
+    const openCount = threads.filter(function(thread) { return !thread.resolved; }).length;
+    if (reviewPanelSummary) {
+      reviewPanelSummary.textContent = openCount === 0
+        ? (threads.length === 0 ? 'No feedback yet' : 'All feedback resolved')
+        : openCount + ' open item' + (openCount === 1 ? '' : 's') + (threads.length === openCount ? '' : ' - ' + threads.length + ' total');
+    }
+    if (reviewCopySummary) reviewCopySummary.disabled = threads.length === 0;
+
+    const filteredThreads = threads.filter(function(thread) {
+      if (reviewFilter === 'resolved') return thread.resolved;
+      if (reviewFilter === 'all') return true;
+      return !thread.resolved;
+    }).sort(function(a, b) { return b.createdAt - a.createdAt; });
+
+    reviewList.textContent = '';
+    filteredThreads.forEach(function(thread) {
+      reviewList.appendChild(createReviewThreadElement(thread));
+    });
+    reviewList.hidden = filteredThreads.length === 0;
+    reviewEmptyState.hidden = filteredThreads.length > 0;
+    if (filteredThreads.length === 0) {
+      const title = reviewEmptyState.querySelector('h3');
+      const copy = reviewEmptyState.querySelector('p');
+      if (reviewFilter === 'resolved') {
+        title.textContent = 'No resolved feedback';
+        copy.textContent = 'Resolved comments and suggestions will appear here.';
+      } else if (reviewFilter === 'all') {
+        title.textContent = 'No feedback yet';
+        copy.textContent = 'Use the comment pins in the preview to leave feedback without changing the Markdown.';
+      } else {
+        title.textContent = 'No open feedback';
+        copy.textContent = threads.length > 0
+          ? 'Everything has been resolved. Switch to Resolved or All to review earlier feedback.'
+          : 'Use the comment pins in the preview to leave feedback without changing the Markdown.';
+      }
+    }
+  }
+
+  function updateReviewComposerKind(kind) {
+    reviewComposerKind = kind === 'suggestion' ? 'suggestion' : 'comment';
+    document.querySelectorAll('[data-review-kind]').forEach(function(button) {
+      const active = button.dataset.reviewKind === reviewComposerKind;
+      button.classList.toggle('is-active', active);
+      button.setAttribute('aria-pressed', active ? 'true' : 'false');
+    });
+    if (reviewFeedbackLabel) {
+      reviewFeedbackLabel.textContent = reviewComposerKind === 'suggestion' ? 'Suggested change' : 'Comment';
+    }
+    if (reviewFeedbackInput) {
+      reviewFeedbackInput.placeholder = reviewComposerKind === 'suggestion'
+        ? 'Describe the change you recommend without editing the source...'
+        : 'Leave a focused comment for the author...';
+    }
+    if (reviewFeedbackSubmit) {
+      reviewFeedbackSubmit.textContent = reviewComposerKind === 'suggestion' ? 'Add suggestion' : 'Add comment';
+    }
+  }
+
+  function focusReviewPin(anchor) {
+    const target = findReviewTarget(anchor);
+    if (!target || !reviewPinsLayer) return false;
+    const button = Array.from(reviewPinsLayer.querySelectorAll('.review-target-button')).find(function(candidate) {
+      return candidate.dataset.reviewAnchor === target.dataset.reviewAnchor &&
+        candidate.dataset.reviewContext === target.dataset.reviewContext;
+    }) || null;
+    if (!button) return false;
+    button.focus({ preventScroll: true });
+    return true;
+  }
+
+  function closeReviewComposer(options) {
+    options = options || {};
+    const returnAnchor = activeReviewAnchor;
+    if (activeReviewAnchor) {
+      const previousTarget = findReviewTarget(activeReviewAnchor);
+      if (previousTarget) previousTarget.classList.remove('is-review-target-active');
+    }
+    activeReviewAnchor = null;
+    if (reviewComposer) reviewComposer.hidden = true;
+    if (reviewFeedbackInput) reviewFeedbackInput.value = '';
+    if (reviewFeedbackCount) reviewFeedbackCount.textContent = '0 / ' + REVIEW_TEXT_LIMIT;
+    if (reviewFeedbackSubmit) reviewFeedbackSubmit.disabled = true;
+    if (options.restoreFocus && reviewModeActive && !focusReviewPin(returnAnchor) && reviewPanelClose) {
+      reviewPanelClose.focus();
+    }
+  }
+
+  function openReviewComposer(target) {
+    if (!target) return;
+    const descriptor = getReviewAnchorDescriptor(target);
+    if (!descriptor) return;
+    closeReviewComposer();
+    activeReviewAnchor = descriptor;
+    target.classList.add('is-review-target-active');
+    if (reviewComposerAnchor) {
+      reviewComposerAnchor.textContent = descriptor.label + ': ' + descriptor.excerpt;
+    }
+    updateReviewComposerKind(reviewComposerKind);
+    if (reviewComposer) reviewComposer.hidden = false;
+    if (reviewFeedbackInput) {
+      reviewFeedbackInput.value = '';
+      reviewFeedbackInput.focus();
+    }
+  }
+
+  function persistReviewThreads(message) {
+    saveTabsToStorage(tabs);
+    decorateReviewTargets();
+    renderReviewPanel();
+    if (message) announceToScreenReader(message);
+  }
+
+  function submitReviewFeedback() {
+    if (!activeReviewAnchor || !reviewFeedbackInput) return;
+    const body = reviewFeedbackInput.value.trim();
+    if (!body) return;
+    const returnAnchor = Object.assign({}, activeReviewAnchor);
+    getActiveReviewThreads().push({
+      id: createReviewId(),
+      anchor: Object.assign({}, activeReviewAnchor),
+      kind: reviewComposerKind,
+      body: body.slice(0, REVIEW_TEXT_LIMIT),
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      resolved: false
+    });
+    const label = reviewComposerKind === 'suggestion' ? 'Suggestion added.' : 'Comment added.';
+    closeReviewComposer();
+    persistReviewThreads(label);
+    focusReviewPin(returnAnchor);
+  }
+
+  function focusReviewAnchor(thread) {
+    const target = thread && thread.anchor ? findReviewTarget(thread.anchor) : null;
+    if (!target) return;
+    markdownPreview.querySelectorAll('.is-review-target-active').forEach(function(node) {
+      node.classList.remove('is-review-target-active');
+    });
+    target.classList.add('is-review-target-active');
+    target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    focusReviewPin(thread.anchor);
+    clearTimeout(focusReviewAnchor._timeoutId);
+    focusReviewAnchor._timeoutId = setTimeout(function() {
+      if (!activeReviewAnchor || activeReviewAnchor.key !== thread.anchor.key) {
+        target.classList.remove('is-review-target-active');
+      }
+    }, 1800);
+  }
+
+  function buildReviewSummary() {
+    const tab = getActiveReviewTab();
+    const threads = getActiveReviewThreads().slice().sort(function(a, b) { return a.createdAt - b.createdAt; });
+    const lines = ['# Review: ' + (tab && tab.title ? tab.title : 'Markdown document'), ''];
+    threads.forEach(function(thread, index) {
+      const kind = thread.kind === 'suggestion' ? 'Suggestion' : 'Comment';
+      lines.push((index + 1) + '. **' + kind + '** - ' + thread.anchor.label + (thread.resolved ? ' _(resolved)_' : ''));
+      if (thread.anchor.excerpt) lines.push('   > ' + thread.anchor.excerpt.replace(/\n/g, ' '));
+      thread.body.split('\n').forEach(function(line) {
+        lines.push('   ' + line);
+      });
+      lines.push('');
+    });
+    return lines.join('\n').trim();
+  }
+
+  async function copyReviewSummary() {
+    if (getActiveReviewThreads().length === 0) return;
+    try {
+      await copyTextToClipboard(buildReviewSummary());
+      announceToScreenReader('Review summary copied.');
+      if (reviewCopySummary) {
+        const icon = reviewCopySummary.querySelector('i');
+        if (icon) icon.className = 'bi bi-check-lg';
+        clearTimeout(copyReviewSummary._timeoutId);
+        copyReviewSummary._timeoutId = setTimeout(function() {
+          if (icon) icon.className = 'bi bi-clipboard';
+        }, 1400);
+      }
+    } catch (error) {
+      console.error('Review summary copy failed:', error);
+      alert('Failed to copy review summary: ' + error.message);
+    }
+  }
+
+  function updateReviewBackdrop() {
+    if (!reviewPanelBackdrop) return;
+    reviewPanelBackdrop.hidden = true;
+  }
+
+  function setReviewMode(enabled, options) {
+    options = options || {};
+    const nextState = Boolean(enabled);
+    const wasActive = reviewModeActive;
+    if (nextState && !wasActive) {
+      reviewPreviousViewModes.set(activeTabId, currentViewMode || 'split');
+    }
+    reviewModeActive = nextState;
+    if (reviewModeActive && currentViewMode !== 'preview') {
+      setViewMode('preview');
+    }
+    if (reviewPanel) reviewPanel.hidden = !reviewModeActive;
+    if (reviewPinsLayer) reviewPinsLayer.hidden = !reviewModeActive;
+    if (contentContainer) contentContainer.classList.toggle('is-reviewing', reviewModeActive);
+    [reviewToggle, mobileReviewToggle].forEach(function(button) {
+      if (!button) return;
+      button.classList.toggle('is-active', reviewModeActive);
+      button.setAttribute('aria-expanded', reviewModeActive ? 'true' : 'false');
+      button.setAttribute('aria-pressed', reviewModeActive ? 'true' : 'false');
+    });
+    updateReviewBackdrop();
+    updateLiveEditorAccess();
+    if (reviewModeActive) {
+      decorateReviewTargets();
+      renderReviewPanel();
+      if (options.focusPanel && reviewPanelClose) reviewPanelClose.focus();
+    } else {
+      closeReviewComposer();
+      clearReviewDecorations();
+      const restoreMode = reviewPreviousViewModes.get(activeTabId);
+      reviewPreviousViewModes.clear();
+      if (restoreMode && restoreMode !== currentViewMode) {
+        setViewMode(restoreMode);
+        saveCurrentTabState();
+      }
+      if (options.restoreFocus) {
+        const returnTarget = window.innerWidth < 768 ? mobileMenuToggle : reviewToggle;
+        if (returnTarget) returnTarget.focus();
+      }
+    }
+  }
+
+  function initReviewMode() {
+    tabs.forEach(function(tab) {
+      tab.reviewThreads = normalizeReviewThreads(tab.reviewThreads);
+    });
+    updateReviewCountBadges();
+    renderReviewPanel();
+
+    if (reviewToggle) {
+      reviewToggle.addEventListener('click', function() {
+        setReviewMode(!reviewModeActive, { focusPanel: !reviewModeActive });
+      });
+    }
+    if (mobileReviewToggle) {
+      mobileReviewToggle.addEventListener('click', function() {
+        closeMobileMenu();
+        setReviewMode(!reviewModeActive, { focusPanel: !reviewModeActive });
+      });
+    }
+    if (reviewPanelClose) {
+      reviewPanelClose.addEventListener('click', function() {
+        setReviewMode(false, { restoreFocus: true });
+      });
+    }
+    if (reviewPanelBackdrop) {
+      reviewPanelBackdrop.addEventListener('click', function() {
+        setReviewMode(false, { restoreFocus: true });
+      });
+    }
+    if (reviewComposerCancel) {
+      reviewComposerCancel.addEventListener('click', function() {
+        closeReviewComposer({ restoreFocus: true });
+      });
+    }
+    if (reviewFeedbackInput) {
+      reviewFeedbackInput.addEventListener('input', function() {
+        const length = reviewFeedbackInput.value.length;
+        if (reviewFeedbackCount) reviewFeedbackCount.textContent = length + ' / ' + REVIEW_TEXT_LIMIT;
+        if (reviewFeedbackSubmit) reviewFeedbackSubmit.disabled = reviewFeedbackInput.value.trim().length === 0;
+      });
+      reviewFeedbackInput.addEventListener('keydown', function(event) {
+        if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+          event.preventDefault();
+          submitReviewFeedback();
+        }
+      });
+    }
+    if (reviewFeedbackSubmit) reviewFeedbackSubmit.addEventListener('click', submitReviewFeedback);
+    if (reviewCopySummary) reviewCopySummary.addEventListener('click', copyReviewSummary);
+
+    document.querySelectorAll('[data-review-kind]').forEach(function(button) {
+      button.addEventListener('click', function() {
+        updateReviewComposerKind(button.dataset.reviewKind);
+        if (reviewFeedbackInput) reviewFeedbackInput.focus();
+      });
+    });
+    document.querySelectorAll('[data-review-filter]').forEach(function(button) {
+      button.addEventListener('click', function() {
+        reviewFilter = button.dataset.reviewFilter;
+        document.querySelectorAll('[data-review-filter]').forEach(function(filterButton) {
+          const active = filterButton === button;
+          filterButton.classList.toggle('is-active', active);
+          filterButton.setAttribute('aria-pressed', active ? 'true' : 'false');
+        });
+        renderReviewPanel();
+      });
+    });
+
+    if (reviewPinsLayer) {
+      reviewPinsLayer.addEventListener('click', function(event) {
+        const button = event.target.closest('.review-target-button');
+        if (!button || !reviewModeActive) return;
+        event.preventDefault();
+        event.stopPropagation();
+        const target = findReviewTarget({
+          key: button.dataset.reviewAnchor,
+          duplicateCount: Number(button.dataset.reviewDuplicateCount) || null,
+          context: button.dataset.reviewContext || null
+        });
+        openReviewComposer(target);
+      });
+    }
+
+    if (previewPaneElement) {
+      previewPaneElement.addEventListener('scroll', scheduleReviewPinsLayout, { passive: true });
+    }
+
+    if (reviewList) {
+      reviewList.addEventListener('click', function(event) {
+        const actionButton = event.target.closest('[data-review-action]');
+        if (!actionButton) return;
+        const thread = getActiveReviewThreads().find(function(item) {
+          return item.id === actionButton.dataset.reviewId;
+        });
+        if (!thread) return;
+        const action = actionButton.dataset.reviewAction;
+        if (action === 'focus-anchor') {
+          focusReviewAnchor(thread);
+          return;
+        }
+        if (action === 'toggle-resolved') {
+          thread.resolved = !thread.resolved;
+          thread.updatedAt = Date.now();
+          persistReviewThreads(thread.resolved ? 'Review item resolved.' : 'Review item reopened.');
+          return;
+        }
+        if (action === 'delete' && confirm('Delete this review item?')) {
+          const index = getActiveReviewThreads().indexOf(thread);
+          if (index >= 0) getActiveReviewThreads().splice(index, 1);
+          persistReviewThreads('Review item deleted.');
+        }
+      });
+    }
+
+    window.addEventListener('resize', updateReviewBackdrop);
+    document.addEventListener('keydown', function(event) {
+      if (event.key !== 'Escape' || !reviewModeActive || activeModal) return;
+      if (reviewComposer && !reviewComposer.hidden) {
+        event.preventDefault();
+        closeReviewComposer({ restoreFocus: true });
+      } else {
+        event.preventDefault();
+        setReviewMode(false, { restoreFocus: true });
+      }
+    });
+  }
+
   function refreshLiveEditorUi() {
     if (!liveShareUiReady) return;
     updateLiveAccessDisplay();
@@ -2409,7 +3269,10 @@ document.addEventListener("DOMContentLoaded", async function () {
 
   function loadTabsFromStorage() {
     try {
-      return stripTemporaryTabs(JSON.parse(localStorage.getItem(STORAGE_KEY)) || []);
+      return stripTemporaryTabs(JSON.parse(localStorage.getItem(STORAGE_KEY)) || []).map(function(tab) {
+        tab.reviewThreads = normalizeReviewThreads(tab.reviewThreads);
+        return tab;
+      });
     } catch (e) {
       return [];
     }
@@ -2495,6 +3358,7 @@ document.addEventListener("DOMContentLoaded", async function () {
       content: content,
       scrollPos: 0,
       viewMode: viewMode,
+      reviewThreads: [],
       createdAt: Date.now()
     };
   }
@@ -2882,7 +3746,9 @@ document.addEventListener("DOMContentLoaded", async function () {
     if (!tab) return;
     tab.content = markdownEditor.value;
     tab.scrollPos = markdownEditor.scrollTop;
-    tab.viewMode = currentViewMode || 'split';
+    tab.viewMode = reviewModeActive && reviewPreviousViewModes.has(activeTabId)
+      ? reviewPreviousViewModes.get(activeTabId)
+      : (currentViewMode || 'split');
     if (liveCollaboration && liveCollaboration.tabId === activeTabId) {
       return;
     }
@@ -2890,6 +3756,9 @@ document.addEventListener("DOMContentLoaded", async function () {
   }
 
   function restoreViewMode(mode) {
+    if (reviewModeActive && activeTabId && !reviewPreviousViewModes.has(activeTabId)) {
+      reviewPreviousViewModes.set(activeTabId, mode || 'split');
+    }
     currentViewMode = null;
     setViewMode(mode || 'split');
   }
@@ -2897,6 +3766,8 @@ document.addEventListener("DOMContentLoaded", async function () {
   function switchTab(tabId) {
     if (tabId === activeTabId) return;
     saveCurrentTabState();
+    closeReviewComposer();
+    clearReviewDecorations();
     
     // Clear typing timeout and reset tracking for the new tab
     if (typingTimeout) {
@@ -2920,6 +3791,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     restoreViewMode(tab.viewMode);
     refreshLiveEditorUi();
     renderMarkdown();
+    renderReviewPanel();
     requestAnimationFrame(function() {
       markdownEditor.scrollTop = tab.scrollPos || 0;
       updateLiveCursorPosition();
@@ -2953,6 +3825,10 @@ document.addEventListener("DOMContentLoaded", async function () {
 
     const idx = tabs.findIndex(function(t) { return t.id === tabId; });
     if (idx === -1) return;
+    if (activeTabId === tabId) {
+      closeReviewComposer();
+      clearReviewDecorations();
+    }
     shareSnapshotViewOnlyTabIds.delete(tabId);
     
     // Clean up history of the closed tab
@@ -2986,6 +3862,8 @@ document.addEventListener("DOMContentLoaded", async function () {
     }
     saveTabsToStorage(tabs);
     renderTabBar(tabs, activeTabId);
+    closeReviewComposer();
+    renderReviewPanel();
   }
 
   function deleteTab(tabId) {
@@ -3120,6 +3998,8 @@ document.addEventListener("DOMContentLoaded", async function () {
     function doReset() {
       closeAppModal(modal);
       cleanup();
+      closeReviewComposer();
+      clearReviewDecorations();
       disconnectLiveCollaboration({ restoreOriginal: false, silent: true });
       applyShareSnapshotAccessMode('edit');
       resetShareSnapshotLink();
@@ -3136,6 +4016,8 @@ document.addEventListener("DOMContentLoaded", async function () {
       refreshLiveEditorUi();
       renderMarkdown();
       renderTabBar(tabs, activeTabId);
+      closeReviewComposer();
+      renderReviewPanel();
     }
 
     function doCancel() {
@@ -3465,6 +4347,9 @@ document.addEventListener("DOMContentLoaded", async function () {
     const patchResult = patchPreviewDom(markdownPreview, sanitizedHtml, {
       reusePreviewBlocks: context.previewEngineMode === 'segmented' && !context.force,
     });
+    invalidateReviewTargetSourceSnapshots(
+      patchResult && patchResult.fullReplace ? [markdownPreview] : ((patchResult && patchResult.updatedNodes) || [])
+    );
     applyReferencePreviewLinks(markdownPreview, referenceData.definitions);
     enhanceGitHubAlerts(markdownPreview);
 
@@ -4817,6 +5702,7 @@ ${selector} .arrowheadPath {
     const hasMath = /\$\$|\$[^$]|\\\(|\\\[/.test(rawVal || '') || /```math\b/.test(rawVal || '');
     if (hasMath) {
       const mathTargets = getMathJaxTypesetTargets(roots);
+      snapshotMathReviewTargetSources(mathTargets);
       if (mathTargets.length > 0) {
         ensureMathJaxReady().then(function() {
           if (context.renderId !== previewRenderGeneration) return;
@@ -4827,6 +5713,7 @@ ${selector} .arrowheadPath {
       }
     }
 
+    decorateReviewTargets();
     updateDocumentStats();
     updateFindHighlights();
     cleanupImageObjectUrls();
@@ -5685,6 +6572,10 @@ ${selector} .arrowheadPath {
       mode = 'preview';
       announceToScreenReader(getEditorReadOnlyMessage());
     }
+    if (reviewModeActive && mode !== 'preview') {
+      mode = 'preview';
+      announceToScreenReader('Review mode uses the read-only preview.');
+    }
     if (mode === currentViewMode) return;
 
     const previousMode = currentViewMode;
@@ -10444,6 +11335,7 @@ ${selector} .arrowheadPath {
   }
   
   initTabs();
+  initReviewMode();
   if (loadGlobalState().syncScrollingEnabled === false) toggleSyncScrolling();
   updateMobileStats();
   updateFindHighlights();
@@ -13338,7 +14230,7 @@ ${selector} .arrowheadPath {
   }
 
   function canMutateEditor() {
-    return !isLiveViewOnlyParticipant() && !isShareSnapshotViewOnlyActive();
+    return !reviewModeActive && !isLiveViewOnlyParticipant() && !isShareSnapshotViewOnlyActive();
   }
 
   function isLiveMutatingAction(action) {
@@ -13377,16 +14269,17 @@ ${selector} .arrowheadPath {
     const liveShareDocumentActive = isLiveShareDocumentActive();
     const liveShareGuestDocumentActive = liveShareDocumentActive && !isLiveShareHostDocumentActive();
     const viewOnly = isLiveViewOnlyParticipant() || snapshotViewOnly;
+    const sourceReadOnly = viewOnly || reviewModeActive;
     if (markdownEditor) {
-      markdownEditor.readOnly = viewOnly;
-      markdownEditor.setAttribute('aria-readonly', viewOnly ? 'true' : 'false');
-      markdownEditor.classList.toggle('live-share-readonly-editor', viewOnly);
-      markdownEditor.title = viewOnly ? getEditorReadOnlyMessage() : '';
+      markdownEditor.readOnly = sourceReadOnly;
+      markdownEditor.setAttribute('aria-readonly', sourceReadOnly ? 'true' : 'false');
+      markdownEditor.classList.toggle('live-share-readonly-editor', sourceReadOnly);
+      markdownEditor.title = sourceReadOnly ? getEditorReadOnlyMessage() : '';
     }
 
     viewModeButtons.forEach(function(button) {
       const mode = button.getAttribute('data-view-mode');
-      const shouldDisable = snapshotViewOnly && mode !== 'preview';
+      const shouldDisable = (snapshotViewOnly || reviewModeActive) && mode !== 'preview';
       if (shouldDisable) {
         button.dataset.shareSnapshotDisabled = 'true';
         button.disabled = true;
@@ -13400,7 +14293,7 @@ ${selector} .arrowheadPath {
 
     mobileViewModeButtons.forEach(function(button) {
       const mode = button.getAttribute('data-mode');
-      const shouldDisable = snapshotViewOnly && mode !== 'preview';
+      const shouldDisable = (snapshotViewOnly || reviewModeActive) && mode !== 'preview';
       if (shouldDisable) {
         button.dataset.shareSnapshotDisabled = 'true';
         button.disabled = true;
@@ -13491,10 +14384,10 @@ ${selector} .arrowheadPath {
     });
 
     if (markdownFormatToolbar) {
-      markdownFormatToolbar.classList.toggle('is-live-view-only', viewOnly);
+      markdownFormatToolbar.classList.toggle('is-live-view-only', sourceReadOnly);
       markdownFormatToolbar.querySelectorAll('[data-md-action]').forEach(function(button) {
         const action = button.getAttribute('data-md-action');
-        const shouldDisable = viewOnly && isLiveMutatingAction(action);
+        const shouldDisable = sourceReadOnly && isLiveMutatingAction(action);
         if (shouldDisable) {
           button.dataset.liveViewOnlyDisabled = 'true';
           button.disabled = true;
@@ -13507,7 +14400,7 @@ ${selector} .arrowheadPath {
           button.setAttribute('aria-disabled', 'false');
         }
       });
-      if (!viewOnly) {
+      if (!sourceReadOnly) {
         updateUndoRedoButtons();
       }
     }
diff --git a/styles.css b/styles.css
index 488e43c9..9846a973 100644
--- a/styles.css
+++ b/styles.css
@@ -23,6 +23,12 @@
   /* Code block background for light mode */
   --skeleton-bg: #e2e8f0;
   --skeleton-glow: rgba(255, 255, 255, 0.65);
+  --review-accent: #8250df;
+  --review-accent-strong: #6639ba;
+  --review-accent-soft: #f3effb;
+  --review-suggestion: #9a6700;
+  --review-suggestion-soft: #fff8c5;
+  --review-panel-shadow: -12px 0 32px rgba(31, 35, 40, 0.16);
 
   /* Find & Replace Panel custom properties (PERF-010 consolidated) */
   --fr-bg: rgba(255, 255, 255, 0.95);
@@ -63,6 +69,12 @@
   /* Code block background for dark mode */
   --skeleton-bg: #2d3139;
   --skeleton-glow: rgba(255, 255, 255, 0.08);
+  --review-accent: #a371f7;
+  --review-accent-strong: #bc8cff;
+  --review-accent-soft: rgba(163, 113, 247, 0.15);
+  --review-suggestion: #d29922;
+  --review-suggestion-soft: rgba(187, 128, 9, 0.16);
+  --review-panel-shadow: -12px 0 32px rgba(0, 0, 0, 0.45);
 
   /* Find & Replace Panel custom properties for dark mode */
   --fr-bg: rgba(28, 33, 40, 0.98);
@@ -5984,6 +5996,588 @@ html[data-theme="dark"] .mermaid svg {
   isolation: isolate;
 }
 
+/* ========================================
+   COMMENTS & SUGGESTIONS
+   ======================================== */
+.review-toggle {
+  position: relative;
+}
+
+.review-toggle.is-active {
+  color: var(--review-accent-strong);
+  background: var(--review-accent-soft);
+  border-color: var(--review-accent);
+}
+
+.review-count-badge {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  background: var(--review-accent);
+  font-size: 0.68rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.review-count-badge[hidden],
+.review-panel[hidden],
+.review-panel-backdrop[hidden],
+.review-composer[hidden] {
+  display: none !important;
+}
+
+#mobile-review-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.review-panel {
+  position: absolute;
+  z-index: 85;
+  inset-block: 0;
+  inset-inline-end: 0;
+  width: min(380px, calc(100% - 48px));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--text-color);
+  background: var(--bg-color);
+  border-inline-start: 1px solid var(--border-color);
+  box-shadow: var(--review-panel-shadow);
+}
+
+.review-panel-backdrop {
+  position: absolute;
+  z-index: 84;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: rgba(31, 35, 40, 0.38);
+  cursor: default;
+}
+
+.review-panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 18px 18px 14px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.review-panel-eyebrow {
+  margin: 0 0 3px;
+  color: var(--review-accent-strong);
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.review-panel-header h2,
+.review-composer-heading h3,
+.review-empty-state h3 {
+  margin: 0;
+  color: var(--text-color);
+  font-weight: 650;
+}
+
+.review-panel-header h2 {
+  font-size: 1rem;
+}
+
+.review-panel-summary {
+  margin: 4px 0 0;
+  color: var(--text-secondary);
+  font-size: 0.78rem;
+}
+
+.review-icon-btn {
+  width: 32px;
+  height: 32px;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.review-icon-btn:hover:not(:disabled) {
+  color: var(--text-color);
+  background: var(--button-hover);
+  border-color: var(--border-color);
+}
+
+.review-icon-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.review-panel-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.review-filter-group,
+.review-kind-group {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px;
+  background: var(--button-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+}
+
+.review-filter-btn,
+.review-kind-btn {
+  color: var(--text-secondary);
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.review-filter-btn {
+  padding: 5px 10px;
+  font-size: 0.74rem;
+}
+
+.review-filter-btn.is-active,
+.review-kind-btn.is-active {
+  color: var(--review-accent-strong);
+  background: var(--bg-color);
+  box-shadow: 0 1px 3px rgba(31, 35, 40, 0.12);
+}
+
+.review-composer {
+  margin: 14px 14px 4px;
+  padding: 14px;
+  background: var(--review-accent-soft);
+  border: 1px solid color-mix(in srgb, var(--review-accent) 45%, var(--border-color));
+  border-radius: 10px;
+}
+
+.review-composer-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.review-composer-heading h3 {
+  font-size: 0.9rem;
+}
+
+.review-anchor-preview {
+  display: -webkit-box;
+  margin: 10px 0 12px;
+  overflow: hidden;
+  color: var(--text-secondary);
+  font-size: 0.78rem;
+  line-height: 1.45;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.review-kind-group {
+  width: 100%;
+  margin-bottom: 12px;
+}
+
+.review-kind-btn {
+  flex: 1;
+  padding: 7px 8px;
+  font-size: 0.76rem;
+}
+
+.review-kind-btn[data-review-kind="suggestion"].is-active {
+  color: var(--review-suggestion);
+  background: var(--review-suggestion-soft);
+}
+
+.review-feedback-label {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--text-color);
+  font-size: 0.76rem;
+  font-weight: 650;
+}
+
+.review-feedback-input {
+  width: 100%;
+  min-height: 92px;
+  padding: 9px 10px;
+  resize: vertical;
+  color: var(--text-color);
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  border-radius: 7px;
+  font: inherit;
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
+.review-feedback-input:focus {
+  border-color: var(--review-accent);
+  outline: 2px solid color-mix(in srgb, var(--review-accent) 24%, transparent);
+  outline-offset: 0;
+}
+
+.review-composer-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 9px;
+}
+
+.review-feedback-count {
+  color: var(--text-secondary);
+  font-size: 0.7rem;
+}
+
+.review-primary-btn {
+  min-height: 32px;
+  padding: 6px 12px;
+  color: #ffffff;
+  background: var(--review-accent);
+  border: 1px solid var(--review-accent-strong);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.76rem;
+  font-weight: 650;
+}
+
+.review-primary-btn:hover:not(:disabled) {
+  background: var(--review-accent-strong);
+}
+
+.review-primary-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.review-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px 14px 18px;
+}
+
+.review-thread {
+  margin-bottom: 10px;
+  padding: 12px;
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  border-inline-start: 3px solid var(--review-accent);
+  border-radius: 8px;
+}
+
+.review-thread[data-kind="suggestion"] {
+  border-inline-start-color: var(--review-suggestion);
+}
+
+.review-thread.is-resolved {
+  opacity: 0.72;
+}
+
+.review-thread.is-orphaned {
+  border-style: dashed;
+}
+
+.review-thread-header,
+.review-thread-meta,
+.review-thread-actions {
+  display: flex;
+  align-items: center;
+}
+
+.review-thread-header {
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.review-thread-meta {
+  min-width: 0;
+  gap: 6px;
+}
+
+.review-kind-label,
+.review-status-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 999px;
+  font-size: 0.67rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.review-kind-label {
+  padding: 5px 7px;
+  color: var(--review-accent-strong);
+  background: var(--review-accent-soft);
+}
+
+.review-thread[data-kind="suggestion"] .review-kind-label {
+  color: var(--review-suggestion);
+  background: var(--review-suggestion-soft);
+}
+
+.review-status-label {
+  color: var(--text-secondary);
+}
+
+.review-thread-anchor {
+  width: 100%;
+  margin: 9px 0 8px;
+  padding: 0;
+  overflow: hidden;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font-size: 0.72rem;
+  line-height: 1.35;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.review-thread-anchor:hover:not(:disabled) {
+  color: var(--review-accent-strong);
+  text-decoration: underline;
+}
+
+.review-thread-anchor:disabled {
+  cursor: default;
+  white-space: normal;
+}
+
+.review-thread-body {
+  margin: 0;
+  color: var(--text-color);
+  font-size: 0.82rem;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.review-thread-time {
+  display: block;
+  margin-top: 9px;
+  color: var(--text-secondary);
+  font-size: 0.67rem;
+}
+
+.review-thread-actions {
+  justify-content: flex-end;
+  gap: 4px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border-color);
+}
+
+.review-thread-action {
+  padding: 5px 7px;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
+.review-thread-action:hover {
+  color: var(--text-color);
+  background: var(--button-hover);
+}
+
+.review-thread-action.is-danger:hover {
+  color: var(--color-danger-fg);
+}
+
+.review-empty-state {
+  margin: auto;
+  padding: 30px 26px;
+  color: var(--text-secondary);
+  text-align: center;
+}
+
+.review-empty-state i {
+  display: block;
+  margin-bottom: 10px;
+  color: var(--review-accent);
+  font-size: 1.7rem;
+}
+
+.review-empty-state h3 {
+  font-size: 0.9rem;
+}
+
+.review-empty-state p {
+  margin: 7px auto 0;
+  max-width: 270px;
+  font-size: 0.76rem;
+  line-height: 1.45;
+}
+
+#markdown-preview .review-target {
+  border-radius: 5px;
+}
+
+#markdown-preview .review-target:not(.review-target--diagram) {
+  padding-inline-end: 44px;
+}
+
+#markdown-preview .review-target--diagram {
+  padding-block-end: 44px;
+}
+
+#markdown-preview .review-target.is-review-target-active {
+  outline: 2px solid var(--review-accent);
+  outline-offset: 4px;
+}
+
+#markdown-preview .review-target.has-review-thread {
+  box-shadow: inset 3px 0 0 var(--review-accent);
+}
+
+[dir="rtl"] #markdown-preview .review-target.has-review-thread {
+  box-shadow: inset -3px 0 0 var(--review-accent);
+}
+
+.review-pins-layer {
+  position: absolute;
+  z-index: 20;
+  inset: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.review-pins-layer[hidden] {
+  display: none !important;
+}
+
+.review-target-button {
+  position: absolute;
+  z-index: 8;
+  min-width: 30px;
+  height: 30px;
+  padding: 0 7px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  color: #ffffff;
+  background: var(--review-accent);
+  border: 1px solid var(--review-accent-strong);
+  border-radius: 999px;
+  box-shadow: 0 2px 8px rgba(31, 35, 40, 0.22);
+  cursor: pointer;
+  font-size: 0.68rem;
+  font-weight: 700;
+  opacity: 1;
+  pointer-events: auto;
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+
+.review-target-button[data-review-count]::after {
+  content: attr(data-review-count);
+}
+
+.review-target-button:hover {
+  background: var(--review-accent-strong);
+}
+
+.review-filter-btn:focus-visible,
+.review-kind-btn:focus-visible,
+.review-icon-btn:focus-visible,
+.review-primary-btn:focus-visible,
+.review-thread-action:focus-visible,
+.review-thread-anchor:focus-visible,
+.review-target-button:focus-visible {
+  outline: 2px solid var(--review-accent);
+  outline-offset: 2px;
+}
+
+@media (min-width: 1080px) {
+  .review-panel {
+    position: relative;
+    inset: auto;
+    width: 380px;
+    height: auto;
+    flex: 0 0 380px;
+    box-shadow: none;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1079px) {
+  .review-panel {
+    width: min(390px, 100%);
+  }
+
+  .content-container.is-reviewing .preview-pane {
+    padding-inline-end: 410px;
+  }
+}
+
+@media (max-width: 767px) {
+  .review-panel {
+    inset-block-start: auto;
+    inset-block-end: 0;
+    width: 100%;
+    height: min(56%, 560px);
+    border-inline-start: 0;
+    border-top: 1px solid var(--border-color);
+    box-shadow: 0 -12px 32px rgba(31, 35, 40, 0.2);
+  }
+
+  .content-container.is-reviewing .preview-pane {
+    padding-bottom: calc(56vh + 20px);
+  }
+
+  .review-panel-header {
+    padding-top: 14px;
+  }
+
+  .review-target-button {
+    min-width: 44px;
+    height: 44px;
+  }
+
+  #markdown-preview .review-target:not(.review-target--diagram) {
+    padding-inline-end: 56px;
+  }
+
+  #markdown-preview .review-target--diagram {
+    padding-block-end: 56px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .review-target-button {
+    transition: none;
+  }
+}
+
 
 
 
@@ -6011,10 +6605,28 @@ html[data-theme="dark"] .mermaid svg {
   .plantuml-toolbar,
   .d2-toolbar,
   .graphviz-toolbar,
-  .stl-toolbar {
+  .stl-toolbar,
+  .review-panel,
+  .review-panel-backdrop,
+  .review-pins-layer,
+  .review-target-button {
     display: none !important;
   }
 
+  #markdown-preview .review-target,
+  #markdown-preview .review-target.has-review-thread,
+  [dir="rtl"] #markdown-preview .review-target.has-review-thread {
+    outline: none !important;
+    box-shadow: none !important;
+    padding-inline-end: 0 !important;
+    padding-block-end: 0 !important;
+  }
+
+  .content-container.is-reviewing .preview-pane {
+    padding-inline-end: 20px !important;
+    padding-bottom: 20px !important;
+  }
+
   .preview-pane {
     width: 100% !important;
     max-width: 100% !important;
diff --git a/wiki/Features.md b/wiki/Features.md
index 5b445bb9..954e9d14 100644
--- a/wiki/Features.md
+++ b/wiki/Features.md
@@ -29,7 +29,7 @@ Users can work with multiple documents at once.
 - New tabs can be created from the tab bar, mobile menu, imports, shared snapshots, and Live Share joins.
 - Tabs can be renamed, duplicated, deleted, and reordered by drag and drop.
 - The app enforces a practical tab limit of 20 tabs. Shared snapshots refuse to open when this limit has been reached.
-- Each normal tab stores a title, content, scroll position, view mode, and creation time.
+- Each normal tab stores a title, content, scroll position, view mode, local review threads, and creation time.
 - The active tab id and untitled-document counter are stored separately.
 - Temporary Share Snapshot and Live Share tabs are deliberately excluded from persistent tab storage.
 - The Reset button clears the current saved workspace and returns the app to a clean starting state.
@@ -38,7 +38,7 @@ Storage keys used by the current implementation include:
 
 | Key | What It Stores |
 | :--- | :--- |
-| `markdownViewerTabs` | Normal saved document tabs. Temporary shared/live tabs are stripped before saving. |
+| `markdownViewerTabs` | Normal saved document tabs, including local comments and suggestions. Temporary shared/live tabs are stripped before saving. |
 | `markdownViewerActiveTab` | The active tab id. |
 | `markdownViewerUntitledCounter` | Counter used for new Untitled tab names. |
 | `markdownViewerGlobalState` | Theme, direction, view preferences, scroll sync, and similar global UI state. |
@@ -52,6 +52,32 @@ The About dialog includes two storage controls:
 - **Private mode** removes saved document/workspace state and prevents normal document-state keys from being written while it is enabled. The private-mode preference itself remains so the behavior survives a reload.
 - **Clear local data** removes saved document tabs, active-tab state, the untitled-tab counter, global workspace preferences, and their desktop storage mirrors. It does not revoke links that were already shared.
 
+## Comments and Suggestion Mode
+
+Review mode provides a local feedback layer over the rendered document without inserting or changing Markdown.
+
+- The Review button opens a dedicated read-only preview workspace and restores the previous Editor, Split, or Preview layout when closed.
+- Review pins are attached to rendered headings, paragraphs, fenced code blocks, and supported diagram containers, including Mermaid and the other diagram engines.
+- A reviewer can add either a comment or a suggestion. Both are feedback records; suggestions do not apply source changes automatically.
+- Threads can be resolved, reopened, deleted, filtered by status, and copied together as a Markdown review summary.
+- Open-thread counts appear in the desktop header and mobile menu.
+- Review controls support keyboard focus, screen-reader labels, dark mode, RTL layout, desktop side-by-side review, and a mobile partial-height panel.
+
+Anchoring and lifecycle:
+
+- Each thread stores a deterministic block signature, duplicate occurrence and count, neighboring block context for repeated blocks, block type, label, and source excerpt rather than relying on transient rendered element ids.
+- The app reapplies review anchors after both main-thread and worker preview renders.
+- If a reviewed block changes enough that its signature no longer matches, the thread stays visible as unanchored feedback instead of attaching to the wrong block.
+- Review threads are stored per normal tab inside `markdownViewerTabs`. Duplicating a document starts the copy with no review threads.
+- Private mode and Clear local data cover review threads because they use the same document storage as the Markdown tab.
+- Review pins, outlines, the review panel, and thread content are excluded from Markdown, HTML, PDF, PNG, and browser-print output.
+
+Sharing limits:
+
+- Review threads are local-only and are not encoded into Share Snapshot URLs, stored snapshot payloads, or Live Share Yjs updates.
+- Review feedback added to a temporary Share Snapshot or Live Share tab is kept only for that tab's current session.
+- Use Copy review summary to transfer feedback outside the local workspace.
+
 ## Editing and Formatting Tools
 
 The formatting toolbar inserts or transforms Markdown at the current selection. It provides WYSIWYG-style helpers for plain Markdown with live preview, not full in-place rich-text editing.
@@ -478,6 +504,7 @@ Security limitations:
 | :--- | :--- | :--- | :--- |
 | Typing and local preview | No | Browser memory and saved tabs | Sanitized before preview insertion. |
 | Normal tab autosave | No | `localStorage` or desktop storage mirror | Cleared with site/app data or Reset. |
+| Comments and suggestions | No | Inside normal saved tabs | Local-only review data; excluded from document exports and not synced by Share Snapshot or Live Share. |
 | Private mode | No | No document-state persistence | Clears existing document state when enabled and prevents normal document-state writes until disabled. |
 | Local file import | No | Current tab/workspace | Reads selected files only. |
 | Markdown/HTML/PDF/PNG export | No, except remote assets already referenced | User download location | Browser may request external images/fonts used by content. |
diff --git a/wiki/Usage-Guide.md b/wiki/Usage-Guide.md
index 1ab9a3ee..9838fbf9 100644
--- a/wiki/Usage-Guide.md
+++ b/wiki/Usage-Guide.md
@@ -43,6 +43,20 @@ The toolbar can:
 
 The editor also supports list continuation on Enter, two-space indent on Tab, outdent on Shift+Tab, and custom undo/redo. View-only shared tabs block editing actions and keep reading, find, help, and fullscreen available.
 
+## Comments and Suggestions
+
+Use Review when you want to leave structured feedback without editing the Markdown source.
+
+1. Click **Review** in the desktop header or mobile menu. The app switches to a read-only preview workspace and remembers your previous view layout.
+2. Select the comment pin on a rendered heading, paragraph, code block, or diagram.
+3. Choose **Comment** for general feedback or **Suggestion** for a proposed change.
+4. Enter the feedback and add it to the document review.
+5. Use **Resolve** or **Reopen** to manage a thread. Use the clipboard button in the review panel to copy a Markdown summary of all feedback.
+
+Review threads are stored with the normal local document tab and survive reloads. They are not inserted into Markdown and are excluded from Markdown, HTML, PDF, PNG, and print output. If the reviewed source block changes, its thread remains in the panel as an unanchored item instead of moving to a different block. Duplicating a tab starts the copy without review threads.
+
+Review data is local-only. Share Snapshot links and Live Share rooms currently transfer Markdown, not review threads. Feedback created on a temporary shared or live tab lasts only for that tab's current session. Copy the review summary when you need to send feedback to an author. Private mode prevents review threads from being persisted along with the rest of the document workspace.
+
 ## Find and Replace
 
 Open Find and Replace with the toolbar, `Ctrl+F`, or `Cmd+F`. Open replacement focus with `Ctrl+H` or `Cmd+H`.

From 65a77c709e27af1ff067e42a887fe02d1fadba93 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Mon, 13 Jul 2026 01:22:38 +0530
Subject: [PATCH 02/18] style(review): align controls with app accent

---
 desktop-app/resources/index.html |  2 +-
 desktop-app/resources/styles.css | 66 ++++++++++++--------------------
 index.html                       |  2 +-
 styles.css                       | 66 ++++++++++++--------------------
 4 files changed, 52 insertions(+), 84 deletions(-)

diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index 7e4e6d8c..9e2ad73d 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -110,7 +110,7 @@ <h1 class="h4 mb-0 me-2">Markdown Viewer<span class="visually-hidden"> - Online
                     </button>
                     <div id="live-share-toolbar-participants" class="live-share-toolbar-participants" aria-label="Live Share participants" hidden></div>
 
-                    <button id="review-toggle" class="tool-button review-toggle" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
+                    <button id="review-toggle" class="tool-button" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
                         <i class="bi bi-chat-square-text"></i> <span class="btn-text">Review</span>
                         <span id="review-count-badge" class="review-count-badge" aria-label="0 open review items" hidden>0</span>
                     </button>
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 9846a973..6e5f8ae1 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -23,9 +23,6 @@
   /* Code block background for light mode */
   --skeleton-bg: #e2e8f0;
   --skeleton-glow: rgba(255, 255, 255, 0.65);
-  --review-accent: #8250df;
-  --review-accent-strong: #6639ba;
-  --review-accent-soft: #f3effb;
   --review-suggestion: #9a6700;
   --review-suggestion-soft: #fff8c5;
   --review-panel-shadow: -12px 0 32px rgba(31, 35, 40, 0.16);
@@ -69,9 +66,6 @@
   /* Code block background for dark mode */
   --skeleton-bg: #2d3139;
   --skeleton-glow: rgba(255, 255, 255, 0.08);
-  --review-accent: #a371f7;
-  --review-accent-strong: #bc8cff;
-  --review-accent-soft: rgba(163, 113, 247, 0.15);
   --review-suggestion: #d29922;
   --review-suggestion-soft: rgba(187, 128, 9, 0.16);
   --review-panel-shadow: -12px 0 32px rgba(0, 0, 0, 0.45);
@@ -5999,16 +5993,6 @@ html[data-theme="dark"] .mermaid svg {
 /* ========================================
    COMMENTS & SUGGESTIONS
    ======================================== */
-.review-toggle {
-  position: relative;
-}
-
-.review-toggle.is-active {
-  color: var(--review-accent-strong);
-  background: var(--review-accent-soft);
-  border-color: var(--review-accent);
-}
-
 .review-count-badge {
   min-width: 18px;
   height: 18px;
@@ -6017,8 +6001,8 @@ html[data-theme="dark"] .mermaid svg {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #ffffff;
-  background: var(--review-accent);
+  color: var(--bg-color);
+  background: var(--accent-color);
   font-size: 0.68rem;
   font-weight: 700;
   line-height: 1;
@@ -6075,7 +6059,7 @@ html[data-theme="dark"] .mermaid svg {
 
 .review-panel-eyebrow {
   margin: 0 0 3px;
-  color: var(--review-accent-strong);
+  color: var(--accent-color);
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -6161,7 +6145,7 @@ html[data-theme="dark"] .mermaid svg {
 
 .review-filter-btn.is-active,
 .review-kind-btn.is-active {
-  color: var(--review-accent-strong);
+  color: var(--accent-color);
   background: var(--bg-color);
   box-shadow: 0 1px 3px rgba(31, 35, 40, 0.12);
 }
@@ -6169,8 +6153,8 @@ html[data-theme="dark"] .mermaid svg {
 .review-composer {
   margin: 14px 14px 4px;
   padding: 14px;
-  background: var(--review-accent-soft);
-  border: 1px solid color-mix(in srgb, var(--review-accent) 45%, var(--border-color));
+  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
   border-radius: 10px;
 }
 
@@ -6235,8 +6219,8 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .review-feedback-input:focus {
-  border-color: var(--review-accent);
-  outline: 2px solid color-mix(in srgb, var(--review-accent) 24%, transparent);
+  border-color: var(--accent-color);
+  outline: 2px solid color-mix(in srgb, var(--accent-color) 24%, transparent);
   outline-offset: 0;
 }
 
@@ -6256,9 +6240,9 @@ html[data-theme="dark"] .mermaid svg {
 .review-primary-btn {
   min-height: 32px;
   padding: 6px 12px;
-  color: #ffffff;
-  background: var(--review-accent);
-  border: 1px solid var(--review-accent-strong);
+  color: var(--bg-color);
+  background: var(--accent-color);
+  border: 1px solid var(--accent-color);
   border-radius: 6px;
   cursor: pointer;
   font-size: 0.76rem;
@@ -6266,7 +6250,7 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .review-primary-btn:hover:not(:disabled) {
-  background: var(--review-accent-strong);
+  background: color-mix(in srgb, var(--accent-color) 84%, #000000);
 }
 
 .review-primary-btn:disabled {
@@ -6285,7 +6269,7 @@ html[data-theme="dark"] .mermaid svg {
   padding: 12px;
   background: var(--bg-color);
   border: 1px solid var(--border-color);
-  border-inline-start: 3px solid var(--review-accent);
+  border-inline-start: 3px solid var(--accent-color);
   border-radius: 8px;
 }
 
@@ -6331,8 +6315,8 @@ html[data-theme="dark"] .mermaid svg {
 
 .review-kind-label {
   padding: 5px 7px;
-  color: var(--review-accent-strong);
-  background: var(--review-accent-soft);
+  color: var(--accent-color);
+  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
 }
 
 .review-thread[data-kind="suggestion"] .review-kind-label {
@@ -6361,7 +6345,7 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .review-thread-anchor:hover:not(:disabled) {
-  color: var(--review-accent-strong);
+  color: var(--accent-color);
   text-decoration: underline;
 }
 
@@ -6424,7 +6408,7 @@ html[data-theme="dark"] .mermaid svg {
 .review-empty-state i {
   display: block;
   margin-bottom: 10px;
-  color: var(--review-accent);
+  color: var(--accent-color);
   font-size: 1.7rem;
 }
 
@@ -6452,16 +6436,16 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 #markdown-preview .review-target.is-review-target-active {
-  outline: 2px solid var(--review-accent);
+  outline: 2px solid var(--accent-color);
   outline-offset: 4px;
 }
 
 #markdown-preview .review-target.has-review-thread {
-  box-shadow: inset 3px 0 0 var(--review-accent);
+  box-shadow: inset 3px 0 0 var(--accent-color);
 }
 
 [dir="rtl"] #markdown-preview .review-target.has-review-thread {
-  box-shadow: inset -3px 0 0 var(--review-accent);
+  box-shadow: inset -3px 0 0 var(--accent-color);
 }
 
 .review-pins-layer {
@@ -6486,9 +6470,9 @@ html[data-theme="dark"] .mermaid svg {
   align-items: center;
   justify-content: center;
   gap: 4px;
-  color: #ffffff;
-  background: var(--review-accent);
-  border: 1px solid var(--review-accent-strong);
+  color: var(--bg-color);
+  background: var(--accent-color);
+  border: 1px solid var(--accent-color);
   border-radius: 999px;
   box-shadow: 0 2px 8px rgba(31, 35, 40, 0.22);
   cursor: pointer;
@@ -6504,7 +6488,7 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .review-target-button:hover {
-  background: var(--review-accent-strong);
+  background: color-mix(in srgb, var(--accent-color) 84%, #000000);
 }
 
 .review-filter-btn:focus-visible,
@@ -6514,7 +6498,7 @@ html[data-theme="dark"] .mermaid svg {
 .review-thread-action:focus-visible,
 .review-thread-anchor:focus-visible,
 .review-target-button:focus-visible {
-  outline: 2px solid var(--review-accent);
+  outline: 2px solid var(--accent-color);
   outline-offset: 2px;
 }
 
diff --git a/index.html b/index.html
index a062a3fc..0011c1b9 100644
--- a/index.html
+++ b/index.html
@@ -203,7 +203,7 @@ <h1 class="h4 mb-0 me-2">Markdown Viewer<span class="visually-hidden"> - Online
                     </button>
                     <div id="live-share-toolbar-participants" class="live-share-toolbar-participants" aria-label="Live Share participants" hidden></div>
 
-                    <button id="review-toggle" class="tool-button review-toggle" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
+                    <button id="review-toggle" class="tool-button" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
                         <i class="bi bi-chat-square-text"></i> <span class="btn-text">Review</span>
                         <span id="review-count-badge" class="review-count-badge" aria-label="0 open review items" hidden>0</span>
                     </button>
diff --git a/styles.css b/styles.css
index 9846a973..6e5f8ae1 100644
--- a/styles.css
+++ b/styles.css
@@ -23,9 +23,6 @@
   /* Code block background for light mode */
   --skeleton-bg: #e2e8f0;
   --skeleton-glow: rgba(255, 255, 255, 0.65);
-  --review-accent: #8250df;
-  --review-accent-strong: #6639ba;
-  --review-accent-soft: #f3effb;
   --review-suggestion: #9a6700;
   --review-suggestion-soft: #fff8c5;
   --review-panel-shadow: -12px 0 32px rgba(31, 35, 40, 0.16);
@@ -69,9 +66,6 @@
   /* Code block background for dark mode */
   --skeleton-bg: #2d3139;
   --skeleton-glow: rgba(255, 255, 255, 0.08);
-  --review-accent: #a371f7;
-  --review-accent-strong: #bc8cff;
-  --review-accent-soft: rgba(163, 113, 247, 0.15);
   --review-suggestion: #d29922;
   --review-suggestion-soft: rgba(187, 128, 9, 0.16);
   --review-panel-shadow: -12px 0 32px rgba(0, 0, 0, 0.45);
@@ -5999,16 +5993,6 @@ html[data-theme="dark"] .mermaid svg {
 /* ========================================
    COMMENTS & SUGGESTIONS
    ======================================== */
-.review-toggle {
-  position: relative;
-}
-
-.review-toggle.is-active {
-  color: var(--review-accent-strong);
-  background: var(--review-accent-soft);
-  border-color: var(--review-accent);
-}
-
 .review-count-badge {
   min-width: 18px;
   height: 18px;
@@ -6017,8 +6001,8 @@ html[data-theme="dark"] .mermaid svg {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #ffffff;
-  background: var(--review-accent);
+  color: var(--bg-color);
+  background: var(--accent-color);
   font-size: 0.68rem;
   font-weight: 700;
   line-height: 1;
@@ -6075,7 +6059,7 @@ html[data-theme="dark"] .mermaid svg {
 
 .review-panel-eyebrow {
   margin: 0 0 3px;
-  color: var(--review-accent-strong);
+  color: var(--accent-color);
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -6161,7 +6145,7 @@ html[data-theme="dark"] .mermaid svg {
 
 .review-filter-btn.is-active,
 .review-kind-btn.is-active {
-  color: var(--review-accent-strong);
+  color: var(--accent-color);
   background: var(--bg-color);
   box-shadow: 0 1px 3px rgba(31, 35, 40, 0.12);
 }
@@ -6169,8 +6153,8 @@ html[data-theme="dark"] .mermaid svg {
 .review-composer {
   margin: 14px 14px 4px;
   padding: 14px;
-  background: var(--review-accent-soft);
-  border: 1px solid color-mix(in srgb, var(--review-accent) 45%, var(--border-color));
+  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
   border-radius: 10px;
 }
 
@@ -6235,8 +6219,8 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .review-feedback-input:focus {
-  border-color: var(--review-accent);
-  outline: 2px solid color-mix(in srgb, var(--review-accent) 24%, transparent);
+  border-color: var(--accent-color);
+  outline: 2px solid color-mix(in srgb, var(--accent-color) 24%, transparent);
   outline-offset: 0;
 }
 
@@ -6256,9 +6240,9 @@ html[data-theme="dark"] .mermaid svg {
 .review-primary-btn {
   min-height: 32px;
   padding: 6px 12px;
-  color: #ffffff;
-  background: var(--review-accent);
-  border: 1px solid var(--review-accent-strong);
+  color: var(--bg-color);
+  background: var(--accent-color);
+  border: 1px solid var(--accent-color);
   border-radius: 6px;
   cursor: pointer;
   font-size: 0.76rem;
@@ -6266,7 +6250,7 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .review-primary-btn:hover:not(:disabled) {
-  background: var(--review-accent-strong);
+  background: color-mix(in srgb, var(--accent-color) 84%, #000000);
 }
 
 .review-primary-btn:disabled {
@@ -6285,7 +6269,7 @@ html[data-theme="dark"] .mermaid svg {
   padding: 12px;
   background: var(--bg-color);
   border: 1px solid var(--border-color);
-  border-inline-start: 3px solid var(--review-accent);
+  border-inline-start: 3px solid var(--accent-color);
   border-radius: 8px;
 }
 
@@ -6331,8 +6315,8 @@ html[data-theme="dark"] .mermaid svg {
 
 .review-kind-label {
   padding: 5px 7px;
-  color: var(--review-accent-strong);
-  background: var(--review-accent-soft);
+  color: var(--accent-color);
+  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
 }
 
 .review-thread[data-kind="suggestion"] .review-kind-label {
@@ -6361,7 +6345,7 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .review-thread-anchor:hover:not(:disabled) {
-  color: var(--review-accent-strong);
+  color: var(--accent-color);
   text-decoration: underline;
 }
 
@@ -6424,7 +6408,7 @@ html[data-theme="dark"] .mermaid svg {
 .review-empty-state i {
   display: block;
   margin-bottom: 10px;
-  color: var(--review-accent);
+  color: var(--accent-color);
   font-size: 1.7rem;
 }
 
@@ -6452,16 +6436,16 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 #markdown-preview .review-target.is-review-target-active {
-  outline: 2px solid var(--review-accent);
+  outline: 2px solid var(--accent-color);
   outline-offset: 4px;
 }
 
 #markdown-preview .review-target.has-review-thread {
-  box-shadow: inset 3px 0 0 var(--review-accent);
+  box-shadow: inset 3px 0 0 var(--accent-color);
 }
 
 [dir="rtl"] #markdown-preview .review-target.has-review-thread {
-  box-shadow: inset -3px 0 0 var(--review-accent);
+  box-shadow: inset -3px 0 0 var(--accent-color);
 }
 
 .review-pins-layer {
@@ -6486,9 +6470,9 @@ html[data-theme="dark"] .mermaid svg {
   align-items: center;
   justify-content: center;
   gap: 4px;
-  color: #ffffff;
-  background: var(--review-accent);
-  border: 1px solid var(--review-accent-strong);
+  color: var(--bg-color);
+  background: var(--accent-color);
+  border: 1px solid var(--accent-color);
   border-radius: 999px;
   box-shadow: 0 2px 8px rgba(31, 35, 40, 0.22);
   cursor: pointer;
@@ -6504,7 +6488,7 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .review-target-button:hover {
-  background: var(--review-accent-strong);
+  background: color-mix(in srgb, var(--accent-color) 84%, #000000);
 }
 
 .review-filter-btn:focus-visible,
@@ -6514,7 +6498,7 @@ html[data-theme="dark"] .mermaid svg {
 .review-thread-action:focus-visible,
 .review-thread-anchor:focus-visible,
 .review-target-button:focus-visible {
-  outline: 2px solid var(--review-accent);
+  outline: 2px solid var(--accent-color);
   outline-offset: 2px;
 }
 

From a36bd928150614b902f020305149cc7484b324af Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Mon, 13 Jul 2026 02:12:29 +0530
Subject: [PATCH 03/18] feat(review): improve review management controls

---
 desktop-app/resources/index.html   |  35 ++++++-
 desktop-app/resources/js/script.js | 141 +++++++++++++++++++++++++++--
 desktop-app/resources/styles.css   |  44 ++++++++-
 index.html                         |  35 ++++++-
 script.js                          | 141 +++++++++++++++++++++++++++--
 styles.css                         |  44 ++++++++-
 wiki/Features.md                   |   2 +-
 wiki/Usage-Guide.md                |   2 +-
 8 files changed, 410 insertions(+), 34 deletions(-)

diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index 9e2ad73d..06b03b17 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -112,8 +112,8 @@ <h1 class="h4 mb-0 me-2">Markdown Viewer<span class="visually-hidden"> - Online
 
                     <button id="review-toggle" class="tool-button" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
                         <i class="bi bi-chat-square-text"></i> <span class="btn-text">Review</span>
-                        <span id="review-count-badge" class="review-count-badge" aria-label="0 open review items" hidden>0</span>
                     </button>
+                    <button id="review-count-badge" class="live-share-avatar live-share-avatar-overflow review-count-badge" type="button" aria-label="0 open review items" title="Open review feedback" hidden>0</button>
                     
                     <div class="dropdown me-1">
                         <button class="tool-button dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Switch Language">
@@ -244,7 +244,7 @@ <h2 class="h5 m-0">Menu</h2>
 
                             <button id="mobile-review-toggle" class="mobile-menu-item" type="button" title="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
                                 <span><i class="bi bi-chat-square-text me-2"></i>Review</span>
-                                <span id="mobile-review-count-badge" class="review-count-badge" aria-label="0 open review items" hidden>0</span>
+                                <span id="mobile-review-count-badge" class="review-count-badge" aria-hidden="true" hidden>0</span>
                             </button>
                             
                             <div class="mobile-menu-item dropdown w-100 p-0 border-0">
@@ -358,6 +358,23 @@ <h2 class="h5 m-0">Menu</h2>
           </div>
         </div>
 
+        <!-- Review Delete Confirmation Modal -->
+        <div id="review-delete-modal" class="reset-modal-overlay modal-overlay" role="dialog" aria-modal="true" aria-labelledby="review-delete-title" aria-describedby="review-delete-description" aria-hidden="true" style="display:none;">
+          <div class="reset-modal-box modal-box">
+            <div class="modal-header">
+              <p id="review-delete-title" class="reset-modal-message">Delete review item?</p>
+              <button type="button" class="modal-close-btn" id="review-delete-close" aria-label="Close review deletion dialog">
+                <i class="bi bi-x-lg" aria-hidden="true"></i>
+              </button>
+            </div>
+            <p id="review-delete-description" class="modal-subtext">This comment or suggestion will be permanently deleted.</p>
+            <div class="reset-modal-actions">
+              <button type="button" class="reset-modal-btn reset-modal-cancel" id="review-delete-cancel">Cancel</button>
+              <button type="button" class="reset-modal-btn reset-modal-confirm" id="review-delete-confirm">Delete</button>
+            </div>
+          </div>
+        </div>
+
         <!-- Clear Markdown Formatting Modal -->
         <div id="clear-formatting-modal" class="reset-modal-overlay modal-overlay" role="dialog" aria-modal="true" aria-labelledby="clear-formatting-title" aria-hidden="true" style="display:none;">
           <div class="reset-modal-box reset-modal-box--wide modal-box">
@@ -1101,9 +1118,17 @@ <h2 id="review-panel-title">Comments &amp; suggestions</h2>
                         <button class="review-filter-btn" type="button" data-review-filter="resolved" aria-pressed="false">Resolved</button>
                         <button class="review-filter-btn" type="button" data-review-filter="all" aria-pressed="false">All</button>
                     </div>
-                    <button id="review-copy-summary" class="review-icon-btn" type="button" aria-label="Copy review summary" title="Copy review summary" disabled>
-                        <i class="bi bi-clipboard" aria-hidden="true"></i>
-                    </button>
+                    <div class="review-panel-actions" role="group" aria-label="Review actions">
+                        <button id="review-copy-summary" class="review-icon-btn" type="button" aria-label="Copy review summary" title="Copy review summary" disabled>
+                            <i class="bi bi-clipboard" aria-hidden="true"></i>
+                        </button>
+                        <button id="review-resolve-all" class="review-icon-btn" type="button" aria-label="Resolve all open review items" title="Resolve all open review items" disabled>
+                            <i class="bi bi-check2-all" aria-hidden="true"></i>
+                        </button>
+                        <button id="review-delete-all" class="review-icon-btn is-danger" type="button" aria-label="Delete all review items" title="Delete all review items" disabled>
+                            <i class="bi bi-trash3" aria-hidden="true"></i>
+                        </button>
+                    </div>
                 </div>
 
                 <section id="review-composer" class="review-composer" aria-labelledby="review-composer-title" hidden>
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index d66c996c..4750e33d 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -270,6 +270,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   let reviewFilter = 'open';
   let reviewComposerKind = 'comment';
   let activeReviewAnchor = null;
+  let pendingReviewDelete = null;
   let reviewPinsResizeObserver = null;
   let reviewPinsLayoutFrame = null;
   let reviewTargetSourceSnapshots = new WeakMap();
@@ -338,6 +339,14 @@ document.addEventListener("DOMContentLoaded", async function () {
   const reviewPanelClose = document.getElementById('review-panel-close');
   const reviewPanelSummary = document.getElementById('review-panel-summary');
   const reviewCopySummary = document.getElementById('review-copy-summary');
+  const reviewResolveAll = document.getElementById('review-resolve-all');
+  const reviewDeleteAll = document.getElementById('review-delete-all');
+  const reviewDeleteModal = document.getElementById('review-delete-modal');
+  const reviewDeleteTitle = document.getElementById('review-delete-title');
+  const reviewDeleteDescription = document.getElementById('review-delete-description');
+  const reviewDeleteClose = document.getElementById('review-delete-close');
+  const reviewDeleteCancel = document.getElementById('review-delete-cancel');
+  const reviewDeleteConfirm = document.getElementById('review-delete-confirm');
   const reviewComposer = document.getElementById('review-composer');
   const reviewComposerAnchor = document.getElementById('review-composer-anchor');
   const reviewComposerCancel = document.getElementById('review-composer-cancel');
@@ -2790,8 +2799,17 @@ document.addEventListener("DOMContentLoaded", async function () {
       if (!badge) return;
       badge.textContent = String(openCount);
       badge.hidden = openCount === 0;
-      badge.setAttribute('aria-label', openCount + ' open review item' + (openCount === 1 ? '' : 's'));
+      const countLabel = openCount + ' open review item' + (openCount === 1 ? '' : 's');
+      if (badge === reviewCountBadge) {
+        badge.setAttribute('aria-label', countLabel + '; open review panel');
+      }
+      badge.title = countLabel;
     });
+    if (mobileReviewToggle) {
+      mobileReviewToggle.setAttribute('aria-label', openCount > 0
+        ? 'Open comments and suggestions. ' + openCount + ' open review item' + (openCount === 1 ? '' : 's') + '.'
+        : 'Open comments and suggestions');
+    }
   }
 
   function formatReviewTime(timestamp) {
@@ -2887,6 +2905,8 @@ document.addEventListener("DOMContentLoaded", async function () {
         : openCount + ' open item' + (openCount === 1 ? '' : 's') + (threads.length === openCount ? '' : ' - ' + threads.length + ' total');
     }
     if (reviewCopySummary) reviewCopySummary.disabled = threads.length === 0;
+    if (reviewResolveAll) reviewResolveAll.disabled = openCount === 0;
+    if (reviewDeleteAll) reviewDeleteAll.disabled = threads.length === 0;
 
     const filteredThreads = threads.filter(function(thread) {
       if (reviewFilter === 'resolved') return thread.resolved;
@@ -3064,6 +3084,93 @@ document.addEventListener("DOMContentLoaded", async function () {
     }
   }
 
+  function resolveAllReviewThreads() {
+    const openThreads = getActiveReviewThreads().filter(function(thread) { return !thread.resolved; });
+    if (openThreads.length === 0) return;
+    const updatedAt = Date.now();
+    openThreads.forEach(function(thread) {
+      thread.resolved = true;
+      thread.updatedAt = updatedAt;
+    });
+    persistReviewThreads(openThreads.length + ' review item' + (openThreads.length === 1 ? '' : 's') + ' resolved.');
+    requestAnimationFrame(function() {
+      if (reviewPanelClose) reviewPanelClose.focus();
+    });
+  }
+
+  function cancelReviewDeleteConfirmation() {
+    pendingReviewDelete = null;
+    if (reviewDeleteModal && reviewDeleteModal.getAttribute('aria-hidden') === 'false') {
+      closeAppModal(reviewDeleteModal);
+    }
+  }
+
+  function requestReviewDeleteConfirmation(reviewId) {
+    if (!reviewDeleteModal || !reviewDeleteCancel || !reviewDeleteConfirm) return;
+    const threads = getActiveReviewThreads();
+    const thread = reviewId
+      ? threads.find(function(item) { return item.id === reviewId; })
+      : null;
+    if ((reviewId && !thread) || (!reviewId && threads.length === 0)) return;
+
+    pendingReviewDelete = {
+      tabId: activeTabId,
+      reviewId: reviewId || null
+    };
+    if (reviewDeleteTitle) {
+      reviewDeleteTitle.textContent = reviewId ? 'Delete review item?' : 'Delete all review items?';
+    }
+    if (reviewDeleteDescription) {
+      reviewDeleteDescription.textContent = reviewId
+        ? 'This ' + (thread.kind === 'suggestion' ? 'suggestion' : 'comment') + ' will be permanently deleted. This cannot be undone.'
+        : 'All ' + threads.length + ' review item' + (threads.length === 1 ? '' : 's') + ' in this document will be permanently deleted. This cannot be undone.';
+    }
+    reviewDeleteConfirm.textContent = reviewId ? 'Delete item' : 'Delete all';
+    openAppModal(reviewDeleteModal, {
+      focusTarget: reviewDeleteCancel,
+      onClose: cancelReviewDeleteConfirmation
+    });
+    requestAnimationFrame(function() {
+      requestAnimationFrame(function() {
+        if (reviewDeleteCancel) reviewDeleteCancel.focus({ preventScroll: true });
+      });
+    });
+  }
+
+  function confirmReviewDeletion() {
+    const pending = pendingReviewDelete;
+    pendingReviewDelete = null;
+    if (!pending || !reviewDeleteModal) return;
+
+    const tab = tabs.find(function(item) { return item.id === pending.tabId; });
+    if (!tab || tab.id !== activeTabId || !Array.isArray(tab.reviewThreads)) {
+      closeAppModal(reviewDeleteModal);
+      announceToScreenReader('Review deletion cancelled because the active document changed.');
+      return;
+    }
+
+    let deletedCount = 0;
+    if (pending.reviewId) {
+      const index = tab.reviewThreads.findIndex(function(thread) { return thread.id === pending.reviewId; });
+      if (index >= 0) {
+        tab.reviewThreads.splice(index, 1);
+        deletedCount = 1;
+      }
+    } else {
+      deletedCount = tab.reviewThreads.length;
+      tab.reviewThreads.splice(0, tab.reviewThreads.length);
+      closeReviewComposer();
+    }
+
+    closeAppModal(reviewDeleteModal);
+    if (deletedCount > 0) {
+      persistReviewThreads(deletedCount === 1 ? 'Review item deleted.' : deletedCount + ' review items deleted.');
+    }
+    requestAnimationFrame(function() {
+      if (reviewPanelClose) reviewPanelClose.focus();
+    });
+  }
+
   function updateReviewBackdrop() {
     if (!reviewPanelBackdrop) return;
     reviewPanelBackdrop.hidden = true;
@@ -3096,6 +3203,7 @@ document.addEventListener("DOMContentLoaded", async function () {
       renderReviewPanel();
       if (options.focusPanel && reviewPanelClose) reviewPanelClose.focus();
     } else {
+      cancelReviewDeleteConfirmation();
       closeReviewComposer();
       clearReviewDecorations();
       const restoreMode = reviewPreviousViewModes.get(activeTabId);
@@ -3123,6 +3231,15 @@ document.addEventListener("DOMContentLoaded", async function () {
         setReviewMode(!reviewModeActive, { focusPanel: !reviewModeActive });
       });
     }
+    if (reviewCountBadge) {
+      reviewCountBadge.addEventListener('click', function() {
+        if (!reviewModeActive) {
+          setReviewMode(true, { focusPanel: true });
+        } else if (reviewPanelClose) {
+          reviewPanelClose.focus();
+        }
+      });
+    }
     if (mobileReviewToggle) {
       mobileReviewToggle.addEventListener('click', function() {
         closeMobileMenu();
@@ -3159,6 +3276,15 @@ document.addEventListener("DOMContentLoaded", async function () {
     }
     if (reviewFeedbackSubmit) reviewFeedbackSubmit.addEventListener('click', submitReviewFeedback);
     if (reviewCopySummary) reviewCopySummary.addEventListener('click', copyReviewSummary);
+    if (reviewResolveAll) reviewResolveAll.addEventListener('click', resolveAllReviewThreads);
+    if (reviewDeleteAll) {
+      reviewDeleteAll.addEventListener('click', function() {
+        requestReviewDeleteConfirmation(null);
+      });
+    }
+    if (reviewDeleteClose) reviewDeleteClose.addEventListener('click', cancelReviewDeleteConfirmation);
+    if (reviewDeleteCancel) reviewDeleteCancel.addEventListener('click', cancelReviewDeleteConfirmation);
+    if (reviewDeleteConfirm) reviewDeleteConfirm.addEventListener('click', confirmReviewDeletion);
 
     document.querySelectorAll('[data-review-kind]').forEach(function(button) {
       button.addEventListener('click', function() {
@@ -3216,17 +3342,15 @@ document.addEventListener("DOMContentLoaded", async function () {
           persistReviewThreads(thread.resolved ? 'Review item resolved.' : 'Review item reopened.');
           return;
         }
-        if (action === 'delete' && confirm('Delete this review item?')) {
-          const index = getActiveReviewThreads().indexOf(thread);
-          if (index >= 0) getActiveReviewThreads().splice(index, 1);
-          persistReviewThreads('Review item deleted.');
+        if (action === 'delete') {
+          requestReviewDeleteConfirmation(thread.id);
         }
       });
     }
 
     window.addEventListener('resize', updateReviewBackdrop);
     document.addEventListener('keydown', function(event) {
-      if (event.key !== 'Escape' || !reviewModeActive || activeModal) return;
+      if (event.defaultPrevented || event.key !== 'Escape' || !reviewModeActive || activeModal) return;
       if (reviewComposer && !reviewComposer.hidden) {
         event.preventDefault();
         closeReviewComposer({ restoreFocus: true });
@@ -3765,6 +3889,7 @@ document.addEventListener("DOMContentLoaded", async function () {
 
   function switchTab(tabId) {
     if (tabId === activeTabId) return;
+    cancelReviewDeleteConfirmation();
     saveCurrentTabState();
     closeReviewComposer();
     clearReviewDecorations();
@@ -3814,6 +3939,9 @@ document.addEventListener("DOMContentLoaded", async function () {
   }
 
   function closeTab(tabId) {
+    if (pendingReviewDelete && pendingReviewDelete.tabId === tabId) {
+      cancelReviewDeleteConfirmation();
+    }
     if (liveCollaboration && liveCollaboration.tabId === tabId) {
       if (liveCollaboration.isHost) {
         endLiveSessionForEveryone();
@@ -3990,6 +4118,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   }
 
   function resetAllTabs() {
+    cancelReviewDeleteConfirmation();
     const modal = document.getElementById('reset-confirm-modal');
     const confirmBtn = document.getElementById('reset-modal-confirm');
     const cancelBtn = document.getElementById('reset-modal-cancel');
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 6e5f8ae1..e778c2f8 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -5994,18 +5994,30 @@ html[data-theme="dark"] .mermaid svg {
    COMMENTS & SUGGESTIONS
    ======================================== */
 .review-count-badge {
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  border-radius: 999px;
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  flex: 0 0 28px;
+  padding: 0;
+  border: 2px solid var(--header-bg);
+  border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--bg-color);
   background: var(--accent-color);
-  font-size: 0.68rem;
+  box-shadow: 0 0 0 1px var(--border-color);
+  font-size: 11px;
   font-weight: 700;
   line-height: 1;
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.review-count-badge:hover {
+  color: var(--bg-color);
+  background: color-mix(in srgb, var(--accent-color) 84%, #000000);
 }
 
 .review-count-badge[hidden],
@@ -6104,6 +6116,12 @@ html[data-theme="dark"] .mermaid svg {
   border-color: var(--border-color);
 }
 
+.review-icon-btn.is-danger:hover:not(:disabled) {
+  color: var(--color-danger-fg);
+  background: color-mix(in srgb, var(--color-danger-fg) 10%, transparent);
+  border-color: color-mix(in srgb, var(--color-danger-fg) 45%, var(--border-color));
+}
+
 .review-icon-btn:disabled {
   opacity: 0.45;
   cursor: not-allowed;
@@ -6118,6 +6136,12 @@ html[data-theme="dark"] .mermaid svg {
   border-bottom: 1px solid var(--border-color);
 }
 
+.review-panel-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
 .review-filter-group,
 .review-kind-group {
   display: inline-flex;
@@ -6542,6 +6566,16 @@ html[data-theme="dark"] .mermaid svg {
     padding-top: 14px;
   }
 
+  .review-panel-toolbar {
+    gap: 8px;
+    padding-inline: 10px;
+  }
+
+  .review-panel-actions .review-icon-btn {
+    width: 44px;
+    height: 44px;
+  }
+
   .review-target-button {
     min-width: 44px;
     height: 44px;
diff --git a/index.html b/index.html
index 0011c1b9..e2a23e21 100644
--- a/index.html
+++ b/index.html
@@ -205,8 +205,8 @@ <h1 class="h4 mb-0 me-2">Markdown Viewer<span class="visually-hidden"> - Online
 
                     <button id="review-toggle" class="tool-button" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
                         <i class="bi bi-chat-square-text"></i> <span class="btn-text">Review</span>
-                        <span id="review-count-badge" class="review-count-badge" aria-label="0 open review items" hidden>0</span>
                     </button>
+                    <button id="review-count-badge" class="live-share-avatar live-share-avatar-overflow review-count-badge" type="button" aria-label="0 open review items" title="Open review feedback" hidden>0</button>
                     
                     <div class="dropdown me-1">
                         <button class="tool-button dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Switch Language">
@@ -337,7 +337,7 @@ <h2 class="h5 m-0">Menu</h2>
 
                             <button id="mobile-review-toggle" class="mobile-menu-item" type="button" title="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
                                 <span><i class="bi bi-chat-square-text me-2"></i>Review</span>
-                                <span id="mobile-review-count-badge" class="review-count-badge" aria-label="0 open review items" hidden>0</span>
+                                <span id="mobile-review-count-badge" class="review-count-badge" aria-hidden="true" hidden>0</span>
                             </button>
                             
                             <div class="mobile-menu-item dropdown w-100 p-0 border-0">
@@ -451,6 +451,23 @@ <h2 class="h5 m-0">Menu</h2>
           </div>
         </div>
 
+        <!-- Review Delete Confirmation Modal -->
+        <div id="review-delete-modal" class="reset-modal-overlay modal-overlay" role="dialog" aria-modal="true" aria-labelledby="review-delete-title" aria-describedby="review-delete-description" aria-hidden="true" style="display:none;">
+          <div class="reset-modal-box modal-box">
+            <div class="modal-header">
+              <p id="review-delete-title" class="reset-modal-message">Delete review item?</p>
+              <button type="button" class="modal-close-btn" id="review-delete-close" aria-label="Close review deletion dialog">
+                <i class="bi bi-x-lg" aria-hidden="true"></i>
+              </button>
+            </div>
+            <p id="review-delete-description" class="modal-subtext">This comment or suggestion will be permanently deleted.</p>
+            <div class="reset-modal-actions">
+              <button type="button" class="reset-modal-btn reset-modal-cancel" id="review-delete-cancel">Cancel</button>
+              <button type="button" class="reset-modal-btn reset-modal-confirm" id="review-delete-confirm">Delete</button>
+            </div>
+          </div>
+        </div>
+
         <!-- Clear Markdown Formatting Modal -->
         <div id="clear-formatting-modal" class="reset-modal-overlay modal-overlay" role="dialog" aria-modal="true" aria-labelledby="clear-formatting-title" aria-hidden="true" style="display:none;">
           <div class="reset-modal-box reset-modal-box--wide modal-box">
@@ -1194,9 +1211,17 @@ <h2 id="review-panel-title">Comments &amp; suggestions</h2>
                         <button class="review-filter-btn" type="button" data-review-filter="resolved" aria-pressed="false">Resolved</button>
                         <button class="review-filter-btn" type="button" data-review-filter="all" aria-pressed="false">All</button>
                     </div>
-                    <button id="review-copy-summary" class="review-icon-btn" type="button" aria-label="Copy review summary" title="Copy review summary" disabled>
-                        <i class="bi bi-clipboard" aria-hidden="true"></i>
-                    </button>
+                    <div class="review-panel-actions" role="group" aria-label="Review actions">
+                        <button id="review-copy-summary" class="review-icon-btn" type="button" aria-label="Copy review summary" title="Copy review summary" disabled>
+                            <i class="bi bi-clipboard" aria-hidden="true"></i>
+                        </button>
+                        <button id="review-resolve-all" class="review-icon-btn" type="button" aria-label="Resolve all open review items" title="Resolve all open review items" disabled>
+                            <i class="bi bi-check2-all" aria-hidden="true"></i>
+                        </button>
+                        <button id="review-delete-all" class="review-icon-btn is-danger" type="button" aria-label="Delete all review items" title="Delete all review items" disabled>
+                            <i class="bi bi-trash3" aria-hidden="true"></i>
+                        </button>
+                    </div>
                 </div>
 
                 <section id="review-composer" class="review-composer" aria-labelledby="review-composer-title" hidden>
diff --git a/script.js b/script.js
index d66c996c..4750e33d 100644
--- a/script.js
+++ b/script.js
@@ -270,6 +270,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   let reviewFilter = 'open';
   let reviewComposerKind = 'comment';
   let activeReviewAnchor = null;
+  let pendingReviewDelete = null;
   let reviewPinsResizeObserver = null;
   let reviewPinsLayoutFrame = null;
   let reviewTargetSourceSnapshots = new WeakMap();
@@ -338,6 +339,14 @@ document.addEventListener("DOMContentLoaded", async function () {
   const reviewPanelClose = document.getElementById('review-panel-close');
   const reviewPanelSummary = document.getElementById('review-panel-summary');
   const reviewCopySummary = document.getElementById('review-copy-summary');
+  const reviewResolveAll = document.getElementById('review-resolve-all');
+  const reviewDeleteAll = document.getElementById('review-delete-all');
+  const reviewDeleteModal = document.getElementById('review-delete-modal');
+  const reviewDeleteTitle = document.getElementById('review-delete-title');
+  const reviewDeleteDescription = document.getElementById('review-delete-description');
+  const reviewDeleteClose = document.getElementById('review-delete-close');
+  const reviewDeleteCancel = document.getElementById('review-delete-cancel');
+  const reviewDeleteConfirm = document.getElementById('review-delete-confirm');
   const reviewComposer = document.getElementById('review-composer');
   const reviewComposerAnchor = document.getElementById('review-composer-anchor');
   const reviewComposerCancel = document.getElementById('review-composer-cancel');
@@ -2790,8 +2799,17 @@ document.addEventListener("DOMContentLoaded", async function () {
       if (!badge) return;
       badge.textContent = String(openCount);
       badge.hidden = openCount === 0;
-      badge.setAttribute('aria-label', openCount + ' open review item' + (openCount === 1 ? '' : 's'));
+      const countLabel = openCount + ' open review item' + (openCount === 1 ? '' : 's');
+      if (badge === reviewCountBadge) {
+        badge.setAttribute('aria-label', countLabel + '; open review panel');
+      }
+      badge.title = countLabel;
     });
+    if (mobileReviewToggle) {
+      mobileReviewToggle.setAttribute('aria-label', openCount > 0
+        ? 'Open comments and suggestions. ' + openCount + ' open review item' + (openCount === 1 ? '' : 's') + '.'
+        : 'Open comments and suggestions');
+    }
   }
 
   function formatReviewTime(timestamp) {
@@ -2887,6 +2905,8 @@ document.addEventListener("DOMContentLoaded", async function () {
         : openCount + ' open item' + (openCount === 1 ? '' : 's') + (threads.length === openCount ? '' : ' - ' + threads.length + ' total');
     }
     if (reviewCopySummary) reviewCopySummary.disabled = threads.length === 0;
+    if (reviewResolveAll) reviewResolveAll.disabled = openCount === 0;
+    if (reviewDeleteAll) reviewDeleteAll.disabled = threads.length === 0;
 
     const filteredThreads = threads.filter(function(thread) {
       if (reviewFilter === 'resolved') return thread.resolved;
@@ -3064,6 +3084,93 @@ document.addEventListener("DOMContentLoaded", async function () {
     }
   }
 
+  function resolveAllReviewThreads() {
+    const openThreads = getActiveReviewThreads().filter(function(thread) { return !thread.resolved; });
+    if (openThreads.length === 0) return;
+    const updatedAt = Date.now();
+    openThreads.forEach(function(thread) {
+      thread.resolved = true;
+      thread.updatedAt = updatedAt;
+    });
+    persistReviewThreads(openThreads.length + ' review item' + (openThreads.length === 1 ? '' : 's') + ' resolved.');
+    requestAnimationFrame(function() {
+      if (reviewPanelClose) reviewPanelClose.focus();
+    });
+  }
+
+  function cancelReviewDeleteConfirmation() {
+    pendingReviewDelete = null;
+    if (reviewDeleteModal && reviewDeleteModal.getAttribute('aria-hidden') === 'false') {
+      closeAppModal(reviewDeleteModal);
+    }
+  }
+
+  function requestReviewDeleteConfirmation(reviewId) {
+    if (!reviewDeleteModal || !reviewDeleteCancel || !reviewDeleteConfirm) return;
+    const threads = getActiveReviewThreads();
+    const thread = reviewId
+      ? threads.find(function(item) { return item.id === reviewId; })
+      : null;
+    if ((reviewId && !thread) || (!reviewId && threads.length === 0)) return;
+
+    pendingReviewDelete = {
+      tabId: activeTabId,
+      reviewId: reviewId || null
+    };
+    if (reviewDeleteTitle) {
+      reviewDeleteTitle.textContent = reviewId ? 'Delete review item?' : 'Delete all review items?';
+    }
+    if (reviewDeleteDescription) {
+      reviewDeleteDescription.textContent = reviewId
+        ? 'This ' + (thread.kind === 'suggestion' ? 'suggestion' : 'comment') + ' will be permanently deleted. This cannot be undone.'
+        : 'All ' + threads.length + ' review item' + (threads.length === 1 ? '' : 's') + ' in this document will be permanently deleted. This cannot be undone.';
+    }
+    reviewDeleteConfirm.textContent = reviewId ? 'Delete item' : 'Delete all';
+    openAppModal(reviewDeleteModal, {
+      focusTarget: reviewDeleteCancel,
+      onClose: cancelReviewDeleteConfirmation
+    });
+    requestAnimationFrame(function() {
+      requestAnimationFrame(function() {
+        if (reviewDeleteCancel) reviewDeleteCancel.focus({ preventScroll: true });
+      });
+    });
+  }
+
+  function confirmReviewDeletion() {
+    const pending = pendingReviewDelete;
+    pendingReviewDelete = null;
+    if (!pending || !reviewDeleteModal) return;
+
+    const tab = tabs.find(function(item) { return item.id === pending.tabId; });
+    if (!tab || tab.id !== activeTabId || !Array.isArray(tab.reviewThreads)) {
+      closeAppModal(reviewDeleteModal);
+      announceToScreenReader('Review deletion cancelled because the active document changed.');
+      return;
+    }
+
+    let deletedCount = 0;
+    if (pending.reviewId) {
+      const index = tab.reviewThreads.findIndex(function(thread) { return thread.id === pending.reviewId; });
+      if (index >= 0) {
+        tab.reviewThreads.splice(index, 1);
+        deletedCount = 1;
+      }
+    } else {
+      deletedCount = tab.reviewThreads.length;
+      tab.reviewThreads.splice(0, tab.reviewThreads.length);
+      closeReviewComposer();
+    }
+
+    closeAppModal(reviewDeleteModal);
+    if (deletedCount > 0) {
+      persistReviewThreads(deletedCount === 1 ? 'Review item deleted.' : deletedCount + ' review items deleted.');
+    }
+    requestAnimationFrame(function() {
+      if (reviewPanelClose) reviewPanelClose.focus();
+    });
+  }
+
   function updateReviewBackdrop() {
     if (!reviewPanelBackdrop) return;
     reviewPanelBackdrop.hidden = true;
@@ -3096,6 +3203,7 @@ document.addEventListener("DOMContentLoaded", async function () {
       renderReviewPanel();
       if (options.focusPanel && reviewPanelClose) reviewPanelClose.focus();
     } else {
+      cancelReviewDeleteConfirmation();
       closeReviewComposer();
       clearReviewDecorations();
       const restoreMode = reviewPreviousViewModes.get(activeTabId);
@@ -3123,6 +3231,15 @@ document.addEventListener("DOMContentLoaded", async function () {
         setReviewMode(!reviewModeActive, { focusPanel: !reviewModeActive });
       });
     }
+    if (reviewCountBadge) {
+      reviewCountBadge.addEventListener('click', function() {
+        if (!reviewModeActive) {
+          setReviewMode(true, { focusPanel: true });
+        } else if (reviewPanelClose) {
+          reviewPanelClose.focus();
+        }
+      });
+    }
     if (mobileReviewToggle) {
       mobileReviewToggle.addEventListener('click', function() {
         closeMobileMenu();
@@ -3159,6 +3276,15 @@ document.addEventListener("DOMContentLoaded", async function () {
     }
     if (reviewFeedbackSubmit) reviewFeedbackSubmit.addEventListener('click', submitReviewFeedback);
     if (reviewCopySummary) reviewCopySummary.addEventListener('click', copyReviewSummary);
+    if (reviewResolveAll) reviewResolveAll.addEventListener('click', resolveAllReviewThreads);
+    if (reviewDeleteAll) {
+      reviewDeleteAll.addEventListener('click', function() {
+        requestReviewDeleteConfirmation(null);
+      });
+    }
+    if (reviewDeleteClose) reviewDeleteClose.addEventListener('click', cancelReviewDeleteConfirmation);
+    if (reviewDeleteCancel) reviewDeleteCancel.addEventListener('click', cancelReviewDeleteConfirmation);
+    if (reviewDeleteConfirm) reviewDeleteConfirm.addEventListener('click', confirmReviewDeletion);
 
     document.querySelectorAll('[data-review-kind]').forEach(function(button) {
       button.addEventListener('click', function() {
@@ -3216,17 +3342,15 @@ document.addEventListener("DOMContentLoaded", async function () {
           persistReviewThreads(thread.resolved ? 'Review item resolved.' : 'Review item reopened.');
           return;
         }
-        if (action === 'delete' && confirm('Delete this review item?')) {
-          const index = getActiveReviewThreads().indexOf(thread);
-          if (index >= 0) getActiveReviewThreads().splice(index, 1);
-          persistReviewThreads('Review item deleted.');
+        if (action === 'delete') {
+          requestReviewDeleteConfirmation(thread.id);
         }
       });
     }
 
     window.addEventListener('resize', updateReviewBackdrop);
     document.addEventListener('keydown', function(event) {
-      if (event.key !== 'Escape' || !reviewModeActive || activeModal) return;
+      if (event.defaultPrevented || event.key !== 'Escape' || !reviewModeActive || activeModal) return;
       if (reviewComposer && !reviewComposer.hidden) {
         event.preventDefault();
         closeReviewComposer({ restoreFocus: true });
@@ -3765,6 +3889,7 @@ document.addEventListener("DOMContentLoaded", async function () {
 
   function switchTab(tabId) {
     if (tabId === activeTabId) return;
+    cancelReviewDeleteConfirmation();
     saveCurrentTabState();
     closeReviewComposer();
     clearReviewDecorations();
@@ -3814,6 +3939,9 @@ document.addEventListener("DOMContentLoaded", async function () {
   }
 
   function closeTab(tabId) {
+    if (pendingReviewDelete && pendingReviewDelete.tabId === tabId) {
+      cancelReviewDeleteConfirmation();
+    }
     if (liveCollaboration && liveCollaboration.tabId === tabId) {
       if (liveCollaboration.isHost) {
         endLiveSessionForEveryone();
@@ -3990,6 +4118,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   }
 
   function resetAllTabs() {
+    cancelReviewDeleteConfirmation();
     const modal = document.getElementById('reset-confirm-modal');
     const confirmBtn = document.getElementById('reset-modal-confirm');
     const cancelBtn = document.getElementById('reset-modal-cancel');
diff --git a/styles.css b/styles.css
index 6e5f8ae1..e778c2f8 100644
--- a/styles.css
+++ b/styles.css
@@ -5994,18 +5994,30 @@ html[data-theme="dark"] .mermaid svg {
    COMMENTS & SUGGESTIONS
    ======================================== */
 .review-count-badge {
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  border-radius: 999px;
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  flex: 0 0 28px;
+  padding: 0;
+  border: 2px solid var(--header-bg);
+  border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--bg-color);
   background: var(--accent-color);
-  font-size: 0.68rem;
+  box-shadow: 0 0 0 1px var(--border-color);
+  font-size: 11px;
   font-weight: 700;
   line-height: 1;
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.review-count-badge:hover {
+  color: var(--bg-color);
+  background: color-mix(in srgb, var(--accent-color) 84%, #000000);
 }
 
 .review-count-badge[hidden],
@@ -6104,6 +6116,12 @@ html[data-theme="dark"] .mermaid svg {
   border-color: var(--border-color);
 }
 
+.review-icon-btn.is-danger:hover:not(:disabled) {
+  color: var(--color-danger-fg);
+  background: color-mix(in srgb, var(--color-danger-fg) 10%, transparent);
+  border-color: color-mix(in srgb, var(--color-danger-fg) 45%, var(--border-color));
+}
+
 .review-icon-btn:disabled {
   opacity: 0.45;
   cursor: not-allowed;
@@ -6118,6 +6136,12 @@ html[data-theme="dark"] .mermaid svg {
   border-bottom: 1px solid var(--border-color);
 }
 
+.review-panel-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
 .review-filter-group,
 .review-kind-group {
   display: inline-flex;
@@ -6542,6 +6566,16 @@ html[data-theme="dark"] .mermaid svg {
     padding-top: 14px;
   }
 
+  .review-panel-toolbar {
+    gap: 8px;
+    padding-inline: 10px;
+  }
+
+  .review-panel-actions .review-icon-btn {
+    width: 44px;
+    height: 44px;
+  }
+
   .review-target-button {
     min-width: 44px;
     height: 44px;
diff --git a/wiki/Features.md b/wiki/Features.md
index 954e9d14..593d6efe 100644
--- a/wiki/Features.md
+++ b/wiki/Features.md
@@ -59,7 +59,7 @@ Review mode provides a local feedback layer over the rendered document without i
 - The Review button opens a dedicated read-only preview workspace and restores the previous Editor, Split, or Preview layout when closed.
 - Review pins are attached to rendered headings, paragraphs, fenced code blocks, and supported diagram containers, including Mermaid and the other diagram engines.
 - A reviewer can add either a comment or a suggestion. Both are feedback records; suggestions do not apply source changes automatically.
-- Threads can be resolved, reopened, deleted, filtered by status, and copied together as a Markdown review summary.
+- Threads can be resolved, reopened, or deleted individually and filtered by status. The panel also provides Copy summary, Resolve all, and confirmation-protected Delete all actions.
 - Open-thread counts appear in the desktop header and mobile menu.
 - Review controls support keyboard focus, screen-reader labels, dark mode, RTL layout, desktop side-by-side review, and a mobile partial-height panel.
 
diff --git a/wiki/Usage-Guide.md b/wiki/Usage-Guide.md
index 9838fbf9..ec2eb7fb 100644
--- a/wiki/Usage-Guide.md
+++ b/wiki/Usage-Guide.md
@@ -51,7 +51,7 @@ Use Review when you want to leave structured feedback without editing the Markdo
 2. Select the comment pin on a rendered heading, paragraph, code block, or diagram.
 3. Choose **Comment** for general feedback or **Suggestion** for a proposed change.
 4. Enter the feedback and add it to the document review.
-5. Use **Resolve** or **Reopen** to manage a thread. Use the clipboard button in the review panel to copy a Markdown summary of all feedback.
+5. Use **Resolve** or **Reopen** to manage a thread. The panel toolbar can copy a Markdown summary, resolve every open item, or delete all feedback after confirmation. Deleting an individual item also uses an in-app confirmation dialog.
 
 Review threads are stored with the normal local document tab and survive reloads. They are not inserted into Markdown and are excluded from Markdown, HTML, PDF, PNG, and print output. If the reviewed source block changes, its thread remains in the panel as an unanchored item instead of moving to a different block. Duplicating a tab starts the copy without review threads.
 

From 27de057a65bc4a1f977d47be8ee0992e156f4718 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Mon, 13 Jul 2026 02:16:12 +0530
Subject: [PATCH 04/18] fix(review): wrap mobile review toolbar

---
 desktop-app/resources/styles.css | 5 +++++
 styles.css                       | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index e778c2f8..8b00388f 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -6567,10 +6567,15 @@ html[data-theme="dark"] .mermaid svg {
   }
 
   .review-panel-toolbar {
+    flex-wrap: wrap;
     gap: 8px;
     padding-inline: 10px;
   }
 
+  .review-panel-actions {
+    margin-inline-start: auto;
+  }
+
   .review-panel-actions .review-icon-btn {
     width: 44px;
     height: 44px;
diff --git a/styles.css b/styles.css
index e778c2f8..8b00388f 100644
--- a/styles.css
+++ b/styles.css
@@ -6567,10 +6567,15 @@ html[data-theme="dark"] .mermaid svg {
   }
 
   .review-panel-toolbar {
+    flex-wrap: wrap;
     gap: 8px;
     padding-inline: 10px;
   }
 
+  .review-panel-actions {
+    margin-inline-start: auto;
+  }
+
   .review-panel-actions .review-icon-btn {
     width: 44px;
     height: 44px;

From f6c310ade850e4ad556551eba9129075a6a641bb Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Mon, 13 Jul 2026 14:18:51 +0530
Subject: [PATCH 05/18] fix(share): allow Cloudflare preview origins

---
 functions/api/share/[[id]].js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/functions/api/share/[[id]].js b/functions/api/share/[[id]].js
index 2e801e4e..4cc25dcd 100644
--- a/functions/api/share/[[id]].js
+++ b/functions/api/share/[[id]].js
@@ -12,6 +12,11 @@ const ALLOWED_ORIGINS = new Set([
 function isAllowedOrigin(origin) {
   if (!origin) return true;
   if (ALLOWED_ORIGINS.has(origin)) return true;
+
+  if (/^https:\/\/[a-z0-9-]+\.markdownviewer\.pages\.dev$/i.test(origin)) {
+    return true;
+  }
+
   return /^https?:\/\/(?:localhost|127\.0\.0\.1)(?::\d+)?$/i.test(origin);
 }
 

From e0bc2ac01004ba4f640cfef8253509e7d7c09bd8 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Mon, 13 Jul 2026 16:52:02 +0530
Subject: [PATCH 06/18] fix(live-share): allow Cloudflare preview origins

---
 functions/live-room/[[room]].js | 5 ++++-
 wiki/Features.md                | 2 +-
 wiki/Live-Share-Cloudflare.md   | 2 +-
 workers/live-room-worker.js     | 3 +++
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/functions/live-room/[[room]].js b/functions/live-room/[[room]].js
index 2ced7d63..0c5adf7c 100644
--- a/functions/live-room/[[room]].js
+++ b/functions/live-room/[[room]].js
@@ -59,7 +59,10 @@ function isAllowedLiveOrigin(origin) {
   if (origin === "https://markdownviewer.pages.dev" || origin === "null") {
     return true;
   }
-  if (/^https?:\/\/(?:localhost|127\.0\.0\.1)(?::\d+)?$/i.test(origin)) {
+  if (/^https:\/\/[a-z0-9-]+\.markdownviewer\.pages\.dev$/i.test(origin || "")) {
+    return true;
+  }
+  if (/^https?:\/\/(?:localhost|127\.0\.0\.1)(?::\d+)?$/i.test(origin || "")) {
     return true;
   }
   return false;
diff --git a/wiki/Features.md b/wiki/Features.md
index 593d6efe..50e80281 100644
--- a/wiki/Features.md
+++ b/wiki/Features.md
@@ -342,7 +342,7 @@ Implementation:
 
 - The client uses Yjs for the shared document state.
 - Browser clients connect with WebSocket to `/live-room/<room-id>?secret=<secret>`.
-- The Pages Function and Durable Object reject unsupported WebSocket `Origin` values. The production app, `null`, and localhost development origins are allowed.
+- The Pages Function and Durable Object reject unsupported WebSocket `Origin` values. The production app, HTTPS `*.markdownviewer.pages.dev` previews, `null`, and localhost development origins are allowed.
 - The host connection establishes separate host, edit, and view capabilities. The Durable Object stores these capabilities and authenticates each joining role server-side.
 - Cloudflare Pages routes the WebSocket to a Durable Object named `LIVE_ROOMS`.
 - The Durable Object relays only known message types and filters them by role: viewers cannot send updates or session-end messages, editors can send document sync messages, and only the host can send every supported type.
diff --git a/wiki/Live-Share-Cloudflare.md b/wiki/Live-Share-Cloudflare.md
index 113ed952..b16bf3e1 100644
--- a/wiki/Live-Share-Cloudflare.md
+++ b/wiki/Live-Share-Cloudflare.md
@@ -26,7 +26,7 @@ There are two checked-in Cloudflare entry points:
 The Pages Function:
 
 - Requires a WebSocket upgrade request.
-- Allows only the production app, `null`, and localhost/127.0.0.1 development `Origin` values.
+- Allows the production app, HTTPS `*.markdownviewer.pages.dev` preview deployments, `null`, and localhost/127.0.0.1 development `Origin` values.
 - Requires a `LIVE_ROOMS` Durable Object binding.
 - Rejects room names over 160 characters.
 - Rejects secrets over 256 characters.
diff --git a/workers/live-room-worker.js b/workers/live-room-worker.js
index 66779b63..6e088eb9 100644
--- a/workers/live-room-worker.js
+++ b/workers/live-room-worker.js
@@ -47,6 +47,9 @@ function isAllowedLiveOrigin(origin) {
   if (origin === "https://markdownviewer.pages.dev" || origin === "null") {
     return true;
   }
+  if (/^https:\/\/[a-z0-9-]+\.markdownviewer\.pages\.dev$/i.test(origin || "")) {
+    return true;
+  }
   if (/^https?:\/\/(?:localhost|127\.0\.0\.1)(?::\d+)?$/i.test(origin || "")) {
     return true;
   }

From 7bf20e618826efadc3433975d9fe07c5c056b6c5 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Mon, 13 Jul 2026 17:39:17 +0530
Subject: [PATCH 07/18] feat(live-share): synchronize review feedback

---
 desktop-app/resources/js/script.js | 185 +++++++++++++++++++++++++++++
 script.js                          | 185 +++++++++++++++++++++++++++++
 wiki/FAQ.md                        |   2 +-
 wiki/Features.md                   |  15 +--
 wiki/Live-Share-Cloudflare.md      |   6 +-
 wiki/Usage-Guide.md                |   4 +-
 workers/live-room-worker.js        |   7 ++
 7 files changed, 391 insertions(+), 13 deletions(-)

diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index b60fd755..c17b3311 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -2418,6 +2418,8 @@ document.addEventListener("DOMContentLoaded", async function () {
   let liveCollaborationModulesPromise = null;
   const LIVE_EDIT_ORIGIN = Symbol("markdown-viewer-live-local-edit");
   const LIVE_RELAY_ORIGIN = Symbol("markdown-viewer-live-relay");
+  const LIVE_REVIEW_EDIT_ORIGIN = Symbol("markdown-viewer-live-review-local-edit");
+  const LIVE_REVIEW_RELAY_ORIGIN = Symbol("markdown-viewer-live-review-relay");
 
   // ========================================
   // COMMENTS & SUGGESTIONS
@@ -2474,6 +2476,94 @@ document.addEventListener("DOMContentLoaded", async function () {
     return tab.reviewThreads;
   }
 
+  function cloneReviewThreadForLiveShare(thread) {
+    return {
+      id: thread.id,
+      anchor: Object.assign({}, thread.anchor),
+      kind: thread.kind,
+      body: thread.body,
+      createdAt: thread.createdAt,
+      updatedAt: thread.updatedAt,
+      resolved: thread.resolved === true
+    };
+  }
+
+  function liveReviewThreadsMatch(left, right) {
+    if (!left || !right) return false;
+    const leftAnchor = left.anchor || {};
+    const rightAnchor = right.anchor || {};
+    return left.id === right.id &&
+      left.kind === right.kind &&
+      left.body === right.body &&
+      left.createdAt === right.createdAt &&
+      left.updatedAt === right.updatedAt &&
+      left.resolved === right.resolved &&
+      leftAnchor.key === rightAnchor.key &&
+      leftAnchor.type === rightAnchor.type &&
+      leftAnchor.label === rightAnchor.label &&
+      leftAnchor.excerpt === rightAnchor.excerpt &&
+      leftAnchor.duplicateCount === rightAnchor.duplicateCount &&
+      leftAnchor.context === rightAnchor.context;
+  }
+
+  function replaceLiveReviewMapThreads(reviewDoc, reviewMap, rawThreads, origin) {
+    if (!reviewDoc || !reviewMap) return;
+    const threads = normalizeReviewThreads(rawThreads);
+    const nextIds = new Set(threads.map(function(thread) { return thread.id; }));
+    const staleIds = [];
+    reviewMap.forEach(function(_, id) {
+      if (!nextIds.has(id)) staleIds.push(id);
+    });
+
+    reviewDoc.transact(function() {
+      staleIds.forEach(function(id) { reviewMap.delete(id); });
+      threads.forEach(function(thread) {
+        const nextThread = cloneReviewThreadForLiveShare(thread);
+        if (!liveReviewThreadsMatch(reviewMap.get(thread.id), nextThread)) {
+          reviewMap.set(thread.id, nextThread);
+        }
+      });
+    }, origin);
+  }
+
+  function getLiveReviewMapThreads(reviewMap) {
+    const rawThreads = [];
+    if (!reviewMap) return rawThreads;
+    reviewMap.forEach(function(thread, id) {
+      if (!thread || typeof thread !== 'object') return;
+      rawThreads.push(Object.assign({}, thread, { id: String(id || thread.id || '') }));
+    });
+    return normalizeReviewThreads(rawThreads).sort(function(a, b) {
+      if (a.createdAt !== b.createdAt) return a.createdAt - b.createdAt;
+      return a.id.localeCompare(b.id);
+    });
+  }
+
+  function syncLiveReviewThreadsFromTab() {
+    if (!liveCollaboration || !liveCollaboration.reviewDoc || !liveCollaboration.reviewMap) return;
+    const tab = tabs.find(function(item) { return item.id === liveCollaboration.tabId; });
+    if (!tab || tab.id !== activeTabId) return;
+    replaceLiveReviewMapThreads(
+      liveCollaboration.reviewDoc,
+      liveCollaboration.reviewMap,
+      tab.reviewThreads,
+      LIVE_REVIEW_EDIT_ORIGIN
+    );
+  }
+
+  function applyLiveReviewThreadsFromMap() {
+    if (!liveCollaboration || !liveCollaboration.reviewMap || !liveCollaboration.tabId) return;
+    const tab = tabs.find(function(item) { return item.id === liveCollaboration.tabId; });
+    if (!tab) return;
+
+    tab.reviewThreads = getLiveReviewMapThreads(liveCollaboration.reviewMap);
+    saveTabsToStorage(tabs);
+    if (tab.id === activeTabId) {
+      decorateReviewTargets();
+      renderReviewPanel();
+    }
+  }
+
   function decodeReviewSource(value) {
     if (!value) return '';
     try {
@@ -3006,6 +3096,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   }
 
   function persistReviewThreads(message) {
+    syncLiveReviewThreadsFromTab();
     saveTabsToStorage(tabs);
     decorateReviewTargets();
     renderReviewPanel();
@@ -14647,6 +14738,20 @@ ${selector} .arrowheadPath {
       }
     }
 
+    function publishReviewState() {
+      if (!options.reviewDoc || (typeof options.canPublishReviewState === 'function' && !options.canPublishReviewState())) {
+        return;
+      }
+      try {
+        send({
+          type: 'review-sync-state',
+          update: encodeLiveBytes(options.Y.encodeStateAsUpdate(options.reviewDoc))
+        });
+      } catch (error) {
+        console.warn('Live Share review state publish failed:', error);
+      }
+    }
+
     function publishPresence(cursor) {
       send({
         type: 'presence',
@@ -14666,6 +14771,7 @@ ${selector} .arrowheadPath {
       if (!message || message.sender === options.participantId) return;
       options.onMessage(message, {
         publishCurrentState,
+        publishReviewState,
         publishPresence
       });
     }
@@ -14680,6 +14786,18 @@ ${selector} .arrowheadPath {
     };
     options.ydoc.on('update', updateHandler);
 
+    const reviewUpdateHandler = function(update, origin) {
+      if (destroyed || origin === LIVE_REVIEW_RELAY_ORIGIN) return;
+      if (typeof options.canSendReviewUpdate === 'function' && !options.canSendReviewUpdate()) return;
+      send({
+        type: 'review-update',
+        update: encodeLiveBytes(update)
+      });
+    };
+    if (options.reviewDoc) {
+      options.reviewDoc.on('update', reviewUpdateHandler);
+    }
+
     try {
       socket = new WebSocket(socketUrl);
     } catch (error) {
@@ -14696,8 +14814,10 @@ ${selector} .arrowheadPath {
         participant: Object.assign({}, options.getParticipant(), { lastSeen: Date.now() })
       });
       send({ type: 'sync-request' });
+      send({ type: 'review-sync-request' });
       flushPendingMessages();
       setTimeout(publishCurrentState, 100);
+      setTimeout(publishReviewState, 125);
       setTimeout(function() { publishPresence(options.getCursor()); }, 150);
     });
 
@@ -14715,12 +14835,16 @@ ${selector} .arrowheadPath {
     return {
       send,
       publishCurrentState,
+      publishReviewState,
       publishPresence,
       destroy() {
         destroyed = true;
         try {
           options.ydoc.off('update', updateHandler);
         } catch (_) {}
+        try {
+          if (options.reviewDoc) options.reviewDoc.off('update', reviewUpdateHandler);
+        } catch (_) {}
         try {
           if (socket && socket.readyState === WebSocket.OPEN) {
             socket.send(JSON.stringify({
@@ -14989,6 +15113,7 @@ ${selector} .arrowheadPath {
     applyLiveSessionTitle(liveCollaboration.roomTitle);
     updateLiveAccessDisplay();
     updateLiveEditorAccess();
+    applyLiveReviewThreadsFromMap();
     return true;
   }
 
@@ -15561,6 +15686,11 @@ ${selector} .arrowheadPath {
       return;
     }
 
+    if (message.type === 'review-sync-request') {
+      if (liveCollaboration.isHost) transport.publishReviewState();
+      return;
+    }
+
     if ((message.type === 'y-update' || message.type === 'sync-state') && message.update) {
       const hostParticipantId = liveCollaboration.sessionMap ? liveCollaboration.sessionMap.get('hostId') : null;
       if (getCurrentLiveAccessMode() === LIVE_SHARE_ACCESS_VIEW && hostParticipantId && sender !== hostParticipantId) {
@@ -15575,6 +15705,19 @@ ${selector} .arrowheadPath {
       return;
     }
 
+    if ((message.type === 'review-update' || message.type === 'review-sync-state') && message.update) {
+      try {
+        liveCollaboration.Y.applyUpdate(
+          liveCollaboration.reviewDoc,
+          decodeLiveBytes(message.update),
+          LIVE_REVIEW_RELAY_ORIGIN
+        );
+      } catch (error) {
+        console.warn('Live Share review update failed:', error);
+      }
+      return;
+    }
+
     if (message.type === 'hello' || message.type === 'presence') {
       const participant = message.participant || {};
       const name = participant.name || 'Guest';
@@ -15634,12 +15777,18 @@ ${selector} .arrowheadPath {
       if (liveCollaboration.sessionMap && liveCollaboration.sessionObserver) {
         liveCollaboration.sessionMap.unobserve(liveCollaboration.sessionObserver);
       }
+      if (liveCollaboration.reviewMap && liveCollaboration.reviewObserver) {
+        liveCollaboration.reviewMap.unobserve(liveCollaboration.reviewObserver);
+      }
       if (liveCollaboration.connection && typeof liveCollaboration.connection.destroy === 'function') {
         liveCollaboration.connection.destroy();
       }
       if (liveCollaboration.ydoc && typeof liveCollaboration.ydoc.destroy === 'function') {
         liveCollaboration.ydoc.destroy();
       }
+      if (liveCollaboration.reviewDoc && typeof liveCollaboration.reviewDoc.destroy === 'function') {
+        liveCollaboration.reviewDoc.destroy();
+      }
     } catch (error) {
       console.warn('Failed to fully close live session:', error);
     }
@@ -15709,7 +15858,17 @@ ${selector} .arrowheadPath {
     const ydoc = new modules.Y.Doc();
     const yText = ydoc.getText('markdown');
     const sessionMap = ydoc.getMap('session');
+    const reviewDoc = new modules.Y.Doc();
+    const reviewMap = reviewDoc.getMap('reviewThreads');
     const hostActiveTab = tabs.find(function(t) { return t.id === activeTabId; });
+    if (isHost && hostActiveTab) {
+      replaceLiveReviewMapThreads(
+        reviewDoc,
+        reviewMap,
+        hostActiveTab.reviewThreads,
+        LIVE_REVIEW_EDIT_ORIGIN
+      );
+    }
     const requestedTitle = options.title || (hostActiveTab && hostActiveTab.title) || 'Live Share';
     const hostTitle = getSafeLiveTitle(requestedTitle);
     if (!isHost && options.initialUpdate) {
@@ -15794,6 +15953,8 @@ ${selector} .arrowheadPath {
       Y: modules.Y,
       yText,
       sessionMap,
+      reviewDoc,
+      reviewMap,
       tabId: liveTabId,
       originalTabSnapshot,
       returnTabId,
@@ -15811,6 +15972,7 @@ ${selector} .arrowheadPath {
       lastMarkdown: shouldDeferParticipantTab ? '' : markdownEditor.value,
       observer: null,
       sessionObserver: null,
+      reviewObserver: null,
       participantHeartbeatId: null,
       connection: null,
       participants,
@@ -15857,6 +16019,15 @@ ${selector} .arrowheadPath {
     };
     sessionMap.observe(liveCollaboration.sessionObserver);
 
+    liveCollaboration.reviewObserver = function(event, transaction) {
+      const origin = transaction
+        ? transaction.origin
+        : (event && event.transaction ? event.transaction.origin : null);
+      if (origin === LIVE_REVIEW_EDIT_ORIGIN) return;
+      applyLiveReviewThreadsFromMap();
+    };
+    reviewMap.observe(liveCollaboration.reviewObserver);
+
     if (!isHost && yText.length > 0) {
       const seededMarkdown = yText.toString();
       applyLiveJoinSeedMarkdown(seededMarkdown);
@@ -15885,6 +16056,7 @@ ${selector} .arrowheadPath {
       capability: liveCollaboration.socketCapability,
       capabilities: liveCollaboration.isHost ? liveCollaboration.capabilities : null,
       ydoc,
+      reviewDoc,
       Y: modules.Y,
       participantId: liveCollaboration.localParticipantId,
       getParticipant: function() { return liveCollaboration.localParticipant; },
@@ -15904,6 +16076,19 @@ ${selector} .arrowheadPath {
           (liveCollaboration.isHost || getCurrentLiveAccessMode() === LIVE_SHARE_ACCESS_EDIT)
         );
       },
+      canPublishReviewState: function() {
+        return Boolean(
+          liveCollaboration &&
+          liveCollaboration.reviewDoc === reviewDoc &&
+          liveCollaboration.isHost
+        );
+      },
+      canSendReviewUpdate: function() {
+        return Boolean(
+          liveCollaboration &&
+          liveCollaboration.reviewDoc === reviewDoc
+        );
+      },
       onStatus: setLiveShareStatus,
       onMessage: handleLiveRoomMessage
     });
diff --git a/script.js b/script.js
index b60fd755..c17b3311 100644
--- a/script.js
+++ b/script.js
@@ -2418,6 +2418,8 @@ document.addEventListener("DOMContentLoaded", async function () {
   let liveCollaborationModulesPromise = null;
   const LIVE_EDIT_ORIGIN = Symbol("markdown-viewer-live-local-edit");
   const LIVE_RELAY_ORIGIN = Symbol("markdown-viewer-live-relay");
+  const LIVE_REVIEW_EDIT_ORIGIN = Symbol("markdown-viewer-live-review-local-edit");
+  const LIVE_REVIEW_RELAY_ORIGIN = Symbol("markdown-viewer-live-review-relay");
 
   // ========================================
   // COMMENTS & SUGGESTIONS
@@ -2474,6 +2476,94 @@ document.addEventListener("DOMContentLoaded", async function () {
     return tab.reviewThreads;
   }
 
+  function cloneReviewThreadForLiveShare(thread) {
+    return {
+      id: thread.id,
+      anchor: Object.assign({}, thread.anchor),
+      kind: thread.kind,
+      body: thread.body,
+      createdAt: thread.createdAt,
+      updatedAt: thread.updatedAt,
+      resolved: thread.resolved === true
+    };
+  }
+
+  function liveReviewThreadsMatch(left, right) {
+    if (!left || !right) return false;
+    const leftAnchor = left.anchor || {};
+    const rightAnchor = right.anchor || {};
+    return left.id === right.id &&
+      left.kind === right.kind &&
+      left.body === right.body &&
+      left.createdAt === right.createdAt &&
+      left.updatedAt === right.updatedAt &&
+      left.resolved === right.resolved &&
+      leftAnchor.key === rightAnchor.key &&
+      leftAnchor.type === rightAnchor.type &&
+      leftAnchor.label === rightAnchor.label &&
+      leftAnchor.excerpt === rightAnchor.excerpt &&
+      leftAnchor.duplicateCount === rightAnchor.duplicateCount &&
+      leftAnchor.context === rightAnchor.context;
+  }
+
+  function replaceLiveReviewMapThreads(reviewDoc, reviewMap, rawThreads, origin) {
+    if (!reviewDoc || !reviewMap) return;
+    const threads = normalizeReviewThreads(rawThreads);
+    const nextIds = new Set(threads.map(function(thread) { return thread.id; }));
+    const staleIds = [];
+    reviewMap.forEach(function(_, id) {
+      if (!nextIds.has(id)) staleIds.push(id);
+    });
+
+    reviewDoc.transact(function() {
+      staleIds.forEach(function(id) { reviewMap.delete(id); });
+      threads.forEach(function(thread) {
+        const nextThread = cloneReviewThreadForLiveShare(thread);
+        if (!liveReviewThreadsMatch(reviewMap.get(thread.id), nextThread)) {
+          reviewMap.set(thread.id, nextThread);
+        }
+      });
+    }, origin);
+  }
+
+  function getLiveReviewMapThreads(reviewMap) {
+    const rawThreads = [];
+    if (!reviewMap) return rawThreads;
+    reviewMap.forEach(function(thread, id) {
+      if (!thread || typeof thread !== 'object') return;
+      rawThreads.push(Object.assign({}, thread, { id: String(id || thread.id || '') }));
+    });
+    return normalizeReviewThreads(rawThreads).sort(function(a, b) {
+      if (a.createdAt !== b.createdAt) return a.createdAt - b.createdAt;
+      return a.id.localeCompare(b.id);
+    });
+  }
+
+  function syncLiveReviewThreadsFromTab() {
+    if (!liveCollaboration || !liveCollaboration.reviewDoc || !liveCollaboration.reviewMap) return;
+    const tab = tabs.find(function(item) { return item.id === liveCollaboration.tabId; });
+    if (!tab || tab.id !== activeTabId) return;
+    replaceLiveReviewMapThreads(
+      liveCollaboration.reviewDoc,
+      liveCollaboration.reviewMap,
+      tab.reviewThreads,
+      LIVE_REVIEW_EDIT_ORIGIN
+    );
+  }
+
+  function applyLiveReviewThreadsFromMap() {
+    if (!liveCollaboration || !liveCollaboration.reviewMap || !liveCollaboration.tabId) return;
+    const tab = tabs.find(function(item) { return item.id === liveCollaboration.tabId; });
+    if (!tab) return;
+
+    tab.reviewThreads = getLiveReviewMapThreads(liveCollaboration.reviewMap);
+    saveTabsToStorage(tabs);
+    if (tab.id === activeTabId) {
+      decorateReviewTargets();
+      renderReviewPanel();
+    }
+  }
+
   function decodeReviewSource(value) {
     if (!value) return '';
     try {
@@ -3006,6 +3096,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   }
 
   function persistReviewThreads(message) {
+    syncLiveReviewThreadsFromTab();
     saveTabsToStorage(tabs);
     decorateReviewTargets();
     renderReviewPanel();
@@ -14647,6 +14738,20 @@ ${selector} .arrowheadPath {
       }
     }
 
+    function publishReviewState() {
+      if (!options.reviewDoc || (typeof options.canPublishReviewState === 'function' && !options.canPublishReviewState())) {
+        return;
+      }
+      try {
+        send({
+          type: 'review-sync-state',
+          update: encodeLiveBytes(options.Y.encodeStateAsUpdate(options.reviewDoc))
+        });
+      } catch (error) {
+        console.warn('Live Share review state publish failed:', error);
+      }
+    }
+
     function publishPresence(cursor) {
       send({
         type: 'presence',
@@ -14666,6 +14771,7 @@ ${selector} .arrowheadPath {
       if (!message || message.sender === options.participantId) return;
       options.onMessage(message, {
         publishCurrentState,
+        publishReviewState,
         publishPresence
       });
     }
@@ -14680,6 +14786,18 @@ ${selector} .arrowheadPath {
     };
     options.ydoc.on('update', updateHandler);
 
+    const reviewUpdateHandler = function(update, origin) {
+      if (destroyed || origin === LIVE_REVIEW_RELAY_ORIGIN) return;
+      if (typeof options.canSendReviewUpdate === 'function' && !options.canSendReviewUpdate()) return;
+      send({
+        type: 'review-update',
+        update: encodeLiveBytes(update)
+      });
+    };
+    if (options.reviewDoc) {
+      options.reviewDoc.on('update', reviewUpdateHandler);
+    }
+
     try {
       socket = new WebSocket(socketUrl);
     } catch (error) {
@@ -14696,8 +14814,10 @@ ${selector} .arrowheadPath {
         participant: Object.assign({}, options.getParticipant(), { lastSeen: Date.now() })
       });
       send({ type: 'sync-request' });
+      send({ type: 'review-sync-request' });
       flushPendingMessages();
       setTimeout(publishCurrentState, 100);
+      setTimeout(publishReviewState, 125);
       setTimeout(function() { publishPresence(options.getCursor()); }, 150);
     });
 
@@ -14715,12 +14835,16 @@ ${selector} .arrowheadPath {
     return {
       send,
       publishCurrentState,
+      publishReviewState,
       publishPresence,
       destroy() {
         destroyed = true;
         try {
           options.ydoc.off('update', updateHandler);
         } catch (_) {}
+        try {
+          if (options.reviewDoc) options.reviewDoc.off('update', reviewUpdateHandler);
+        } catch (_) {}
         try {
           if (socket && socket.readyState === WebSocket.OPEN) {
             socket.send(JSON.stringify({
@@ -14989,6 +15113,7 @@ ${selector} .arrowheadPath {
     applyLiveSessionTitle(liveCollaboration.roomTitle);
     updateLiveAccessDisplay();
     updateLiveEditorAccess();
+    applyLiveReviewThreadsFromMap();
     return true;
   }
 
@@ -15561,6 +15686,11 @@ ${selector} .arrowheadPath {
       return;
     }
 
+    if (message.type === 'review-sync-request') {
+      if (liveCollaboration.isHost) transport.publishReviewState();
+      return;
+    }
+
     if ((message.type === 'y-update' || message.type === 'sync-state') && message.update) {
       const hostParticipantId = liveCollaboration.sessionMap ? liveCollaboration.sessionMap.get('hostId') : null;
       if (getCurrentLiveAccessMode() === LIVE_SHARE_ACCESS_VIEW && hostParticipantId && sender !== hostParticipantId) {
@@ -15575,6 +15705,19 @@ ${selector} .arrowheadPath {
       return;
     }
 
+    if ((message.type === 'review-update' || message.type === 'review-sync-state') && message.update) {
+      try {
+        liveCollaboration.Y.applyUpdate(
+          liveCollaboration.reviewDoc,
+          decodeLiveBytes(message.update),
+          LIVE_REVIEW_RELAY_ORIGIN
+        );
+      } catch (error) {
+        console.warn('Live Share review update failed:', error);
+      }
+      return;
+    }
+
     if (message.type === 'hello' || message.type === 'presence') {
       const participant = message.participant || {};
       const name = participant.name || 'Guest';
@@ -15634,12 +15777,18 @@ ${selector} .arrowheadPath {
       if (liveCollaboration.sessionMap && liveCollaboration.sessionObserver) {
         liveCollaboration.sessionMap.unobserve(liveCollaboration.sessionObserver);
       }
+      if (liveCollaboration.reviewMap && liveCollaboration.reviewObserver) {
+        liveCollaboration.reviewMap.unobserve(liveCollaboration.reviewObserver);
+      }
       if (liveCollaboration.connection && typeof liveCollaboration.connection.destroy === 'function') {
         liveCollaboration.connection.destroy();
       }
       if (liveCollaboration.ydoc && typeof liveCollaboration.ydoc.destroy === 'function') {
         liveCollaboration.ydoc.destroy();
       }
+      if (liveCollaboration.reviewDoc && typeof liveCollaboration.reviewDoc.destroy === 'function') {
+        liveCollaboration.reviewDoc.destroy();
+      }
     } catch (error) {
       console.warn('Failed to fully close live session:', error);
     }
@@ -15709,7 +15858,17 @@ ${selector} .arrowheadPath {
     const ydoc = new modules.Y.Doc();
     const yText = ydoc.getText('markdown');
     const sessionMap = ydoc.getMap('session');
+    const reviewDoc = new modules.Y.Doc();
+    const reviewMap = reviewDoc.getMap('reviewThreads');
     const hostActiveTab = tabs.find(function(t) { return t.id === activeTabId; });
+    if (isHost && hostActiveTab) {
+      replaceLiveReviewMapThreads(
+        reviewDoc,
+        reviewMap,
+        hostActiveTab.reviewThreads,
+        LIVE_REVIEW_EDIT_ORIGIN
+      );
+    }
     const requestedTitle = options.title || (hostActiveTab && hostActiveTab.title) || 'Live Share';
     const hostTitle = getSafeLiveTitle(requestedTitle);
     if (!isHost && options.initialUpdate) {
@@ -15794,6 +15953,8 @@ ${selector} .arrowheadPath {
       Y: modules.Y,
       yText,
       sessionMap,
+      reviewDoc,
+      reviewMap,
       tabId: liveTabId,
       originalTabSnapshot,
       returnTabId,
@@ -15811,6 +15972,7 @@ ${selector} .arrowheadPath {
       lastMarkdown: shouldDeferParticipantTab ? '' : markdownEditor.value,
       observer: null,
       sessionObserver: null,
+      reviewObserver: null,
       participantHeartbeatId: null,
       connection: null,
       participants,
@@ -15857,6 +16019,15 @@ ${selector} .arrowheadPath {
     };
     sessionMap.observe(liveCollaboration.sessionObserver);
 
+    liveCollaboration.reviewObserver = function(event, transaction) {
+      const origin = transaction
+        ? transaction.origin
+        : (event && event.transaction ? event.transaction.origin : null);
+      if (origin === LIVE_REVIEW_EDIT_ORIGIN) return;
+      applyLiveReviewThreadsFromMap();
+    };
+    reviewMap.observe(liveCollaboration.reviewObserver);
+
     if (!isHost && yText.length > 0) {
       const seededMarkdown = yText.toString();
       applyLiveJoinSeedMarkdown(seededMarkdown);
@@ -15885,6 +16056,7 @@ ${selector} .arrowheadPath {
       capability: liveCollaboration.socketCapability,
       capabilities: liveCollaboration.isHost ? liveCollaboration.capabilities : null,
       ydoc,
+      reviewDoc,
       Y: modules.Y,
       participantId: liveCollaboration.localParticipantId,
       getParticipant: function() { return liveCollaboration.localParticipant; },
@@ -15904,6 +16076,19 @@ ${selector} .arrowheadPath {
           (liveCollaboration.isHost || getCurrentLiveAccessMode() === LIVE_SHARE_ACCESS_EDIT)
         );
       },
+      canPublishReviewState: function() {
+        return Boolean(
+          liveCollaboration &&
+          liveCollaboration.reviewDoc === reviewDoc &&
+          liveCollaboration.isHost
+        );
+      },
+      canSendReviewUpdate: function() {
+        return Boolean(
+          liveCollaboration &&
+          liveCollaboration.reviewDoc === reviewDoc
+        );
+      },
       onStatus: setLiveShareStatus,
       onMessage: handleLiveRoomMessage
     });
diff --git a/wiki/FAQ.md b/wiki/FAQ.md
index 5c4b09a8..17fc5160 100644
--- a/wiki/FAQ.md
+++ b/wiki/FAQ.md
@@ -50,7 +50,7 @@ Small snapshots keep compressed content inside the URL hash. Large snapshots use
 
 ### Is Live Share saved permanently?
 
-No. Live Share uses a temporary Cloudflare Durable Object room as a relay. It does not write the live document to KV or a database. While active, the room relays document updates, display names, presence, cursors, sync messages, leave messages, and session-end messages.
+No. Live Share uses a temporary Cloudflare Durable Object room as a relay. It does not write the live document to KV or a database. While active, the room relays document updates, review comments and suggestions, display names, presence, cursors, sync messages, leave messages, and session-end messages.
 
 ### Is Live Share end-to-end encrypted?
 
diff --git a/wiki/Features.md b/wiki/Features.md
index 50e80281..4f1f6d80 100644
--- a/wiki/Features.md
+++ b/wiki/Features.md
@@ -72,11 +72,12 @@ Anchoring and lifecycle:
 - Private mode and Clear local data cover review threads because they use the same document storage as the Markdown tab.
 - Review pins, outlines, the review panel, and thread content are excluded from Markdown, HTML, PDF, PNG, and browser-print output.
 
-Sharing limits:
+Sharing behavior:
 
-- Review threads are local-only and are not encoded into Share Snapshot URLs, stored snapshot payloads, or Live Share Yjs updates.
-- Review feedback added to a temporary Share Snapshot or Live Share tab is kept only for that tab's current session.
-- Use Copy review summary to transfer feedback outside the local workspace.
+- Review threads are not encoded into Share Snapshot URLs or stored snapshot payloads.
+- Live Share synchronizes review creation, resolve/reopen state, and deletion through a separate Yjs document. View-only participants can send Review updates without permission to edit Markdown.
+- A participant's temporary live tab is removed on leave; synchronized feedback remains in the host's normal tab and in the active room state.
+- Use Copy review summary to transfer feedback outside the app or after a Live Share session.
 
 ## Editing and Formatting Tools
 
@@ -340,12 +341,12 @@ User flow:
 
 Implementation:
 
-- The client uses Yjs for the shared document state.
+- The client uses separate Yjs documents for Markdown/session state and Review threads.
 - Browser clients connect with WebSocket to `/live-room/<room-id>?secret=<secret>`.
 - The Pages Function and Durable Object reject unsupported WebSocket `Origin` values. The production app, HTTPS `*.markdownviewer.pages.dev` previews, `null`, and localhost development origins are allowed.
 - The host connection establishes separate host, edit, and view capabilities. The Durable Object stores these capabilities and authenticates each joining role server-side.
 - Cloudflare Pages routes the WebSocket to a Durable Object named `LIVE_ROOMS`.
-- The Durable Object relays only known message types and filters them by role: viewers cannot send updates or session-end messages, editors can send document sync messages, and only the host can send every supported type.
+- The Durable Object relays only known message types and filters them by role: viewers cannot send Markdown updates or session-end messages, but they can request and send Review updates; editors can send Markdown and Review updates; only the host can publish full Review state or send every supported type.
 - The Durable Object does not write document state to KV or a database.
 - Room identity is derived from room id plus secret.
 
@@ -504,7 +505,7 @@ Security limitations:
 | :--- | :--- | :--- | :--- |
 | Typing and local preview | No | Browser memory and saved tabs | Sanitized before preview insertion. |
 | Normal tab autosave | No | `localStorage` or desktop storage mirror | Cleared with site/app data or Reset. |
-| Comments and suggestions | No | Inside normal saved tabs | Local-only review data; excluded from document exports and not synced by Share Snapshot or Live Share. |
+| Comments and suggestions | Only during Live Share | Normal saved tabs plus temporary Live Share relay state | Excluded from document exports and Share Snapshot; synchronized between active Live Share participants. |
 | Private mode | No | No document-state persistence | Clears existing document state when enabled and prevents normal document-state writes until disabled. |
 | Local file import | No | Current tab/workspace | Reads selected files only. |
 | Markdown/HTML/PDF/PNG export | No, except remote assets already referenced | User download location | Browser may request external images/fonts used by content. |
diff --git a/wiki/Live-Share-Cloudflare.md b/wiki/Live-Share-Cloudflare.md
index b16bf3e1..d27ce999 100644
--- a/wiki/Live-Share-Cloudflare.md
+++ b/wiki/Live-Share-Cloudflare.md
@@ -8,7 +8,7 @@ Live Share is the temporary Markdown collaboration feature in Markdown Viewer. I
 2. The host enters or accepts a display name.
 3. The host chooses Can edit or View only.
 4. The app creates a random room id and a random room secret.
-5. The app creates a Yjs document for the active tab.
+5. The app creates separate Yjs documents for Markdown/session state and Review threads.
 6. The host opens a WebSocket to `/live-room/<room-id>?secret=<secret>`.
 7. The host connection establishes separate host, edit, and view capabilities before the invite link is shown.
 8. The invite link includes the selected role and capability for the recipient. Participants open it, join a temporary live tab, request the current Yjs state, and render participant avatars/cursors.
@@ -38,8 +38,8 @@ The Durable Object:
 - Accepts the WebSocket pair.
 - Authenticates the host capability when the room is first created and checks edit/view capabilities against the stored room credentials for later connections.
 - Assigns a temporary socket participant id.
-- Relays only known message types: `hello`, `presence`, `sync-request`, `sync-state`, `y-update`, `leave`, and `session-end`.
-- Filters messages by role: viewers can send presence/sync requests but not document updates or session-end; editors can send document sync messages; only the host can send every supported message type.
+- Relays only known message types: `hello`, `presence`, `sync-request`, `sync-state`, `y-update`, `review-sync-request`, `review-sync-state`, `review-update`, `leave`, and `session-end`.
+- Filters messages by role: viewers can send presence, sync requests, and Review updates but not Markdown updates or session-end; editors can send Markdown and Review updates; only the host can publish full Review state and every supported message type.
 - Adds `roomId` and `sentAt` to normalized messages.
 - Broadcasts messages to other sockets in the same room.
 - Broadcasts `leave` when a socket closes or errors.
diff --git a/wiki/Usage-Guide.md b/wiki/Usage-Guide.md
index ec2eb7fb..3b76fcfb 100644
--- a/wiki/Usage-Guide.md
+++ b/wiki/Usage-Guide.md
@@ -55,7 +55,7 @@ Use Review when you want to leave structured feedback without editing the Markdo
 
 Review threads are stored with the normal local document tab and survive reloads. They are not inserted into Markdown and are excluded from Markdown, HTML, PDF, PNG, and print output. If the reviewed source block changes, its thread remains in the panel as an unanchored item instead of moving to a different block. Duplicating a tab starts the copy without review threads.
 
-Review data is local-only. Share Snapshot links and Live Share rooms currently transfer Markdown, not review threads. Feedback created on a temporary shared or live tab lasts only for that tab's current session. Copy the review summary when you need to send feedback to an author. Private mode prevents review threads from being persisted along with the rest of the document workspace.
+Share Snapshot links transfer Markdown without review threads. Live Share rooms synchronize comments, suggestions, resolve/reopen state, and deletions through a separate Review channel. View-only participants can review without receiving Markdown edit permission. A participant's temporary live tab is removed when they leave, while synchronized feedback remains in the host's normal document tab. Private mode prevents review threads from being persisted with the local workspace.
 
 ## Find and Replace
 
@@ -139,7 +139,7 @@ Use Live Share when you want a temporary real-time room.
 4. Start the session.
 5. Copy the invite link after the room starts.
 
-Live Share sends real-time Yjs updates through a Cloudflare Durable Object. It does not store the document in KV or a database. The invite URL contains a room id, room secret, access role/capability, and title, not the full document body. The server authenticates host, editable, and view-only capabilities and filters message types by role.
+Live Share sends real-time Yjs updates through a Cloudflare Durable Object. It does not store the document in KV or a database. The invite URL contains a room id, room secret, access role/capability, and title, not the full document body. The server authenticates host, editable, and view-only capabilities and filters message types by role. Markdown and Review data use separate Yjs documents, so view-only participants can synchronize comments and suggestions without being allowed to edit Markdown.
 
 Participants get a temporary live tab, presence avatars, and live cursor indicators. The host can end the session for everyone. Rooms are limited to 64 WebSocket participants and 1 MB live messages.
 
diff --git a/workers/live-room-worker.js b/workers/live-room-worker.js
index 6e088eb9..b69677a2 100644
--- a/workers/live-room-worker.js
+++ b/workers/live-room-worker.js
@@ -69,6 +69,8 @@ function canSendMessageType(role, type) {
       "sync-request",
       "sync-state",
       "y-update",
+      "review-sync-request",
+      "review-update",
       "leave"
     ]).has(type);
   }
@@ -76,6 +78,8 @@ function canSendMessageType(role, type) {
     "hello",
     "presence",
     "sync-request",
+    "review-sync-request",
+    "review-update",
     "leave"
   ]).has(type);
 }
@@ -94,6 +98,9 @@ function normalizeOutboundMessage(message, fallbackSender, roomId, role) {
     "sync-request",
     "sync-state",
     "y-update",
+    "review-sync-request",
+    "review-sync-state",
+    "review-update",
     "leave",
     "session-end"
   ]);

From 504641ac3775a46a4ea2d431eeda6e12cdf51338 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Mon, 13 Jul 2026 18:11:40 +0530
Subject: [PATCH 08/18] feat(reset): improve all-files confirmation

---
 desktop-app/resources/index.html   | 16 +++++++++++-----
 desktop-app/resources/js/script.js | 22 ++++++++++++++++++++--
 index.html                         | 16 +++++++++++-----
 script.js                          | 22 ++++++++++++++++++++--
 4 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index 06b03b17..f842abdc 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -348,12 +348,18 @@ <h2 class="h5 m-0">Menu</h2>
         </div>
 
         <!-- Reset Confirmation Modal -->
-        <div id="reset-confirm-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="reset-modal-title" aria-hidden="true" style="display:none;">
-          <div class="reset-modal-box reset-modal-box--wide">
-            <p id="reset-modal-title" class="reset-modal-message">Are you sure you want to delete all files?</p>
+        <div id="reset-confirm-modal" class="reset-modal-overlay modal-overlay" role="dialog" aria-modal="true" aria-labelledby="reset-modal-title" aria-describedby="reset-modal-description" aria-hidden="true" style="display:none;">
+          <div class="reset-modal-box modal-box">
+            <div class="modal-header">
+              <p id="reset-modal-title" class="reset-modal-message">Reset all files?</p>
+              <button type="button" class="modal-close-btn" id="reset-modal-close" aria-label="Close reset confirmation dialog">
+                <i class="bi bi-x-lg" aria-hidden="true"></i>
+              </button>
+            </div>
+            <p id="reset-modal-description" class="modal-subtext">Open files, locally stored content, and review items will be removed from Markdown Viewer. Files saved or exported to your device will not be deleted.</p>
             <div class="reset-modal-actions">
-              <button class="reset-modal-btn reset-modal-cancel" id="reset-modal-cancel">Cancel</button>
-              <button class="reset-modal-btn reset-modal-confirm" id="reset-modal-confirm">Delete All</button>
+              <button type="button" class="reset-modal-btn reset-modal-cancel" id="reset-modal-cancel">Cancel</button>
+              <button type="button" class="reset-modal-btn reset-modal-confirm" id="reset-modal-confirm">Reset all</button>
             </div>
           </div>
         </div>
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index c17b3311..24149251 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -4213,7 +4213,20 @@ document.addEventListener("DOMContentLoaded", async function () {
     const modal = document.getElementById('reset-confirm-modal');
     const confirmBtn = document.getElementById('reset-modal-confirm');
     const cancelBtn = document.getElementById('reset-modal-cancel');
-    if (!modal) return;
+    const closeBtn = document.getElementById('reset-modal-close');
+    const description = document.getElementById('reset-modal-description');
+    if (!modal || !confirmBtn || !cancelBtn) return;
+
+    const fileCount = tabs.length;
+    const reviewCount = tabs.reduce(function(total, tab) {
+      return total + (Array.isArray(tab.reviewThreads) ? tab.reviewThreads.length : 0);
+    }, 0);
+    if (description) {
+      const fileSummary = fileCount + ' open file' + (fileCount === 1 ? '' : 's');
+      const reviewSummary = reviewCount + ' review item' + (reviewCount === 1 ? '' : 's');
+      const reviewDetails = reviewCount > 0 ? ' and ' + reviewSummary : '';
+      description.textContent = 'Reset will remove ' + fileSummary + ' from Markdown Viewer and permanently clear their locally stored content' + reviewDetails + '. Files saved or exported to your device will not be deleted. Any active Live Share session will end, and a fresh Welcome to Markdown file will be created. Export unsaved work before continuing.';
+    }
 
     function doReset() {
       closeAppModal(modal);
@@ -4248,15 +4261,20 @@ document.addEventListener("DOMContentLoaded", async function () {
     function cleanup() {
       confirmBtn.removeEventListener('click', doReset);
       cancelBtn.removeEventListener('click', doCancel);
+      if (closeBtn) closeBtn.removeEventListener('click', doCancel);
     }
 
     confirmBtn.addEventListener('click', doReset);
     cancelBtn.addEventListener('click', doCancel);
+    if (closeBtn) closeBtn.addEventListener('click', doCancel);
 
     openAppModal(modal, {
-      focusTarget: confirmBtn,
+      focusTarget: cancelBtn,
       onClose: doCancel
     });
+    window.setTimeout(function() {
+      cancelBtn.focus();
+    }, 0);
   }
 
   function initTabs() {
diff --git a/index.html b/index.html
index e2a23e21..dd512696 100644
--- a/index.html
+++ b/index.html
@@ -441,12 +441,18 @@ <h2 class="h5 m-0">Menu</h2>
         </div>
 
         <!-- Reset Confirmation Modal -->
-        <div id="reset-confirm-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="reset-modal-title" aria-hidden="true" style="display:none;">
-          <div class="reset-modal-box reset-modal-box--wide">
-            <p id="reset-modal-title" class="reset-modal-message">Are you sure you want to delete all files?</p>
+        <div id="reset-confirm-modal" class="reset-modal-overlay modal-overlay" role="dialog" aria-modal="true" aria-labelledby="reset-modal-title" aria-describedby="reset-modal-description" aria-hidden="true" style="display:none;">
+          <div class="reset-modal-box modal-box">
+            <div class="modal-header">
+              <p id="reset-modal-title" class="reset-modal-message">Reset all files?</p>
+              <button type="button" class="modal-close-btn" id="reset-modal-close" aria-label="Close reset confirmation dialog">
+                <i class="bi bi-x-lg" aria-hidden="true"></i>
+              </button>
+            </div>
+            <p id="reset-modal-description" class="modal-subtext">Open files, locally stored content, and review items will be removed from Markdown Viewer. Files saved or exported to your device will not be deleted.</p>
             <div class="reset-modal-actions">
-              <button class="reset-modal-btn reset-modal-cancel" id="reset-modal-cancel">Cancel</button>
-              <button class="reset-modal-btn reset-modal-confirm" id="reset-modal-confirm">Delete All</button>
+              <button type="button" class="reset-modal-btn reset-modal-cancel" id="reset-modal-cancel">Cancel</button>
+              <button type="button" class="reset-modal-btn reset-modal-confirm" id="reset-modal-confirm">Reset all</button>
             </div>
           </div>
         </div>
diff --git a/script.js b/script.js
index c17b3311..24149251 100644
--- a/script.js
+++ b/script.js
@@ -4213,7 +4213,20 @@ document.addEventListener("DOMContentLoaded", async function () {
     const modal = document.getElementById('reset-confirm-modal');
     const confirmBtn = document.getElementById('reset-modal-confirm');
     const cancelBtn = document.getElementById('reset-modal-cancel');
-    if (!modal) return;
+    const closeBtn = document.getElementById('reset-modal-close');
+    const description = document.getElementById('reset-modal-description');
+    if (!modal || !confirmBtn || !cancelBtn) return;
+
+    const fileCount = tabs.length;
+    const reviewCount = tabs.reduce(function(total, tab) {
+      return total + (Array.isArray(tab.reviewThreads) ? tab.reviewThreads.length : 0);
+    }, 0);
+    if (description) {
+      const fileSummary = fileCount + ' open file' + (fileCount === 1 ? '' : 's');
+      const reviewSummary = reviewCount + ' review item' + (reviewCount === 1 ? '' : 's');
+      const reviewDetails = reviewCount > 0 ? ' and ' + reviewSummary : '';
+      description.textContent = 'Reset will remove ' + fileSummary + ' from Markdown Viewer and permanently clear their locally stored content' + reviewDetails + '. Files saved or exported to your device will not be deleted. Any active Live Share session will end, and a fresh Welcome to Markdown file will be created. Export unsaved work before continuing.';
+    }
 
     function doReset() {
       closeAppModal(modal);
@@ -4248,15 +4261,20 @@ document.addEventListener("DOMContentLoaded", async function () {
     function cleanup() {
       confirmBtn.removeEventListener('click', doReset);
       cancelBtn.removeEventListener('click', doCancel);
+      if (closeBtn) closeBtn.removeEventListener('click', doCancel);
     }
 
     confirmBtn.addEventListener('click', doReset);
     cancelBtn.addEventListener('click', doCancel);
+    if (closeBtn) closeBtn.addEventListener('click', doCancel);
 
     openAppModal(modal, {
-      focusTarget: confirmBtn,
+      focusTarget: cancelBtn,
       onClose: doCancel
     });
+    window.setTimeout(function() {
+      cancelBtn.focus();
+    }, 0);
   }
 
   function initTabs() {

From 3375909ec5345356e8297d7f4e1a1c724f542888 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Mon, 13 Jul 2026 18:15:59 +0530
Subject: [PATCH 09/18] style(reset): shorten confirmation copy

---
 desktop-app/resources/index.html   | 2 +-
 desktop-app/resources/js/script.js | 2 +-
 index.html                         | 2 +-
 script.js                          | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index f842abdc..c1260253 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -356,7 +356,7 @@ <h2 class="h5 m-0">Menu</h2>
                 <i class="bi bi-x-lg" aria-hidden="true"></i>
               </button>
             </div>
-            <p id="reset-modal-description" class="modal-subtext">Open files, locally stored content, and review items will be removed from Markdown Viewer. Files saved or exported to your device will not be deleted.</p>
+            <p id="reset-modal-description" class="modal-subtext">This will remove all open files and review items. Unsaved changes cannot be recovered.</p>
             <div class="reset-modal-actions">
               <button type="button" class="reset-modal-btn reset-modal-cancel" id="reset-modal-cancel">Cancel</button>
               <button type="button" class="reset-modal-btn reset-modal-confirm" id="reset-modal-confirm">Reset all</button>
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index 24149251..bacc0f23 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -4225,7 +4225,7 @@ document.addEventListener("DOMContentLoaded", async function () {
       const fileSummary = fileCount + ' open file' + (fileCount === 1 ? '' : 's');
       const reviewSummary = reviewCount + ' review item' + (reviewCount === 1 ? '' : 's');
       const reviewDetails = reviewCount > 0 ? ' and ' + reviewSummary : '';
-      description.textContent = 'Reset will remove ' + fileSummary + ' from Markdown Viewer and permanently clear their locally stored content' + reviewDetails + '. Files saved or exported to your device will not be deleted. Any active Live Share session will end, and a fresh Welcome to Markdown file will be created. Export unsaved work before continuing.';
+      description.textContent = 'This will remove ' + fileSummary + reviewDetails + ' and end any active Live Share session. Unsaved changes cannot be recovered.';
     }
 
     function doReset() {
diff --git a/index.html b/index.html
index dd512696..5f245b1e 100644
--- a/index.html
+++ b/index.html
@@ -449,7 +449,7 @@ <h2 class="h5 m-0">Menu</h2>
                 <i class="bi bi-x-lg" aria-hidden="true"></i>
               </button>
             </div>
-            <p id="reset-modal-description" class="modal-subtext">Open files, locally stored content, and review items will be removed from Markdown Viewer. Files saved or exported to your device will not be deleted.</p>
+            <p id="reset-modal-description" class="modal-subtext">This will remove all open files and review items. Unsaved changes cannot be recovered.</p>
             <div class="reset-modal-actions">
               <button type="button" class="reset-modal-btn reset-modal-cancel" id="reset-modal-cancel">Cancel</button>
               <button type="button" class="reset-modal-btn reset-modal-confirm" id="reset-modal-confirm">Reset all</button>
diff --git a/script.js b/script.js
index 24149251..bacc0f23 100644
--- a/script.js
+++ b/script.js
@@ -4225,7 +4225,7 @@ document.addEventListener("DOMContentLoaded", async function () {
       const fileSummary = fileCount + ' open file' + (fileCount === 1 ? '' : 's');
       const reviewSummary = reviewCount + ' review item' + (reviewCount === 1 ? '' : 's');
       const reviewDetails = reviewCount > 0 ? ' and ' + reviewSummary : '';
-      description.textContent = 'Reset will remove ' + fileSummary + ' from Markdown Viewer and permanently clear their locally stored content' + reviewDetails + '. Files saved or exported to your device will not be deleted. Any active Live Share session will end, and a fresh Welcome to Markdown file will be created. Export unsaved work before continuing.';
+      description.textContent = 'This will remove ' + fileSummary + reviewDetails + ' and end any active Live Share session. Unsaved changes cannot be recovered.';
     }
 
     function doReset() {

From f1ee6bc14cac13a00ec97ef6fdb2bf69d5300274 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Mon, 13 Jul 2026 20:12:09 +0530
Subject: [PATCH 10/18] feat(review): refine responsive review UI

---
 CHANGELOG.md                       |   6 ++
 README.md                          |   4 +-
 desktop-app/resources/index.html   |   5 +-
 desktop-app/resources/js/script.js |  11 ++-
 desktop-app/resources/styles.css   | 108 +++++++++++++++++------------
 index.html                         |   5 +-
 script.js                          |  11 ++-
 styles.css                         | 108 +++++++++++++++++------------
 wiki/Features.md                   |   3 +-
 wiki/Usage-Guide.md                |   2 +
 10 files changed, 162 insertions(+), 101 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b92c6ea..6e45b6ff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable code changes to **Markdown Viewer** are documented here.
 Non-code commits (documentation, planning, README-only updates) are excluded.
 
+## Unreleased
+
+- **Comments & Suggestions UI:** Simplified the Review panel, composer, suggestion cards, and preview pins using the app's existing accent, button, border, hover, disabled, and theme tokens. Refined the layout into a compact desktop side panel, tablet drawer, and touch-friendly mobile bottom sheet without introducing a separate color palette.
+
+---
+
 ## v3.9.1
 
 - **Description:** Improved export reliability, file workflows, diagram insertion, shared-document safety, and browser compatibility.
diff --git a/README.md b/README.md
index d6be1e4b..bf231648 100644
--- a/README.md
+++ b/README.md
@@ -94,7 +94,7 @@ Markdown Viewer handles the usual Markdown basics, but its real value is helping
    - **STL 3D Model Renderer**: inspect 3D model previews alongside technical notes.
    - **ABC Music Player & Sheet Music Viewer**: render sheet music and play notation in the browser.
 
-3. **Comments & Suggestions**: open a read-only Review workspace and attach feedback to rendered headings, paragraphs, code blocks, and diagrams without changing the Markdown source. Resolve threads or copy a review summary when the feedback is ready to share.
+3. **Comments & Suggestions**: open a read-only Review workspace and attach feedback to rendered headings, paragraphs, code blocks, and diagrams without changing the Markdown source. The responsive side panel uses the same controls and theme as the rest of the app.
 4. **Live Share Temporary Rooms**: collaborate in real time for quick editing sessions, reviews, or pair-writing, with server-checked host, editable, and view-only capabilities.
 5. **Share Snapshot Links**: create view-only or editable point-in-time links when you need to send a document state quickly. Large stored snapshots expire after 90 days.
 6. **LaTeX Math Notation**: render inline and display formulas with MathJax, useful for math-heavy notes, papers, and technical explanations.
@@ -129,7 +129,7 @@ Markdown Viewer works well as a Markdown diagram editor for technical notes, doc
 
 ## Sharing, Collaboration, and Export
 
-- **Comments & Suggestions** provides a local, per-document review layer. Review pins attach comments or suggestions to rendered headings, paragraphs, code blocks, and diagrams while the Markdown stays read-only. Threads can be resolved, reopened, deleted, or copied as a Markdown summary. Review data stays in the local tab workspace and is not automatically included in Share Snapshot or Live Share.
+- **Comments & Suggestions** provides a per-document review layer. Review pins attach comments or suggestions to rendered headings, paragraphs, code blocks, and diagrams while the Markdown stays read-only. Threads can be resolved, reopened, deleted, or copied as a Markdown summary. The interface uses a desktop side panel, a tablet drawer, and a touch-friendly mobile bottom sheet. Review data stays with the local tab workspace, is excluded from Share Snapshot, and is relayed only while an existing Live Share room is active.
 - **Share Snapshot** creates quick links for point-in-time Markdown sharing. Small documents can stay in the URL hash; larger snapshots use temporary Cloudflare KV storage for up to 90 days when that backend is configured. Snapshot links are bearer links: anyone who has the link can open it.
 <p align="center">
   <img src="https://github.com/user-attachments/assets/e62ca1a0-011a-4b01-90f9-e72638b9a6d5" alt="Share Snapshot" width="90%" />
diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index c1260253..cc81a7ee 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -1109,7 +1109,6 @@ <h3 class="modal-section-title">Open-source credits</h3>
             <aside id="review-panel" class="review-panel" aria-labelledby="review-panel-title" hidden>
                 <div class="review-panel-header">
                     <div>
-                        <p class="review-panel-eyebrow">Review mode</p>
                         <h2 id="review-panel-title">Comments &amp; suggestions</h2>
                         <p id="review-panel-summary" class="review-panel-summary">No open feedback</p>
                     </div>
@@ -1153,7 +1152,7 @@ <h3 id="review-composer-title">Add feedback</h3>
                             <i class="bi bi-chat-left-text" aria-hidden="true"></i> Comment
                         </button>
                         <button class="review-kind-btn" type="button" data-review-kind="suggestion" aria-pressed="false">
-                            <i class="bi bi-lightbulb" aria-hidden="true"></i> Suggestion
+                            <i class="bi bi-pencil-square" aria-hidden="true"></i> Suggestion
                         </button>
                     </div>
                     <label id="review-feedback-label" class="review-feedback-label" for="review-feedback-input">Comment</label>
@@ -1168,7 +1167,7 @@ <h3 id="review-composer-title">Add feedback</h3>
                 <div id="review-empty-state" class="review-empty-state">
                     <i class="bi bi-chat-square-dots" aria-hidden="true"></i>
                     <h3>No open feedback</h3>
-                    <p>Use the comment pins in the preview to leave feedback without changing the Markdown.</p>
+                    <p>Select a comment pin in the preview to add feedback.</p>
                 </div>
             </aside>
         </main>
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index bacc0f23..aa456f50 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -348,6 +348,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   const reviewDeleteCancel = document.getElementById('review-delete-cancel');
   const reviewDeleteConfirm = document.getElementById('review-delete-confirm');
   const reviewComposer = document.getElementById('review-composer');
+  const reviewComposerTitle = document.getElementById('review-composer-title');
   const reviewComposerAnchor = document.getElementById('review-composer-anchor');
   const reviewComposerCancel = document.getElementById('review-composer-cancel');
   const reviewFeedbackLabel = document.getElementById('review-feedback-label');
@@ -2848,6 +2849,7 @@ document.addEventListener("DOMContentLoaded", async function () {
       const button = document.createElement('button');
       button.type = 'button';
       button.className = 'review-target-button';
+      button.classList.toggle('has-review-items', targetThreads.length > 0);
       button.dataset.reviewAnchor = anchorKey;
       button.dataset.reviewDuplicateCount = String(duplicateCount);
       button.dataset.reviewContext = context;
@@ -2927,7 +2929,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     const kind = document.createElement('span');
     kind.className = 'review-kind-label';
     const kindIcon = document.createElement('i');
-    kindIcon.className = thread.kind === 'suggestion' ? 'bi bi-lightbulb' : 'bi bi-chat-left-text';
+    kindIcon.className = thread.kind === 'suggestion' ? 'bi bi-pencil-square' : 'bi bi-chat-left-text';
     kindIcon.setAttribute('aria-hidden', 'true');
     kind.appendChild(kindIcon);
     kind.appendChild(document.createTextNode(thread.kind === 'suggestion' ? 'Suggestion' : 'Comment'));
@@ -3018,12 +3020,12 @@ document.addEventListener("DOMContentLoaded", async function () {
         copy.textContent = 'Resolved comments and suggestions will appear here.';
       } else if (reviewFilter === 'all') {
         title.textContent = 'No feedback yet';
-        copy.textContent = 'Use the comment pins in the preview to leave feedback without changing the Markdown.';
+        copy.textContent = 'Select a comment pin in the preview to add feedback.';
       } else {
         title.textContent = 'No open feedback';
         copy.textContent = threads.length > 0
           ? 'Everything has been resolved. Switch to Resolved or All to review earlier feedback.'
-          : 'Use the comment pins in the preview to leave feedback without changing the Markdown.';
+          : 'Select a comment pin in the preview to add feedback.';
       }
     }
   }
@@ -3038,6 +3040,9 @@ document.addEventListener("DOMContentLoaded", async function () {
     if (reviewFeedbackLabel) {
       reviewFeedbackLabel.textContent = reviewComposerKind === 'suggestion' ? 'Suggested change' : 'Comment';
     }
+    if (reviewComposerTitle) {
+      reviewComposerTitle.textContent = reviewComposerKind === 'suggestion' ? 'Add suggestion' : 'Add comment';
+    }
     if (reviewFeedbackInput) {
       reviewFeedbackInput.placeholder = reviewComposerKind === 'suggestion'
         ? 'Describe the change you recommend without editing the source...'
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 8b00388f..3131001d 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -23,9 +23,6 @@
   /* Code block background for light mode */
   --skeleton-bg: #e2e8f0;
   --skeleton-glow: rgba(255, 255, 255, 0.65);
-  --review-suggestion: #9a6700;
-  --review-suggestion-soft: #fff8c5;
-  --review-panel-shadow: -12px 0 32px rgba(31, 35, 40, 0.16);
 
   /* Find & Replace Panel custom properties (PERF-010 consolidated) */
   --fr-bg: rgba(255, 255, 255, 0.95);
@@ -66,9 +63,6 @@
   /* Code block background for dark mode */
   --skeleton-bg: #2d3139;
   --skeleton-glow: rgba(255, 255, 255, 0.08);
-  --review-suggestion: #d29922;
-  --review-suggestion-soft: rgba(187, 128, 9, 0.16);
-  --review-panel-shadow: -12px 0 32px rgba(0, 0, 0, 0.45);
 
   /* Find & Replace Panel custom properties for dark mode */
   --fr-bg: rgba(28, 33, 40, 0.98);
@@ -6039,14 +6033,14 @@ html[data-theme="dark"] .mermaid svg {
   z-index: 85;
   inset-block: 0;
   inset-inline-end: 0;
-  width: min(380px, calc(100% - 48px));
+  width: min(360px, calc(100% - 48px));
   display: flex;
   flex-direction: column;
   overflow: hidden;
   color: var(--text-color);
   background: var(--bg-color);
   border-inline-start: 1px solid var(--border-color);
-  box-shadow: var(--review-panel-shadow);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
 }
 
 .review-panel-backdrop {
@@ -6065,7 +6059,7 @@ html[data-theme="dark"] .mermaid svg {
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
-  padding: 18px 18px 14px;
+  padding: 16px;
   border-bottom: 1px solid var(--border-color);
 }
 
@@ -6170,16 +6164,16 @@ html[data-theme="dark"] .mermaid svg {
 .review-filter-btn.is-active,
 .review-kind-btn.is-active {
   color: var(--accent-color);
-  background: var(--bg-color);
+  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
   box-shadow: 0 1px 3px rgba(31, 35, 40, 0.12);
 }
 
 .review-composer {
   margin: 14px 14px 4px;
   padding: 14px;
-  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
-  border: 1px solid color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
-  border-radius: 10px;
+  background: var(--header-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
 }
 
 .review-composer-heading {
@@ -6215,11 +6209,6 @@ html[data-theme="dark"] .mermaid svg {
   font-size: 0.76rem;
 }
 
-.review-kind-btn[data-review-kind="suggestion"].is-active {
-  color: var(--review-suggestion);
-  background: var(--review-suggestion-soft);
-}
-
 .review-feedback-label {
   display: block;
   margin-bottom: 6px;
@@ -6264,8 +6253,8 @@ html[data-theme="dark"] .mermaid svg {
 .review-primary-btn {
   min-height: 32px;
   padding: 6px 12px;
-  color: var(--bg-color);
-  background: var(--accent-color);
+  color: var(--accent-color);
+  background: var(--button-bg);
   border: 1px solid var(--accent-color);
   border-radius: 6px;
   cursor: pointer;
@@ -6274,7 +6263,7 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .review-primary-btn:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--accent-color) 84%, #000000);
+  background: var(--button-hover);
 }
 
 .review-primary-btn:disabled {
@@ -6297,10 +6286,6 @@ html[data-theme="dark"] .mermaid svg {
   border-radius: 8px;
 }
 
-.review-thread[data-kind="suggestion"] {
-  border-inline-start-color: var(--review-suggestion);
-}
-
 .review-thread.is-resolved {
   opacity: 0.72;
 }
@@ -6339,13 +6324,9 @@ html[data-theme="dark"] .mermaid svg {
 
 .review-kind-label {
   padding: 5px 7px;
-  color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
-}
-
-.review-thread[data-kind="suggestion"] .review-kind-label {
-  color: var(--review-suggestion);
-  background: var(--review-suggestion-soft);
+  color: var(--text-secondary);
+  background: var(--button-bg);
+  border: 1px solid var(--border-color);
 }
 
 .review-status-label {
@@ -6494,9 +6475,9 @@ html[data-theme="dark"] .mermaid svg {
   align-items: center;
   justify-content: center;
   gap: 4px;
-  color: var(--bg-color);
-  background: var(--accent-color);
-  border: 1px solid var(--accent-color);
+  color: var(--accent-color);
+  background: var(--button-bg);
+  border: 1px solid var(--border-color);
   border-radius: 999px;
   box-shadow: 0 2px 8px rgba(31, 35, 40, 0.22);
   cursor: pointer;
@@ -6512,7 +6493,14 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .review-target-button:hover {
-  background: color-mix(in srgb, var(--accent-color) 84%, #000000);
+  color: var(--accent-color);
+  background: var(--button-hover);
+  border-color: var(--accent-color);
+}
+
+.review-target-button.has-review-items {
+  background: color-mix(in srgb, var(--accent-color) 8%, var(--button-bg));
+  border-color: var(--accent-color);
 }
 
 .review-filter-btn:focus-visible,
@@ -6530,20 +6518,34 @@ html[data-theme="dark"] .mermaid svg {
   .review-panel {
     position: relative;
     inset: auto;
-    width: 380px;
+    width: 360px;
     height: auto;
-    flex: 0 0 380px;
+    flex: 0 0 360px;
     box-shadow: none;
   }
 }
 
 @media (min-width: 768px) and (max-width: 1079px) {
   .review-panel {
-    width: min(390px, 100%);
+    width: min(360px, 100%);
   }
 
   .content-container.is-reviewing .preview-pane {
-    padding-inline-end: 410px;
+    padding-inline-end: 380px;
+  }
+
+  .review-icon-btn,
+  .review-target-button {
+    min-width: 40px;
+    width: 40px;
+    height: 40px;
+  }
+
+  .review-filter-btn,
+  .review-kind-btn,
+  .review-primary-btn,
+  .review-thread-action {
+    min-height: 40px;
   }
 }
 
@@ -6552,18 +6554,18 @@ html[data-theme="dark"] .mermaid svg {
     inset-block-start: auto;
     inset-block-end: 0;
     width: 100%;
-    height: min(56%, 560px);
+    height: min(68%, 620px);
     border-inline-start: 0;
     border-top: 1px solid var(--border-color);
     box-shadow: 0 -12px 32px rgba(31, 35, 40, 0.2);
   }
 
   .content-container.is-reviewing .preview-pane {
-    padding-bottom: calc(56vh + 20px);
+    padding-bottom: calc(68vh + 16px);
   }
 
   .review-panel-header {
-    padding-top: 14px;
+    padding: 12px 14px;
   }
 
   .review-panel-toolbar {
@@ -6581,6 +6583,26 @@ html[data-theme="dark"] .mermaid svg {
     height: 44px;
   }
 
+  .review-filter-btn,
+  .review-kind-btn,
+  .review-primary-btn,
+  .review-thread-action {
+    min-height: 44px;
+  }
+
+  .review-composer {
+    margin: 10px 10px 4px;
+    padding: 12px;
+  }
+
+  .review-list {
+    padding: 8px 10px 16px;
+  }
+
+  .review-thread-action {
+    padding-inline: 10px;
+  }
+
   .review-target-button {
     min-width: 44px;
     height: 44px;
diff --git a/index.html b/index.html
index 5f245b1e..c0d5ca85 100644
--- a/index.html
+++ b/index.html
@@ -1202,7 +1202,6 @@ <h3 class="modal-section-title">Open-source credits</h3>
             <aside id="review-panel" class="review-panel" aria-labelledby="review-panel-title" hidden>
                 <div class="review-panel-header">
                     <div>
-                        <p class="review-panel-eyebrow">Review mode</p>
                         <h2 id="review-panel-title">Comments &amp; suggestions</h2>
                         <p id="review-panel-summary" class="review-panel-summary">No open feedback</p>
                     </div>
@@ -1246,7 +1245,7 @@ <h3 id="review-composer-title">Add feedback</h3>
                             <i class="bi bi-chat-left-text" aria-hidden="true"></i> Comment
                         </button>
                         <button class="review-kind-btn" type="button" data-review-kind="suggestion" aria-pressed="false">
-                            <i class="bi bi-lightbulb" aria-hidden="true"></i> Suggestion
+                            <i class="bi bi-pencil-square" aria-hidden="true"></i> Suggestion
                         </button>
                     </div>
                     <label id="review-feedback-label" class="review-feedback-label" for="review-feedback-input">Comment</label>
@@ -1261,7 +1260,7 @@ <h3 id="review-composer-title">Add feedback</h3>
                 <div id="review-empty-state" class="review-empty-state">
                     <i class="bi bi-chat-square-dots" aria-hidden="true"></i>
                     <h3>No open feedback</h3>
-                    <p>Use the comment pins in the preview to leave feedback without changing the Markdown.</p>
+                    <p>Select a comment pin in the preview to add feedback.</p>
                 </div>
             </aside>
         </main>
diff --git a/script.js b/script.js
index bacc0f23..aa456f50 100644
--- a/script.js
+++ b/script.js
@@ -348,6 +348,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   const reviewDeleteCancel = document.getElementById('review-delete-cancel');
   const reviewDeleteConfirm = document.getElementById('review-delete-confirm');
   const reviewComposer = document.getElementById('review-composer');
+  const reviewComposerTitle = document.getElementById('review-composer-title');
   const reviewComposerAnchor = document.getElementById('review-composer-anchor');
   const reviewComposerCancel = document.getElementById('review-composer-cancel');
   const reviewFeedbackLabel = document.getElementById('review-feedback-label');
@@ -2848,6 +2849,7 @@ document.addEventListener("DOMContentLoaded", async function () {
       const button = document.createElement('button');
       button.type = 'button';
       button.className = 'review-target-button';
+      button.classList.toggle('has-review-items', targetThreads.length > 0);
       button.dataset.reviewAnchor = anchorKey;
       button.dataset.reviewDuplicateCount = String(duplicateCount);
       button.dataset.reviewContext = context;
@@ -2927,7 +2929,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     const kind = document.createElement('span');
     kind.className = 'review-kind-label';
     const kindIcon = document.createElement('i');
-    kindIcon.className = thread.kind === 'suggestion' ? 'bi bi-lightbulb' : 'bi bi-chat-left-text';
+    kindIcon.className = thread.kind === 'suggestion' ? 'bi bi-pencil-square' : 'bi bi-chat-left-text';
     kindIcon.setAttribute('aria-hidden', 'true');
     kind.appendChild(kindIcon);
     kind.appendChild(document.createTextNode(thread.kind === 'suggestion' ? 'Suggestion' : 'Comment'));
@@ -3018,12 +3020,12 @@ document.addEventListener("DOMContentLoaded", async function () {
         copy.textContent = 'Resolved comments and suggestions will appear here.';
       } else if (reviewFilter === 'all') {
         title.textContent = 'No feedback yet';
-        copy.textContent = 'Use the comment pins in the preview to leave feedback without changing the Markdown.';
+        copy.textContent = 'Select a comment pin in the preview to add feedback.';
       } else {
         title.textContent = 'No open feedback';
         copy.textContent = threads.length > 0
           ? 'Everything has been resolved. Switch to Resolved or All to review earlier feedback.'
-          : 'Use the comment pins in the preview to leave feedback without changing the Markdown.';
+          : 'Select a comment pin in the preview to add feedback.';
       }
     }
   }
@@ -3038,6 +3040,9 @@ document.addEventListener("DOMContentLoaded", async function () {
     if (reviewFeedbackLabel) {
       reviewFeedbackLabel.textContent = reviewComposerKind === 'suggestion' ? 'Suggested change' : 'Comment';
     }
+    if (reviewComposerTitle) {
+      reviewComposerTitle.textContent = reviewComposerKind === 'suggestion' ? 'Add suggestion' : 'Add comment';
+    }
     if (reviewFeedbackInput) {
       reviewFeedbackInput.placeholder = reviewComposerKind === 'suggestion'
         ? 'Describe the change you recommend without editing the source...'
diff --git a/styles.css b/styles.css
index 8b00388f..3131001d 100644
--- a/styles.css
+++ b/styles.css
@@ -23,9 +23,6 @@
   /* Code block background for light mode */
   --skeleton-bg: #e2e8f0;
   --skeleton-glow: rgba(255, 255, 255, 0.65);
-  --review-suggestion: #9a6700;
-  --review-suggestion-soft: #fff8c5;
-  --review-panel-shadow: -12px 0 32px rgba(31, 35, 40, 0.16);
 
   /* Find & Replace Panel custom properties (PERF-010 consolidated) */
   --fr-bg: rgba(255, 255, 255, 0.95);
@@ -66,9 +63,6 @@
   /* Code block background for dark mode */
   --skeleton-bg: #2d3139;
   --skeleton-glow: rgba(255, 255, 255, 0.08);
-  --review-suggestion: #d29922;
-  --review-suggestion-soft: rgba(187, 128, 9, 0.16);
-  --review-panel-shadow: -12px 0 32px rgba(0, 0, 0, 0.45);
 
   /* Find & Replace Panel custom properties for dark mode */
   --fr-bg: rgba(28, 33, 40, 0.98);
@@ -6039,14 +6033,14 @@ html[data-theme="dark"] .mermaid svg {
   z-index: 85;
   inset-block: 0;
   inset-inline-end: 0;
-  width: min(380px, calc(100% - 48px));
+  width: min(360px, calc(100% - 48px));
   display: flex;
   flex-direction: column;
   overflow: hidden;
   color: var(--text-color);
   background: var(--bg-color);
   border-inline-start: 1px solid var(--border-color);
-  box-shadow: var(--review-panel-shadow);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
 }
 
 .review-panel-backdrop {
@@ -6065,7 +6059,7 @@ html[data-theme="dark"] .mermaid svg {
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
-  padding: 18px 18px 14px;
+  padding: 16px;
   border-bottom: 1px solid var(--border-color);
 }
 
@@ -6170,16 +6164,16 @@ html[data-theme="dark"] .mermaid svg {
 .review-filter-btn.is-active,
 .review-kind-btn.is-active {
   color: var(--accent-color);
-  background: var(--bg-color);
+  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
   box-shadow: 0 1px 3px rgba(31, 35, 40, 0.12);
 }
 
 .review-composer {
   margin: 14px 14px 4px;
   padding: 14px;
-  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
-  border: 1px solid color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
-  border-radius: 10px;
+  background: var(--header-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
 }
 
 .review-composer-heading {
@@ -6215,11 +6209,6 @@ html[data-theme="dark"] .mermaid svg {
   font-size: 0.76rem;
 }
 
-.review-kind-btn[data-review-kind="suggestion"].is-active {
-  color: var(--review-suggestion);
-  background: var(--review-suggestion-soft);
-}
-
 .review-feedback-label {
   display: block;
   margin-bottom: 6px;
@@ -6264,8 +6253,8 @@ html[data-theme="dark"] .mermaid svg {
 .review-primary-btn {
   min-height: 32px;
   padding: 6px 12px;
-  color: var(--bg-color);
-  background: var(--accent-color);
+  color: var(--accent-color);
+  background: var(--button-bg);
   border: 1px solid var(--accent-color);
   border-radius: 6px;
   cursor: pointer;
@@ -6274,7 +6263,7 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .review-primary-btn:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--accent-color) 84%, #000000);
+  background: var(--button-hover);
 }
 
 .review-primary-btn:disabled {
@@ -6297,10 +6286,6 @@ html[data-theme="dark"] .mermaid svg {
   border-radius: 8px;
 }
 
-.review-thread[data-kind="suggestion"] {
-  border-inline-start-color: var(--review-suggestion);
-}
-
 .review-thread.is-resolved {
   opacity: 0.72;
 }
@@ -6339,13 +6324,9 @@ html[data-theme="dark"] .mermaid svg {
 
 .review-kind-label {
   padding: 5px 7px;
-  color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
-}
-
-.review-thread[data-kind="suggestion"] .review-kind-label {
-  color: var(--review-suggestion);
-  background: var(--review-suggestion-soft);
+  color: var(--text-secondary);
+  background: var(--button-bg);
+  border: 1px solid var(--border-color);
 }
 
 .review-status-label {
@@ -6494,9 +6475,9 @@ html[data-theme="dark"] .mermaid svg {
   align-items: center;
   justify-content: center;
   gap: 4px;
-  color: var(--bg-color);
-  background: var(--accent-color);
-  border: 1px solid var(--accent-color);
+  color: var(--accent-color);
+  background: var(--button-bg);
+  border: 1px solid var(--border-color);
   border-radius: 999px;
   box-shadow: 0 2px 8px rgba(31, 35, 40, 0.22);
   cursor: pointer;
@@ -6512,7 +6493,14 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .review-target-button:hover {
-  background: color-mix(in srgb, var(--accent-color) 84%, #000000);
+  color: var(--accent-color);
+  background: var(--button-hover);
+  border-color: var(--accent-color);
+}
+
+.review-target-button.has-review-items {
+  background: color-mix(in srgb, var(--accent-color) 8%, var(--button-bg));
+  border-color: var(--accent-color);
 }
 
 .review-filter-btn:focus-visible,
@@ -6530,20 +6518,34 @@ html[data-theme="dark"] .mermaid svg {
   .review-panel {
     position: relative;
     inset: auto;
-    width: 380px;
+    width: 360px;
     height: auto;
-    flex: 0 0 380px;
+    flex: 0 0 360px;
     box-shadow: none;
   }
 }
 
 @media (min-width: 768px) and (max-width: 1079px) {
   .review-panel {
-    width: min(390px, 100%);
+    width: min(360px, 100%);
   }
 
   .content-container.is-reviewing .preview-pane {
-    padding-inline-end: 410px;
+    padding-inline-end: 380px;
+  }
+
+  .review-icon-btn,
+  .review-target-button {
+    min-width: 40px;
+    width: 40px;
+    height: 40px;
+  }
+
+  .review-filter-btn,
+  .review-kind-btn,
+  .review-primary-btn,
+  .review-thread-action {
+    min-height: 40px;
   }
 }
 
@@ -6552,18 +6554,18 @@ html[data-theme="dark"] .mermaid svg {
     inset-block-start: auto;
     inset-block-end: 0;
     width: 100%;
-    height: min(56%, 560px);
+    height: min(68%, 620px);
     border-inline-start: 0;
     border-top: 1px solid var(--border-color);
     box-shadow: 0 -12px 32px rgba(31, 35, 40, 0.2);
   }
 
   .content-container.is-reviewing .preview-pane {
-    padding-bottom: calc(56vh + 20px);
+    padding-bottom: calc(68vh + 16px);
   }
 
   .review-panel-header {
-    padding-top: 14px;
+    padding: 12px 14px;
   }
 
   .review-panel-toolbar {
@@ -6581,6 +6583,26 @@ html[data-theme="dark"] .mermaid svg {
     height: 44px;
   }
 
+  .review-filter-btn,
+  .review-kind-btn,
+  .review-primary-btn,
+  .review-thread-action {
+    min-height: 44px;
+  }
+
+  .review-composer {
+    margin: 10px 10px 4px;
+    padding: 12px;
+  }
+
+  .review-list {
+    padding: 8px 10px 16px;
+  }
+
+  .review-thread-action {
+    padding-inline: 10px;
+  }
+
   .review-target-button {
     min-width: 44px;
     height: 44px;
diff --git a/wiki/Features.md b/wiki/Features.md
index 4f1f6d80..e237c047 100644
--- a/wiki/Features.md
+++ b/wiki/Features.md
@@ -61,7 +61,8 @@ Review mode provides a local feedback layer over the rendered document without i
 - A reviewer can add either a comment or a suggestion. Both are feedback records; suggestions do not apply source changes automatically.
 - Threads can be resolved, reopened, or deleted individually and filtered by status. The panel also provides Copy summary, Resolve all, and confirmation-protected Delete all actions.
 - Open-thread counts appear in the desktop header and mobile menu.
-- Review controls support keyboard focus, screen-reader labels, dark mode, RTL layout, desktop side-by-side review, and a mobile partial-height panel.
+- Review controls support keyboard focus, screen-reader labels, dark mode, RTL layout, a compact desktop side panel, a tablet drawer, and a touch-friendly mobile bottom sheet.
+- Comments and suggestions use the existing app accent, button surfaces, borders, hover states, disabled states, and Bootstrap Icons; the feature does not introduce a separate color palette.
 
 Anchoring and lifecycle:
 
diff --git a/wiki/Usage-Guide.md b/wiki/Usage-Guide.md
index 3b76fcfb..627cd83c 100644
--- a/wiki/Usage-Guide.md
+++ b/wiki/Usage-Guide.md
@@ -53,6 +53,8 @@ Use Review when you want to leave structured feedback without editing the Markdo
 4. Enter the feedback and add it to the document review.
 5. Use **Resolve** or **Reopen** to manage a thread. The panel toolbar can copy a Markdown summary, resolve every open item, or delete all feedback after confirmation. Deleting an individual item also uses an in-app confirmation dialog.
 
+On desktop, Review opens as a compact side panel beside the preview. Tablet layouts use a side drawer, while phones use a taller bottom sheet with larger filter, composer, thread, and pin controls for touch. Light and dark themes use the same existing app colors, borders, hover states, and icons.
+
 Review threads are stored with the normal local document tab and survive reloads. They are not inserted into Markdown and are excluded from Markdown, HTML, PDF, PNG, and print output. If the reviewed source block changes, its thread remains in the panel as an unanchored item instead of moving to a different block. Duplicating a tab starts the copy without review threads.
 
 Share Snapshot links transfer Markdown without review threads. Live Share rooms synchronize comments, suggestions, resolve/reopen state, and deletions through a separate Review channel. View-only participants can review without receiving Markdown edit permission. A participant's temporary live tab is removed when they leave, while synchronized feedback remains in the host's normal document tab. Private mode prevents review threads from being persisted with the local workspace.

From aab0f17fbbea5820d6476fbc7ca1508a9b4ecfb1 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Mon, 13 Jul 2026 20:33:24 +0530
Subject: [PATCH 11/18] style(review): align target buttons with toolbar

---
 CHANGELOG.md                       |  2 +-
 desktop-app/resources/js/script.js | 12 ++++++------
 desktop-app/resources/styles.css   | 30 ++----------------------------
 script.js                          | 12 ++++++------
 styles.css                         | 30 ++----------------------------
 5 files changed, 17 insertions(+), 69 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6e45b6ff..edc8c68b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@ Non-code commits (documentation, planning, README-only updates) are excluded.
 
 ## Unreleased
 
-- **Comments & Suggestions UI:** Simplified the Review panel, composer, suggestion cards, and preview pins using the app's existing accent, button, border, hover, disabled, and theme tokens. Refined the layout into a compact desktop side panel, tablet drawer, and touch-friendly mobile bottom sheet without introducing a separate color palette.
+- **Comments & Suggestions UI:** Simplified the Review panel, composer, suggestion cards, and preview pins using the app's existing accent, button, border, hover, disabled, and theme tokens. Review target buttons now match the main toolbar controls and align in a straight column at the preview's right edge. Refined the layout into a compact desktop side panel, tablet drawer, and touch-friendly mobile bottom sheet without introducing a separate color palette.
 
 ---
 
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index aa456f50..3e8126f2 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -2752,7 +2752,8 @@ document.addEventListener("DOMContentLoaded", async function () {
     reviewPinsLayoutFrame = null;
     if (!reviewModeActive || !reviewPinsLayer || !previewPaneElement) return;
     const paneRect = previewPaneElement.getBoundingClientRect();
-    const isRtl = markdownPreview && markdownPreview.getAttribute('dir') === 'rtl';
+    const previewRect = markdownPreview.getBoundingClientRect();
+    const pinRight = previewRect.right - 4;
     reviewPinsLayer.querySelectorAll('.review-target-button').forEach(function(button) {
       const anchor = {
         key: button.dataset.reviewAnchor,
@@ -2768,10 +2769,9 @@ document.addEventListener("DOMContentLoaded", async function () {
       const targetRect = target.getBoundingClientRect();
       const isDiagram = target.dataset.reviewType === 'diagram';
       const top = isDiagram ? targetRect.bottom - 40 : targetRect.top + 4;
-      const left = isRtl ? targetRect.left + 4 : targetRect.right - 4;
       button.style.top = (top - paneRect.top + previewPaneElement.scrollTop) + 'px';
-      button.style.left = (left - paneRect.left + previewPaneElement.scrollLeft) + 'px';
-      button.style.transform = isRtl ? 'none' : 'translateX(-100%)';
+      button.style.left = (pinRight - paneRect.left + previewPaneElement.scrollLeft) + 'px';
+      button.style.transform = 'translateX(-100%)';
     });
   }
 
@@ -2848,8 +2848,8 @@ document.addEventListener("DOMContentLoaded", async function () {
 
       const button = document.createElement('button');
       button.type = 'button';
-      button.className = 'review-target-button';
-      button.classList.toggle('has-review-items', targetThreads.length > 0);
+      button.className = 'tool-button review-target-button';
+      button.classList.toggle('is-active', targetThreads.length > 0);
       button.dataset.reviewAnchor = anchorKey;
       button.dataset.reviewDuplicateCount = String(duplicateCount);
       button.dataset.reviewContext = context;
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 3131001d..0b83d5b9 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -6468,41 +6468,15 @@ html[data-theme="dark"] .mermaid svg {
 .review-target-button {
   position: absolute;
   z-index: 8;
-  min-width: 30px;
-  height: 30px;
-  padding: 0 7px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  color: var(--accent-color);
-  background: var(--button-bg);
-  border: 1px solid var(--border-color);
-  border-radius: 999px;
-  box-shadow: 0 2px 8px rgba(31, 35, 40, 0.22);
-  cursor: pointer;
-  font-size: 0.68rem;
-  font-weight: 700;
-  opacity: 1;
+  min-width: 28px;
+  height: 28px;
   pointer-events: auto;
-  transition: opacity 0.12s ease, transform 0.12s ease;
 }
 
 .review-target-button[data-review-count]::after {
   content: attr(data-review-count);
 }
 
-.review-target-button:hover {
-  color: var(--accent-color);
-  background: var(--button-hover);
-  border-color: var(--accent-color);
-}
-
-.review-target-button.has-review-items {
-  background: color-mix(in srgb, var(--accent-color) 8%, var(--button-bg));
-  border-color: var(--accent-color);
-}
-
 .review-filter-btn:focus-visible,
 .review-kind-btn:focus-visible,
 .review-icon-btn:focus-visible,
diff --git a/script.js b/script.js
index aa456f50..3e8126f2 100644
--- a/script.js
+++ b/script.js
@@ -2752,7 +2752,8 @@ document.addEventListener("DOMContentLoaded", async function () {
     reviewPinsLayoutFrame = null;
     if (!reviewModeActive || !reviewPinsLayer || !previewPaneElement) return;
     const paneRect = previewPaneElement.getBoundingClientRect();
-    const isRtl = markdownPreview && markdownPreview.getAttribute('dir') === 'rtl';
+    const previewRect = markdownPreview.getBoundingClientRect();
+    const pinRight = previewRect.right - 4;
     reviewPinsLayer.querySelectorAll('.review-target-button').forEach(function(button) {
       const anchor = {
         key: button.dataset.reviewAnchor,
@@ -2768,10 +2769,9 @@ document.addEventListener("DOMContentLoaded", async function () {
       const targetRect = target.getBoundingClientRect();
       const isDiagram = target.dataset.reviewType === 'diagram';
       const top = isDiagram ? targetRect.bottom - 40 : targetRect.top + 4;
-      const left = isRtl ? targetRect.left + 4 : targetRect.right - 4;
       button.style.top = (top - paneRect.top + previewPaneElement.scrollTop) + 'px';
-      button.style.left = (left - paneRect.left + previewPaneElement.scrollLeft) + 'px';
-      button.style.transform = isRtl ? 'none' : 'translateX(-100%)';
+      button.style.left = (pinRight - paneRect.left + previewPaneElement.scrollLeft) + 'px';
+      button.style.transform = 'translateX(-100%)';
     });
   }
 
@@ -2848,8 +2848,8 @@ document.addEventListener("DOMContentLoaded", async function () {
 
       const button = document.createElement('button');
       button.type = 'button';
-      button.className = 'review-target-button';
-      button.classList.toggle('has-review-items', targetThreads.length > 0);
+      button.className = 'tool-button review-target-button';
+      button.classList.toggle('is-active', targetThreads.length > 0);
       button.dataset.reviewAnchor = anchorKey;
       button.dataset.reviewDuplicateCount = String(duplicateCount);
       button.dataset.reviewContext = context;
diff --git a/styles.css b/styles.css
index 3131001d..0b83d5b9 100644
--- a/styles.css
+++ b/styles.css
@@ -6468,41 +6468,15 @@ html[data-theme="dark"] .mermaid svg {
 .review-target-button {
   position: absolute;
   z-index: 8;
-  min-width: 30px;
-  height: 30px;
-  padding: 0 7px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  color: var(--accent-color);
-  background: var(--button-bg);
-  border: 1px solid var(--border-color);
-  border-radius: 999px;
-  box-shadow: 0 2px 8px rgba(31, 35, 40, 0.22);
-  cursor: pointer;
-  font-size: 0.68rem;
-  font-weight: 700;
-  opacity: 1;
+  min-width: 28px;
+  height: 28px;
   pointer-events: auto;
-  transition: opacity 0.12s ease, transform 0.12s ease;
 }
 
 .review-target-button[data-review-count]::after {
   content: attr(data-review-count);
 }
 
-.review-target-button:hover {
-  color: var(--accent-color);
-  background: var(--button-hover);
-  border-color: var(--accent-color);
-}
-
-.review-target-button.has-review-items {
-  background: color-mix(in srgb, var(--accent-color) 8%, var(--button-bg));
-  border-color: var(--accent-color);
-}
-
 .review-filter-btn:focus-visible,
 .review-kind-btn:focus-visible,
 .review-icon-btn:focus-visible,

From 976eb0ca39dcf9ded35f1bbdca40d10c661df726 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Mon, 13 Jul 2026 21:10:30 +0530
Subject: [PATCH 12/18] style(review): switch empty targets to plus icon

---
 CHANGELOG.md                       | 2 +-
 desktop-app/resources/js/script.js | 2 +-
 script.js                          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index edc8c68b..d176d191 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@ Non-code commits (documentation, planning, README-only updates) are excluded.
 
 ## Unreleased
 
-- **Comments & Suggestions UI:** Simplified the Review panel, composer, suggestion cards, and preview pins using the app's existing accent, button, border, hover, disabled, and theme tokens. Review target buttons now match the main toolbar controls and align in a straight column at the preview's right edge. Refined the layout into a compact desktop side panel, tablet drawer, and touch-friendly mobile bottom sheet without introducing a separate color palette.
+- **Comments & Suggestions UI:** Simplified the Review panel, composer, suggestion cards, and preview pins using the app's existing accent, button, border, hover, disabled, and theme tokens. Review target buttons now match the main toolbar controls, align in a straight column at the preview's right edge, show a plus before feedback exists, and switch to the review icon and count after feedback is added. Refined the layout into a compact desktop side panel, tablet drawer, and touch-friendly mobile bottom sheet without introducing a separate color palette.
 
 ---
 
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index 3e8126f2..fe1aef02 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -2860,7 +2860,7 @@ document.addEventListener("DOMContentLoaded", async function () {
         : 'Add feedback to ' + label);
 
       const icon = document.createElement('i');
-      icon.className = 'bi bi-chat-square-text';
+      icon.className = targetThreads.length > 0 ? 'bi bi-chat-square-text' : 'bi bi-plus-lg';
       icon.setAttribute('aria-hidden', 'true');
       button.appendChild(icon);
       if (targetThreads.length > 0) {
diff --git a/script.js b/script.js
index 3e8126f2..fe1aef02 100644
--- a/script.js
+++ b/script.js
@@ -2860,7 +2860,7 @@ document.addEventListener("DOMContentLoaded", async function () {
         : 'Add feedback to ' + label);
 
       const icon = document.createElement('i');
-      icon.className = 'bi bi-chat-square-text';
+      icon.className = targetThreads.length > 0 ? 'bi bi-chat-square-text' : 'bi bi-plus-lg';
       icon.setAttribute('aria-hidden', 'true');
       button.appendChild(icon);
       if (targetThreads.length > 0) {

From 9699162dd843355e0a431c5031087f6f4a77c97e Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Mon, 13 Jul 2026 23:36:19 +0530
Subject: [PATCH 13/18] fix(review): improve target feedback navigation

---
 CHANGELOG.md                       |  2 +-
 README.md                          |  4 +-
 desktop-app/resources/js/script.js | 91 ++++++++++++++++++++++++++----
 desktop-app/resources/styles.css   | 39 +++++++++++--
 script.js                          | 91 ++++++++++++++++++++++++++----
 styles.css                         | 39 +++++++++++--
 wiki/Features.md                   |  3 +-
 wiki/Usage-Guide.md                |  5 +-
 8 files changed, 232 insertions(+), 42 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d176d191..ce58e49a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@ Non-code commits (documentation, planning, README-only updates) are excluded.
 
 ## Unreleased
 
-- **Comments & Suggestions UI:** Simplified the Review panel, composer, suggestion cards, and preview pins using the app's existing accent, button, border, hover, disabled, and theme tokens. Review target buttons now match the main toolbar controls, align in a straight column at the preview's right edge, show a plus before feedback exists, and switch to the review icon and count after feedback is added. Refined the layout into a compact desktop side panel, tablet drawer, and touch-friendly mobile bottom sheet without introducing a separate color palette.
+- **Comments & Suggestions UI:** Simplified the Review panel, composer, suggestion cards, and preview pins using the app's existing accent, button, border, hover, disabled, and theme tokens. Review target buttons now match the main toolbar controls, align in a straight column at the preview's right edge, show a plus before feedback exists, and switch to the review icon and count after feedback is added. YAML frontmatter tables are reviewable, reviewed text has clear spacing from its side marker, and clicking reviewed content or its count opens the attached feedback instead of a blank composer. Refined the layout into a compact desktop side panel, tablet drawer, and touch-friendly mobile bottom sheet without introducing a separate color palette.
 
 ---
 
diff --git a/README.md b/README.md
index bf231648..8fecb84a 100644
--- a/README.md
+++ b/README.md
@@ -94,7 +94,7 @@ Markdown Viewer handles the usual Markdown basics, but its real value is helping
    - **STL 3D Model Renderer**: inspect 3D model previews alongside technical notes.
    - **ABC Music Player & Sheet Music Viewer**: render sheet music and play notation in the browser.
 
-3. **Comments & Suggestions**: open a read-only Review workspace and attach feedback to rendered headings, paragraphs, code blocks, and diagrams without changing the Markdown source. The responsive side panel uses the same controls and theme as the rest of the app.
+3. **Comments & Suggestions**: open a read-only Review workspace and attach feedback to rendered YAML frontmatter tables, headings, paragraphs, code blocks, and diagrams without changing the Markdown source. The responsive side panel uses the same controls and theme as the rest of the app.
 4. **Live Share Temporary Rooms**: collaborate in real time for quick editing sessions, reviews, or pair-writing, with server-checked host, editable, and view-only capabilities.
 5. **Share Snapshot Links**: create view-only or editable point-in-time links when you need to send a document state quickly. Large stored snapshots expire after 90 days.
 6. **LaTeX Math Notation**: render inline and display formulas with MathJax, useful for math-heavy notes, papers, and technical explanations.
@@ -129,7 +129,7 @@ Markdown Viewer works well as a Markdown diagram editor for technical notes, doc
 
 ## Sharing, Collaboration, and Export
 
-- **Comments & Suggestions** provides a per-document review layer. Review pins attach comments or suggestions to rendered headings, paragraphs, code blocks, and diagrams while the Markdown stays read-only. Threads can be resolved, reopened, deleted, or copied as a Markdown summary. The interface uses a desktop side panel, a tablet drawer, and a touch-friendly mobile bottom sheet. Review data stays with the local tab workspace, is excluded from Share Snapshot, and is relayed only while an existing Live Share room is active.
+- **Comments & Suggestions** provides a per-document review layer. Review pins attach comments or suggestions to rendered YAML frontmatter tables, headings, paragraphs, code blocks, and diagrams while the Markdown stays read-only. A plus opens the composer; a review count or reviewed block opens its existing feedback. Threads can be resolved, reopened, deleted, or copied as a Markdown summary. The interface uses a desktop side panel, a tablet drawer, and a touch-friendly mobile bottom sheet. Review data stays with the local tab workspace, is excluded from Share Snapshot, and is relayed only while an existing Live Share room is active.
 - **Share Snapshot** creates quick links for point-in-time Markdown sharing. Small documents can stay in the URL hash; larger snapshots use temporary Cloudflare KV storage for up to 90 days when that backend is configured. Snapshot links are bearer links: anyone who has the link can open it.
 <p align="center">
   <img src="https://github.com/user-attachments/assets/e62ca1a0-011a-4b01-90f9-e72638b9a6d5" alt="Share Snapshot" width="90%" />
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index fe1aef02..c99585ce 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -263,7 +263,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   const shareSnapshotViewOnlyTabIds = new Set();
   const SHARE_SNAPSHOT_TAB_KIND = 'share-snapshot';
   const APP_VERSION = '3.9.1';
-  const REVIEW_TARGET_SELECTOR = 'h1, h2, h3, h4, h5, h6, p, pre, .diagram-viewer, .geojson-container, .topojson-container, .stl-container';
+  const REVIEW_TARGET_SELECTOR = 'h1, h2, h3, h4, h5, h6, p, pre, .frontmatter-table, .diagram-viewer, .geojson-container, .topojson-container, .stl-container';
   const REVIEW_TEXT_LIMIT = 2000;
   let reviewModeActive = false;
   const reviewPreviousViewModes = new Map();
@@ -2577,6 +2577,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   function getReviewTargetType(target) {
     if (!target) return 'block';
     if (target.matches('.diagram-viewer, .geojson-container, .topojson-container, .stl-container')) return 'diagram';
+    if (target.matches('.frontmatter-table')) return 'table';
     if (target.tagName === 'PRE') return 'code';
     if (/^H[1-6]$/.test(target.tagName)) return 'heading';
     if (target.tagName === 'P') return 'paragraph';
@@ -2668,6 +2669,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   function getReviewTargetLabel(target, type) {
     if (type === 'heading') return 'Heading ' + target.tagName;
     if (type === 'paragraph') return 'Paragraph';
+    if (type === 'table') return 'YAML frontmatter';
     if (type === 'code') {
       const code = target.querySelector('code');
       const languageClass = code ? Array.from(code.classList).find(function(className) {
@@ -2715,6 +2717,10 @@ document.addEventListener("DOMContentLoaded", async function () {
       if (diagramContainer && diagramContainer !== target) {
         return false;
       }
+      const frontmatterTable = target.closest('.frontmatter-table');
+      if (frontmatterTable && frontmatterTable !== target) {
+        return false;
+      }
       return !target.closest('.review-target-button');
     });
   }
@@ -2736,6 +2742,7 @@ document.addEventListener("DOMContentLoaded", async function () {
         'review-target--heading',
         'review-target--paragraph',
         'review-target--code',
+        'review-target--table',
         'review-target--diagram',
         'has-review-thread',
         'is-review-target-active'
@@ -2854,9 +2861,9 @@ document.addEventListener("DOMContentLoaded", async function () {
       button.dataset.reviewDuplicateCount = String(duplicateCount);
       button.dataset.reviewContext = context;
       button.dataset.html2canvasIgnore = 'true';
-      button.title = targetThreads.length > 0 ? 'Add feedback to this block' : 'Comment on this block';
+      button.title = targetThreads.length > 0 ? 'View feedback for this block' : 'Comment on this block';
       button.setAttribute('aria-label', targetThreads.length > 0
-        ? 'Add feedback to ' + label + '. ' + targetThreads.length + ' review item' + (targetThreads.length === 1 ? '' : 's') + ' attached.'
+        ? 'View feedback for ' + label + '. ' + targetThreads.length + ' review item' + (targetThreads.length === 1 ? '' : 's') + ' attached.'
         : 'Add feedback to ' + label);
 
       const icon = document.createElement('i');
@@ -3030,6 +3037,58 @@ document.addEventListener("DOMContentLoaded", async function () {
     }
   }
 
+  function setReviewFilter(nextFilter) {
+    reviewFilter = ['open', 'resolved', 'all'].includes(nextFilter) ? nextFilter : 'open';
+    document.querySelectorAll('[data-review-filter]').forEach(function(button) {
+      const active = button.dataset.reviewFilter === reviewFilter;
+      button.classList.toggle('is-active', active);
+      button.setAttribute('aria-pressed', active ? 'true' : 'false');
+    });
+    renderReviewPanel();
+  }
+
+  function getReviewThreadsForAnchor(anchor) {
+    if (!anchor || !anchor.key) return [];
+    return getActiveReviewThreads().filter(function(thread) {
+      if (!thread.anchor || thread.anchor.key !== anchor.key) return false;
+      if (anchor.duplicateCount && thread.anchor.duplicateCount && Number(thread.anchor.duplicateCount) !== Number(anchor.duplicateCount)) return false;
+      if (anchor.context && thread.anchor.context && thread.anchor.context !== anchor.context) return false;
+      return true;
+    });
+  }
+
+  function showReviewThreadsForAnchor(anchor) {
+    const threads = getReviewThreadsForAnchor(anchor).sort(function(a, b) {
+      return b.createdAt - a.createdAt;
+    });
+    if (threads.length === 0) return false;
+
+    closeReviewComposer();
+    setReviewFilter('all');
+
+    const matchingIds = new Set(threads.map(function(thread) { return thread.id; }));
+    const matchingItems = Array.from(reviewList.querySelectorAll('.review-thread')).filter(function(item) {
+      return matchingIds.has(item.dataset.reviewId);
+    });
+    matchingItems.forEach(function(item) {
+      item.classList.add('is-review-thread-active');
+    });
+    if (matchingItems[0]) {
+      matchingItems[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      const anchorButton = matchingItems[0].querySelector('.review-thread-anchor');
+      if (anchorButton) anchorButton.focus({ preventScroll: true });
+    }
+
+    clearTimeout(showReviewThreadsForAnchor._timeoutId);
+    showReviewThreadsForAnchor._timeoutId = setTimeout(function() {
+      matchingItems.forEach(function(item) {
+        item.classList.remove('is-review-thread-active');
+      });
+    }, 1800);
+    announceToScreenReader('Showing ' + threads.length + ' review item' + (threads.length === 1 ? '' : 's') + ' for this block.');
+    return true;
+  }
+
   function updateReviewComposerKind(kind) {
     reviewComposerKind = kind === 'suggestion' ? 'suggestion' : 'comment';
     document.querySelectorAll('[data-review-kind]').forEach(function(button) {
@@ -3390,13 +3449,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     });
     document.querySelectorAll('[data-review-filter]').forEach(function(button) {
       button.addEventListener('click', function() {
-        reviewFilter = button.dataset.reviewFilter;
-        document.querySelectorAll('[data-review-filter]').forEach(function(filterButton) {
-          const active = filterButton === button;
-          filterButton.classList.toggle('is-active', active);
-          filterButton.setAttribute('aria-pressed', active ? 'true' : 'false');
-        });
-        renderReviewPanel();
+        setReviewFilter(button.dataset.reviewFilter);
       });
     });
 
@@ -3406,15 +3459,29 @@ document.addEventListener("DOMContentLoaded", async function () {
         if (!button || !reviewModeActive) return;
         event.preventDefault();
         event.stopPropagation();
-        const target = findReviewTarget({
+        const anchor = {
           key: button.dataset.reviewAnchor,
           duplicateCount: Number(button.dataset.reviewDuplicateCount) || null,
           context: button.dataset.reviewContext || null
-        });
+        };
+        if (showReviewThreadsForAnchor(anchor)) return;
+        const target = findReviewTarget(anchor);
         openReviewComposer(target);
       });
     }
 
+    if (markdownPreview) {
+      markdownPreview.addEventListener('click', function(event) {
+        if (!reviewModeActive || event.target.closest('a, button, input, select, textarea, summary, [role="button"]')) return;
+        const target = event.target.closest('.review-target.has-review-thread');
+        if (!target || !markdownPreview.contains(target)) return;
+        const anchor = getReviewAnchorDescriptor(target);
+        if (!anchor) return;
+        event.preventDefault();
+        showReviewThreadsForAnchor(anchor);
+      });
+    }
+
     if (previewPaneElement) {
       previewPaneElement.addEventListener('scroll', scheduleReviewPinsLayout, { passive: true });
     }
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 0b83d5b9..aad8c60d 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -6432,27 +6432,43 @@ html[data-theme="dark"] .mermaid svg {
   border-radius: 5px;
 }
 
-#markdown-preview .review-target:not(.review-target--diagram) {
+#markdown-preview .review-target:not(.review-target--diagram):not(.review-target--table) {
   padding-inline-end: 44px;
 }
 
+#markdown-preview .review-target--table {
+  max-width: calc(100% - 44px);
+}
+
 #markdown-preview .review-target--diagram {
   padding-block-end: 44px;
 }
 
 #markdown-preview .review-target.is-review-target-active {
-  outline: 2px solid var(--accent-color);
-  outline-offset: 4px;
+  outline: none;
 }
 
-#markdown-preview .review-target.has-review-thread {
+#markdown-preview .review-target.has-review-thread,
+#markdown-preview .review-target.is-review-target-active {
   box-shadow: inset 3px 0 0 var(--accent-color);
 }
 
-[dir="rtl"] #markdown-preview .review-target.has-review-thread {
+[dir="rtl"] #markdown-preview .review-target.has-review-thread,
+[dir="rtl"] #markdown-preview .review-target.is-review-target-active {
   box-shadow: inset -3px 0 0 var(--accent-color);
 }
 
+#markdown-preview .review-target--heading.has-review-thread,
+#markdown-preview .review-target--heading.is-review-target-active,
+#markdown-preview .review-target--paragraph.has-review-thread,
+#markdown-preview .review-target--paragraph.is-review-target-active {
+  padding-inline-start: 10px;
+}
+
+#markdown-preview .review-target.has-review-thread {
+  cursor: pointer;
+}
+
 .review-pins-layer {
   position: absolute;
   z-index: 20;
@@ -6477,6 +6493,10 @@ html[data-theme="dark"] .mermaid svg {
   content: attr(data-review-count);
 }
 
+.review-thread.is-review-thread-active {
+  border-color: var(--accent-color);
+}
+
 .review-filter-btn:focus-visible,
 .review-kind-btn:focus-visible,
 .review-icon-btn:focus-visible,
@@ -6582,10 +6602,14 @@ html[data-theme="dark"] .mermaid svg {
     height: 44px;
   }
 
-  #markdown-preview .review-target:not(.review-target--diagram) {
+  #markdown-preview .review-target:not(.review-target--diagram):not(.review-target--table) {
     padding-inline-end: 56px;
   }
 
+  #markdown-preview .review-target--table {
+    max-width: calc(100% - 56px);
+  }
+
   #markdown-preview .review-target--diagram {
     padding-block-end: 56px;
   }
@@ -6634,11 +6658,14 @@ html[data-theme="dark"] .mermaid svg {
 
   #markdown-preview .review-target,
   #markdown-preview .review-target.has-review-thread,
+  #markdown-preview .review-target.is-review-target-active,
   [dir="rtl"] #markdown-preview .review-target.has-review-thread {
     outline: none !important;
     box-shadow: none !important;
     padding-inline-end: 0 !important;
+    padding-inline-start: 0 !important;
     padding-block-end: 0 !important;
+    max-width: 100% !important;
   }
 
   .content-container.is-reviewing .preview-pane {
diff --git a/script.js b/script.js
index fe1aef02..c99585ce 100644
--- a/script.js
+++ b/script.js
@@ -263,7 +263,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   const shareSnapshotViewOnlyTabIds = new Set();
   const SHARE_SNAPSHOT_TAB_KIND = 'share-snapshot';
   const APP_VERSION = '3.9.1';
-  const REVIEW_TARGET_SELECTOR = 'h1, h2, h3, h4, h5, h6, p, pre, .diagram-viewer, .geojson-container, .topojson-container, .stl-container';
+  const REVIEW_TARGET_SELECTOR = 'h1, h2, h3, h4, h5, h6, p, pre, .frontmatter-table, .diagram-viewer, .geojson-container, .topojson-container, .stl-container';
   const REVIEW_TEXT_LIMIT = 2000;
   let reviewModeActive = false;
   const reviewPreviousViewModes = new Map();
@@ -2577,6 +2577,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   function getReviewTargetType(target) {
     if (!target) return 'block';
     if (target.matches('.diagram-viewer, .geojson-container, .topojson-container, .stl-container')) return 'diagram';
+    if (target.matches('.frontmatter-table')) return 'table';
     if (target.tagName === 'PRE') return 'code';
     if (/^H[1-6]$/.test(target.tagName)) return 'heading';
     if (target.tagName === 'P') return 'paragraph';
@@ -2668,6 +2669,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   function getReviewTargetLabel(target, type) {
     if (type === 'heading') return 'Heading ' + target.tagName;
     if (type === 'paragraph') return 'Paragraph';
+    if (type === 'table') return 'YAML frontmatter';
     if (type === 'code') {
       const code = target.querySelector('code');
       const languageClass = code ? Array.from(code.classList).find(function(className) {
@@ -2715,6 +2717,10 @@ document.addEventListener("DOMContentLoaded", async function () {
       if (diagramContainer && diagramContainer !== target) {
         return false;
       }
+      const frontmatterTable = target.closest('.frontmatter-table');
+      if (frontmatterTable && frontmatterTable !== target) {
+        return false;
+      }
       return !target.closest('.review-target-button');
     });
   }
@@ -2736,6 +2742,7 @@ document.addEventListener("DOMContentLoaded", async function () {
         'review-target--heading',
         'review-target--paragraph',
         'review-target--code',
+        'review-target--table',
         'review-target--diagram',
         'has-review-thread',
         'is-review-target-active'
@@ -2854,9 +2861,9 @@ document.addEventListener("DOMContentLoaded", async function () {
       button.dataset.reviewDuplicateCount = String(duplicateCount);
       button.dataset.reviewContext = context;
       button.dataset.html2canvasIgnore = 'true';
-      button.title = targetThreads.length > 0 ? 'Add feedback to this block' : 'Comment on this block';
+      button.title = targetThreads.length > 0 ? 'View feedback for this block' : 'Comment on this block';
       button.setAttribute('aria-label', targetThreads.length > 0
-        ? 'Add feedback to ' + label + '. ' + targetThreads.length + ' review item' + (targetThreads.length === 1 ? '' : 's') + ' attached.'
+        ? 'View feedback for ' + label + '. ' + targetThreads.length + ' review item' + (targetThreads.length === 1 ? '' : 's') + ' attached.'
         : 'Add feedback to ' + label);
 
       const icon = document.createElement('i');
@@ -3030,6 +3037,58 @@ document.addEventListener("DOMContentLoaded", async function () {
     }
   }
 
+  function setReviewFilter(nextFilter) {
+    reviewFilter = ['open', 'resolved', 'all'].includes(nextFilter) ? nextFilter : 'open';
+    document.querySelectorAll('[data-review-filter]').forEach(function(button) {
+      const active = button.dataset.reviewFilter === reviewFilter;
+      button.classList.toggle('is-active', active);
+      button.setAttribute('aria-pressed', active ? 'true' : 'false');
+    });
+    renderReviewPanel();
+  }
+
+  function getReviewThreadsForAnchor(anchor) {
+    if (!anchor || !anchor.key) return [];
+    return getActiveReviewThreads().filter(function(thread) {
+      if (!thread.anchor || thread.anchor.key !== anchor.key) return false;
+      if (anchor.duplicateCount && thread.anchor.duplicateCount && Number(thread.anchor.duplicateCount) !== Number(anchor.duplicateCount)) return false;
+      if (anchor.context && thread.anchor.context && thread.anchor.context !== anchor.context) return false;
+      return true;
+    });
+  }
+
+  function showReviewThreadsForAnchor(anchor) {
+    const threads = getReviewThreadsForAnchor(anchor).sort(function(a, b) {
+      return b.createdAt - a.createdAt;
+    });
+    if (threads.length === 0) return false;
+
+    closeReviewComposer();
+    setReviewFilter('all');
+
+    const matchingIds = new Set(threads.map(function(thread) { return thread.id; }));
+    const matchingItems = Array.from(reviewList.querySelectorAll('.review-thread')).filter(function(item) {
+      return matchingIds.has(item.dataset.reviewId);
+    });
+    matchingItems.forEach(function(item) {
+      item.classList.add('is-review-thread-active');
+    });
+    if (matchingItems[0]) {
+      matchingItems[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      const anchorButton = matchingItems[0].querySelector('.review-thread-anchor');
+      if (anchorButton) anchorButton.focus({ preventScroll: true });
+    }
+
+    clearTimeout(showReviewThreadsForAnchor._timeoutId);
+    showReviewThreadsForAnchor._timeoutId = setTimeout(function() {
+      matchingItems.forEach(function(item) {
+        item.classList.remove('is-review-thread-active');
+      });
+    }, 1800);
+    announceToScreenReader('Showing ' + threads.length + ' review item' + (threads.length === 1 ? '' : 's') + ' for this block.');
+    return true;
+  }
+
   function updateReviewComposerKind(kind) {
     reviewComposerKind = kind === 'suggestion' ? 'suggestion' : 'comment';
     document.querySelectorAll('[data-review-kind]').forEach(function(button) {
@@ -3390,13 +3449,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     });
     document.querySelectorAll('[data-review-filter]').forEach(function(button) {
       button.addEventListener('click', function() {
-        reviewFilter = button.dataset.reviewFilter;
-        document.querySelectorAll('[data-review-filter]').forEach(function(filterButton) {
-          const active = filterButton === button;
-          filterButton.classList.toggle('is-active', active);
-          filterButton.setAttribute('aria-pressed', active ? 'true' : 'false');
-        });
-        renderReviewPanel();
+        setReviewFilter(button.dataset.reviewFilter);
       });
     });
 
@@ -3406,15 +3459,29 @@ document.addEventListener("DOMContentLoaded", async function () {
         if (!button || !reviewModeActive) return;
         event.preventDefault();
         event.stopPropagation();
-        const target = findReviewTarget({
+        const anchor = {
           key: button.dataset.reviewAnchor,
           duplicateCount: Number(button.dataset.reviewDuplicateCount) || null,
           context: button.dataset.reviewContext || null
-        });
+        };
+        if (showReviewThreadsForAnchor(anchor)) return;
+        const target = findReviewTarget(anchor);
         openReviewComposer(target);
       });
     }
 
+    if (markdownPreview) {
+      markdownPreview.addEventListener('click', function(event) {
+        if (!reviewModeActive || event.target.closest('a, button, input, select, textarea, summary, [role="button"]')) return;
+        const target = event.target.closest('.review-target.has-review-thread');
+        if (!target || !markdownPreview.contains(target)) return;
+        const anchor = getReviewAnchorDescriptor(target);
+        if (!anchor) return;
+        event.preventDefault();
+        showReviewThreadsForAnchor(anchor);
+      });
+    }
+
     if (previewPaneElement) {
       previewPaneElement.addEventListener('scroll', scheduleReviewPinsLayout, { passive: true });
     }
diff --git a/styles.css b/styles.css
index 0b83d5b9..aad8c60d 100644
--- a/styles.css
+++ b/styles.css
@@ -6432,27 +6432,43 @@ html[data-theme="dark"] .mermaid svg {
   border-radius: 5px;
 }
 
-#markdown-preview .review-target:not(.review-target--diagram) {
+#markdown-preview .review-target:not(.review-target--diagram):not(.review-target--table) {
   padding-inline-end: 44px;
 }
 
+#markdown-preview .review-target--table {
+  max-width: calc(100% - 44px);
+}
+
 #markdown-preview .review-target--diagram {
   padding-block-end: 44px;
 }
 
 #markdown-preview .review-target.is-review-target-active {
-  outline: 2px solid var(--accent-color);
-  outline-offset: 4px;
+  outline: none;
 }
 
-#markdown-preview .review-target.has-review-thread {
+#markdown-preview .review-target.has-review-thread,
+#markdown-preview .review-target.is-review-target-active {
   box-shadow: inset 3px 0 0 var(--accent-color);
 }
 
-[dir="rtl"] #markdown-preview .review-target.has-review-thread {
+[dir="rtl"] #markdown-preview .review-target.has-review-thread,
+[dir="rtl"] #markdown-preview .review-target.is-review-target-active {
   box-shadow: inset -3px 0 0 var(--accent-color);
 }
 
+#markdown-preview .review-target--heading.has-review-thread,
+#markdown-preview .review-target--heading.is-review-target-active,
+#markdown-preview .review-target--paragraph.has-review-thread,
+#markdown-preview .review-target--paragraph.is-review-target-active {
+  padding-inline-start: 10px;
+}
+
+#markdown-preview .review-target.has-review-thread {
+  cursor: pointer;
+}
+
 .review-pins-layer {
   position: absolute;
   z-index: 20;
@@ -6477,6 +6493,10 @@ html[data-theme="dark"] .mermaid svg {
   content: attr(data-review-count);
 }
 
+.review-thread.is-review-thread-active {
+  border-color: var(--accent-color);
+}
+
 .review-filter-btn:focus-visible,
 .review-kind-btn:focus-visible,
 .review-icon-btn:focus-visible,
@@ -6582,10 +6602,14 @@ html[data-theme="dark"] .mermaid svg {
     height: 44px;
   }
 
-  #markdown-preview .review-target:not(.review-target--diagram) {
+  #markdown-preview .review-target:not(.review-target--diagram):not(.review-target--table) {
     padding-inline-end: 56px;
   }
 
+  #markdown-preview .review-target--table {
+    max-width: calc(100% - 56px);
+  }
+
   #markdown-preview .review-target--diagram {
     padding-block-end: 56px;
   }
@@ -6634,11 +6658,14 @@ html[data-theme="dark"] .mermaid svg {
 
   #markdown-preview .review-target,
   #markdown-preview .review-target.has-review-thread,
+  #markdown-preview .review-target.is-review-target-active,
   [dir="rtl"] #markdown-preview .review-target.has-review-thread {
     outline: none !important;
     box-shadow: none !important;
     padding-inline-end: 0 !important;
+    padding-inline-start: 0 !important;
     padding-block-end: 0 !important;
+    max-width: 100% !important;
   }
 
   .content-container.is-reviewing .preview-pane {
diff --git a/wiki/Features.md b/wiki/Features.md
index e237c047..14b25440 100644
--- a/wiki/Features.md
+++ b/wiki/Features.md
@@ -57,7 +57,8 @@ The About dialog includes two storage controls:
 Review mode provides a local feedback layer over the rendered document without inserting or changing Markdown.
 
 - The Review button opens a dedicated read-only preview workspace and restores the previous Editor, Split, or Preview layout when closed.
-- Review pins are attached to rendered headings, paragraphs, fenced code blocks, and supported diagram containers, including Mermaid and the other diagram engines.
+- Review pins are attached to rendered YAML frontmatter tables, headings, paragraphs, fenced code blocks, and supported diagram containers, including Mermaid and the other diagram engines.
+- Empty targets show a plus that opens the composer. Targets with feedback show the review icon and count; selecting the count or reviewed content opens the existing feedback in the panel.
 - A reviewer can add either a comment or a suggestion. Both are feedback records; suggestions do not apply source changes automatically.
 - Threads can be resolved, reopened, or deleted individually and filtered by status. The panel also provides Copy summary, Resolve all, and confirmation-protected Delete all actions.
 - Open-thread counts appear in the desktop header and mobile menu.
diff --git a/wiki/Usage-Guide.md b/wiki/Usage-Guide.md
index 627cd83c..b7696596 100644
--- a/wiki/Usage-Guide.md
+++ b/wiki/Usage-Guide.md
@@ -48,10 +48,11 @@ The editor also supports list continuation on Enter, two-space indent on Tab, ou
 Use Review when you want to leave structured feedback without editing the Markdown source.
 
 1. Click **Review** in the desktop header or mobile menu. The app switches to a read-only preview workspace and remembers your previous view layout.
-2. Select the comment pin on a rendered heading, paragraph, code block, or diagram.
+2. Select the plus pin on a rendered YAML frontmatter table, heading, paragraph, code block, or diagram.
 3. Choose **Comment** for general feedback or **Suggestion** for a proposed change.
 4. Enter the feedback and add it to the document review.
-5. Use **Resolve** or **Reopen** to manage a thread. The panel toolbar can copy a Markdown summary, resolve every open item, or delete all feedback after confirmation. Deleting an individual item also uses an in-app confirmation dialog.
+5. After feedback is attached, select its review icon and count—or the reviewed content itself—to open the saved item in the panel.
+6. Use **Resolve** or **Reopen** to manage a thread. The panel toolbar can copy a Markdown summary, resolve every open item, or delete all feedback after confirmation. Deleting an individual item also uses an in-app confirmation dialog.
 
 On desktop, Review opens as a compact side panel beside the preview. Tablet layouts use a side drawer, while phones use a taller bottom sheet with larger filter, composer, thread, and pin controls for touch. Light and dark themes use the same existing app colors, borders, hover states, and icons.
 

From 31b5aba377e0f223ae6664d4e23a7a99336c7a72 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Tue, 14 Jul 2026 00:46:29 +0530
Subject: [PATCH 14/18] fix(review): support follow-up and edited feedback

---
 CHANGELOG.md                       |   2 +-
 README.md                          |   2 +-
 desktop-app/resources/js/script.js | 107 ++++++++++++++++++++++++++---
 script.js                          | 107 ++++++++++++++++++++++++++---
 wiki/Features.md                   |   4 +-
 wiki/Usage-Guide.md                |   4 +-
 6 files changed, 200 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ce58e49a..de472387 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@ Non-code commits (documentation, planning, README-only updates) are excluded.
 
 ## Unreleased
 
-- **Comments & Suggestions UI:** Simplified the Review panel, composer, suggestion cards, and preview pins using the app's existing accent, button, border, hover, disabled, and theme tokens. Review target buttons now match the main toolbar controls, align in a straight column at the preview's right edge, show a plus before feedback exists, and switch to the review icon and count after feedback is added. YAML frontmatter tables are reviewable, reviewed text has clear spacing from its side marker, and clicking reviewed content or its count opens the attached feedback instead of a blank composer. Refined the layout into a compact desktop side panel, tablet drawer, and touch-friendly mobile bottom sheet without introducing a separate color palette.
+- **Comments & Suggestions UI:** Simplified the Review panel, composer, suggestion cards, and preview pins using the app's existing accent, button, border, hover, disabled, and theme tokens. Review target buttons now match the main toolbar controls, align in a straight column at the preview's right edge, show a plus before feedback exists, and switch to the review icon and count after feedback is added. YAML frontmatter tables are reviewable, reviewed text has clear spacing from its side marker, and clicking reviewed content or its count opens the attached feedback together with the composer so more items can be added to the same block. Existing comments and suggestions can now be edited in place. Refined the layout into a compact desktop side panel, tablet drawer, and touch-friendly mobile bottom sheet without introducing a separate color palette.
 
 ---
 
diff --git a/README.md b/README.md
index 8fecb84a..c96ce416 100644
--- a/README.md
+++ b/README.md
@@ -129,7 +129,7 @@ Markdown Viewer works well as a Markdown diagram editor for technical notes, doc
 
 ## Sharing, Collaboration, and Export
 
-- **Comments & Suggestions** provides a per-document review layer. Review pins attach comments or suggestions to rendered YAML frontmatter tables, headings, paragraphs, code blocks, and diagrams while the Markdown stays read-only. A plus opens the composer; a review count or reviewed block opens its existing feedback. Threads can be resolved, reopened, deleted, or copied as a Markdown summary. The interface uses a desktop side panel, a tablet drawer, and a touch-friendly mobile bottom sheet. Review data stays with the local tab workspace, is excluded from Share Snapshot, and is relayed only while an existing Live Share room is active.
+- **Comments & Suggestions** provides a per-document review layer. Review pins attach comments or suggestions to rendered YAML frontmatter tables, headings, paragraphs, code blocks, and diagrams while the Markdown stays read-only. A plus opens the composer; a review count or reviewed block opens its existing feedback and the composer for adding another item to the same block. Threads can be edited, resolved, reopened, deleted, or copied as a Markdown summary. The interface uses a desktop side panel, a tablet drawer, and a touch-friendly mobile bottom sheet. Review data stays with the local tab workspace, is excluded from Share Snapshot, and is relayed only while an existing Live Share room is active.
 - **Share Snapshot** creates quick links for point-in-time Markdown sharing. Small documents can stay in the URL hash; larger snapshots use temporary Cloudflare KV storage for up to 90 days when that backend is configured. Snapshot links are bearer links: anyone who has the link can open it.
 <p align="center">
   <img src="https://github.com/user-attachments/assets/e62ca1a0-011a-4b01-90f9-e72638b9a6d5" alt="Share Snapshot" width="90%" />
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index c99585ce..8023e7e6 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -270,6 +270,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   let reviewFilter = 'open';
   let reviewComposerKind = 'comment';
   let activeReviewAnchor = null;
+  let activeReviewEditId = null;
   let pendingReviewDelete = null;
   let reviewPinsResizeObserver = null;
   let reviewPinsLayoutFrame = null;
@@ -2560,6 +2561,9 @@ document.addEventListener("DOMContentLoaded", async function () {
     tab.reviewThreads = getLiveReviewMapThreads(liveCollaboration.reviewMap);
     saveTabsToStorage(tabs);
     if (tab.id === activeTabId) {
+      if (activeReviewEditId && !tab.reviewThreads.some(function(thread) { return thread.id === activeReviewEditId; })) {
+        closeReviewComposer();
+      }
       decorateReviewTargets();
       renderReviewPanel();
     }
@@ -2861,9 +2865,9 @@ document.addEventListener("DOMContentLoaded", async function () {
       button.dataset.reviewDuplicateCount = String(duplicateCount);
       button.dataset.reviewContext = context;
       button.dataset.html2canvasIgnore = 'true';
-      button.title = targetThreads.length > 0 ? 'View feedback for this block' : 'Comment on this block';
+      button.title = targetThreads.length > 0 ? 'View feedback or add another item' : 'Comment on this block';
       button.setAttribute('aria-label', targetThreads.length > 0
-        ? 'View feedback for ' + label + '. ' + targetThreads.length + ' review item' + (targetThreads.length === 1 ? '' : 's') + ' attached.'
+        ? 'View ' + targetThreads.length + ' review item' + (targetThreads.length === 1 ? '' : 's') + ' for ' + label + ' or add more feedback.'
         : 'Add feedback to ' + label);
 
       const icon = document.createElement('i');
@@ -2926,6 +2930,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     const target = findReviewTarget(thread.anchor);
     const item = document.createElement('article');
     item.className = 'review-thread' + (thread.resolved ? ' is-resolved' : '') + (!target ? ' is-orphaned' : '');
+    if (thread.id === activeReviewEditId) item.classList.add('is-review-thread-active');
     item.dataset.reviewId = thread.id;
     item.dataset.kind = thread.kind;
 
@@ -2974,6 +2979,14 @@ document.addEventListener("DOMContentLoaded", async function () {
 
     const actions = document.createElement('div');
     actions.className = 'review-thread-actions';
+    const editButton = document.createElement('button');
+    editButton.type = 'button';
+    editButton.className = 'review-thread-action';
+    editButton.dataset.reviewAction = 'edit';
+    editButton.dataset.reviewId = thread.id;
+    editButton.textContent = 'Edit';
+    editButton.setAttribute('aria-label', 'Edit ' + (thread.kind === 'suggestion' ? 'suggestion' : 'comment'));
+    actions.appendChild(editButton);
     const statusButton = document.createElement('button');
     statusButton.type = 'button';
     statusButton.className = 'review-thread-action';
@@ -3063,8 +3076,9 @@ document.addEventListener("DOMContentLoaded", async function () {
     });
     if (threads.length === 0) return false;
 
-    closeReviewComposer();
     setReviewFilter('all');
+    const target = findReviewTarget(anchor);
+    if (target) openReviewComposer(target, { focusInput: false });
 
     const matchingIds = new Set(threads.map(function(thread) { return thread.id; }));
     const matchingItems = Array.from(reviewList.querySelectorAll('.review-thread')).filter(function(item) {
@@ -3085,7 +3099,7 @@ document.addEventListener("DOMContentLoaded", async function () {
         item.classList.remove('is-review-thread-active');
       });
     }, 1800);
-    announceToScreenReader('Showing ' + threads.length + ' review item' + (threads.length === 1 ? '' : 's') + ' for this block.');
+    announceToScreenReader('Showing ' + threads.length + ' review item' + (threads.length === 1 ? '' : 's') + ' for this block. The composer is open for more feedback.');
     return true;
   }
 
@@ -3100,7 +3114,9 @@ document.addEventListener("DOMContentLoaded", async function () {
       reviewFeedbackLabel.textContent = reviewComposerKind === 'suggestion' ? 'Suggested change' : 'Comment';
     }
     if (reviewComposerTitle) {
-      reviewComposerTitle.textContent = reviewComposerKind === 'suggestion' ? 'Add suggestion' : 'Add comment';
+      reviewComposerTitle.textContent = activeReviewEditId
+        ? (reviewComposerKind === 'suggestion' ? 'Edit suggestion' : 'Edit comment')
+        : (reviewComposerKind === 'suggestion' ? 'Add suggestion' : 'Add comment');
     }
     if (reviewFeedbackInput) {
       reviewFeedbackInput.placeholder = reviewComposerKind === 'suggestion'
@@ -3108,7 +3124,9 @@ document.addEventListener("DOMContentLoaded", async function () {
         : 'Leave a focused comment for the author...';
     }
     if (reviewFeedbackSubmit) {
-      reviewFeedbackSubmit.textContent = reviewComposerKind === 'suggestion' ? 'Add suggestion' : 'Add comment';
+      reviewFeedbackSubmit.textContent = activeReviewEditId
+        ? 'Save changes'
+        : (reviewComposerKind === 'suggestion' ? 'Add suggestion' : 'Add comment');
     }
   }
 
@@ -3127,25 +3145,43 @@ document.addEventListener("DOMContentLoaded", async function () {
   function closeReviewComposer(options) {
     options = options || {};
     const returnAnchor = activeReviewAnchor;
+    const returnReviewId = activeReviewEditId;
     if (activeReviewAnchor) {
       const previousTarget = findReviewTarget(activeReviewAnchor);
       if (previousTarget) previousTarget.classList.remove('is-review-target-active');
     }
     activeReviewAnchor = null;
+    activeReviewEditId = null;
     if (reviewComposer) reviewComposer.hidden = true;
     if (reviewFeedbackInput) reviewFeedbackInput.value = '';
     if (reviewFeedbackCount) reviewFeedbackCount.textContent = '0 / ' + REVIEW_TEXT_LIMIT;
     if (reviewFeedbackSubmit) reviewFeedbackSubmit.disabled = true;
-    if (options.restoreFocus && reviewModeActive && !focusReviewPin(returnAnchor) && reviewPanelClose) {
-      reviewPanelClose.focus();
+    if (reviewList) {
+      reviewList.querySelectorAll('.is-review-thread-active').forEach(function(item) {
+        item.classList.remove('is-review-thread-active');
+      });
+    }
+    if (options.restoreFocus && reviewModeActive) {
+      const editButton = returnReviewId && reviewList
+        ? Array.from(reviewList.querySelectorAll('[data-review-action="edit"]')).find(function(button) {
+          return button.dataset.reviewId === returnReviewId;
+        })
+        : null;
+      if (editButton) {
+        editButton.focus();
+      } else if (!focusReviewPin(returnAnchor) && reviewPanelClose) {
+        reviewPanelClose.focus();
+      }
     }
   }
 
-  function openReviewComposer(target) {
+  function openReviewComposer(target, options) {
+    options = options || {};
     if (!target) return;
     const descriptor = getReviewAnchorDescriptor(target);
     if (!descriptor) return;
     closeReviewComposer();
+    activeReviewEditId = null;
     activeReviewAnchor = descriptor;
     target.classList.add('is-review-target-active');
     if (reviewComposerAnchor) {
@@ -3155,8 +3191,31 @@ document.addEventListener("DOMContentLoaded", async function () {
     if (reviewComposer) reviewComposer.hidden = false;
     if (reviewFeedbackInput) {
       reviewFeedbackInput.value = '';
-      reviewFeedbackInput.focus();
+      if (reviewFeedbackCount) reviewFeedbackCount.textContent = '0 / ' + REVIEW_TEXT_LIMIT;
+      if (reviewFeedbackSubmit) reviewFeedbackSubmit.disabled = true;
+      if (options.focusInput !== false) reviewFeedbackInput.focus();
+    }
+  }
+
+  function openReviewEditor(thread) {
+    if (!thread || !reviewComposer || !reviewFeedbackInput) return;
+    closeReviewComposer();
+    activeReviewEditId = thread.id;
+    activeReviewAnchor = Object.assign({}, thread.anchor);
+    const target = findReviewTarget(thread.anchor);
+    if (target) target.classList.add('is-review-target-active');
+    if (reviewComposerAnchor) {
+      reviewComposerAnchor.textContent = thread.anchor.label + ': ' + thread.anchor.excerpt;
     }
+    updateReviewComposerKind(thread.kind);
+    reviewComposer.hidden = false;
+    reviewFeedbackInput.value = thread.body;
+    if (reviewFeedbackCount) reviewFeedbackCount.textContent = reviewFeedbackInput.value.length + ' / ' + REVIEW_TEXT_LIMIT;
+    if (reviewFeedbackSubmit) reviewFeedbackSubmit.disabled = false;
+    renderReviewPanel();
+    reviewFeedbackInput.focus();
+    reviewFeedbackInput.setSelectionRange(reviewFeedbackInput.value.length, reviewFeedbackInput.value.length);
+    announceToScreenReader('Editing ' + (thread.kind === 'suggestion' ? 'suggestion.' : 'comment.'));
   }
 
   function persistReviewThreads(message) {
@@ -3172,6 +3231,29 @@ document.addEventListener("DOMContentLoaded", async function () {
     const body = reviewFeedbackInput.value.trim();
     if (!body) return;
     const returnAnchor = Object.assign({}, activeReviewAnchor);
+    if (activeReviewEditId) {
+      const reviewId = activeReviewEditId;
+      const thread = getActiveReviewThreads().find(function(item) { return item.id === reviewId; });
+      if (!thread) {
+        closeReviewComposer();
+        announceToScreenReader('This review item is no longer available.');
+        return;
+      }
+      thread.kind = reviewComposerKind;
+      thread.body = body.slice(0, REVIEW_TEXT_LIMIT);
+      thread.updatedAt = Date.now();
+      closeReviewComposer();
+      persistReviewThreads('Review item updated.');
+      requestAnimationFrame(function() {
+        const editButton = reviewList
+          ? Array.from(reviewList.querySelectorAll('[data-review-action="edit"]')).find(function(button) {
+            return button.dataset.reviewId === reviewId;
+          })
+          : null;
+        if (editButton) editButton.focus();
+      });
+      return;
+    }
     getActiveReviewThreads().push({
       id: createReviewId(),
       anchor: Object.assign({}, activeReviewAnchor),
@@ -3308,6 +3390,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     if (pending.reviewId) {
       const index = tab.reviewThreads.findIndex(function(thread) { return thread.id === pending.reviewId; });
       if (index >= 0) {
+        if (activeReviewEditId === pending.reviewId) closeReviewComposer();
         tab.reviewThreads.splice(index, 1);
         deletedCount = 1;
       }
@@ -3499,6 +3582,10 @@ document.addEventListener("DOMContentLoaded", async function () {
           focusReviewAnchor(thread);
           return;
         }
+        if (action === 'edit') {
+          openReviewEditor(thread);
+          return;
+        }
         if (action === 'toggle-resolved') {
           thread.resolved = !thread.resolved;
           thread.updatedAt = Date.now();
diff --git a/script.js b/script.js
index c99585ce..8023e7e6 100644
--- a/script.js
+++ b/script.js
@@ -270,6 +270,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   let reviewFilter = 'open';
   let reviewComposerKind = 'comment';
   let activeReviewAnchor = null;
+  let activeReviewEditId = null;
   let pendingReviewDelete = null;
   let reviewPinsResizeObserver = null;
   let reviewPinsLayoutFrame = null;
@@ -2560,6 +2561,9 @@ document.addEventListener("DOMContentLoaded", async function () {
     tab.reviewThreads = getLiveReviewMapThreads(liveCollaboration.reviewMap);
     saveTabsToStorage(tabs);
     if (tab.id === activeTabId) {
+      if (activeReviewEditId && !tab.reviewThreads.some(function(thread) { return thread.id === activeReviewEditId; })) {
+        closeReviewComposer();
+      }
       decorateReviewTargets();
       renderReviewPanel();
     }
@@ -2861,9 +2865,9 @@ document.addEventListener("DOMContentLoaded", async function () {
       button.dataset.reviewDuplicateCount = String(duplicateCount);
       button.dataset.reviewContext = context;
       button.dataset.html2canvasIgnore = 'true';
-      button.title = targetThreads.length > 0 ? 'View feedback for this block' : 'Comment on this block';
+      button.title = targetThreads.length > 0 ? 'View feedback or add another item' : 'Comment on this block';
       button.setAttribute('aria-label', targetThreads.length > 0
-        ? 'View feedback for ' + label + '. ' + targetThreads.length + ' review item' + (targetThreads.length === 1 ? '' : 's') + ' attached.'
+        ? 'View ' + targetThreads.length + ' review item' + (targetThreads.length === 1 ? '' : 's') + ' for ' + label + ' or add more feedback.'
         : 'Add feedback to ' + label);
 
       const icon = document.createElement('i');
@@ -2926,6 +2930,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     const target = findReviewTarget(thread.anchor);
     const item = document.createElement('article');
     item.className = 'review-thread' + (thread.resolved ? ' is-resolved' : '') + (!target ? ' is-orphaned' : '');
+    if (thread.id === activeReviewEditId) item.classList.add('is-review-thread-active');
     item.dataset.reviewId = thread.id;
     item.dataset.kind = thread.kind;
 
@@ -2974,6 +2979,14 @@ document.addEventListener("DOMContentLoaded", async function () {
 
     const actions = document.createElement('div');
     actions.className = 'review-thread-actions';
+    const editButton = document.createElement('button');
+    editButton.type = 'button';
+    editButton.className = 'review-thread-action';
+    editButton.dataset.reviewAction = 'edit';
+    editButton.dataset.reviewId = thread.id;
+    editButton.textContent = 'Edit';
+    editButton.setAttribute('aria-label', 'Edit ' + (thread.kind === 'suggestion' ? 'suggestion' : 'comment'));
+    actions.appendChild(editButton);
     const statusButton = document.createElement('button');
     statusButton.type = 'button';
     statusButton.className = 'review-thread-action';
@@ -3063,8 +3076,9 @@ document.addEventListener("DOMContentLoaded", async function () {
     });
     if (threads.length === 0) return false;
 
-    closeReviewComposer();
     setReviewFilter('all');
+    const target = findReviewTarget(anchor);
+    if (target) openReviewComposer(target, { focusInput: false });
 
     const matchingIds = new Set(threads.map(function(thread) { return thread.id; }));
     const matchingItems = Array.from(reviewList.querySelectorAll('.review-thread')).filter(function(item) {
@@ -3085,7 +3099,7 @@ document.addEventListener("DOMContentLoaded", async function () {
         item.classList.remove('is-review-thread-active');
       });
     }, 1800);
-    announceToScreenReader('Showing ' + threads.length + ' review item' + (threads.length === 1 ? '' : 's') + ' for this block.');
+    announceToScreenReader('Showing ' + threads.length + ' review item' + (threads.length === 1 ? '' : 's') + ' for this block. The composer is open for more feedback.');
     return true;
   }
 
@@ -3100,7 +3114,9 @@ document.addEventListener("DOMContentLoaded", async function () {
       reviewFeedbackLabel.textContent = reviewComposerKind === 'suggestion' ? 'Suggested change' : 'Comment';
     }
     if (reviewComposerTitle) {
-      reviewComposerTitle.textContent = reviewComposerKind === 'suggestion' ? 'Add suggestion' : 'Add comment';
+      reviewComposerTitle.textContent = activeReviewEditId
+        ? (reviewComposerKind === 'suggestion' ? 'Edit suggestion' : 'Edit comment')
+        : (reviewComposerKind === 'suggestion' ? 'Add suggestion' : 'Add comment');
     }
     if (reviewFeedbackInput) {
       reviewFeedbackInput.placeholder = reviewComposerKind === 'suggestion'
@@ -3108,7 +3124,9 @@ document.addEventListener("DOMContentLoaded", async function () {
         : 'Leave a focused comment for the author...';
     }
     if (reviewFeedbackSubmit) {
-      reviewFeedbackSubmit.textContent = reviewComposerKind === 'suggestion' ? 'Add suggestion' : 'Add comment';
+      reviewFeedbackSubmit.textContent = activeReviewEditId
+        ? 'Save changes'
+        : (reviewComposerKind === 'suggestion' ? 'Add suggestion' : 'Add comment');
     }
   }
 
@@ -3127,25 +3145,43 @@ document.addEventListener("DOMContentLoaded", async function () {
   function closeReviewComposer(options) {
     options = options || {};
     const returnAnchor = activeReviewAnchor;
+    const returnReviewId = activeReviewEditId;
     if (activeReviewAnchor) {
       const previousTarget = findReviewTarget(activeReviewAnchor);
       if (previousTarget) previousTarget.classList.remove('is-review-target-active');
     }
     activeReviewAnchor = null;
+    activeReviewEditId = null;
     if (reviewComposer) reviewComposer.hidden = true;
     if (reviewFeedbackInput) reviewFeedbackInput.value = '';
     if (reviewFeedbackCount) reviewFeedbackCount.textContent = '0 / ' + REVIEW_TEXT_LIMIT;
     if (reviewFeedbackSubmit) reviewFeedbackSubmit.disabled = true;
-    if (options.restoreFocus && reviewModeActive && !focusReviewPin(returnAnchor) && reviewPanelClose) {
-      reviewPanelClose.focus();
+    if (reviewList) {
+      reviewList.querySelectorAll('.is-review-thread-active').forEach(function(item) {
+        item.classList.remove('is-review-thread-active');
+      });
+    }
+    if (options.restoreFocus && reviewModeActive) {
+      const editButton = returnReviewId && reviewList
+        ? Array.from(reviewList.querySelectorAll('[data-review-action="edit"]')).find(function(button) {
+          return button.dataset.reviewId === returnReviewId;
+        })
+        : null;
+      if (editButton) {
+        editButton.focus();
+      } else if (!focusReviewPin(returnAnchor) && reviewPanelClose) {
+        reviewPanelClose.focus();
+      }
     }
   }
 
-  function openReviewComposer(target) {
+  function openReviewComposer(target, options) {
+    options = options || {};
     if (!target) return;
     const descriptor = getReviewAnchorDescriptor(target);
     if (!descriptor) return;
     closeReviewComposer();
+    activeReviewEditId = null;
     activeReviewAnchor = descriptor;
     target.classList.add('is-review-target-active');
     if (reviewComposerAnchor) {
@@ -3155,8 +3191,31 @@ document.addEventListener("DOMContentLoaded", async function () {
     if (reviewComposer) reviewComposer.hidden = false;
     if (reviewFeedbackInput) {
       reviewFeedbackInput.value = '';
-      reviewFeedbackInput.focus();
+      if (reviewFeedbackCount) reviewFeedbackCount.textContent = '0 / ' + REVIEW_TEXT_LIMIT;
+      if (reviewFeedbackSubmit) reviewFeedbackSubmit.disabled = true;
+      if (options.focusInput !== false) reviewFeedbackInput.focus();
+    }
+  }
+
+  function openReviewEditor(thread) {
+    if (!thread || !reviewComposer || !reviewFeedbackInput) return;
+    closeReviewComposer();
+    activeReviewEditId = thread.id;
+    activeReviewAnchor = Object.assign({}, thread.anchor);
+    const target = findReviewTarget(thread.anchor);
+    if (target) target.classList.add('is-review-target-active');
+    if (reviewComposerAnchor) {
+      reviewComposerAnchor.textContent = thread.anchor.label + ': ' + thread.anchor.excerpt;
     }
+    updateReviewComposerKind(thread.kind);
+    reviewComposer.hidden = false;
+    reviewFeedbackInput.value = thread.body;
+    if (reviewFeedbackCount) reviewFeedbackCount.textContent = reviewFeedbackInput.value.length + ' / ' + REVIEW_TEXT_LIMIT;
+    if (reviewFeedbackSubmit) reviewFeedbackSubmit.disabled = false;
+    renderReviewPanel();
+    reviewFeedbackInput.focus();
+    reviewFeedbackInput.setSelectionRange(reviewFeedbackInput.value.length, reviewFeedbackInput.value.length);
+    announceToScreenReader('Editing ' + (thread.kind === 'suggestion' ? 'suggestion.' : 'comment.'));
   }
 
   function persistReviewThreads(message) {
@@ -3172,6 +3231,29 @@ document.addEventListener("DOMContentLoaded", async function () {
     const body = reviewFeedbackInput.value.trim();
     if (!body) return;
     const returnAnchor = Object.assign({}, activeReviewAnchor);
+    if (activeReviewEditId) {
+      const reviewId = activeReviewEditId;
+      const thread = getActiveReviewThreads().find(function(item) { return item.id === reviewId; });
+      if (!thread) {
+        closeReviewComposer();
+        announceToScreenReader('This review item is no longer available.');
+        return;
+      }
+      thread.kind = reviewComposerKind;
+      thread.body = body.slice(0, REVIEW_TEXT_LIMIT);
+      thread.updatedAt = Date.now();
+      closeReviewComposer();
+      persistReviewThreads('Review item updated.');
+      requestAnimationFrame(function() {
+        const editButton = reviewList
+          ? Array.from(reviewList.querySelectorAll('[data-review-action="edit"]')).find(function(button) {
+            return button.dataset.reviewId === reviewId;
+          })
+          : null;
+        if (editButton) editButton.focus();
+      });
+      return;
+    }
     getActiveReviewThreads().push({
       id: createReviewId(),
       anchor: Object.assign({}, activeReviewAnchor),
@@ -3308,6 +3390,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     if (pending.reviewId) {
       const index = tab.reviewThreads.findIndex(function(thread) { return thread.id === pending.reviewId; });
       if (index >= 0) {
+        if (activeReviewEditId === pending.reviewId) closeReviewComposer();
         tab.reviewThreads.splice(index, 1);
         deletedCount = 1;
       }
@@ -3499,6 +3582,10 @@ document.addEventListener("DOMContentLoaded", async function () {
           focusReviewAnchor(thread);
           return;
         }
+        if (action === 'edit') {
+          openReviewEditor(thread);
+          return;
+        }
         if (action === 'toggle-resolved') {
           thread.resolved = !thread.resolved;
           thread.updatedAt = Date.now();
diff --git a/wiki/Features.md b/wiki/Features.md
index 14b25440..c3622147 100644
--- a/wiki/Features.md
+++ b/wiki/Features.md
@@ -58,9 +58,9 @@ Review mode provides a local feedback layer over the rendered document without i
 
 - The Review button opens a dedicated read-only preview workspace and restores the previous Editor, Split, or Preview layout when closed.
 - Review pins are attached to rendered YAML frontmatter tables, headings, paragraphs, fenced code blocks, and supported diagram containers, including Mermaid and the other diagram engines.
-- Empty targets show a plus that opens the composer. Targets with feedback show the review icon and count; selecting the count or reviewed content opens the existing feedback in the panel.
+- Empty targets show a plus that opens the composer. Targets with feedback show the review icon and count; selecting the count or reviewed content opens the existing feedback and a blank composer for adding another item to the same block.
 - A reviewer can add either a comment or a suggestion. Both are feedback records; suggestions do not apply source changes automatically.
-- Threads can be resolved, reopened, or deleted individually and filtered by status. The panel also provides Copy summary, Resolve all, and confirmation-protected Delete all actions.
+- Threads can be edited in the existing composer, resolved, reopened, or deleted individually and filtered by status. The panel also provides Copy summary, Resolve all, and confirmation-protected Delete all actions.
 - Open-thread counts appear in the desktop header and mobile menu.
 - Review controls support keyboard focus, screen-reader labels, dark mode, RTL layout, a compact desktop side panel, a tablet drawer, and a touch-friendly mobile bottom sheet.
 - Comments and suggestions use the existing app accent, button surfaces, borders, hover states, disabled states, and Bootstrap Icons; the feature does not introduce a separate color palette.
diff --git a/wiki/Usage-Guide.md b/wiki/Usage-Guide.md
index b7696596..9adf07bf 100644
--- a/wiki/Usage-Guide.md
+++ b/wiki/Usage-Guide.md
@@ -51,8 +51,8 @@ Use Review when you want to leave structured feedback without editing the Markdo
 2. Select the plus pin on a rendered YAML frontmatter table, heading, paragraph, code block, or diagram.
 3. Choose **Comment** for general feedback or **Suggestion** for a proposed change.
 4. Enter the feedback and add it to the document review.
-5. After feedback is attached, select its review icon and count—or the reviewed content itself—to open the saved item in the panel.
-6. Use **Resolve** or **Reopen** to manage a thread. The panel toolbar can copy a Markdown summary, resolve every open item, or delete all feedback after confirmation. Deleting an individual item also uses an in-app confirmation dialog.
+5. After feedback is attached, select its review icon and count—or the reviewed content itself—to open the saved item and a blank composer for adding more feedback to the same block.
+6. Select **Edit** to update an existing comment or suggestion, then select **Save changes**. Use **Resolve** or **Reopen** to manage a thread. The panel toolbar can copy a Markdown summary, resolve every open item, or delete all feedback after confirmation. Deleting an individual item also uses an in-app confirmation dialog.
 
 On desktop, Review opens as a compact side panel beside the preview. Tablet layouts use a side drawer, while phones use a taller bottom sheet with larger filter, composer, thread, and pin controls for touch. Light and dark themes use the same existing app colors, borders, hover states, and icons.
 

From 894842ef7c7a6792ab1555f397b13469b46d3eea Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Tue, 14 Jul 2026 01:14:27 +0530
Subject: [PATCH 15/18] fix(review): keep saved feedback visible

---
 CHANGELOG.md                       |  2 +-
 desktop-app/resources/index.html   | 62 +++++++++++++++---------------
 desktop-app/resources/js/script.js | 15 +++++++-
 desktop-app/resources/styles.css   | 13 ++++++-
 index.html                         | 62 +++++++++++++++---------------
 script.js                          | 15 +++++++-
 styles.css                         | 13 ++++++-
 wiki/Features.md                   |  2 +-
 wiki/Usage-Guide.md                |  2 +-
 9 files changed, 115 insertions(+), 71 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index de472387..f9c46d50 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@ Non-code commits (documentation, planning, README-only updates) are excluded.
 
 ## Unreleased
 
-- **Comments & Suggestions UI:** Simplified the Review panel, composer, suggestion cards, and preview pins using the app's existing accent, button, border, hover, disabled, and theme tokens. Review target buttons now match the main toolbar controls, align in a straight column at the preview's right edge, show a plus before feedback exists, and switch to the review icon and count after feedback is added. YAML frontmatter tables are reviewable, reviewed text has clear spacing from its side marker, and clicking reviewed content or its count opens the attached feedback together with the composer so more items can be added to the same block. Existing comments and suggestions can now be edited in place. Refined the layout into a compact desktop side panel, tablet drawer, and touch-friendly mobile bottom sheet without introducing a separate color palette.
+- **Comments & Suggestions UI:** Simplified the Review panel, composer, suggestion cards, and preview pins using the app's existing accent, button, border, hover, disabled, and theme tokens. Review target buttons now match the main toolbar controls, align in a straight column at the preview's right edge, show a plus before feedback exists, and switch to the review icon and count after feedback is added. YAML frontmatter tables are reviewable, reviewed text has clear spacing from its side marker, and clicking reviewed content or its count opens the attached feedback together with the composer so more items can be added to the same block. Existing comments and suggestions can now be edited in place. Saved feedback now appears before the composer in one shared scroll area, keeping previous reviews visible in short panels while new and edited feedback scrolls into view. Refined the layout into a compact desktop side panel, tablet drawer, and touch-friendly mobile bottom sheet without introducing a separate color palette.
 
 ---
 
diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index cc81a7ee..733675ad 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -1136,38 +1136,40 @@ <h2 id="review-panel-title">Comments &amp; suggestions</h2>
                     </div>
                 </div>
 
-                <section id="review-composer" class="review-composer" aria-labelledby="review-composer-title" hidden>
-                    <div class="review-composer-heading">
-                        <div>
-                            <p class="review-panel-eyebrow">Selected block</p>
-                            <h3 id="review-composer-title">Add feedback</h3>
-                        </div>
-                        <button id="review-composer-cancel" class="review-icon-btn" type="button" aria-label="Cancel feedback" title="Cancel">
-                            <i class="bi bi-x" aria-hidden="true"></i>
-                        </button>
+                <div class="review-panel-body">
+                    <div id="review-list" class="review-list" aria-live="polite"></div>
+                    <div id="review-empty-state" class="review-empty-state">
+                        <i class="bi bi-chat-square-dots" aria-hidden="true"></i>
+                        <h3>No open feedback</h3>
+                        <p>Select a comment pin in the preview to add feedback.</p>
                     </div>
-                    <p id="review-composer-anchor" class="review-anchor-preview"></p>
-                    <div class="review-kind-group" role="group" aria-label="Feedback type">
-                        <button class="review-kind-btn is-active" type="button" data-review-kind="comment" aria-pressed="true">
-                            <i class="bi bi-chat-left-text" aria-hidden="true"></i> Comment
-                        </button>
-                        <button class="review-kind-btn" type="button" data-review-kind="suggestion" aria-pressed="false">
-                            <i class="bi bi-pencil-square" aria-hidden="true"></i> Suggestion
-                        </button>
-                    </div>
-                    <label id="review-feedback-label" class="review-feedback-label" for="review-feedback-input">Comment</label>
-                    <textarea id="review-feedback-input" class="review-feedback-input" rows="4" maxlength="2000" placeholder="Leave a focused comment for the author..."></textarea>
-                    <div class="review-composer-footer">
-                        <span id="review-feedback-count" class="review-feedback-count">0 / 2000</span>
-                        <button id="review-feedback-submit" class="review-primary-btn" type="button" disabled>Add comment</button>
-                    </div>
-                </section>
 
-                <div id="review-list" class="review-list" aria-live="polite"></div>
-                <div id="review-empty-state" class="review-empty-state">
-                    <i class="bi bi-chat-square-dots" aria-hidden="true"></i>
-                    <h3>No open feedback</h3>
-                    <p>Select a comment pin in the preview to add feedback.</p>
+                    <section id="review-composer" class="review-composer" aria-labelledby="review-composer-title" hidden>
+                        <div class="review-composer-heading">
+                            <div>
+                                <p class="review-panel-eyebrow">Selected block</p>
+                                <h3 id="review-composer-title">Add feedback</h3>
+                            </div>
+                            <button id="review-composer-cancel" class="review-icon-btn" type="button" aria-label="Cancel feedback" title="Cancel">
+                                <i class="bi bi-x" aria-hidden="true"></i>
+                            </button>
+                        </div>
+                        <p id="review-composer-anchor" class="review-anchor-preview"></p>
+                        <div class="review-kind-group" role="group" aria-label="Feedback type">
+                            <button class="review-kind-btn is-active" type="button" data-review-kind="comment" aria-pressed="true">
+                                <i class="bi bi-chat-left-text" aria-hidden="true"></i> Comment
+                            </button>
+                            <button class="review-kind-btn" type="button" data-review-kind="suggestion" aria-pressed="false">
+                                <i class="bi bi-pencil-square" aria-hidden="true"></i> Suggestion
+                            </button>
+                        </div>
+                        <label id="review-feedback-label" class="review-feedback-label" for="review-feedback-input">Comment</label>
+                        <textarea id="review-feedback-input" class="review-feedback-input" rows="4" maxlength="2000" placeholder="Leave a focused comment for the author..."></textarea>
+                        <div class="review-composer-footer">
+                            <span id="review-feedback-count" class="review-feedback-count">0 / 2000</span>
+                            <button id="review-feedback-submit" class="review-primary-btn" type="button" disabled>Add comment</button>
+                        </div>
+                    </section>
                 </div>
             </aside>
         </main>
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index 8023e7e6..1936acff 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -348,6 +348,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   const reviewDeleteClose = document.getElementById('review-delete-close');
   const reviewDeleteCancel = document.getElementById('review-delete-cancel');
   const reviewDeleteConfirm = document.getElementById('review-delete-confirm');
+  const reviewPanelBody = document.querySelector('.review-panel-body');
   const reviewComposer = document.getElementById('review-composer');
   const reviewComposerTitle = document.getElementById('review-composer-title');
   const reviewComposerAnchor = document.getElementById('review-composer-anchor');
@@ -3142,6 +3143,16 @@ document.addEventListener("DOMContentLoaded", async function () {
     return true;
   }
 
+  function focusReviewComposerInput() {
+    if (!reviewFeedbackInput) return;
+    reviewFeedbackInput.focus();
+    requestAnimationFrame(function() {
+      if (reviewComposer && !reviewComposer.hidden && reviewPanelBody) {
+        reviewPanelBody.scrollTop = reviewPanelBody.scrollHeight;
+      }
+    });
+  }
+
   function closeReviewComposer(options) {
     options = options || {};
     const returnAnchor = activeReviewAnchor;
@@ -3193,7 +3204,7 @@ document.addEventListener("DOMContentLoaded", async function () {
       reviewFeedbackInput.value = '';
       if (reviewFeedbackCount) reviewFeedbackCount.textContent = '0 / ' + REVIEW_TEXT_LIMIT;
       if (reviewFeedbackSubmit) reviewFeedbackSubmit.disabled = true;
-      if (options.focusInput !== false) reviewFeedbackInput.focus();
+      if (options.focusInput !== false) focusReviewComposerInput();
     }
   }
 
@@ -3213,7 +3224,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     if (reviewFeedbackCount) reviewFeedbackCount.textContent = reviewFeedbackInput.value.length + ' / ' + REVIEW_TEXT_LIMIT;
     if (reviewFeedbackSubmit) reviewFeedbackSubmit.disabled = false;
     renderReviewPanel();
-    reviewFeedbackInput.focus();
+    focusReviewComposerInput();
     reviewFeedbackInput.setSelectionRange(reviewFeedbackInput.value.length, reviewFeedbackInput.value.length);
     announceToScreenReader('Editing ' + (thread.kind === 'suggestion' ? 'suggestion.' : 'comment.'));
   }
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index aad8c60d..3ed9fd80 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -6136,6 +6136,14 @@ html[data-theme="dark"] .mermaid svg {
   gap: 4px;
 }
 
+.review-panel-body {
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
 .review-filter-group,
 .review-kind-group {
   display: inline-flex;
@@ -6169,6 +6177,7 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .review-composer {
+  flex: 0 0 auto;
   margin: 14px 14px 4px;
   padding: 14px;
   background: var(--header-bg);
@@ -6272,8 +6281,8 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .review-list {
-  flex: 1;
-  overflow-y: auto;
+  flex: 0 0 auto;
+  overflow: visible;
   padding: 10px 14px 18px;
 }
 
diff --git a/index.html b/index.html
index c0d5ca85..2f2e8c47 100644
--- a/index.html
+++ b/index.html
@@ -1229,38 +1229,40 @@ <h2 id="review-panel-title">Comments &amp; suggestions</h2>
                     </div>
                 </div>
 
-                <section id="review-composer" class="review-composer" aria-labelledby="review-composer-title" hidden>
-                    <div class="review-composer-heading">
-                        <div>
-                            <p class="review-panel-eyebrow">Selected block</p>
-                            <h3 id="review-composer-title">Add feedback</h3>
-                        </div>
-                        <button id="review-composer-cancel" class="review-icon-btn" type="button" aria-label="Cancel feedback" title="Cancel">
-                            <i class="bi bi-x" aria-hidden="true"></i>
-                        </button>
+                <div class="review-panel-body">
+                    <div id="review-list" class="review-list" aria-live="polite"></div>
+                    <div id="review-empty-state" class="review-empty-state">
+                        <i class="bi bi-chat-square-dots" aria-hidden="true"></i>
+                        <h3>No open feedback</h3>
+                        <p>Select a comment pin in the preview to add feedback.</p>
                     </div>
-                    <p id="review-composer-anchor" class="review-anchor-preview"></p>
-                    <div class="review-kind-group" role="group" aria-label="Feedback type">
-                        <button class="review-kind-btn is-active" type="button" data-review-kind="comment" aria-pressed="true">
-                            <i class="bi bi-chat-left-text" aria-hidden="true"></i> Comment
-                        </button>
-                        <button class="review-kind-btn" type="button" data-review-kind="suggestion" aria-pressed="false">
-                            <i class="bi bi-pencil-square" aria-hidden="true"></i> Suggestion
-                        </button>
-                    </div>
-                    <label id="review-feedback-label" class="review-feedback-label" for="review-feedback-input">Comment</label>
-                    <textarea id="review-feedback-input" class="review-feedback-input" rows="4" maxlength="2000" placeholder="Leave a focused comment for the author..."></textarea>
-                    <div class="review-composer-footer">
-                        <span id="review-feedback-count" class="review-feedback-count">0 / 2000</span>
-                        <button id="review-feedback-submit" class="review-primary-btn" type="button" disabled>Add comment</button>
-                    </div>
-                </section>
 
-                <div id="review-list" class="review-list" aria-live="polite"></div>
-                <div id="review-empty-state" class="review-empty-state">
-                    <i class="bi bi-chat-square-dots" aria-hidden="true"></i>
-                    <h3>No open feedback</h3>
-                    <p>Select a comment pin in the preview to add feedback.</p>
+                    <section id="review-composer" class="review-composer" aria-labelledby="review-composer-title" hidden>
+                        <div class="review-composer-heading">
+                            <div>
+                                <p class="review-panel-eyebrow">Selected block</p>
+                                <h3 id="review-composer-title">Add feedback</h3>
+                            </div>
+                            <button id="review-composer-cancel" class="review-icon-btn" type="button" aria-label="Cancel feedback" title="Cancel">
+                                <i class="bi bi-x" aria-hidden="true"></i>
+                            </button>
+                        </div>
+                        <p id="review-composer-anchor" class="review-anchor-preview"></p>
+                        <div class="review-kind-group" role="group" aria-label="Feedback type">
+                            <button class="review-kind-btn is-active" type="button" data-review-kind="comment" aria-pressed="true">
+                                <i class="bi bi-chat-left-text" aria-hidden="true"></i> Comment
+                            </button>
+                            <button class="review-kind-btn" type="button" data-review-kind="suggestion" aria-pressed="false">
+                                <i class="bi bi-pencil-square" aria-hidden="true"></i> Suggestion
+                            </button>
+                        </div>
+                        <label id="review-feedback-label" class="review-feedback-label" for="review-feedback-input">Comment</label>
+                        <textarea id="review-feedback-input" class="review-feedback-input" rows="4" maxlength="2000" placeholder="Leave a focused comment for the author..."></textarea>
+                        <div class="review-composer-footer">
+                            <span id="review-feedback-count" class="review-feedback-count">0 / 2000</span>
+                            <button id="review-feedback-submit" class="review-primary-btn" type="button" disabled>Add comment</button>
+                        </div>
+                    </section>
                 </div>
             </aside>
         </main>
diff --git a/script.js b/script.js
index 8023e7e6..1936acff 100644
--- a/script.js
+++ b/script.js
@@ -348,6 +348,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   const reviewDeleteClose = document.getElementById('review-delete-close');
   const reviewDeleteCancel = document.getElementById('review-delete-cancel');
   const reviewDeleteConfirm = document.getElementById('review-delete-confirm');
+  const reviewPanelBody = document.querySelector('.review-panel-body');
   const reviewComposer = document.getElementById('review-composer');
   const reviewComposerTitle = document.getElementById('review-composer-title');
   const reviewComposerAnchor = document.getElementById('review-composer-anchor');
@@ -3142,6 +3143,16 @@ document.addEventListener("DOMContentLoaded", async function () {
     return true;
   }
 
+  function focusReviewComposerInput() {
+    if (!reviewFeedbackInput) return;
+    reviewFeedbackInput.focus();
+    requestAnimationFrame(function() {
+      if (reviewComposer && !reviewComposer.hidden && reviewPanelBody) {
+        reviewPanelBody.scrollTop = reviewPanelBody.scrollHeight;
+      }
+    });
+  }
+
   function closeReviewComposer(options) {
     options = options || {};
     const returnAnchor = activeReviewAnchor;
@@ -3193,7 +3204,7 @@ document.addEventListener("DOMContentLoaded", async function () {
       reviewFeedbackInput.value = '';
       if (reviewFeedbackCount) reviewFeedbackCount.textContent = '0 / ' + REVIEW_TEXT_LIMIT;
       if (reviewFeedbackSubmit) reviewFeedbackSubmit.disabled = true;
-      if (options.focusInput !== false) reviewFeedbackInput.focus();
+      if (options.focusInput !== false) focusReviewComposerInput();
     }
   }
 
@@ -3213,7 +3224,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     if (reviewFeedbackCount) reviewFeedbackCount.textContent = reviewFeedbackInput.value.length + ' / ' + REVIEW_TEXT_LIMIT;
     if (reviewFeedbackSubmit) reviewFeedbackSubmit.disabled = false;
     renderReviewPanel();
-    reviewFeedbackInput.focus();
+    focusReviewComposerInput();
     reviewFeedbackInput.setSelectionRange(reviewFeedbackInput.value.length, reviewFeedbackInput.value.length);
     announceToScreenReader('Editing ' + (thread.kind === 'suggestion' ? 'suggestion.' : 'comment.'));
   }
diff --git a/styles.css b/styles.css
index aad8c60d..3ed9fd80 100644
--- a/styles.css
+++ b/styles.css
@@ -6136,6 +6136,14 @@ html[data-theme="dark"] .mermaid svg {
   gap: 4px;
 }
 
+.review-panel-body {
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
 .review-filter-group,
 .review-kind-group {
   display: inline-flex;
@@ -6169,6 +6177,7 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .review-composer {
+  flex: 0 0 auto;
   margin: 14px 14px 4px;
   padding: 14px;
   background: var(--header-bg);
@@ -6272,8 +6281,8 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .review-list {
-  flex: 1;
-  overflow-y: auto;
+  flex: 0 0 auto;
+  overflow: visible;
   padding: 10px 14px 18px;
 }
 
diff --git a/wiki/Features.md b/wiki/Features.md
index c3622147..9b2b4862 100644
--- a/wiki/Features.md
+++ b/wiki/Features.md
@@ -58,7 +58,7 @@ Review mode provides a local feedback layer over the rendered document without i
 
 - The Review button opens a dedicated read-only preview workspace and restores the previous Editor, Split, or Preview layout when closed.
 - Review pins are attached to rendered YAML frontmatter tables, headings, paragraphs, fenced code blocks, and supported diagram containers, including Mermaid and the other diagram engines.
-- Empty targets show a plus that opens the composer. Targets with feedback show the review icon and count; selecting the count or reviewed content opens the existing feedback and a blank composer for adding another item to the same block.
+- Empty targets show a plus that opens and focuses the composer. Targets with feedback show the review icon and count; selecting the count or reviewed content keeps the saved feedback visible before the composer in the panel's shared scroll area.
 - A reviewer can add either a comment or a suggestion. Both are feedback records; suggestions do not apply source changes automatically.
 - Threads can be edited in the existing composer, resolved, reopened, or deleted individually and filtered by status. The panel also provides Copy summary, Resolve all, and confirmation-protected Delete all actions.
 - Open-thread counts appear in the desktop header and mobile menu.
diff --git a/wiki/Usage-Guide.md b/wiki/Usage-Guide.md
index 9adf07bf..289776a8 100644
--- a/wiki/Usage-Guide.md
+++ b/wiki/Usage-Guide.md
@@ -51,7 +51,7 @@ Use Review when you want to leave structured feedback without editing the Markdo
 2. Select the plus pin on a rendered YAML frontmatter table, heading, paragraph, code block, or diagram.
 3. Choose **Comment** for general feedback or **Suggestion** for a proposed change.
 4. Enter the feedback and add it to the document review.
-5. After feedback is attached, select its review icon and count—or the reviewed content itself—to open the saved item and a blank composer for adding more feedback to the same block.
+5. After feedback is attached, select its review icon and count—or the reviewed content itself—to show the saved item first. The composer follows it in the same scrollable panel area for adding more feedback to the block.
 6. Select **Edit** to update an existing comment or suggestion, then select **Save changes**. Use **Resolve** or **Reopen** to manage a thread. The panel toolbar can copy a Markdown summary, resolve every open item, or delete all feedback after confirmation. Deleting an individual item also uses an in-app confirmation dialog.
 
 On desktop, Review opens as a compact side panel beside the preview. Tablet layouts use a side drawer, while phones use a taller bottom sheet with larger filter, composer, thread, and pin controls for touch. Light and dark themes use the same existing app colors, borders, hover states, and icons.

From 4e6d44b30961f9e0c4f5de4c0d49b806117c3440 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Tue, 14 Jul 2026 01:39:45 +0530
Subject: [PATCH 16/18] fix(review): separate read and add controls

---
 CHANGELOG.md                       |  2 +-
 README.md                          |  2 +-
 desktop-app/resources/js/script.js | 98 ++++++++++++++++++++----------
 desktop-app/resources/styles.css   | 40 +++++++++++-
 script.js                          | 98 ++++++++++++++++++++----------
 styles.css                         | 40 +++++++++++-
 wiki/Features.md                   |  2 +-
 wiki/Usage-Guide.md                |  2 +-
 8 files changed, 212 insertions(+), 72 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f9c46d50..88b4e9c8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@ Non-code commits (documentation, planning, README-only updates) are excluded.
 
 ## Unreleased
 
-- **Comments & Suggestions UI:** Simplified the Review panel, composer, suggestion cards, and preview pins using the app's existing accent, button, border, hover, disabled, and theme tokens. Review target buttons now match the main toolbar controls, align in a straight column at the preview's right edge, show a plus before feedback exists, and switch to the review icon and count after feedback is added. YAML frontmatter tables are reviewable, reviewed text has clear spacing from its side marker, and clicking reviewed content or its count opens the attached feedback together with the composer so more items can be added to the same block. Existing comments and suggestions can now be edited in place. Saved feedback now appears before the composer in one shared scroll area, keeping previous reviews visible in short panels while new and edited feedback scrolls into view. Refined the layout into a compact desktop side panel, tablet drawer, and touch-friendly mobile bottom sheet without introducing a separate color palette.
+- **Comments & Suggestions UI:** Simplified the Review panel, composer, suggestion cards, and preview pins using the app's existing accent, button, border, hover, disabled, and theme tokens. Review target buttons now match the main toolbar controls, align in a straight column at the preview's right edge, and show a plus before feedback exists. Reviewed targets provide separate controls for reading saved feedback and adding another item, so opening the review count no longer opens the composer. YAML frontmatter tables are reviewable, reviewed text has clear spacing from its side marker, and existing comments and suggestions can be edited in place. Saved feedback appears before the composer in one shared scroll area, keeping previous reviews visible in short panels while new and edited feedback scrolls into view. Refined the layout into a compact desktop side panel, tablet drawer, and touch-friendly mobile bottom sheet without introducing a separate color palette.
 
 ---
 
diff --git a/README.md b/README.md
index c96ce416..731377ab 100644
--- a/README.md
+++ b/README.md
@@ -129,7 +129,7 @@ Markdown Viewer works well as a Markdown diagram editor for technical notes, doc
 
 ## Sharing, Collaboration, and Export
 
-- **Comments & Suggestions** provides a per-document review layer. Review pins attach comments or suggestions to rendered YAML frontmatter tables, headings, paragraphs, code blocks, and diagrams while the Markdown stays read-only. A plus opens the composer; a review count or reviewed block opens its existing feedback and the composer for adding another item to the same block. Threads can be edited, resolved, reopened, deleted, or copied as a Markdown summary. The interface uses a desktop side panel, a tablet drawer, and a touch-friendly mobile bottom sheet. Review data stays with the local tab workspace, is excluded from Share Snapshot, and is relayed only while an existing Live Share room is active.
+- **Comments & Suggestions** provides a per-document review layer. Review pins attach comments or suggestions to rendered YAML frontmatter tables, headings, paragraphs, code blocks, and diagrams while the Markdown stays read-only. Empty targets show a plus. Reviewed targets show two separate controls: the review count opens saved feedback, and the adjacent plus opens the composer for another item. Threads can be edited, resolved, reopened, deleted, or copied as a Markdown summary. The interface uses a desktop side panel, a tablet drawer, and a touch-friendly mobile bottom sheet. Review data stays with the local tab workspace, is excluded from Share Snapshot, and is relayed only while an existing Live Share room is active.
 - **Share Snapshot** creates quick links for point-in-time Markdown sharing. Small documents can stay in the URL hash; larger snapshots use temporary Cloudflare KV storage for up to 90 days when that backend is configured. Snapshot links are bearer links: anyone who has the link can open it.
 <p align="center">
   <img src="https://github.com/user-attachments/assets/e62ca1a0-011a-4b01-90f9-e72638b9a6d5" alt="Share Snapshot" width="90%" />
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index 1936acff..74b7e823 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -2766,24 +2766,24 @@ document.addEventListener("DOMContentLoaded", async function () {
     const paneRect = previewPaneElement.getBoundingClientRect();
     const previewRect = markdownPreview.getBoundingClientRect();
     const pinRight = previewRect.right - 4;
-    reviewPinsLayer.querySelectorAll('.review-target-button').forEach(function(button) {
+    reviewPinsLayer.querySelectorAll('.review-target-actions').forEach(function(actions) {
       const anchor = {
-        key: button.dataset.reviewAnchor,
-        duplicateCount: Number(button.dataset.reviewDuplicateCount) || null,
-        context: button.dataset.reviewContext || null
+        key: actions.dataset.reviewAnchor,
+        duplicateCount: Number(actions.dataset.reviewDuplicateCount) || null,
+        context: actions.dataset.reviewContext || null
       };
       const target = findReviewTarget(anchor);
       if (!target) {
-        button.hidden = true;
+        actions.hidden = true;
         return;
       }
-      button.hidden = false;
+      actions.hidden = false;
       const targetRect = target.getBoundingClientRect();
       const isDiagram = target.dataset.reviewType === 'diagram';
       const top = isDiagram ? targetRect.bottom - 40 : targetRect.top + 4;
-      button.style.top = (top - paneRect.top + previewPaneElement.scrollTop) + 'px';
-      button.style.left = (pinRight - paneRect.left + previewPaneElement.scrollLeft) + 'px';
-      button.style.transform = 'translateX(-100%)';
+      actions.style.top = (top - paneRect.top + previewPaneElement.scrollTop) + 'px';
+      actions.style.left = (pinRight - paneRect.left + previewPaneElement.scrollLeft) + 'px';
+      actions.style.transform = 'translateX(-100%)';
     });
   }
 
@@ -2858,27 +2858,54 @@ document.addEventListener("DOMContentLoaded", async function () {
       target.classList.add('review-target', 'review-target--' + type);
       target.classList.toggle('has-review-thread', targetThreads.length > 0);
 
-      const button = document.createElement('button');
-      button.type = 'button';
-      button.className = 'tool-button review-target-button';
-      button.classList.toggle('is-active', targetThreads.length > 0);
-      button.dataset.reviewAnchor = anchorKey;
-      button.dataset.reviewDuplicateCount = String(duplicateCount);
-      button.dataset.reviewContext = context;
-      button.dataset.html2canvasIgnore = 'true';
-      button.title = targetThreads.length > 0 ? 'View feedback or add another item' : 'Comment on this block';
-      button.setAttribute('aria-label', targetThreads.length > 0
-        ? 'View ' + targetThreads.length + ' review item' + (targetThreads.length === 1 ? '' : 's') + ' for ' + label + ' or add more feedback.'
-        : 'Add feedback to ' + label);
+      const actions = document.createElement('div');
+      actions.className = 'review-target-actions';
+      actions.dataset.reviewAnchor = anchorKey;
+      actions.dataset.reviewDuplicateCount = String(duplicateCount);
+      actions.dataset.reviewContext = context;
+      actions.dataset.html2canvasIgnore = 'true';
+      actions.setAttribute('role', 'group');
+      actions.setAttribute('aria-label', 'Review actions for ' + label);
+
+      function createTargetButton(command, iconClass, title, ariaLabel) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'tool-button review-target-button';
+        button.dataset.reviewCommand = command;
+        button.dataset.reviewAnchor = anchorKey;
+        button.dataset.reviewDuplicateCount = String(duplicateCount);
+        button.dataset.reviewContext = context;
+        button.dataset.html2canvasIgnore = 'true';
+        button.title = title;
+        button.setAttribute('aria-label', ariaLabel);
+        button.setAttribute('aria-controls', command === 'read' ? 'review-list' : 'review-composer');
+        const icon = document.createElement('i');
+        icon.className = iconClass;
+        icon.setAttribute('aria-hidden', 'true');
+        button.appendChild(icon);
+        return button;
+      }
 
-      const icon = document.createElement('i');
-      icon.className = targetThreads.length > 0 ? 'bi bi-chat-square-text' : 'bi bi-plus-lg';
-      icon.setAttribute('aria-hidden', 'true');
-      button.appendChild(icon);
       if (targetThreads.length > 0) {
-        button.dataset.reviewCount = String(targetThreads.length);
+        const reviewLabel = targetThreads.length + ' review item' + (targetThreads.length === 1 ? '' : 's');
+        const readButton = createTargetButton(
+          'read',
+          'bi bi-chat-square-text',
+          'Read ' + reviewLabel,
+          'Read ' + reviewLabel + ' for ' + label
+        );
+        readButton.classList.add('is-active');
+        readButton.dataset.reviewCount = String(targetThreads.length);
+        actions.appendChild(readButton);
       }
-      if (reviewPinsLayer) reviewPinsLayer.appendChild(button);
+
+      actions.appendChild(createTargetButton(
+        'add',
+        'bi bi-plus-lg',
+        targetThreads.length > 0 ? 'Add another review item' : 'Add feedback',
+        'Add feedback to ' + label
+      ));
+      if (reviewPinsLayer) reviewPinsLayer.appendChild(actions);
     });
 
     observeReviewPinLayout();
@@ -3077,9 +3104,8 @@ document.addEventListener("DOMContentLoaded", async function () {
     });
     if (threads.length === 0) return false;
 
+    closeReviewComposer();
     setReviewFilter('all');
-    const target = findReviewTarget(anchor);
-    if (target) openReviewComposer(target, { focusInput: false });
 
     const matchingIds = new Set(threads.map(function(thread) { return thread.id; }));
     const matchingItems = Array.from(reviewList.querySelectorAll('.review-thread')).filter(function(item) {
@@ -3100,7 +3126,7 @@ document.addEventListener("DOMContentLoaded", async function () {
         item.classList.remove('is-review-thread-active');
       });
     }, 1800);
-    announceToScreenReader('Showing ' + threads.length + ' review item' + (threads.length === 1 ? '' : 's') + ' for this block. The composer is open for more feedback.');
+    announceToScreenReader('Showing ' + threads.length + ' review item' + (threads.length === 1 ? '' : 's') + ' for this block.');
     return true;
   }
 
@@ -3134,10 +3160,13 @@ document.addEventListener("DOMContentLoaded", async function () {
   function focusReviewPin(anchor) {
     const target = findReviewTarget(anchor);
     if (!target || !reviewPinsLayer) return false;
-    const button = Array.from(reviewPinsLayer.querySelectorAll('.review-target-button')).find(function(candidate) {
+    const matchingButtons = Array.from(reviewPinsLayer.querySelectorAll('.review-target-button')).filter(function(candidate) {
       return candidate.dataset.reviewAnchor === target.dataset.reviewAnchor &&
         candidate.dataset.reviewContext === target.dataset.reviewContext;
-    }) || null;
+    });
+    const button = matchingButtons.find(function(candidate) {
+      return candidate.dataset.reviewCommand === 'read';
+    }) || matchingButtons[0] || null;
     if (!button) return false;
     button.focus({ preventScroll: true });
     return true;
@@ -3558,7 +3587,10 @@ document.addEventListener("DOMContentLoaded", async function () {
           duplicateCount: Number(button.dataset.reviewDuplicateCount) || null,
           context: button.dataset.reviewContext || null
         };
-        if (showReviewThreadsForAnchor(anchor)) return;
+        if (button.dataset.reviewCommand === 'read') {
+          showReviewThreadsForAnchor(anchor);
+          return;
+        }
         const target = findReviewTarget(anchor);
         openReviewComposer(target);
       });
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 3ed9fd80..befebbc4 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -6453,6 +6453,14 @@ html[data-theme="dark"] .mermaid svg {
   padding-block-end: 44px;
 }
 
+#markdown-preview .review-target.has-review-thread:not(.review-target--diagram):not(.review-target--table) {
+  padding-inline-end: 76px;
+}
+
+#markdown-preview .review-target--table.has-review-thread {
+  max-width: calc(100% - 76px);
+}
+
 #markdown-preview .review-target.is-review-target-active {
   outline: none;
 }
@@ -6490,11 +6498,24 @@ html[data-theme="dark"] .mermaid svg {
   display: none !important;
 }
 
-.review-target-button {
+.review-target-actions {
   position: absolute;
   z-index: 8;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  pointer-events: auto;
+}
+
+.review-target-actions[hidden] {
+  display: none !important;
+}
+
+.review-target-button {
+  position: relative;
   min-width: 28px;
   height: 28px;
+  flex: 0 0 auto;
   pointer-events: auto;
 }
 
@@ -6544,6 +6565,14 @@ html[data-theme="dark"] .mermaid svg {
     height: 40px;
   }
 
+  #markdown-preview .review-target.has-review-thread:not(.review-target--diagram):not(.review-target--table) {
+    padding-inline-end: 96px;
+  }
+
+  #markdown-preview .review-target--table.has-review-thread {
+    max-width: calc(100% - 96px);
+  }
+
   .review-filter-btn,
   .review-kind-btn,
   .review-primary-btn,
@@ -6622,6 +6651,14 @@ html[data-theme="dark"] .mermaid svg {
   #markdown-preview .review-target--diagram {
     padding-block-end: 56px;
   }
+
+  #markdown-preview .review-target.has-review-thread:not(.review-target--diagram):not(.review-target--table) {
+    padding-inline-end: 104px;
+  }
+
+  #markdown-preview .review-target--table.has-review-thread {
+    max-width: calc(100% - 104px);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -6661,6 +6698,7 @@ html[data-theme="dark"] .mermaid svg {
   .review-panel,
   .review-panel-backdrop,
   .review-pins-layer,
+  .review-target-actions,
   .review-target-button {
     display: none !important;
   }
diff --git a/script.js b/script.js
index 1936acff..74b7e823 100644
--- a/script.js
+++ b/script.js
@@ -2766,24 +2766,24 @@ document.addEventListener("DOMContentLoaded", async function () {
     const paneRect = previewPaneElement.getBoundingClientRect();
     const previewRect = markdownPreview.getBoundingClientRect();
     const pinRight = previewRect.right - 4;
-    reviewPinsLayer.querySelectorAll('.review-target-button').forEach(function(button) {
+    reviewPinsLayer.querySelectorAll('.review-target-actions').forEach(function(actions) {
       const anchor = {
-        key: button.dataset.reviewAnchor,
-        duplicateCount: Number(button.dataset.reviewDuplicateCount) || null,
-        context: button.dataset.reviewContext || null
+        key: actions.dataset.reviewAnchor,
+        duplicateCount: Number(actions.dataset.reviewDuplicateCount) || null,
+        context: actions.dataset.reviewContext || null
       };
       const target = findReviewTarget(anchor);
       if (!target) {
-        button.hidden = true;
+        actions.hidden = true;
         return;
       }
-      button.hidden = false;
+      actions.hidden = false;
       const targetRect = target.getBoundingClientRect();
       const isDiagram = target.dataset.reviewType === 'diagram';
       const top = isDiagram ? targetRect.bottom - 40 : targetRect.top + 4;
-      button.style.top = (top - paneRect.top + previewPaneElement.scrollTop) + 'px';
-      button.style.left = (pinRight - paneRect.left + previewPaneElement.scrollLeft) + 'px';
-      button.style.transform = 'translateX(-100%)';
+      actions.style.top = (top - paneRect.top + previewPaneElement.scrollTop) + 'px';
+      actions.style.left = (pinRight - paneRect.left + previewPaneElement.scrollLeft) + 'px';
+      actions.style.transform = 'translateX(-100%)';
     });
   }
 
@@ -2858,27 +2858,54 @@ document.addEventListener("DOMContentLoaded", async function () {
       target.classList.add('review-target', 'review-target--' + type);
       target.classList.toggle('has-review-thread', targetThreads.length > 0);
 
-      const button = document.createElement('button');
-      button.type = 'button';
-      button.className = 'tool-button review-target-button';
-      button.classList.toggle('is-active', targetThreads.length > 0);
-      button.dataset.reviewAnchor = anchorKey;
-      button.dataset.reviewDuplicateCount = String(duplicateCount);
-      button.dataset.reviewContext = context;
-      button.dataset.html2canvasIgnore = 'true';
-      button.title = targetThreads.length > 0 ? 'View feedback or add another item' : 'Comment on this block';
-      button.setAttribute('aria-label', targetThreads.length > 0
-        ? 'View ' + targetThreads.length + ' review item' + (targetThreads.length === 1 ? '' : 's') + ' for ' + label + ' or add more feedback.'
-        : 'Add feedback to ' + label);
+      const actions = document.createElement('div');
+      actions.className = 'review-target-actions';
+      actions.dataset.reviewAnchor = anchorKey;
+      actions.dataset.reviewDuplicateCount = String(duplicateCount);
+      actions.dataset.reviewContext = context;
+      actions.dataset.html2canvasIgnore = 'true';
+      actions.setAttribute('role', 'group');
+      actions.setAttribute('aria-label', 'Review actions for ' + label);
+
+      function createTargetButton(command, iconClass, title, ariaLabel) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'tool-button review-target-button';
+        button.dataset.reviewCommand = command;
+        button.dataset.reviewAnchor = anchorKey;
+        button.dataset.reviewDuplicateCount = String(duplicateCount);
+        button.dataset.reviewContext = context;
+        button.dataset.html2canvasIgnore = 'true';
+        button.title = title;
+        button.setAttribute('aria-label', ariaLabel);
+        button.setAttribute('aria-controls', command === 'read' ? 'review-list' : 'review-composer');
+        const icon = document.createElement('i');
+        icon.className = iconClass;
+        icon.setAttribute('aria-hidden', 'true');
+        button.appendChild(icon);
+        return button;
+      }
 
-      const icon = document.createElement('i');
-      icon.className = targetThreads.length > 0 ? 'bi bi-chat-square-text' : 'bi bi-plus-lg';
-      icon.setAttribute('aria-hidden', 'true');
-      button.appendChild(icon);
       if (targetThreads.length > 0) {
-        button.dataset.reviewCount = String(targetThreads.length);
+        const reviewLabel = targetThreads.length + ' review item' + (targetThreads.length === 1 ? '' : 's');
+        const readButton = createTargetButton(
+          'read',
+          'bi bi-chat-square-text',
+          'Read ' + reviewLabel,
+          'Read ' + reviewLabel + ' for ' + label
+        );
+        readButton.classList.add('is-active');
+        readButton.dataset.reviewCount = String(targetThreads.length);
+        actions.appendChild(readButton);
       }
-      if (reviewPinsLayer) reviewPinsLayer.appendChild(button);
+
+      actions.appendChild(createTargetButton(
+        'add',
+        'bi bi-plus-lg',
+        targetThreads.length > 0 ? 'Add another review item' : 'Add feedback',
+        'Add feedback to ' + label
+      ));
+      if (reviewPinsLayer) reviewPinsLayer.appendChild(actions);
     });
 
     observeReviewPinLayout();
@@ -3077,9 +3104,8 @@ document.addEventListener("DOMContentLoaded", async function () {
     });
     if (threads.length === 0) return false;
 
+    closeReviewComposer();
     setReviewFilter('all');
-    const target = findReviewTarget(anchor);
-    if (target) openReviewComposer(target, { focusInput: false });
 
     const matchingIds = new Set(threads.map(function(thread) { return thread.id; }));
     const matchingItems = Array.from(reviewList.querySelectorAll('.review-thread')).filter(function(item) {
@@ -3100,7 +3126,7 @@ document.addEventListener("DOMContentLoaded", async function () {
         item.classList.remove('is-review-thread-active');
       });
     }, 1800);
-    announceToScreenReader('Showing ' + threads.length + ' review item' + (threads.length === 1 ? '' : 's') + ' for this block. The composer is open for more feedback.');
+    announceToScreenReader('Showing ' + threads.length + ' review item' + (threads.length === 1 ? '' : 's') + ' for this block.');
     return true;
   }
 
@@ -3134,10 +3160,13 @@ document.addEventListener("DOMContentLoaded", async function () {
   function focusReviewPin(anchor) {
     const target = findReviewTarget(anchor);
     if (!target || !reviewPinsLayer) return false;
-    const button = Array.from(reviewPinsLayer.querySelectorAll('.review-target-button')).find(function(candidate) {
+    const matchingButtons = Array.from(reviewPinsLayer.querySelectorAll('.review-target-button')).filter(function(candidate) {
       return candidate.dataset.reviewAnchor === target.dataset.reviewAnchor &&
         candidate.dataset.reviewContext === target.dataset.reviewContext;
-    }) || null;
+    });
+    const button = matchingButtons.find(function(candidate) {
+      return candidate.dataset.reviewCommand === 'read';
+    }) || matchingButtons[0] || null;
     if (!button) return false;
     button.focus({ preventScroll: true });
     return true;
@@ -3558,7 +3587,10 @@ document.addEventListener("DOMContentLoaded", async function () {
           duplicateCount: Number(button.dataset.reviewDuplicateCount) || null,
           context: button.dataset.reviewContext || null
         };
-        if (showReviewThreadsForAnchor(anchor)) return;
+        if (button.dataset.reviewCommand === 'read') {
+          showReviewThreadsForAnchor(anchor);
+          return;
+        }
         const target = findReviewTarget(anchor);
         openReviewComposer(target);
       });
diff --git a/styles.css b/styles.css
index 3ed9fd80..befebbc4 100644
--- a/styles.css
+++ b/styles.css
@@ -6453,6 +6453,14 @@ html[data-theme="dark"] .mermaid svg {
   padding-block-end: 44px;
 }
 
+#markdown-preview .review-target.has-review-thread:not(.review-target--diagram):not(.review-target--table) {
+  padding-inline-end: 76px;
+}
+
+#markdown-preview .review-target--table.has-review-thread {
+  max-width: calc(100% - 76px);
+}
+
 #markdown-preview .review-target.is-review-target-active {
   outline: none;
 }
@@ -6490,11 +6498,24 @@ html[data-theme="dark"] .mermaid svg {
   display: none !important;
 }
 
-.review-target-button {
+.review-target-actions {
   position: absolute;
   z-index: 8;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  pointer-events: auto;
+}
+
+.review-target-actions[hidden] {
+  display: none !important;
+}
+
+.review-target-button {
+  position: relative;
   min-width: 28px;
   height: 28px;
+  flex: 0 0 auto;
   pointer-events: auto;
 }
 
@@ -6544,6 +6565,14 @@ html[data-theme="dark"] .mermaid svg {
     height: 40px;
   }
 
+  #markdown-preview .review-target.has-review-thread:not(.review-target--diagram):not(.review-target--table) {
+    padding-inline-end: 96px;
+  }
+
+  #markdown-preview .review-target--table.has-review-thread {
+    max-width: calc(100% - 96px);
+  }
+
   .review-filter-btn,
   .review-kind-btn,
   .review-primary-btn,
@@ -6622,6 +6651,14 @@ html[data-theme="dark"] .mermaid svg {
   #markdown-preview .review-target--diagram {
     padding-block-end: 56px;
   }
+
+  #markdown-preview .review-target.has-review-thread:not(.review-target--diagram):not(.review-target--table) {
+    padding-inline-end: 104px;
+  }
+
+  #markdown-preview .review-target--table.has-review-thread {
+    max-width: calc(100% - 104px);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -6661,6 +6698,7 @@ html[data-theme="dark"] .mermaid svg {
   .review-panel,
   .review-panel-backdrop,
   .review-pins-layer,
+  .review-target-actions,
   .review-target-button {
     display: none !important;
   }
diff --git a/wiki/Features.md b/wiki/Features.md
index 9b2b4862..78a654d8 100644
--- a/wiki/Features.md
+++ b/wiki/Features.md
@@ -58,7 +58,7 @@ Review mode provides a local feedback layer over the rendered document without i
 
 - The Review button opens a dedicated read-only preview workspace and restores the previous Editor, Split, or Preview layout when closed.
 - Review pins are attached to rendered YAML frontmatter tables, headings, paragraphs, fenced code blocks, and supported diagram containers, including Mermaid and the other diagram engines.
-- Empty targets show a plus that opens and focuses the composer. Targets with feedback show the review icon and count; selecting the count or reviewed content keeps the saved feedback visible before the composer in the panel's shared scroll area.
+- Empty targets show a plus that opens and focuses the composer. Targets with feedback show two controls: the review icon and count opens saved feedback, while the adjacent plus opens the composer for another item. Selecting reviewed content also opens its saved feedback without opening the composer.
 - A reviewer can add either a comment or a suggestion. Both are feedback records; suggestions do not apply source changes automatically.
 - Threads can be edited in the existing composer, resolved, reopened, or deleted individually and filtered by status. The panel also provides Copy summary, Resolve all, and confirmation-protected Delete all actions.
 - Open-thread counts appear in the desktop header and mobile menu.
diff --git a/wiki/Usage-Guide.md b/wiki/Usage-Guide.md
index 289776a8..779932cd 100644
--- a/wiki/Usage-Guide.md
+++ b/wiki/Usage-Guide.md
@@ -51,7 +51,7 @@ Use Review when you want to leave structured feedback without editing the Markdo
 2. Select the plus pin on a rendered YAML frontmatter table, heading, paragraph, code block, or diagram.
 3. Choose **Comment** for general feedback or **Suggestion** for a proposed change.
 4. Enter the feedback and add it to the document review.
-5. After feedback is attached, select its review icon and count—or the reviewed content itself—to show the saved item first. The composer follows it in the same scrollable panel area for adding more feedback to the block.
+5. After feedback is attached, use the review icon and count—or select the reviewed content—to read the saved items. Use the separate plus beside the count to open the composer and add another item to the same block.
 6. Select **Edit** to update an existing comment or suggestion, then select **Save changes**. Use **Resolve** or **Reopen** to manage a thread. The panel toolbar can copy a Markdown summary, resolve every open item, or delete all feedback after confirmation. Deleting an individual item also uses an in-app confirmation dialog.
 
 On desktop, Review opens as a compact side panel beside the preview. Tablet layouts use a side drawer, while phones use a taller bottom sheet with larger filter, composer, thread, and pin controls for touch. Light and dark themes use the same existing app colors, borders, hover states, and icons.

From 795a83f2c1733d4dd091e63f5250ed071fd8f933 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Tue, 14 Jul 2026 02:55:03 +0530
Subject: [PATCH 17/18] style(review): merge count into toolbar button

---
 CHANGELOG.md                       |  2 +-
 desktop-app/resources/index.html   |  5 ++-
 desktop-app/resources/js/script.js | 50 +++++++++++++++++-------------
 desktop-app/resources/styles.css   | 20 +++++++-----
 index.html                         |  5 ++-
 script.js                          | 50 +++++++++++++++++-------------
 styles.css                         | 20 +++++++-----
 wiki/Features.md                   |  2 +-
 8 files changed, 90 insertions(+), 64 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 88b4e9c8..dd715b68 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@ Non-code commits (documentation, planning, README-only updates) are excluded.
 
 ## Unreleased
 
-- **Comments & Suggestions UI:** Simplified the Review panel, composer, suggestion cards, and preview pins using the app's existing accent, button, border, hover, disabled, and theme tokens. Review target buttons now match the main toolbar controls, align in a straight column at the preview's right edge, and show a plus before feedback exists. Reviewed targets provide separate controls for reading saved feedback and adding another item, so opening the review count no longer opens the composer. YAML frontmatter tables are reviewable, reviewed text has clear spacing from its side marker, and existing comments and suggestions can be edited in place. Saved feedback appears before the composer in one shared scroll area, keeping previous reviews visible in short panels while new and edited feedback scrolls into view. Refined the layout into a compact desktop side panel, tablet drawer, and touch-friendly mobile bottom sheet without introducing a separate color palette.
+- **Comments & Suggestions UI:** Simplified the Review panel, composer, suggestion cards, and preview pins using the app's existing accent, button, border, hover, disabled, and theme tokens. The main toolbar Review button shows its open-item count inline beside the existing icon instead of using a separate count button. Review target buttons match the main toolbar controls, align in a straight column at the preview's right edge, and show a plus before feedback exists. Reviewed targets provide separate controls for reading saved feedback and adding another item, so opening the review count no longer opens the composer. YAML frontmatter tables are reviewable, reviewed text has clear spacing from its side marker, and existing comments and suggestions can be edited in place. Saved feedback appears before the composer in one shared scroll area, keeping previous reviews visible in short panels while new and edited feedback scrolls into view. Refined the layout into a compact desktop side panel, tablet drawer, and touch-friendly mobile bottom sheet without introducing a separate color palette.
 
 ---
 
diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index 733675ad..6cac0b7c 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -111,9 +111,8 @@ <h1 class="h4 mb-0 me-2">Markdown Viewer<span class="visually-hidden"> - Online
                     <div id="live-share-toolbar-participants" class="live-share-toolbar-participants" aria-label="Live Share participants" hidden></div>
 
                     <button id="review-toggle" class="tool-button" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
-                        <i class="bi bi-chat-square-text"></i> <span class="btn-text">Review</span>
+                        <i class="bi bi-chat-square-text"></i><span id="review-toolbar-count" class="review-toolbar-count" aria-hidden="true" hidden>0</span><span class="btn-text">Review</span>
                     </button>
-                    <button id="review-count-badge" class="live-share-avatar live-share-avatar-overflow review-count-badge" type="button" aria-label="0 open review items" title="Open review feedback" hidden>0</button>
                     
                     <div class="dropdown me-1">
                         <button class="tool-button dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Switch Language">
@@ -244,7 +243,7 @@ <h2 class="h5 m-0">Menu</h2>
 
                             <button id="mobile-review-toggle" class="mobile-menu-item" type="button" title="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
                                 <span><i class="bi bi-chat-square-text me-2"></i>Review</span>
-                                <span id="mobile-review-count-badge" class="review-count-badge" aria-hidden="true" hidden>0</span>
+                                <span id="mobile-review-count-badge" class="mobile-review-count-badge" aria-hidden="true" hidden>0</span>
                             </button>
                             
                             <div class="mobile-menu-item dropdown w-100 p-0 border-0">
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index 74b7e823..319f1526 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -333,7 +333,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   const charCountElement = document.getElementById("char-count");
   const reviewToggle = document.getElementById('review-toggle');
   const mobileReviewToggle = document.getElementById('mobile-review-toggle');
-  const reviewCountBadge = document.getElementById('review-count-badge');
+  const reviewToolbarCount = document.getElementById('review-toolbar-count');
   const mobileReviewCountBadge = document.getElementById('mobile-review-count-badge');
   const reviewPanel = document.getElementById('review-panel');
   const reviewPanelBackdrop = document.getElementById('review-panel-backdrop');
@@ -2924,23 +2924,40 @@ document.addEventListener("DOMContentLoaded", async function () {
     return target;
   }
 
+  function updateReviewToggleActiveState(openCount) {
+    const count = typeof openCount === 'number'
+      ? openCount
+      : getActiveReviewThreads().filter(function(thread) { return !thread.resolved; }).length;
+    if (reviewToggle) reviewToggle.classList.toggle('is-active', reviewModeActive || count > 0);
+    if (mobileReviewToggle) mobileReviewToggle.classList.toggle('is-active', reviewModeActive);
+  }
+
   function updateReviewCountBadges() {
     const openCount = getActiveReviewThreads().filter(function(thread) { return !thread.resolved; }).length;
-    [reviewCountBadge, mobileReviewCountBadge].forEach(function(badge) {
-      if (!badge) return;
-      badge.textContent = String(openCount);
-      badge.hidden = openCount === 0;
-      const countLabel = openCount + ' open review item' + (openCount === 1 ? '' : 's');
-      if (badge === reviewCountBadge) {
-        badge.setAttribute('aria-label', countLabel + '; open review panel');
-      }
-      badge.title = countLabel;
-    });
+    const countLabel = openCount + ' open review item' + (openCount === 1 ? '' : 's');
+    if (reviewToolbarCount) {
+      reviewToolbarCount.textContent = String(openCount);
+      reviewToolbarCount.hidden = openCount === 0;
+    }
+    if (mobileReviewCountBadge) {
+      mobileReviewCountBadge.textContent = String(openCount);
+      mobileReviewCountBadge.hidden = openCount === 0;
+      mobileReviewCountBadge.title = countLabel;
+    }
+    if (reviewToggle) {
+      reviewToggle.setAttribute('aria-label', openCount > 0
+        ? 'Open comments and suggestions. ' + countLabel + '.'
+        : 'Open comments and suggestions');
+      reviewToggle.title = openCount > 0
+        ? 'Open comments and suggestions (' + countLabel + ')'
+        : 'Open comments and suggestions';
+    }
     if (mobileReviewToggle) {
       mobileReviewToggle.setAttribute('aria-label', openCount > 0
         ? 'Open comments and suggestions. ' + openCount + ' open review item' + (openCount === 1 ? '' : 's') + '.'
         : 'Open comments and suggestions');
     }
+    updateReviewToggleActiveState(openCount);
   }
 
   function formatReviewTime(timestamp) {
@@ -3470,10 +3487,10 @@ document.addEventListener("DOMContentLoaded", async function () {
     if (contentContainer) contentContainer.classList.toggle('is-reviewing', reviewModeActive);
     [reviewToggle, mobileReviewToggle].forEach(function(button) {
       if (!button) return;
-      button.classList.toggle('is-active', reviewModeActive);
       button.setAttribute('aria-expanded', reviewModeActive ? 'true' : 'false');
       button.setAttribute('aria-pressed', reviewModeActive ? 'true' : 'false');
     });
+    updateReviewToggleActiveState();
     updateReviewBackdrop();
     updateLiveEditorAccess();
     if (reviewModeActive) {
@@ -3509,15 +3526,6 @@ document.addEventListener("DOMContentLoaded", async function () {
         setReviewMode(!reviewModeActive, { focusPanel: !reviewModeActive });
       });
     }
-    if (reviewCountBadge) {
-      reviewCountBadge.addEventListener('click', function() {
-        if (!reviewModeActive) {
-          setReviewMode(true, { focusPanel: true });
-        } else if (reviewPanelClose) {
-          reviewPanelClose.focus();
-        }
-      });
-    }
     if (mobileReviewToggle) {
       mobileReviewToggle.addEventListener('click', function() {
         closeMobileMenu();
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index befebbc4..e6b9f4a3 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -5987,7 +5987,18 @@ html[data-theme="dark"] .mermaid svg {
 /* ========================================
    COMMENTS & SUGGESTIONS
    ======================================== */
-.review-count-badge {
+.review-toolbar-count {
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.review-toolbar-count[hidden] {
+  display: none !important;
+}
+
+.mobile-review-count-badge {
   width: 28px;
   min-width: 28px;
   height: 28px;
@@ -6009,12 +6020,7 @@ html[data-theme="dark"] .mermaid svg {
   white-space: nowrap;
 }
 
-.review-count-badge:hover {
-  color: var(--bg-color);
-  background: color-mix(in srgb, var(--accent-color) 84%, #000000);
-}
-
-.review-count-badge[hidden],
+.mobile-review-count-badge[hidden],
 .review-panel[hidden],
 .review-panel-backdrop[hidden],
 .review-composer[hidden] {
diff --git a/index.html b/index.html
index 2f2e8c47..a2a44362 100644
--- a/index.html
+++ b/index.html
@@ -204,9 +204,8 @@ <h1 class="h4 mb-0 me-2">Markdown Viewer<span class="visually-hidden"> - Online
                     <div id="live-share-toolbar-participants" class="live-share-toolbar-participants" aria-label="Live Share participants" hidden></div>
 
                     <button id="review-toggle" class="tool-button" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
-                        <i class="bi bi-chat-square-text"></i> <span class="btn-text">Review</span>
+                        <i class="bi bi-chat-square-text"></i><span id="review-toolbar-count" class="review-toolbar-count" aria-hidden="true" hidden>0</span><span class="btn-text">Review</span>
                     </button>
-                    <button id="review-count-badge" class="live-share-avatar live-share-avatar-overflow review-count-badge" type="button" aria-label="0 open review items" title="Open review feedback" hidden>0</button>
                     
                     <div class="dropdown me-1">
                         <button class="tool-button dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Switch Language">
@@ -337,7 +336,7 @@ <h2 class="h5 m-0">Menu</h2>
 
                             <button id="mobile-review-toggle" class="mobile-menu-item" type="button" title="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
                                 <span><i class="bi bi-chat-square-text me-2"></i>Review</span>
-                                <span id="mobile-review-count-badge" class="review-count-badge" aria-hidden="true" hidden>0</span>
+                                <span id="mobile-review-count-badge" class="mobile-review-count-badge" aria-hidden="true" hidden>0</span>
                             </button>
                             
                             <div class="mobile-menu-item dropdown w-100 p-0 border-0">
diff --git a/script.js b/script.js
index 74b7e823..319f1526 100644
--- a/script.js
+++ b/script.js
@@ -333,7 +333,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   const charCountElement = document.getElementById("char-count");
   const reviewToggle = document.getElementById('review-toggle');
   const mobileReviewToggle = document.getElementById('mobile-review-toggle');
-  const reviewCountBadge = document.getElementById('review-count-badge');
+  const reviewToolbarCount = document.getElementById('review-toolbar-count');
   const mobileReviewCountBadge = document.getElementById('mobile-review-count-badge');
   const reviewPanel = document.getElementById('review-panel');
   const reviewPanelBackdrop = document.getElementById('review-panel-backdrop');
@@ -2924,23 +2924,40 @@ document.addEventListener("DOMContentLoaded", async function () {
     return target;
   }
 
+  function updateReviewToggleActiveState(openCount) {
+    const count = typeof openCount === 'number'
+      ? openCount
+      : getActiveReviewThreads().filter(function(thread) { return !thread.resolved; }).length;
+    if (reviewToggle) reviewToggle.classList.toggle('is-active', reviewModeActive || count > 0);
+    if (mobileReviewToggle) mobileReviewToggle.classList.toggle('is-active', reviewModeActive);
+  }
+
   function updateReviewCountBadges() {
     const openCount = getActiveReviewThreads().filter(function(thread) { return !thread.resolved; }).length;
-    [reviewCountBadge, mobileReviewCountBadge].forEach(function(badge) {
-      if (!badge) return;
-      badge.textContent = String(openCount);
-      badge.hidden = openCount === 0;
-      const countLabel = openCount + ' open review item' + (openCount === 1 ? '' : 's');
-      if (badge === reviewCountBadge) {
-        badge.setAttribute('aria-label', countLabel + '; open review panel');
-      }
-      badge.title = countLabel;
-    });
+    const countLabel = openCount + ' open review item' + (openCount === 1 ? '' : 's');
+    if (reviewToolbarCount) {
+      reviewToolbarCount.textContent = String(openCount);
+      reviewToolbarCount.hidden = openCount === 0;
+    }
+    if (mobileReviewCountBadge) {
+      mobileReviewCountBadge.textContent = String(openCount);
+      mobileReviewCountBadge.hidden = openCount === 0;
+      mobileReviewCountBadge.title = countLabel;
+    }
+    if (reviewToggle) {
+      reviewToggle.setAttribute('aria-label', openCount > 0
+        ? 'Open comments and suggestions. ' + countLabel + '.'
+        : 'Open comments and suggestions');
+      reviewToggle.title = openCount > 0
+        ? 'Open comments and suggestions (' + countLabel + ')'
+        : 'Open comments and suggestions';
+    }
     if (mobileReviewToggle) {
       mobileReviewToggle.setAttribute('aria-label', openCount > 0
         ? 'Open comments and suggestions. ' + openCount + ' open review item' + (openCount === 1 ? '' : 's') + '.'
         : 'Open comments and suggestions');
     }
+    updateReviewToggleActiveState(openCount);
   }
 
   function formatReviewTime(timestamp) {
@@ -3470,10 +3487,10 @@ document.addEventListener("DOMContentLoaded", async function () {
     if (contentContainer) contentContainer.classList.toggle('is-reviewing', reviewModeActive);
     [reviewToggle, mobileReviewToggle].forEach(function(button) {
       if (!button) return;
-      button.classList.toggle('is-active', reviewModeActive);
       button.setAttribute('aria-expanded', reviewModeActive ? 'true' : 'false');
       button.setAttribute('aria-pressed', reviewModeActive ? 'true' : 'false');
     });
+    updateReviewToggleActiveState();
     updateReviewBackdrop();
     updateLiveEditorAccess();
     if (reviewModeActive) {
@@ -3509,15 +3526,6 @@ document.addEventListener("DOMContentLoaded", async function () {
         setReviewMode(!reviewModeActive, { focusPanel: !reviewModeActive });
       });
     }
-    if (reviewCountBadge) {
-      reviewCountBadge.addEventListener('click', function() {
-        if (!reviewModeActive) {
-          setReviewMode(true, { focusPanel: true });
-        } else if (reviewPanelClose) {
-          reviewPanelClose.focus();
-        }
-      });
-    }
     if (mobileReviewToggle) {
       mobileReviewToggle.addEventListener('click', function() {
         closeMobileMenu();
diff --git a/styles.css b/styles.css
index befebbc4..e6b9f4a3 100644
--- a/styles.css
+++ b/styles.css
@@ -5987,7 +5987,18 @@ html[data-theme="dark"] .mermaid svg {
 /* ========================================
    COMMENTS & SUGGESTIONS
    ======================================== */
-.review-count-badge {
+.review-toolbar-count {
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.review-toolbar-count[hidden] {
+  display: none !important;
+}
+
+.mobile-review-count-badge {
   width: 28px;
   min-width: 28px;
   height: 28px;
@@ -6009,12 +6020,7 @@ html[data-theme="dark"] .mermaid svg {
   white-space: nowrap;
 }
 
-.review-count-badge:hover {
-  color: var(--bg-color);
-  background: color-mix(in srgb, var(--accent-color) 84%, #000000);
-}
-
-.review-count-badge[hidden],
+.mobile-review-count-badge[hidden],
 .review-panel[hidden],
 .review-panel-backdrop[hidden],
 .review-composer[hidden] {
diff --git a/wiki/Features.md b/wiki/Features.md
index 78a654d8..2a67369f 100644
--- a/wiki/Features.md
+++ b/wiki/Features.md
@@ -61,7 +61,7 @@ Review mode provides a local feedback layer over the rendered document without i
 - Empty targets show a plus that opens and focuses the composer. Targets with feedback show two controls: the review icon and count opens saved feedback, while the adjacent plus opens the composer for another item. Selecting reviewed content also opens its saved feedback without opening the composer.
 - A reviewer can add either a comment or a suggestion. Both are feedback records; suggestions do not apply source changes automatically.
 - Threads can be edited in the existing composer, resolved, reopened, or deleted individually and filtered by status. The panel also provides Copy summary, Resolve all, and confirmation-protected Delete all actions.
-- Open-thread counts appear in the desktop header and mobile menu.
+- Open-thread counts appear inline in the desktop Review button and in the mobile menu.
 - Review controls support keyboard focus, screen-reader labels, dark mode, RTL layout, a compact desktop side panel, a tablet drawer, and a touch-friendly mobile bottom sheet.
 - Comments and suggestions use the existing app accent, button surfaces, borders, hover states, disabled states, and Bootstrap Icons; the feature does not introduce a separate color palette.
 

From 4773acd0b55e9d48e932638f5daa48a2730b13d7 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Tue, 14 Jul 2026 03:18:28 +0530
Subject: [PATCH 18/18] feat(review): add lifecycle timestamps

---
 CHANGELOG.md                       |  2 +-
 README.md                          |  2 +-
 desktop-app/resources/js/script.js | 64 +++++++++++++++++++++++++-----
 desktop-app/resources/styles.css   |  9 ++++-
 script.js                          | 64 +++++++++++++++++++++++++-----
 styles.css                         |  9 ++++-
 wiki/Features.md                   |  3 +-
 wiki/Usage-Guide.md                |  5 ++-
 8 files changed, 128 insertions(+), 30 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dd715b68..539301f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@ Non-code commits (documentation, planning, README-only updates) are excluded.
 
 ## Unreleased
 
-- **Comments & Suggestions UI:** Simplified the Review panel, composer, suggestion cards, and preview pins using the app's existing accent, button, border, hover, disabled, and theme tokens. The main toolbar Review button shows its open-item count inline beside the existing icon instead of using a separate count button. Review target buttons match the main toolbar controls, align in a straight column at the preview's right edge, and show a plus before feedback exists. Reviewed targets provide separate controls for reading saved feedback and adding another item, so opening the review count no longer opens the composer. YAML frontmatter tables are reviewable, reviewed text has clear spacing from its side marker, and existing comments and suggestions can be edited in place. Saved feedback appears before the composer in one shared scroll area, keeping previous reviews visible in short panels while new and edited feedback scrolls into view. Refined the layout into a compact desktop side panel, tablet drawer, and touch-friendly mobile bottom sheet without introducing a separate color palette.
+- **Comments & Suggestions UI:** Simplified the Review panel, composer, suggestion cards, and preview pins using the app's existing accent, button, border, hover, disabled, and theme tokens. The main toolbar Review button shows its open-item count inline beside the existing icon instead of using a separate count button. Review target buttons match the main toolbar controls, align in a straight column at the preview's right edge, and show a plus before feedback exists. Reviewed targets provide separate controls for reading saved feedback and adding another item, so opening the review count no longer opens the composer. Threads now record and display opened/closed date and time, and copied summaries include lifecycle dates plus open/resolved totals. Opening a new tab closes Review mode automatically. YAML frontmatter tables are reviewable, reviewed text has clear spacing from its side marker, and existing comments and suggestions can be edited in place. Saved feedback appears before the composer in one shared scroll area, keeping previous reviews visible in short panels while new and edited feedback scrolls into view. Refined the layout into a compact desktop side panel, tablet drawer, and touch-friendly mobile bottom sheet without introducing a separate color palette.
 
 ---
 
diff --git a/README.md b/README.md
index 731377ab..dd5ec3c5 100644
--- a/README.md
+++ b/README.md
@@ -129,7 +129,7 @@ Markdown Viewer works well as a Markdown diagram editor for technical notes, doc
 
 ## Sharing, Collaboration, and Export
 
-- **Comments & Suggestions** provides a per-document review layer. Review pins attach comments or suggestions to rendered YAML frontmatter tables, headings, paragraphs, code blocks, and diagrams while the Markdown stays read-only. Empty targets show a plus. Reviewed targets show two separate controls: the review count opens saved feedback, and the adjacent plus opens the composer for another item. Threads can be edited, resolved, reopened, deleted, or copied as a Markdown summary. The interface uses a desktop side panel, a tablet drawer, and a touch-friendly mobile bottom sheet. Review data stays with the local tab workspace, is excluded from Share Snapshot, and is relayed only while an existing Live Share room is active.
+- **Comments & Suggestions** provides a per-document review layer. Review pins attach comments or suggestions to rendered YAML frontmatter tables, headings, paragraphs, code blocks, and diagrams while the Markdown stays read-only. Empty targets show a plus. Reviewed targets show two separate controls: the review count opens saved feedback, and the adjacent plus opens the composer for another item. Threads show their opened and closed date/time, can be edited, resolved, reopened, deleted, or copied in a detailed Markdown summary. Opening a new tab closes Review mode automatically. The interface uses a desktop side panel, a tablet drawer, and a touch-friendly mobile bottom sheet. Review data stays with the local tab workspace, is excluded from Share Snapshot, and is relayed only while an existing Live Share room is active.
 - **Share Snapshot** creates quick links for point-in-time Markdown sharing. Small documents can stay in the URL hash; larger snapshots use temporary Cloudflare KV storage for up to 90 days when that backend is configured. Snapshot links are bearer links: anyone who has the link can open it.
 <p align="center">
   <img src="https://github.com/user-attachments/assets/e62ca1a0-011a-4b01-90f9-e72638b9a6d5" alt="Share Snapshot" width="90%" />
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index 319f1526..2534ecd0 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -2438,6 +2438,10 @@ document.addEventListener("DOMContentLoaded", async function () {
       if (!body) return null;
       const createdAt = Number.isFinite(Number(thread.createdAt)) ? Number(thread.createdAt) : Date.now();
       const updatedAt = Number.isFinite(Number(thread.updatedAt)) ? Number(thread.updatedAt) : createdAt;
+      const resolved = thread.resolved === true;
+      const resolvedAt = resolved && Number.isFinite(Number(thread.resolvedAt))
+        ? Number(thread.resolvedAt)
+        : null;
       return {
         id: typeof thread.id === 'string' && thread.id ? thread.id.slice(0, 120) : createReviewId(),
         anchor: {
@@ -2454,7 +2458,8 @@ document.addEventListener("DOMContentLoaded", async function () {
         body: body,
         createdAt: createdAt,
         updatedAt: updatedAt,
-        resolved: thread.resolved === true
+        resolved: resolved,
+        resolvedAt: resolvedAt
       };
     }).filter(Boolean);
   }
@@ -2487,7 +2492,8 @@ document.addEventListener("DOMContentLoaded", async function () {
       body: thread.body,
       createdAt: thread.createdAt,
       updatedAt: thread.updatedAt,
-      resolved: thread.resolved === true
+      resolved: thread.resolved === true,
+      resolvedAt: Number.isFinite(Number(thread.resolvedAt)) ? Number(thread.resolvedAt) : null
     };
   }
 
@@ -2501,6 +2507,7 @@ document.addEventListener("DOMContentLoaded", async function () {
       left.createdAt === right.createdAt &&
       left.updatedAt === right.updatedAt &&
       left.resolved === right.resolved &&
+      left.resolvedAt === right.resolvedAt &&
       leftAnchor.key === rightAnchor.key &&
       leftAnchor.type === rightAnchor.type &&
       leftAnchor.label === rightAnchor.label &&
@@ -3016,11 +3023,26 @@ document.addEventListener("DOMContentLoaded", async function () {
     body.textContent = thread.body;
     item.appendChild(body);
 
-    const time = document.createElement('time');
-    time.className = 'review-thread-time';
-    time.dateTime = new Date(thread.createdAt).toISOString();
-    time.textContent = formatReviewTime(thread.createdAt);
-    item.appendChild(time);
+    const dates = document.createElement('div');
+    dates.className = 'review-thread-dates';
+    const openedTime = document.createElement('time');
+    openedTime.className = 'review-thread-time';
+    openedTime.dateTime = new Date(thread.createdAt).toISOString();
+    openedTime.textContent = 'Opened: ' + formatReviewTime(thread.createdAt);
+    dates.appendChild(openedTime);
+    if (thread.resolvedAt) {
+      const closedTime = document.createElement('time');
+      closedTime.className = 'review-thread-time';
+      closedTime.dateTime = new Date(thread.resolvedAt).toISOString();
+      closedTime.textContent = 'Closed: ' + formatReviewTime(thread.resolvedAt);
+      dates.appendChild(closedTime);
+    } else {
+      const closedTime = document.createElement('span');
+      closedTime.className = 'review-thread-time';
+      closedTime.textContent = thread.resolved ? 'Closed: Unavailable' : 'Closed: Not closed';
+      dates.appendChild(closedTime);
+    }
+    item.appendChild(dates);
 
     const actions = document.createElement('div');
     actions.className = 'review-thread-actions';
@@ -3318,7 +3340,8 @@ document.addEventListener("DOMContentLoaded", async function () {
       body: body.slice(0, REVIEW_TEXT_LIMIT),
       createdAt: Date.now(),
       updatedAt: Date.now(),
-      resolved: false
+      resolved: false,
+      resolvedAt: null
     });
     const label = reviewComposerKind === 'suggestion' ? 'Suggestion added.' : 'Comment added.';
     closeReviewComposer();
@@ -3346,10 +3369,25 @@ document.addEventListener("DOMContentLoaded", async function () {
   function buildReviewSummary() {
     const tab = getActiveReviewTab();
     const threads = getActiveReviewThreads().slice().sort(function(a, b) { return a.createdAt - b.createdAt; });
-    const lines = ['# Review: ' + (tab && tab.title ? tab.title : 'Markdown document'), ''];
+    const resolvedCount = threads.filter(function(thread) { return thread.resolved; }).length;
+    const lines = [
+      '# Review: ' + (tab && tab.title ? tab.title : 'Markdown document'),
+      '',
+      '- Generated: ' + formatReviewTime(Date.now()),
+      '- Total items: ' + threads.length,
+      '- Open items: ' + (threads.length - resolvedCount),
+      '- Resolved items: ' + resolvedCount,
+      ''
+    ];
     threads.forEach(function(thread, index) {
       const kind = thread.kind === 'suggestion' ? 'Suggestion' : 'Comment';
-      lines.push((index + 1) + '. **' + kind + '** - ' + thread.anchor.label + (thread.resolved ? ' _(resolved)_' : ''));
+      const closedAt = thread.resolved
+        ? (thread.resolvedAt ? formatReviewTime(thread.resolvedAt) : 'Unavailable')
+        : 'Not closed';
+      lines.push((index + 1) + '. **' + kind + '** - ' + thread.anchor.label);
+      lines.push('   - Status: ' + (thread.resolved ? 'Resolved' : 'Open'));
+      lines.push('   - Opened: ' + formatReviewTime(thread.createdAt));
+      lines.push('   - Closed: ' + closedAt);
       if (thread.anchor.excerpt) lines.push('   > ' + thread.anchor.excerpt.replace(/\n/g, ' '));
       thread.body.split('\n').forEach(function(line) {
         lines.push('   ' + line);
@@ -3385,6 +3423,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     openThreads.forEach(function(thread) {
       thread.resolved = true;
       thread.updatedAt = updatedAt;
+      thread.resolvedAt = updatedAt;
     });
     persistReviewThreads(openThreads.length + ' review item' + (openThreads.length === 1 ? '' : 's') + ' resolved.');
     requestAnimationFrame(function() {
@@ -3639,7 +3678,9 @@ document.addEventListener("DOMContentLoaded", async function () {
         }
         if (action === 'toggle-resolved') {
           thread.resolved = !thread.resolved;
-          thread.updatedAt = Date.now();
+          const changedAt = Date.now();
+          thread.updatedAt = changedAt;
+          thread.resolvedAt = thread.resolved ? changedAt : null;
           persistReviewThreads(thread.resolved ? 'Review item resolved.' : 'Review item reopened.');
           return;
         }
@@ -4232,6 +4273,7 @@ document.addEventListener("DOMContentLoaded", async function () {
       alert('Maximum of 20 tabs reached. Please close an existing tab to open a new one.');
       return;
     }
+    if (reviewModeActive) setReviewMode(false);
     if (!title) title = nextUntitledTitle();
     const tab = createTab(content, title);
     tabs.push(tab);
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index e6b9f4a3..848a3169 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -6383,9 +6383,14 @@ html[data-theme="dark"] .mermaid svg {
   white-space: pre-wrap;
 }
 
-.review-thread-time {
-  display: block;
+.review-thread-dates {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
   margin-top: 9px;
+}
+
+.review-thread-time {
   color: var(--text-secondary);
   font-size: 0.67rem;
 }
diff --git a/script.js b/script.js
index 319f1526..2534ecd0 100644
--- a/script.js
+++ b/script.js
@@ -2438,6 +2438,10 @@ document.addEventListener("DOMContentLoaded", async function () {
       if (!body) return null;
       const createdAt = Number.isFinite(Number(thread.createdAt)) ? Number(thread.createdAt) : Date.now();
       const updatedAt = Number.isFinite(Number(thread.updatedAt)) ? Number(thread.updatedAt) : createdAt;
+      const resolved = thread.resolved === true;
+      const resolvedAt = resolved && Number.isFinite(Number(thread.resolvedAt))
+        ? Number(thread.resolvedAt)
+        : null;
       return {
         id: typeof thread.id === 'string' && thread.id ? thread.id.slice(0, 120) : createReviewId(),
         anchor: {
@@ -2454,7 +2458,8 @@ document.addEventListener("DOMContentLoaded", async function () {
         body: body,
         createdAt: createdAt,
         updatedAt: updatedAt,
-        resolved: thread.resolved === true
+        resolved: resolved,
+        resolvedAt: resolvedAt
       };
     }).filter(Boolean);
   }
@@ -2487,7 +2492,8 @@ document.addEventListener("DOMContentLoaded", async function () {
       body: thread.body,
       createdAt: thread.createdAt,
       updatedAt: thread.updatedAt,
-      resolved: thread.resolved === true
+      resolved: thread.resolved === true,
+      resolvedAt: Number.isFinite(Number(thread.resolvedAt)) ? Number(thread.resolvedAt) : null
     };
   }
 
@@ -2501,6 +2507,7 @@ document.addEventListener("DOMContentLoaded", async function () {
       left.createdAt === right.createdAt &&
       left.updatedAt === right.updatedAt &&
       left.resolved === right.resolved &&
+      left.resolvedAt === right.resolvedAt &&
       leftAnchor.key === rightAnchor.key &&
       leftAnchor.type === rightAnchor.type &&
       leftAnchor.label === rightAnchor.label &&
@@ -3016,11 +3023,26 @@ document.addEventListener("DOMContentLoaded", async function () {
     body.textContent = thread.body;
     item.appendChild(body);
 
-    const time = document.createElement('time');
-    time.className = 'review-thread-time';
-    time.dateTime = new Date(thread.createdAt).toISOString();
-    time.textContent = formatReviewTime(thread.createdAt);
-    item.appendChild(time);
+    const dates = document.createElement('div');
+    dates.className = 'review-thread-dates';
+    const openedTime = document.createElement('time');
+    openedTime.className = 'review-thread-time';
+    openedTime.dateTime = new Date(thread.createdAt).toISOString();
+    openedTime.textContent = 'Opened: ' + formatReviewTime(thread.createdAt);
+    dates.appendChild(openedTime);
+    if (thread.resolvedAt) {
+      const closedTime = document.createElement('time');
+      closedTime.className = 'review-thread-time';
+      closedTime.dateTime = new Date(thread.resolvedAt).toISOString();
+      closedTime.textContent = 'Closed: ' + formatReviewTime(thread.resolvedAt);
+      dates.appendChild(closedTime);
+    } else {
+      const closedTime = document.createElement('span');
+      closedTime.className = 'review-thread-time';
+      closedTime.textContent = thread.resolved ? 'Closed: Unavailable' : 'Closed: Not closed';
+      dates.appendChild(closedTime);
+    }
+    item.appendChild(dates);
 
     const actions = document.createElement('div');
     actions.className = 'review-thread-actions';
@@ -3318,7 +3340,8 @@ document.addEventListener("DOMContentLoaded", async function () {
       body: body.slice(0, REVIEW_TEXT_LIMIT),
       createdAt: Date.now(),
       updatedAt: Date.now(),
-      resolved: false
+      resolved: false,
+      resolvedAt: null
     });
     const label = reviewComposerKind === 'suggestion' ? 'Suggestion added.' : 'Comment added.';
     closeReviewComposer();
@@ -3346,10 +3369,25 @@ document.addEventListener("DOMContentLoaded", async function () {
   function buildReviewSummary() {
     const tab = getActiveReviewTab();
     const threads = getActiveReviewThreads().slice().sort(function(a, b) { return a.createdAt - b.createdAt; });
-    const lines = ['# Review: ' + (tab && tab.title ? tab.title : 'Markdown document'), ''];
+    const resolvedCount = threads.filter(function(thread) { return thread.resolved; }).length;
+    const lines = [
+      '# Review: ' + (tab && tab.title ? tab.title : 'Markdown document'),
+      '',
+      '- Generated: ' + formatReviewTime(Date.now()),
+      '- Total items: ' + threads.length,
+      '- Open items: ' + (threads.length - resolvedCount),
+      '- Resolved items: ' + resolvedCount,
+      ''
+    ];
     threads.forEach(function(thread, index) {
       const kind = thread.kind === 'suggestion' ? 'Suggestion' : 'Comment';
-      lines.push((index + 1) + '. **' + kind + '** - ' + thread.anchor.label + (thread.resolved ? ' _(resolved)_' : ''));
+      const closedAt = thread.resolved
+        ? (thread.resolvedAt ? formatReviewTime(thread.resolvedAt) : 'Unavailable')
+        : 'Not closed';
+      lines.push((index + 1) + '. **' + kind + '** - ' + thread.anchor.label);
+      lines.push('   - Status: ' + (thread.resolved ? 'Resolved' : 'Open'));
+      lines.push('   - Opened: ' + formatReviewTime(thread.createdAt));
+      lines.push('   - Closed: ' + closedAt);
       if (thread.anchor.excerpt) lines.push('   > ' + thread.anchor.excerpt.replace(/\n/g, ' '));
       thread.body.split('\n').forEach(function(line) {
         lines.push('   ' + line);
@@ -3385,6 +3423,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     openThreads.forEach(function(thread) {
       thread.resolved = true;
       thread.updatedAt = updatedAt;
+      thread.resolvedAt = updatedAt;
     });
     persistReviewThreads(openThreads.length + ' review item' + (openThreads.length === 1 ? '' : 's') + ' resolved.');
     requestAnimationFrame(function() {
@@ -3639,7 +3678,9 @@ document.addEventListener("DOMContentLoaded", async function () {
         }
         if (action === 'toggle-resolved') {
           thread.resolved = !thread.resolved;
-          thread.updatedAt = Date.now();
+          const changedAt = Date.now();
+          thread.updatedAt = changedAt;
+          thread.resolvedAt = thread.resolved ? changedAt : null;
           persistReviewThreads(thread.resolved ? 'Review item resolved.' : 'Review item reopened.');
           return;
         }
@@ -4232,6 +4273,7 @@ document.addEventListener("DOMContentLoaded", async function () {
       alert('Maximum of 20 tabs reached. Please close an existing tab to open a new one.');
       return;
     }
+    if (reviewModeActive) setReviewMode(false);
     if (!title) title = nextUntitledTitle();
     const tab = createTab(content, title);
     tabs.push(tab);
diff --git a/styles.css b/styles.css
index e6b9f4a3..848a3169 100644
--- a/styles.css
+++ b/styles.css
@@ -6383,9 +6383,14 @@ html[data-theme="dark"] .mermaid svg {
   white-space: pre-wrap;
 }
 
-.review-thread-time {
-  display: block;
+.review-thread-dates {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
   margin-top: 9px;
+}
+
+.review-thread-time {
   color: var(--text-secondary);
   font-size: 0.67rem;
 }
diff --git a/wiki/Features.md b/wiki/Features.md
index 2a67369f..8509f8aa 100644
--- a/wiki/Features.md
+++ b/wiki/Features.md
@@ -60,9 +60,10 @@ Review mode provides a local feedback layer over the rendered document without i
 - Review pins are attached to rendered YAML frontmatter tables, headings, paragraphs, fenced code blocks, and supported diagram containers, including Mermaid and the other diagram engines.
 - Empty targets show a plus that opens and focuses the composer. Targets with feedback show two controls: the review icon and count opens saved feedback, while the adjacent plus opens the composer for another item. Selecting reviewed content also opens its saved feedback without opening the composer.
 - A reviewer can add either a comment or a suggestion. Both are feedback records; suggestions do not apply source changes automatically.
-- Threads can be edited in the existing composer, resolved, reopened, or deleted individually and filtered by status. The panel also provides Copy summary, Resolve all, and confirmation-protected Delete all actions.
+- Threads show their opened and closed date/time and can be edited in the existing composer, resolved, reopened, or deleted individually and filtered by status. The panel also provides a detailed Markdown summary with lifecycle dates and counts, Resolve all, and confirmation-protected Delete all actions.
 - Open-thread counts appear inline in the desktop Review button and in the mobile menu.
 - Review controls support keyboard focus, screen-reader labels, dark mode, RTL layout, a compact desktop side panel, a tablet drawer, and a touch-friendly mobile bottom sheet.
+- Opening a new document tab closes Review mode and restores the prior document view before switching tabs.
 - Comments and suggestions use the existing app accent, button surfaces, borders, hover states, disabled states, and Bootstrap Icons; the feature does not introduce a separate color palette.
 
 Anchoring and lifecycle:
diff --git a/wiki/Usage-Guide.md b/wiki/Usage-Guide.md
index 779932cd..4e74e280 100644
--- a/wiki/Usage-Guide.md
+++ b/wiki/Usage-Guide.md
@@ -52,7 +52,10 @@ Use Review when you want to leave structured feedback without editing the Markdo
 3. Choose **Comment** for general feedback or **Suggestion** for a proposed change.
 4. Enter the feedback and add it to the document review.
 5. After feedback is attached, use the review icon and count—or select the reviewed content—to read the saved items. Use the separate plus beside the count to open the composer and add another item to the same block.
-6. Select **Edit** to update an existing comment or suggestion, then select **Save changes**. Use **Resolve** or **Reopen** to manage a thread. The panel toolbar can copy a Markdown summary, resolve every open item, or delete all feedback after confirmation. Deleting an individual item also uses an in-app confirmation dialog.
+6. Select **Edit** to update an existing comment or suggestion, then select **Save changes**. Each thread shows when it was opened and, after resolution, when it was closed. Reopening clears the closing time until the item is resolved again.
+7. The panel toolbar can copy a detailed Markdown summary with generated, opened, and closed date/time plus open/resolved counts; resolve every open item; or delete all feedback after confirmation. Deleting an individual item also uses an in-app confirmation dialog.
+
+Opening a new tab closes Review mode automatically before switching to the new document.
 
 On desktop, Review opens as a compact side panel beside the preview. Tablet layouts use a side drawer, while phones use a taller bottom sheet with larger filter, composer, thread, and pin controls for touch. Light and dark themes use the same existing app colors, borders, hover states, and icons.