feat: merge external annotation edits safely

media/annotationPanel/app.js

@@ -344,7 +344,7 @@
     if (problem.code === 'segment') return t('boxPathBadSegment', { segment: problem.bad || '' });
     if (problem.code === 'duplicate') return t('boxPathExists');
     if (problem.code === 'rule') return t('boxPathRuleMissing');
-    return t('generateBoxFailed');
+    return t('positionPathFailed');
   }
 
   function syncAnnotationList() {
@@ -546,8 +546,9 @@
     document.getElementById('templateModeBtn').classList.toggle('active', annotationMode === 'template');
     document.getElementById('rectModeBtn').classList.toggle('active', annotationMode === 'rect');
     document.getElementById('pointModeBtn').classList.toggle('active', annotationMode === 'point');
-    document.getElementById('generateBoxBtn').style.display = annotationMode === 'template' ? '' : 'none';
-    document.getElementById('drawBtn').textContent = pointMode ? 'Point (' + keybindings.drawBbox.toUpperCase() + ')' : t('drawBbox');
+    document.getElementById('drawBtn').textContent = pointMode
+      ? t('pointTool', { key: keybindings.drawBbox.toUpperCase() })
+      : t('drawBbox');
     document.getElementById('bboxWRow').style.display = pointMode ? 'none' : '';
     document.getElementById('bboxHRow').style.display = pointMode ? 'none' : '';
     updateUndoRedoButtons();
@@ -562,7 +563,10 @@
     const wInput = document.getElementById('bboxW');
     const hInput = document.getElementById('bboxH');
     const ok = document.getElementById('bboxOk');
-    document.getElementById('bboxTitle').textContent = category ? (pointMode ? 'Edit point' : t('editBboxTitle')) : (pointMode ? 'New point' : t('newBboxTitle'));
+    document.getElementById('bboxTitle').textContent = category
+      ? (pointMode ? t('editPointTitle') : t('editBboxTitle'))
+      : (pointMode ? t('newPointTitle') : t('newBboxTitle'));
+    document.getElementById('bboxCatLabel').textContent = isPositionMode() ? t('generatePath') + ':' : t('categoryLabel');
     catInput.value = category;
     catInput.placeholder = isPositionMode() ? t('generatePathPlaceholder') : t('categoryLabel');
     xInput.value = x;
@@ -779,10 +783,10 @@
   function pasteClipboardText(text) {
     if (!img || toolMode !== 'none' || modeLoading) return;
     const payload = parseClipboardPayload(text);
-    if (!payload) { pasteStatus('Clipboard is not a valid normalized coordinate tuple.'); return; }
+    if (!payload) { pasteStatus(t('clipboardInvalid')); return; }
     const zeroSize = payload.box.w === 0 && payload.box.h === 0;
     if (zeroSize && annotationMode !== 'point') {
-      pasteStatus('Zero-size coordinates can only be pasted in Point mode.');
+      pasteStatus(t('clipboardPointOnly'));
       return;
     }
     let box = payload.box;
@@ -1012,30 +1016,6 @@
     offsetX = px - ix * scale; offsetY = py - iy * scale; recalcOffset(); e.preventDefault(); paint();
   }, { passive:false });
 
