Add merge segment ID list and auto-submit to merge bar; shorten post-to-chat

Merge bar now shows scrollable pills with queued segment ID pairs scraped
from neuroglancer's DOM. Added auto-submit checkbox that toggles NG's
native autoSubmit state. Post-to-chat notifications now show only the
title with "check your notifications for details" instead of the full body.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: amyleesterling

src/components/SplitMergeOverlay.vue

@@ -20,6 +20,7 @@ const resultIsSuccess = computed(() => store.resultFlash === 'success');
 const resultIsError = computed(() => store.resultFlash === 'error');
 // Show inline result on bar (merge mode stays open, shows temporary result)
 const hasInlineResult = computed(() => hasResult.value && !store.pendingClose);
+const hasMergeSegments = computed(() => store.mergeSegments.length > 0);
 
 const contextHint = computed(() => {
   if (store.statusMessage) return store.statusMessage;
@@ -62,6 +63,14 @@ function clearPoints() {
   }
 }
 
+/** Toggle NG's native auto-submit checkbox */
+function toggleAutoSubmit() {
+  const mergeEl = document.querySelector('.graphene-merge-segments');
+  if (!mergeEl) return;
+  const checkbox = mergeEl.querySelector('label input[type="checkbox"]') as HTMLInputElement | null;
+  if (checkbox) checkbox.click();
+}
+
 /** Exit the current split/merge tool (cancel the operation). */
 function cancelTool() {
   exitGrapheneTool();
@@ -132,9 +141,22 @@ function cancelTool() {
             MERGE MODE
           </div>
 
+          <!-- Merge segment list (scrollable pills) -->
+          <div v-if="hasMergeSegments" class="nge-smo-merge-list">
+            <div v-for="(pair, i) in store.mergeSegments" :key="i" class="nge-smo-merge-pair">
+              <span class="nge-smo-seg-id">{{ pair[0] }}</span>
+              <span v-if="pair[1]" class="nge-smo-merge-arrow">⇄</span>
+              <span v-if="pair[1]" class="nge-smo-seg-id">{{ pair[1] }}</span>
+            </div>
+          </div>
+
           <div class="nge-smo-hint merge-hint" :class="{ 'error-hint': hasInlineResult && resultIsError }">{{ contextHint }}</div>
 
           <div class="nge-smo-actions" v-if="!isSubmitting">
+            <label class="nge-smo-auto-submit" title="Auto-submit merges when both points are placed" @click.prevent="toggleAutoSubmit">
+              <span class="nge-smo-checkbox" :class="{ checked: store.autoSubmit }">{{ store.autoSubmit ? '☑' : '☐' }}</span>
+              auto-submit
+            </label>
             <span class="nge-smo-key-hint"><kbd>Ctrl+Click</kbd> Set points</span>
             <span class="nge-smo-key-hint"><kbd>Enter</kbd> Submit</span>
             <button class="nge-smo-action-btn cancel-btn" @click="cancelTool" title="Exit merge mode"><kbd>Esc</kbd> Cancel</button>
@@ -169,7 +191,7 @@ function cancelTool() {
   align-items: center;
   gap: 16px;
   padding: 8px 20px;
-  height: 48px;
+  min-height: 48px;
   font-family: 'Inter', 'Roboto', sans-serif;
   font-size: 13px;
   color: #e0e0e0;
@@ -452,6 +474,81 @@ function cancelTool() {
   line-height: 1.4;
 }
 
+/* ── Merge segment list ── */
+.nge-smo-merge-list {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 40%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex-shrink: 1;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 220, 120, 0.3) transparent;
+  padding: 2px 0;
+}
+
+.nge-smo-merge-list::-webkit-scrollbar {
+  height: 3px;
+}
+
+.nge-smo-merge-list::-webkit-scrollbar-thumb {
+  background: rgba(0, 220, 120, 0.3);
+  border-radius: 2px;
+}
+
+.nge-smo-merge-pair {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  flex-shrink: 0;
+  padding: 2px 8px;
+  background: rgba(0, 220, 120, 0.12);
+  border: 1px solid rgba(0, 220, 120, 0.25);
+  border-radius: 4px;
+}
+
+.nge-smo-seg-id {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 10px;
+  color: #90e8c0;
+  white-space: nowrap;
+}
+
+.nge-smo-merge-arrow {
+  color: rgba(0, 220, 120, 0.5);
+  font-size: 10px;
+}
+
+/* ── Auto-submit checkbox ── */
+.nge-smo-auto-submit {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #aaa;
+  font-size: 12px;
+  margin-right: 8px;
+  white-space: nowrap;
+  transition: color 0.15s ease;
+}
+
+.nge-smo-auto-submit:hover {
+  color: #80ffc0;
+}
+
+.nge-smo-checkbox {
+  font-size: 14px;
+  color: #666;
+  transition: color 0.15s ease;
+}
+
+.nge-smo-checkbox.checked {
+  color: #80ffc0;
+  text-shadow: 0 0 6px rgba(0, 220, 120, 0.5);
+}
+
 /* Error hint styling */
 .nge-smo-hint.error-hint {
   color: #ffb0b0;

src/main.ts

@@ -564,10 +564,28 @@ function observeSplitMergeTools() {
       wasMulticutActive = false;
       wasMergeActive = true;
 
-      // Count merge submissions
+      // Count merge submissions and scrape segment IDs
       const submissions = mergeEl.querySelectorAll('.graphene-merge-segments-submission');
       store.mergeSubmissionCount = submissions.length;
 
+      // Scrape segment IDs from each submission pair
+      const segments: string[][] = [];
+      submissions.forEach(sub => {
+        const points = sub.querySelectorAll('.graphene-merge-segments-point');
+        const pair: string[] = [];
+        points.forEach(pt => {
+          // Segment ID is in the text of the widget (first line of the double-line entry)
+          const text = (pt.textContent || '').trim().split('\n')[0].trim();
+          if (text) pair.push(text);
+        });
+        if (pair.length > 0) segments.push(pair);
+      });
+      store.mergeSegments = segments;
+
+      // Scrape auto-submit checkbox state
+      const autoSubmitCheckbox = mergeEl.querySelector('label input[type="checkbox"]') as HTMLInputElement | null;
+      store.autoSubmit = autoSubmitCheckbox?.checked ?? false;
+
       // Scrape per-submission status from .graphene-merge-segments-submission-status
       const statusEls = mergeEl.querySelectorAll('.graphene-merge-segments-submission-status');
       const currentStatuses: string[] = [];

src/store.ts

@@ -1538,6 +1538,10 @@ export const useSplitMergeOverlayStore = defineStore('splitMergeOverlay', () =>
   const redPointCount = ref(0);
   const bluePointCount = ref(0);
   const mergeSubmissionCount = ref(0);
+  /** Scraped merge pairs: each entry is [sinkId, sourceId] or [sinkId] if incomplete */
+  const mergeSegments = ref<string[][]>([]);
+  /** Whether NG's auto-submit checkbox is checked */
+  const autoSubmit = ref(false);
   const submitting = ref(false);
   /** Status message scraped from neuroglancer's tool UI */
   const statusMessage = ref('');
@@ -1559,6 +1563,8 @@ export const useSplitMergeOverlayStore = defineStore('splitMergeOverlay', () =>
         redPointCount.value = 0;
         bluePointCount.value = 0;
         mergeSubmissionCount.value = 0;
+        mergeSegments.value = [];
+        autoSubmit.value = false;
         submitting.value = false;
         statusMessage.value = '';
       }
@@ -1614,7 +1620,7 @@ export const useSplitMergeOverlayStore = defineStore('splitMergeOverlay', () =>
 
   return {
     toolActive, activeGroup, redPointCount, bluePointCount,
-    mergeSubmissionCount, submitting, statusMessage, resultFlash, resultText,
+    mergeSubmissionCount, mergeSegments, autoSubmit, submitting, statusMessage, resultFlash, resultText,
     pendingClose, closingTool,
     setToolState, setActiveGroup, updatePointCounts, setStatusMessage,
     showResult, beginSuccessClose,
@@ -2396,7 +2402,7 @@ export const useProofreadingBackendStore = defineStore('proofreadingBackend', ()
       try {
         const chatStore = useChatStore();
         if (chatStore.connected) {
-          chatStore.sendMessage(`📢 ${data.title}: ${data.body.slice(0, 200)}${data.body.length > 200 ? '...' : ''}`);
+          chatStore.sendMessage(`📢 ${data.title} — check your notifications for details!`);
         }
       } catch (e) { console.warn('[admin] post_to_chat failed:', e); }
     }