From 5c13e6f1f00a2b688626401150479c51b4fa479a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 16 Jul 2026 07:56:33 +0000
Subject: [PATCH 1/9] Add Markdown Annotator tool to Docusaurus site
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Interactive file review tool at /tools/markdown-annotator that lets users
annotate markdown and code files like a PR review. Features:

- Load files via GitHub URL (auto-fetches raw content, preserves source link)
  or by pasting content directly with a custom filename
- Code view: click line numbers to anchor, shift+click for ranges, double-click
  to annotate a single line; annotations appear inline below annotated lines
- Preview view: select text with the mouse to capture line range, then add
  annotation via the selection bar; rendered markdown with a lightweight
  built-in renderer (no external deps)
- Annotation dialog with ⌘↵ submit and Esc cancel
- Finish review panel: optional summary text, copy-to-clipboard, and
  "Open in Claude" / "Open in ChatGPT" link buttons that encode the full
  review prompt (file contents + inline annotations + source URL metadata)
- Works for markdown, MDX, and generic code files (TS, JS, Python, Go, etc.)
- Full light/dark theme support via CSS custom properties
---
 web/src/pages/tools/index.tsx                 |   8 +
 .../pages/tools/markdown-annotator.module.css | 942 ++++++++++++++++++
 web/src/pages/tools/markdown-annotator.tsx    | 891 +++++++++++++++++
 3 files changed, 1841 insertions(+)
 create mode 100644 web/src/pages/tools/markdown-annotator.module.css
 create mode 100644 web/src/pages/tools/markdown-annotator.tsx

diff --git a/web/src/pages/tools/index.tsx b/web/src/pages/tools/index.tsx
index 2bdc899a..1700b6e8 100644
--- a/web/src/pages/tools/index.tsx
+++ b/web/src/pages/tools/index.tsx
@@ -53,6 +53,14 @@ const tools = [
     icon: '🦆',
     tags: ['fun', 'debugging', 'rubber-duck'],
   },
