npm - @happy-nut/monacori - Versions diffs - 0.1.11 → 0.1.13 - Mend

@happy-nut/monacori 0.1.11 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/viewer.client.js CHANGED Viewed

@@ -147,15 +147,51 @@ var locale = (function () {
   return (v === 'ko' || v === 'en') ? v : 'en';
 })();
 function t(key) { var m = (I18N[locale] || I18N.en || {}); return (m && key in m) ? m[key] : ((I18N.en && I18N.en[key]) || key); }
+var langSelectRef = null, themeSelectRef = null;
+// Replace a native <select> with a button that opens our custom dropdown (consistent with the comment
+// dropdown + themable; native <select> popups ignore the app theme). getOptions() -> [{value,label}];
+// returns { render } so localized labels can be refreshed on a language switch.
+function setupCustomSelect(id, getOptions, getCurrent, onPick) {
+  var el = document.getElementById(id);
+  if (!el) return null;
+  function render() {
+    var cur = getCurrent();
+    var match = getOptions().filter(function (o) { return o.value === cur; })[0];
+    el.textContent = match ? match.label : cur;
+  }
+  el.addEventListener('click', function (e) {
+    e.preventDefault();
+    var r = el.getBoundingClientRect(), cur = getCurrent();
+    showCustomDropdown(r.left, r.bottom + 4, getOptions().map(function (o) {
+      return { label: (o.value === cur ? '✓  ' : '  ') + o.label, onSelect: function () { onPick(o.value); render(); } };
+    }));
+  });
+  render();
+  return { render: render };
+}
 function applyI18n() {
   document.querySelectorAll('[data-i18n]').forEach(function (el) { el.textContent = t(el.getAttribute('data-i18n')); });
   document.querySelectorAll('[data-i18n-ph]').forEach(function (el) { el.setAttribute('placeholder', t(el.getAttribute('data-i18n-ph'))); });
   document.querySelectorAll('[data-i18n-title]').forEach(function (el) { el.setAttribute('title', t(el.getAttribute('data-i18n-title'))); });
   document.querySelectorAll('[data-i18n-aria]').forEach(function (el) { el.setAttribute('aria-label', t(el.getAttribute('data-i18n-aria'))); });
   document.documentElement.lang = locale;
-  var sel = document.getElementById('settings-language');
-  if (sel) sel.value = locale;
+  if (langSelectRef) langSelectRef.render();
+  if (themeSelectRef) themeSelectRef.render(); // theme labels are localized — refresh on a language switch too
+}
+// Theme mirrors the locale pattern: persisted choice, applied by toggling data-theme on <html> so the
+// :root[data-theme="light"] palette takes over. Dark is the default (matches the inline :root). Applied
+// immediately at script start to minimize a first-paint flash from the dark default to light.
+var THEME_KEY = 'monacori-theme';
+var theme = (function () {
+  var v = persistRead(THEME_KEY);
+  if (v !== 'light' && v !== 'dark') { try { v = localStorage.getItem(THEME_KEY); } catch (e) {} }
+  return (v === 'light' || v === 'dark') ? v : 'dark';
+})();
+function applyTheme() {
+  document.documentElement.setAttribute('data-theme', theme);
+  if (themeSelectRef) themeSelectRef.render();
 }
+applyTheme();
 let fileStates = JSON.parse(document.getElementById('file-state-data')?.textContent || '[]');
 let httpEnvironments = JSON.parse(document.getElementById('http-env-data')?.textContent || '{}');
 let httpEnvNames = Object.keys(httpEnvironments);
@@ -168,6 +204,10 @@ let sourceByPath = new Map(sourceFiles.map((file) => [file.path, file]));
 // and the source view shows a brief loading state. Non-lazy-load modes embed source -> already loaded.
 var sourceLoaded = !REVIEW_LAZY_LOAD;
 var pendingSourceOpen = null;
+// The path whose content is ACTUALLY painted in #source-body right now. dataset.openPath is the INTENDED
+// path and gets set BEFORE the body paints in the lazy-LOAD branch, so the caret fast-path must check this
+// instead — else it patches the caret onto a stale body, leaving one file's content under another's path.
+var sourceBodyPath = null;
 var sourceLoading = false;
 var pendingSymbol = null;
 var sourceTabs = []; // Files-mode tab paths (session-only); see addSourceTab / renderSourceTabs.
