@happy-nut/monacori 0.1.12 → 0.1.14

package/dist/i18n.js

@@ -131,6 +131,7 @@ export const MESSAGES = {
         "merged.close": "Close",
         "dropdown.navigate": "Go to comment",
         "dropdown.remove": "Remove",
+        "toast.commentsDropped": "Removed {n} comment(s) on {file} — the file changed too much to track them",
         "merged.qHeading": "# Questions",
         "merged.cHeading": "# Change requests",
         // Prompt memo (Cmd/Ctrl+Shift+N) — a single freeform Markdown scratchpad with a live split preview.
@@ -262,6 +263,7 @@ export const MESSAGES = {
         "merged.close": "닫기",
         "dropdown.navigate": "코멘트로 이동",
         "dropdown.remove": "지우기",
+        "toast.commentsDropped": "{file}이(가) 변경되어 추적할 수 없는 코멘트 {n}개를 제거했습니다",
         // Structural markers stay English in both locales (the preamble prose below follows the locale).
         "merged.qHeading": "# Questions",
         "merged.cHeading": "# Change requests",

package/dist/render.js

@@ -180,9 +180,9 @@ export function renderDiffHtml(input) {
         '<div id="app-info-status" class="app-info-status" data-i18n="settings.checkingUpdates">Checking for updates…</div>',
         '<button type="button" id="app-info-update" class="plain-button app-info-update hidden" data-i18n="settings.updateRestart">Update &amp; Restart</button>',
         '<label class="settings-label" for="settings-language" data-i18n="settings.language">Language</label>',
-        '<select id="settings-language" class="settings-select"><option value="en">English</option><option value="ko">한국어</option></select>',
+        '<button type="button" id="settings-language" class="settings-select mc-select" data-i18n-aria="settings.language"></button>',
         '<label class="settings-label" for="settings-theme" data-i18n="settings.theme">Theme</label>',
-        '<select id="settings-theme" class="settings-select"><option value="dark" data-i18n="theme.dark">Dark</option><option value="light" data-i18n="theme.light">Light</option></select>',
+        '<button type="button" id="settings-theme" class="settings-select mc-select" data-i18n-aria="settings.theme"></button>',
         '<div class="app-info-keys">' +
             '<div class="app-info-keys-h" data-i18n="settings.kbd.title">Keyboard shortcuts</div>' +
             '<div class="keys-cat" data-i18n="settings.kbd.cat.nav">Navigation</div>' +

package/dist/viewer.client.js

@@ -147,14 +147,36 @@ 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(); } };
+    }), r.top - 4);
+  });
+  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
@@ -167,8 +189,7 @@ var theme = (function () {
 })();
 function applyTheme() {
   document.documentElement.setAttribute('data-theme', theme);
-  var sel = document.getElementById('settings-theme');
-  if (sel) sel.value = theme;
+  if (themeSelectRef) themeSelectRef.render();
 }
 applyTheme();
 let fileStates = JSON.parse(document.getElementById('file-state-data')?.textContent || '[]');
@@ -213,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); }
@@ -1706,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);
 }
@@ -1756,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).
@@ -2021,7 +2091,28 @@ function saveMergePrompt(kind, text) {
 
 // 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) {
+// Approximate the caret's pixel position in the (monospace) merged textarea so the dropdown can open right
+// under it — and flip above when there isn't room below. Returns { x, top (caret line top), below }.
+function mergedCaretXY(area) {
+  var pos = area.selectionStart || 0;
+  var nl = area.value.slice(0, pos).split('\n');
+  var lineNum = nl.length - 1;
+  var col = nl[lineNum].length;
+  var cs = getComputedStyle(area);
+  var lineH = parseFloat(cs.lineHeight) || 18;
+  var rect = area.getBoundingClientRect();
+  var span = document.createElement('span');
+  span.style.cssText = 'position:absolute;visibility:hidden;white-space:pre';
+  span.style.font = cs.font;
+  span.textContent = 'MMMMMMMMMMMMMMMMMMMM';
+  document.body.appendChild(span);
+  var charW = span.getBoundingClientRect().width / 20;
+  span.remove();
+  var caretTop = rect.top + (parseFloat(cs.paddingTop) || 0) + lineNum * lineH - area.scrollTop;
+  var x = Math.min(rect.left + (parseFloat(cs.paddingLeft) || 0) + col * charW, rect.right - 24);
+  return { x: x, top: caretTop, below: caretTop + lineH + 2 };
+}
+function showCustomDropdown(x, y, options, flipTop) {
   var existing = document.getElementById('mc-dropdown');
   if (existing) existing.remove();
   var dd = document.createElement('div');
@@ -2046,9 +2137,16 @@ function showCustomDropdown(x, y, options) {
     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);
+  // Position after measuring: open at (x, y); flip above (flipTop) when it would overflow the bottom,
+  // and nudge in from the right/bottom edges so it never clips offscreen.
+  var ddr = dd.getBoundingClientRect();
+  var top = y, left = x;
+  if (typeof flipTop === 'number' && top + ddr.height > window.innerHeight - 8) top = Math.max(8, flipTop - ddr.height);
+  else if (top + ddr.height > window.innerHeight - 8) top = Math.max(8, window.innerHeight - ddr.height - 8);
+  if (left + ddr.width > window.innerWidth - 8) left = Math.max(8, window.innerWidth - ddr.width - 8);
+  dd.style.left = Math.round(left) + 'px';
+  dd.style.top = Math.round(top) + 'px';
   document.addEventListener('keydown', onKey, true);
   document.addEventListener('mousedown', onOutside, true);
 }
@@ -2151,20 +2249,20 @@ function openMergedView(kind) {
     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 cxy = mergedCaretXY(area);
+    var x = cxy.x, y = cxy.below, flipTop = cxy.top;
     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(); } }]);