+  {
+    name: 'Markdown Annotator',
+    slug: 'markdown-annotator',
+    description:
+      'Review markdown and code files with inline annotations. Fetch from a GitHub URL or paste content, add line-level comments, then export a review prompt for Claude or ChatGPT.',
+    icon: '📝',
+    tags: ['markdown', 'review', 'ai'],
+  },
 ];
 
 const TOOLS_SCHEMA = {
diff --git a/web/src/pages/tools/markdown-annotator.module.css b/web/src/pages/tools/markdown-annotator.module.css
new file mode 100644
index 00000000..74dd4abc
--- /dev/null
+++ b/web/src/pages/tools/markdown-annotator.module.css
@@ -0,0 +1,942 @@
+/* ── Root ────────────────────────────────────────────────────────────────────── */
+
+.toolRoot {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 1.5rem 4rem;
+  width: 100%;
+}
+
+/* ── Header ──────────────────────────────────────────────────────────────────── */
+
+.toolHeader {
+  padding: 1.75rem 0 1rem;
+}
+
+.breadcrumb {
+  font-size: 0.8rem;
+  color: var(--ifm-color-emphasis-600);
+  margin-bottom: 0.5rem;
+}
+
+.breadcrumb a,
+.breadcrumbBtn {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-size: inherit;
+  font-family: inherit;
+}
+
+.breadcrumb a:hover,
+.breadcrumbBtn:hover {
+  text-decoration: underline;
+}
+
+.toolTitle {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin: 0 0 0.3rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.toolSubtitle {
+  font-size: 0.9rem;
+  color: var(--ifm-color-emphasis-600);
+  margin: 0 0 0.75rem;
+}
+
+.toolTitleRow {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.toolTitleRow .toolTitle {
+  flex: 1;
+  min-width: 0;
+}
+
+.toolHeaderActions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.sourceUrlBar {
+  margin-top: 0.3rem;
+  font-size: 0.8rem;
+}
+
+.sourceUrlLink {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.sourceUrlLink:hover { text-decoration: underline; }
+
+/* ── View toggle ─────────────────────────────────────────────────────────────── */
+
+.viewToggle {
+  display: flex;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  overflow: hidden;
+}
+
+.viewToggleBtn {
+  background: none;
+  border: none;
+  padding: 0.35rem 0.9rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-700);
+  transition: background 0.12s, color 0.12s;
+}
+
+.viewToggleBtnActive {
+  background: var(--ifm-color-primary);
+  color: #fff;
+}
+
+.viewToggleBtn:not(.viewToggleBtnActive):hover {
+  background: var(--ifm-color-emphasis-100);
+}
+
+/* ── Header buttons ──────────────────────────────────────────────────────────── */
+
+.changeFileBtn {
+  background: none;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.35rem 0.8rem;
+  font-size: 0.8rem;
+  color: var(--ifm-color-emphasis-700);
+  cursor: pointer;
+  transition: background 0.12s;
+}
+
+.changeFileBtn:hover { background: var(--ifm-color-emphasis-100); }
+
+.finishReviewBtn {
+  background: var(--ifm-color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 7px;
+  padding: 0.35rem 1rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.12s;
+  white-space: nowrap;
+}
+
+.finishReviewBtn:hover { opacity: 0.85; }
+
+/* ── Tool body ───────────────────────────────────────────────────────────────── */
+
+.toolBody {
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--ifm-background-surface-color);
+}
+
+/* ── File loader ─────────────────────────────────────────────────────────────── */
+
+.loader {
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 10px;
+  background: var(--ifm-background-surface-color);
+  overflow: hidden;
+  max-width: 700px;
+}
+
+.loaderTabs {
+  display: flex;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.loaderTab {
+  background: none;
+  border: none;
+  padding: 0.7rem 1.2rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-600);
+  border-bottom: 2px solid transparent;
+  transition: color 0.12s, border-color 0.12s;
+  margin-bottom: -1px;
+}
+
+.loaderTabActive {
+  color: var(--ifm-color-primary);
+  border-bottom-color: var(--ifm-color-primary);
+}
+
+.loaderSection {
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.loaderDesc {
+  font-size: 0.85rem;
+  color: var(--ifm-color-emphasis-600);
+  margin: 0;
+}
+
+.loaderRow {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.loaderInput {
+  flex: 1;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+}
+
+.loaderInput:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
+
+.loaderFilenameInput {
+  flex: 1;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-family: monospace;
+  background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+}
+
+.loaderFilenameInput:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
+
+.loaderTextarea {
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.6rem 0.75rem;
+  font-size: 0.8rem;
+  font-family: monospace;
+  resize: vertical;
+  background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+  min-height: 180px;
+}
+
+.loaderTextarea:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
+
+.loaderBtn {
+  background: var(--ifm-color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 7px;
+  padding: 0.5rem 1.1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.12s;
+  white-space: nowrap;
+  align-self: flex-start;
+}
+
+.loaderBtn:hover:not(:disabled) { opacity: 0.85; }
+.loaderBtn:disabled { opacity: 0.45; cursor: not-allowed; }
+
+.loaderError {
+  margin: 0 1.25rem 1.25rem;
+  padding: 0.6rem 0.85rem;
+  background: #fef2f2;
+  color: #dc2626;
+  border-radius: 6px;
+  font-size: 0.85rem;
+}
+
+[data-theme='dark'] .loaderError {
+  background: #450a0a;
+  color: #f87171;
+}
+
+/* ── Code view ───────────────────────────────────────────────────────────────── */
+
+.codeView {
+  display: flex;
+  flex-direction: column;
+}
+
+.codeHint {
+  padding: 0.5rem 1rem;
+  font-size: 0.75rem;
+  color: var(--ifm-color-emphasis-500);
+  background: var(--ifm-color-emphasis-50, rgba(0,0,0,0.02));
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  user-select: none;
+}
+
+[data-theme='dark'] .codeHint {
+  background: rgba(255,255,255,0.02);
+}
+
+.codeScroll {
+  overflow-x: auto;
+  overflow-y: auto;
+  max-height: calc(100vh - 220px);
+}
+
+.codeTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: monospace;
+  font-size: 0.82rem;
+  line-height: 1.55;
+}
+
+.codeLine {
+  transition: background 0.08s;
+}
+
+.codeLine:hover .lineNum {
+  background: var(--ifm-color-emphasis-100);
+}
+
+.codeLineSelected {
+  background: rgba(99, 102, 241, 0.08);
+}
+
+.codeLineAnnotated {
+  background: rgba(245, 158, 11, 0.06);
+}
+
+[data-theme='dark'] .codeLineSelected {
+  background: rgba(99, 102, 241, 0.15);
+}
+
+[data-theme='dark'] .codeLineAnnotated {
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.lineNum {
+  padding: 0 0.75rem;
+  min-width: 48px;
+  text-align: right;
+  color: var(--ifm-color-emphasis-400);
+  background: var(--ifm-color-emphasis-50, rgba(0,0,0,0.02));
+  border-right: 1px solid var(--ifm-color-emphasis-200);
+  cursor: pointer;
+  user-select: none;
+  vertical-align: top;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  position: relative;
+}
+
+[data-theme='dark'] .lineNum {
+  background: rgba(255,255,255,0.02);
+}
+
+.lineNum:hover {
+  color: var(--ifm-color-primary);
+  background: var(--ifm-color-emphasis-100);
+}
+
+.lineNumAnchor {
+  background: rgba(99, 102, 241, 0.12) !important;
+  color: var(--ifm-color-primary) !important;
+}
+
+.annotDot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #f59e0b;
+  vertical-align: middle;
+  margin-right: 4px;
+  margin-top: -1px;
+}
+
+.lineContent {
+  padding: 0;
+  vertical-align: top;
+  width: 100%;
+}
+
+.lineCode {
+  margin: 0;
+  padding: 0 1rem;
+  white-space: pre;
+  font-family: inherit;
+  font-size: inherit;
+  background: none;
+  border: none;
+}
+
+/* ── Annotation rows (code view) ─────────────────────────────────────────────── */
+
+.annotRow {
+  background: var(--ifm-color-emphasis-50, rgba(0,0,0,0.01));
+}
+
+[data-theme='dark'] .annotRow {
+  background: rgba(255,255,255,0.02);
+}
+
+.annotCell {
+  padding: 0.5rem 0.75rem;
+}
+
+.annotBlock {
+  border-left: 3px solid #f59e0b;
+  background: rgba(245, 158, 11, 0.06);
+  border-radius: 0 6px 6px 0;
+  padding: 0.5rem 0.75rem;
+}
+
+[data-theme='dark'] .annotBlock {
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.annotMeta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.3rem;
+}
+
+.annotRange {
+  font-size: 0.75rem;
+  color: var(--ifm-color-emphasis-500);
+  font-family: monospace;
+}
+
+.annotDelete {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-400);
+  font-size: 0.75rem;
+  padding: 0 0.2rem;
+  line-height: 1;
+  border-radius: 3px;
+  transition: color 0.12s, background 0.12s;
+}
+
+.annotDelete:hover {
+  color: #dc2626;
+  background: rgba(220, 38, 38, 0.08);
+}
+
+.annotComment {
+  font-size: 0.85rem;
+  color: var(--ifm-font-color-base);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ── Preview view ────────────────────────────────────────────────────────────── */
+
+.previewView {
+  display: flex;
+  flex-direction: column;
+}
+
+.selectionBar {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.5rem 1rem;
+  background: rgba(99, 102, 241, 0.08);
+  border-bottom: 1px solid rgba(99, 102, 241, 0.2);
+  font-size: 0.82rem;
+  flex-wrap: wrap;
+}
+
+.selectionInfo {
+  color: var(--ifm-color-emphasis-700);
+  flex: 1;
+}
+
+.selectionAddBtn {
+  background: var(--ifm-color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 0.3rem 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.12s;
+}
+
+.selectionAddBtn:hover { opacity: 0.85; }
+
+.selectionCancelBtn {
+  background: none;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 6px;
+  padding: 0.3rem 0.6rem;
+  font-size: 0.8rem;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-600);
+  transition: background 0.12s;
+}
+
+.selectionCancelBtn:hover { background: var(--ifm-color-emphasis-100); }
+
+.previewContent {
+  padding: 1.5rem 2rem;
+  max-width: 860px;
+  overflow-x: auto;
+}
+
+/* Markdown rendered content */
+.previewContent h1,
+.previewContent h2,
+.previewContent h3,
+.previewContent h4,
+.previewContent h5,
+.previewContent h6 {
+  margin-top: 1.4em;
+  margin-bottom: 0.5em;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.previewContent h1 { font-size: 1.8rem; }
+.previewContent h2 { font-size: 1.4rem; border-bottom: 1px solid var(--ifm-color-emphasis-200); padding-bottom: 0.3em; }
+.previewContent h3 { font-size: 1.15rem; }
+
+.previewContent p { margin: 0.8em 0; line-height: 1.7; }
+
+.previewContent code {
+  font-family: monospace;
+  font-size: 0.85em;
+  background: var(--ifm-color-emphasis-100);
+  padding: 0.15em 0.35em;
+  border-radius: 4px;
+}
+
+.previewContent pre {
+  background: var(--ifm-color-emphasis-100);
+  border-radius: 7px;
+  padding: 1rem;
+  overflow-x: auto;
+  margin: 1em 0;
+}
+
+.previewContent pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.82rem;
+}
+
+.previewContent ul,
+.previewContent ol {
+  padding-left: 1.5rem;
+  margin: 0.8em 0;
+}
+
+.previewContent li { margin: 0.3em 0; }
+
+.previewContent blockquote {
+  border-left: 4px solid var(--ifm-color-emphasis-300);
+  margin: 1em 0;
+  padding: 0.5em 1em;
+  color: var(--ifm-color-emphasis-600);
+  background: var(--ifm-color-emphasis-50, rgba(0,0,0,0.02));
+  border-radius: 0 6px 6px 0;
+}
+
+.previewContent hr {
+  border: none;
+  border-top: 1px solid var(--ifm-color-emphasis-300);
+  margin: 1.5em 0;
+}
+
+.previewContent a { color: var(--ifm-color-primary); }
+.previewContent strong { font-weight: 700; }
+.previewContent em { font-style: italic; }
+.previewContent del { text-decoration: line-through; }
+
+.previewAnnotations {
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+  padding: 1rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.previewAnnotationsTitle {
+  font-size: 0.82rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ifm-color-emphasis-500);
+  margin-bottom: 0.25rem;
+}
+
+.previewAnnotBlock {
+  border-left: 3px solid #f59e0b;
+  background: rgba(245, 158, 11, 0.06);
+  border-radius: 0 6px 6px 0;
+  padding: 0.5rem 0.75rem;
+}
+
+[data-theme='dark'] .previewAnnotBlock {
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.annotQuote {
+  font-family: monospace;
+  font-size: 0.78rem;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  padding: 0.4rem 0.6rem;
+  margin: 0.3rem 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--ifm-color-emphasis-700);
+}
+
+[data-theme='dark'] .annotQuote {
+  background: rgba(255,255,255,0.06);
+}
+
+/* ── Annotation dialog ───────────────────────────────────────────────────────── */
+
+.dialogOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeOverlay 0.12s ease;
+}
+
+@keyframes fadeOverlay {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.dialog {
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 12px;
+  padding: 1.25rem;
+  width: min(480px, 92vw);
+  box-shadow: 0 12px 48px rgba(0,0,0,0.18);
+  animation: slideDialog 0.15s ease;
+}
+
+@keyframes slideDialog {
+  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.dialogHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.dialogTitle {
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.dialogClose {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: var(--ifm-color-emphasis-500);
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  transition: background 0.12s;
+}
+
+.dialogClose:hover { background: var(--ifm-color-emphasis-100); color: var(--ifm-font-color-base); }
+
+.dialogSelection {
+  margin-bottom: 0.75rem;
+  background: var(--ifm-color-emphasis-100);
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+}
+
+.dialogSelectionText {
+  margin: 0;
+  font-size: 0.78rem;
+  font-family: monospace;
+  color: var(--ifm-color-emphasis-700);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.dialogTextarea {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 8px;
+  padding: 0.6rem 0.75rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  resize: vertical;
+  background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+  min-height: 90px;
+  transition: border-color 0.12s;
+}
+
+.dialogTextarea:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
+
+.dialogActions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  justify-content: flex-end;
+}
+
+.dialogCancel {
+  background: none;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.4rem 0.85rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-700);
+  transition: background 0.12s;
+}
+
+.dialogCancel:hover { background: var(--ifm-color-emphasis-100); }
+
+.dialogConfirm {
+  background: var(--ifm-color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 7px;
+  padding: 0.4rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.12s;
+}
+
+.dialogConfirm:hover:not(:disabled) { opacity: 0.85; }
+.dialogConfirm:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.dialogHint {
+  font-size: 0.72rem;
+  color: var(--ifm-color-emphasis-400);
+  margin-top: 0.4rem;
+  text-align: right;
+}
+
+/* ── Review panel ────────────────────────────────────────────────────────────── */
+
+.reviewPanel {
+  max-width: 820px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.reviewPanelHeader {
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.reviewPanelTitle {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.reviewStats {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.reviewStat {
+  font-size: 0.82rem;
+  color: var(--ifm-color-emphasis-600);
+}
+
+.reviewSourceLink {
+  font-size: 0.82rem;
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.reviewSourceLink:hover { text-decoration: underline; }
+
+.reviewSummarySection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.reviewLabel {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--ifm-color-emphasis-700);
+}
+
+.reviewSummary {
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 8px;
+  padding: 0.6rem 0.85rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  resize: vertical;
+  background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+  transition: border-color 0.12s;
+}
+
+.reviewSummary:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
+
+.reviewActions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.reviewCopyBtn {
+  background: none;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.45rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-700);
+  transition: background 0.12s;
+}
+
+.reviewCopyBtn:hover { background: var(--ifm-color-emphasis-100); }
+
+.reviewOpenClaude {
+  display: inline-flex;
+  align-items: center;
+  background: #7c3aed;
+  color: #fff;
+  border-radius: 7px;
+  padding: 0.45rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: opacity 0.12s;
+}
+
+.reviewOpenClaude:hover { opacity: 0.85; color: #fff; text-decoration: none; }
+
+.reviewOpenChatgpt {
+  display: inline-flex;
+  align-items: center;
+  background: #10a37f;
+  color: #fff;
+  border-radius: 7px;
+  padding: 0.45rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: opacity 0.12s;
+}
+
+.reviewOpenChatgpt:hover { opacity: 0.85; color: #fff; text-decoration: none; }
+
+.reviewPromptPreview {
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--ifm-background-surface-color);
+}
+
+.reviewPromptHeader {
+  padding: 0.5rem 0.85rem;
+  background: var(--ifm-color-emphasis-100);
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.reviewPromptLabel {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ifm-color-emphasis-500);
+}
+
+.reviewPromptText {
+  margin: 0;
+  padding: 1rem;
+  font-size: 0.78rem;
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 400px;
+  overflow-y: auto;
+  color: var(--ifm-font-color-base);
+}
+
+.reviewNewBtn {
+  background: none;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.45rem 1rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-700);
+  transition: background 0.12s;
+  align-self: flex-start;
+}
+
+.reviewNewBtn:hover { background: var(--ifm-color-emphasis-100); }
+
+/* ── Responsive ──────────────────────────────────────────────────────────────── */
+
+@media (max-width: 680px) {
+  .toolTitleRow { flex-direction: column; align-items: flex-start; }
+  .toolHeaderActions { width: 100%; }
+  .previewContent { padding: 1rem; }
+  .reviewActions { flex-direction: column; }
+  .reviewOpenClaude,
+  .reviewOpenChatgpt { justify-content: center; }
+}
diff --git a/web/src/pages/tools/markdown-annotator.tsx b/web/src/pages/tools/markdown-annotator.tsx
new file mode 100644
index 00000000..fcac0f4d
--- /dev/null
+++ b/web/src/pages/tools/markdown-annotator.tsx
@@ -0,0 +1,891 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import Layout from '@theme/Layout';
+import Head from '@docusaurus/Head';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import styles from './markdown-annotator.module.css';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface Annotation {
+  id: string;
+  lineStart: number;
+  lineEnd: number;
+  selectedText: string;
+  comment: string;
+  view: 'code' | 'preview';
+}
+
+type ViewMode = 'code' | 'preview';
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function uid() {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+function parseGithubUrl(url: string): { rawUrl: string; displayUrl: string } | null {
+  try {
+    const u = new URL(url);
+    if (u.hostname !== 'github.com') return null;
+    // /owner/repo/blob/branch/path/to/file
+    const parts = u.pathname.split('/').filter(Boolean);
+    if (parts.length < 5 || parts[2] !== 'blob') return null;
+    const [owner, repo, , ...rest] = parts;
+    const branch = rest[0];
+    const filePath = rest.slice(1).join('/');
+    const rawUrl = `https://raw.githubusercontent.com/${owner}/${repo}/${branch}/${filePath}`;
+    return { rawUrl, displayUrl: url };
+  } catch {
+    return null;
+  }
+}
+
+function detectLanguage(filename: string): string {
+  const ext = filename.split('.').pop()?.toLowerCase() ?? '';
+  const map: Record<string, string> = {
+    ts: 'typescript', tsx: 'typescript', js: 'javascript', jsx: 'javascript',
+    py: 'python', rb: 'ruby', go: 'go', rs: 'rust', java: 'java',
+    c: 'c', cpp: 'cpp', h: 'cpp', cs: 'csharp', php: 'php',
+    sh: 'bash', bash: 'bash', zsh: 'bash', yaml: 'yaml', yml: 'yaml',
+    json: 'json', toml: 'toml', md: 'markdown', mdx: 'markdown',
+    html: 'html', css: 'css', scss: 'scss', sql: 'sql', xml: 'xml',
+  };
+  return map[ext] ?? 'text';
+}
+
+function isMarkdown(filename: string): boolean {
+  const ext = filename.split('.').pop()?.toLowerCase() ?? '';
+  return ext === 'md' || ext === 'mdx';
+}
+
+// ── Minimal Markdown renderer ─────────────────────────────────────────────────
+
+function renderMarkdown(md: string): string {
+  let html = md
+    // Escape HTML first
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+
+  // Fenced code blocks
+  html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
+    return `<pre><code class="language-${lang || 'text'}">${code.trimEnd()}</code></pre>\n`;
+  });
+
+  // Inline code
+  html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+  // Split into lines for block-level processing
+  const lines = html.split('\n');
+  const output: string[] = [];
+  let i = 0;
+  let inList: 'ul' | 'ol' | null = null;
+  let inBlockquote = false;
+  let inPre = false;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Track pre blocks
+    if (line.startsWith('<pre>')) { inPre = true; output.push(line); i++; continue; }
+    if (line.includes('</pre>')) { inPre = false; output.push(line); i++; continue; }
+    if (inPre) { output.push(line); i++; continue; }
+
+    // Close open list/blockquote if needed
+    const isUl = /^[-*+] /.test(line);
+    const isOl = /^\d+\. /.test(line);
+    const isBq = line.startsWith('&gt;');
+
+    if (!isUl && !isOl && inList) {
+      output.push(inList === 'ul' ? '</ul>' : '</ol>');
+      inList = null;
+    }
+    if (!isBq && inBlockquote) {
+      output.push('</blockquote>');
+      inBlockquote = false;
+    }
+
+    if (line === '' || line === '\n') {
+      output.push('');
+      i++;
+      continue;
+    }
+
+    // ATX headings
+    const hMatch = line.match(/^(#{1,6}) (.+)/);
+    if (hMatch) {
+      const level = hMatch[1].length;
+      output.push(`<h${level}>${inlineFormat(hMatch[2])}</h${level}>`);
+      i++; continue;
+    }
+
+    // Horizontal rule
+    if (/^[-*_]{3,}$/.test(line.trim())) {
+      output.push('<hr/>');
+      i++; continue;
+    }
+
+    // Blockquote
+    if (isBq) {
+      if (!inBlockquote) { output.push('<blockquote>'); inBlockquote = true; }
+      output.push(`<p>${inlineFormat(line.replace(/^&gt;\s?/, ''))}</p>`);
+      i++; continue;
+    }
+
+    // Unordered list
+    if (isUl) {
+      if (!inList) { output.push('<ul>'); inList = 'ul'; }
+      output.push(`<li>${inlineFormat(line.replace(/^[-*+] /, ''))}</li>`);
+      i++; continue;
+    }
+
+    // Ordered list
+    if (isOl) {
+      if (!inList) { output.push('<ol>'); inList = 'ol'; }
+      output.push(`<li>${inlineFormat(line.replace(/^\d+\. /, ''))}</li>`);
+      i++; continue;
+    }
+
+    // Paragraph
+    output.push(`<p>${inlineFormat(line)}</p>`);
+    i++;
+  }
+
+  if (inList) output.push(inList === 'ul' ? '</ul>' : '</ol>');
+  if (inBlockquote) output.push('</blockquote>');
+
+  return output.join('\n');
+}
+
+function inlineFormat(text: string): string {
+  return text
+    .replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/__(.+?)__/g, '<strong>$1</strong>')
+    .replace(/_(.+?)_/g, '<em>$1</em>')
+    .replace(/~~(.+?)~~/g, '<del>$1</del>')
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+}
+
+// ── Review prompt builder ─────────────────────────────────────────────────────
+
+function buildReviewPrompt(opts: {
+  content: string;
+  filename: string;
+  sourceUrl: string | null;
+  annotations: Annotation[];
+  summary: string;
+}): string {
+  const { content, filename, sourceUrl, annotations, summary } = opts;
+  const lines: string[] = [];
+
+  lines.push('# File Review');
+  lines.push('');
+  lines.push(`**File:** \`${filename}\``);
+  if (sourceUrl) lines.push(`**Source:** ${sourceUrl}`);
+  lines.push('');
+
+  if (annotations.length > 0) {
+    lines.push('## Inline Annotations');
+    lines.push('');
+    for (const a of annotations) {
+      const range = a.lineStart === a.lineEnd ? `Line ${a.lineStart}` : `Lines ${a.lineStart}–${a.lineEnd}`;
+      lines.push(`### ${range}`);
+      if (a.selectedText) {
+        lines.push('');
+        lines.push('```');
+        lines.push(a.selectedText);
+        lines.push('```');
+      }
+      lines.push('');
+      lines.push(a.comment);
+      lines.push('');
+    }
+  }
+
+  if (summary.trim()) {
+    lines.push('## Summary');
+    lines.push('');
+    lines.push(summary.trim());
+    lines.push('');
+  }
+
+  lines.push('## File Contents');
+  lines.push('');
+  lines.push('```' + detectLanguage(filename));
+  lines.push(content);
+  lines.push('```');
+
+  return lines.join('\n');
+}
+
+// ── Annotation comment dialog ─────────────────────────────────────────────────
+
+interface AnnotationDialogProps {
+  lineStart: number;
+  lineEnd: number;
+  selectedText: string;
+  view: ViewMode;
+  onConfirm: (comment: string) => void;
+  onCancel: () => void;
+}
+
+function AnnotationDialog({ lineStart, lineEnd, selectedText, onConfirm, onCancel }: AnnotationDialogProps) {
+  const [comment, setComment] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+
+  const range = lineStart === lineEnd ? `Line ${lineStart}` : `Lines ${lineStart}–${lineEnd}`;
+
+  return (
+    <div className={styles.dialogOverlay} onClick={onCancel}>
+      <div className={styles.dialog} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.dialogHeader}>
+          <span className={styles.dialogTitle}>Add comment — {range}</span>
+          <button className={styles.dialogClose} onClick={onCancel}>✕</button>
+        </div>
+        {selectedText && (
+          <div className={styles.dialogSelection}>
+            <pre className={styles.dialogSelectionText}>{selectedText.length > 200 ? selectedText.slice(0, 200) + '…' : selectedText}</pre>
+          </div>
+        )}
+        <textarea
+          ref={textareaRef}
+          className={styles.dialogTextarea}
+          placeholder="Write your comment…"
+          value={comment}
+          onChange={(e) => setComment(e.target.value)}
+          rows={4}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+              e.preventDefault();
+              if (comment.trim()) onConfirm(comment.trim());
+            }
+            if (e.key === 'Escape') onCancel();
+          }}
+        />
+        <div className={styles.dialogActions}>
+          <button className={styles.dialogCancel} onClick={onCancel}>Cancel</button>
+          <button
+            className={styles.dialogConfirm}
+            disabled={!comment.trim()}
+            onClick={() => { if (comment.trim()) onConfirm(comment.trim()); }}
+          >
+            Add comment
+          </button>
+        </div>
+        <div className={styles.dialogHint}>⌘↵ to submit · Esc to cancel</div>
+      </div>
+    </div>
+  );
+}
+
+// ── Code view ─────────────────────────────────────────────────────────────────
+
+interface CodeViewProps {
+  lines: string[];
+  annotations: Annotation[];
+  onAnnotationAdd: (lineStart: number, lineEnd: number, selectedText: string) => void;
+  onAnnotationDelete: (id: string) => void;
+}
+
+function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDelete }: CodeViewProps) {
+  const [anchorLine, setAnchorLine] = useState<number | null>(null);
+  const [hoverLine, setHoverLine] = useState<number | null>(null);
+
+  const getSelectedRange = (current: number): [number, number] => {
+    if (anchorLine === null) return [current, current];
+    return anchorLine <= current
+      ? [anchorLine, current]
+      : [current, anchorLine];
+  };
+
+  const annotationsByLine = new Map<number, Annotation[]>();
+  for (const a of annotations) {
+    for (let l = a.lineStart; l <= a.lineEnd; l++) {
+      const arr = annotationsByLine.get(l) ?? [];
+      arr.push(a);
+      annotationsByLine.set(l, arr);
+    }
+  }
+
+  const annotationStartLines = new Set(annotations.map((a) => a.lineStart));
+
+  const handleLineClick = (lineNum: number, e: React.MouseEvent) => {
+    if (e.shiftKey && anchorLine !== null) {
+      const [start, end] = getSelectedRange(lineNum);
+      const selectedText = lines.slice(start - 1, end).join('\n');
+      onAnnotationAdd(start, end, selectedText);
+      setAnchorLine(null);
+    } else {
+      setAnchorLine(lineNum);
+    }
+  };
+
+  const handleLineDoubleClick = (lineNum: number) => {
+    onAnnotationAdd(lineNum, lineNum, lines[lineNum - 1]);
+    setAnchorLine(null);
+  };
+
+  const [low, high] = anchorLine !== null && hoverLine !== null
+    ? getSelectedRange(hoverLine)
+    : [null, null];
+
+  return (
+    <div className={styles.codeView}>
+      <div className={styles.codeHint}>
+        Click a line number to anchor · Shift+click to select range · Double-click to annotate single line
+      </div>
+      <div className={styles.codeScroll}>
+        <table className={styles.codeTable} cellSpacing={0} cellPadding={0}>
+          <tbody>
+            {lines.map((lineContent, idx) => {
+              const lineNum = idx + 1;
+              const isInRange = low !== null && high !== null && lineNum >= low && lineNum <= high;
+              const isAnchor = lineNum === anchorLine;
+              const hasAnnotation = annotationsByLine.has(lineNum);
+              const annotationsHere = annotations.filter((a) => a.lineStart === lineNum);
+
+              return (
+                <React.Fragment key={lineNum}>
+                  <tr
+                    className={`${styles.codeLine} ${isInRange || isAnchor ? styles.codeLineSelected : ''} ${hasAnnotation ? styles.codeLineAnnotated : ''}`}
+                    onMouseEnter={() => setHoverLine(lineNum)}
+                    onMouseLeave={() => setHoverLine(null)}
+                  >
+                    <td
+                      className={`${styles.lineNum} ${isAnchor ? styles.lineNumAnchor : ''}`}
+                      onClick={(e) => handleLineClick(lineNum, e)}
+                      onDoubleClick={() => handleLineDoubleClick(lineNum)}
+                      title={anchorLine === null ? 'Click to anchor, shift+click to select range' : 'Shift+click to select range'}
+                    >
+                      {hasAnnotation && <span className={styles.annotDot} title="Has annotation" />}
+                      {lineNum}
+                    </td>
+                    <td className={styles.lineContent}>
+                      <pre className={styles.lineCode}>{lineContent || ' '}</pre>
+                    </td>
+                  </tr>
+                  {annotationsHere.map((a) => (
+                    <tr key={a.id} className={styles.annotRow}>
+                      <td />
+                      <td className={styles.annotCell}>
+                        <div className={styles.annotBlock}>
+                          <div className={styles.annotMeta}>
+                            <span className={styles.annotRange}>
+                              {a.lineStart === a.lineEnd ? `Line ${a.lineStart}` : `Lines ${a.lineStart}–${a.lineEnd}`}
+                            </span>
+                            <button
+                              className={styles.annotDelete}
+                              onClick={() => onAnnotationDelete(a.id)}
+                              title="Delete annotation"
+                            >✕</button>
+                          </div>
+                          <div className={styles.annotComment}>{a.comment}</div>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </React.Fragment>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+// ── Preview view ──────────────────────────────────────────────────────────────
+
+interface PreviewViewProps {
+  content: string;
+  annotations: Annotation[];
+  onAnnotationAdd: (lineStart: number, lineEnd: number, selectedText: string) => void;
+  onAnnotationDelete: (id: string) => void;
+}
+
+function PreviewView({ content, annotations, onAnnotationAdd, onAnnotationDelete }: PreviewViewProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [selection, setSelection] = useState<{ text: string; lineStart: number; lineEnd: number } | null>(null);
+
+  const lines = content.split('\n');
+
+  const handleMouseUp = useCallback(() => {
+    const sel = window.getSelection();
+    if (!sel || sel.isCollapsed) { setSelection(null); return; }
+    const selectedText = sel.toString().trim();
+    if (!selectedText) { setSelection(null); return; }
+
+    // Find which lines this selection covers by searching content
+    const firstLine = content.indexOf(selectedText.split('\n')[0]);
+    if (firstLine === -1) { setSelection(null); return; }
+    const lineStart = content.slice(0, firstLine).split('\n').length;
+    const lineEnd = lineStart + selectedText.split('\n').length - 1;
+    setSelection({ text: selectedText, lineStart, lineEnd });
+  }, [content]);
+
+  const handleAddFromSelection = useCallback(() => {
+    if (!selection) return;
+    onAnnotationAdd(selection.lineStart, selection.lineEnd, selection.text);
+    setSelection(null);
+    window.getSelection()?.removeAllRanges();
+  }, [selection, onAnnotationAdd]);
+
+  const html = renderMarkdown(content);
+
+  return (
+    <div className={styles.previewView}>
+      {selection && (
+        <div className={styles.selectionBar}>
+          <span className={styles.selectionInfo}>
+            Selected: lines {selection.lineStart}–{selection.lineEnd}
+          </span>
+          <button className={styles.selectionAddBtn} onClick={handleAddFromSelection}>
+            + Add annotation
+          </button>
+          <button className={styles.selectionCancelBtn} onClick={() => { setSelection(null); window.getSelection()?.removeAllRanges(); }}>
+            ✕
+          </button>
+        </div>
+      )}
+
+      <div
+        ref={containerRef}
+        className={styles.previewContent}
+        onMouseUp={handleMouseUp}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+
+      {annotations.length > 0 && (
+        <div className={styles.previewAnnotations}>
+          <div className={styles.previewAnnotationsTitle}>Annotations</div>
+          {annotations.map((a) => (
+            <div key={a.id} className={styles.previewAnnotBlock}>
+              <div className={styles.annotMeta}>
+                <span className={styles.annotRange}>
+                  {a.lineStart === a.lineEnd ? `Line ${a.lineStart}` : `Lines ${a.lineStart}–${a.lineEnd}`}
+                </span>
+                <button className={styles.annotDelete} onClick={() => onAnnotationDelete(a.id)} title="Delete">✕</button>
+              </div>
+              {a.selectedText && (
+                <pre className={styles.annotQuote}>{a.selectedText.length > 150 ? a.selectedText.slice(0, 150) + '…' : a.selectedText}</pre>
+              )}
+              <div className={styles.annotComment}>{a.comment}</div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── File loader ───────────────────────────────────────────────────────────────
+
+interface FileLoaderProps {
+  onLoad: (content: string, filename: string, sourceUrl: string | null) => void;
+}
+
+function FileLoader({ onLoad }: FileLoaderProps) {
+  const [urlInput, setUrlInput] = useState('');
+  const [pasteContent, setPasteContent] = useState('');
+  const [pasteFilename, setPasteFilename] = useState('');
+  const [tab, setTab] = useState<'url' | 'paste'>('url');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchFromGithub = async () => {
+    setError(null);
+    const parsed = parseGithubUrl(urlInput.trim());
+    if (!parsed) {
+      setError('Invalid GitHub URL. Expected: github.com/owner/repo/blob/branch/path/to/file');
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await fetch(parsed.rawUrl);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const text = await res.text();
+      const filename = parsed.rawUrl.split('/').pop() ?? 'file';
+      onLoad(text, filename, parsed.displayUrl);
+    } catch (e) {
+      setError(`Failed to fetch: ${e instanceof Error ? e.message : String(e)}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadPasted = () => {
+    if (!pasteContent.trim()) { setError('No content to load.'); return; }
+    const name = pasteFilename.trim() || 'untitled.md';
+    onLoad(pasteContent, name, null);
+  };
+
+  return (
+    <div className={styles.loader}>
+      <div className={styles.loaderTabs}>
+        <button
+          className={`${styles.loaderTab} ${tab === 'url' ? styles.loaderTabActive : ''}`}
+          onClick={() => setTab('url')}
+        >
+          GitHub URL
+        </button>
+        <button
+          className={`${styles.loaderTab} ${tab === 'paste' ? styles.loaderTabActive : ''}`}
+          onClick={() => setTab('paste')}
+        >
+          Paste content
+        </button>
+      </div>
+
+      {tab === 'url' && (
+        <div className={styles.loaderSection}>
+          <p className={styles.loaderDesc}>
+            Paste a GitHub file URL (github.com/owner/repo/blob/branch/path) to load and review it.
+          </p>
+          <div className={styles.loaderRow}>
+            <input
+              className={styles.loaderInput}
+              type="url"
+              placeholder="https://github.com/owner/repo/blob/main/README.md"
+              value={urlInput}
+              onChange={(e) => setUrlInput(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') fetchFromGithub(); }}
+            />
+            <button
+              className={styles.loaderBtn}
+              onClick={fetchFromGithub}
+              disabled={loading || !urlInput.trim()}
+            >
+              {loading ? 'Loading…' : 'Fetch'}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {tab === 'paste' && (
+        <div className={styles.loaderSection}>
+          <div className={styles.loaderRow}>
+            <input
+              className={styles.loaderFilenameInput}
+              type="text"
+              placeholder="filename.md"
+              value={pasteFilename}
+              onChange={(e) => setPasteFilename(e.target.value)}
+            />
+          </div>
+          <textarea
+            className={styles.loaderTextarea}
+            placeholder="Paste file contents here…"
+            value={pasteContent}
+            onChange={(e) => setPasteContent(e.target.value)}
+            rows={12}
+          />
+          <button className={styles.loaderBtn} onClick={loadPasted} disabled={!pasteContent.trim()}>
+            Load file
+          </button>
+        </div>
+      )}
+
+      {error && <div className={styles.loaderError}>{error}</div>}
+    </div>
+  );
+}
+
+// ── Review panel ──────────────────────────────────────────────────────────────
+
+interface ReviewPanelProps {
+  content: string;
+  filename: string;
+  sourceUrl: string | null;
+  annotations: Annotation[];
+  onClear: () => void;
+}
+
+function ReviewPanel({ content, filename, sourceUrl, annotations, onClear }: ReviewPanelProps) {
+  const [summary, setSummary] = useState('');
+  const [copied, setCopied] = useState(false);
+
+  const prompt = buildReviewPrompt({ content, filename, sourceUrl, annotations, summary });
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(prompt);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const claudeUrl = `https://claude.ai/new?q=${encodeURIComponent(prompt)}`;
+  const chatgptUrl = `https://chatgpt.com/?q=${encodeURIComponent(prompt)}`;
+
+  return (
+    <div className={styles.reviewPanel}>
+      <div className={styles.reviewPanelHeader}>
+        <span className={styles.reviewPanelTitle}>Finish Review</span>
+      </div>
+
+      <div className={styles.reviewStats}>
+        <span className={styles.reviewStat}>{annotations.length} annotation{annotations.length !== 1 ? 's' : ''}</span>
+        <span className={styles.reviewStat}>{content.split('\n').length} lines</span>
+        {sourceUrl && (
+          <a className={styles.reviewSourceLink} href={sourceUrl} target="_blank" rel="noopener noreferrer">
+            View source
+          </a>
+        )}
+      </div>
+
+      <div className={styles.reviewSummarySection}>
+        <label className={styles.reviewLabel}>Summary (optional)</label>
+        <textarea
+          className={styles.reviewSummary}
+          placeholder="Add overall review notes, context, or questions…"
+          value={summary}
+          onChange={(e) => setSummary(e.target.value)}
+          rows={4}
+        />
+      </div>
+
+      <div className={styles.reviewActions}>
+        <button className={styles.reviewCopyBtn} onClick={handleCopy}>
+          {copied ? '✓ Copied!' : 'Copy prompt'}
+        </button>
+        <a
+          className={styles.reviewOpenClaude}
+          href={claudeUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Open in Claude
+        </a>
+        <a
+          className={styles.reviewOpenChatgpt}
+          href={chatgptUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Open in ChatGPT
+        </a>
+      </div>
+
+      <div className={styles.reviewPromptPreview}>
+        <div className={styles.reviewPromptHeader}>
+          <span className={styles.reviewPromptLabel}>Prompt preview</span>
+        </div>
+        <pre className={styles.reviewPromptText}>{prompt}</pre>
+      </div>
+
+      <button className={styles.reviewNewBtn} onClick={onClear}>
+        ← Start new review
+      </button>
+    </div>
+  );
+}
+
+// ── Main tool ─────────────────────────────────────────────────────────────────
+
+function AnnotatorTool() {
+  const [content, setContent] = useState<string | null>(null);
+  const [filename, setFilename] = useState('');
+  const [sourceUrl, setSourceUrl] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<ViewMode>('code');
+  const [annotations, setAnnotations] = useState<Annotation[]>([]);
+  const [pendingAnnotation, setPendingAnnotation] = useState<{
+    lineStart: number;
+    lineEnd: number;
+    selectedText: string;
+  } | null>(null);
+  const [showReview, setShowReview] = useState(false);
+
+  const lines = content?.split('\n') ?? [];
+  const isMd = isMarkdown(filename);
+
+  const handleLoad = useCallback((c: string, fn: string, url: string | null) => {
+    setContent(c);
+    setFilename(fn);
+    setSourceUrl(url);
+    setAnnotations([]);
+    setViewMode(isMarkdown(fn) ? 'preview' : 'code');
+    setShowReview(false);
+  }, []);
+
+  const handleAnnotationAdd = useCallback((lineStart: number, lineEnd: number, selectedText: string) => {
+    setPendingAnnotation({ lineStart, lineEnd, selectedText });
+  }, []);
+
+  const handleAnnotationConfirm = useCallback((comment: string) => {
+    if (!pendingAnnotation) return;
+    const a: Annotation = {
+      id: uid(),
+      ...pendingAnnotation,
+      comment,
+      view: viewMode,
+    };
+    setAnnotations((prev) => [...prev, a]);
+    setPendingAnnotation(null);
+  }, [pendingAnnotation, viewMode]);
+
+  const handleAnnotationDelete = useCallback((id: string) => {
+    setAnnotations((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+
+  const handleClear = useCallback(() => {
+    setContent(null);
+    setFilename('');
+    setSourceUrl(null);
+    setAnnotations([]);
+    setPendingAnnotation(null);
+    setShowReview(false);
+  }, []);
+
+  if (!content) {
+    return (
+      <div className={styles.toolRoot}>
+        <div className={styles.toolHeader}>
+          <div className={styles.breadcrumb}>
+            <a href="/tools">Tools</a>
+            <span> / </span>
+            <span>Markdown Annotator</span>
+          </div>
+          <h1 className={styles.toolTitle}>Markdown Annotator</h1>
+          <p className={styles.toolSubtitle}>
+            Annotate markdown and code files like a PR review. Add inline comments, then export as a prompt for Claude or ChatGPT.
+          </p>
+        </div>
+        <FileLoader onLoad={handleLoad} />
+      </div>
+    );
+  }
+
+  if (showReview) {
+    return (
+      <div className={styles.toolRoot}>
+        <div className={styles.toolHeader}>
+          <div className={styles.breadcrumb}>
+            <a href="/tools">Tools</a>
+            <span> / </span>
+            <button className={styles.breadcrumbBtn} onClick={() => setShowReview(false)}>Markdown Annotator</button>
+            <span> / </span>
+            <span>Review</span>
+          </div>
+          <h1 className={styles.toolTitle}>Review: {filename}</h1>
+        </div>
+        <ReviewPanel
+          content={content}
+          filename={filename}
+          sourceUrl={sourceUrl}
+          annotations={annotations}
+          onClear={handleClear}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.toolRoot}>
+      <div className={styles.toolHeader}>
+        <div className={styles.breadcrumb}>
+          <a href="/tools">Tools</a>
+          <span> / </span>
+          <span>Markdown Annotator</span>
+        </div>
+        <div className={styles.toolTitleRow}>
+          <h1 className={styles.toolTitle}>{filename}</h1>
+          <div className={styles.toolHeaderActions}>
+            {isMd && (
+              <div className={styles.viewToggle}>
+                <button
+                  className={`${styles.viewToggleBtn} ${viewMode === 'code' ? styles.viewToggleBtnActive : ''}`}
+                  onClick={() => setViewMode('code')}
+                >
+                  Code
+                </button>
+                <button
+                  className={`${styles.viewToggleBtn} ${viewMode === 'preview' ? styles.viewToggleBtnActive : ''}`}
+                  onClick={() => setViewMode('preview')}
+                >
+                  Preview
+                </button>
+              </div>
+            )}
+            <button className={styles.changeFileBtn} onClick={handleClear}>
+              Change file
+            </button>
+            <button
+              className={styles.finishReviewBtn}
+              onClick={() => setShowReview(true)}
+            >
+              Finish review ({annotations.length})
+            </button>
+          </div>
+        </div>
+        {sourceUrl && (
+          <div className={styles.sourceUrlBar}>
+            <a href={sourceUrl} target="_blank" rel="noopener noreferrer" className={styles.sourceUrlLink}>
+              {sourceUrl}
+            </a>
+          </div>
+        )}
+      </div>
+
+      <div className={styles.toolBody}>
+        {viewMode === 'code' ? (
+          <CodeView
+            lines={lines}
+            annotations={annotations}
+            onAnnotationAdd={handleAnnotationAdd}
+            onAnnotationDelete={handleAnnotationDelete}
+          />
+        ) : (
+          <PreviewView
+            content={content}
+            annotations={annotations}
+            onAnnotationAdd={handleAnnotationAdd}
+            onAnnotationDelete={handleAnnotationDelete}
+          />
+        )}
+      </div>
+
+      {pendingAnnotation && (
+        <AnnotationDialog
+          lineStart={pendingAnnotation.lineStart}
+          lineEnd={pendingAnnotation.lineEnd}
+          selectedText={pendingAnnotation.selectedText}
+          view={viewMode}
+          onConfirm={handleAnnotationConfirm}
+          onCancel={() => setPendingAnnotation(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
+const SCHEMA = {
+  '@context': 'https://schema.org',
+  '@type': 'WebApplication',
+  name: 'Markdown Annotator',
+  description: 'Annotate markdown and code files with inline review comments, then export as a prompt for Claude or ChatGPT.',
+  url: 'https://treq.dev/tools/markdown-annotator',
+  applicationCategory: 'DeveloperApplication',
+  operatingSystem: 'Any',
+  isAccessibleForFree: true,
+  provider: { '@type': 'Organization', name: 'Treq', url: 'https://treq.dev' },
+};
+
+export default function MarkdownAnnotatorPage() {
+  return (
+    <Layout
+      title="Markdown Annotator"
+      description="Annotate markdown and code files with inline review comments, then export as a prompt for Claude or ChatGPT."
+    >
+      <Head>
+        <script type="application/ld+json">{JSON.stringify(SCHEMA)}</script>
+      </Head>
+      <BrowserOnly>{() => <AnnotatorTool />}</BrowserOnly>
+    </Layout>
+  );
+}

From b6b4520c3192ece1cd4ad1b6544037acff936e54 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 16 Jul 2026 18:18:48 +0000
Subject: [PATCH 2/9] Add embeddable version and embed panel to Markdown
 Annotator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactors the annotator into a shared core (_MarkdownAnnotatorContent.tsx)
used by both the main page and the new embed page.

New embed page (/tools/markdown-annotator-embed):
- Standalone page with no Docusaurus navbar/footer (body override via <Head>)
- Reads ?url=<github-url> or ?content=<base64url>&filename=<name> on load
- Auto-fetches GitHub files and decodes base64 content
- Compact header (filename + Code/Preview toggle) via the compact prop
- Treq branding badge fixed in the bottom-right corner of the iframe
- Full annotation and review functionality works inside the iframe
- Opens Claude/ChatGPT in new tabs which works fine from an embed context

Embed panel on the main tool page:
- "‹/› Embed" toggle button in the file header (shown when a file is loaded)
- Inline panel with slide-down animation showing embed configuration
- Width and height number inputs (default 900×650)
- GitHub-loaded files use compact ?url= param; pasted content uses URL-safe
  base64 (?content=); files >60 KB show a warning to use GitHub URL instead
- Read-only input with the full <iframe> code, copy button, preview link
- Step-by-step embedding instructions (including using width="100%")

Content encoding:
- URL-safe base64 (RFC 4648 §5): + → -, / → _, padding stripped
- UTF-8 aware via TextEncoder/TextDecoder
- Reversible with decodeContentFromUrl exported from core

Also exports encodeContentForUrl, decodeContentFromUrl, and shared
components (CodeView, PreviewView, AnnotationDialog) from the core module
so the embed page can lazy-import the tool without duplication.
---
 .../pages/tools/_MarkdownAnnotatorContent.tsx | 876 ++++++++++++++++++
 .../tools/markdown-annotator-embed.module.css | 126 +++
 .../pages/tools/markdown-annotator-embed.tsx  | 163 ++++
 .../pages/tools/markdown-annotator.module.css | 260 ++++++
 web/src/pages/tools/markdown-annotator.tsx    | 876 +-----------------
 5 files changed, 1439 insertions(+), 862 deletions(-)
 create mode 100644 web/src/pages/tools/_MarkdownAnnotatorContent.tsx
 create mode 100644 web/src/pages/tools/markdown-annotator-embed.module.css
 create mode 100644 web/src/pages/tools/markdown-annotator-embed.tsx

diff --git a/web/src/pages/tools/_MarkdownAnnotatorContent.tsx b/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
new file mode 100644
index 00000000..46bf9a14
--- /dev/null
+++ b/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
@@ -0,0 +1,876 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import styles from './markdown-annotator.module.css';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export interface Annotation {
+  id: string;
+  lineStart: number;
+  lineEnd: number;
+  selectedText: string;
+  comment: string;
+  view: 'code' | 'preview';
+}
+
+export type ViewMode = 'code' | 'preview';
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+export function uid() {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+export function parseGithubUrl(url: string): { rawUrl: string; displayUrl: string } | null {
+  try {
+    const u = new URL(url);
+    if (u.hostname !== 'github.com') return null;
+    const parts = u.pathname.split('/').filter(Boolean);
+    if (parts.length < 5 || parts[2] !== 'blob') return null;
+    const [owner, repo, , ...rest] = parts;
+    const branch = rest[0];
+    const filePath = rest.slice(1).join('/');
+    const rawUrl = `https://raw.githubusercontent.com/${owner}/${repo}/${branch}/${filePath}`;
+    return { rawUrl, displayUrl: url };
+  } catch {
+    return null;
+  }
+}
+
+export function detectLanguage(filename: string): string {
+  const ext = filename.split('.').pop()?.toLowerCase() ?? '';
+  const map: Record<string, string> = {
+    ts: 'typescript', tsx: 'typescript', js: 'javascript', jsx: 'javascript',
+    py: 'python', rb: 'ruby', go: 'go', rs: 'rust', java: 'java',
+    c: 'c', cpp: 'cpp', h: 'cpp', cs: 'csharp', php: 'php',
+    sh: 'bash', bash: 'bash', zsh: 'bash', yaml: 'yaml', yml: 'yaml',
+    json: 'json', toml: 'toml', md: 'markdown', mdx: 'markdown',
+    html: 'html', css: 'css', scss: 'scss', sql: 'sql', xml: 'xml',
+  };
+  return map[ext] ?? 'text';
+}
+
+export function isMarkdown(filename: string): boolean {
+  const ext = filename.split('.').pop()?.toLowerCase() ?? '';
+  return ext === 'md' || ext === 'mdx';
+}
+
+// URL-safe UTF-8 base64 encoding
+export function encodeContentForUrl(content: string): string {
+  const bytes = new TextEncoder().encode(content);
+  let binary = '';
+  bytes.forEach((b) => (binary += String.fromCharCode(b)));
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+export function decodeContentFromUrl(encoded: string): string {
+  const base64 = encoded.replace(/-/g, '+').replace(/_/g, '/');
+  const padded = base64 + '='.repeat((4 - (base64.length % 4)) % 4);
+  const binary = atob(padded);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return new TextDecoder().decode(bytes);
+}
+
+// ── Markdown renderer ─────────────────────────────────────────────────────────
+
+export function renderMarkdown(md: string): string {
+  let html = md
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+
+  html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
+    return `<pre><code class="language-${lang || 'text'}">${code.trimEnd()}</code></pre>\n`;
+  });
+  html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+  const lines = html.split('\n');
+  const output: string[] = [];
+  let i = 0;
+  let inList: 'ul' | 'ol' | null = null;
+  let inBlockquote = false;
+  let inPre = false;
+
+  while (i < lines.length) {
+    const line = lines[i];
+    if (line.startsWith('<pre>')) { inPre = true; output.push(line); i++; continue; }
+    if (line.includes('</pre>')) { inPre = false; output.push(line); i++; continue; }
+    if (inPre) { output.push(line); i++; continue; }
+
+    const isUl = /^[-*+] /.test(line);
+    const isOl = /^\d+\. /.test(line);
+    const isBq = line.startsWith('&gt;');
+
+    if (!isUl && !isOl && inList) { output.push(inList === 'ul' ? '</ul>' : '</ol>'); inList = null; }
+    if (!isBq && inBlockquote) { output.push('</blockquote>'); inBlockquote = false; }
+
+    if (line === '' || line === '\n') { output.push(''); i++; continue; }
+
+    const hMatch = line.match(/^(#{1,6}) (.+)/);
+    if (hMatch) {
+      const level = hMatch[1].length;
+      output.push(`<h${level}>${inlineFmt(hMatch[2])}</h${level}>`);
+      i++; continue;
+    }
+    if (/^[-*_]{3,}$/.test(line.trim())) { output.push('<hr/>'); i++; continue; }
+    if (isBq) {
+      if (!inBlockquote) { output.push('<blockquote>'); inBlockquote = true; }
+      output.push(`<p>${inlineFmt(line.replace(/^&gt;\s?/, ''))}</p>`);
+      i++; continue;
+    }
+    if (isUl) {
+      if (!inList) { output.push('<ul>'); inList = 'ul'; }
+      output.push(`<li>${inlineFmt(line.replace(/^[-*+] /, ''))}</li>`);
+      i++; continue;
+    }
+    if (isOl) {
+      if (!inList) { output.push('<ol>'); inList = 'ol'; }
+      output.push(`<li>${inlineFmt(line.replace(/^\d+\. /, ''))}</li>`);
+      i++; continue;
+    }
+    output.push(`<p>${inlineFmt(line)}</p>`);
+    i++;
+  }
+
+  if (inList) output.push(inList === 'ul' ? '</ul>' : '</ol>');
+  if (inBlockquote) output.push('</blockquote>');
+  return output.join('\n');
+}
+
+function inlineFmt(text: string): string {
+  return text
+    .replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/__(.+?)__/g, '<strong>$1</strong>')
+    .replace(/_(.+?)_/g, '<em>$1</em>')
+    .replace(/~~(.+?)~~/g, '<del>$1</del>')
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+}
+
+// ── Review prompt ─────────────────────────────────────────────────────────────
+
+export function buildReviewPrompt(opts: {
+  content: string;
+  filename: string;
+  sourceUrl: string | null;
+  annotations: Annotation[];
+  summary: string;
+}): string {
+  const { content, filename, sourceUrl, annotations, summary } = opts;
+  const lines: string[] = [];
+
+  lines.push('# File Review');
+  lines.push('');
+  lines.push(`**File:** \`${filename}\``);
+  if (sourceUrl) lines.push(`**Source:** ${sourceUrl}`);
+  lines.push('');
+
+  if (annotations.length > 0) {
+    lines.push('## Inline Annotations');
+    lines.push('');
+    for (const a of annotations) {
+      const range = a.lineStart === a.lineEnd ? `Line ${a.lineStart}` : `Lines ${a.lineStart}–${a.lineEnd}`;
+      lines.push(`### ${range}`);
+      if (a.selectedText) { lines.push(''); lines.push('```'); lines.push(a.selectedText); lines.push('```'); }
+      lines.push(''); lines.push(a.comment); lines.push('');
+    }
+  }
+
+  if (summary.trim()) { lines.push('## Summary'); lines.push(''); lines.push(summary.trim()); lines.push(''); }
+
+  lines.push('## File Contents');
+  lines.push(''); lines.push('```' + detectLanguage(filename)); lines.push(content); lines.push('```');
+
+  return lines.join('\n');
+}
+
+// ── Annotation dialog ─────────────────────────────────────────────────────────
+
+interface AnnotationDialogProps {
+  lineStart: number;
+  lineEnd: number;
+  selectedText: string;
+  view: ViewMode;
+  onConfirm: (comment: string) => void;
+  onCancel: () => void;
+}
+
+export function AnnotationDialog({ lineStart, lineEnd, selectedText, onConfirm, onCancel }: AnnotationDialogProps) {
+  const [comment, setComment] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => { textareaRef.current?.focus(); }, []);
+
+  const range = lineStart === lineEnd ? `Line ${lineStart}` : `Lines ${lineStart}–${lineEnd}`;
+
+  return (
+    <div className={styles.dialogOverlay} onClick={onCancel}>
+      <div className={styles.dialog} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.dialogHeader}>
+          <span className={styles.dialogTitle}>Add comment — {range}</span>
+          <button className={styles.dialogClose} onClick={onCancel}>✕</button>
+        </div>
+        {selectedText && (
+          <div className={styles.dialogSelection}>
+            <pre className={styles.dialogSelectionText}>
+              {selectedText.length > 200 ? selectedText.slice(0, 200) + '…' : selectedText}
+            </pre>
+          </div>
+        )}
+        <textarea
+          ref={textareaRef}
+          className={styles.dialogTextarea}
+          placeholder="Write your comment…"
+          value={comment}
+          onChange={(e) => setComment(e.target.value)}
+          rows={4}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); if (comment.trim()) onConfirm(comment.trim()); }
+            if (e.key === 'Escape') onCancel();
+          }}
+        />
+        <div className={styles.dialogActions}>
+          <button className={styles.dialogCancel} onClick={onCancel}>Cancel</button>
+          <button
+            className={styles.dialogConfirm}
+            disabled={!comment.trim()}
+            onClick={() => { if (comment.trim()) onConfirm(comment.trim()); }}
+          >
+            Add comment
+          </button>
+        </div>
+        <div className={styles.dialogHint}>⌘↵ to submit · Esc to cancel</div>
+      </div>
+    </div>
+  );
+}
+
+// ── Code view ─────────────────────────────────────────────────────────────────
+
+interface CodeViewProps {
+  lines: string[];
+  annotations: Annotation[];
+  onAnnotationAdd: (lineStart: number, lineEnd: number, selectedText: string) => void;
+  onAnnotationDelete: (id: string) => void;
+}
+
+export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDelete }: CodeViewProps) {
+  const [anchorLine, setAnchorLine] = useState<number | null>(null);
+  const [hoverLine, setHoverLine] = useState<number | null>(null);
+
+  const getSelectedRange = (current: number): [number, number] =>
+    anchorLine === null ? [current, current] : anchorLine <= current ? [anchorLine, current] : [current, anchorLine];
+
+  const annotationsByLine = new Map<number, Annotation[]>();
+  for (const a of annotations) {
+    for (let l = a.lineStart; l <= a.lineEnd; l++) {
+      const arr = annotationsByLine.get(l) ?? [];
+      arr.push(a);
+      annotationsByLine.set(l, arr);
+    }
+  }
+
+  const handleLineClick = (lineNum: number, e: React.MouseEvent) => {
+    if (e.shiftKey && anchorLine !== null) {
+      const [start, end] = getSelectedRange(lineNum);
+      onAnnotationAdd(start, end, lines.slice(start - 1, end).join('\n'));
+      setAnchorLine(null);
+    } else {
+      setAnchorLine(lineNum);
+    }
+  };
+
+  const [low, high] = anchorLine !== null && hoverLine !== null ? getSelectedRange(hoverLine) : [null, null];
+
+  return (
+    <div className={styles.codeView}>
+      <div className={styles.codeHint}>
+        Click a line number to anchor · Shift+click to select range · Double-click to annotate single line
+      </div>
+      <div className={styles.codeScroll}>
+        <table className={styles.codeTable} cellSpacing={0} cellPadding={0}>
+          <tbody>
+            {lines.map((lineContent, idx) => {
+              const lineNum = idx + 1;
+              const isInRange = low !== null && high !== null && lineNum >= low && lineNum <= high;
+              const isAnchor = lineNum === anchorLine;
+              const hasAnnotation = annotationsByLine.has(lineNum);
+              const annotationsHere = annotations.filter((a) => a.lineStart === lineNum);
+
+              return (
+                <React.Fragment key={lineNum}>
+                  <tr
+                    className={`${styles.codeLine} ${isInRange || isAnchor ? styles.codeLineSelected : ''} ${hasAnnotation ? styles.codeLineAnnotated : ''}`}
+                    onMouseEnter={() => setHoverLine(lineNum)}
+                    onMouseLeave={() => setHoverLine(null)}
+                  >
+                    <td
+                      className={`${styles.lineNum} ${isAnchor ? styles.lineNumAnchor : ''}`}
+                      onClick={(e) => handleLineClick(lineNum, e)}
+                      onDoubleClick={() => { onAnnotationAdd(lineNum, lineNum, lines[lineNum - 1]); setAnchorLine(null); }}
+                      title={anchorLine === null ? 'Click to anchor, shift+click to select range' : 'Shift+click to select range'}
+                    >
+                      {hasAnnotation && <span className={styles.annotDot} title="Has annotation" />}
+                      {lineNum}
+                    </td>
+                    <td className={styles.lineContent}>
+                      <pre className={styles.lineCode}>{lineContent || ' '}</pre>
+                    </td>
+                  </tr>
+                  {annotationsHere.map((a) => (
+                    <tr key={a.id} className={styles.annotRow}>
+                      <td />
+                      <td className={styles.annotCell}>
+                        <div className={styles.annotBlock}>
+                          <div className={styles.annotMeta}>
+                            <span className={styles.annotRange}>
+                              {a.lineStart === a.lineEnd ? `Line ${a.lineStart}` : `Lines ${a.lineStart}–${a.lineEnd}`}
+                            </span>
+                            <button className={styles.annotDelete} onClick={() => onAnnotationDelete(a.id)} title="Delete">✕</button>
+                          </div>
+                          <div className={styles.annotComment}>{a.comment}</div>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </React.Fragment>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+// ── Preview view ──────────────────────────────────────────────────────────────
+
+interface PreviewViewProps {
+  content: string;
+  annotations: Annotation[];
+  onAnnotationAdd: (lineStart: number, lineEnd: number, selectedText: string) => void;
+  onAnnotationDelete: (id: string) => void;
+}
+
+export function PreviewView({ content, annotations, onAnnotationAdd, onAnnotationDelete }: PreviewViewProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [selection, setSelection] = useState<{ text: string; lineStart: number; lineEnd: number } | null>(null);
+
+  const handleMouseUp = useCallback(() => {
+    const sel = window.getSelection();
+    if (!sel || sel.isCollapsed) { setSelection(null); return; }
+    const selectedText = sel.toString().trim();
+    if (!selectedText) { setSelection(null); return; }
+    const firstLine = content.indexOf(selectedText.split('\n')[0]);
+    if (firstLine === -1) { setSelection(null); return; }
+    const lineStart = content.slice(0, firstLine).split('\n').length;
+    const lineEnd = lineStart + selectedText.split('\n').length - 1;
+    setSelection({ text: selectedText, lineStart, lineEnd });
+  }, [content]);
+
+  const handleAddFromSelection = useCallback(() => {
+    if (!selection) return;
+    onAnnotationAdd(selection.lineStart, selection.lineEnd, selection.text);
+    setSelection(null);
+    window.getSelection()?.removeAllRanges();
+  }, [selection, onAnnotationAdd]);
+
+  const html = renderMarkdown(content);
+
+  return (
+    <div className={styles.previewView}>
+      {selection && (
+        <div className={styles.selectionBar}>
+          <span className={styles.selectionInfo}>Selected: lines {selection.lineStart}–{selection.lineEnd}</span>
+          <button className={styles.selectionAddBtn} onClick={handleAddFromSelection}>+ Add annotation</button>
+          <button className={styles.selectionCancelBtn} onClick={() => { setSelection(null); window.getSelection()?.removeAllRanges(); }}>✕</button>
+        </div>
+      )}
+      <div ref={containerRef} className={styles.previewContent} onMouseUp={handleMouseUp} dangerouslySetInnerHTML={{ __html: html }} />
+      {annotations.length > 0 && (
+        <div className={styles.previewAnnotations}>
+          <div className={styles.previewAnnotationsTitle}>Annotations</div>
+          {annotations.map((a) => (
+            <div key={a.id} className={styles.previewAnnotBlock}>
+              <div className={styles.annotMeta}>
+                <span className={styles.annotRange}>
+                  {a.lineStart === a.lineEnd ? `Line ${a.lineStart}` : `Lines ${a.lineStart}–${a.lineEnd}`}
+                </span>
+                <button className={styles.annotDelete} onClick={() => onAnnotationDelete(a.id)} title="Delete">✕</button>
+              </div>
+              {a.selectedText && (
+                <pre className={styles.annotQuote}>
+                  {a.selectedText.length > 150 ? a.selectedText.slice(0, 150) + '…' : a.selectedText}
+                </pre>
+              )}
+              <div className={styles.annotComment}>{a.comment}</div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── File loader ───────────────────────────────────────────────────────────────
+
+interface FileLoaderProps {
+  onLoad: (content: string, filename: string, sourceUrl: string | null) => void;
+}
+
+export function FileLoader({ onLoad }: FileLoaderProps) {
+  const [urlInput, setUrlInput] = useState('');
+  const [pasteContent, setPasteContent] = useState('');
+  const [pasteFilename, setPasteFilename] = useState('');
+  const [tab, setTab] = useState<'url' | 'paste'>('url');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchFromGithub = async () => {
+    setError(null);
+    const parsed = parseGithubUrl(urlInput.trim());
+    if (!parsed) { setError('Invalid GitHub URL. Expected: github.com/owner/repo/blob/branch/path/to/file'); return; }
+    setLoading(true);
+    try {
+      const res = await fetch(parsed.rawUrl);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const text = await res.text();
+      const filename = parsed.rawUrl.split('/').pop() ?? 'file';
+      onLoad(text, filename, parsed.displayUrl);
+    } catch (e) {
+      setError(`Failed to fetch: ${e instanceof Error ? e.message : String(e)}`);
+    } finally { setLoading(false); }
+  };
+
+  const loadPasted = () => {
+    if (!pasteContent.trim()) { setError('No content to load.'); return; }
+    onLoad(pasteContent, pasteFilename.trim() || 'untitled.md', null);
+  };
+
+  return (
+    <div className={styles.loader}>
+      <div className={styles.loaderTabs}>
+        <button className={`${styles.loaderTab} ${tab === 'url' ? styles.loaderTabActive : ''}`} onClick={() => setTab('url')}>GitHub URL</button>
+        <button className={`${styles.loaderTab} ${tab === 'paste' ? styles.loaderTabActive : ''}`} onClick={() => setTab('paste')}>Paste content</button>
+      </div>
+
+      {tab === 'url' && (
+        <div className={styles.loaderSection}>
+          <p className={styles.loaderDesc}>Paste a GitHub file URL to load and review it.</p>
+          <div className={styles.loaderRow}>
+            <input
+              className={styles.loaderInput}
+              type="url"
+              placeholder="https://github.com/owner/repo/blob/main/README.md"
+              value={urlInput}
+              onChange={(e) => setUrlInput(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') fetchFromGithub(); }}
+            />
+            <button className={styles.loaderBtn} onClick={fetchFromGithub} disabled={loading || !urlInput.trim()}>
+              {loading ? 'Loading…' : 'Fetch'}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {tab === 'paste' && (
+        <div className={styles.loaderSection}>
+          <div className={styles.loaderRow}>
+            <input
+              className={styles.loaderFilenameInput}
+              type="text"
+              placeholder="filename.md"
+              value={pasteFilename}
+              onChange={(e) => setPasteFilename(e.target.value)}
+            />
+          </div>
+          <textarea
+            className={styles.loaderTextarea}
+            placeholder="Paste file contents here…"
+            value={pasteContent}
+            onChange={(e) => setPasteContent(e.target.value)}
+            rows={12}
+          />
+          <button className={styles.loaderBtn} onClick={loadPasted} disabled={!pasteContent.trim()}>Load file</button>
+        </div>
+      )}
+
+      {error && <div className={styles.loaderError}>{error}</div>}
+    </div>
+  );
+}
+
+// ── Review panel ──────────────────────────────────────────────────────────────
+
+interface ReviewPanelProps {
+  content: string;
+  filename: string;
+  sourceUrl: string | null;
+  annotations: Annotation[];
+  onBack: () => void;
+}
+
+export function ReviewPanel({ content, filename, sourceUrl, annotations, onBack }: ReviewPanelProps) {
+  const [summary, setSummary] = useState('');
+  const [copied, setCopied] = useState(false);
+
+  const prompt = buildReviewPrompt({ content, filename, sourceUrl, annotations, summary });
+  const claudeUrl = `https://claude.ai/new?q=${encodeURIComponent(prompt)}`;
+  const chatgptUrl = `https://chatgpt.com/?q=${encodeURIComponent(prompt)}`;
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(prompt);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className={styles.reviewPanel}>
+      <div className={styles.reviewPanelHeader}>
+        <span className={styles.reviewPanelTitle}>Finish Review</span>
+      </div>
+      <div className={styles.reviewStats}>
+        <span className={styles.reviewStat}>{annotations.length} annotation{annotations.length !== 1 ? 's' : ''}</span>
+        <span className={styles.reviewStat}>{content.split('\n').length} lines</span>
+        {sourceUrl && (
+          <a className={styles.reviewSourceLink} href={sourceUrl} target="_blank" rel="noopener noreferrer">View source</a>
+        )}
+      </div>
+      <div className={styles.reviewSummarySection}>
+        <label className={styles.reviewLabel}>Summary (optional)</label>
+        <textarea
+          className={styles.reviewSummary}
+          placeholder="Add overall review notes, context, or questions…"
+          value={summary}
+          onChange={(e) => setSummary(e.target.value)}
+          rows={4}
+        />
+      </div>
+      <div className={styles.reviewActions}>
+        <button className={styles.reviewCopyBtn} onClick={handleCopy}>{copied ? '✓ Copied!' : 'Copy prompt'}</button>
+        <a className={styles.reviewOpenClaude} href={claudeUrl} target="_blank" rel="noopener noreferrer">Open in Claude</a>
+        <a className={styles.reviewOpenChatgpt} href={chatgptUrl} target="_blank" rel="noopener noreferrer">Open in ChatGPT</a>
+      </div>
+      <div className={styles.reviewPromptPreview}>
+        <div className={styles.reviewPromptHeader}><span className={styles.reviewPromptLabel}>Prompt preview</span></div>
+        <pre className={styles.reviewPromptText}>{prompt}</pre>
+      </div>
+      <button className={styles.reviewNewBtn} onClick={onBack}>← Back to annotations</button>
+    </div>
+  );
+}
+
+// ── Embed panel ───────────────────────────────────────────────────────────────
+
+const EMBED_BASE = 'https://treq.dev/tools/markdown-annotator-embed';
+const CONTENT_SIZE_LIMIT = 60_000;
+
+interface EmbedPanelProps {
+  content: string;
+  filename: string;
+  sourceUrl: string | null;
+  onClose: () => void;
+}
+
+function EmbedPanel({ content, filename, sourceUrl, onClose }: EmbedPanelProps) {
+  const [width, setWidth] = useState(900);
+  const [height, setHeight] = useState(650);
+  const [copied, setCopied] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const tooLarge = !sourceUrl && content.length > CONTENT_SIZE_LIMIT;
+
+  const embedUrl = sourceUrl
+    ? `${EMBED_BASE}?url=${encodeURIComponent(sourceUrl)}`
+    : tooLarge
+    ? null
+    : `${EMBED_BASE}?content=${encodeContentForUrl(content)}&filename=${encodeURIComponent(filename)}`;
+
+  const iframeCode = embedUrl
+    ? `<iframe\n  src="${embedUrl}"\n  width="${width}"\n  height="${height}"\n  frameborder="0"\n  style="border-radius:8px;border:1px solid #e5e7eb;"\n></iframe>`
+    : null;
+
+  const handleCopy = async () => {
+    if (!iframeCode) return;
+    await navigator.clipboard.writeText(iframeCode);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleInputClick = () => { inputRef.current?.select(); };
+
+  return (
+    <div className={styles.embedPanel}>
+      <div className={styles.embedPanelHeader}>
+        <div className={styles.embedPanelTitleRow}>
+          <span className={styles.embedPanelTitle}>Embed this file</span>
+          <button className={styles.embedPanelClose} onClick={onClose}>✕</button>
+        </div>
+        <p className={styles.embedPanelDesc}>
+          Copy the code below and paste it into any HTML page to embed this file annotator.
+        </p>
+      </div>
+
+      {tooLarge && (
+        <div className={styles.embedWarning}>
+          Content is too large to encode in a URL ({(content.length / 1024).toFixed(0)} KB). Use a GitHub URL to enable embedding.
+        </div>
+      )}
+
+      {!tooLarge && embedUrl && (
+        <>
+          <div className={styles.embedSizeRow}>
+            <label className={styles.embedSizeLabel}>
+              Width
+              <input
+                className={styles.embedSizeInput}
+                type="number"
+                value={width}
+                min={320}
+                max={2560}
+                onChange={(e) => setWidth(Math.max(320, Number(e.target.value)))}
+              />
+              <span className={styles.embedSizeUnit}>px</span>
+            </label>
+            <span className={styles.embedSizeSep}>×</span>
+            <label className={styles.embedSizeLabel}>
+              Height
+              <input
+                className={styles.embedSizeInput}
+                type="number"
+                value={height}
+                min={300}
+                max={2000}
+                onChange={(e) => setHeight(Math.max(300, Number(e.target.value)))}
+              />
+              <span className={styles.embedSizeUnit}>px</span>
+            </label>
+          </div>
+
+          <div className={styles.embedCodeSection}>
+            <div className={styles.embedCodeLabel}>Embed code</div>
+            <div className={styles.embedCodeRow}>
+              <input
+                ref={inputRef}
+                className={styles.embedCodeInput}
+                type="text"
+                readOnly
+                value={iframeCode ?? ''}
+                onClick={handleInputClick}
+              />
+              <button className={styles.embedCopyBtn} onClick={handleCopy}>
+                {copied ? '✓ Copied' : 'Copy'}
+              </button>
+            </div>
+          </div>
+
+          <div className={styles.embedPreviewRow}>
+            <a
+              className={styles.embedPreviewLink}
+              href={embedUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Preview embed ↗
+            </a>
+          </div>
+
+          <div className={styles.embedInstructions}>
+            <div className={styles.embedInstructionsTitle}>How to embed</div>
+            <ol className={styles.embedInstructionsList}>
+              <li>Copy the embed code above.</li>
+              <li>Paste it into any HTML page where you want the annotator to appear.</li>
+              <li>Adjust <code>width</code> and <code>height</code> to fit your layout. You can also use <code>width="100%"</code>.</li>
+              <li>Viewers can annotate the file and export their review to Claude or ChatGPT directly from the embed.</li>
+            </ol>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+// ── Annotator tool ────────────────────────────────────────────────────────────
+
+interface InitialFileState {
+  content: string;
+  filename: string;
+  sourceUrl: string | null;
+}
+
+interface AnnotatorToolProps {
+  compact?: boolean;
+  initialFile?: InitialFileState;
+}
+
+export function AnnotatorTool({ compact = false, initialFile }: AnnotatorToolProps) {
+  const [content, setContent] = useState<string | null>(initialFile?.content ?? null);
+  const [filename, setFilename] = useState(initialFile?.filename ?? '');
+  const [sourceUrl, setSourceUrl] = useState<string | null>(initialFile?.sourceUrl ?? null);
+  const [viewMode, setViewMode] = useState<ViewMode>(() =>
+    initialFile ? (isMarkdown(initialFile.filename) ? 'preview' : 'code') : 'code'
+  );
+  const [annotations, setAnnotations] = useState<Annotation[]>([]);
+  const [pendingAnnotation, setPendingAnnotation] = useState<{ lineStart: number; lineEnd: number; selectedText: string } | null>(null);
+  const [showReview, setShowReview] = useState(false);
+  const [showEmbed, setShowEmbed] = useState(false);
+
+  const lines = content?.split('\n') ?? [];
+  const isMd = isMarkdown(filename);
+
+  const handleLoad = useCallback((c: string, fn: string, url: string | null) => {
+    setContent(c);
+    setFilename(fn);
+    setSourceUrl(url);
+    setAnnotations([]);
+    setViewMode(isMarkdown(fn) ? 'preview' : 'code');
+    setShowReview(false);
+    setShowEmbed(false);
+  }, []);
+
+  const handleAnnotationAdd = useCallback((lineStart: number, lineEnd: number, selectedText: string) => {
+    setPendingAnnotation({ lineStart, lineEnd, selectedText });
+  }, []);
+
+  const handleAnnotationConfirm = useCallback((comment: string) => {
+    if (!pendingAnnotation) return;
+    setAnnotations((prev) => [...prev, { id: uid(), ...pendingAnnotation, comment, view: viewMode }]);
+    setPendingAnnotation(null);
+  }, [pendingAnnotation, viewMode]);
+
+  const handleAnnotationDelete = useCallback((id: string) => {
+    setAnnotations((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+
+  const handleClear = useCallback(() => {
+    if (compact) return;
+    setContent(null);
+    setFilename('');
+    setSourceUrl(null);
+    setAnnotations([]);
+    setPendingAnnotation(null);
+    setShowReview(false);
+    setShowEmbed(false);
+  }, [compact]);
+
+  if (!content) {
+    return (
+      <div className={styles.toolRoot}>
+        <div className={styles.toolHeader}>
+          {!compact && (
+            <div className={styles.breadcrumb}>
+              <a href="/tools">Tools</a>
+              <span> / </span>
+              <span>Markdown Annotator</span>
+            </div>
+          )}
+          <h1 className={styles.toolTitle}>Markdown Annotator</h1>
+          <p className={styles.toolSubtitle}>
+            Annotate markdown and code files like a PR review. Add inline comments, then export a review prompt for Claude or ChatGPT.
+          </p>
+        </div>
+        <FileLoader onLoad={handleLoad} />
+      </div>
+    );
+  }
+
+  if (showReview) {
+    return (
+      <div className={styles.toolRoot}>
+        <div className={styles.toolHeader}>
+          {!compact && (
+            <div className={styles.breadcrumb}>
+              <a href="/tools">Tools</a>
+              <span> / </span>
+              <button className={styles.breadcrumbBtn} onClick={() => setShowReview(false)}>Markdown Annotator</button>
+              <span> / </span>
+              <span>Review</span>
+            </div>
+          )}
+          <h1 className={styles.toolTitle}>Review: {filename}</h1>
+        </div>
+        <ReviewPanel
+          content={content}
+          filename={filename}
+          sourceUrl={sourceUrl}
+          annotations={annotations}
+          onBack={() => setShowReview(false)}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.toolRoot}>
+      <div className={styles.toolHeader}>
+        {!compact && (
+          <div className={styles.breadcrumb}>
+            <a href="/tools">Tools</a>
+            <span> / </span>
+            <span>Markdown Annotator</span>
+          </div>
+        )}
+        <div className={styles.toolTitleRow}>
+          <h1 className={compact ? styles.toolTitleCompact : styles.toolTitle}>{filename}</h1>
+          <div className={styles.toolHeaderActions}>
+            {isMd && (
+              <div className={styles.viewToggle}>
+                <button
+                  className={`${styles.viewToggleBtn} ${viewMode === 'code' ? styles.viewToggleBtnActive : ''}`}
+                  onClick={() => setViewMode('code')}
+                >Code</button>
+                <button
+                  className={`${styles.viewToggleBtn} ${viewMode === 'preview' ? styles.viewToggleBtnActive : ''}`}
+                  onClick={() => setViewMode('preview')}
+                >Preview</button>
+              </div>
+            )}
+            {!compact && (
+              <>
+                <button
+                  className={`${styles.embedToggleBtn} ${showEmbed ? styles.embedToggleBtnActive : ''}`}
+                  onClick={() => setShowEmbed((v) => !v)}
+                >
+                  {showEmbed ? 'Hide embed' : '‹/› Embed'}
+                </button>
+                <button className={styles.changeFileBtn} onClick={handleClear}>Change file</button>
+              </>
+            )}
+            <button className={styles.finishReviewBtn} onClick={() => setShowReview(true)}>
+              Finish review ({annotations.length})
+            </button>
+          </div>
+        </div>
+        {sourceUrl && (
+          <div className={styles.sourceUrlBar}>
+            <a href={sourceUrl} target="_blank" rel="noopener noreferrer" className={styles.sourceUrlLink}>{sourceUrl}</a>
+          </div>
+        )}
+      </div>
+
+      {showEmbed && !compact && (
+        <EmbedPanel content={content} filename={filename} sourceUrl={sourceUrl} onClose={() => setShowEmbed(false)} />
+      )}
+
+      <div className={styles.toolBody}>
+        {viewMode === 'code' ? (
+          <CodeView lines={lines} annotations={annotations} onAnnotationAdd={handleAnnotationAdd} onAnnotationDelete={handleAnnotationDelete} />
+        ) : (
+          <PreviewView content={content} annotations={annotations} onAnnotationAdd={handleAnnotationAdd} onAnnotationDelete={handleAnnotationDelete} />
+        )}
+      </div>
+
+      {pendingAnnotation && (
+        <AnnotationDialog
+          lineStart={pendingAnnotation.lineStart}
+          lineEnd={pendingAnnotation.lineEnd}
+          selectedText={pendingAnnotation.selectedText}
+          view={viewMode}
+          onConfirm={handleAnnotationConfirm}
+          onCancel={() => setPendingAnnotation(null)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/web/src/pages/tools/markdown-annotator-embed.module.css b/web/src/pages/tools/markdown-annotator-embed.module.css
new file mode 100644
index 00000000..f7ab76ca
--- /dev/null
+++ b/web/src/pages/tools/markdown-annotator-embed.module.css
@@ -0,0 +1,126 @@
+/* ── Embed root ───────────────────────────────────────────────────────────────
+   Fills the iframe viewport. The #__docusaurus wrapper is forced to
+   height: 100vh by the injected <style> in the page <Head>.                  */
+
+.embedRoot {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: var(--ifm-background-color);
+}
+
+/* Let the toolRoot inside fill the available space */
+.embedRoot > div:first-child:not(.badge):not(.loadingState):not(.errorState) {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+}
+
+/* ── Loading / error states ──────────────────────────────────────────────────── */
+
+.loadingState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  flex: 1;
+  color: var(--ifm-color-emphasis-600);
+  font-size: 0.9rem;
+}
+
+.loadingSpinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--ifm-color-emphasis-200);
+  border-top-color: var(--ifm-color-primary);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.errorState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 0.6rem;
+  padding: 2rem;
+  text-align: center;
+}
+
+.errorIcon {
+  font-size: 2rem;
+  color: #f59e0b;
+}
+
+.errorMsg {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--ifm-font-color-base);
+  max-width: 440px;
+}
+
+.errorHint {
+  font-size: 0.78rem;
+  color: var(--ifm-color-emphasis-500);
+  max-width: 440px;
+  word-break: break-all;
+}
+
+.errorHint code {
+  font-family: monospace;
+  background: var(--ifm-color-emphasis-100);
+  padding: 0.15em 0.35em;
+  border-radius: 4px;
+}
+
+/* ── Treq badge ───────────────────────────────────────────────────────────────
+   Fixed to the bottom-right corner of the iframe viewport.                   */
+
+.badge {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  z-index: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 20px;
+  padding: 4px 10px 4px 6px;
+  text-decoration: none;
+  color: var(--ifm-color-emphasis-700);
+  font-size: 0.72rem;
+  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  transition: box-shadow 0.15s, transform 0.12s;
+  pointer-events: auto;
+  user-select: none;
+}
+
+.badge:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+  transform: translateY(-1px);
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+.badgeLogo {
+  width: 16px;
+  height: 16px;
+  display: block;
+  flex-shrink: 0;
+}
+
+.badgeText {
+  letter-spacing: 0.01em;
+}
diff --git a/web/src/pages/tools/markdown-annotator-embed.tsx b/web/src/pages/tools/markdown-annotator-embed.tsx
new file mode 100644
index 00000000..476df26f
--- /dev/null
+++ b/web/src/pages/tools/markdown-annotator-embed.tsx
@@ -0,0 +1,163 @@
+import React, { useState, useEffect, lazy, Suspense } from 'react';
+import Head from '@docusaurus/Head';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import styles from './markdown-annotator-embed.module.css';
+
+const AnnotatorTool = lazy(() =>
+  import('./_MarkdownAnnotatorContent').then((m) => ({ default: m.AnnotatorTool }))
+);
+
+// ── Treq badge ────────────────────────────────────────────────────────────────
+
+function TreqBadge() {
+  return (
+    <a
+      href="https://treq.dev"
+      target="_blank"
+      rel="noopener noreferrer"
+      className={styles.badge}
+      title="Made with Treq"
+    >
+      <img src="/img/favicon.svg" alt="Treq" className={styles.badgeLogo} />
+      <span className={styles.badgeText}>treq.dev</span>
+    </a>
+  );
+}
+
+// ── Embed loader ──────────────────────────────────────────────────────────────
+
+interface LoadedFile {
+  content: string;
+  filename: string;
+  sourceUrl: string | null;
+}
+
+function EmbedLoader({ onLoad, onError }: { onLoad: (f: LoadedFile) => void; onError: (msg: string) => void }) {
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const urlParam = params.get('url');
+    const contentParam = params.get('content');
+    const filenameParam = params.get('filename') ?? 'untitled.md';
+
+    if (urlParam) {
+      let rawUrl: string;
+      let displayUrl = urlParam;
+
+      try {
+        const u = new URL(urlParam);
+        if (u.hostname === 'github.com') {
+          const parts = u.pathname.split('/').filter(Boolean);
+          if (parts.length >= 5 && parts[2] === 'blob') {
+            const [owner, repo, , ...rest] = parts;
+            const branch = rest[0];
+            const filePath = rest.slice(1).join('/');
+            rawUrl = `https://raw.githubusercontent.com/${owner}/${repo}/${branch}/${filePath}`;
+          } else {
+            onError('Invalid GitHub URL format. Expected: github.com/owner/repo/blob/branch/path');
+            return;
+          }
+        } else if (u.hostname === 'raw.githubusercontent.com') {
+          rawUrl = urlParam;
+        } else {
+          onError('Only github.com URLs are supported.');
+          return;
+        }
+      } catch {
+        onError('Invalid URL.');
+        return;
+      }
+
+      fetch(rawUrl)
+        .then((r) => {
+          if (!r.ok) throw new Error(`HTTP ${r.status}`);
+          return r.text();
+        })
+        .then((text) => {
+          const filename = rawUrl.split('/').pop() ?? filenameParam;
+          onLoad({ content: text, filename, sourceUrl: displayUrl });
+        })
+        .catch((e) => onError(`Failed to fetch file: ${e instanceof Error ? e.message : String(e)}`));
+
+      return;
+    }
+
+    if (contentParam) {
+      try {
+        const base64 = contentParam.replace(/-/g, '+').replace(/_/g, '/');
+        const padded = base64 + '='.repeat((4 - (base64.length % 4)) % 4);
+        const binary = atob(padded);
+        const bytes = new Uint8Array(binary.length);
+        for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+        const decoded = new TextDecoder().decode(bytes);
+        onLoad({ content: decoded, filename: filenameParam, sourceUrl: null });
+      } catch {
+        onError('Failed to decode content. The embed URL may be malformed.');
+      }
+      return;
+    }
+
+    onError('No content provided. Add ?url= or ?content= to the URL.');
+  }, [onLoad, onError]);
+
+  return (
+    <div className={styles.loadingState}>
+      <div className={styles.loadingSpinner} />
+      <span>Loading file…</span>
+    </div>
+  );
+}
+
+// ── Embed page inner ──────────────────────────────────────────────────────────
+
+function EmbedInner() {
+  const [file, setFile] = useState<LoadedFile | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loaded, setLoaded] = useState(false);
+
+  const handleLoad = (f: LoadedFile) => { setFile(f); setLoaded(true); };
+  const handleError = (msg: string) => { setError(msg); setLoaded(true); };
+
+  return (
+    <div className={styles.embedRoot}>
+      {!loaded && <EmbedLoader onLoad={handleLoad} onError={handleError} />}
+
+      {loaded && error && (
+        <div className={styles.errorState}>
+          <div className={styles.errorIcon}>⚠</div>
+          <div className={styles.errorMsg}>{error}</div>
+          <div className={styles.errorHint}>
+            Example: <code>?url=https://github.com/owner/repo/blob/main/README.md</code>
+          </div>
+        </div>
+      )}
+
+      {loaded && file && (
+        <Suspense fallback={<div className={styles.loadingState}><div className={styles.loadingSpinner} />Loading tool…</div>}>
+          <AnnotatorTool compact initialFile={file} />
+        </Suspense>
+      )}
+
+      <TreqBadge />
+    </div>
+  );
+}
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
+export default function MarkdownAnnotatorEmbedPage() {
+  return (
+    <>
+      <Head>
+        <title>Markdown Annotator — Treq</title>
+        <meta name="robots" content="noindex" />
+        <style>{`
+          body { margin: 0 !important; padding: 0 !important; overflow: hidden; }
+          #__docusaurus { height: 100vh; overflow: hidden; }
+        `}</style>
+      </Head>
+      <BrowserOnly fallback={<div style={{ padding: '2rem', textAlign: 'center' }}>Loading…</div>}>
+        {() => <EmbedInner />}
+      </BrowserOnly>
+    </>
+  );
+}
diff --git a/web/src/pages/tools/markdown-annotator.module.css b/web/src/pages/tools/markdown-annotator.module.css
index 74dd4abc..c2202bf9 100644
--- a/web/src/pages/tools/markdown-annotator.module.css
+++ b/web/src/pages/tools/markdown-annotator.module.css
@@ -930,6 +930,263 @@
 
 .reviewNewBtn:hover { background: var(--ifm-color-emphasis-100); }
 
+/* ── Compact title (embed mode) ───────────────────────────────────────────── */
+
+.toolTitleCompact {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+
+/* ── Embed toggle button ─────────────────────────────────────────────────────── */
+
+.embedToggleBtn {
+  background: none;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.35rem 0.8rem;
+  font-size: 0.8rem;
+  color: var(--ifm-color-emphasis-700);
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s, color 0.12s;
+  white-space: nowrap;
+  font-family: monospace;
+}
+
+.embedToggleBtn:hover { background: var(--ifm-color-emphasis-100); }
+
+.embedToggleBtnActive {
+  border-color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+  background: rgba(99, 102, 241, 0.06);
+}
+
+/* ── Embed panel ─────────────────────────────────────────────────────────────── */
+
+.embedPanel {
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 10px;
+  background: var(--ifm-background-surface-color);
+  margin-bottom: 1rem;
+  overflow: hidden;
+  animation: slideDown 0.16s ease;
+}
+
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.embedPanelHeader {
+  padding: 1rem 1.25rem 0.75rem;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.embedPanelTitleRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.35rem;
+}
+
+.embedPanelTitle {
+  font-size: 0.95rem;
+  font-weight: 700;
+}
+
+.embedPanelClose {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: var(--ifm-color-emphasis-500);
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  transition: background 0.12s;
+}
+
+.embedPanelClose:hover { background: var(--ifm-color-emphasis-100); color: var(--ifm-font-color-base); }
+
+.embedPanelDesc {
+  font-size: 0.83rem;
+  color: var(--ifm-color-emphasis-600);
+  margin: 0;
+}
+
+.embedWarning {
+  margin: 0.85rem 1.25rem;
+  padding: 0.6rem 0.85rem;
+  background: #fffbeb;
+  color: #92400e;
+  border-radius: 6px;
+  font-size: 0.83rem;
+  border: 1px solid #fcd34d;
+}
+
+[data-theme='dark'] .embedWarning {
+  background: #1c1400;
+  color: #fcd34d;
+  border-color: #78350f;
+}
+
+.embedSizeRow {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.85rem 1.25rem 0;
+  flex-wrap: wrap;
+}
+
+.embedSizeLabel {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.82rem;
+  font-weight: 500;
+  color: var(--ifm-color-emphasis-700);
+}
+
+.embedSizeInput {
+  width: 72px;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 6px;
+  padding: 0.3rem 0.5rem;
+  font-size: 0.82rem;
+  font-family: monospace;
+  text-align: right;
+  background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+  transition: border-color 0.12s;
+}
+
+.embedSizeInput:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
+
+.embedSizeSep {
+  font-size: 1rem;
+  color: var(--ifm-color-emphasis-400);
+  margin-top: 1px;
+}
+
+.embedSizeUnit {
+  font-size: 0.78rem;
+  color: var(--ifm-color-emphasis-400);
+}
+
+.embedCodeSection {
+  padding: 0.85rem 1.25rem 0;
+}
+
+.embedCodeLabel {
+  font-size: 0.78rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ifm-color-emphasis-500);
+  margin-bottom: 0.45rem;
+}
+
+.embedCodeRow {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.embedCodeInput {
+  flex: 1;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 7px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.78rem;
+  font-family: monospace;
+  background: var(--ifm-color-emphasis-50, rgba(0,0,0,0.02));
+  color: var(--ifm-font-color-base);
+  cursor: text;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-theme='dark'] .embedCodeInput {
+  background: rgba(255,255,255,0.03);
+}
+
+.embedCodeInput:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
+
+.embedCopyBtn {
+  background: var(--ifm-color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 7px;
+  padding: 0.5rem 1rem;
+  font-size: 0.82rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.12s;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.embedCopyBtn:hover { opacity: 0.85; }
+
+.embedPreviewRow {
+  padding: 0.55rem 1.25rem 0;
+}
+
+.embedPreviewLink {
+  font-size: 0.82rem;
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+.embedPreviewLink:hover { text-decoration: underline; }
+
+.embedInstructions {
+  padding: 0.75rem 1.25rem 1rem;
+  margin-top: 0.25rem;
+}
+
+.embedInstructionsTitle {
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ifm-color-emphasis-500);
+  margin-bottom: 0.5rem;
+}
+
+.embedInstructionsList {
+  margin: 0;
+  padding-left: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.embedInstructionsList li {
+  font-size: 0.83rem;
+  color: var(--ifm-color-emphasis-700);
+  line-height: 1.5;
+}
+
+.embedInstructionsList code {
+  font-family: monospace;
+  font-size: 0.82em;
+  background: var(--ifm-color-emphasis-100);
+  padding: 0.1em 0.35em;
+  border-radius: 3px;
+}
+
 /* ── Responsive ──────────────────────────────────────────────────────────────── */
 
 @media (max-width: 680px) {
@@ -939,4 +1196,7 @@
   .reviewActions { flex-direction: column; }
   .reviewOpenClaude,
   .reviewOpenChatgpt { justify-content: center; }
+  .embedSizeRow { gap: 0.5rem; }
+  .embedCodeRow { flex-direction: column; }
+  .embedCopyBtn { align-self: flex-start; }
 }
diff --git a/web/src/pages/tools/markdown-annotator.tsx b/web/src/pages/tools/markdown-annotator.tsx
index fcac0f4d..7c1f7a49 100644
--- a/web/src/pages/tools/markdown-annotator.tsx
+++ b/web/src/pages/tools/markdown-annotator.tsx
@@ -1,874 +1,20 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import React, { lazy, Suspense } from 'react';
 import Layout from '@theme/Layout';
 import Head from '@docusaurus/Head';
 import BrowserOnly from '@docusaurus/BrowserOnly';
-import styles from './markdown-annotator.module.css';
 
-// ── Types ─────────────────────────────────────────────────────────────────────
+const AnnotatorTool = lazy(() =>
+  import('./_MarkdownAnnotatorContent').then((m) => ({ default: m.AnnotatorTool }))
+);
 
-interface Annotation {
-  id: string;
-  lineStart: number;
-  lineEnd: number;
-  selectedText: string;
-  comment: string;
-  view: 'code' | 'preview';
-}
-
-type ViewMode = 'code' | 'preview';
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-function uid() {
-  return Math.random().toString(36).slice(2, 10);
-}
-
-function parseGithubUrl(url: string): { rawUrl: string; displayUrl: string } | null {
-  try {
-    const u = new URL(url);
-    if (u.hostname !== 'github.com') return null;
-    // /owner/repo/blob/branch/path/to/file
-    const parts = u.pathname.split('/').filter(Boolean);
-    if (parts.length < 5 || parts[2] !== 'blob') return null;
-    const [owner, repo, , ...rest] = parts;
-    const branch = rest[0];
-    const filePath = rest.slice(1).join('/');
-    const rawUrl = `https://raw.githubusercontent.com/${owner}/${repo}/${branch}/${filePath}`;
-    return { rawUrl, displayUrl: url };
-  } catch {
-    return null;
-  }
-}
-
-function detectLanguage(filename: string): string {
-  const ext = filename.split('.').pop()?.toLowerCase() ?? '';
-  const map: Record<string, string> = {
-    ts: 'typescript', tsx: 'typescript', js: 'javascript', jsx: 'javascript',
-    py: 'python', rb: 'ruby', go: 'go', rs: 'rust', java: 'java',
-    c: 'c', cpp: 'cpp', h: 'cpp', cs: 'csharp', php: 'php',
-    sh: 'bash', bash: 'bash', zsh: 'bash', yaml: 'yaml', yml: 'yaml',
-    json: 'json', toml: 'toml', md: 'markdown', mdx: 'markdown',
-    html: 'html', css: 'css', scss: 'scss', sql: 'sql', xml: 'xml',
-  };
-  return map[ext] ?? 'text';
-}
-
-function isMarkdown(filename: string): boolean {
-  const ext = filename.split('.').pop()?.toLowerCase() ?? '';
-  return ext === 'md' || ext === 'mdx';
-}
-
-// ── Minimal Markdown renderer ─────────────────────────────────────────────────
-
-function renderMarkdown(md: string): string {
-  let html = md
-    // Escape HTML first
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
-
-  // Fenced code blocks
-  html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
-    return `<pre><code class="language-${lang || 'text'}">${code.trimEnd()}</code></pre>\n`;
-  });
-
-  // Inline code
-  html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
-
-  // Split into lines for block-level processing
-  const lines = html.split('\n');
-  const output: string[] = [];
-  let i = 0;
-  let inList: 'ul' | 'ol' | null = null;
-  let inBlockquote = false;
-  let inPre = false;
-
-  while (i < lines.length) {
-    const line = lines[i];
-
-    // Track pre blocks
-    if (line.startsWith('<pre>')) { inPre = true; output.push(line); i++; continue; }
-    if (line.includes('</pre>')) { inPre = false; output.push(line); i++; continue; }
-    if (inPre) { output.push(line); i++; continue; }
-
-    // Close open list/blockquote if needed
-    const isUl = /^[-*+] /.test(line);
-    const isOl = /^\d+\. /.test(line);
-    const isBq = line.startsWith('&gt;');
-
-    if (!isUl && !isOl && inList) {
-      output.push(inList === 'ul' ? '</ul>' : '</ol>');
-      inList = null;
-    }
-    if (!isBq && inBlockquote) {
-      output.push('</blockquote>');
-      inBlockquote = false;
-    }
-
-    if (line === '' || line === '\n') {
-      output.push('');
-      i++;
-      continue;
-    }
-
-    // ATX headings
-    const hMatch = line.match(/^(#{1,6}) (.+)/);
-    if (hMatch) {
-      const level = hMatch[1].length;
-      output.push(`<h${level}>${inlineFormat(hMatch[2])}</h${level}>`);
-      i++; continue;
-    }
-
-    // Horizontal rule
-    if (/^[-*_]{3,}$/.test(line.trim())) {
-      output.push('<hr/>');
-      i++; continue;
-    }
-
-    // Blockquote
-    if (isBq) {
-      if (!inBlockquote) { output.push('<blockquote>'); inBlockquote = true; }
-      output.push(`<p>${inlineFormat(line.replace(/^&gt;\s?/, ''))}</p>`);
-      i++; continue;
-    }
-
-    // Unordered list
-    if (isUl) {
-      if (!inList) { output.push('<ul>'); inList = 'ul'; }
-      output.push(`<li>${inlineFormat(line.replace(/^[-*+] /, ''))}</li>`);
-      i++; continue;
-    }
-
-    // Ordered list
-    if (isOl) {
-      if (!inList) { output.push('<ol>'); inList = 'ol'; }
-      output.push(`<li>${inlineFormat(line.replace(/^\d+\. /, ''))}</li>`);
-      i++; continue;
-    }
-
-    // Paragraph
-    output.push(`<p>${inlineFormat(line)}</p>`);
-    i++;
-  }
-
-  if (inList) output.push(inList === 'ul' ? '</ul>' : '</ol>');
-  if (inBlockquote) output.push('</blockquote>');
-
-  return output.join('\n');
-}
-
-function inlineFormat(text: string): string {
-  return text
-    .replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>')
-    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-    .replace(/\*(.+?)\*/g, '<em>$1</em>')
-    .replace(/__(.+?)__/g, '<strong>$1</strong>')
-    .replace(/_(.+?)_/g, '<em>$1</em>')
-    .replace(/~~(.+?)~~/g, '<del>$1</del>')
-    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
-}
-
-// ── Review prompt builder ─────────────────────────────────────────────────────
-
-function buildReviewPrompt(opts: {
-  content: string;
-  filename: string;
-  sourceUrl: string | null;
-  annotations: Annotation[];
-  summary: string;
-}): string {
-  const { content, filename, sourceUrl, annotations, summary } = opts;
-  const lines: string[] = [];
-
-  lines.push('# File Review');
-  lines.push('');
-  lines.push(`**File:** \`${filename}\``);
-  if (sourceUrl) lines.push(`**Source:** ${sourceUrl}`);
-  lines.push('');
-
-  if (annotations.length > 0) {
-    lines.push('## Inline Annotations');
-    lines.push('');
-    for (const a of annotations) {
-      const range = a.lineStart === a.lineEnd ? `Line ${a.lineStart}` : `Lines ${a.lineStart}–${a.lineEnd}`;
-      lines.push(`### ${range}`);
-      if (a.selectedText) {
-        lines.push('');
-        lines.push('```');
-        lines.push(a.selectedText);
-        lines.push('```');
-      }
-      lines.push('');
-      lines.push(a.comment);
-      lines.push('');
-    }
-  }
-
-  if (summary.trim()) {
-    lines.push('## Summary');
-    lines.push('');
-    lines.push(summary.trim());
-    lines.push('');
-  }
-
-  lines.push('## File Contents');
-  lines.push('');
-  lines.push('```' + detectLanguage(filename));
-  lines.push(content);
-  lines.push('```');
-
-  return lines.join('\n');
-}
-
-// ── Annotation comment dialog ─────────────────────────────────────────────────
-
-interface AnnotationDialogProps {
-  lineStart: number;
-  lineEnd: number;
-  selectedText: string;
-  view: ViewMode;
-  onConfirm: (comment: string) => void;
-  onCancel: () => void;
-}
-
-function AnnotationDialog({ lineStart, lineEnd, selectedText, onConfirm, onCancel }: AnnotationDialogProps) {
-  const [comment, setComment] = useState('');
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    textareaRef.current?.focus();
-  }, []);
-
-  const range = lineStart === lineEnd ? `Line ${lineStart}` : `Lines ${lineStart}–${lineEnd}`;
-
-  return (
-    <div className={styles.dialogOverlay} onClick={onCancel}>
-      <div className={styles.dialog} onClick={(e) => e.stopPropagation()}>
-        <div className={styles.dialogHeader}>
-          <span className={styles.dialogTitle}>Add comment — {range}</span>
-          <button className={styles.dialogClose} onClick={onCancel}>✕</button>
-        </div>
-        {selectedText && (
-          <div className={styles.dialogSelection}>
-            <pre className={styles.dialogSelectionText}>{selectedText.length > 200 ? selectedText.slice(0, 200) + '…' : selectedText}</pre>
-          </div>
-        )}
-        <textarea
-          ref={textareaRef}
-          className={styles.dialogTextarea}
-          placeholder="Write your comment…"
-          value={comment}
-          onChange={(e) => setComment(e.target.value)}
-          rows={4}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-              e.preventDefault();
-              if (comment.trim()) onConfirm(comment.trim());
-            }
-            if (e.key === 'Escape') onCancel();
-          }}
-        />
-        <div className={styles.dialogActions}>
-          <button className={styles.dialogCancel} onClick={onCancel}>Cancel</button>
-          <button
-            className={styles.dialogConfirm}
-            disabled={!comment.trim()}
-            onClick={() => { if (comment.trim()) onConfirm(comment.trim()); }}
-          >
-            Add comment
-          </button>
-        </div>
-        <div className={styles.dialogHint}>⌘↵ to submit · Esc to cancel</div>
-      </div>
-    </div>
-  );
-}
-
-// ── Code view ─────────────────────────────────────────────────────────────────
-
-interface CodeViewProps {
-  lines: string[];
-  annotations: Annotation[];
-  onAnnotationAdd: (lineStart: number, lineEnd: number, selectedText: string) => void;
-  onAnnotationDelete: (id: string) => void;
-}
-
-function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDelete }: CodeViewProps) {
-  const [anchorLine, setAnchorLine] = useState<number | null>(null);
-  const [hoverLine, setHoverLine] = useState<number | null>(null);
-
-  const getSelectedRange = (current: number): [number, number] => {
-    if (anchorLine === null) return [current, current];
-    return anchorLine <= current
-      ? [anchorLine, current]
-      : [current, anchorLine];
-  };
-
-  const annotationsByLine = new Map<number, Annotation[]>();
-  for (const a of annotations) {
-    for (let l = a.lineStart; l <= a.lineEnd; l++) {
-      const arr = annotationsByLine.get(l) ?? [];
-      arr.push(a);
-      annotationsByLine.set(l, arr);
-    }
-  }
-
-  const annotationStartLines = new Set(annotations.map((a) => a.lineStart));
-
-  const handleLineClick = (lineNum: number, e: React.MouseEvent) => {
-    if (e.shiftKey && anchorLine !== null) {
-      const [start, end] = getSelectedRange(lineNum);
-      const selectedText = lines.slice(start - 1, end).join('\n');
-      onAnnotationAdd(start, end, selectedText);
-      setAnchorLine(null);
-    } else {
-      setAnchorLine(lineNum);
-    }
-  };
-
-  const handleLineDoubleClick = (lineNum: number) => {
-    onAnnotationAdd(lineNum, lineNum, lines[lineNum - 1]);
-    setAnchorLine(null);
-  };
-
-  const [low, high] = anchorLine !== null && hoverLine !== null
-    ? getSelectedRange(hoverLine)
-    : [null, null];
-
-  return (
-    <div className={styles.codeView}>
-      <div className={styles.codeHint}>
-        Click a line number to anchor · Shift+click to select range · Double-click to annotate single line
-      </div>
-      <div className={styles.codeScroll}>
-        <table className={styles.codeTable} cellSpacing={0} cellPadding={0}>
-          <tbody>
-            {lines.map((lineContent, idx) => {
-              const lineNum = idx + 1;
-              const isInRange = low !== null && high !== null && lineNum >= low && lineNum <= high;
-              const isAnchor = lineNum === anchorLine;
-              const hasAnnotation = annotationsByLine.has(lineNum);
-              const annotationsHere = annotations.filter((a) => a.lineStart === lineNum);
-
-              return (
-                <React.Fragment key={lineNum}>
-                  <tr
-                    className={`${styles.codeLine} ${isInRange || isAnchor ? styles.codeLineSelected : ''} ${hasAnnotation ? styles.codeLineAnnotated : ''}`}
-                    onMouseEnter={() => setHoverLine(lineNum)}
-                    onMouseLeave={() => setHoverLine(null)}
-                  >
-                    <td
-                      className={`${styles.lineNum} ${isAnchor ? styles.lineNumAnchor : ''}`}
-                      onClick={(e) => handleLineClick(lineNum, e)}
-                      onDoubleClick={() => handleLineDoubleClick(lineNum)}
-                      title={anchorLine === null ? 'Click to anchor, shift+click to select range' : 'Shift+click to select range'}
-                    >
-                      {hasAnnotation && <span className={styles.annotDot} title="Has annotation" />}
-                      {lineNum}
-                    </td>
-                    <td className={styles.lineContent}>
-                      <pre className={styles.lineCode}>{lineContent || ' '}</pre>
-                    </td>
-                  </tr>
-                  {annotationsHere.map((a) => (
-                    <tr key={a.id} className={styles.annotRow}>
-                      <td />
-                      <td className={styles.annotCell}>
-                        <div className={styles.annotBlock}>
-                          <div className={styles.annotMeta}>
-                            <span className={styles.annotRange}>
-                              {a.lineStart === a.lineEnd ? `Line ${a.lineStart}` : `Lines ${a.lineStart}–${a.lineEnd}`}
-                            </span>
-                            <button
-                              className={styles.annotDelete}
-                              onClick={() => onAnnotationDelete(a.id)}
-                              title="Delete annotation"
-                            >✕</button>
-                          </div>
-                          <div className={styles.annotComment}>{a.comment}</div>
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                </React.Fragment>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}
-
-// ── Preview view ──────────────────────────────────────────────────────────────
-
-interface PreviewViewProps {
-  content: string;
-  annotations: Annotation[];
-  onAnnotationAdd: (lineStart: number, lineEnd: number, selectedText: string) => void;
-  onAnnotationDelete: (id: string) => void;
-}
-
-function PreviewView({ content, annotations, onAnnotationAdd, onAnnotationDelete }: PreviewViewProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [selection, setSelection] = useState<{ text: string; lineStart: number; lineEnd: number } | null>(null);
-
-  const lines = content.split('\n');
-
-  const handleMouseUp = useCallback(() => {
-    const sel = window.getSelection();
-    if (!sel || sel.isCollapsed) { setSelection(null); return; }
-    const selectedText = sel.toString().trim();
-    if (!selectedText) { setSelection(null); return; }
-
-    // Find which lines this selection covers by searching content
-    const firstLine = content.indexOf(selectedText.split('\n')[0]);
-    if (firstLine === -1) { setSelection(null); return; }
-    const lineStart = content.slice(0, firstLine).split('\n').length;
-    const lineEnd = lineStart + selectedText.split('\n').length - 1;
-    setSelection({ text: selectedText, lineStart, lineEnd });
-  }, [content]);
-
-  const handleAddFromSelection = useCallback(() => {
-    if (!selection) return;
-    onAnnotationAdd(selection.lineStart, selection.lineEnd, selection.text);
-    setSelection(null);
-    window.getSelection()?.removeAllRanges();
-  }, [selection, onAnnotationAdd]);
-
-  const html = renderMarkdown(content);
-
-  return (
-    <div className={styles.previewView}>
-      {selection && (
-        <div className={styles.selectionBar}>
-          <span className={styles.selectionInfo}>
-            Selected: lines {selection.lineStart}–{selection.lineEnd}
-          </span>
-          <button className={styles.selectionAddBtn} onClick={handleAddFromSelection}>
-            + Add annotation
-          </button>
-          <button className={styles.selectionCancelBtn} onClick={() => { setSelection(null); window.getSelection()?.removeAllRanges(); }}>
-            ✕
-          </button>
-        </div>
-      )}
-
-      <div
-        ref={containerRef}
-        className={styles.previewContent}
-        onMouseUp={handleMouseUp}
-        dangerouslySetInnerHTML={{ __html: html }}
-      />
-
-      {annotations.length > 0 && (
-        <div className={styles.previewAnnotations}>
-          <div className={styles.previewAnnotationsTitle}>Annotations</div>
-          {annotations.map((a) => (
-            <div key={a.id} className={styles.previewAnnotBlock}>
-              <div className={styles.annotMeta}>
-                <span className={styles.annotRange}>
-                  {a.lineStart === a.lineEnd ? `Line ${a.lineStart}` : `Lines ${a.lineStart}–${a.lineEnd}`}
-                </span>
-                <button className={styles.annotDelete} onClick={() => onAnnotationDelete(a.id)} title="Delete">✕</button>
-              </div>
-              {a.selectedText && (
-                <pre className={styles.annotQuote}>{a.selectedText.length > 150 ? a.selectedText.slice(0, 150) + '…' : a.selectedText}</pre>
-              )}
-              <div className={styles.annotComment}>{a.comment}</div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── File loader ───────────────────────────────────────────────────────────────
-
-interface FileLoaderProps {
-  onLoad: (content: string, filename: string, sourceUrl: string | null) => void;
-}
-
-function FileLoader({ onLoad }: FileLoaderProps) {
-  const [urlInput, setUrlInput] = useState('');
-  const [pasteContent, setPasteContent] = useState('');
-  const [pasteFilename, setPasteFilename] = useState('');
-  const [tab, setTab] = useState<'url' | 'paste'>('url');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const fetchFromGithub = async () => {
-    setError(null);
-    const parsed = parseGithubUrl(urlInput.trim());
-    if (!parsed) {
-      setError('Invalid GitHub URL. Expected: github.com/owner/repo/blob/branch/path/to/file');
-      return;
-    }
-    setLoading(true);
-    try {
-      const res = await fetch(parsed.rawUrl);
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const text = await res.text();
-      const filename = parsed.rawUrl.split('/').pop() ?? 'file';
-      onLoad(text, filename, parsed.displayUrl);
-    } catch (e) {
-      setError(`Failed to fetch: ${e instanceof Error ? e.message : String(e)}`);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const loadPasted = () => {
-    if (!pasteContent.trim()) { setError('No content to load.'); return; }
-    const name = pasteFilename.trim() || 'untitled.md';
-    onLoad(pasteContent, name, null);
-  };
-
-  return (
-    <div className={styles.loader}>
-      <div className={styles.loaderTabs}>
-        <button
-          className={`${styles.loaderTab} ${tab === 'url' ? styles.loaderTabActive : ''}`}
-          onClick={() => setTab('url')}
-        >
-          GitHub URL
-        </button>
-        <button
-          className={`${styles.loaderTab} ${tab === 'paste' ? styles.loaderTabActive : ''}`}
-          onClick={() => setTab('paste')}
-        >
-          Paste content
-        </button>
-      </div>
-
-      {tab === 'url' && (
-        <div className={styles.loaderSection}>
-          <p className={styles.loaderDesc}>
-            Paste a GitHub file URL (github.com/owner/repo/blob/branch/path) to load and review it.
-          </p>
-          <div className={styles.loaderRow}>
-            <input
-              className={styles.loaderInput}
-              type="url"
-              placeholder="https://github.com/owner/repo/blob/main/README.md"
-              value={urlInput}
-              onChange={(e) => setUrlInput(e.target.value)}
-              onKeyDown={(e) => { if (e.key === 'Enter') fetchFromGithub(); }}
-            />
-            <button
-              className={styles.loaderBtn}
-              onClick={fetchFromGithub}
-              disabled={loading || !urlInput.trim()}
-            >
-              {loading ? 'Loading…' : 'Fetch'}
-            </button>
-          </div>
-        </div>
-      )}
-
-      {tab === 'paste' && (
-        <div className={styles.loaderSection}>
-          <div className={styles.loaderRow}>
-            <input
-              className={styles.loaderFilenameInput}
-              type="text"
-              placeholder="filename.md"
-              value={pasteFilename}
-              onChange={(e) => setPasteFilename(e.target.value)}
-            />
-          </div>
-          <textarea
-            className={styles.loaderTextarea}
-            placeholder="Paste file contents here…"
-            value={pasteContent}
-            onChange={(e) => setPasteContent(e.target.value)}
-            rows={12}
-          />
-          <button className={styles.loaderBtn} onClick={loadPasted} disabled={!pasteContent.trim()}>
-            Load file
-          </button>
-        </div>
-      )}
-
-      {error && <div className={styles.loaderError}>{error}</div>}
-    </div>
-  );
-}
-
-// ── Review panel ──────────────────────────────────────────────────────────────
-
-interface ReviewPanelProps {
-  content: string;
-  filename: string;
-  sourceUrl: string | null;
-  annotations: Annotation[];
-  onClear: () => void;
-}
-
-function ReviewPanel({ content, filename, sourceUrl, annotations, onClear }: ReviewPanelProps) {
-  const [summary, setSummary] = useState('');
-  const [copied, setCopied] = useState(false);
-
-  const prompt = buildReviewPrompt({ content, filename, sourceUrl, annotations, summary });
-
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(prompt);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  const claudeUrl = `https://claude.ai/new?q=${encodeURIComponent(prompt)}`;
-  const chatgptUrl = `https://chatgpt.com/?q=${encodeURIComponent(prompt)}`;
-
-  return (
-    <div className={styles.reviewPanel}>
-      <div className={styles.reviewPanelHeader}>
-        <span className={styles.reviewPanelTitle}>Finish Review</span>
-      </div>
-
-      <div className={styles.reviewStats}>
-        <span className={styles.reviewStat}>{annotations.length} annotation{annotations.length !== 1 ? 's' : ''}</span>
-        <span className={styles.reviewStat}>{content.split('\n').length} lines</span>
-        {sourceUrl && (
-          <a className={styles.reviewSourceLink} href={sourceUrl} target="_blank" rel="noopener noreferrer">
-            View source
-          </a>
-        )}
-      </div>
-
-      <div className={styles.reviewSummarySection}>
-        <label className={styles.reviewLabel}>Summary (optional)</label>
-        <textarea
-          className={styles.reviewSummary}
-          placeholder="Add overall review notes, context, or questions…"
-          value={summary}
-          onChange={(e) => setSummary(e.target.value)}
-          rows={4}
-        />
-      </div>
-
-      <div className={styles.reviewActions}>
-        <button className={styles.reviewCopyBtn} onClick={handleCopy}>
-          {copied ? '✓ Copied!' : 'Copy prompt'}
-        </button>
-        <a
-          className={styles.reviewOpenClaude}
-          href={claudeUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Open in Claude
-        </a>
-        <a
-          className={styles.reviewOpenChatgpt}
-          href={chatgptUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Open in ChatGPT
-        </a>
-      </div>
-
-      <div className={styles.reviewPromptPreview}>
-        <div className={styles.reviewPromptHeader}>
-          <span className={styles.reviewPromptLabel}>Prompt preview</span>
-        </div>
-        <pre className={styles.reviewPromptText}>{prompt}</pre>
-      </div>
-
-      <button className={styles.reviewNewBtn} onClick={onClear}>
-        ← Start new review
-      </button>
-    </div>
-  );
-}
-
-// ── Main tool ─────────────────────────────────────────────────────────────────
-
-function AnnotatorTool() {
-  const [content, setContent] = useState<string | null>(null);
-  const [filename, setFilename] = useState('');
-  const [sourceUrl, setSourceUrl] = useState<string | null>(null);
-  const [viewMode, setViewMode] = useState<ViewMode>('code');
-  const [annotations, setAnnotations] = useState<Annotation[]>([]);
-  const [pendingAnnotation, setPendingAnnotation] = useState<{
-    lineStart: number;
-    lineEnd: number;
-    selectedText: string;
-  } | null>(null);
-  const [showReview, setShowReview] = useState(false);
-
-  const lines = content?.split('\n') ?? [];
-  const isMd = isMarkdown(filename);
-
-  const handleLoad = useCallback((c: string, fn: string, url: string | null) => {
-    setContent(c);
-    setFilename(fn);
-    setSourceUrl(url);
-    setAnnotations([]);
-    setViewMode(isMarkdown(fn) ? 'preview' : 'code');
-    setShowReview(false);
-  }, []);
-
-  const handleAnnotationAdd = useCallback((lineStart: number, lineEnd: number, selectedText: string) => {
-    setPendingAnnotation({ lineStart, lineEnd, selectedText });
-  }, []);
-
-  const handleAnnotationConfirm = useCallback((comment: string) => {
-    if (!pendingAnnotation) return;
-    const a: Annotation = {
-      id: uid(),
-      ...pendingAnnotation,
-      comment,
-      view: viewMode,
-    };
-    setAnnotations((prev) => [...prev, a]);
-    setPendingAnnotation(null);
-  }, [pendingAnnotation, viewMode]);
-
-  const handleAnnotationDelete = useCallback((id: string) => {
-    setAnnotations((prev) => prev.filter((a) => a.id !== id));
-  }, []);
-
-  const handleClear = useCallback(() => {
-    setContent(null);
-    setFilename('');
-    setSourceUrl(null);
-    setAnnotations([]);
-    setPendingAnnotation(null);
-    setShowReview(false);
-  }, []);
-
-  if (!content) {
-    return (
-      <div className={styles.toolRoot}>
-        <div className={styles.toolHeader}>
-          <div className={styles.breadcrumb}>
-            <a href="/tools">Tools</a>
-            <span> / </span>
-            <span>Markdown Annotator</span>
-          </div>
-          <h1 className={styles.toolTitle}>Markdown Annotator</h1>
-          <p className={styles.toolSubtitle}>
-            Annotate markdown and code files like a PR review. Add inline comments, then export as a prompt for Claude or ChatGPT.
-          </p>
-        </div>
-        <FileLoader onLoad={handleLoad} />
-      </div>
-    );
-  }
-
-  if (showReview) {
-    return (
-      <div className={styles.toolRoot}>
-        <div className={styles.toolHeader}>
-          <div className={styles.breadcrumb}>
-            <a href="/tools">Tools</a>
-            <span> / </span>
-            <button className={styles.breadcrumbBtn} onClick={() => setShowReview(false)}>Markdown Annotator</button>
-            <span> / </span>
-            <span>Review</span>
-          </div>
-          <h1 className={styles.toolTitle}>Review: {filename}</h1>
-        </div>
-        <ReviewPanel
-          content={content}
-          filename={filename}
-          sourceUrl={sourceUrl}
-          annotations={annotations}
-          onClear={handleClear}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className={styles.toolRoot}>
-      <div className={styles.toolHeader}>
-        <div className={styles.breadcrumb}>
-          <a href="/tools">Tools</a>
-          <span> / </span>
-          <span>Markdown Annotator</span>
-        </div>
-        <div className={styles.toolTitleRow}>
-          <h1 className={styles.toolTitle}>{filename}</h1>
-          <div className={styles.toolHeaderActions}>
-            {isMd && (
-              <div className={styles.viewToggle}>
-                <button
-                  className={`${styles.viewToggleBtn} ${viewMode === 'code' ? styles.viewToggleBtnActive : ''}`}
-                  onClick={() => setViewMode('code')}
-                >
-                  Code
-                </button>
-                <button
-                  className={`${styles.viewToggleBtn} ${viewMode === 'preview' ? styles.viewToggleBtnActive : ''}`}
-                  onClick={() => setViewMode('preview')}
-                >
-                  Preview
-                </button>
-              </div>
-            )}
-            <button className={styles.changeFileBtn} onClick={handleClear}>
-              Change file
-            </button>
-            <button
-              className={styles.finishReviewBtn}
-              onClick={() => setShowReview(true)}
-            >
-              Finish review ({annotations.length})
-            </button>
-          </div>
-        </div>
-        {sourceUrl && (
-          <div className={styles.sourceUrlBar}>
-            <a href={sourceUrl} target="_blank" rel="noopener noreferrer" className={styles.sourceUrlLink}>
-              {sourceUrl}
-            </a>
-          </div>
-        )}
-      </div>
-
-      <div className={styles.toolBody}>
-        {viewMode === 'code' ? (
-          <CodeView
-            lines={lines}
-            annotations={annotations}
-            onAnnotationAdd={handleAnnotationAdd}
-            onAnnotationDelete={handleAnnotationDelete}
-          />
-        ) : (
-          <PreviewView
-            content={content}
-            annotations={annotations}
-            onAnnotationAdd={handleAnnotationAdd}
-            onAnnotationDelete={handleAnnotationDelete}
-          />
-        )}
-      </div>
-
-      {pendingAnnotation && (
-        <AnnotationDialog
-          lineStart={pendingAnnotation.lineStart}
-          lineEnd={pendingAnnotation.lineEnd}
-          selectedText={pendingAnnotation.selectedText}
-          view={viewMode}
-          onConfirm={handleAnnotationConfirm}
-          onCancel={() => setPendingAnnotation(null)}
-        />
-      )}
-    </div>
-  );
-}
-
-// ── Page ──────────────────────────────────────────────────────────────────────
+const loadingFallback = <div style={{ padding: '4rem', textAlign: 'center' }}>Loading…</div>;
 
 const SCHEMA = {
   '@context': 'https://schema.org',
   '@type': 'WebApplication',
   name: 'Markdown Annotator',
-  description: 'Annotate markdown and code files with inline review comments, then export as a prompt for Claude or ChatGPT.',
+  description:
+    'Annotate markdown and code files with inline review comments. Fetch from GitHub or paste content, add line-level comments, then export a review prompt for Claude or ChatGPT.',
   url: 'https://treq.dev/tools/markdown-annotator',
   applicationCategory: 'DeveloperApplication',
   operatingSystem: 'Any',
@@ -885,7 +31,13 @@ export default function MarkdownAnnotatorPage() {
       <Head>
         <script type="application/ld+json">{JSON.stringify(SCHEMA)}</script>
       </Head>
-      <BrowserOnly>{() => <AnnotatorTool />}</BrowserOnly>
+      <BrowserOnly fallback={loadingFallback}>
+        {() => (
+          <Suspense fallback={loadingFallback}>
+            <AnnotatorTool />
+          </Suspense>
+        )}
+      </BrowserOnly>
     </Layout>
   );
 }

From d15d3dcfdafde8ff6ad02573286a74ed90cf2952 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 17 Jul 2026 02:37:22 +0000
Subject: [PATCH 3/9] UX overhaul: inline comments, no-tab loader, preview line
 numbers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace modal annotation dialog with GitHub PR-style inline comment cards
  that appear as rows between lines (no overlay, no blocking UI)
- Add "+" button left of the line number gutter; clicking opens an inline
  form directly below the target line
- Line number click anchors a range selection; clicking "+" on another line
  creates a multi-line annotation spanning the range
- Remove tab UI from file loader: URL input sits above a divider, paste
  textarea sits below — no tabs, no filename field for pasted content
- Omit filename/source metadata from the exported prompt when content was
  pasted (no sourceUrl), keeping the prompt clean
- Add line numbers to markdown preview: block-based renderer (renderMarkdownBlocks)
  returns each element with its source line range; line numbers rendered in a
  fixed-width gutter next to each block
- Apply markdown element styles to new previewBlockContent class so headings,
  code blocks, lists, blockquotes, and links render correctly
---
 .../pages/tools/_MarkdownAnnotatorContent.tsx | 751 +++++++++++-------
 .../pages/tools/markdown-annotator.module.css | 420 ++++++++++
 2 files changed, 873 insertions(+), 298 deletions(-)

diff --git a/web/src/pages/tools/_MarkdownAnnotatorContent.tsx b/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
index 46bf9a14..3b413f49 100644
--- a/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
+++ b/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import styles from './markdown-annotator.module.css';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
@@ -14,6 +14,12 @@ export interface Annotation {
 
 export type ViewMode = 'code' | 'preview';
 
+interface MdBlock {
+  lineStart: number;
+  lineEnd: number;
+  html: string;
+}
+
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
 export function uid() {
@@ -54,7 +60,6 @@ export function isMarkdown(filename: string): boolean {
   return ext === 'md' || ext === 'mdx';
 }
 
-// URL-safe UTF-8 base64 encoding
 export function encodeContentForUrl(content: string): string {
   const bytes = new TextEncoder().encode(content);
   let binary = '';
@@ -71,81 +76,134 @@ export function decodeContentFromUrl(encoded: string): string {
   return new TextDecoder().decode(bytes);
 }
 
-// ── Markdown renderer ─────────────────────────────────────────────────────────
+// ── Markdown block renderer ───────────────────────────────────────────────────
 
-export function renderMarkdown(md: string): string {
-  let html = md
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
+function esc(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
 
-  html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
-    return `<pre><code class="language-${lang || 'text'}">${code.trimEnd()}</code></pre>\n`;
-  });
-  html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+function inlineFmt(text: string): string {
+  return text
+    .replace(/`([^`]+)`/g, '<code>$1</code>')
+    .replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/__(.+?)__/g, '<strong>$1</strong>')
+    .replace(/_(.+?)_/g, '<em>$1</em>')
+    .replace(/~~(.+?)~~/g, '<del>$1</del>')
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+}
 
-  const lines = html.split('\n');
-  const output: string[] = [];
+// Returns an array of blocks each with a source line range and rendered HTML.
+function renderMarkdownBlocks(md: string): MdBlock[] {
+  const blocks: MdBlock[] = [];
+  const rawLines = md.split('\n');
   let i = 0;
-  let inList: 'ul' | 'ol' | null = null;
-  let inBlockquote = false;
-  let inPre = false;
 
-  while (i < lines.length) {
-    const line = lines[i];
-    if (line.startsWith('<pre>')) { inPre = true; output.push(line); i++; continue; }
-    if (line.includes('</pre>')) { inPre = false; output.push(line); i++; continue; }
-    if (inPre) { output.push(line); i++; continue; }
+  while (i < rawLines.length) {
+    const raw = rawLines[i];
+    const lineNum = i + 1;
+
+    // Skip blank lines — they don't produce a block
+    if (!raw.trim()) { i++; continue; }
+
+    // Fenced code block
+    if (raw.trimStart().startsWith('```')) {
+      const start = i;
+      const lang = raw.replace(/^\s*```/, '').trim();
+      i++;
+      const codeLines: string[] = [];
+      while (i < rawLines.length && !rawLines[i].trimStart().startsWith('```')) {
+        codeLines.push(esc(rawLines[i]));
+        i++;
+      }
+      i++; // closing ```
+      blocks.push({
+        lineStart: start + 1,
+        lineEnd: i,
+        html: `<pre><code class="language-${lang || 'text'}">${codeLines.join('\n')}</code></pre>`,
+      });
+      continue;
+    }
 
-    const isUl = /^[-*+] /.test(line);
-    const isOl = /^\d+\. /.test(line);
-    const isBq = line.startsWith('&gt;');
+    // ATX heading
+    const hMatch = raw.match(/^(#{1,6})\s+(.*)/);
+    if (hMatch) {
+      const level = hMatch[1].length;
+      blocks.push({ lineStart: lineNum, lineEnd: lineNum, html: `<h${level}>${inlineFmt(esc(hMatch[2]))}</h${level}>` });
+      i++;
+      continue;
+    }
 
-    if (!isUl && !isOl && inList) { output.push(inList === 'ul' ? '</ul>' : '</ol>'); inList = null; }
-    if (!isBq && inBlockquote) { output.push('</blockquote>'); inBlockquote = false; }
+    // Horizontal rule
+    if (/^[-*_]{3,}\s*$/.test(raw)) {
+      blocks.push({ lineStart: lineNum, lineEnd: lineNum, html: '<hr/>' });
+      i++;
+      continue;
+    }
 
-    if (line === '' || line === '\n') { output.push(''); i++; continue; }
+    // Blockquote — collect consecutive > lines
+    if (raw.startsWith('>')) {
+      const start = i;
+      const innerLines: string[] = [];
+      while (i < rawLines.length && rawLines[i].startsWith('>')) {
+        innerLines.push(inlineFmt(esc(rawLines[i].replace(/^>\s?/, ''))));
+        i++;
+      }
+      blocks.push({
+        lineStart: start + 1,
+        lineEnd: i,
+        html: `<blockquote>${innerLines.map((l) => `<p>${l}</p>`).join('')}</blockquote>`,
+      });
+      continue;
+    }
 
-    const hMatch = line.match(/^(#{1,6}) (.+)/);
-    if (hMatch) {
-      const level = hMatch[1].length;
-      output.push(`<h${level}>${inlineFmt(hMatch[2])}</h${level}>`);
-      i++; continue;
+    // Unordered list — collect consecutive list items (simple flat list)
+    if (/^[-*+]\s/.test(raw)) {
+      const start = i;
+      const items: string[] = [];
+      while (i < rawLines.length && /^[-*+]\s/.test(rawLines[i])) {
+        items.push(`<li>${inlineFmt(esc(rawLines[i].replace(/^[-*+]\s/, '')))}</li>`);
+        i++;
+      }
+      blocks.push({ lineStart: start + 1, lineEnd: i, html: `<ul>${items.join('')}</ul>` });
+      continue;
     }
-    if (/^[-*_]{3,}$/.test(line.trim())) { output.push('<hr/>'); i++; continue; }
-    if (isBq) {
-      if (!inBlockquote) { output.push('<blockquote>'); inBlockquote = true; }
-      output.push(`<p>${inlineFmt(line.replace(/^&gt;\s?/, ''))}</p>`);
-      i++; continue;
+
+    // Ordered list
+    if (/^\d+\.\s/.test(raw)) {
+      const start = i;
+      const items: string[] = [];
+      while (i < rawLines.length && /^\d+\.\s/.test(rawLines[i])) {
+        items.push(`<li>${inlineFmt(esc(rawLines[i].replace(/^\d+\.\s/, '')))}</li>`);
+        i++;
+      }
+      blocks.push({ lineStart: start + 1, lineEnd: i, html: `<ol>${items.join('')}</ol>` });
+      continue;
     }
-    if (isUl) {
-      if (!inList) { output.push('<ul>'); inList = 'ul'; }
-      output.push(`<li>${inlineFmt(line.replace(/^[-*+] /, ''))}</li>`);
-      i++; continue;
+
+    // Paragraph — collect consecutive non-special, non-blank lines
+    const start = i;
+    const paraLines: string[] = [];
+    while (
+      i < rawLines.length &&
+      rawLines[i].trim() !== '' &&
+      !/^#{1,6}\s/.test(rawLines[i]) &&
+      !rawLines[i].trimStart().startsWith('```') &&
+      !/^[-*_]{3,}\s*$/.test(rawLines[i]) &&
+      !rawLines[i].startsWith('>') &&
+      !/^[-*+]\s/.test(rawLines[i]) &&
+      !/^\d+\.\s/.test(rawLines[i])
+    ) {
+      paraLines.push(inlineFmt(esc(rawLines[i])));
+      i++;
     }
-    if (isOl) {
-      if (!inList) { output.push('<ol>'); inList = 'ol'; }
-      output.push(`<li>${inlineFmt(line.replace(/^\d+\. /, ''))}</li>`);
-      i++; continue;
+    if (paraLines.length > 0) {
+      blocks.push({ lineStart: start + 1, lineEnd: i, html: `<p>${paraLines.join('<br/>')}</p>` });
     }
-    output.push(`<p>${inlineFmt(line)}</p>`);
-    i++;
   }
 
-  if (inList) output.push(inList === 'ul' ? '</ul>' : '</ol>');
-  if (inBlockquote) output.push('</blockquote>');
-  return output.join('\n');
-}
-
-function inlineFmt(text: string): string {
-  return text
-    .replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>')
-    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-    .replace(/\*(.+?)\*/g, '<em>$1</em>')
-    .replace(/__(.+?)__/g, '<strong>$1</strong>')
-    .replace(/_(.+?)_/g, '<em>$1</em>')
-    .replace(/~~(.+?)~~/g, '<del>$1</del>')
-    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+  return blocks;
 }
 
 // ── Review prompt ─────────────────────────────────────────────────────────────
@@ -158,179 +216,246 @@ export function buildReviewPrompt(opts: {
   summary: string;
 }): string {
   const { content, filename, sourceUrl, annotations, summary } = opts;
-  const lines: string[] = [];
+  const out: string[] = [];
 
-  lines.push('# File Review');
-  lines.push('');
-  lines.push(`**File:** \`${filename}\``);
-  if (sourceUrl) lines.push(`**Source:** ${sourceUrl}`);
-  lines.push('');
+  out.push('# File Review');
+  out.push('');
+
+  if (sourceUrl) {
+    out.push(`**File:** \`${filename}\``);
+    out.push(`**Source:** ${sourceUrl}`);
+    out.push('');
+  }
 
   if (annotations.length > 0) {
-    lines.push('## Inline Annotations');
-    lines.push('');
+    out.push('## Inline Annotations');
+    out.push('');
     for (const a of annotations) {
       const range = a.lineStart === a.lineEnd ? `Line ${a.lineStart}` : `Lines ${a.lineStart}–${a.lineEnd}`;
-      lines.push(`### ${range}`);
-      if (a.selectedText) { lines.push(''); lines.push('```'); lines.push(a.selectedText); lines.push('```'); }
-      lines.push(''); lines.push(a.comment); lines.push('');
+      out.push(`### ${range}`);
+      if (a.selectedText) { out.push(''); out.push('```'); out.push(a.selectedText); out.push('```'); }
+      out.push(''); out.push(a.comment); out.push('');
     }
   }
 
-  if (summary.trim()) { lines.push('## Summary'); lines.push(''); lines.push(summary.trim()); lines.push(''); }
+  if (summary.trim()) { out.push('## Summary'); out.push(''); out.push(summary.trim()); out.push(''); }
 
-  lines.push('## File Contents');
-  lines.push(''); lines.push('```' + detectLanguage(filename)); lines.push(content); lines.push('```');
+  out.push('## File Contents');
+  out.push('');
+  out.push('```' + (sourceUrl ? detectLanguage(filename) : 'text'));
+  out.push(content);
+  out.push('```');
 
-  return lines.join('\n');
+  return out.join('\n');
 }
 
-// ── Annotation dialog ─────────────────────────────────────────────────────────
+// ── Inline comment form ───────────────────────────────────────────────────────
 
-interface AnnotationDialogProps {
+interface InlineFormProps {
   lineStart: number;
   lineEnd: number;
-  selectedText: string;
-  view: ViewMode;
-  onConfirm: (comment: string) => void;
+  comment: string;
+  onChange: (v: string) => void;
+  onSubmit: () => void;
   onCancel: () => void;
 }
 
-export function AnnotationDialog({ lineStart, lineEnd, selectedText, onConfirm, onCancel }: AnnotationDialogProps) {
-  const [comment, setComment] = useState('');
+function InlineForm({ lineStart, lineEnd, comment, onChange, onSubmit, onCancel }: InlineFormProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
-
   useEffect(() => { textareaRef.current?.focus(); }, []);
 
   const range = lineStart === lineEnd ? `Line ${lineStart}` : `Lines ${lineStart}–${lineEnd}`;
 
   return (
-    <div className={styles.dialogOverlay} onClick={onCancel}>
-      <div className={styles.dialog} onClick={(e) => e.stopPropagation()}>
-        <div className={styles.dialogHeader}>
-          <span className={styles.dialogTitle}>Add comment — {range}</span>
-          <button className={styles.dialogClose} onClick={onCancel}>✕</button>
-        </div>
-        {selectedText && (
-          <div className={styles.dialogSelection}>
-            <pre className={styles.dialogSelectionText}>
-              {selectedText.length > 200 ? selectedText.slice(0, 200) + '…' : selectedText}
-            </pre>
-          </div>
-        )}
-        <textarea
-          ref={textareaRef}
-          className={styles.dialogTextarea}
-          placeholder="Write your comment…"
-          value={comment}
-          onChange={(e) => setComment(e.target.value)}
-          rows={4}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); if (comment.trim()) onConfirm(comment.trim()); }
-            if (e.key === 'Escape') onCancel();
-          }}
-        />
-        <div className={styles.dialogActions}>
-          <button className={styles.dialogCancel} onClick={onCancel}>Cancel</button>
-          <button
-            className={styles.dialogConfirm}
-            disabled={!comment.trim()}
-            onClick={() => { if (comment.trim()) onConfirm(comment.trim()); }}
-          >
-            Add comment
-          </button>
-        </div>
-        <div className={styles.dialogHint}>⌘↵ to submit · Esc to cancel</div>
+    <div className={styles.inlineForm}>
+      <div className={styles.inlineFormRange}>{range}</div>
+      <textarea
+        ref={textareaRef}
+        className={styles.inlineFormTextarea}
+        placeholder="Leave a comment… (⌘↵ to submit)"
+        value={comment}
+        onChange={(e) => onChange(e.target.value)}
+        rows={3}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); if (comment.trim()) onSubmit(); }
+          if (e.key === 'Escape') onCancel();
+        }}
+      />
+      <div className={styles.inlineFormActions}>
+        <button className={styles.inlineFormCancel} onClick={onCancel}>Cancel</button>
+        <button className={styles.inlineFormSubmit} disabled={!comment.trim()} onClick={onSubmit}>
+          Add comment
+        </button>
       </div>
     </div>
   );
 }
 
+// ── Annotation card ───────────────────────────────────────────────────────────
+
+interface AnnotCardProps {
+  annotation: Annotation;
+  onDelete: (id: string) => void;
+}
+
+function AnnotCard({ annotation: a, onDelete }: AnnotCardProps) {
+  const range = a.lineStart === a.lineEnd ? `Line ${a.lineStart}` : `Lines ${a.lineStart}–${a.lineEnd}`;
+  return (
+    <div className={styles.annotCard}>
+      <div className={styles.annotCardHeader}>
+        <span className={styles.annotCardRange}>{range}</span>
+        <button className={styles.annotCardDelete} onClick={() => onDelete(a.id)} title="Delete comment">✕</button>
+      </div>
+      {a.selectedText && (
+        <pre className={styles.annotCardQuote}>
+          {a.selectedText.length > 160 ? a.selectedText.slice(0, 160) + '…' : a.selectedText}
+        </pre>
+      )}
+      <div className={styles.annotCardComment}>{a.comment}</div>
+    </div>
+  );
+}
+
 // ── Code view ─────────────────────────────────────────────────────────────────
 
 interface CodeViewProps {
   lines: string[];
   annotations: Annotation[];
-  onAnnotationAdd: (lineStart: number, lineEnd: number, selectedText: string) => void;
+  onAnnotationAdd: (lineStart: number, lineEnd: number, selectedText: string, comment: string) => void;
   onAnnotationDelete: (id: string) => void;
 }
 
 export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDelete }: CodeViewProps) {
   const [anchorLine, setAnchorLine] = useState<number | null>(null);
   const [hoverLine, setHoverLine] = useState<number | null>(null);
+  const [inlineForm, setInlineForm] = useState<{ lineStart: number; lineEnd: number } | null>(null);
+  const [inlineComment, setInlineComment] = useState('');
 
-  const getSelectedRange = (current: number): [number, number] =>
-    anchorLine === null ? [current, current] : anchorLine <= current ? [anchorLine, current] : [current, anchorLine];
-
-  const annotationsByLine = new Map<number, Annotation[]>();
-  for (const a of annotations) {
-    for (let l = a.lineStart; l <= a.lineEnd; l++) {
-      const arr = annotationsByLine.get(l) ?? [];
-      arr.push(a);
-      annotationsByLine.set(l, arr);
-    }
-  }
+  const getRange = (a: number, b: number): [number, number] =>
+    a <= b ? [a, b] : [b, a];
 
-  const handleLineClick = (lineNum: number, e: React.MouseEvent) => {
-    if (e.shiftKey && anchorLine !== null) {
-      const [start, end] = getSelectedRange(lineNum);
-      onAnnotationAdd(start, end, lines.slice(start - 1, end).join('\n'));
-      setAnchorLine(null);
+  const handleAddClick = (lineNum: number) => {
+    if (anchorLine !== null && anchorLine !== lineNum) {
+      const [start, end] = getRange(anchorLine, lineNum);
+      setInlineForm({ lineStart: start, lineEnd: end });
     } else {
-      setAnchorLine(lineNum);
+      setInlineForm({ lineStart: lineNum, lineEnd: lineNum });
     }
+    setAnchorLine(null);
+    setInlineComment('');
+  };
+
+  const handleLineNumClick = (lineNum: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (inlineForm) return;
+    setAnchorLine((prev) => (prev === lineNum ? null : lineNum));
   };
 
-  const [low, high] = anchorLine !== null && hoverLine !== null ? getSelectedRange(hoverLine) : [null, null];
+  const handleInlineSubmit = () => {
+    if (!inlineForm || !inlineComment.trim()) return;
+    const selectedText = lines.slice(inlineForm.lineStart - 1, inlineForm.lineEnd).join('\n');
+    onAnnotationAdd(inlineForm.lineStart, inlineForm.lineEnd, selectedText, inlineComment.trim());
+    setInlineForm(null);
+    setInlineComment('');
+  };
+
+  const handleInlineCancel = () => {
+    setInlineForm(null);
+    setInlineComment('');
+  };
+
+  const [rangeStart, rangeEnd] =
+    anchorLine !== null && hoverLine !== null ? getRange(anchorLine, hoverLine) : [null, null];
+
+  // Build a map: lineNum → annotations starting here
+  const annotsByLine = new Map<number, Annotation[]>();
+  for (const a of annotations) {
+    const arr = annotsByLine.get(a.lineStart) ?? [];
+    arr.push(a);
+    annotsByLine.set(a.lineStart, arr);
+  }
+
+  // Lines that are annotated (for gutter dot)
+  const annotatedLines = new Set(annotations.flatMap((a) => {
+    const out: number[] = [];
+    for (let l = a.lineStart; l <= a.lineEnd; l++) out.push(l);
+    return out;
+  }));
 
   return (
     <div className={styles.codeView}>
-      <div className={styles.codeHint}>
-        Click a line number to anchor · Shift+click to select range · Double-click to annotate single line
-      </div>
       <div className={styles.codeScroll}>
         <table className={styles.codeTable} cellSpacing={0} cellPadding={0}>
           <tbody>
             {lines.map((lineContent, idx) => {
               const lineNum = idx + 1;
-              const isInRange = low !== null && high !== null && lineNum >= low && lineNum <= high;
+              const isInRange = rangeStart !== null && rangeEnd !== null && lineNum >= rangeStart && lineNum <= rangeEnd;
               const isAnchor = lineNum === anchorLine;
-              const hasAnnotation = annotationsByLine.has(lineNum);
-              const annotationsHere = annotations.filter((a) => a.lineStart === lineNum);
+              const isAnnotated = annotatedLines.has(lineNum);
+              const annotsHere = annotsByLine.get(lineNum) ?? [];
+              const isFormEnd = inlineForm?.lineEnd === lineNum;
+              const isFormRange = inlineForm !== null && lineNum >= inlineForm.lineStart && lineNum <= inlineForm.lineEnd;
 
               return (
                 <React.Fragment key={lineNum}>
                   <tr
-                    className={`${styles.codeLine} ${isInRange || isAnchor ? styles.codeLineSelected : ''} ${hasAnnotation ? styles.codeLineAnnotated : ''}`}
+                    className={`${styles.codeLine} ${isInRange || isAnchor ? styles.codeLineSelected : ''} ${isAnnotated ? styles.codeLineAnnotated : ''} ${isFormRange ? styles.codeLineFormRange : ''}`}
                     onMouseEnter={() => setHoverLine(lineNum)}
                     onMouseLeave={() => setHoverLine(null)}
                   >
+                    {/* Add-comment button — left of gutter */}
+                    <td className={styles.addCell}>
+                      <button
+                        className={`${styles.addBtn} ${isAnchor ? styles.addBtnAnchor : ''}`}
+                        onClick={() => handleAddClick(lineNum)}
+                        title={anchorLine !== null && anchorLine !== lineNum ? `Comment on lines ${Math.min(anchorLine, lineNum)}–${Math.max(anchorLine, lineNum)}` : 'Add comment'}
+                        tabIndex={-1}
+                      >
+                        +
+                      </button>
+                    </td>
+
+                    {/* Line number */}
                     <td
                       className={`${styles.lineNum} ${isAnchor ? styles.lineNumAnchor : ''}`}
-                      onClick={(e) => handleLineClick(lineNum, e)}
-                      onDoubleClick={() => { onAnnotationAdd(lineNum, lineNum, lines[lineNum - 1]); setAnchorLine(null); }}
-                      title={anchorLine === null ? 'Click to anchor, shift+click to select range' : 'Shift+click to select range'}
+                      onClick={(e) => handleLineNumClick(lineNum, e)}
+                      title="Click to start a range selection, click another line number to extend"
                     >
-                      {hasAnnotation && <span className={styles.annotDot} title="Has annotation" />}
+                      {isAnnotated && <span className={styles.annotDot} />}
                       {lineNum}
                     </td>
+
+                    {/* Code content */}
                     <td className={styles.lineContent}>
                       <pre className={styles.lineCode}>{lineContent || ' '}</pre>
                     </td>
                   </tr>
-                  {annotationsHere.map((a) => (
-                    <tr key={a.id} className={styles.annotRow}>
+
+                  {/* Inline comment form — appears after the last line of the range */}
+                  {isFormEnd && (
+                    <tr className={styles.inlineFormRow}>
+                      <td />
                       <td />
-                      <td className={styles.annotCell}>
-                        <div className={styles.annotBlock}>
-                          <div className={styles.annotMeta}>
-                            <span className={styles.annotRange}>
-                              {a.lineStart === a.lineEnd ? `Line ${a.lineStart}` : `Lines ${a.lineStart}–${a.lineEnd}`}
-                            </span>
-                            <button className={styles.annotDelete} onClick={() => onAnnotationDelete(a.id)} title="Delete">✕</button>
-                          </div>
-                          <div className={styles.annotComment}>{a.comment}</div>
-                        </div>
+                      <td className={styles.inlineFormCell}>
+                        <InlineForm
+                          lineStart={inlineForm.lineStart}
+                          lineEnd={inlineForm.lineEnd}
+                          comment={inlineComment}
+                          onChange={setInlineComment}
+                          onSubmit={handleInlineSubmit}
+                          onCancel={handleInlineCancel}
+                        />
+                      </td>
+                    </tr>
+                  )}
+
+                  {/* Existing annotation cards */}
+                  {annotsHere.map((a) => (
+                    <tr key={a.id} className={styles.annotCardRow}>
+                      <td />
+                      <td />
+                      <td className={styles.annotCardCell}>
+                        <AnnotCard annotation={a} onDelete={onAnnotationDelete} />
                       </td>
                     </tr>
                   ))}
@@ -340,6 +465,11 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
           </tbody>
         </table>
       </div>
+      {anchorLine !== null && (
+        <div className={styles.codeRangeHint}>
+          Line {anchorLine} anchored — click another "+" to comment on a range, or click the same line number to deselect
+        </div>
+      )}
     </div>
   );
 }
@@ -349,66 +479,100 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
 interface PreviewViewProps {
   content: string;
   annotations: Annotation[];
-  onAnnotationAdd: (lineStart: number, lineEnd: number, selectedText: string) => void;
+  onAnnotationAdd: (lineStart: number, lineEnd: number, selectedText: string, comment: string) => void;
   onAnnotationDelete: (id: string) => void;
 }
 
 export function PreviewView({ content, annotations, onAnnotationAdd, onAnnotationDelete }: PreviewViewProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [selection, setSelection] = useState<{ text: string; lineStart: number; lineEnd: number } | null>(null);
-
-  const handleMouseUp = useCallback(() => {
-    const sel = window.getSelection();
-    if (!sel || sel.isCollapsed) { setSelection(null); return; }
-    const selectedText = sel.toString().trim();
-    if (!selectedText) { setSelection(null); return; }
-    const firstLine = content.indexOf(selectedText.split('\n')[0]);
-    if (firstLine === -1) { setSelection(null); return; }
-    const lineStart = content.slice(0, firstLine).split('\n').length;
-    const lineEnd = lineStart + selectedText.split('\n').length - 1;
-    setSelection({ text: selectedText, lineStart, lineEnd });
-  }, [content]);
-
-  const handleAddFromSelection = useCallback(() => {
-    if (!selection) return;
-    onAnnotationAdd(selection.lineStart, selection.lineEnd, selection.text);
-    setSelection(null);
-    window.getSelection()?.removeAllRanges();
-  }, [selection, onAnnotationAdd]);
-
-  const html = renderMarkdown(content);
+  const blocks = useMemo(() => renderMarkdownBlocks(content), [content]);
+  const rawLines = content.split('\n');
+
+  const [inlineForm, setInlineForm] = useState<{ blockIdx: number; lineStart: number; lineEnd: number } | null>(null);
+  const [inlineComment, setInlineComment] = useState('');
+
+  const handleAddClick = (block: MdBlock, blockIdx: number) => {
+    setInlineForm({ blockIdx, lineStart: block.lineStart, lineEnd: block.lineEnd });
+    setInlineComment('');
+  };
+
+  const handleInlineSubmit = () => {
+    if (!inlineForm || !inlineComment.trim()) return;
+    const selectedText = rawLines.slice(inlineForm.lineStart - 1, inlineForm.lineEnd).join('\n');
+    onAnnotationAdd(inlineForm.lineStart, inlineForm.lineEnd, selectedText, inlineComment.trim());
+    setInlineForm(null);
+    setInlineComment('');
+  };
+
+  // Map lineStart → annotations
+  const annotsByLine = new Map<number, Annotation[]>();
+  for (const a of annotations) {
+    const arr = annotsByLine.get(a.lineStart) ?? [];
+    arr.push(a);
+    annotsByLine.set(a.lineStart, arr);
+  }
 
   return (
     <div className={styles.previewView}>
-      {selection && (
-        <div className={styles.selectionBar}>
-          <span className={styles.selectionInfo}>Selected: lines {selection.lineStart}–{selection.lineEnd}</span>
-          <button className={styles.selectionAddBtn} onClick={handleAddFromSelection}>+ Add annotation</button>
-          <button className={styles.selectionCancelBtn} onClick={() => { setSelection(null); window.getSelection()?.removeAllRanges(); }}>✕</button>
-        </div>
-      )}
-      <div ref={containerRef} className={styles.previewContent} onMouseUp={handleMouseUp} dangerouslySetInnerHTML={{ __html: html }} />
-      {annotations.length > 0 && (
-        <div className={styles.previewAnnotations}>
-          <div className={styles.previewAnnotationsTitle}>Annotations</div>
-          {annotations.map((a) => (
-            <div key={a.id} className={styles.previewAnnotBlock}>
-              <div className={styles.annotMeta}>
-                <span className={styles.annotRange}>
-                  {a.lineStart === a.lineEnd ? `Line ${a.lineStart}` : `Lines ${a.lineStart}–${a.lineEnd}`}
-                </span>
-                <button className={styles.annotDelete} onClick={() => onAnnotationDelete(a.id)} title="Delete">✕</button>
+      {blocks.map((block, blockIdx) => {
+        const annotsHere = annotsByLine.get(block.lineStart) ?? [];
+        const isFormHere = inlineForm?.blockIdx === blockIdx;
+
+        return (
+          <React.Fragment key={blockIdx}>
+            {/* Block row with line number + rendered content */}
+            <div className={`${styles.previewBlockRow} ${isFormHere ? styles.previewBlockRowActive : ''}`}>
+              {/* Add button */}
+              <button
+                className={styles.previewAddBtn}
+                onClick={() => handleAddClick(block, blockIdx)}
+                title="Add annotation"
+                tabIndex={-1}
+              >
+                +
+              </button>
+              {/* Line number */}
+              <div className={styles.previewLineNum}>
+                {block.lineStart}
+                {block.lineEnd > block.lineStart && (
+                  <span className={styles.previewLineNumEnd}>–{block.lineEnd}</span>
+                )}
               </div>
-              {a.selectedText && (
-                <pre className={styles.annotQuote}>
-                  {a.selectedText.length > 150 ? a.selectedText.slice(0, 150) + '…' : a.selectedText}
-                </pre>
-              )}
-              <div className={styles.annotComment}>{a.comment}</div>
+              {/* Rendered content */}
+              <div
+                className={styles.previewBlockContent}
+                dangerouslySetInnerHTML={{ __html: block.html }}
+              />
             </div>
-          ))}
-        </div>
-      )}
+
+            {/* Inline form */}
+            {isFormHere && (
+              <div className={styles.previewInlineFormRow}>
+                <div className={styles.previewInlineFormSpacer} />
+                <div className={styles.previewInlineFormContent}>
+                  <InlineForm
+                    lineStart={inlineForm.lineStart}
+                    lineEnd={inlineForm.lineEnd}
+                    comment={inlineComment}
+                    onChange={setInlineComment}
+                    onSubmit={handleInlineSubmit}
+                    onCancel={() => { setInlineForm(null); setInlineComment(''); }}
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Annotation cards */}
+            {annotsHere.map((a) => (
+              <div key={a.id} className={styles.previewAnnotRow}>
+                <div className={styles.previewInlineFormSpacer} />
+                <div className={styles.previewAnnotContent}>
+                  <AnnotCard annotation={a} onDelete={onAnnotationDelete} />
+                </div>
+              </div>
+            ))}
+          </React.Fragment>
+        );
+      })}
     </div>
   );
 }
@@ -422,15 +586,17 @@ interface FileLoaderProps {
 export function FileLoader({ onLoad }: FileLoaderProps) {
   const [urlInput, setUrlInput] = useState('');
   const [pasteContent, setPasteContent] = useState('');
-  const [pasteFilename, setPasteFilename] = useState('');
-  const [tab, setTab] = useState<'url' | 'paste'>('url');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const fetchFromGithub = async () => {
+    if (!urlInput.trim()) return;
     setError(null);
     const parsed = parseGithubUrl(urlInput.trim());
-    if (!parsed) { setError('Invalid GitHub URL. Expected: github.com/owner/repo/blob/branch/path/to/file'); return; }
+    if (!parsed) {
+      setError('Invalid GitHub URL. Expected: github.com/owner/repo/blob/branch/path/to/file');
+      return;
+    }
     setLoading(true);
     try {
       const res = await fetch(parsed.rawUrl);
@@ -440,61 +606,58 @@ export function FileLoader({ onLoad }: FileLoaderProps) {
       onLoad(text, filename, parsed.displayUrl);
     } catch (e) {
       setError(`Failed to fetch: ${e instanceof Error ? e.message : String(e)}`);
-    } finally { setLoading(false); }
+    } finally {
+      setLoading(false);
+    }
   };
 
   const loadPasted = () => {
     if (!pasteContent.trim()) { setError('No content to load.'); return; }
-    onLoad(pasteContent, pasteFilename.trim() || 'untitled.md', null);
+    onLoad(pasteContent, '', null);
   };
 
   return (
     <div className={styles.loader}>
-      <div className={styles.loaderTabs}>
-        <button className={`${styles.loaderTab} ${tab === 'url' ? styles.loaderTabActive : ''}`} onClick={() => setTab('url')}>GitHub URL</button>
-        <button className={`${styles.loaderTab} ${tab === 'paste' ? styles.loaderTabActive : ''}`} onClick={() => setTab('paste')}>Paste content</button>
+      {/* GitHub URL */}
+      <div className={styles.loaderSection}>
+        <label className={styles.loaderLabel}>GitHub file URL</label>
+        <div className={styles.loaderRow}>
+          <input
+            className={styles.loaderInput}
+            type="url"
+            placeholder="https://github.com/owner/repo/blob/main/README.md"
+            value={urlInput}
+            onChange={(e) => { setUrlInput(e.target.value); setError(null); }}
+            onKeyDown={(e) => { if (e.key === 'Enter') fetchFromGithub(); }}
+          />
+          <button className={styles.loaderBtn} onClick={fetchFromGithub} disabled={loading || !urlInput.trim()}>
+            {loading ? 'Loading…' : 'Fetch'}
+          </button>
+        </div>
       </div>
 
-      {tab === 'url' && (
-        <div className={styles.loaderSection}>
-          <p className={styles.loaderDesc}>Paste a GitHub file URL to load and review it.</p>
-          <div className={styles.loaderRow}>
-            <input
-              className={styles.loaderInput}
-              type="url"
-              placeholder="https://github.com/owner/repo/blob/main/README.md"
-              value={urlInput}
-              onChange={(e) => setUrlInput(e.target.value)}
-              onKeyDown={(e) => { if (e.key === 'Enter') fetchFromGithub(); }}
-            />
-            <button className={styles.loaderBtn} onClick={fetchFromGithub} disabled={loading || !urlInput.trim()}>
-              {loading ? 'Loading…' : 'Fetch'}
-            </button>
-          </div>
-        </div>
-      )}
+      <div className={styles.loaderDivider}>
+        <span>or paste content below</span>
+      </div>
 
-      {tab === 'paste' && (
-        <div className={styles.loaderSection}>
-          <div className={styles.loaderRow}>
-            <input
-              className={styles.loaderFilenameInput}
-              type="text"
-              placeholder="filename.md"
-              value={pasteFilename}
-              onChange={(e) => setPasteFilename(e.target.value)}
-            />
-          </div>
-          <textarea
-            className={styles.loaderTextarea}
-            placeholder="Paste file contents here…"
-            value={pasteContent}
-            onChange={(e) => setPasteContent(e.target.value)}
-            rows={12}
-          />
-          <button className={styles.loaderBtn} onClick={loadPasted} disabled={!pasteContent.trim()}>Load file</button>
-        </div>
-      )}
+      {/* Paste */}
+      <div className={styles.loaderSection}>
+        <textarea
+          className={styles.loaderTextarea}
+          placeholder="Paste file contents here…"
+          value={pasteContent}
+          onChange={(e) => { setPasteContent(e.target.value); setError(null); }}
+          rows={10}
+        />
+        <button
+          className={styles.loaderBtn}
+          onClick={loadPasted}
+          disabled={!pasteContent.trim()}
+          style={{ alignSelf: 'flex-start' }}
+        >
+          Load
+        </button>
+      </div>
 
       {error && <div className={styles.loaderError}>{error}</div>}
     </div>
@@ -585,7 +748,7 @@ function EmbedPanel({ content, filename, sourceUrl, onClose }: EmbedPanelProps)
     ? `${EMBED_BASE}?url=${encodeURIComponent(sourceUrl)}`
     : tooLarge
     ? null
-    : `${EMBED_BASE}?content=${encodeContentForUrl(content)}&filename=${encodeURIComponent(filename)}`;
+    : `${EMBED_BASE}?content=${encodeContentForUrl(content)}&filename=${encodeURIComponent(filename || 'file')}`;
 
   const iframeCode = embedUrl
     ? `<iframe\n  src="${embedUrl}"\n  width="${width}"\n  height="${height}"\n  frameborder="0"\n  style="border-radius:8px;border:1px solid #e5e7eb;"\n></iframe>`
@@ -598,8 +761,6 @@ function EmbedPanel({ content, filename, sourceUrl, onClose }: EmbedPanelProps)
     setTimeout(() => setCopied(false), 2000);
   };
 
-  const handleInputClick = () => { inputRef.current?.select(); };
-
   return (
     <div className={styles.embedPanel}>
       <div className={styles.embedPanelHeader}>
@@ -657,7 +818,7 @@ function EmbedPanel({ content, filename, sourceUrl, onClose }: EmbedPanelProps)
                 type="text"
                 readOnly
                 value={iframeCode ?? ''}
-                onClick={handleInputClick}
+                onClick={() => inputRef.current?.select()}
               />
               <button className={styles.embedCopyBtn} onClick={handleCopy}>
                 {copied ? '✓ Copied' : 'Copy'}
@@ -666,12 +827,7 @@ function EmbedPanel({ content, filename, sourceUrl, onClose }: EmbedPanelProps)
           </div>
 
           <div className={styles.embedPreviewRow}>
-            <a
-              className={styles.embedPreviewLink}
-              href={embedUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <a className={styles.embedPreviewLink} href={embedUrl} target="_blank" rel="noopener noreferrer">
               Preview embed ↗
             </a>
           </div>
@@ -681,7 +837,7 @@ function EmbedPanel({ content, filename, sourceUrl, onClose }: EmbedPanelProps)
             <ol className={styles.embedInstructionsList}>
               <li>Copy the embed code above.</li>
               <li>Paste it into any HTML page where you want the annotator to appear.</li>
-              <li>Adjust <code>width</code> and <code>height</code> to fit your layout. You can also use <code>width="100%"</code>.</li>
+              <li>Adjust <code>width</code> and <code>height</code> to fit your layout — <code>width="100%"</code> works for responsive layouts.</li>
               <li>Viewers can annotate the file and export their review to Claude or ChatGPT directly from the embed.</li>
             </ol>
           </div>
@@ -712,7 +868,6 @@ export function AnnotatorTool({ compact = false, initialFile }: AnnotatorToolPro
     initialFile ? (isMarkdown(initialFile.filename) ? 'preview' : 'code') : 'code'
   );
   const [annotations, setAnnotations] = useState<Annotation[]>([]);
-  const [pendingAnnotation, setPendingAnnotation] = useState<{ lineStart: number; lineEnd: number; selectedText: string } | null>(null);
   const [showReview, setShowReview] = useState(false);
   const [showEmbed, setShowEmbed] = useState(false);
 
@@ -729,15 +884,15 @@ export function AnnotatorTool({ compact = false, initialFile }: AnnotatorToolPro
     setShowEmbed(false);
   }, []);
 
-  const handleAnnotationAdd = useCallback((lineStart: number, lineEnd: number, selectedText: string) => {
-    setPendingAnnotation({ lineStart, lineEnd, selectedText });
-  }, []);
-
-  const handleAnnotationConfirm = useCallback((comment: string) => {
-    if (!pendingAnnotation) return;
-    setAnnotations((prev) => [...prev, { id: uid(), ...pendingAnnotation, comment, view: viewMode }]);
-    setPendingAnnotation(null);
-  }, [pendingAnnotation, viewMode]);
+  const handleAnnotationAdd = useCallback(
+    (lineStart: number, lineEnd: number, selectedText: string, comment: string) => {
+      setAnnotations((prev) => [
+        ...prev,
+        { id: uid(), lineStart, lineEnd, selectedText, comment, view: viewMode },
+      ]);
+    },
+    [viewMode]
+  );
 
   const handleAnnotationDelete = useCallback((id: string) => {
     setAnnotations((prev) => prev.filter((a) => a.id !== id));
@@ -749,7 +904,6 @@ export function AnnotatorTool({ compact = false, initialFile }: AnnotatorToolPro
     setFilename('');
     setSourceUrl(null);
     setAnnotations([]);
-    setPendingAnnotation(null);
     setShowReview(false);
     setShowEmbed(false);
   }, [compact]);
@@ -788,7 +942,7 @@ export function AnnotatorTool({ compact = false, initialFile }: AnnotatorToolPro
               <span>Review</span>
             </div>
           )}
-          <h1 className={styles.toolTitle}>Review: {filename}</h1>
+          <h1 className={styles.toolTitle}>Review{filename ? `: ${filename}` : ''}</h1>
         </div>
         <ReviewPanel
           content={content}
@@ -812,7 +966,9 @@ export function AnnotatorTool({ compact = false, initialFile }: AnnotatorToolPro
           </div>
         )}
         <div className={styles.toolTitleRow}>
-          <h1 className={compact ? styles.toolTitleCompact : styles.toolTitle}>{filename}</h1>
+          <h1 className={compact ? styles.toolTitleCompact : styles.toolTitle}>
+            {filename || 'Untitled'}
+          </h1>
           <div className={styles.toolHeaderActions}>
             {isMd && (
               <div className={styles.viewToggle}>
@@ -855,22 +1011,21 @@ export function AnnotatorTool({ compact = false, initialFile }: AnnotatorToolPro
 
       <div className={styles.toolBody}>
         {viewMode === 'code' ? (
-          <CodeView lines={lines} annotations={annotations} onAnnotationAdd={handleAnnotationAdd} onAnnotationDelete={handleAnnotationDelete} />
+          <CodeView
+            lines={lines}
+            annotations={annotations}
+            onAnnotationAdd={handleAnnotationAdd}
+            onAnnotationDelete={handleAnnotationDelete}
+          />
         ) : (
-          <PreviewView content={content} annotations={annotations} onAnnotationAdd={handleAnnotationAdd} onAnnotationDelete={handleAnnotationDelete} />
+          <PreviewView
+            content={content}
+            annotations={annotations}
+            onAnnotationAdd={handleAnnotationAdd}
+            onAnnotationDelete={handleAnnotationDelete}
+          />
         )}
       </div>
-
-      {pendingAnnotation && (
-        <AnnotationDialog
-          lineStart={pendingAnnotation.lineStart}
-          lineEnd={pendingAnnotation.lineEnd}
-          selectedText={pendingAnnotation.selectedText}
-          view={viewMode}
-          onConfirm={handleAnnotationConfirm}
-          onCancel={() => setPendingAnnotation(null)}
-        />
-      )}
     </div>
   );
 }
diff --git a/web/src/pages/tools/markdown-annotator.module.css b/web/src/pages/tools/markdown-annotator.module.css
index c2202bf9..69e29c4f 100644
--- a/web/src/pages/tools/markdown-annotator.module.css
+++ b/web/src/pages/tools/markdown-annotator.module.css
@@ -1187,6 +1187,426 @@
   border-radius: 3px;
 }
 
+/* ── Add-comment gutter button ───────────────────────────────────────────────── */
+
+.addCell {
+  width: 26px;
+  padding: 0 2px;
+  vertical-align: top;
+  text-align: center;
+  background: var(--ifm-color-emphasis-50, rgba(0,0,0,0.02));
+  user-select: none;
+}
+
+[data-theme='dark'] .addCell {
+  background: rgba(255,255,255,0.02);
+}
+
+.addBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin-top: 1px;
+  border-radius: 50%;
+  background: none;
+  border: 1px solid transparent;
+  color: var(--ifm-color-primary);
+  font-size: 0.85rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  opacity: 0;
+  transition: opacity 0.12s, background 0.12s, border-color 0.12s;
+}
+
+.codeLine:hover .addBtn {
+  opacity: 1;
+}
+
+.addBtn:hover {
+  background: rgba(99, 102, 241, 0.12);
+  border-color: var(--ifm-color-primary);
+}
+
+.addBtnAnchor {
+  opacity: 1 !important;
+  background: var(--ifm-color-primary) !important;
+  color: #fff !important;
+  border-color: var(--ifm-color-primary) !important;
+}
+
+.codeLineFormRange {
+  background: rgba(99, 102, 241, 0.06);
+}
+
+[data-theme='dark'] .codeLineFormRange {
+  background: rgba(99, 102, 241, 0.1);
+}
+
+.codeRangeHint {
+  padding: 0.4rem 1rem;
+  font-size: 0.75rem;
+  color: var(--ifm-color-primary);
+  background: rgba(99, 102, 241, 0.06);
+  border-top: 1px solid rgba(99, 102, 241, 0.18);
+  user-select: none;
+}
+
+/* ── Inline form (code view) ─────────────────────────────────────────────────── */
+
+.inlineFormRow {
+  background: var(--ifm-background-surface-color);
+}
+
+.inlineFormCell {
+  padding: 0.65rem 1rem 0.65rem 0.4rem;
+}
+
+.annotCardRow {
+  background: var(--ifm-background-surface-color);
+}
+
+.annotCardCell {
+  padding: 0.35rem 1rem 0.35rem 0.4rem;
+}
+
+.inlineForm {
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 8px;
+  padding: 0.7rem 0.85rem;
+  background: var(--ifm-background-color);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
+}
+
+.inlineFormRange {
+  font-size: 0.74rem;
+  font-family: monospace;
+  color: var(--ifm-color-emphasis-500);
+  font-weight: 500;
+}
+
+.inlineFormTextarea {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 6px;
+  padding: 0.5rem 0.65rem;
+  font-size: 0.85rem;
+  font-family: inherit;
+  resize: vertical;
+  background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+  min-height: 70px;
+  transition: border-color 0.12s;
+}
+
+.inlineFormTextarea:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
+
+.inlineFormActions {
+  display: flex;
+  gap: 0.4rem;
+  justify-content: flex-end;
+}
+
+.inlineFormCancel {
+  background: none;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 6px;
+  padding: 0.3rem 0.75rem;
+  font-size: 0.8rem;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-600);
+  transition: background 0.12s;
+}
+
+.inlineFormCancel:hover { background: var(--ifm-color-emphasis-100); }
+
+.inlineFormSubmit {
+  background: var(--ifm-color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 0.3rem 0.9rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.12s;
+}
+
+.inlineFormSubmit:hover:not(:disabled) { opacity: 0.85; }
+.inlineFormSubmit:disabled { opacity: 0.45; cursor: not-allowed; }
+
+/* ── Annotation card ─────────────────────────────────────────────────────────── */
+
+.annotCard {
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-left: 3px solid #f59e0b;
+  border-radius: 0 6px 6px 0;
+  background: rgba(245, 158, 11, 0.04);
+  padding: 0.45rem 0.7rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+[data-theme='dark'] .annotCard {
+  background: rgba(245, 158, 11, 0.08);
+  border-color: rgba(245, 158, 11, 0.25);
+  border-left-color: #f59e0b;
+}
+
+.annotCardHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.annotCardRange {
+  font-size: 0.72rem;
+  font-family: monospace;
+  color: var(--ifm-color-emphasis-500);
+}
+
+.annotCardDelete {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-400);
+  font-size: 0.72rem;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  line-height: 1;
+  transition: color 0.12s, background 0.12s;
+}
+
+.annotCardDelete:hover {
+  color: #dc2626;
+  background: rgba(220, 38, 38, 0.08);
+}
+
+.annotCardQuote {
+  margin: 0;
+  padding: 0.3rem 0.5rem;
+  font-size: 0.75rem;
+  font-family: monospace;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--ifm-color-emphasis-700);
+}
+
+[data-theme='dark'] .annotCardQuote {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.annotCardComment {
+  font-size: 0.83rem;
+  color: var(--ifm-font-color-base);
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5;
+}
+
+/* ── Preview view block rows ─────────────────────────────────────────────────── */
+
+.previewBlockRow {
+  display: flex;
+  align-items: flex-start;
+  padding: 0.1rem 0;
+  border-radius: 4px;
+  transition: background 0.08s;
+}
+
+.previewBlockRow:hover .previewAddBtn {
+  opacity: 1;
+}
+
+.previewBlockRowActive {
+  background: rgba(99, 102, 241, 0.04);
+}
+
+.previewAddBtn {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  margin: 0.2rem 2px 0 4px;
+  border-radius: 50%;
+  background: none;
+  border: 1px solid transparent;
+  color: var(--ifm-color-primary);
+  font-size: 0.85rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  opacity: 0;
+  transition: opacity 0.12s, background 0.12s, border-color 0.12s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.previewAddBtn:hover {
+  background: rgba(99, 102, 241, 0.12);
+  border-color: var(--ifm-color-primary);
+  opacity: 1;
+}
+
+.previewLineNum {
+  flex-shrink: 0;
+  min-width: 40px;
+  padding: 0.25rem 0.5rem 0 0;
+  font-size: 0.72rem;
+  font-family: monospace;
+  color: var(--ifm-color-emphasis-400);
+  text-align: right;
+  user-select: none;
+  line-height: 1.6;
+}
+
+.previewLineNumEnd {
+  display: block;
+  color: var(--ifm-color-emphasis-300);
+  font-size: 0.66rem;
+}
+
+.previewBlockContent {
+  flex: 1;
+  min-width: 0;
+  padding: 0 1.5rem 0.5rem 0.5rem;
+  overflow-x: auto;
+}
+
+/* Markdown element styles inside previewBlockContent */
+.previewBlockContent h1,
+.previewBlockContent h2,
+.previewBlockContent h3,
+.previewBlockContent h4,
+.previewBlockContent h5,
+.previewBlockContent h6 {
+  margin-top: 0.2em;
+  margin-bottom: 0.4em;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.previewBlockContent h1 { font-size: 1.8rem; }
+.previewBlockContent h2 { font-size: 1.4rem; border-bottom: 1px solid var(--ifm-color-emphasis-200); padding-bottom: 0.3em; }
+.previewBlockContent h3 { font-size: 1.15rem; }
+
+.previewBlockContent p { margin: 0.4em 0; line-height: 1.7; }
+
+.previewBlockContent code {
+  font-family: monospace;
+  font-size: 0.85em;
+  background: var(--ifm-color-emphasis-100);
+  padding: 0.15em 0.35em;
+  border-radius: 4px;
+}
+
+.previewBlockContent pre {
+  background: var(--ifm-color-emphasis-100);
+  border-radius: 7px;
+  padding: 1rem;
+  overflow-x: auto;
+  margin: 0.5em 0;
+}
+
+.previewBlockContent pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.82rem;
+}
+
+.previewBlockContent ul,
+.previewBlockContent ol {
+  padding-left: 1.5rem;
+  margin: 0.4em 0;
+}
+
+.previewBlockContent li { margin: 0.25em 0; }
+
+.previewBlockContent blockquote {
+  border-left: 4px solid var(--ifm-color-emphasis-300);
+  margin: 0.5em 0;
+  padding: 0.4em 0.85em;
+  color: var(--ifm-color-emphasis-600);
+  background: var(--ifm-color-emphasis-50, rgba(0,0,0,0.02));
+  border-radius: 0 6px 6px 0;
+}
+
+.previewBlockContent hr {
+  border: none;
+  border-top: 1px solid var(--ifm-color-emphasis-300);
+  margin: 0.75em 0;
+}
+
+.previewBlockContent a { color: var(--ifm-color-primary); }
+.previewBlockContent strong { font-weight: 700; }
+.previewBlockContent em { font-style: italic; }
+.previewBlockContent del { text-decoration: line-through; }
+
+/* Preview inline form / annotation rows */
+
+.previewInlineFormRow {
+  display: flex;
+  padding: 0.5rem 0;
+}
+
+.previewInlineFormSpacer {
+  flex-shrink: 0;
+  width: 68px; /* previewAddBtn (28px) + previewLineNum (40px) */
+}
+
+.previewInlineFormContent {
+  flex: 1;
+  min-width: 0;
+  padding-right: 1.5rem;
+}
+
+.previewAnnotRow {
+  display: flex;
+  padding: 0.3rem 0;
+}
+
+.previewAnnotContent {
+  flex: 1;
+  min-width: 0;
+  padding-right: 1.5rem;
+}
+
+/* ── File loader additions ────────────────────────────────────────────────────── */
+
+.loaderLabel {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--ifm-color-emphasis-700);
+}
+
+.loaderDivider {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0 1.25rem;
+  color: var(--ifm-color-emphasis-400);
+  font-size: 0.8rem;
+}
+
+.loaderDivider::before,
+.loaderDivider::after {
+  content: '';
+  flex: 1;
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+}
+
 /* ── Responsive ──────────────────────────────────────────────────────────────── */
 
 @media (max-width: 680px) {

From 1a0dc3d4eb75192dfb3037063529b815ded7d0ab Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 18 Jul 2026 15:37:23 +0000
Subject: [PATCH 4/9] Share design system and components between app and web
 tool

Add Tailwind CSS to the docs site (preflight disabled to avoid Infima
conflicts; dark mode keyed on [data-theme="dark"] for Docusaurus compat)
and bridge the app's HSL CSS variable tokens (--background, --foreground,
--border, --muted, --primary, etc.) so shared components render identically
in both contexts.

Copy and adapt the app's shared UI primitives into web/src/components:
- ui/button.tsx and ui/textarea.tsx (identical to app, path-adjusted)
- CommentInput.tsx (adapted from app: no onSubmitWithMode/Tauri deps)
- lib/utils.ts with cn() (clsx + tailwind-merge, no Tauri imports)

Rewrite the code/preview view components in _MarkdownAnnotatorContent.tsx
to use Tailwind classes and the shared CommentInput, matching the app's
HunkLines gutter layout (w-24 gutter, w-6 add-button column, flex-1 code)
and inline comment card appearance (bg-background rounded-md border
border-border/60 with invisible group-hover delete button).
---
 web/package-lock.json                         | 449 +++++++++++++++++-
 web/package.json                              |   6 +-
 web/postcss.config.cjs                        |   6 +
 web/src/components/CommentInput.tsx           |  73 +++
 web/src/components/ui/button.tsx              |  51 ++
 web/src/components/ui/textarea.tsx            |  24 +
 web/src/css/custom.css                        |  52 ++
 web/src/lib/utils.ts                          |   6 +
 .../pages/tools/_MarkdownAnnotatorContent.tsx | 306 ++++++------
 .../pages/tools/markdown-annotator.module.css | 367 +-------------
 web/tailwind.config.js                        |  55 +++
 11 files changed, 846 insertions(+), 549 deletions(-)
 create mode 100644 web/postcss.config.cjs
 create mode 100644 web/src/components/CommentInput.tsx
 create mode 100644 web/src/components/ui/button.tsx
 create mode 100644 web/src/components/ui/textarea.tsx
 create mode 100644 web/src/lib/utils.ts
 create mode 100644 web/tailwind.config.js

diff --git a/web/package-lock.json b/web/package-lock.json
index 9764b07c..25f1ad69 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -15,7 +15,6 @@
         "@supabase/supabase-js": "^2.108.2",
         "@types/three": "^0.185.1",
         "@xyflow/react": "^12.11.2",
-        "clsx": "^2.1.1",
         "prism-react-renderer": "^2.4.1",
         "react": "^19.2.7",
         "react-dom": "^19.2.7",
@@ -36,9 +35,14 @@
         "@docusaurus/tsconfig": "3.10.1",
         "@docusaurus/types": "3.10.1",
         "@playwright/test": "^1.61.1",
+        "autoprefixer": "^10.5.4",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "gray-matter": "^4.0.3",
         "remark": "^15.0.1",
         "strip-markdown": "^6.0.0",
+        "tailwind-merge": "^3.6.0",
+        "tailwindcss": "^3.4.19",
         "typescript": "~5.6.2"
       },
       "engines": {
@@ -278,6 +282,19 @@
         "node": ">= 14.0.0"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
@@ -7115,6 +7132,13 @@
         "node": ">=14"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -7179,9 +7203,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.5.2",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.2.tgz",
-      "integrity": "sha512-rD5t5DwOjJdmSORcTq64j8MawTC+tbQ+HHqjR4NDumamy/ambn1UJrlKL+KdwujWxMkFjPM3pPHOEA9tl4767Q==",
+      "version": "10.5.4",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.4.tgz",
+      "integrity": "sha512-MaU0U/za7N3r6brxD4YB/l4NSrFzLPlANv6wEuQVaIPlD3L4W9rFcQPbL/EilY9BHhHvhfcz3gInDLrEtWT4EA==",
       "funding": [
         {
           "type": "opencollective",
@@ -7198,8 +7222,8 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.28.4",
-        "caniuse-lite": "^1.0.30001799",
+        "browserslist": "^4.28.6",
+        "caniuse-lite": "^1.0.30001806",
         "fraction.js": "^5.3.4",
         "picocolors": "^1.1.1",
         "postcss-value-parser": "^4.2.0"
@@ -7305,9 +7329,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.10.40",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.40.tgz",
-      "integrity": "sha512-BSSLZ9/Cjjv7Gtj5B68ZzXcXUg8iOf3fme+FCuh8rC/Go+Kmh8cox7M3A8dolou16s64QjLPOSdngh7GxXvkSw==",
+      "version": "2.10.43",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.43.tgz",
+      "integrity": "sha512-AjYpR78kDWAY3Efj+cDTFH9t9SCoL7OoTp1BOb0mQV7S+6CiLwnWM3FyxhJtdPufDFKzmCSFoUncKjWgJEZTCQ==",
       "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.cjs"
@@ -7452,9 +7476,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.28.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.4.tgz",
-      "integrity": "sha512-MTc8i/x9jBQd1iMw2CFGS+rwMa07eYjLR0CCTLDACl9xhxy+nIs3KeML/biicXtk9JrZ6dnnTatmc7ErPXIxqw==",
+      "version": "4.28.6",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.6.tgz",
+      "integrity": "sha512-FQBYNK15VMslhLHpA7+n+n1GOlF1kId2xcCg7/j95f24AOF6VDYMNH4mFxF7KuaTdv627faazpOAjFzMrfJOUw==",
       "funding": [
         {
           "type": "opencollective",
@@ -7471,10 +7495,10 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "baseline-browser-mapping": "^2.10.38",
-        "caniuse-lite": "^1.0.30001799",
-        "electron-to-chromium": "^1.5.376",
-        "node-releases": "^2.0.48",
+        "baseline-browser-mapping": "^2.10.42",
+        "caniuse-lite": "^1.0.30001803",
+        "electron-to-chromium": "^1.5.389",
+        "node-releases": "^2.0.51",
         "update-browserslist-db": "^1.2.3"
       },
       "bin": {
@@ -7628,6 +7652,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -7641,9 +7675,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001799",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
-      "integrity": "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==",
+      "version": "1.0.30001806",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001806.tgz",
+      "integrity": "sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==",
       "funding": [
         {
           "type": "opencollective",
@@ -7821,6 +7855,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/classcat": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
@@ -9096,6 +9143,13 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -9108,6 +9162,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/dns-packet": {
       "version": "5.6.1",
       "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz",
@@ -9251,9 +9312,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.380",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.380.tgz",
-      "integrity": "sha512-W6d5AbuEoRayO447cqrg6lKJIlscgRnnxOZl/08kfV71BQDoEBC7Wwis68z87LjyK6f4kWyTaubuDbhHKrZkbA==",
+      "version": "1.5.393",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.393.tgz",
+      "integrity": "sha512-kiDJdIUawuEIcp9XoICKp1iTYDEbgguIPq526N1Q7jIQDeQ3CqoMx71025PI/7E48Ddtw2HuWsVjY7afEgNxmg==",
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
@@ -14606,6 +14667,18 @@
         "multicast-dns": "cli.js"
       }
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.15",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
@@ -14665,9 +14738,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.50",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.50.tgz",
-      "integrity": "sha512-J6l92tKHX6w8Jy5nO1Vuc01NoIiRGi/d6qBKVxh+IQ8Cr3b6HbVNfKiF8ZpFKufTwpwxMmce2W3iQZ861ZRyTg==",
+      "version": "2.0.51",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.51.tgz",
+      "integrity": "sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -14802,6 +14875,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -15236,6 +15319,26 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-7.0.0.tgz",
@@ -15902,6 +16005,50 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
     "node_modules/postcss-lab-function": {
       "version": "7.0.12",
       "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-7.0.12.tgz",
@@ -15931,6 +16078,49 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss-loader": {
       "version": "7.3.4",
       "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.4.tgz",
@@ -16177,6 +16367,32 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
     "node_modules/postcss-nesting": {
       "version": "13.0.2",
       "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-13.0.2.tgz",
@@ -17208,6 +17424,16 @@
         "react": ">=15"
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -18716,6 +18942,39 @@
         "postcss": "^8.4.31"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -18794,6 +19053,68 @@
         "webpack": ">=2"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+      "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
@@ -18920,6 +19241,29 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "license": "MIT"
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/thingies": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/thingies/-/thingies-2.6.0.tgz",
@@ -18960,6 +19304,54 @@
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
       "license": "MIT"
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz",
+      "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/tinypool": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.1.1.tgz",
@@ -19035,6 +19427,13 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
diff --git a/web/package.json b/web/package.json
index c9ec4ac5..c5363b24 100644
--- a/web/package.json
+++ b/web/package.json
@@ -26,7 +26,6 @@
     "@supabase/supabase-js": "^2.108.2",
     "@types/three": "^0.185.1",
     "@xyflow/react": "^12.11.2",
-    "clsx": "^2.1.1",
     "prism-react-renderer": "^2.4.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
@@ -47,9 +46,14 @@
     "@docusaurus/tsconfig": "3.10.1",
     "@docusaurus/types": "3.10.1",
     "@playwright/test": "^1.61.1",
+    "autoprefixer": "^10.5.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "gray-matter": "^4.0.3",
     "remark": "^15.0.1",
     "strip-markdown": "^6.0.0",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^3.4.19",
     "typescript": "~5.6.2"
   },
   "browserslist": {
diff --git a/web/postcss.config.cjs b/web/postcss.config.cjs
new file mode 100644
index 00000000..12a703d9
--- /dev/null
+++ b/web/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/web/src/components/CommentInput.tsx b/web/src/components/CommentInput.tsx
new file mode 100644
index 00000000..9172854f
--- /dev/null
+++ b/web/src/components/CommentInput.tsx
@@ -0,0 +1,73 @@
+import React, { memo, type KeyboardEvent as ReactKeyboardEvent, useCallback, useState } from 'react';
+import { Button } from './ui/button';
+import { Textarea } from './ui/textarea';
+
+export interface CommentInputProps {
+  onSubmit: (text: string) => void;
+  onCancel: () => void;
+  filePath?: string;
+  startLine?: number;
+  endLine?: number;
+}
+
+export const CommentInput: React.FC<CommentInputProps> = memo(
+  ({ onSubmit, onCancel, filePath, startLine, endLine }) => {
+    const [text, setText] = useState('');
+
+    const handleSubmit = useCallback(() => {
+      if (text.trim()) onSubmit(text.trim());
+    }, [text, onSubmit]);
+
+    const handleKeyDown = useCallback(
+      (e: ReactKeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.metaKey || e.ctrlKey) {
+          const key = e.key.toLowerCase();
+          if (['a', 'c', 'x', 'v', 'z', 'y'].includes(key)) {
+            e.stopPropagation();
+            return;
+          }
+        }
+        if (e.key === 'Escape') onCancel();
+        else if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') handleSubmit();
+      },
+      [onCancel, handleSubmit],
+    );
+
+    const lineLabel =
+      startLine && endLine
+        ? startLine === endLine
+          ? `L${startLine}`
+          : `L${startLine}–${endLine}`
+        : null;
+
+    return (
+      <div className="bg-muted border border-border rounded-md mx-2 my-1 px-4 py-3 font-sans text-base">
+        {filePath && lineLabel && (
+          <div className="mb-2 text-sm text-muted-foreground font-mono">
+            {filePath}:{lineLabel}
+          </div>
+        )}
+        {!filePath && lineLabel && (
+          <div className="mb-2 text-sm text-muted-foreground font-mono">{lineLabel}</div>
+        )}
+        <Textarea
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="Add a comment…"
+          className="mb-2 font-sans min-h-[70px]"
+          autoFocus
+          onKeyDown={handleKeyDown}
+        />
+        <div className="flex justify-end gap-2">
+          <Button variant="ghost" size="sm" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button size="sm" onClick={handleSubmit} disabled={!text.trim()}>
+            Add Comment
+          </Button>
+        </div>
+      </div>
+    );
+  },
+);
+CommentInput.displayName = 'CommentInput';
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
new file mode 100644
index 00000000..5a46185a
--- /dev/null
+++ b/web/src/components/ui/button.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-40',
+  {
+    variants: {
+      size: {
+        default: 'h-10 px-4 py-2 text-base',
+        icon: 'h-10 w-10',
+        lg: 'h-11 px-6 text-lg',
+        sm: 'h-8 px-3 text-sm',
+        xs: 'h-6 px-2 text-sm',
+      },
+      variant: {
+        default:
+          'bg-primary text-primary-foreground hover:bg-primary/85 active:bg-primary/75 shadow-sm',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/85 shadow-sm',
+        ghost: 'hover:bg-accent hover:text-accent-foreground active:bg-accent/80',
+        link: 'text-primary underline-offset-4 hover:underline',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/70 active:bg-secondary/60',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <button
+      className={cn(buttonVariants({ className, size, variant }))}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/web/src/components/ui/textarea.tsx b/web/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..6de93bb6
--- /dev/null
+++ b/web/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      className={cn(
+        'flex min-h-[80px] w-full rounded-sm border border-input bg-background px-3 py-2 transition-colors ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-40 resize-none',
+        className,
+      )}
+      autoComplete="off"
+      autoCorrect="off"
+      autoCapitalize="off"
+      spellCheck={false}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
diff --git a/web/src/css/custom.css b/web/src/css/custom.css
index 0a40d9f9..6b502d9d 100644
--- a/web/src/css/custom.css
+++ b/web/src/css/custom.css
@@ -4,6 +4,58 @@
  * work well for content-centric websites.
  */
 
+/* Tailwind utilities (no preflight — Infima handles base styles) */
+@tailwind components;
+@tailwind utilities;
+
+/* ── Shared design-system tokens ──────────────────────────────────────────────
+   These mirror the desktop app's src/index.css so that shared React components
+   (CommentInput, Button, etc.) render identically in both contexts.          */
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 9%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 9%;
+  --primary: 211 100% 62%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 220 13% 95%;
+  --secondary-foreground: 0 0% 13%;
+  --muted: 220 13% 96%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 220 13% 95%;
+  --accent-foreground: 0 0% 13%;
+  --destructive: 0 85% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 220 13% 88%;
+  --input: 220 13% 91%;
+  --ring: 211 100% 62%;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+}
+
+[data-theme='dark'] {
+  --background: 0 0% 9%;
+  --foreground: 0 0% 95%;
+  --card: 0 0% 12%;
+  --card-foreground: 0 0% 95%;
+  --primary: 211 100% 55%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 20%;
+  --secondary-foreground: 0 0% 95%;
+  --muted: 0 0% 18%;
+  --muted-foreground: 0 0% 60%;
+  --accent: 0 0% 20%;
+  --accent-foreground: 0 0% 95%;
+  --destructive: 0 85% 58%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 25%;
+  --input: 0 0% 22%;
+  --ring: 211 100% 55%;
+}
+
 /* You can override the default Infima variables here. */
 :root {
   /* Font tokens. Real webfonts are self-hosted (see fonts.css); each is
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
new file mode 100644
index 00000000..9ad0df42
--- /dev/null
+++ b/web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/web/src/pages/tools/_MarkdownAnnotatorContent.tsx b/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
index 3b413f49..41ed8101 100644
--- a/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
+++ b/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
@@ -1,4 +1,6 @@
 import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { cn } from '../../lib/utils';
+import { CommentInput } from '../../components/CommentInput';
 import styles from './markdown-annotator.module.css';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
@@ -94,7 +96,6 @@ function inlineFmt(text: string): string {
     .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
 }
 
-// Returns an array of blocks each with a source line range and rendered HTML.
 function renderMarkdownBlocks(md: string): MdBlock[] {
   const blocks: MdBlock[] = [];
   const rawLines = md.split('\n');
@@ -104,10 +105,8 @@ function renderMarkdownBlocks(md: string): MdBlock[] {
     const raw = rawLines[i];
     const lineNum = i + 1;
 
-    // Skip blank lines — they don't produce a block
     if (!raw.trim()) { i++; continue; }
 
-    // Fenced code block
     if (raw.trimStart().startsWith('```')) {
       const start = i;
       const lang = raw.replace(/^\s*```/, '').trim();
@@ -117,7 +116,7 @@ function renderMarkdownBlocks(md: string): MdBlock[] {
         codeLines.push(esc(rawLines[i]));
         i++;
       }
-      i++; // closing ```
+      i++;
       blocks.push({
         lineStart: start + 1,
         lineEnd: i,
@@ -126,7 +125,6 @@ function renderMarkdownBlocks(md: string): MdBlock[] {
       continue;
     }
 
-    // ATX heading
     const hMatch = raw.match(/^(#{1,6})\s+(.*)/);
     if (hMatch) {
       const level = hMatch[1].length;
@@ -135,14 +133,12 @@ function renderMarkdownBlocks(md: string): MdBlock[] {
       continue;
     }
 
-    // Horizontal rule
     if (/^[-*_]{3,}\s*$/.test(raw)) {
       blocks.push({ lineStart: lineNum, lineEnd: lineNum, html: '<hr/>' });
       i++;
       continue;
     }
 
-    // Blockquote — collect consecutive > lines
     if (raw.startsWith('>')) {
       const start = i;
       const innerLines: string[] = [];
@@ -158,7 +154,6 @@ function renderMarkdownBlocks(md: string): MdBlock[] {
       continue;
     }
 
-    // Unordered list — collect consecutive list items (simple flat list)
     if (/^[-*+]\s/.test(raw)) {
       const start = i;
       const items: string[] = [];
@@ -170,7 +165,6 @@ function renderMarkdownBlocks(md: string): MdBlock[] {
       continue;
     }
 
-    // Ordered list
     if (/^\d+\.\s/.test(raw)) {
       const start = i;
       const items: string[] = [];
@@ -182,7 +176,6 @@ function renderMarkdownBlocks(md: string): MdBlock[] {
       continue;
     }
 
-    // Paragraph — collect consecutive non-special, non-blank lines
     const start = i;
     const paraLines: string[] = [];
     while (
@@ -249,49 +242,7 @@ export function buildReviewPrompt(opts: {
   return out.join('\n');
 }
 
-// ── Inline comment form ───────────────────────────────────────────────────────
-
-interface InlineFormProps {
-  lineStart: number;
-  lineEnd: number;
-  comment: string;
-  onChange: (v: string) => void;
-  onSubmit: () => void;
-  onCancel: () => void;
-}
-
-function InlineForm({ lineStart, lineEnd, comment, onChange, onSubmit, onCancel }: InlineFormProps) {
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  useEffect(() => { textareaRef.current?.focus(); }, []);
-
-  const range = lineStart === lineEnd ? `Line ${lineStart}` : `Lines ${lineStart}–${lineEnd}`;
-
-  return (
-    <div className={styles.inlineForm}>
-      <div className={styles.inlineFormRange}>{range}</div>
-      <textarea
-        ref={textareaRef}
-        className={styles.inlineFormTextarea}
-        placeholder="Leave a comment… (⌘↵ to submit)"
-        value={comment}
-        onChange={(e) => onChange(e.target.value)}
-        rows={3}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); if (comment.trim()) onSubmit(); }
-          if (e.key === 'Escape') onCancel();
-        }}
-      />
-      <div className={styles.inlineFormActions}>
-        <button className={styles.inlineFormCancel} onClick={onCancel}>Cancel</button>
-        <button className={styles.inlineFormSubmit} disabled={!comment.trim()} onClick={onSubmit}>
-          Add comment
-        </button>
-      </div>
-    </div>
-  );
-}
-
-// ── Annotation card ───────────────────────────────────────────────────────────
+// ── Inline annotation card (matches app's HunkLines comment card) ─────────────
 
 interface AnnotCardProps {
   annotation: Annotation;
@@ -299,19 +250,33 @@ interface AnnotCardProps {
 }
 
 function AnnotCard({ annotation: a, onDelete }: AnnotCardProps) {
-  const range = a.lineStart === a.lineEnd ? `Line ${a.lineStart}` : `Lines ${a.lineStart}–${a.lineEnd}`;
   return (
-    <div className={styles.annotCard}>
-      <div className={styles.annotCardHeader}>
-        <span className={styles.annotCardRange}>{range}</span>
-        <button className={styles.annotCardDelete} onClick={() => onDelete(a.id)} title="Delete comment">✕</button>
+    <div className="bg-muted/60 border-y border-border/40 px-4 py-2">
+      <div
+        data-testid="inline-comment-card"
+        className="group bg-background rounded-md p-3 border border-border/60"
+      >
+        <div className="flex items-start gap-2">
+          <div className="flex-1 min-w-0">
+            <div className="text-xs text-muted-foreground font-mono mb-1">
+              {a.lineStart === a.lineEnd ? `L${a.lineStart}` : `L${a.lineStart}–${a.lineEnd}`}
+            </div>
+            {a.selectedText && (
+              <pre className="text-xs bg-muted rounded p-2 whitespace-pre-wrap break-words text-foreground/80 mb-2 font-mono">
+                {a.selectedText.length > 200 ? a.selectedText.slice(0, 200) + '…' : a.selectedText}
+              </pre>
+            )}
+            <p className="text-sm whitespace-pre-wrap">{a.comment}</p>
+          </div>
+          <button
+            className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive text-xs p-1 rounded hover:bg-destructive/10 flex-shrink-0"
+            onClick={() => onDelete(a.id)}
+            title="Delete comment"
+          >
+            ✕
+          </button>
+        </div>
       </div>
-      {a.selectedText && (
-        <pre className={styles.annotCardQuote}>
-          {a.selectedText.length > 160 ? a.selectedText.slice(0, 160) + '…' : a.selectedText}
-        </pre>
-      )}
-      <div className={styles.annotCardComment}>{a.comment}</div>
     </div>
   );
 }
@@ -329,10 +294,8 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
   const [anchorLine, setAnchorLine] = useState<number | null>(null);
   const [hoverLine, setHoverLine] = useState<number | null>(null);
   const [inlineForm, setInlineForm] = useState<{ lineStart: number; lineEnd: number } | null>(null);
-  const [inlineComment, setInlineComment] = useState('');
 
-  const getRange = (a: number, b: number): [number, number] =>
-    a <= b ? [a, b] : [b, a];
+  const getRange = (a: number, b: number): [number, number] => a <= b ? [a, b] : [b, a];
 
   const handleAddClick = (lineNum: number) => {
     if (anchorLine !== null && anchorLine !== lineNum) {
@@ -342,7 +305,6 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
       setInlineForm({ lineStart: lineNum, lineEnd: lineNum });
     }
     setAnchorLine(null);
-    setInlineComment('');
   };
 
   const handleLineNumClick = (lineNum: number, e: React.MouseEvent) => {
@@ -351,23 +313,16 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
     setAnchorLine((prev) => (prev === lineNum ? null : lineNum));
   };
 
-  const handleInlineSubmit = () => {
-    if (!inlineForm || !inlineComment.trim()) return;
+  const handleInlineSubmit = (text: string) => {
+    if (!inlineForm) return;
     const selectedText = lines.slice(inlineForm.lineStart - 1, inlineForm.lineEnd).join('\n');
-    onAnnotationAdd(inlineForm.lineStart, inlineForm.lineEnd, selectedText, inlineComment.trim());
-    setInlineForm(null);
-    setInlineComment('');
-  };
-
-  const handleInlineCancel = () => {
+    onAnnotationAdd(inlineForm.lineStart, inlineForm.lineEnd, selectedText, text);
     setInlineForm(null);
-    setInlineComment('');
   };
 
   const [rangeStart, rangeEnd] =
     anchorLine !== null && hoverLine !== null ? getRange(anchorLine, hoverLine) : [null, null];
 
-  // Build a map: lineNum → annotations starting here
   const annotsByLine = new Map<number, Annotation[]>();
   for (const a of annotations) {
     const arr = annotsByLine.get(a.lineStart) ?? [];
@@ -375,7 +330,6 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
     annotsByLine.set(a.lineStart, arr);
   }
 
-  // Lines that are annotated (for gutter dot)
   const annotatedLines = new Set(annotations.flatMap((a) => {
     const out: number[] = [];
     for (let l = a.lineStart; l <= a.lineEnd; l++) out.push(l);
@@ -383,9 +337,9 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
   }));
 
   return (
-    <div className={styles.codeView}>
-      <div className={styles.codeScroll}>
-        <table className={styles.codeTable} cellSpacing={0} cellPadding={0}>
+    <div className="flex flex-col">
+      <div className="overflow-x-auto overflow-y-auto" style={{ maxHeight: 'calc(100vh - 220px)' }}>
+        <table className="w-full border-collapse font-mono text-[0.82rem] leading-relaxed" cellSpacing={0} cellPadding={0}>
           <tbody>
             {lines.map((lineContent, idx) => {
               const lineNum = idx + 1;
@@ -399,62 +353,84 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
               return (
                 <React.Fragment key={lineNum}>
                   <tr
-                    className={`${styles.codeLine} ${isInRange || isAnchor ? styles.codeLineSelected : ''} ${isAnnotated ? styles.codeLineAnnotated : ''} ${isFormRange ? styles.codeLineFormRange : ''}`}
+                    className={cn(
+                      'group transition-colors',
+                      (isInRange || isAnchor) && '!bg-primary/10',
+                      isAnnotated && 'bg-amber-500/5',
+                      isFormRange && 'bg-primary/5',
+                    )}
                     onMouseEnter={() => setHoverLine(lineNum)}
                     onMouseLeave={() => setHoverLine(null)}
                   >
-                    {/* Add-comment button — left of gutter */}
-                    <td className={styles.addCell}>
-                      <button
-                        className={`${styles.addBtn} ${isAnchor ? styles.addBtnAnchor : ''}`}
-                        onClick={() => handleAddClick(lineNum)}
-                        title={anchorLine !== null && anchorLine !== lineNum ? `Comment on lines ${Math.min(anchorLine, lineNum)}–${Math.max(anchorLine, lineNum)}` : 'Add comment'}
-                        tabIndex={-1}
-                      >
-                        +
-                      </button>
-                    </td>
-
-                    {/* Line number */}
+                    {/* Gutter (matches app's w-24 / w-10 layout) */}
                     <td
-                      className={`${styles.lineNum} ${isAnchor ? styles.lineNumAnchor : ''}`}
+                      data-testid="line-gutter"
+                      className={cn(
+                        'w-24 flex-shrink-0 text-muted-foreground select-none border-r border-border/40 align-top',
+                        'cursor-pointer hover:bg-muted/50',
+                      )}
                       onClick={(e) => handleLineNumClick(lineNum, e)}
-                      title="Click to start a range selection, click another line number to extend"
+                      title="Click to start a range selection"
                     >
-                      {isAnnotated && <span className={styles.annotDot} />}
-                      {lineNum}
+                      <div className="flex items-center justify-end gap-1 pr-2 py-[2px]">
+                        {isAnnotated && (
+                          <span className="w-2 h-2 rounded-full bg-amber-500 inline-block flex-shrink-0" />
+                        )}
+                        <span className={cn('w-10 text-right text-xs', isAnchor && 'text-primary font-semibold')}>
+                          {lineNum}
+                        </span>
+                      </div>
+                    </td>
+
+                    {/* Add-comment button (matches app's w-6 invisible group-hover:visible) */}
+                    <td className="w-6 flex-shrink-0 align-top">
+                      <div className="flex items-center justify-center py-[2px]">
+                        <button
+                          data-comment-button
+                          className={cn(
+                            'p-[2px] rounded bg-primary text-primary-foreground hover:bg-primary/90',
+                            'invisible group-hover:visible',
+                            isAnchor && '!visible bg-primary',
+                          )}
+                          onClick={() => handleAddClick(lineNum)}
+                          title={
+                            anchorLine !== null && anchorLine !== lineNum
+                              ? `Comment on lines ${Math.min(anchorLine, lineNum)}–${Math.max(anchorLine, lineNum)}`
+                              : 'Add comment'
+                          }
+                          tabIndex={-1}
+                        >
+                          <span className="text-[10px] leading-none font-bold w-3 h-3 flex items-center justify-center">+</span>
+                        </button>
+                      </div>
                     </td>
 
                     {/* Code content */}
-                    <td className={styles.lineContent}>
-                      <pre className={styles.lineCode}>{lineContent || ' '}</pre>
+                    <td className="flex-1 align-top">
+                      <pre className="m-0 px-2 py-[2px] whitespace-pre bg-transparent border-0 font-inherit text-inherit text-sm">
+                        {lineContent || ' '}
+                      </pre>
                     </td>
                   </tr>
 
-                  {/* Inline comment form — appears after the last line of the range */}
+                  {/* Inline comment form — below last line of range */}
                   {isFormEnd && (
-                    <tr className={styles.inlineFormRow}>
-                      <td />
-                      <td />
-                      <td className={styles.inlineFormCell}>
-                        <InlineForm
-                          lineStart={inlineForm.lineStart}
-                          lineEnd={inlineForm.lineEnd}
-                          comment={inlineComment}
-                          onChange={setInlineComment}
+                    <tr>
+                      <td colSpan={3} className="p-0">
+                        <CommentInput
+                          startLine={inlineForm.lineStart}
+                          endLine={inlineForm.lineEnd}
                           onSubmit={handleInlineSubmit}
-                          onCancel={handleInlineCancel}
+                          onCancel={() => setInlineForm(null)}
                         />
                       </td>
                     </tr>
                   )}
 
-                  {/* Existing annotation cards */}
+                  {/* Annotation cards */}
                   {annotsHere.map((a) => (
-                    <tr key={a.id} className={styles.annotCardRow}>
-                      <td />
-                      <td />
-                      <td className={styles.annotCardCell}>
+                    <tr key={a.id}>
+                      <td colSpan={3} className="p-0">
                         <AnnotCard annotation={a} onDelete={onAnnotationDelete} />
                       </td>
                     </tr>
@@ -466,8 +442,8 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
         </table>
       </div>
       {anchorLine !== null && (
-        <div className={styles.codeRangeHint}>
-          Line {anchorLine} anchored — click another "+" to comment on a range, or click the same line number to deselect
+        <div className="px-4 py-2 text-xs text-primary bg-primary/5 border-t border-primary/20 select-none">
+          Line {anchorLine} anchored — click "+" on another line to annotate a range, or click the same line number to deselect
         </div>
       )}
     </div>
@@ -488,22 +464,18 @@ export function PreviewView({ content, annotations, onAnnotationAdd, onAnnotatio
   const rawLines = content.split('\n');
 
   const [inlineForm, setInlineForm] = useState<{ blockIdx: number; lineStart: number; lineEnd: number } | null>(null);
-  const [inlineComment, setInlineComment] = useState('');
 
   const handleAddClick = (block: MdBlock, blockIdx: number) => {
     setInlineForm({ blockIdx, lineStart: block.lineStart, lineEnd: block.lineEnd });
-    setInlineComment('');
   };
 
-  const handleInlineSubmit = () => {
-    if (!inlineForm || !inlineComment.trim()) return;
+  const handleInlineSubmit = (text: string) => {
+    if (!inlineForm) return;
     const selectedText = rawLines.slice(inlineForm.lineStart - 1, inlineForm.lineEnd).join('\n');
-    onAnnotationAdd(inlineForm.lineStart, inlineForm.lineEnd, selectedText, inlineComment.trim());
+    onAnnotationAdd(inlineForm.lineStart, inlineForm.lineEnd, selectedText, text);
     setInlineForm(null);
-    setInlineComment('');
   };
 
-  // Map lineStart → annotations
   const annotsByLine = new Map<number, Annotation[]>();
   for (const a of annotations) {
     const arr = annotsByLine.get(a.lineStart) ?? [];
@@ -512,50 +484,52 @@ export function PreviewView({ content, annotations, onAnnotationAdd, onAnnotatio
   }
 
   return (
-    <div className={styles.previewView}>
+    <div className="flex flex-col">
       {blocks.map((block, blockIdx) => {
         const annotsHere = annotsByLine.get(block.lineStart) ?? [];
         const isFormHere = inlineForm?.blockIdx === blockIdx;
 
         return (
           <React.Fragment key={blockIdx}>
-            {/* Block row with line number + rendered content */}
-            <div className={`${styles.previewBlockRow} ${isFormHere ? styles.previewBlockRowActive : ''}`}>
-              {/* Add button */}
-              <button
-                className={styles.previewAddBtn}
-                onClick={() => handleAddClick(block, blockIdx)}
-                title="Add annotation"
-                tabIndex={-1}
-              >
-                +
-              </button>
-              {/* Line number */}
-              <div className={styles.previewLineNum}>
+            {/* Block row: [+btn] [line#] [content] */}
+            <div className={cn('flex items-start group py-0.5 rounded-sm', isFormHere && 'bg-primary/5')}>
+              {/* Add button (w-6, same as code view) */}
+              <div className="w-6 flex-shrink-0 flex items-center justify-center pt-1">
+                <button
+                  className="p-[2px] rounded bg-primary text-primary-foreground hover:bg-primary/90 invisible group-hover:visible"
+                  onClick={() => handleAddClick(block, blockIdx)}
+                  title="Add annotation"
+                  tabIndex={-1}
+                >
+                  <span className="text-[10px] leading-none font-bold w-3 h-3 flex items-center justify-center">+</span>
+                </button>
+              </div>
+
+              {/* Line number (w-10 matches gutter) */}
+              <div className="w-10 flex-shrink-0 text-right pr-2 pt-1 text-xs font-mono text-muted-foreground select-none leading-relaxed">
                 {block.lineStart}
                 {block.lineEnd > block.lineStart && (
-                  <span className={styles.previewLineNumEnd}>–{block.lineEnd}</span>
+                  <span className="block text-[0.6rem] text-muted-foreground/60">–{block.lineEnd}</span>
                 )}
               </div>
-              {/* Rendered content */}
+
+              {/* Rendered markdown block */}
               <div
                 className={styles.previewBlockContent}
                 dangerouslySetInnerHTML={{ __html: block.html }}
               />
             </div>
 
-            {/* Inline form */}
+            {/* Inline comment form */}
             {isFormHere && (
-              <div className={styles.previewInlineFormRow}>
-                <div className={styles.previewInlineFormSpacer} />
-                <div className={styles.previewInlineFormContent}>
-                  <InlineForm
-                    lineStart={inlineForm.lineStart}
-                    lineEnd={inlineForm.lineEnd}
-                    comment={inlineComment}
-                    onChange={setInlineComment}
+              <div className="flex">
+                <div className="w-16 flex-shrink-0" />
+                <div className="flex-1 min-w-0 pr-4">
+                  <CommentInput
+                    startLine={inlineForm.lineStart}
+                    endLine={inlineForm.lineEnd}
                     onSubmit={handleInlineSubmit}
-                    onCancel={() => { setInlineForm(null); setInlineComment(''); }}
+                    onCancel={() => setInlineForm(null)}
                   />
                 </div>
               </div>
@@ -563,9 +537,9 @@ export function PreviewView({ content, annotations, onAnnotationAdd, onAnnotatio
 
             {/* Annotation cards */}
             {annotsHere.map((a) => (
-              <div key={a.id} className={styles.previewAnnotRow}>
-                <div className={styles.previewInlineFormSpacer} />
-                <div className={styles.previewAnnotContent}>
+              <div key={a.id} className="flex">
+                <div className="w-16 flex-shrink-0" />
+                <div className="flex-1 min-w-0 pr-4 py-1">
                   <AnnotCard annotation={a} onDelete={onAnnotationDelete} />
                 </div>
               </div>
@@ -784,27 +758,15 @@ function EmbedPanel({ content, filename, sourceUrl, onClose }: EmbedPanelProps)
           <div className={styles.embedSizeRow}>
             <label className={styles.embedSizeLabel}>
               Width
-              <input
-                className={styles.embedSizeInput}
-                type="number"
-                value={width}
-                min={320}
-                max={2560}
-                onChange={(e) => setWidth(Math.max(320, Number(e.target.value)))}
-              />
+              <input className={styles.embedSizeInput} type="number" value={width} min={320} max={2560}
+                onChange={(e) => setWidth(Math.max(320, Number(e.target.value)))} />
               <span className={styles.embedSizeUnit}>px</span>
             </label>
             <span className={styles.embedSizeSep}>×</span>
             <label className={styles.embedSizeLabel}>
               Height
-              <input
-                className={styles.embedSizeInput}
-                type="number"
-                value={height}
-                min={300}
-                max={2000}
-                onChange={(e) => setHeight(Math.max(300, Number(e.target.value)))}
-              />
+              <input className={styles.embedSizeInput} type="number" value={height} min={300} max={2000}
+                onChange={(e) => setHeight(Math.max(300, Number(e.target.value)))} />
               <span className={styles.embedSizeUnit}>px</span>
             </label>
           </div>
diff --git a/web/src/pages/tools/markdown-annotator.module.css b/web/src/pages/tools/markdown-annotator.module.css
index 69e29c4f..3d46ed7d 100644
--- a/web/src/pages/tools/markdown-annotator.module.css
+++ b/web/src/pages/tools/markdown-annotator.module.css
@@ -1187,297 +1187,32 @@
   border-radius: 3px;
 }
 
-/* ── Add-comment gutter button ───────────────────────────────────────────────── */
-
-.addCell {
-  width: 26px;
-  padding: 0 2px;
-  vertical-align: top;
-  text-align: center;
-  background: var(--ifm-color-emphasis-50, rgba(0,0,0,0.02));
-  user-select: none;
-}
-
-[data-theme='dark'] .addCell {
-  background: rgba(255,255,255,0.02);
-}
-
-.addBtn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  margin-top: 1px;
-  border-radius: 50%;
-  background: none;
-  border: 1px solid transparent;
-  color: var(--ifm-color-primary);
-  font-size: 0.85rem;
-  line-height: 1;
-  cursor: pointer;
-  padding: 0;
-  opacity: 0;
-  transition: opacity 0.12s, background 0.12s, border-color 0.12s;
-}
-
-.codeLine:hover .addBtn {
-  opacity: 1;
-}
-
-.addBtn:hover {
-  background: rgba(99, 102, 241, 0.12);
-  border-color: var(--ifm-color-primary);
-}
-
-.addBtnAnchor {
-  opacity: 1 !important;
-  background: var(--ifm-color-primary) !important;
-  color: #fff !important;
-  border-color: var(--ifm-color-primary) !important;
-}
-
-.codeLineFormRange {
-  background: rgba(99, 102, 241, 0.06);
-}
-
-[data-theme='dark'] .codeLineFormRange {
-  background: rgba(99, 102, 241, 0.1);
-}
-
-.codeRangeHint {
-  padding: 0.4rem 1rem;
-  font-size: 0.75rem;
-  color: var(--ifm-color-primary);
-  background: rgba(99, 102, 241, 0.06);
-  border-top: 1px solid rgba(99, 102, 241, 0.18);
-  user-select: none;
-}
-
-/* ── Inline form (code view) ─────────────────────────────────────────────────── */
-
-.inlineFormRow {
-  background: var(--ifm-background-surface-color);
-}
-
-.inlineFormCell {
-  padding: 0.65rem 1rem 0.65rem 0.4rem;
-}
-
-.annotCardRow {
-  background: var(--ifm-background-surface-color);
-}
-
-.annotCardCell {
-  padding: 0.35rem 1rem 0.35rem 0.4rem;
-}
-
-.inlineForm {
-  border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: 8px;
-  padding: 0.7rem 0.85rem;
-  background: var(--ifm-background-color);
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
-}
-
-.inlineFormRange {
-  font-size: 0.74rem;
-  font-family: monospace;
-  color: var(--ifm-color-emphasis-500);
-  font-weight: 500;
-}
+/* ── File loader additions ────────────────────────────────────────────────────── */
 
-.inlineFormTextarea {
-  width: 100%;
-  box-sizing: border-box;
-  border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: 6px;
-  padding: 0.5rem 0.65rem;
+.loaderLabel {
   font-size: 0.85rem;
-  font-family: inherit;
-  resize: vertical;
-  background: var(--ifm-background-color);
-  color: var(--ifm-font-color-base);
-  min-height: 70px;
-  transition: border-color 0.12s;
-}
-
-.inlineFormTextarea:focus {
-  outline: none;
-  border-color: var(--ifm-color-primary);
-}
-
-.inlineFormActions {
-  display: flex;
-  gap: 0.4rem;
-  justify-content: flex-end;
-}
-
-.inlineFormCancel {
-  background: none;
-  border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: 6px;
-  padding: 0.3rem 0.75rem;
-  font-size: 0.8rem;
-  cursor: pointer;
-  color: var(--ifm-color-emphasis-600);
-  transition: background 0.12s;
-}
-
-.inlineFormCancel:hover { background: var(--ifm-color-emphasis-100); }
-
-.inlineFormSubmit {
-  background: var(--ifm-color-primary);
-  color: #fff;
-  border: none;
-  border-radius: 6px;
-  padding: 0.3rem 0.9rem;
-  font-size: 0.8rem;
   font-weight: 600;
-  cursor: pointer;
-  transition: opacity 0.12s;
-}
-
-.inlineFormSubmit:hover:not(:disabled) { opacity: 0.85; }
-.inlineFormSubmit:disabled { opacity: 0.45; cursor: not-allowed; }
-
-/* ── Annotation card ─────────────────────────────────────────────────────────── */
-
-.annotCard {
-  border: 1px solid var(--ifm-color-emphasis-200);
-  border-left: 3px solid #f59e0b;
-  border-radius: 0 6px 6px 0;
-  background: rgba(245, 158, 11, 0.04);
-  padding: 0.45rem 0.7rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-}
-
-[data-theme='dark'] .annotCard {
-  background: rgba(245, 158, 11, 0.08);
-  border-color: rgba(245, 158, 11, 0.25);
-  border-left-color: #f59e0b;
-}
-
-.annotCardHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.annotCardRange {
-  font-size: 0.72rem;
-  font-family: monospace;
-  color: var(--ifm-color-emphasis-500);
-}
-
-.annotCardDelete {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--ifm-color-emphasis-400);
-  font-size: 0.72rem;
-  padding: 0.1rem 0.3rem;
-  border-radius: 3px;
-  line-height: 1;
-  transition: color 0.12s, background 0.12s;
-}
-
-.annotCardDelete:hover {
-  color: #dc2626;
-  background: rgba(220, 38, 38, 0.08);
-}
-
-.annotCardQuote {
-  margin: 0;
-  padding: 0.3rem 0.5rem;
-  font-size: 0.75rem;
-  font-family: monospace;
-  background: rgba(0, 0, 0, 0.05);
-  border-radius: 4px;
-  white-space: pre-wrap;
-  word-break: break-word;
   color: var(--ifm-color-emphasis-700);
 }
 
-[data-theme='dark'] .annotCardQuote {
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.annotCardComment {
-  font-size: 0.83rem;
-  color: var(--ifm-font-color-base);
-  white-space: pre-wrap;
-  word-break: break-word;
-  line-height: 1.5;
-}
-
-/* ── Preview view block rows ─────────────────────────────────────────────────── */
-
-.previewBlockRow {
-  display: flex;
-  align-items: flex-start;
-  padding: 0.1rem 0;
-  border-radius: 4px;
-  transition: background 0.08s;
-}
-
-.previewBlockRow:hover .previewAddBtn {
-  opacity: 1;
-}
-
-.previewBlockRowActive {
-  background: rgba(99, 102, 241, 0.04);
-}
-
-.previewAddBtn {
-  flex-shrink: 0;
-  width: 22px;
-  height: 22px;
-  margin: 0.2rem 2px 0 4px;
-  border-radius: 50%;
-  background: none;
-  border: 1px solid transparent;
-  color: var(--ifm-color-primary);
-  font-size: 0.85rem;
-  line-height: 1;
-  cursor: pointer;
-  padding: 0;
-  opacity: 0;
-  transition: opacity 0.12s, background 0.12s, border-color 0.12s;
+.loaderDivider {
   display: flex;
   align-items: center;
-  justify-content: center;
-}
-
-.previewAddBtn:hover {
-  background: rgba(99, 102, 241, 0.12);
-  border-color: var(--ifm-color-primary);
-  opacity: 1;
-}
-
-.previewLineNum {
-  flex-shrink: 0;
-  min-width: 40px;
-  padding: 0.25rem 0.5rem 0 0;
-  font-size: 0.72rem;
-  font-family: monospace;
+  gap: 0.75rem;
+  padding: 0 1.25rem;
   color: var(--ifm-color-emphasis-400);
-  text-align: right;
-  user-select: none;
-  line-height: 1.6;
+  font-size: 0.8rem;
 }
 
-.previewLineNumEnd {
-  display: block;
-  color: var(--ifm-color-emphasis-300);
-  font-size: 0.66rem;
+.loaderDivider::before,
+.loaderDivider::after {
+  content: '';
+  flex: 1;
+  border-top: 1px solid var(--ifm-color-emphasis-200);
 }
 
+/* ── Preview block content (markdown element styles) ─────────────────────────── */
+
 .previewBlockContent {
   flex: 1;
   min-width: 0;
@@ -1485,7 +1220,6 @@
   overflow-x: auto;
 }
 
-/* Markdown element styles inside previewBlockContent */
 .previewBlockContent h1,
 .previewBlockContent h2,
 .previewBlockContent h3,
@@ -1501,7 +1235,6 @@
 .previewBlockContent h1 { font-size: 1.8rem; }
 .previewBlockContent h2 { font-size: 1.4rem; border-bottom: 1px solid var(--ifm-color-emphasis-200); padding-bottom: 0.3em; }
 .previewBlockContent h3 { font-size: 1.15rem; }
-
 .previewBlockContent p { margin: 0.4em 0; line-height: 1.7; }
 
 .previewBlockContent code {
@@ -1520,18 +1253,8 @@
   margin: 0.5em 0;
 }
 
-.previewBlockContent pre code {
-  background: none;
-  padding: 0;
-  font-size: 0.82rem;
-}
-
-.previewBlockContent ul,
-.previewBlockContent ol {
-  padding-left: 1.5rem;
-  margin: 0.4em 0;
-}
-
+.previewBlockContent pre code { background: none; padding: 0; font-size: 0.82rem; }
+.previewBlockContent ul, .previewBlockContent ol { padding-left: 1.5rem; margin: 0.4em 0; }
 .previewBlockContent li { margin: 0.25em 0; }
 
 .previewBlockContent blockquote {
@@ -1543,70 +1266,12 @@
   border-radius: 0 6px 6px 0;
 }
 
-.previewBlockContent hr {
-  border: none;
-  border-top: 1px solid var(--ifm-color-emphasis-300);
-  margin: 0.75em 0;
-}
-
+.previewBlockContent hr { border: none; border-top: 1px solid var(--ifm-color-emphasis-300); margin: 0.75em 0; }
 .previewBlockContent a { color: var(--ifm-color-primary); }
 .previewBlockContent strong { font-weight: 700; }
 .previewBlockContent em { font-style: italic; }
 .previewBlockContent del { text-decoration: line-through; }
 
-/* Preview inline form / annotation rows */
-
-.previewInlineFormRow {
-  display: flex;
-  padding: 0.5rem 0;
-}
-
-.previewInlineFormSpacer {
-  flex-shrink: 0;
-  width: 68px; /* previewAddBtn (28px) + previewLineNum (40px) */
-}
-
-.previewInlineFormContent {
-  flex: 1;
-  min-width: 0;
-  padding-right: 1.5rem;
-}
-
-.previewAnnotRow {
-  display: flex;
-  padding: 0.3rem 0;
-}
-
-.previewAnnotContent {
-  flex: 1;
-  min-width: 0;
-  padding-right: 1.5rem;
-}
-
-/* ── File loader additions ────────────────────────────────────────────────────── */
-
-.loaderLabel {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--ifm-color-emphasis-700);
-}
-
-.loaderDivider {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0 1.25rem;
-  color: var(--ifm-color-emphasis-400);
-  font-size: 0.8rem;
-}
-
-.loaderDivider::before,
-.loaderDivider::after {
-  content: '';
-  flex: 1;
-  border-top: 1px solid var(--ifm-color-emphasis-200);
-}
-
 /* ── Responsive ──────────────────────────────────────────────────────────────── */
 
 @media (max-width: 680px) {
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
new file mode 100644
index 00000000..7cb96caa
--- /dev/null
+++ b/web/tailwind.config.js
@@ -0,0 +1,55 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  // Docusaurus sets data-theme="dark" on <html>, not a .dark class
+  darkMode: ['selector', '[data-theme="dark"]'],
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  corePlugins: {
+    // Disable Tailwind's CSS reset — Infima/Docusaurus handles base styles
+    preflight: false,
+  },
+  theme: {
+    extend: {
+      // Mirror the app's CSS variable–driven color system so shared components
+      // render identically on both the desktop app and the docs site.
+      colors: {
+        border:       'hsl(var(--border))',
+        input:        'hsl(var(--input))',
+        ring:         'hsl(var(--ring))',
+        background:   'hsl(var(--background))',
+        foreground:   'hsl(var(--foreground))',
+        primary: {
+          DEFAULT:    'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT:    'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT:    'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT:    'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT:    'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        card: {
+          DEFAULT:    'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius-lg)',
+        md: 'var(--radius-md)',
+        sm: 'var(--radius-sm)',
+      },
+      fontFamily: {
+        mono: ['SF Mono', 'Menlo', 'Monaco', 'Courier New', 'monospace'],
+      },
+    },
+  },
+};

From bd60beb2fe5cf2d3bf84b8823e8b40a2f449cf99 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 23 Jul 2026 09:04:16 +0000
Subject: [PATCH 5/9] Fix code view to match GitHub PR review UI: 2-col table,
 merged gutter

Replace 3-column spreadsheet layout with a 2-column table using colgroup
for explicit width control. Add-button and line number share a single 52px
gutter cell, all backgrounds applied via inline style to avoid Tailwind/
Infima specificity conflicts, pre elements get fontWeight:normal to prevent
Docusaurus from bolding code content.
---
 .../pages/tools/_MarkdownAnnotatorContent.tsx | 152 ++++++++++++------
 1 file changed, 101 insertions(+), 51 deletions(-)

diff --git a/web/src/pages/tools/_MarkdownAnnotatorContent.tsx b/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
index 41ed8101..51ec87fd 100644
--- a/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
+++ b/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
@@ -251,25 +251,29 @@ interface AnnotCardProps {
 
 function AnnotCard({ annotation: a, onDelete }: AnnotCardProps) {
   return (
-    <div className="bg-muted/60 border-y border-border/40 px-4 py-2">
+    <div className="border-t border-b border-[hsl(var(--primary)/0.2)] bg-[hsl(var(--primary)/0.03)] px-0 py-2">
       <div
         data-testid="inline-comment-card"
-        className="group bg-background rounded-md p-3 border border-border/60"
+        className="group mx-3 bg-background rounded-md border border-border"
+        style={{ boxShadow: '0 1px 3px rgba(0,0,0,0.08)' }}
       >
-        <div className="flex items-start gap-2">
+        <div className="flex items-start gap-2 p-3">
           <div className="flex-1 min-w-0">
-            <div className="text-xs text-muted-foreground font-mono mb-1">
-              {a.lineStart === a.lineEnd ? `L${a.lineStart}` : `L${a.lineStart}–${a.lineEnd}`}
+            <div className="text-[11px] text-muted-foreground font-mono mb-1.5">
+              {a.lineStart === a.lineEnd ? `Line ${a.lineStart}` : `Lines ${a.lineStart}–${a.lineEnd}`}
             </div>
             {a.selectedText && (
-              <pre className="text-xs bg-muted rounded p-2 whitespace-pre-wrap break-words text-foreground/80 mb-2 font-mono">
+              <pre
+                className="text-[11px] rounded py-1.5 px-2.5 whitespace-pre-wrap break-words font-mono mb-2"
+                style={{ background: 'hsl(var(--muted))', color: 'hsl(var(--foreground)/0.7)', margin: 0 }}
+              >
                 {a.selectedText.length > 200 ? a.selectedText.slice(0, 200) + '…' : a.selectedText}
               </pre>
             )}
-            <p className="text-sm whitespace-pre-wrap">{a.comment}</p>
+            <p className="text-sm whitespace-pre-wrap m-0" style={{ fontFamily: 'inherit' }}>{a.comment}</p>
           </div>
           <button
-            className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive text-xs p-1 rounded hover:bg-destructive/10 flex-shrink-0"
+            className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive text-xs px-1.5 py-0.5 rounded hover:bg-destructive/10 flex-shrink-0 mt-0.5"
             onClick={() => onDelete(a.id)}
             title="Delete comment"
           >
@@ -339,7 +343,23 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
   return (
     <div className="flex flex-col">
       <div className="overflow-x-auto overflow-y-auto" style={{ maxHeight: 'calc(100vh - 220px)' }}>
-        <table className="w-full border-collapse font-mono text-[0.82rem] leading-relaxed" cellSpacing={0} cellPadding={0}>
+        {/*
+          GitHub-style diff table:
+          - Two columns only: [gutter] [code]
+          - Gutter contains the "+" add-button (hidden until row hover) + line number
+          - No visible borders between columns — just a subtle background on the gutter
+          - Full-width code column, no constrained boxes
+        */}
+        <table
+          className="w-full font-mono text-[13px] leading-5"
+          style={{ borderCollapse: 'collapse', tableLayout: 'fixed' }}
+        >
+          <colgroup>
+            {/* Gutter: fixed width for line-number + add-button */}
+            <col style={{ width: '52px' }} />
+            {/* Code: takes remaining width */}
+            <col style={{ width: 'auto' }} />
+          </colgroup>
           <tbody>
             {lines.map((lineContent, idx) => {
               const lineNum = idx + 1;
@@ -350,47 +370,41 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
               const isFormEnd = inlineForm?.lineEnd === lineNum;
               const isFormRange = inlineForm !== null && lineNum >= inlineForm.lineStart && lineNum <= inlineForm.lineEnd;
 
+              const rowBg = (isInRange || isAnchor)
+                ? 'hsl(var(--primary)/0.1)'
+                : isFormRange
+                ? 'hsl(var(--primary)/0.05)'
+                : isAnnotated
+                ? 'hsl(40 96% 60% / 0.06)'
+                : undefined;
+
               return (
                 <React.Fragment key={lineNum}>
                   <tr
-                    className={cn(
-                      'group transition-colors',
-                      (isInRange || isAnchor) && '!bg-primary/10',
-                      isAnnotated && 'bg-amber-500/5',
-                      isFormRange && 'bg-primary/5',
-                    )}
+                    className="group"
+                    style={{ background: rowBg }}
                     onMouseEnter={() => setHoverLine(lineNum)}
                     onMouseLeave={() => setHoverLine(null)}
                   >
-                    {/* Gutter (matches app's w-24 / w-10 layout) */}
+                    {/* ── Gutter: add-button + line number in one cell ── */}
                     <td
-                      data-testid="line-gutter"
-                      className={cn(
-                        'w-24 flex-shrink-0 text-muted-foreground select-none border-r border-border/40 align-top',
-                        'cursor-pointer hover:bg-muted/50',
-                      )}
-                      onClick={(e) => handleLineNumClick(lineNum, e)}
-                      title="Click to start a range selection"
+                      className="select-none align-top p-0"
+                      style={{
+                        background: rowBg ?? 'hsl(var(--muted)/0.5)',
+                        position: 'relative',
+                        verticalAlign: 'top',
+                      }}
                     >
-                      <div className="flex items-center justify-end gap-1 pr-2 py-[2px]">
-                        {isAnnotated && (
-                          <span className="w-2 h-2 rounded-full bg-amber-500 inline-block flex-shrink-0" />
-                        )}
-                        <span className={cn('w-10 text-right text-xs', isAnchor && 'text-primary font-semibold')}>
-                          {lineNum}
-                        </span>
-                      </div>
-                    </td>
-
-                    {/* Add-comment button (matches app's w-6 invisible group-hover:visible) */}
-                    <td className="w-6 flex-shrink-0 align-top">
-                      <div className="flex items-center justify-center py-[2px]">
+                      <div className="flex items-start h-full">
+                        {/* "+" add-button — invisible until row hover */}
                         <button
-                          data-comment-button
                           className={cn(
-                            'p-[2px] rounded bg-primary text-primary-foreground hover:bg-primary/90',
-                            'invisible group-hover:visible',
-                            isAnchor && '!visible bg-primary',
+                            'flex items-center justify-center flex-shrink-0',
+                            'w-4 h-5 mt-[2px] ml-[2px]',
+                            'rounded text-[11px] font-bold leading-none',
+                            'text-primary-foreground bg-primary',
+                            'opacity-0 group-hover:opacity-100 transition-opacity',
+                            isAnchor && '!opacity-100',
                           )}
                           onClick={() => handleAddClick(lineNum)}
                           title={
@@ -400,23 +414,52 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
                           }
                           tabIndex={-1}
                         >
-                          <span className="text-[10px] leading-none font-bold w-3 h-3 flex items-center justify-center">+</span>
+                          +
                         </button>
+                        {/* Line number */}
+                        <span
+                          className={cn(
+                            'flex-1 text-right pr-3 py-[2px] text-[12px] cursor-pointer',
+                            'text-muted-foreground hover:text-foreground',
+                            isAnchor && 'text-primary font-semibold',
+                          )}
+                          onClick={(e) => handleLineNumClick(lineNum, e)}
+                          title="Click to anchor a range selection"
+                        >
+                          {isAnnotated && (
+                            <span className="inline-block w-1.5 h-1.5 rounded-full bg-amber-400 mr-1 mb-[1px]" />
+                          )}
+                          {lineNum}
+                        </span>
                       </div>
                     </td>
 
-                    {/* Code content */}
-                    <td className="flex-1 align-top">
-                      <pre className="m-0 px-2 py-[2px] whitespace-pre bg-transparent border-0 font-inherit text-inherit text-sm">
-                        {lineContent || ' '}
+                    {/* ── Code content ── */}
+                    <td className="align-top p-0">
+                      <pre
+                        style={{
+                          margin: 0,
+                          padding: '2px 16px 2px 8px',
+                          whiteSpace: 'pre',
+                          background: 'transparent',
+                          border: 'none',
+                          fontFamily: 'inherit',
+                          fontSize: 'inherit',
+                          lineHeight: 'inherit',
+                          fontWeight: 'normal',
+                          color: 'inherit',
+                          overflow: 'visible',
+                        }}
+                      >
+                        {lineContent || '​'}
                       </pre>
                     </td>
                   </tr>
 
-                  {/* Inline comment form — below last line of range */}
+                  {/* ── Inline comment form ── */}
                   {isFormEnd && (
                     <tr>
-                      <td colSpan={3} className="p-0">
+                      <td colSpan={2} style={{ padding: 0 }}>
                         <CommentInput
                           startLine={inlineForm.lineStart}
                           endLine={inlineForm.lineEnd}
@@ -427,10 +470,10 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
                     </tr>
                   )}
 
-                  {/* Annotation cards */}
+                  {/* ── Annotation cards ── */}
                   {annotsHere.map((a) => (
                     <tr key={a.id}>
-                      <td colSpan={3} className="p-0">
+                      <td colSpan={2} style={{ padding: 0 }}>
                         <AnnotCard annotation={a} onDelete={onAnnotationDelete} />
                       </td>
                     </tr>
@@ -442,8 +485,15 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
         </table>
       </div>
       {anchorLine !== null && (
-        <div className="px-4 py-2 text-xs text-primary bg-primary/5 border-t border-primary/20 select-none">
-          Line {anchorLine} anchored — click "+" on another line to annotate a range, or click the same line number to deselect
+        <div
+          className="px-4 py-1.5 text-xs select-none border-t"
+          style={{
+            color: 'hsl(var(--primary))',
+            background: 'hsl(var(--primary)/0.05)',
+            borderColor: 'hsl(var(--primary)/0.2)',
+          }}
+        >
+          Line {anchorLine} selected — click "+" on another line to comment on a range, or click the line number to deselect
         </div>
       )}
     </div>

From ab1739b3d205c39f44b75a3715a629f5f26edcf5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 24 Jul 2026 19:58:37 +0000
Subject: [PATCH 6/9] Polish annotator review container to match GitHub styling

- Full-width container instead of capped max-width
- Add-comment button moved to the right of the line number
- Explicit border removal on the code table to kill row/cell seams
- scrollbar-gutter: stable on the code scroll area so the container
  width doesn't shift when a comment form mounts
- Header/panel buttons switched to Docusaurus' button/button--primary/
  button--secondary classes instead of custom bordered styles
- Code/Preview tabs always shown as a GitHub-style tab bar at the top
  of the review container (content is always treated as markdown)
---
 .../pages/tools/_MarkdownAnnotatorContent.tsx | 90 ++++++++++---------
 .../pages/tools/markdown-annotator.module.css | 56 +++++++++++-
 2 files changed, 100 insertions(+), 46 deletions(-)

diff --git a/web/src/pages/tools/_MarkdownAnnotatorContent.tsx b/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
index 51ec87fd..6b224014 100644
--- a/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
+++ b/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
@@ -342,21 +342,21 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
 
   return (
     <div className="flex flex-col">
-      <div className="overflow-x-auto overflow-y-auto" style={{ maxHeight: 'calc(100vh - 220px)' }}>
+      <div className={cn('overflow-x-auto overflow-y-auto', styles.ghCodeScroll)} style={{ maxHeight: 'calc(100vh - 220px)' }}>
         {/*
           GitHub-style diff table:
           - Two columns only: [gutter] [code]
-          - Gutter contains the "+" add-button (hidden until row hover) + line number
-          - No visible borders between columns — just a subtle background on the gutter
+          - Gutter contains the line number + "+" add-button (hidden until row hover)
+          - No visible borders between columns or rows — just a subtle background on the gutter
           - Full-width code column, no constrained boxes
         */}
         <table
-          className="w-full font-mono text-[13px] leading-5"
+          className={cn('w-full font-mono text-[13px] leading-5', styles.ghCodeTable)}
           style={{ borderCollapse: 'collapse', tableLayout: 'fixed' }}
         >
           <colgroup>
             {/* Gutter: fixed width for line-number + add-button */}
-            <col style={{ width: '52px' }} />
+            <col style={{ width: '56px' }} />
             {/* Code: takes remaining width */}
             <col style={{ width: 'auto' }} />
           </colgroup>
@@ -395,12 +395,27 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
                         verticalAlign: 'top',
                       }}
                     >
-                      <div className="flex items-start h-full">
-                        {/* "+" add-button — invisible until row hover */}
+                      <div className="flex items-start justify-end h-full gap-1 pl-1 pr-1">
+                        {/* Line number */}
+                        <span
+                          className={cn(
+                            'text-right py-[2px] text-[12px] cursor-pointer',
+                            'text-muted-foreground hover:text-foreground',
+                            isAnchor && 'text-primary font-semibold',
+                          )}
+                          onClick={(e) => handleLineNumClick(lineNum, e)}
+                          title="Click to anchor a range selection"
+                        >
+                          {isAnnotated && (
+                            <span className="inline-block w-1.5 h-1.5 rounded-full bg-amber-400 mr-1 mb-[1px]" />
+                          )}
+                          {lineNum}
+                        </span>
+                        {/* "+" add-button — invisible until row hover, sits right of the line number */}
                         <button
                           className={cn(
                             'flex items-center justify-center flex-shrink-0',
-                            'w-4 h-5 mt-[2px] ml-[2px]',
+                            'w-4 h-5 mt-[2px]',
                             'rounded text-[11px] font-bold leading-none',
                             'text-primary-foreground bg-primary',
                             'opacity-0 group-hover:opacity-100 transition-opacity',
@@ -416,21 +431,6 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
                         >
                           +
                         </button>
-                        {/* Line number */}
-                        <span
-                          className={cn(
-                            'flex-1 text-right pr-3 py-[2px] text-[12px] cursor-pointer',
-                            'text-muted-foreground hover:text-foreground',
-                            isAnchor && 'text-primary font-semibold',
-                          )}
-                          onClick={(e) => handleLineNumClick(lineNum, e)}
-                          title="Click to anchor a range selection"
-                        >
-                          {isAnnotated && (
-                            <span className="inline-block w-1.5 h-1.5 rounded-full bg-amber-400 mr-1 mb-[1px]" />
-                          )}
-                          {lineNum}
-                        </span>
                       </div>
                     </td>
 
@@ -654,7 +654,7 @@ export function FileLoader({ onLoad }: FileLoaderProps) {
             onChange={(e) => { setUrlInput(e.target.value); setError(null); }}
             onKeyDown={(e) => { if (e.key === 'Enter') fetchFromGithub(); }}
           />
-          <button className={styles.loaderBtn} onClick={fetchFromGithub} disabled={loading || !urlInput.trim()}>
+          <button className="button button--primary button--sm" onClick={fetchFromGithub} disabled={loading || !urlInput.trim()}>
             {loading ? 'Loading…' : 'Fetch'}
           </button>
         </div>
@@ -674,7 +674,7 @@ export function FileLoader({ onLoad }: FileLoaderProps) {
           rows={10}
         />
         <button
-          className={styles.loaderBtn}
+          className="button button--primary button--sm"
           onClick={loadPasted}
           disabled={!pasteContent.trim()}
           style={{ alignSelf: 'flex-start' }}
@@ -735,7 +735,7 @@ export function ReviewPanel({ content, filename, sourceUrl, annotations, onBack
         />
       </div>
       <div className={styles.reviewActions}>
-        <button className={styles.reviewCopyBtn} onClick={handleCopy}>{copied ? '✓ Copied!' : 'Copy prompt'}</button>
+        <button className="button button--secondary button--sm" onClick={handleCopy}>{copied ? '✓ Copied!' : 'Copy prompt'}</button>
         <a className={styles.reviewOpenClaude} href={claudeUrl} target="_blank" rel="noopener noreferrer">Open in Claude</a>
         <a className={styles.reviewOpenChatgpt} href={chatgptUrl} target="_blank" rel="noopener noreferrer">Open in ChatGPT</a>
       </div>
@@ -743,7 +743,7 @@ export function ReviewPanel({ content, filename, sourceUrl, annotations, onBack
         <div className={styles.reviewPromptHeader}><span className={styles.reviewPromptLabel}>Prompt preview</span></div>
         <pre className={styles.reviewPromptText}>{prompt}</pre>
       </div>
-      <button className={styles.reviewNewBtn} onClick={onBack}>← Back to annotations</button>
+      <button className="button button--secondary button--sm" style={{ alignSelf: 'flex-start' }} onClick={onBack}>← Back to annotations</button>
     </div>
   );
 }
@@ -832,7 +832,7 @@ function EmbedPanel({ content, filename, sourceUrl, onClose }: EmbedPanelProps)
                 value={iframeCode ?? ''}
                 onClick={() => inputRef.current?.select()}
               />
-              <button className={styles.embedCopyBtn} onClick={handleCopy}>
+              <button className="button button--primary button--sm" onClick={handleCopy}>
                 {copied ? '✓ Copied' : 'Copy'}
               </button>
             </div>
@@ -884,7 +884,6 @@ export function AnnotatorTool({ compact = false, initialFile }: AnnotatorToolPro
   const [showEmbed, setShowEmbed] = useState(false);
 
   const lines = content?.split('\n') ?? [];
-  const isMd = isMarkdown(filename);
 
   const handleLoad = useCallback((c: string, fn: string, url: string | null) => {
     setContent(c);
@@ -982,30 +981,18 @@ export function AnnotatorTool({ compact = false, initialFile }: AnnotatorToolPro
             {filename || 'Untitled'}
           </h1>
           <div className={styles.toolHeaderActions}>
-            {isMd && (
-              <div className={styles.viewToggle}>
-                <button
-                  className={`${styles.viewToggleBtn} ${viewMode === 'code' ? styles.viewToggleBtnActive : ''}`}
-                  onClick={() => setViewMode('code')}
-                >Code</button>
-                <button
-                  className={`${styles.viewToggleBtn} ${viewMode === 'preview' ? styles.viewToggleBtnActive : ''}`}
-                  onClick={() => setViewMode('preview')}
-                >Preview</button>
-              </div>
-            )}
             {!compact && (
               <>
                 <button
-                  className={`${styles.embedToggleBtn} ${showEmbed ? styles.embedToggleBtnActive : ''}`}
+                  className={`button button--sm ${showEmbed ? 'button--primary' : 'button--secondary'}`}
                   onClick={() => setShowEmbed((v) => !v)}
                 >
                   {showEmbed ? 'Hide embed' : '‹/› Embed'}
                 </button>
-                <button className={styles.changeFileBtn} onClick={handleClear}>Change file</button>
+                <button className="button button--secondary button--sm" onClick={handleClear}>Change file</button>
               </>
             )}
-            <button className={styles.finishReviewBtn} onClick={() => setShowReview(true)}>
+            <button className="button button--primary button--sm" onClick={() => setShowReview(true)}>
               Finish review ({annotations.length})
             </button>
           </div>
@@ -1022,6 +1009,21 @@ export function AnnotatorTool({ compact = false, initialFile }: AnnotatorToolPro
       )}
 
       <div className={styles.toolBody}>
+        {/* GitHub-style Code/Preview tabs at the top of the review container — markdown is always assumed */}
+        <div className={styles.bodyTabs}>
+          <button
+            className={cn(styles.bodyTab, viewMode === 'code' && styles.bodyTabActive)}
+            onClick={() => setViewMode('code')}
+          >
+            Code
+          </button>
+          <button
+            className={cn(styles.bodyTab, viewMode === 'preview' && styles.bodyTabActive)}
+            onClick={() => setViewMode('preview')}
+          >
+            Preview
+          </button>
+        </div>
         {viewMode === 'code' ? (
           <CodeView
             lines={lines}
diff --git a/web/src/pages/tools/markdown-annotator.module.css b/web/src/pages/tools/markdown-annotator.module.css
index 3d46ed7d..d86e2f2e 100644
--- a/web/src/pages/tools/markdown-annotator.module.css
+++ b/web/src/pages/tools/markdown-annotator.module.css
@@ -1,8 +1,8 @@
 /* ── Root ────────────────────────────────────────────────────────────────────── */
 
 .toolRoot {
-  max-width: 1280px;
-  margin: 0 auto;
+  max-width: none;
+  margin: 0;
   padding: 0 1.5rem 4rem;
   width: 100%;
 }
@@ -150,6 +150,58 @@
   border-radius: 10px;
   overflow: hidden;
   background: var(--ifm-background-surface-color);
+  width: 100%;
+}
+
+/* ── Body tabs (GitHub-style Code/Preview tabs at top of container) ──────────── */
+
+.bodyTabs {
+  display: flex;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  padding: 0 0.75rem;
+  background: var(--ifm-color-emphasis-50, rgba(0,0,0,0.015));
+}
+
+[data-theme='dark'] .bodyTabs {
+  background: rgba(255,255,255,0.015);
+}
+
+.bodyTab {
+  background: none;
+  border: none;
+  padding: 0.65rem 0.9rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--ifm-color-emphasis-600);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: color 0.12s, border-color 0.12s;
+}
+
+.bodyTabActive {
+  color: var(--ifm-font-color-base);
+  border-bottom-color: var(--ifm-color-primary);
+  font-weight: 600;
+}
+
+.bodyTab:hover:not(.bodyTabActive) {
+  color: var(--ifm-font-color-base);
+}
+
+/* ── GitHub-style code table: no internal cell/row borders ───────────────────── */
+
+.ghCodeTable,
+.ghCodeTable tr,
+.ghCodeTable td,
+.ghCodeTable th {
+  border: none;
+  outline: none;
+  box-shadow: none;
+}
+
+.ghCodeScroll {
+  scrollbar-gutter: stable;
 }
 
 /* ── File loader ─────────────────────────────────────────────────────────────── */

From 98ef66c9f987da361016e4524d8bff7ea2859aa6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 24 Jul 2026 22:22:50 +0000
Subject: [PATCH 7/9] Add per-line annotation in preview, word-wrap code lines

- renderMarkdownBlocks now emits one block per source line (except
  fenced code, which must stay multi-line) so every preview line gets
  its own gutter, add-button, and annotation range like the code view
- PreviewView gains the same anchor/hover range-selection UX as
  CodeView, with the add-button moved to the right of the line number
- CodeView lines wrap (pre-wrap + overflow-wrap: anywhere) instead of
  scrolling horizontally, so the code column stays full width
---
 .../pages/tools/_MarkdownAnnotatorContent.tsx | 165 +++++++++++-------
 .../pages/tools/markdown-annotator.module.css |  18 +-
 2 files changed, 111 insertions(+), 72 deletions(-)

diff --git a/web/src/pages/tools/_MarkdownAnnotatorContent.tsx b/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
index 6b224014..2dc6cb58 100644
--- a/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
+++ b/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
@@ -101,6 +101,9 @@ function renderMarkdownBlocks(md: string): MdBlock[] {
   const rawLines = md.split('\n');
   let i = 0;
 
+  // Every non-blank line becomes its own annotatable block (one row per source
+  // line, like a code diff) — only fenced code blocks span multiple lines,
+  // since splitting mid-fence would break the syntax.
   while (i < rawLines.length) {
     const raw = rawLines[i];
     const lineNum = i + 1;
@@ -140,60 +143,31 @@ function renderMarkdownBlocks(md: string): MdBlock[] {
     }
 
     if (raw.startsWith('>')) {
-      const start = i;
-      const innerLines: string[] = [];
-      while (i < rawLines.length && rawLines[i].startsWith('>')) {
-        innerLines.push(inlineFmt(esc(rawLines[i].replace(/^>\s?/, ''))));
-        i++;
-      }
-      blocks.push({
-        lineStart: start + 1,
-        lineEnd: i,
-        html: `<blockquote>${innerLines.map((l) => `<p>${l}</p>`).join('')}</blockquote>`,
-      });
+      const text = inlineFmt(esc(raw.replace(/^>\s?/, '')));
+      blocks.push({ lineStart: lineNum, lineEnd: lineNum, html: `<blockquote><p>${text}</p></blockquote>` });
+      i++;
       continue;
     }
 
-    if (/^[-*+]\s/.test(raw)) {
-      const start = i;
-      const items: string[] = [];
-      while (i < rawLines.length && /^[-*+]\s/.test(rawLines[i])) {
-        items.push(`<li>${inlineFmt(esc(rawLines[i].replace(/^[-*+]\s/, '')))}</li>`);
-        i++;
-      }
-      blocks.push({ lineStart: start + 1, lineEnd: i, html: `<ul>${items.join('')}</ul>` });
+    const ulMatch = raw.match(/^[-*+]\s(.*)/);
+    if (ulMatch) {
+      const text = inlineFmt(esc(ulMatch[1]));
+      blocks.push({ lineStart: lineNum, lineEnd: lineNum, html: `<ul><li>${text}</li></ul>` });
+      i++;
       continue;
     }
 
-    if (/^\d+\.\s/.test(raw)) {
-      const start = i;
-      const items: string[] = [];
-      while (i < rawLines.length && /^\d+\.\s/.test(rawLines[i])) {
-        items.push(`<li>${inlineFmt(esc(rawLines[i].replace(/^\d+\.\s/, '')))}</li>`);
-        i++;
-      }
-      blocks.push({ lineStart: start + 1, lineEnd: i, html: `<ol>${items.join('')}</ol>` });
+    const olMatch = raw.match(/^(\d+)\.\s(.*)/);
+    if (olMatch) {
+      const [, num, rest] = olMatch;
+      const text = inlineFmt(esc(rest));
+      blocks.push({ lineStart: lineNum, lineEnd: lineNum, html: `<ol start="${num}"><li>${text}</li></ol>` });
+      i++;
       continue;
     }
 
-    const start = i;
-    const paraLines: string[] = [];
-    while (
-      i < rawLines.length &&
-      rawLines[i].trim() !== '' &&
-      !/^#{1,6}\s/.test(rawLines[i]) &&
-      !rawLines[i].trimStart().startsWith('```') &&
-      !/^[-*_]{3,}\s*$/.test(rawLines[i]) &&
-      !rawLines[i].startsWith('>') &&
-      !/^[-*+]\s/.test(rawLines[i]) &&
-      !/^\d+\.\s/.test(rawLines[i])
-    ) {
-      paraLines.push(inlineFmt(esc(rawLines[i])));
-      i++;
-    }
-    if (paraLines.length > 0) {
-      blocks.push({ lineStart: start + 1, lineEnd: i, html: `<p>${paraLines.join('<br/>')}</p>` });
-    }
+    blocks.push({ lineStart: lineNum, lineEnd: lineNum, html: `<p>${inlineFmt(esc(raw))}</p>` });
+    i++;
   }
 
   return blocks;
@@ -342,13 +316,13 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
 
   return (
     <div className="flex flex-col">
-      <div className={cn('overflow-x-auto overflow-y-auto', styles.ghCodeScroll)} style={{ maxHeight: 'calc(100vh - 220px)' }}>
+      <div className={cn('overflow-y-auto', styles.ghCodeScroll)} style={{ maxHeight: 'calc(100vh - 220px)' }}>
         {/*
           GitHub-style diff table:
           - Two columns only: [gutter] [code]
           - Gutter contains the line number + "+" add-button (hidden until row hover)
           - No visible borders between columns or rows — just a subtle background on the gutter
-          - Full-width code column, no constrained boxes
+          - Full-width code column that word-wraps instead of scrolling horizontally
         */}
         <table
           className={cn('w-full font-mono text-[13px] leading-5', styles.ghCodeTable)}
@@ -440,7 +414,9 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
                         style={{
                           margin: 0,
                           padding: '2px 16px 2px 8px',
-                          whiteSpace: 'pre',
+                          whiteSpace: 'pre-wrap',
+                          wordBreak: 'break-word',
+                          overflowWrap: 'anywhere',
                           background: 'transparent',
                           border: 'none',
                           fontFamily: 'inherit',
@@ -513,10 +489,26 @@ export function PreviewView({ content, annotations, onAnnotationAdd, onAnnotatio
   const blocks = useMemo(() => renderMarkdownBlocks(content), [content]);
   const rawLines = content.split('\n');
 
+  const [anchorLine, setAnchorLine] = useState<number | null>(null);
+  const [hoverLine, setHoverLine] = useState<number | null>(null);
   const [inlineForm, setInlineForm] = useState<{ blockIdx: number; lineStart: number; lineEnd: number } | null>(null);
 
+  const getRange = (a: number, b: number): [number, number] => a <= b ? [a, b] : [b, a];
+
   const handleAddClick = (block: MdBlock, blockIdx: number) => {
-    setInlineForm({ blockIdx, lineStart: block.lineStart, lineEnd: block.lineEnd });
+    if (anchorLine !== null && anchorLine !== block.lineStart) {
+      const [start, end] = getRange(anchorLine, block.lineStart);
+      setInlineForm({ blockIdx, lineStart: start, lineEnd: end });
+    } else {
+      setInlineForm({ blockIdx, lineStart: block.lineStart, lineEnd: block.lineEnd });
+    }
+    setAnchorLine(null);
+  };
+
+  const handleLineNumClick = (lineNum: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (inlineForm) return;
+    setAnchorLine((prev) => (prev === lineNum ? null : lineNum));
   };
 
   const handleInlineSubmit = (text: string) => {
@@ -526,6 +518,9 @@ export function PreviewView({ content, annotations, onAnnotationAdd, onAnnotatio
     setInlineForm(null);
   };
 
+  const [rangeStart, rangeEnd] =
+    anchorLine !== null && hoverLine !== null ? getRange(anchorLine, hoverLine) : [null, null];
+
   const annotsByLine = new Map<number, Annotation[]>();
   for (const a of annotations) {
     const arr = annotsByLine.get(a.lineStart) ?? [];
@@ -538,31 +533,57 @@ export function PreviewView({ content, annotations, onAnnotationAdd, onAnnotatio
       {blocks.map((block, blockIdx) => {
         const annotsHere = annotsByLine.get(block.lineStart) ?? [];
         const isFormHere = inlineForm?.blockIdx === blockIdx;
+        const isInRange = rangeStart !== null && rangeEnd !== null && block.lineStart >= rangeStart && block.lineStart <= rangeEnd;
+        const isAnchor = block.lineStart === anchorLine;
+        const isFormRange = inlineForm !== null && block.lineStart >= inlineForm.lineStart && block.lineStart <= inlineForm.lineEnd;
+
+        const rowBg = (isInRange || isAnchor)
+          ? 'hsl(var(--primary)/0.1)'
+          : isFormRange
+          ? 'hsl(var(--primary)/0.05)'
+          : undefined;
 
         return (
           <React.Fragment key={blockIdx}>
-            {/* Block row: [+btn] [line#] [content] */}
-            <div className={cn('flex items-start group py-0.5 rounded-sm', isFormHere && 'bg-primary/5')}>
-              {/* Add button (w-6, same as code view) */}
-              <div className="w-6 flex-shrink-0 flex items-center justify-center pt-1">
+            {/* Line row: [line#] [+btn] [content] */}
+            <div
+              className="group flex items-start py-0.5 rounded-sm"
+              style={{ background: rowBg }}
+              onMouseEnter={() => setHoverLine(block.lineStart)}
+              onMouseLeave={() => setHoverLine(null)}
+            >
+              {/* Gutter: line number + add-button, button sits right of the number */}
+              <div className="w-14 flex-shrink-0 flex items-start justify-end gap-1 pt-1 pr-1 select-none">
+                <span
+                  className={cn(
+                    'text-right text-xs font-mono cursor-pointer text-muted-foreground hover:text-foreground',
+                    isAnchor && 'text-primary font-semibold',
+                  )}
+                  onClick={(e) => handleLineNumClick(block.lineStart, e)}
+                  title="Click to anchor a range selection"
+                >
+                  {block.lineStart}
+                  {block.lineEnd > block.lineStart && <span className="text-muted-foreground/60">–{block.lineEnd}</span>}
+                </span>
                 <button
-                  className="p-[2px] rounded bg-primary text-primary-foreground hover:bg-primary/90 invisible group-hover:visible"
+                  className={cn(
+                    'flex items-center justify-center flex-shrink-0 w-4 h-4 mt-[1px]',
+                    'rounded text-[11px] font-bold leading-none text-primary-foreground bg-primary',
+                    'opacity-0 group-hover:opacity-100 transition-opacity',
+                    isAnchor && '!opacity-100',
+                  )}
                   onClick={() => handleAddClick(block, blockIdx)}
-                  title="Add annotation"
+                  title={
+                    anchorLine !== null && anchorLine !== block.lineStart
+                      ? `Comment on lines ${Math.min(anchorLine, block.lineStart)}–${Math.max(anchorLine, block.lineStart)}`
+                      : 'Add comment'
+                  }
                   tabIndex={-1}
                 >
-                  <span className="text-[10px] leading-none font-bold w-3 h-3 flex items-center justify-center">+</span>
+                  +
                 </button>
               </div>
 
-              {/* Line number (w-10 matches gutter) */}
-              <div className="w-10 flex-shrink-0 text-right pr-2 pt-1 text-xs font-mono text-muted-foreground select-none leading-relaxed">
-                {block.lineStart}
-                {block.lineEnd > block.lineStart && (
-                  <span className="block text-[0.6rem] text-muted-foreground/60">–{block.lineEnd}</span>
-                )}
-              </div>
-
               {/* Rendered markdown block */}
               <div
                 className={styles.previewBlockContent}
@@ -573,7 +594,7 @@ export function PreviewView({ content, annotations, onAnnotationAdd, onAnnotatio
             {/* Inline comment form */}
             {isFormHere && (
               <div className="flex">
-                <div className="w-16 flex-shrink-0" />
+                <div className="w-14 flex-shrink-0" />
                 <div className="flex-1 min-w-0 pr-4">
                   <CommentInput
                     startLine={inlineForm.lineStart}
@@ -588,7 +609,7 @@ export function PreviewView({ content, annotations, onAnnotationAdd, onAnnotatio
             {/* Annotation cards */}
             {annotsHere.map((a) => (
               <div key={a.id} className="flex">
-                <div className="w-16 flex-shrink-0" />
+                <div className="w-14 flex-shrink-0" />
                 <div className="flex-1 min-w-0 pr-4 py-1">
                   <AnnotCard annotation={a} onDelete={onAnnotationDelete} />
                 </div>
@@ -597,6 +618,18 @@ export function PreviewView({ content, annotations, onAnnotationAdd, onAnnotatio
           </React.Fragment>
         );
       })}
+      {anchorLine !== null && (
+        <div
+          className="px-4 py-1.5 text-xs select-none border-t"
+          style={{
+            color: 'hsl(var(--primary))',
+            background: 'hsl(var(--primary)/0.05)',
+            borderColor: 'hsl(var(--primary)/0.2)',
+          }}
+        >
+          Line {anchorLine} selected — click "+" on another line to comment on a range, or click the line number to deselect
+        </div>
+      )}
     </div>
   );
 }
diff --git a/web/src/pages/tools/markdown-annotator.module.css b/web/src/pages/tools/markdown-annotator.module.css
index d86e2f2e..b43c298a 100644
--- a/web/src/pages/tools/markdown-annotator.module.css
+++ b/web/src/pages/tools/markdown-annotator.module.css
@@ -1287,7 +1287,7 @@
 .previewBlockContent h1 { font-size: 1.8rem; }
 .previewBlockContent h2 { font-size: 1.4rem; border-bottom: 1px solid var(--ifm-color-emphasis-200); padding-bottom: 0.3em; }
 .previewBlockContent h3 { font-size: 1.15rem; }
-.previewBlockContent p { margin: 0.4em 0; line-height: 1.7; }
+.previewBlockContent p { margin: 0; line-height: 1.7; }
 
 .previewBlockContent code {
   font-family: monospace;
@@ -1302,22 +1302,28 @@
   border-radius: 7px;
   padding: 1rem;
   overflow-x: auto;
-  margin: 0.5em 0;
+  margin: 0.25em 0;
 }
 
 .previewBlockContent pre code { background: none; padding: 0; font-size: 0.82rem; }
-.previewBlockContent ul, .previewBlockContent ol { padding-left: 1.5rem; margin: 0.4em 0; }
-.previewBlockContent li { margin: 0.25em 0; }
+
+/* Each list item / blockquote line is rendered as its own standalone
+   ul/ol/blockquote (one per source line, for line-level annotation) —
+   zero out their margins so consecutive lines read as one continuous list. */
+.previewBlockContent ul, .previewBlockContent ol { padding-left: 1.5rem; margin: 0; }
+.previewBlockContent li { margin: 0; }
 
 .previewBlockContent blockquote {
   border-left: 4px solid var(--ifm-color-emphasis-300);
-  margin: 0.5em 0;
-  padding: 0.4em 0.85em;
+  margin: 0;
+  padding: 0.15em 0.85em;
   color: var(--ifm-color-emphasis-600);
   background: var(--ifm-color-emphasis-50, rgba(0,0,0,0.02));
   border-radius: 0 6px 6px 0;
 }
 
+.previewBlockContent blockquote p { line-height: 1.6; }
+
 .previewBlockContent hr { border: none; border-top: 1px solid var(--ifm-color-emphasis-300); margin: 0.75em 0; }
 .previewBlockContent a { color: var(--ifm-color-primary); }
 .previewBlockContent strong { font-weight: 700; }

From d5eac11c4169cd4838c19180d2debf4f2ef27d10 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 25 Jul 2026 13:29:12 +0000
Subject: [PATCH 8/9] Fix code table full width and remove alternating row
 backgrounds
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Infima's global `table` selector (unscoped — applies to every table on
the site) sets `display: block; overflow: auto;`, which blockifies the
table so its internal content shrink-wraps to content width instead of
filling the container, and stripes every 2nd row via
`table tr:nth-child(2n)`. Override both explicitly on the code table's
CSS module class, and always set an explicit inline row background
(transparent by default) so JS-driven highlighting can't be clobbered
by the stylesheet cascade regardless of specificity or load order.

Verified in a browser: the code table now fills the container width,
the comment input spans full width, and there's no more zebra striping.
---
 .../pages/tools/_MarkdownAnnotatorContent.tsx |  2 +-
 .../pages/tools/markdown-annotator.module.css | 23 +++++++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/tools/_MarkdownAnnotatorContent.tsx b/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
index 2dc6cb58..f00a0114 100644
--- a/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
+++ b/web/src/pages/tools/_MarkdownAnnotatorContent.tsx
@@ -356,7 +356,7 @@ export function CodeView({ lines, annotations, onAnnotationAdd, onAnnotationDele
                 <React.Fragment key={lineNum}>
                   <tr
                     className="group"
-                    style={{ background: rowBg }}
+                    style={{ background: rowBg ?? 'transparent' }}
                     onMouseEnter={() => setHoverLine(lineNum)}
                     onMouseLeave={() => setHoverLine(null)}
                   >
diff --git a/web/src/pages/tools/markdown-annotator.module.css b/web/src/pages/tools/markdown-annotator.module.css
index b43c298a..4d64470d 100644
--- a/web/src/pages/tools/markdown-annotator.module.css
+++ b/web/src/pages/tools/markdown-annotator.module.css
@@ -189,9 +189,23 @@
   color: var(--ifm-font-color-base);
 }
 
-/* ── GitHub-style code table: no internal cell/row borders ───────────────────── */
+/* ── GitHub-style code table ───────────────────────────────────────────────────
+   Infima's global `table` selector (unscoped — applies to every table on the
+   site) sets `display: block; overflow: auto;`, which blockifies the table
+   and makes its internal content shrink-wrap instead of filling the
+   container, and stripes every 2nd row via `table tr:nth-child(2n)`. Both
+   need to be explicitly overridden here since they otherwise bleed into any
+   <table> we render, regardless of the JS-driven row highlighting below. */
+
+.ghCodeTable {
+  display: table;
+  width: 100%;
+  overflow: visible;
+  border: none;
+  outline: none;
+  box-shadow: none;
+}
 
-.ghCodeTable,
 .ghCodeTable tr,
 .ghCodeTable td,
 .ghCodeTable th {
@@ -200,6 +214,11 @@
   box-shadow: none;
 }
 
+.ghCodeTable tbody tr,
+.ghCodeTable tbody tr:nth-child(2n) {
+  background-color: transparent;
+}
+
 .ghCodeScroll {
   scrollbar-gutter: stable;
 }

From 64a9930ccbe31e1fa7c28e6d2a8decef37439c91 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 26 Jul 2026 11:15:59 +0000
Subject: [PATCH 9/9] Remove default browser border on non-Infima buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tailwind's preflight is disabled for web/ (so it doesn't fight
Infima's own styles), which meant raw <button> elements — the shadcn
Button used by CommentInput, the "+" add-comment buttons, the delete
button on annotation cards — kept the browser's default UA border.
Reset appearance/border on any button inside the tool that isn't
using Infima's `.button` classes, which already set their own
intentional border.
---
 web/src/pages/tools/markdown-annotator.module.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/web/src/pages/tools/markdown-annotator.module.css b/web/src/pages/tools/markdown-annotator.module.css
index 4d64470d..88f855c7 100644
--- a/web/src/pages/tools/markdown-annotator.module.css
+++ b/web/src/pages/tools/markdown-annotator.module.css
@@ -7,6 +7,17 @@
   width: 100%;
 }
 
+/* Tailwind's preflight is disabled site-wide (to avoid fighting Infima), so
+   raw <button> elements keep the browser's default UA border/appearance.
+   Reset that here — but leave Infima's own `.button` classes untouched, since
+   they set their own intentional border. */
+.toolRoot button:not(.button) {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: none;
+}
+
 /* ── Header ──────────────────────────────────────────────────────────────────── */
 
 .toolHeader {