Share toast, chat #SegID links, fix Cell Library username resolution

- Share button: shows "Link copied to clipboard" toast for 2.5s
- Chat: #SegmentID (5+ digits) becomes a clickable green pill that
  loads the segment in the viewer
- Cell Library: fix username resolution reactivity — replaced Map with
  reactive object so names update after async Supabase lookup
- Chat message parser now detects both URLs and #SegID patterns

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: amyleesterling

src/components/CellLibraryPanel.vue

@@ -195,32 +195,37 @@ const completedCount = computed(() => cells.value.filter(c => c.status === 'comp
 const claimedCount = computed(() => cells.value.filter(c => c.status === 'assigned' || c.status === 'in_progress').length);
 
 // ── User name lookup (for claimed tab) ───────────────────────────────
-const userNameCache = ref<Map<string, string>>(new Map());
+const userNameCache = ref<Record<string, string>>({});
+const pendingResolves = new Set<string>();
 async function resolveUserName(userId: string): Promise<string> {
-  if (userNameCache.value.has(userId)) return userNameCache.value.get(userId)!;
+  if (userNameCache.value[userId]) return userNameCache.value[userId];
+  if (pendingResolves.has(userId)) return userId.slice(0, 8);
+  pendingResolves.add(userId);
   try {
     const { data } = await (await import('../supabase')).default
       .from('users')
-      .select('display_name, email')
+      .select('display_name, middleauth_email')
       .eq('id', userId)
       .single();
-    const name = data?.display_name || data?.email?.split('@')[0] || userId.slice(0, 8);
-    userNameCache.value.set(userId, name);
+    const name = data?.display_name || data?.middleauth_email?.split('@')[0] || userId.slice(0, 8);
+    userNameCache.value = { ...userNameCache.value, [userId]: name };
     return name;
   } catch {
     const fallback = userId.slice(0, 8);
-    userNameCache.value.set(userId, fallback);
+    userNameCache.value = { ...userNameCache.value, [userId]: fallback };
     return fallback;
+  } finally {
+    pendingResolves.delete(userId);
   }
 }
 function getCachedUserName(userId: string): string {
   if (!userId) return '?';
   if (userId === backend.userId) return 'You';
-  if (!userNameCache.value.has(userId)) {
-    resolveUserName(userId); // fire-and-forget
-    return userId.slice(0, 8) + '…';
+  if (!userNameCache.value[userId]) {
+    resolveUserName(userId);
+    return '…';
   }
-  return userNameCache.value.get(userId)!;
+  return userNameCache.value[userId];
 }
 
 // ── Actions ──────────────────────────────────────────────────────────

src/components/ChatPanel.vue

@@ -179,6 +179,34 @@ function send() {
   inputEl.value?.focus();
 }
 
+// ── Load segment from #SegID click ──
+function loadSegment(segRef: string) {
+  const segId = segRef.replace('#', '');
+  try {
+    const viewer = (window as any)['viewer'];
+    if (!viewer) return;
+    // Find segmentation layer and add segment
+    const segLayer = viewer.layerManager?.managedLayers?.find((x: any) => {
+      const layer = x.layer;
+      if (!layer) return false;
+      const cn = layer.constructor?.name || '';
+      return cn.includes('Segmentation') || layer.type === 'segmentation' || x.initialSpecification?.type === 'segmentation';
+    });
+    if (segLayer?.layer) {
+      const groupState = segLayer.layer.displayState?.segmentationGroupState?.value;
+      if (groupState?.visibleSegments) {
+        const { Uint64 } = require('neuroglancer/util/uint64');
+        const seg = Uint64.parseString(segId);
+        if (!groupState.visibleSegments.has(seg)) {
+          groupState.visibleSegments.add(seg);
+        }
+      }
+    }
+  } catch (e) {
+    console.warn('[chat] loadSegment error:', e);
+  }
+}
+
 // ── Scroll handling (inverted scroll) ──
 function handleScroll() {
   const el = scrollContainer.value;
@@ -263,6 +291,7 @@ function toggleCollapse() {
                   <template v-for="(part, pi) in msg.parts" :key="pi">
                     <template v-if="part.type === 'sender'"></template>
                     <a v-else-if="part.type === 'link'" :href="part.text" target="_blank" rel="noopener" class="nge-chat-link">{{ part.text }}</a>
+                    <button v-else-if="part.type === 'segment'" class="nge-chat-seg-link" @click="loadSegment(part.text)" :title="'Load segment ' + part.text.slice(1)">{{ part.text }}</button>
                     <span v-else class="nge-chat-msg-text">{{ part.text }}</span>
                   </template>
                 </div>
@@ -511,6 +540,22 @@ function toggleCollapse() {
 }
 .nge-chat-link:hover { text-decoration: underline; }
 
+.nge-chat-seg-link {
+  background: rgba(0, 220, 120, 0.1);
+  border: 1px solid rgba(0, 220, 120, 0.25);
+  color: #80ffc0;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.nge-chat-seg-link:hover {
+  background: rgba(0, 220, 120, 0.2);
+  border-color: rgba(0, 220, 120, 0.4);
+}
+
 /* System messages */
 .nge-chat-sys {
   font-size: 11px;

src/components/ExtensionBar.vue

@@ -57,12 +57,29 @@ const invalidLogins = computed(() => login.sessions.filter(x => x.status !== und
 
 const {volumes} = useVolumesStore();
 
+const shareCopied = ref(false);
+let shareCopiedTimer: ReturnType<typeof setTimeout> | null = null;
+
 onMounted(() => {
   // Keep Pyr icon in top-left (don't overwrite with CaveLogo)
   document.addEventListener('nge:open-profile', ((e: CustomEvent) => {
     profileUserId.value = e.detail?.userId || null;
     showProfile.value = true;
   }) as EventListener);
+
+  // Detect Share button click → show "Link copied" toast
+  const topBar = document.getElementById('insertNGTopBar');
+  if (topBar) {
+    topBar.addEventListener('click', (e) => {
+      const target = e.target as HTMLElement;
+      const shareBtn = target.closest('[title*="hare"], [class*="share" i]');
+      if (shareBtn) {
+        if (shareCopiedTimer) clearTimeout(shareCopiedTimer);
+        shareCopied.value = true;
+        shareCopiedTimer = setTimeout(() => { shareCopied.value = false; }, 2500);
+      }
+    });
+  }
 });
 
 const statsStore = useUserStatsStore();
@@ -233,6 +250,9 @@ function activateTool(toolType: 'multicut' | 'merge') {
       </a>
     </div>
     <div id="insertNGTopBar" class="flex-fill"></div>
+    <transition name="nge-share-toast">
+      <div v-if="shareCopied" class="nge-share-toast">Link copied to clipboard</div>
+    </transition>
     <button v-if="volumes.length" @click="showModal = true">Volumes ({{ volumes.length }})</button>
     <div v-if="login.sessions.length > 0 && stats.currentStreak > 0"
          class="nge-streak-chip" title="Your current editing streak">
@@ -453,6 +473,30 @@ function activateTool(toolType: 'multicut' | 'merge') {
 }
 .nge-pyr-logo:hover { opacity: 1; }
 
+/* ── Share toast ── */
+.nge-share-toast {
+  position: absolute;
+  top: 44px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(8, 24, 40, 0.94);
+  border: 1px solid rgba(74, 158, 255, 0.3);
+  color: #a0d0ff;
+  padding: 8px 18px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  z-index: 9999;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+}
+.nge-share-toast-enter-active { transition: all 0.25s ease-out; }
+.nge-share-toast-leave-active { transition: all 0.3s ease-in; }
+.nge-share-toast-enter-from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
+.nge-share-toast-leave-to { opacity: 0; transform: translateX(-50%) translateY(-4px); }
+
 .nge-streak-chip {
   display: flex;
   align-items: center;

src/store.ts

@@ -2913,7 +2913,7 @@ export const useVolumesStore = defineStore('volumes', () => {
 // ════════════════════════════════════════════════════════════════════════════════
 
 export interface MessagePart {
-  type: 'text' | 'link' | 'sender';
+  type: 'text' | 'link' | 'sender' | 'segment';
   text: string;
 }
 
@@ -2926,21 +2926,21 @@ export interface ChatMessage {
   parts: MessagePart[];
 }
 
-/** Parse message text into parts (text + auto-detected links) */
+/** Parse message text into parts (text + auto-detected links + #SegID references) */
 function parseMessageParts(name: string, text: string): MessagePart[] {
   const parts: MessagePart[] = [{ type: 'sender', text: name }];
-  // Split on URLs
-  const urlRegex = /(https?:\/\/\S+)/g;
-  const segments = text.split(urlRegex);
+  // Split on URLs and #SegmentID references
+  const tokenRegex = /(https?:\/\/\S+|#\d{5,})/g;
+  const segments = text.split(tokenRegex);
   for (const seg of segments) {
     if (!seg) continue;
-    if (urlRegex.test(seg)) {
+    if (/^https?:\/\//.test(seg)) {
       parts.push({ type: 'link', text: seg });
+    } else if (/^#\d{5,}$/.test(seg)) {
+      parts.push({ type: 'segment', text: seg });
     } else {
       parts.push({ type: 'text', text: seg });
     }
-    // Reset regex lastIndex since we reuse it
-    urlRegex.lastIndex = 0;
   }
   return parts;
 }