+      showCustomDropdown(x, y, [{ label: t('dropdown.remove'), onSelect: function () { seqs.forEach(deleteComment); rerender(); } }], flipTop);
     } 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(); } },
-      ]);
+      ], flipTop);
     }
   });
   closeBtn.addEventListener('click', function () { modal.remove(); });
@@ -2194,12 +2292,12 @@ function openMergedView(kind) {
   document.body.appendChild(modal);
   // Focus the send button (Enter starts pane-pick) when present, else the read-only text. Electron
   // async-restores focus to <body>, so retry briefly (same as the composer).
-  var modalFocusTarget = sendBtn || area;
+  var modalFocusTarget = area; // focus the text (not the send button) so the caret is visible and Opt+Arrow/Enter work; Send-to-terminal is a click
   var modalFocusTries = 0;
   var tryFocusModal = function () {
     if (!document.getElementById('mc-modal')) return true;
     if (document.activeElement === modalFocusTarget) return true;
-    try { modalFocusTarget.focus(); if (modalFocusTarget === area) modalFocusTarget.select(); } catch (e) {}
+    try { modalFocusTarget.focus(); modalFocusTarget.selectionStart = modalFocusTarget.selectionEnd = 0; } catch (e) {}
     return document.activeElement === modalFocusTarget;
   };
   if (!tryFocusModal()) {
@@ -2751,35 +2849,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); }
     });
-  }
-  // Theme: flip data-theme on <html> live (no reload) and persist the choice.
-  var themeSel = document.getElementById('settings-theme');
-  if (themeSel) {
-    themeSel.value = theme;
-    themeSel.addEventListener('change', function () {
-      var next = themeSel.value === 'light' ? 'light' : 'dark';
+  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) {
@@ -2934,6 +3025,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.

package/dist/viewer.css

@@ -262,6 +262,10 @@ body {
   font: 12px/1.55 ui-sans-serif, system-ui, sans-serif;
 }
 .settings-select:focus { outline: none; border-color: var(--active); }
+/* The settings dropdowns are buttons (custom dropdown), not native <select> — style them to read like one. */
+.settings-select.mc-select { text-align: left; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-width: 130px; }
+.settings-select.mc-select::after { content: '▾'; margin-left: auto; opacity: 0.55; }
+.settings-select.mc-select:hover { border-color: var(--active); }
 .settings-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
 .settings-saved { font-size: 12px; color: var(--active); }
 .app-info-keys-h { font-weight: 600; color: var(--text); margin-bottom: 8px; }
@@ -856,9 +860,13 @@ body.mc-composing .source-row.cursor-line .num { color: inherit; }
 .mc-modal-head span { margin-right: auto; }
 .mc-modal-text { width: 100%; height: 100%; box-sizing: border-box; resize: none; border: 0; padding: 12px; background: var(--bg); color: var(--text); caret-color: var(--text); font: 12px/1.55 Monaco, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
 .mc-modal-text:focus { outline: none; }
-.mc-dropdown { position: fixed; z-index: 70; min-width: 150px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); padding: 4px; }
-.mc-dropdown-item { display: block; width: 100%; text-align: left; padding: 7px 12px; border: 0; background: transparent; color: var(--text); border-radius: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; }
+.mc-dropdown { position: fixed; z-index: 70; min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); padding: 3px; }
+.mc-dropdown-item { display: block; width: 100%; text-align: left; padding: 4px 10px; border: 0; background: transparent; color: var(--text); border-radius: 4px; font-size: 12px; line-height: 1.5; cursor: pointer; white-space: nowrap; }
 .mc-dropdown-item.active, .mc-dropdown-item:hover { background: var(--active); color: #fff; }
+#mc-toasts { position: fixed; left: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; max-width: 360px; pointer-events: none; }
+.mc-toast { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--active); border-radius: 8px; padding: 10px 14px; font-size: 13px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
+.mc-toast.show { opacity: 1; transform: translateY(0); }
+.mc-toast.hide { opacity: 0; transform: translateY(8px); }
 /* Prompt memo: split editor | live Markdown preview inside the standard modal shell. */
 .mc-memo-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; height: 100%; }
 .mc-memo-edit { height: 100%; border-right: 1px solid var(--border); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happy-nut/monacori",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "Validation control plane for AI-generated code changes.",
   "type": "module",
   "repository": {