@@ -194,6 +234,7 @@ function loadSourceData() {
     sourceLoaded = true;
     sourceLoading = false;
     scheduleSymbolIndex();
+    remapComments(); // content just arrived — reconcile comment anchors against it
     if (pendingSourceOpen) { var po = pendingSourceOpen; pendingSourceOpen = null; openSourceFile(po.path, po.shouldSwitch); }
     else if (isSourceViewerVisible() && document.getElementById('source-viewer').dataset.openPath) { openSourceFile(document.getElementById('source-viewer').dataset.openPath, false); }
     if (pendingSymbol) { var s = pendingSymbol; pendingSymbol = null; goToDefOrUsages(s); }
@@ -831,17 +872,33 @@ function isTreeRowVisible(el) {
 function treeRows() {
   const panel = document.querySelector('.tab-panel:not(.hidden)');
   if (!panel) return [];
-  return Array.from(panel.querySelectorAll('summary, .file-link')).filter((el) => el.getClientRects().length > 0 && isTreeRowVisible(el));
+  // isTreeRowVisible walks ancestor <details> (cheap, layout-free) and already excludes rows inside
+  // collapsed folders. The previous extra `getClientRects().length > 0` check forced a SYNCHRONOUS
+  // reflow per node — 6k forced layouts on every arrow key in a large source tree, which froze input.
+  // The details walk makes the rects check redundant, so drop it.
+  return Array.from(panel.querySelectorAll('summary, .file-link')).filter(isTreeRowVisible);
 }
 function focusTree(index) {
   const rows = treeRows();
   if (rows.length === 0) return;
-  // Incremental: drop the old focus class and add the new one — no full forEach over every row per keystroke.
-  if (treeFocusIndex >= 0 && treeFocusIndex < rows.length) rows[treeFocusIndex]?.classList.remove('tree-focus');
   treeFocusIndex = Math.max(0, Math.min(rows.length - 1, index));
-  const el = rows[treeFocusIndex];
-  if (el) { el.classList.add('tree-focus'); scheduleScrollIntoView(el); }
+  // Render the focus class AND scroll in the SAME frame. A fast key-repeat queues many ArrowDowns before a
+  // frame; moving the focus class instantly while the coalesced scroll lags makes the panel jump ~one
+  // viewport (~20 rows) at a time. Coalescing both keeps focus + scroll in lockstep so it scrolls smoothly.
+  scheduleTreeFocus();
+}
+var treeFocusRaf = 0;
+function scheduleTreeFocus() {
+  if (treeFocusRaf) return;
+  treeFocusRaf = requestAnimationFrame(function () {
+    treeFocusRaf = 0;
+    const rows = treeRows();
+    if (treeFocusIndex < 0 || treeFocusIndex >= rows.length) return;
+    const el = rows[treeFocusIndex];
+    document.querySelectorAll('.tree-focus').forEach((e) => { if (e !== el) e.classList.remove('tree-focus'); });
+    if (el) { el.classList.add('tree-focus'); el.scrollIntoView({ block: 'nearest', inline: 'nearest' }); }
+  });
 }
 function clearTreeFocus() {
@@ -1171,14 +1228,19 @@ document.addEventListener('keydown', (event) => {
   if (event.key === 'F7') {
     event.preventDefault();
-    if (!document.getElementById('source-viewer')?.classList.contains('hidden')) {
-      const sourceHunk = firstHunkForPath(document.getElementById('source-viewer')?.dataset.openPath || '');
+    const delta = event.shiftKey ? -1 : 1;
+    const sourceViewer = document.getElementById('source-viewer');
+    // Forward F7 from the source view enters the diff at the open file's own hunk, so the reviewer lands
+    // where they were reading. Shift+F7 — and any file with no hunk of its own — falls through to plain
+    // prev/next-change navigation across the whole diff.
+    if (delta > 0 && sourceViewer && !sourceViewer.classList.contains('hidden')) {
+      const sourceHunk = firstHunkForPath(sourceViewer.dataset.openPath || '');
       if (sourceHunk >= 0) {
         setActive(sourceHunk);
         return;
       }
     }
-    next(event.shiftKey ? -1 : 1);
+    next(delta);
   }
 });
@@ -1213,15 +1275,18 @@ document.getElementById('usages')?.addEventListener('click', function (event) {
   if (event.target && event.target.id === 'usages') closeUsages();
 });
-links.forEach((link) => {
-  link.addEventListener('click', (event) => {
-    showDiffView(false);
-    const target = Number(link.dataset.hunk);
-    if (!Number.isNaN(target) && target >= 0 && target < hunkTotal()) {
-      event.preventDefault();
-      setActive(target);
-    }
-  });
+// Delegated (like #files-panel below) so it survives the in-place diff update that re-captures `links`
+// on every watch tick — per-element listeners would be lost on the new nodes, and then Cmd+0 → arrow →
+// Enter (which calls row.click()) would silently do nothing.
+document.getElementById('changes-panel')?.addEventListener('click', (event) => {
+  const link = event.target && event.target.closest ? event.target.closest('.file-link') : null;
+  if (!link) return;
+  showDiffView(false);
+  const target = Number(link.dataset.hunk);
+  if (!Number.isNaN(target) && target >= 0 && target < hunkTotal()) {
+    event.preventDefault();
+    setActive(target);
+  }
 });
 // Delegated so it works whether the tree is inline (small repos) or materialized later (big repos).
@@ -1262,8 +1327,11 @@ if (!REVIEW_LAZY_LOAD) scheduleSymbolIndex(); // non-lazy indexes when idle; laz
 const restored = restoreUiState();
 if (!restored) {
   const initial = location.hash.match(/^#hunk-(\d+)$/);
+  const hasDiff = Boolean(document.querySelector('#diff2html-container .d2h-file-wrapper'));
   if (initial) setActive(Number(initial[1]), false);
-  else if (REVIEW_LAZY_LOAD) showDiffView(false); // big repos: open to the diff (Changes); the source tree stays deferred until the Files tab is opened
+  // Clean tree (nothing to review): open a file (README first) instead of staring at an empty diff.
+  else if (!hasDiff) openDefaultSourceFile();
+  else if (REVIEW_LAZY_LOAD) showDiffView(false); // big repos with changes: open to the diff (Changes); the source tree stays deferred until the Files tab is opened
   else openDefaultSourceFile();
 }
 initSourceTreeFolds();
@@ -1476,11 +1544,32 @@ function setDiffCursor(path, side, rowIndex, column, reveal) {
   var col = Math.max(0, Math.min(column, diffLineText(rows[ri]).length));
   diffCursor = { path: path, side: side, rowIndex: ri, column: col };
   diffSelectionAnchor = null; // any direct caret placement (click/F7/Cmd-arrow) drops the selection; Shift+Arrow re-sets it
-  renderDiffCaret();
-  applyDiffSelection();
-  if (reveal) scheduleScrollIntoView(diffRowAt(wrapper, side, ri));
+  if (reveal) {
+    // Render the caret AND scroll in the SAME animation frame. A fast key-repeat queues several ArrowDowns
+    // before one frame; rendering the caret immediately (while the coalesced scroll lags) would push it many
+    // rows past the viewport, then the view would snap ~one viewport at a time. Coalescing both keeps the
+    // caret and scroll in lockstep, so holding ArrowDown scrolls smoothly instead of jumping every ~15 lines.
+    scheduleDiffReveal(wrapper, side, ri);
+  } else {
+    renderDiffCaret();
+    applyDiffSelection();
+  }
   recordNav(navEntryOf('diff'));
 }
+var diffRevealRaf = 0, diffRevealTarget = null;
+function scheduleDiffReveal(wrapper, side, ri) {
+  diffRevealTarget = { wrapper: wrapper, side: side, ri: ri };
+  if (diffRevealRaf) return;
+  diffRevealRaf = requestAnimationFrame(function () {
+    diffRevealRaf = 0;
+    var t = diffRevealTarget; diffRevealTarget = null;
+    renderDiffCaret();
+    applyDiffSelection();
+    if (!t) return;
+    var row = diffRowAt(t.wrapper, t.side, t.ri);
+    if (row && row.scrollIntoView) { try { row.scrollIntoView({ block: 'nearest', inline: 'nearest' }); } catch (x) {} }
+  });
+}
 function navEntryOf(kind) {
   if (kind === 'diff') {
     if (!diffCursor) return null;
@@ -1639,6 +1728,52 @@ function handleDiffCaretKey(event) {
 // ===== Review comments: questions ("?") and change-requests (">") =====
 // (COMMENTS_KEY / reviewComments / commentSeq / composerState are declared near the top of the script)
+// Bottom-left, non-blocking toast stack; each toast auto-dismisses. Used to tell the user when a file
+// change made some comments untrackable (they were removed).
+function showToast(message) {
+  var stack = document.getElementById('mc-toasts');
+  if (!stack) { stack = document.createElement('div'); stack.id = 'mc-toasts'; document.body.appendChild(stack); }
+  var el = document.createElement('div');
+  el.className = 'mc-toast';
+  el.textContent = message;
+  stack.appendChild(el);
+  requestAnimationFrame(function () { el.classList.add('show'); });
+  setTimeout(function () {
+    el.classList.add('hide');
+    setTimeout(function () { if (el.parentNode) el.parentNode.removeChild(el); }, 300);
+  }, 4500);
+}
+// When a file changes, follow each comment to its snapshot line (c.code) in the new content: same line if
+// unchanged, else the nearest exact match of that line. If the line can't be found the change is too large
+// to trust — drop the comment and toast. Files whose content isn't loaded yet (lazy) are skipped here and
+// reconciled once loadSourceData brings the content in.
+function remapComments() {
+  if (!reviewComments.length) return;
+  var dropped = [], moved = 0;
+  reviewComments = reviewComments.filter(function (c) {
+    var file = sourceByPath.get(c.path);
+    if (!file || !file.embedded || typeof file.content !== 'string' || !file.content) return true;
+    var code = c.code == null ? '' : String(c.code);
+    if (!code.trim()) return true;
+    var lines = file.content.split(/\r?\n/);
+    if (lines[c.line - 1] === code) return true;
+    var best = -1, bestDist = Infinity;
+    for (var i = 0; i < lines.length; i++) {
+      if (lines[i] === code) { var d = Math.abs(i - (c.line - 1)); if (d < bestDist) { bestDist = d; best = i; } }
+    }
+    if (best >= 0) { if (c.line !== best + 1) moved++; c.line = best + 1; return true; }
+    dropped.push(c);
+    return false;
+  });
+  if (!dropped.length && !moved) return; // nothing changed — skip the save/re-render
+  saveComments();
+  var byPath = {};
+  dropped.forEach(function (c) { byPath[c.path] = (byPath[c.path] || 0) + 1; });
+  Object.keys(byPath).forEach(function (p) {
+    showToast(t('toast.commentsDropped').replace('{n}', byPath[p]).replace('{file}', String(p).split('/').pop()));
+  });
+  refreshComments();
+}
 function saveComments() {
   persistSave(COMMENTS_KEY, reviewComments);
 }
@@ -1689,14 +1824,16 @@ function currentCommentTarget() {
       var f = Math.min(sa, sb), t = Math.max(sa, sb);
       return { path: viewerCursor.path, line: t + 1, code: selText, from: f + 1, to: t + 1, side: null };
     }
-    return { path: viewerCursor.path, line: viewerCursor.lineIndex + 1, code: '', from: null, to: null, side: null };
+    var scaretFile = sourceByPath.get(viewerCursor.path);
+    var scaretCode = (scaretFile && typeof scaretFile.content === 'string') ? (scaretFile.content.split(/\r?\n/)[viewerCursor.lineIndex] || '') : '';
+    return { path: viewerCursor.path, line: viewerCursor.lineIndex + 1, code: scaretCode, from: null, to: null, side: null };
   }
   // Diff view: prefer the explicit diff caret when there is no text selection.
   if (!hasSel && diffCursor && isDiffViewVisible()) {
     var dwrap = diffWrapperByPath(diffCursor.path);
     var drow = dwrap ? diffRowAt(dwrap, diffCursor.side, diffCursor.rowIndex) : null;
     var dline = drow ? diffLineNumber(drow) : null;
-    if (dline != null) return { path: diffCursor.path, line: dline, code: '', from: null, to: null, side: null };
+    if (dline != null) return { path: diffCursor.path, line: dline, code: diffLineText(drow) || '', from: null, to: null, side: null };
   }
   // Diff view with a selection (or click): anchor at the LAST line so the composer drops BELOW the
   // drag; capture the selected code + line span (used to keep the drag highlighted via .mc-sel-line).
@@ -1729,6 +1866,13 @@ function currentCommentTarget() {
   return { path: path, line: toLine, code: hasSel ? selText : '', from: hasSel ? Math.min(fromLine, toLine) : null, to: hasSel ? Math.max(fromLine, toLine) : null, side: side };
 }
+// "live_trading_engine.py:424" (or ":420–424" for a multi-line drag) — shown in the composer head so the
+// reviewer always sees WHICH file + line(s) a comment targets instead of a bare, context-free box.
+function composerTargetLabel(s) {
+  var base = (s.path || '').split('/').pop() || s.path || '';
+  var loc = (s.from != null && s.to != null && s.from !== s.to) ? (s.from + '–' + s.to) : String(s.line);
+  return base + ':' + loc;
+}
 function threadHtml(path, line) {
   var html = '';
   commentsAt(path, line).forEach(function (c) {
@@ -1740,7 +1884,7 @@ function threadHtml(path, line) {
   if (composerState && composerState.path === path && composerState.line === line) {
     var ph = composerState.kind === 'q' ? t('composer.question') : t('composer.changeRequest');
     html += '<div class="mc-card mc-' + composerState.kind + ' mc-composer">'
-      + '<div class="mc-card-head"><span class="mc-kind">' + commentKindLabel(composerState.kind) + '</span></div>'
+      + '<div class="mc-card-head"><span class="mc-kind">' + commentKindLabel(composerState.kind) + '</span><span class="mc-target" title="' + escapeHtml(composerState.path || '') + '">' + escapeHtml(composerTargetLabel(composerState)) + '</span></div>'
       + '<textarea class="mc-input" rows="3" placeholder="' + escapeHtml(ph) + '"></textarea>'
       + '<div class="mc-actions"><button type="button" class="mc-btn mc-save">' + escapeHtml(t('composer.save')) + '</button>'
       + '<button type="button" class="mc-btn mc-ghost mc-cancel">' + escapeHtml(t('composer.cancel')) + '</button>'
@@ -1853,6 +1997,18 @@ function refreshComments() {
   if (isSourceViewerVisible()) renderSourceComments();
   renderCommentBadges();
   applyCommentSelectionHighlight();
+  // Keep body.mc-composing (which hides the file caret) tied to the ACTUAL on-screen composer, not just
+  // composerState. Leaving the composer by any path other than save/cancel (opening another file, switching
+  // views) would otherwise leave the class stuck and hide EVERY caret — making arrow navigation and
+  // comment-box selection look dead. This single sync point covers all refreshComments callers.
+  var visibleComposer = false;
+  var composerInputs = document.querySelectorAll('.mc-composer .mc-input');
+  for (var ci = 0; ci < composerInputs.length; ci++) {
+    if (composerInputs[ci].closest('#diff-view') && !isDiffViewVisible()) continue;
+    if (composerInputs[ci].closest('#source-viewer') && !isSourceViewerVisible()) continue;
+    visibleComposer = true; break;
+  }
+  document.body.classList.toggle('mc-composing', visibleComposer);
   if (composerState) {
     var composerFocusTries = 0;
     var tryFocusComposer = function () {
@@ -1881,7 +2037,8 @@ function openComposer(kind) {
   // Keep the dragged code visibly highlighted via the .mc-sel-line class (applyCommentSelectionHighlight),
   // and clear the native selection so its highlight doesn't bleed into the composer/cards below it.
   try { var psel = window.getSelection(); if (psel) psel.removeAllRanges(); } catch (e) {}
-  refreshComments();
+  refreshComments(); // refreshComments syncs body.mc-composing from the on-screen composer
 }
 function closeComposer() {
   if (!composerState) return;
@@ -1932,6 +2089,79 @@ function saveMergePrompt(kind, text) {
   persistSave(mergePromptsKey, saved);
 }
+// Reusable custom dropdown (keyboard + mouse). options: [{ label, onSelect }]. First item is pre-selected;
+// Arrow keys move, Enter chooses, Esc / click-outside dismiss. Replaces native <select>/menus everywhere.
+function showCustomDropdown(x, y, options) {
+  var existing = document.getElementById('mc-dropdown');
+  if (existing) existing.remove();
+  var dd = document.createElement('div');
+  dd.id = 'mc-dropdown';
+  dd.className = 'mc-dropdown';
+  var active = 0;
+  function setActive(i) { active = i; for (var j = 0; j < dd.children.length; j++) dd.children[j].classList.toggle('active', j === i); }
+  function close() { dd.remove(); document.removeEventListener('keydown', onKey, true); document.removeEventListener('mousedown', onOutside, true); }
+  function onKey(e) {
+    if (e.key === 'ArrowDown') { e.preventDefault(); e.stopPropagation(); setActive(Math.min(active + 1, options.length - 1)); }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); e.stopPropagation(); setActive(Math.max(active - 1, 0)); }
+    else if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); var o = options[active]; close(); if (o) o.onSelect(); }
+    else if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); close(); }
+  }
+  function onOutside(e) { if (!dd.contains(e.target)) close(); }
+  options.forEach(function (opt, i) {
+    var item = document.createElement('button');
+    item.type = 'button';
+    item.className = 'mc-dropdown-item' + (i === 0 ? ' active' : '');
+    item.textContent = opt.label;
+    item.addEventListener('click', function () { close(); opt.onSelect(); });
+    item.addEventListener('mousemove', function () { setActive(i); });
+    dd.appendChild(item);
+  });
+  dd.style.left = Math.round(x) + 'px';
+  dd.style.top = Math.round(y) + 'px';
+  document.body.appendChild(dd);
+  document.addEventListener('keydown', onKey, true);
+  document.addEventListener('mousedown', onOutside, true);
+}
+// Map a char range in the merged textarea back to the comment seq(s) it covers. Each comment is a
+// "### path:line" block; the caret's block (or every block a selection spans) identifies the comment(s).
+function mergedCommentSeqs(kind, start, end) {
+  var items = reviewComments.filter(function (c) { return c.kind === kind; });
+  var text = buildMergedText(kind);
+  var lines = text.split(String.fromCharCode(10));
+  var seqs = [], pos = 0, idx = -1;
+  for (var i = 0; i < lines.length; i++) {
+    var lineStart = pos, lineEnd = pos + lines[i].length;
+    if (lines[i].indexOf('### ') === 0) idx++;
+    if (idx >= 0 && idx < items.length && lineEnd >= start && lineStart <= end) {
+      var s = items[idx].seq;
+      if (seqs.indexOf(s) < 0) seqs.push(s);
+    }
+    pos = lineEnd + 1;
+  }
+  return seqs;
+}
+function navigateToComment(seq) {
+  var c = reviewComments.find(function (x) { return x.seq === seq; });
+  if (!c) return;
+  openSourceFile(c.path);
+  requestAnimationFrame(function () { setSourceCursor(c.path, Math.max(0, (c.line || 1) - 1), 0, true, -1); });
+}
+// Move the merged-view caret to the next (dir=1) / previous (dir=-1) "### path:line" header and center it,
+// so Opt+Arrow steps comment-by-comment in the merged view.
+function jumpMergedComment(area, dir) {
+  var text = area.value;
+  var headers = [], pos = 0;
+  text.split('\n').forEach(function (ln) { if (ln.indexOf('### ') === 0) headers.push(pos); pos += ln.length + 1; });
+  if (!headers.length) return;
+  var cur = area.selectionStart;
+  var target;
+  if (dir > 0) { target = headers.find(function (h) { return h > cur; }); if (target == null) target = headers[headers.length - 1]; }
+  else { var before = headers.filter(function (h) { return h < cur; }); target = before.length ? before[before.length - 1] : headers[0]; }
+  area.selectionStart = area.selectionEnd = target;
+  var lineNum = text.slice(0, target).split('\n').length - 1;
+  var lineH = parseFloat(getComputedStyle(area).lineHeight) || 18;
+  area.scrollTop = Math.max(0, lineNum * lineH - area.clientHeight / 2);
+}
 function buildMergedText(kind) {
   var items = reviewComments.filter(function (c) { return c.kind === kind; });
   var nl = String.fromCharCode(10);
@@ -1969,8 +2199,44 @@ function openMergedView(kind) {
   closeBtn.textContent = t('merged.close');
   var area = document.createElement('textarea');
   area.className = 'mc-modal-text';
-  area.readOnly = true;
+  // NOT readOnly: a readOnly textarea hides the caret in Chromium, yet we need it VISIBLE so the user sees
+  // which comment Opt+Enter / Opt+Arrow will target. Block every edit via beforeinput instead — read-only in
+  // effect while the caret and selection stay fully interactive.
   area.value = buildMergedText(kind);
+  area.addEventListener('beforeinput', function (e) { e.preventDefault(); });
+  // Opt/Alt+Enter on the merged text: a custom dropdown for the comment under the caret — "Go to comment"
+  // + "Remove" for a single caret; "Remove" only for a drag/select-all (can't navigate to many at once).
+  // Removing here calls deleteComment(), which re-syncs the on-screen comment boxes via refreshComments.
+  area.addEventListener('keydown', function (e) {
+    // Opt/Alt + Arrow steps the caret to the next/previous comment block so you can move comment-to-comment
+    // and act on each with Opt+Enter, without hand-scrolling.
+    if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+      e.preventDefault();
+      e.stopPropagation();
+      jumpMergedComment(area, e.key === 'ArrowDown' ? 1 : -1);
+      return;
+    }
+    if (!e.altKey || (e.key !== 'Enter' && e.code !== 'Enter')) return;
+    e.preventDefault();
+    e.stopPropagation();
+    var seqs = mergedCommentSeqs(kind, area.selectionStart, area.selectionEnd);
+    if (!seqs.length) return;
+    var rect = area.getBoundingClientRect();
+    var x = rect.left + 24, y = rect.top + 48;
+    var rerender = function () {
+      if (!reviewComments.filter(function (c) { return c.kind === kind; }).length) { modal.remove(); return; }
+      area.value = buildMergedText(kind);
+    };
+    if (area.selectionStart !== area.selectionEnd || seqs.length > 1) {
+      showCustomDropdown(x, y, [{ label: t('dropdown.remove'), onSelect: function () { seqs.forEach(deleteComment); rerender(); } }]);
+    } else {
+      var seq = seqs[0];
+      showCustomDropdown(x, y, [
+        { label: t('dropdown.navigate'), onSelect: function () { modal.remove(); navigateToComment(seq); } },
+        { label: t('dropdown.remove'), onSelect: function () { deleteComment(seq); rerender(); } },
+      ]);
+    }
+  });
   closeBtn.addEventListener('click', function () { modal.remove(); });
   // Terminal send (Electron, terminal open): close the modal and hand off to pane-pick mode ON the
   // terminal — the chosen pane is highlighted, the rest dimmed, arrows change the choice, Enter sends.
@@ -2314,12 +2580,21 @@ refreshComments();
     }
   }
   function toggle() { setOpen(!isOpen()); }
+  // The keyboard shortcut is "focus-first": when the terminal is visible but focus is elsewhere, the first
+  // press just moves focus INTO the terminal; only when it already owns focus does another press toggle it
+  // closed. (The footer button stays a plain toggle — a mouse click should open/close in one step.)
+  function toggleOrFocus() {
+    if (!isOpen()) { setOpen(true); return; } // setOpen(true) also focuses the active pane
+    var ae = document.activeElement;
+    if (ae && panel.contains(ae)) { setOpen(false); return; } // focus already in the terminal → close
+    if (active) { try { active.term.focus(); } catch (e) {} } // visible but unfocused → just grab focus
+  }
   if (toggleBtn) toggleBtn.addEventListener('click', toggle);
   if (closeBtn) closeBtn.addEventListener('click', function () { setOpen(false); });
   // Toggle (Ctrl+`/Alt+F12) and split (Cmd+D) arrive from the Terminal menu accelerators (app-main),
   // because Chromium swallows Cmd+D before a renderer keydown would ever see it.
-  if (window.monacoriMenu && typeof window.monacoriMenu.onTerminalToggle === 'function') window.monacoriMenu.onTerminalToggle(toggle);
+  if (window.monacoriMenu && typeof window.monacoriMenu.onTerminalToggle === 'function') window.monacoriMenu.onTerminalToggle(toggleOrFocus);
   if (window.monacoriMenu && typeof window.monacoriMenu.onTerminalSplit === 'function') window.monacoriMenu.onTerminalSplit(split);
   if (window.monacoriMenu && typeof window.monacoriMenu.onTerminalPaneFocus === 'function') window.monacoriMenu.onTerminalPaneFocus(focusPaneByDelta);
   if (window.monacoriMenu && typeof window.monacoriMenu.onTerminalPaneRename === 'function') window.monacoriMenu.onTerminalPaneRename(function () { renamePane(active); });
@@ -2546,23 +2821,28 @@ if (window.monacoriMenu && typeof window.monacoriMenu.onCloseTab === 'function')
   if (resetBtn) resetBtn.addEventListener('click', function () { saveMergePrompt('q', ''); saveMergePrompt('c', ''); fill(); flash(); });
   // Language: live-switch the whole UI (no reload). Persist, re-apply the static chrome, then re-render
   // any currently-shown dynamic text (open composer / merged modal / index status) so it follows too.
-  var langSel = document.getElementById('settings-language');
-  if (langSel) {
-    langSel.value = locale;
-    langSel.addEventListener('change', function () {
-      var next = langSel.value === 'ko' ? 'ko' : 'en';
+  langSelectRef = setupCustomSelect('settings-language',
+    function () { return [{ value: 'en', label: 'English' }, { value: 'ko', label: '한국어' }]; },
+    function () { return locale; },
+    function (next) {
       if (next === locale) return;
       locale = next;
       persistSave(LOCALE_KEY, locale);
       applyI18n();
-      // Merge-prompt placeholders are locale-dependent defaults; refresh them while the panel is open.
-      fill();
-      // Re-render dynamic, currently-visible text in the new locale.
+      fill(); // merge-prompt placeholders are locale-dependent defaults
       try { if (typeof refreshComments === 'function') refreshComments(); } catch (e) {}
       var mergedModal = document.getElementById('mc-modal');
       if (mergedModal) { var mk = mergedModal.dataset.kind || 'q'; mergedModal.remove(); openMergedView(mk); }
     });
-  }
+  themeSelectRef = setupCustomSelect('settings-theme',
+    function () { return [{ value: 'dark', label: t('theme.dark') }, { value: 'light', label: t('theme.light') }]; },
+    function () { return theme; },
+    function (next) {
+      if (next === theme) return;
+      theme = next;
+      persistSave(THEME_KEY, theme);
+      applyTheme();
+    });
 })();
 function setTab(name) {
@@ -2707,6 +2987,7 @@ function applyDiffUpdate(u) {
   diffBootDone = false;
   sourceLoaded = !REVIEW_LAZY_LOAD; // lazyLoad: re-fetch source content on next use
   sourceLoading = false;
+  sourceBodyPath = null; // the new build may have changed the open file's content — force a body re-render on next open
   symbolIndex = null;
   if (REVIEW_LAZY) { setupLazyDiff(); setTimeout(function () { diffBootDone = true; }, 0); }
   else { prepareDiff2HtmlHunks(); diffBootDone = true; }
@@ -2716,6 +2997,7 @@ function applyDiffUpdate(u) {
   applyI18n();
   populateHttpEnvSelect();
   initSourceTreeFolds();
+  remapComments(); // follow/drop comments whose anchor line moved or vanished in the new build
   refreshComments();
   // 5) Best-effort restore of what the user was looking at.
@@ -2785,7 +3067,14 @@ function updateTreeVisibility(root, query) {
 }
 function openDefaultSourceFile() {
+  const isReadme = (candidate) => /^readme(\.|$)/i.test(candidate.name || '');
+  const depthOf = (candidate) => (candidate.path || '').split('/').length;
+  // Prefer the TOP-MOST README (root before any nested one), not just the first match in tree order.
+  const rootReadme = sourceFiles
+    .filter((candidate) => candidate.embedded && isReadme(candidate))
+    .sort((a, b) => depthOf(a) - depthOf(b))[0];
   const file = sourceFiles.find((candidate) => candidate.changed && candidate.embedded)
+    || rootReadme // top-most README when nothing changed
     || sourceFiles.find((candidate) => candidate.embedded)
     || sourceFiles.find((candidate) => candidate.changed)
     || sourceFiles[0];
@@ -2948,20 +3237,46 @@ function setSourceCursor(path, lineIndex, column, shouldReveal = false, targetLi
   // Fast path: the file is already on screen and only the caret moved. Re-rendering the whole
   // file on every keystroke blocks the main thread on large files, so patch just the previous
   // and new caret lines in place instead.
+  // sourceBodyPath (the file actually painted in the body) must match too — dataset.openPath/viewerCursor
+  // are metadata that can be set before the body repaints (lazy fetch in flight, fast file switch, watch
+  // refresh), so without this the caret patches a STALE body and one file's content shows under another's
+  // breadcrumb. On mismatch we fall through to openSourceFile, which re-renders the body for `path`.
   const sameFileOpen = Boolean(viewer && viewer.dataset.openPath === path && !viewer.classList.contains('hidden')
-    && prev && prev.path === path && !isHttpFile(path));
+    && prev && prev.path === path && !isHttpFile(path) && sourceBodyPath === path);
   viewerCursor = { path, lineIndex: boundedLine, column: boundedColumn, targetLine };
   if (sameFileOpen) {
-    updateSourceCaret(prev, lines, file.language || 'text');
+    // Coalesce caret render + scroll into ONE frame on reveal (ArrowDown) so a fast key-repeat doesn't run
+    // the caret several rows ahead of the lagging (rAF) scroll and snap ~one viewport at a time ("stutter
+    // every ~26 lines"). Click (no reveal) stays instant.
+    if (shouldReveal) scheduleSourceReveal(prev);
+    else updateSourceCaret(prev, lines, file.language || 'text');
   } else {
     const shouldSwitch = !viewer || viewer.dataset.openPath !== path || viewer.classList.contains('hidden');
     openSourceFile(path, shouldSwitch);
+    if (shouldReveal) scheduleScrollIntoView(document.querySelector('.source-row.cursor-line'));
   }
-  if (shouldReveal) scheduleScrollIntoView(document.querySelector('.source-row.cursor-line'));
   recordNav(navEntryOf('source'));
 }
+var sourceRevealRaf = 0, sourceRevealPrev = null;
+function scheduleSourceReveal(prev) {
+  // First prev of a coalesced burst wins: a fast ArrowDown updates viewerCursor many times before the frame
+  // fires; render the caret once (first prev -> final viewerCursor) and scroll in the SAME frame so caret and
+  // scroll stay locked together instead of the scroll snapping a viewport behind.
+  if (!sourceRevealRaf) sourceRevealPrev = prev;
+  if (sourceRevealRaf) return;
+  sourceRevealRaf = requestAnimationFrame(function () {
+    sourceRevealRaf = 0;
+    var p = sourceRevealPrev; sourceRevealPrev = null;
+    var f = sourceByPath.get(viewerCursor.path);
+    if (!f || !f.embedded) return;
+    var lines = f.content.split(/\r?\n/);
+    updateSourceCaret(p, lines, f.language || 'text');
+    var cl = document.querySelector('.source-row.cursor-line');
+    if (cl && cl.scrollIntoView) { try { cl.scrollIntoView({ block: 'nearest', inline: 'nearest' }); } catch (x) {} }
+  });
+}
 // Move the caret by patching only the affected line cells, never the whole <table>. This keeps
 // large files responsive (no full re-highlight per keystroke) and, because the new caret line is
@@ -3399,17 +3714,21 @@ function startSymbolIndex() {
 function setIndexProgress(done, total) {
   var el = document.getElementById('index-status');
   var bar = document.getElementById('index-progress');
-  if (!el) return;
-  if (!total || done >= total) {
-    el.textContent = (total || 0) + ' ' + t('status.indexed');
-    if (bar) bar.classList.add('hidden');
-    return;
+  var foot = document.getElementById('footer-progress');
+  var running = Boolean(total) && done < total;
+  var pct = running ? Math.round(done / total * 100) + '%' : '0%';
+  if (el) {
+    el.textContent = running ? (t('status.indexing') + ' ' + done + '/' + total + '…') : ((total || 0) + ' ' + t('status.indexed'));
   }
-  el.textContent = t('status.indexing') + ' ' + done + '/' + total + '…';
   if (bar) {
-    bar.classList.remove('hidden');
-    var fill = bar.firstElementChild;
-    if (fill) fill.style.width = Math.round(done / total * 100) + '%';
+    bar.classList.toggle('hidden', !running);
+    if (running && bar.firstElementChild) bar.firstElementChild.style.width = pct;
+  }
+  // The same signal, mirrored as a thin bar pinned under the version block at the bottom of the
+  // sidebar — so background work (indexing) is visible even when the toolbar status is out of view.
+  if (foot) {
+    foot.classList.toggle('hidden', !running);
+    if (foot.firstElementChild) foot.firstElementChild.style.width = pct;
   }
 }
 function wordAtDiffCaret() {
@@ -3530,12 +3849,16 @@ function cycleSourceTab(dir) {
 function openSourceFile(path, shouldSwitch = true) {
   const file = sourceByPath.get(path);
   if (!file) return;
+  // Switching to another file abandons any in-progress comment elsewhere; closeComposer() clears
+  // composerState and (via refreshComments) drops body.mc-composing so no caret stays hidden.
+  if (composerState && composerState.path !== path) closeComposer();
   addSourceTab(path);
   renderSourceTabs(path);
   // lazy-LOAD: source content not fetched yet -> show a loading state; loadSourceData re-opens it.
   if (REVIEW_LAZY_LOAD && !sourceLoaded && file.embedded) {
     pendingSourceOpen = { path: path, shouldSwitch: shouldSwitch };
     loadSourceData();
+    sourceBodyPath = null; // body shows a loading placeholder, not this path's content yet
     document.getElementById('source-viewer').dataset.openPath = path;
     sourceLinks.forEach((link) => link.classList.toggle('active', link.dataset.sourceFile === path));
     renderBreadcrumb(document.getElementById('source-title'), path);
@@ -3548,6 +3871,7 @@ function openSourceFile(path, shouldSwitch = true) {
     return;
   }
   rememberRecent(path, 'source');
+  sourceBodyPath = path; // past the lazy guard — every branch below paints THIS path's body (text/image/not-embedded)
   document.getElementById('source-viewer').dataset.openPath = path;
   sourceLinks.forEach((link) => link.classList.toggle('active', link.dataset.sourceFile === path));
   renderBreadcrumb(document.getElementById('source-title'), path);
@@ -3705,6 +4029,34 @@ function renderInlineMd(text) {
   return s;
 }
+// Render HTML embedded in Markdown (GitHub-style) safely. Parse in an INERT <template> — scripts don't
+// run and resources don't load there — then strip dangerous tags + on*/javascript: attributes before
+// returning the HTML. The result is injected via innerHTML, so only the sanitized subset survives.
+function sanitizeHtml(html) {
+  var tpl = document.createElement('template');
+  tpl.innerHTML = String(html);
+  var BAD = { SCRIPT: 1, STYLE: 1, IFRAME: 1, OBJECT: 1, EMBED: 1, LINK: 1, META: 1, BASE: 1, FORM: 1, INPUT: 1, BUTTON: 1, TEXTAREA: 1, SELECT: 1, NOSCRIPT: 1 };
+  var walk = function (node) {
+    var kids = Array.prototype.slice.call(node.children || []);
+    for (var k = 0; k < kids.length; k++) {
+      var el = kids[k];
+      if (BAD[el.tagName]) { el.parentNode.removeChild(el); continue; }
+      var attrs = Array.prototype.slice.call(el.attributes);
+      for (var a = 0; a < attrs.length; a++) {
+        var nm = attrs[a].name.toLowerCase();
+        if (nm.indexOf('on') === 0) { el.removeAttribute(attrs[a].name); continue; }
+        if ((nm === 'href' || nm === 'src' || nm === 'xlink:href' || nm === 'srcset')
+          && /^\s*(javascript|vbscript|data:text\/html):/i.test(attrs[a].value || '')) {
+          el.removeAttribute(attrs[a].name);
+        }
+      }
+      walk(el);
+    }
+  };
+  walk(tpl.content);
+  return tpl.innerHTML;
+}
 function mdFenceLang(lang) {
   var l = (lang || '').toLowerCase();
   if (l === 'js' || l === 'jsx' || l === 'ts' || l === 'tsx') return 'typescript';
@@ -3740,6 +4092,16 @@ function renderMarkdownBlocks(content) {
       continue;
     }
     if (/^\s*$/.test(line)) { i++; continue; }
+    // Raw HTML block (GitHub-flavored Markdown): a line beginning with a tag. Accumulate to the next
+    // blank line and render it as sanitized HTML, so README markup (<div>, <img>, <table>, …) shows
+    // rendered instead of as escaped text.
+    if (/^\s*<(\/?[a-zA-Z][\w-]*|!--)/.test(line)) {
+      var hbuf = [line];
+      i++;
+      while (i < lines.length && !/^\s*$/.test(lines[i])) { hbuf.push(lines[i]); i++; }
+      blocks.push({ line: start, html: '<div class="md-html">' + sanitizeHtml(hbuf.join('\n')) + '</div>' });
+      continue;
+    }
     var h = line.match(/^\s{0,3}(#{1,6})\s+(.*)$/);
     if (h) { var lv = h[1].length; blocks.push({ line: start, html: '<h' + lv + ' class="md-h md-h' + lv + '">' + renderInlineMd(h[2].replace(/\s+#+\s*$/, '')) + '</h' + lv + '>' }); i++; continue; }
     if (/^\s*([-*_])\s*(\1\s*){2,}$/.test(line)) { blocks.push({ line: start, html: '<hr class="md-hr">' }); i++; continue; }
@@ -4167,6 +4529,14 @@ function highlightLine(text, language) {
       index = end;
       continue;
     }
+    if (char === '@') {
+      const decorator = rest.match(/^@[A-Za-z_$][\w$.]*/);
+      if (decorator) {
+        output += '<span class="tok-decorator">' + escapeHtml(decorator[0]) + '</span>';
+        index += decorator[0].length;
+        continue;
+      }
+    }
     const number = rest.match(/^\b\d+(?:\.\d+)?\b/);
     if (number) {
       output += '<span class="tok-number">' + escapeHtml(number[0]) + '</span>';
@@ -4176,8 +4546,11 @@ function highlightLine(text, language) {
     const identifier = rest.match(/^[A-Za-z_$][\w$-]*/);
     if (identifier) {
       const value = identifier[0];
+      const trailing = text.slice(index + value.length);
       if (keywords.has(value)) output += '<span class="tok-keyword">' + escapeHtml(value) + '</span>';
       else if (literals.has(value)) output += '<span class="tok-literal">' + escapeHtml(value) + '</span>';
+      else if (/^\s*\(/.test(trailing)) output += '<span class="tok-function">' + escapeHtml(value) + '</span>';
+      else if (/^[A-Z]/.test(value) && /[a-z]/.test(value)) output += '<span class="tok-type">' + escapeHtml(value) + '</span>';
       else output += escapeHtml(value);
       index += value.length;
       continue;