fix(ui): mesh unread badges persist seen-state; more button + animated route modal

Unread badges came back on every visit (framework showed a phantom "2"
with nothing new): unreadCounts was memory-only, so each page load
replayed the entire message history as "new". Seen-state now persists
as a per-contact highest-seen-message-id watermark in localStorage
(ids are backend-monotonic across restarts); first run after this
ships seeds the watermark from history so nobody gets a wall of stale
badges. Opening a chat advances and persists the watermark for all
twins of the merged conversation.

The hop-route modal the user asked for is now reachable from a visible
per-message "⋯" button (the transport pill remains clickable too), has
a fallback title/branch for messages that predate transport tracking,
and animates: endpoints and link reveal in sequence, a pulse travels
the link, and relay dots blink in order — all disabled under
prefers-reduced-motion.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

neode-ui/src/stores/mesh.ts

@@ -281,6 +281,27 @@ export const useMeshStore = defineStore('mesh', () => {
 
   // Track unread message counts per peer (contact_id -> count)
   const unreadCounts = ref<Record<number, number>>({})
+  // Durable seen-state: highest message id the user has actually seen, per
+  // contact. Without this, every page load replayed ALL historical received
+  // messages into unreadCounts (the in-memory store starts empty, so every
+  // old message looked "new") — badges came back on every visit. Message ids
+  // are safe watermarks: the backend allocates them monotonically and
+  // restores the counter as max(persisted)+1 across restarts.
+  const LAST_SEEN_KEY = 'archipelago.mesh.last-seen.v1'
+  const lastSeenId = ref<Record<number, number>>(
+    JSON.parse(localStorage.getItem(LAST_SEEN_KEY) || '{}') as Record<number, number>
+  )
+  // First run after this feature ships: treat existing history as seen so
+  // nobody gets a wall of phantom badges for months-old messages.
+  let seedLastSeenFromHistory = localStorage.getItem(LAST_SEEN_KEY) === null
+  function persistLastSeen() {
+    localStorage.setItem(LAST_SEEN_KEY, JSON.stringify(lastSeenId.value))
+  }
+  function advanceLastSeen(contactId: number, msgId: number): boolean {
+    if ((lastSeenId.value[contactId] ?? 0) >= msgId) return false
+    lastSeenId.value[contactId] = msgId
+    return true
+  }
   // Contact ids of the chat currently on screen — ALL twins of the merged
   // conversation, not just the clicked row's id, since the unread badge sums
   // across every underlying contact_id (a message can land on any twin).
@@ -455,19 +476,35 @@ export const useMeshStore = defineStore('mesh', () => {
         method: 'mesh.messages',
         params: limit ? { limit } : {},
       })
-      // Detect new incoming messages and increment unread counts
+      if (seedLastSeenFromHistory && res.messages.length > 0) {
+        for (const m of res.messages) {
+          if (m.direction === 'received') advanceLastSeen(m.peer_contact_id, m.id)
+        }
+        persistLastSeen()
+        seedLastSeenFromHistory = false
+      }
+      // Detect new incoming messages and increment unread counts. "New" means
+      // past the durable seen watermark, not merely absent from the in-memory
+      // store — otherwise a page reload re-badges the whole history.
       const newMsgs = res.messages.filter(
-        m => m.direction === 'received' && !messages.value.some(existing => existing.id === m.id)
+        m =>
+          m.direction === 'received' &&
+          m.id > (lastSeenId.value[m.peer_contact_id] ?? 0) &&
+          !messages.value.some(existing => existing.id === m.id)
       )
+      let seenDirty = false
       for (const msg of newMsgs) {
         // Don't count as unread if we're currently viewing that chat AND the
         // bottom (latest messages) is in view — i.e. the user actually sees it.
         const seenLive =
           viewingChatIds.value.includes(msg.peer_contact_id) && viewingAtBottom.value
-        if (!seenLive) {
+        if (seenLive) {
+          seenDirty = advanceLastSeen(msg.peer_contact_id, msg.id) || seenDirty
+        } else {
           unreadCounts.value[msg.peer_contact_id] = (unreadCounts.value[msg.peer_contact_id] || 0) + 1
         }
       }
+      if (seenDirty) persistLastSeen()
       messages.value = res.messages
       // Extract node positions from coordinate messages
       updateNodePositionsFromMessages(res.messages)
@@ -595,7 +632,17 @@ export const useMeshStore = defineStore('mesh', () => {
   function markChatRead(contactId: number | number[]) {
     const ids = Array.isArray(contactId) ? contactId : [contactId]
     viewingChatIds.value = ids
-    for (const id of ids) delete unreadCounts.value[id]
+    let seenDirty = false
+    for (const id of ids) {
+      delete unreadCounts.value[id]
+      // Persist the watermark so the seen-state survives reloads.
+      for (const m of messages.value) {
+        if (m.direction === 'received' && m.peer_contact_id === id) {
+          seenDirty = advanceLastSeen(id, m.id) || seenDirty
+        }
+      }
+    }
+    if (seenDirty) persistLastSeen()
   }
 
   function clearViewingChat() {

neode-ui/src/views/Mesh.vue

@@ -2344,6 +2344,7 @@ async function downloadAttachment(payload: MeshAttachmentPayload) {
                   <div v-else class="mesh-chat-bubble-text">{{ msg.plaintext }}</div>
                   <div class="mesh-chat-bubble-meta">
                     <span v-if="transportLabel(msg)" class="mesh-chat-transport mesh-chat-transport-clickable" :class="'transport-' + msg.transport" :title="'Delivered over ' + transportLabel(msg) + ' — click for route details'" @click.stop="hopVizMsg = msg">{{ transportLabel(msg) }}</span>
+                    <button class="mesh-chat-more-btn" title="How this message traveled" aria-label="Show message route" @click.stop="hopVizMsg = msg">⋯</button>
                     <span v-if="msg.encrypted" class="mesh-chat-e2e">E2E</span>
                     <span v-if="isEditedMessage(msg) !== null" class="mesh-chat-edited">(edited)</span>
                     <span v-if="msg.delivered && msg.direction === 'sent'" class="mesh-chat-ack">&#x2713;&#x2713;</span>
@@ -2629,7 +2630,7 @@ async function downloadAttachment(payload: MeshAttachmentPayload) {
     <Teleport to="body">
     <div v-if="hopVizMsg" class="mesh-transport-modal-backdrop" @click.self="hopVizMsg = null">
       <div class="glass-card mesh-transport-modal">
-        <h3 class="mesh-transport-title">{{ transportLabel(hopVizMsg) }} route</h3>
+        <h3 class="mesh-transport-title">{{ transportLabel(hopVizMsg) || 'Message' }} route</h3>
         <p class="mesh-transport-sub">
           {{ hopVizMsg.direction === 'sent' ? 'You → ' + (hopVizPeer?.advert_name || hopVizMsg.peer_name || 'peer') : (hopVizPeer?.advert_name || hopVizMsg.peer_name || 'peer') + ' → You' }}
         </p>
@@ -2644,6 +2645,9 @@ async function downloadAttachment(payload: MeshAttachmentPayload) {
           <template v-else-if="hopVizMsg.transport === 'fips'">
             <div class="mesh-hopviz-link">⚡ FIPS overlay · direct peer-to-peer</div>
           </template>
+          <template v-else-if="!hopVizMsg.transport">
+            <div class="mesh-hopviz-link">🛰 transport wasn't recorded for this message</div>
+          </template>
           <template v-else>
             <div class="mesh-hopviz-link">
               📡 {{ hopVizHops() === null || hopVizHops() === 0 ? 'direct radio link' : `${hopVizHops()} hop${hopVizHops() === 1 ? '' : 's'}` }}

neode-ui/src/views/mesh/mesh-styles.css

@@ -595,6 +595,38 @@ select.mesh-bitcoin-input option { background: #1a1a2e; color: rgba(255,255,255,
 .mesh-chat-transport-clickable { cursor: pointer; }
 .mesh-chat-transport-clickable:hover { filter: brightness(1.4); }
 .mesh-hopviz-chain { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 14px 8px; flex-wrap: wrap; }
+/* Animated route reveal: endpoints and link fade/slide in sequence, then a
+   pulse travels the link continuously to show the direction of travel. */
+.mesh-hopviz-chain > * { opacity: 0; animation: mesh-hopviz-appear 0.4s ease forwards; }
+.mesh-hopviz-chain > *:nth-child(1) { animation-delay: 0.05s; }
+.mesh-hopviz-chain > *:nth-child(2) { animation-delay: 0.35s; }
+.mesh-hopviz-chain > *:nth-child(3) { animation-delay: 0.65s; }
+@keyframes mesh-hopviz-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+.mesh-hopviz-link { position: relative; overflow: hidden; }
+.mesh-hopviz-link::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -18%;
+  width: 18%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, rgba(251,146,60,0.95), transparent);
+  animation: mesh-hopviz-travel 1.6s linear infinite;
+  animation-delay: 1s;
+}
+@keyframes mesh-hopviz-travel { from { left: -18%; } to { left: 100%; } }
+.mesh-hopviz-dot { animation: mesh-hopviz-blink 1.6s ease-in-out infinite; }
+.mesh-hopviz-dot:nth-child(2) { animation-delay: 0.25s; }
+.mesh-hopviz-dot:nth-child(3) { animation-delay: 0.5s; }
+.mesh-hopviz-dot:nth-child(4) { animation-delay: 0.75s; }
+.mesh-hopviz-dot:nth-child(5) { animation-delay: 1s; }
+.mesh-hopviz-dot:nth-child(6) { animation-delay: 1.25s; }
+@keyframes mesh-hopviz-blink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .mesh-hopviz-chain > * { animation: none; opacity: 1; }
+  .mesh-hopviz-link::before { animation: none; display: none; }
+  .mesh-hopviz-dot { animation: none; }
+}
 .mesh-hopviz-node { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 72px; }
 .mesh-hopviz-icon { font-size: 1.8rem; }
 .mesh-hopviz-name { font-size: 0.8rem; font-weight: 600; color: #fff; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -604,5 +636,10 @@ select.mesh-bitcoin-input option { background: #1a1a2e; color: rgba(255,255,255,
 .mesh-hopviz-meta { font-size: 0.75rem; color: rgba(255,255,255,0.5); }
 .mesh-hopviz-note { flex-basis: 100%; text-align: center; font-size: 0.68rem; color: rgba(255,255,255,0.35); margin: 2px 0 0; }
 
+/* Per-message "more" button — opens the route/hops modal (same target as the
+   transport pill, but always visible and discoverable). */
+.mesh-chat-more-btn { background: none; border: none; color: rgba(255,255,255,0.45); font-size: 0.9rem; line-height: 1; padding: 0 4px; cursor: pointer; border-radius: 6px; }
+.mesh-chat-more-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
+
 /* Reaction dropdown inside the message action menu */
 .mesh-chat-reaction-dropdown { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; padding-top: 6px; }