-  function openGenerateBox() {
-    if (annotationMode !== 'template') return;
-    const choices = document.getElementById('generateChoices'); choices.replaceChildren();
-    const selected = new Set(selectedList());
-    annotations.forEach((ann, index) => {
-      const label = document.createElement('label'); label.className = 'annotation-row';
-      const input = document.createElement('input'); input.type = 'checkbox'; input.checked = selected.size === 0 || selected.has(index); input.dataset.index = String(index);
-      const text = document.createElement('span'); text.textContent = ann.category; label.append(input, text); choices.append(label);
-    });
-    const seedAnn = annotations[selectedIdx] || annotations[0];
-    const seed = seedAnn?.category || 'region';
-    document.getElementById('generatePath').value = 'screen.' + String(seed).replace(/[^A-Za-z0-9_]/g, '_');
-    document.getElementById('generateError').textContent = '';
-    document.getElementById('generateModal').classList.add('visible');
-  }
-
-  function refreshGeneratePathState() {
-    const input = document.getElementById('generatePath');
-    const problem = pathProblem(input.value) || pathOccupied(input.value, null);
-    document.getElementById('generateError').textContent = problem ? pathMessage(problem) : '';
-    document.getElementById('generateOk').disabled = !!problem;
-    return problem;
-  }
-
   function navigate(delta) {
     if (!imageData) return;
     const target = imageData.currentIndex + delta;
@@ -1049,10 +1029,6 @@
 
   document.addEventListener('keydown', (e) => {
     if (document.getElementById('bboxModal').classList.contains('visible')) return;
-    if (document.getElementById('generateModal').classList.contains('visible')) {
-      if (e.key === 'Enter') { e.preventDefault(); document.getElementById('generateOk').click(); }
-      return;
-    }
     if (matchKeybinding(e, keybindings.modeTemplate)) { e.preventDefault(); requestAnnotationMode('template'); return; }
     if (matchKeybinding(e, keybindings.modeRect)) { e.preventDefault(); requestAnnotationMode('rect'); return; }
     if (matchKeybinding(e, keybindings.modePoint)) { e.preventDefault(); requestAnnotationMode('point'); return; }
@@ -1107,31 +1083,26 @@
     annotations.forEach(a => { if (!categories.has(a.category)) hidden.add(a.category); });
     listSignature=''; paint();
   };
-  document.getElementById('generateBoxBtn').onclick = openGenerateBox;
-  document.getElementById('generateCancel').onclick = () => document.getElementById('generateModal').classList.remove('visible');
-  document.getElementById('generatePath').oninput = refreshGeneratePathState;
-  document.getElementById('generateOk').onclick = () => {
-    if (refreshGeneratePathState()) return;
-    const chosen = [];
-    document.querySelectorAll('#generateChoices input').forEach(input => { if (input.checked) chosen.push(annotations[Number(input.dataset.index)]); });
-    if (!chosen.length) { document.getElementById('generateError').textContent = t('generateNeedSelection'); return; }
-    vscode.postMessage({ type:'generateBox', path:document.getElementById('generatePath').value.trim(), boxes:chosen.map(a=>({x:a.x,y:a.y,w:a.w,h:a.h})) });
-  };
 
   function updateStaticText() {
-    document.getElementById('bboxCatLabel').textContent = t('categoryLabel');
+    document.getElementById('annotationModeGroup').setAttribute('aria-label', t('annotationModeLabel'));
+    document.getElementById('templateModeBtn').textContent = t('modeTemplate');
+    document.getElementById('rectModeBtn').textContent = t('modeRect');
+    document.getElementById('pointModeBtn').textContent = t('modePoint');
+    document.getElementById('sharedHistoryLabel').textContent = t('sharedHistory');
+    document.getElementById('sharedHistoryWrap').title = t('sharedHistoryTooltip');
+    document.getElementById('coordPreferenceWrap').title = t('coordPreferenceTooltip');
+    document.getElementById('bboxCatLabel').textContent = isPositionMode() ? t('generatePath') + ':' : t('categoryLabel');
+    document.getElementById('bboxWLabel').textContent = t('widthLabel');
+    document.getElementById('bboxHLabel').textContent = t('heightLabel');
     document.getElementById('bboxCancel').textContent = t('cancel');
+    document.getElementById('bboxOk').textContent = t('confirm');
     document.getElementById('coordBtn').textContent = t('copyCoords');
     document.getElementById('deleteBtn').textContent = t('deleteMode');
     document.getElementById('annotationListTitle').textContent = t('annotationListTitle');
     document.getElementById('showAllBtn').textContent = t('showAllAnnotations');
     document.getElementById('hideAllBtn').textContent = t('hideAllAnnotations');
     document.getElementById('onlyCurrentBtn').textContent = t('showOnlyCurrent');
-    document.getElementById('generateBoxBtn').textContent = t('generateBox');
-    document.getElementById('generateTitle').textContent = t('generateBoxTitle');
-    document.getElementById('generatePathLabel').textContent = t('generatePath');
-    document.getElementById('generateCancel').textContent = t('cancel');
-    document.getElementById('generateOk').textContent = t('ok');
     document.getElementById('prevBtn').title = t('prevImage');
     document.getElementById('nextBtn').title = t('nextImage');
     document.getElementById('emptyMsg').textContent = t('noImageLoaded');
@@ -1158,11 +1129,6 @@
       pasteClipboardText(msg.text || '');
       return;
     }
-    if (msg.type === 'generateBoxResult') {
-      if (msg.ok) document.getElementById('generateModal').classList.remove('visible');
-      else document.getElementById('generateError').textContent = pathMessage(msg.error === 'duplicate' ? {code:'duplicate'} : {code:msg.error || 'unknown'});
-      return;
-    }
     if (msg.type !== 'load') return;
 
     const incomingMode = msg.annotationMode || annotationMode;
@@ -1182,7 +1148,7 @@
     clearSelection();
     hoveredIdx = -1;
     listSignature = '';
-    updateModeUi();
+    updateStaticText();
 
     const needImageLoad = !img || imageChanged;
     if (msg.imageBase64 && needImageLoad) {
@@ -1207,4 +1173,4 @@
   resize();
   updateStaticText();
   vscode.postMessage({ type:'ready' });
-})();
+})();

media/annotationPanel/conflict.css

@@ -0,0 +1,74 @@
+#conflictCanvas {
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  pointer-events: none;
+}
+
+.conflict-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  max-height: 52%;
+  padding: var(--space-sm);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-container-raised);
+  overflow: hidden;
+}
+
+.conflict-panel[hidden] {
+  display: none;
+}
+
+.conflict-summary {
+  white-space: pre-line;
+  color: var(--text-muted);
+  font-size: var(--font-xs);
+}
+
+.conflict-rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  overflow: auto;
+  min-height: 0;
+}
+
+.conflict-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  padding: var(--space-xs);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-row);
+}
+
+.conflict-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-sm);
+  font-weight: var(--weight-medium);
+}
+
+.conflict-fields {
+  color: var(--text-muted);
+  font-size: var(--font-xs);
+}
+
+.conflict-choice {
+  width: 100%;
+  height: auto;
+  min-height: var(--control-h-sm);
+  padding: var(--space-xs) var(--space-sm);
+  white-space: normal;
+  text-align: left;
+  line-height: 1.35;
+}
+
+.conflict-apply {
+  width: 100%;
+  flex-shrink: 0;
+}