malice

public

Star0

Fork 0

Watch0

57 commits 2 branches 0 tags 0 releases4.4 MiB

Commit `668ab5c30531`

tarball

atagen <boss@atagen.co>2026-10-25 03:17 UTC

10 files changed+927-10

mentions: add the Home inbox and saved context reader

Modified file: web/src/App.svelte+49 additions−5 deletions@@ -3,6 +3,7 @@
   import { fade, fly } from 'svelte/transition';
   import LoginPanel from './lib/LoginPanel.svelte';
   import MessageRow from './lib/MessageRow.svelte';
+  import MentionsInbox from './lib/MentionsInbox.svelte';
   import MxcAvatar from './lib/MxcAvatar.svelte';
   import PinButton from './lib/PinButton.svelte';
   import ContextMenu, { type MenuItem } from './lib/ContextMenu.svelte';
@@ -56,6 +57,7 @@
     encryption,
     membersByRoom,
     membersLoading,
+    mentionsSnapshot,
     pushBanner,
     imagePacks,
     resetClientState,
@@ -157,6 +159,7 @@
   let profile: OwnProfile | null = null;
   let profileMxc: string | null = null;
   let selectedSpaceId: string | null = null;
+  let mentionsOpen = false;
   let spaceChildIds: string[] | null = null;
   let spaceChildrenLoading = false;
   let spaceChildrenError: string | null = null;
@@ -300,11 +303,13 @@
     return r.unread_messages + r.unread_mentions;
   }
 
-  function recordRoute(spaceId: string | null, roomId: string | null): void {
+  function recordRoute(spaceId: string | null, roomId: string | null, view?: string): void {
     if (restoringRoute) return;
     const url = new URL(window.location.href);
     url.searchParams.delete('space');
     url.searchParams.delete('room');
+    url.searchParams.delete('view');
+    if (view) url.searchParams.set('view', view);
     if (spaceId) url.searchParams.set('space', spaceId);
     if (roomId) url.searchParams.set('room', roomId);
     const next = `${url.pathname}${url.search}${url.hash}`;
@@ -318,7 +323,9 @@
     const spaceId = url.searchParams.get('space');
     restoringRoute = true;
     try {
-      if (roomId && $rooms.some((room) => room.room_id === roomId && !room.space)) {
+      if (url.searchParams.get('view') === 'mentions') {
+        selectMentions();
+      } else if (roomId && $rooms.some((room) => room.room_id === roomId && !room.space)) {
         selectedSpaceId = spaceId && $rooms.some((room) => room.room_id === spaceId && room.space) ? spaceId : null;
         spaceChildrenError = null;
         spaceChildIds = selectedSpaceId ? (await getSpaceChildren(selectedSpaceId)).room_ids ?? [] : null;
@@ -440,6 +447,7 @@
     sidebarOpen = false;
     profile = null;
     profileMxc = null;
+    mentionsOpen = false;
     selectedSpaceId = null;
     spaceChildIds = null;
     spaceChildrenError = null;
@@ -494,6 +502,7 @@
   }
 
   async function selectHome(): Promise<void> {
+    mentionsOpen = false;
     selectedSpaceId = null;
     spaceChildIds = null;
     spaceChildrenError = null;
@@ -502,12 +511,31 @@
     recordRoute(null, null);
   }
 
+  function selectMentions(): void {
+    if ($selectedRoomId && composer.trim()) drafts[$selectedRoomId] = composer;
+    stopTyping();
+    selectedSpaceId = null;
+    spaceChildIds = null;
+    spaceChildrenError = null;
+    spaceChildrenLoading = false;
+    selectedRoomId.set(null);
+    replyingTo = null;
+    editing = null;
+    mentionQuery = null;
+    peeking = null;
+    membersOpen = false;
+    sidebarOpen = false;
+    mentionsOpen = true;
+    recordRoute(null, null, 'mentions');
+  }
+
   function toggleChannelsPane(): void {
     if (window.innerWidth <= 640) sidebarOpen = !sidebarOpen;
     else navFolded.update((v) => !v);
   }
 
   async function selectSpace(spaceId: string): Promise<void> {
+    mentionsOpen = false;
     if ($selectedRoomId && composer.trim()) drafts[$selectedRoomId] = composer;
     stopTyping();
     selectedSpaceId = spaceId;
@@ -543,6 +571,7 @@
   }
 
   async function selectRoom(roomId: string, peek = false): Promise<void> {
+    mentionsOpen = false;
     peeking = peek ? roomId : null;
     if ($selectedRoomId && composer.trim()) drafts[$selectedRoomId] = composer;
     if (roomId === $selectedRoomId && openReady[roomId]) {
@@ -1894,7 +1923,7 @@
             <MxcAvatar mxc={selectedSpace.avatar} label={selectedSpace.name} size={36} shape="rounded" />
           {/if}
           <div class="head-room-text">
-            <h1><EmojiText text={selectedSpace?.name ?? 'Home'} /></h1>
+            <h1><EmojiText text={mentionsOpen ? 'Mentions' : selectedSpace?.name ?? 'Home'} /></h1>
           </div>
         </div>
       </div>
@@ -2068,6 +2097,19 @@
             <span class="room-name"><EmojiText text={$rooms.find((r) => r.room_id === parentId)?.name ?? 'Parent space'} /></span>
           </button>
         {/if}
+        {#if !selectedSpaceId}
+          <ul class="room-list">
+            <li>
+              <button type="button" class="room-row" class:active={mentionsOpen} on:click={selectMentions}>
+                <svg width="26" height="26" viewBox="0 0 26 26" aria-hidden="true"><text x="13" y="19" text-anchor="middle" fill="currentColor" font-size="22">@</text></svg>
+                <span class="room-name">Mentions</span>
+                {#if $mentionsSnapshot && $mentionsSnapshot.unread_count > 0}
+                  <span class="badge mention" aria-label={`${$mentionsSnapshot.unread_count} unread mentions`}>{$mentionsSnapshot.unread_count > 99 ? '99+' : $mentionsSnapshot.unread_count}</span>
+                {/if}
+              </button>
+            </li>
+          </ul>
+        {/if}
         {#if roomsLoading && $rooms.length === 0}
           <p class="side-note">Loading rooms…</p>
         {:else if $rooms.length === 0}
@@ -2264,9 +2306,11 @@
             {/each}
           </div>
         {/if}
-      {#key $selectedRoomId ?? 'home'}
+      {#key mentionsOpen ? 'mentions' : $selectedRoomId ?? 'home'}
       <div class="chat-view">
-      {#if !selectedRoom}
+      {#if mentionsOpen && $sessionUser}
+        <MentionsInbox self={$sessionUser} onLive={(roomId) => void selectRoom(roomId)} />
+      {:else if !selectedRoom}
         <div class="empty" in:fade={{ duration: motionDuration(180) }}>
           <div class="empty-mark" aria-hidden="true">◈</div>
           {#if selectedSpace}

Added file: web/src/lib/ContextTimeline.svelte+226 additions@@ -0,0 +1,226 @@
+<script lang="ts">
+  import { onDestroy, onMount, tick } from 'svelte';
+  import { eventContextAfter, eventContextBefore } from './api';
+  import EmojiText from './EmojiText.svelte';
+  import MessageRow from './MessageRow.svelte';
+  import { formatDay } from './format';
+  import { TimelineViewport } from './timeline-viewport';
+  import type { EventContext, TimelineEvent, TimelineItem } from './types';
+
+  export let context: EventContext;
+  export let roomId: string;
+  export let eventId: string;
+  export let roomName: string;
+  export let self: string | null = null;
+  export let canPaginate = true;
+  export let onClose: () => void;
+  export let onLive: (roomId: string) => void;
+  export let closeLabel = 'Back to mentions';
+
+  let rows: TimelineItem[] = [];
+  let beforeToken: string | null = null;
+  let afterToken: string | null = null;
+  let beforeEnded = false;
+  let afterEnded = false;
+  let beforeExtended = false;
+  let afterExtended = false;
+  let beforeBusy = false;
+  let afterBusy = false;
+  let error = '';
+  let list: HTMLDivElement;
+  let contentNode: HTMLDivElement;
+  let backButton: HTMLButtonElement;
+  let viewport: TimelineViewport | null = null;
+  let observer: ResizeObserver | null = null;
+  let generation = 0;
+  let mounted = false;
+  let alive = true;
+  let identity = '';
+  let centered = false;
+
+  const stable = (event: TimelineEvent) => event.event_id || event.item_id;
+  const key = (item: TimelineItem) => item.kind === 'event'
+    ? `event-${stable(item.event)}`
+    : item.kind === 'day' ? `day-${item.timestamp_ms}` : item.kind;
+  function normalize(items: TimelineItem[]): TimelineItem[] {
+    const seen = new Set<string>();
+    const result: TimelineItem[] = [];
+    for (const item of items) {
+      if (item.kind === 'readMarker' || item.kind === 'start' || item.kind === 'unknown') continue;
+      if (item.kind === 'event') {
+        const eventKey = stable(item.event);
+        if (seen.has(eventKey)) continue;
+        seen.add(eventKey);
+      }
+      result.push(item);
+    }
+    return result;
+  }
+  function merge(base: TimelineItem[], incoming: TimelineItem[]): TimelineItem[] {
+    const events = new Map<string, TimelineItem>();
+    const days = new Map<number, TimelineItem>();
+    for (const item of [...base, ...incoming]) {
+      if (item.kind === 'event') events.set(stable(item.event), item);
+      else if (item.kind === 'day') days.set(item.timestamp_ms, item);
+    }
+    return [...events.values(), ...days.values()].sort((a, b) => timestamp(a) - timestamp(b));
+  }
+  function timestamp(item: TimelineItem): number {
+    if (item.kind === 'event') return item.event.timestamp_ms;
+    if (item.kind === 'day') return item.timestamp_ms;
+    return 0;
+  }
+  function refresh(next: EventContext): void {
+    const nextIdentity = `${roomId}\u0000${eventId}`;
+    if (identity !== nextIdentity) {
+      generation++;
+      identity = nextIdentity;
+      rows = [];
+      beforeToken = null;
+      afterToken = null;
+      beforeEnded = false;
+      afterEnded = false;
+      beforeExtended = false;
+      afterExtended = false;
+      beforeBusy = false;
+      afterBusy = false;
+      error = '';
+      centered = false;
+    }
+    const request = generation;
+    viewport?.capture();
+    const initial = normalize([...next.events_before, ...(next.event ? [next.event] : []), ...next.events_after]);
+    rows = rows.length ? merge(rows, initial) : initial;
+    if (!beforeExtended) {
+      beforeToken = next.start_token;
+      beforeEnded = !beforeToken;
+    }
+    if (!afterExtended) {
+      afterToken = next.end_token;
+      afterEnded = !afterToken;
+    }
+    tick().then(() => {
+      if (!alive || request !== generation) return;
+      viewport?.restore();
+    });
+  }
+  $: if (context) {
+    roomId;
+    eventId;
+    refresh(context);
+  }
+  $: if (mounted && list) {
+    context;
+    const anchorRoom = roomId;
+    const anchorEvent = eventId;
+    tick().then(() => {
+      if (!alive || anchorRoom !== roomId || anchorEvent !== eventId || !context) return;
+      if (!centered) {
+        const target = list.querySelector<HTMLElement>('[data-target="true"]');
+        target?.scrollIntoView({ block: 'center', behavior: 'auto' });
+        centered = true;
+        viewport?.capture();
+      }
+    });
+  }
+
+  async function load(direction: 'before' | 'after'): Promise<void> {
+    const token = direction === 'before' ? beforeToken : afterToken;
+    if (!token || !canPaginate || (direction === 'before' ? beforeBusy : afterBusy)) return;
+    const request = generation;
+    if (direction === 'before') beforeBusy = true;
+    else afterBusy = true;
+    error = '';
+    try {
+      const requestedRoom = roomId;
+      const requestedEvent = eventId;
+      const page = direction === 'before'
+        ? await eventContextBefore(requestedRoom, requestedEvent, token, 20)
+        : await eventContextAfter(requestedRoom, requestedEvent, token, 20);
+      if (!alive || request !== generation || requestedRoom !== roomId || requestedEvent !== eventId) return;
+      viewport?.capture();
+      rows = merge(rows, page.events);
+      if (direction === 'before') {
+        beforeExtended = true;
+        beforeToken = page.next_token;
+        beforeEnded = page.end_reached || !page.next_token;
+      } else {
+        afterExtended = true;
+        afterToken = page.next_token;
+        afterEnded = page.end_reached || !page.next_token;
+      }
+      await tick();
+      if (alive && request === generation) viewport?.restore();
+    } catch (cause) {
+      if (alive && request === generation) error = cause instanceof Error ? cause.message : 'Could not load messages';
+    } finally {
+      if (alive && request === generation) {
+        if (direction === 'before') beforeBusy = false;
+        else afterBusy = false;
+      }
+    }
+  }
+
+  function handleScroll(): void {
+    if (!viewport?.consumeScroll()) viewport?.capture();
+  }
+  onDestroy(() => {
+    alive = false;
+    generation++;
+    observer?.disconnect();
+    viewport?.releaseScroll();
+  });
+  onMount(() => {
+    mounted = true;
+    tick().then(() => {
+      if (!alive || !list) return;
+      viewport = new TimelineViewport(list, roomId);
+      observer = new ResizeObserver(() => viewport?.restore());
+      if (contentNode) observer.observe(contentNode);
+      backButton?.focus();
+    });
+  });
+</script>
+
+<section class="context-timeline">
+  <header>
+    <button bind:this={backButton} onclick={onClose}><EmojiText text={closeLabel} /></button>
+    <strong><EmojiText text={roomName} /></strong>
+    <button disabled={!canPaginate} onclick={() => onLive(roomId)}>Go to current messages</button>
+  </header>
+  {#if error}<div class="error" role="alert"><EmojiText text={error} /></div>{/if}
+  <button class="page-control" disabled={!beforeToken || beforeEnded || beforeBusy || !canPaginate} onclick={() => load('before')}>
+    {beforeBusy ? 'Loading…' : 'Load earlier messages'}
+  </button>
+  <div class="messages" bind:this={list} onscroll={handleScroll}>
+    <div class="content" bind:this={contentNode}>
+      {#each rows as item (key(item))}
+        {#if item.kind === 'day'}
+          <div class="day"><span><EmojiText text={formatDay(item.timestamp_ms)} /></span></div>
+        {:else if item.kind === 'event'}
+          <div class:mentioned={item.event.event_id === eventId} aria-label={item.event.event_id === eventId ? 'Mentioned message' : undefined} data-target={item.event.event_id === eventId ? 'true' : undefined}>
+            <MessageRow itemId={stable(item.event)} event={item.event} showSender={true} reacting={false} onReact={() => {}} readOnly={true} showSent={false} {self} senderAvatar={item.event.sender.avatar} />
+          </div>
+        {/if}
+      {/each}
+    </div>
+  </div>
+  <button class="page-control" disabled={!afterToken || afterEnded || afterBusy || !canPaginate} onclick={() => load('after')}>
+    {afterBusy ? 'Loading…' : 'Load later messages'}
+  </button>
+</section>
+
+<style>
+  .context-timeline { display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; }
+  header { display:flex; align-items:center; gap:.6rem; padding:.5rem; border-bottom:1px solid var(--border); flex-wrap:wrap; }
+  header strong { flex:1; min-width:0; overflow-wrap:anywhere; }
+  button { color:var(--text); background:var(--panel); border:1px solid var(--border); border-radius:.4rem; padding:.4rem .65rem; cursor:pointer; }
+  button:disabled { opacity:.55; cursor:default; }
+  .messages { flex:1; min-height:0; overflow:auto; overflow-anchor:none; padding:.5rem; }
+  .content { min-width:0; }
+  .mentioned { outline:2px solid var(--accent); border-radius:.5rem; }
+  .day { display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.8rem; margin:.75rem 0; }
+  .day::before,.day::after { content:''; height:1px; background:var(--border); flex:1; }
+  .page-control { align-self:center; margin:.4rem; }
+  .error { color:var(--danger); padding:.5rem; overflow-wrap:anywhere; }
+</style>

Added file: web/src/lib/MentionsInbox.svelte+484 additions@@ -0,0 +1,484 @@
+<script lang="ts">
+  import { get } from 'svelte/store';
+  import { onDestroy, onMount, tick } from 'svelte';
+  import { mentionContext, mentionsPage, recoverMentions, retryMentionContext, setMentionsRead, markMentionsReadThrough } from './api';
+  import ContextTimeline from './ContextTimeline.svelte';
+  import EmojiText from './EmojiText.svelte';
+  import MessageRow from './MessageRow.svelte';
+  import { mentionsSnapshot, publishMentionsPage, rooms, sessionUser } from './store';
+  import { TimelineViewport } from './timeline-viewport';
+  import { ApiError } from './transport';
+  import type { TimelineItem } from './types';
+  import { mentionKey } from './mentions-model';
+  import type { MentionEntry, MentionsPage, SavedMentionContext } from './mentions-model';
+
+  export let self: string;
+  export let onLive: (roomId: string) => void;
+
+  let page: MentionsPage | null = null;
+  let entries: MentionEntry[] = [];
+  let selected: MentionEntry | null = null;
+  let saved: SavedMentionContext | null = null;
+  let list: HTMLDivElement;
+  let viewport: TimelineViewport | null = null;
+  let observer: ResizeObserver | null = null;
+  let error = '';
+  let busy = false;
+  let actionBusy = false;
+  let loadingContext = false;
+  let mounted = false;
+  let alive = true;
+  let generation = 0;
+  let contextGeneration = 0;
+  let depth = 1;
+  let pendingRevision = 0;
+  let refreshTimer: ReturnType<typeof setTimeout> | null = null;
+  let renderedAccount = '';
+  let selectedRevision = -1;
+  let contextKey = '';
+  let contextRequest: { key: string; revision: number } | null = null;
+  let queuedContext: MentionEntry | null = null;
+  let pendingExplicitOpen = false;
+  let savedListTop = 0;
+  $: unreadCount = $mentionsSnapshot?.boundary.account === self ? $mentionsSnapshot.unread_count : page?.unread_count ?? 0;
+  $: joinedRooms = new Map($rooms.filter((room) => room.membership === 'Joined').map((room) => [room.room_id, room]));
+  $: selectedRoom = selected ? joinedRooms.get(selected.key.room_id) : undefined;
+  $: contextCanPaginate = !!selectedRoom;
+
+  function itemEvent(item: TimelineItem) {
+    return item.kind === 'event' ? item.event : null;
+  }
+  function roomName(entry: MentionEntry): string {
+    return entry.room_name || joinedRooms.get(entry.key.room_id)?.name || entry.key.room_id;
+  }
+  function reasonLabel(reason: string): string {
+    return reason === 'Direct' ? 'Direct mention' : reason === 'Reply' ? 'Reply' : 'Room mention';
+  }
+  function captureLabel(state: MentionEntry['capture']): string {
+    if (state.kind === 'Failed') return state.message;
+    return state.kind === 'Ready' ? 'Context saved' : state.kind === 'Partial' ? 'Partial context saved' : state.kind === 'Pending' ? 'Saving context' : 'Context unavailable';
+  }
+  function keyOf(entry: MentionEntry): string { return mentionKey(entry.key); }
+  function bindViewport(node: HTMLDivElement) {
+    list = node;
+    viewport?.releaseScroll();
+    observer?.disconnect();
+    node.scrollTop = savedListTop;
+    viewport = new TimelineViewport(node, null);
+    const content = node.querySelector<HTMLElement>('.entry-content');
+    observer = new ResizeObserver(() => viewport?.restore());
+    if (content) observer.observe(content);
+    void tick().then(() => {
+      if (!alive || selected || list !== node) return;
+      node.scrollTop = savedListTop;
+      viewport?.capture();
+    });
+    return {
+      destroy() {
+        if (!selected) savedListTop = node.scrollTop;
+        observer?.disconnect();
+        observer = null;
+        viewport?.releaseScroll();
+        viewport = null;
+      }
+    };
+  }
+  function openContext(entry: MentionEntry): void {
+    if (!selected) savedListTop = list?.scrollTop ?? savedListTop;
+    void loadContext(entry);
+  }
+  function currentAccount(account: string): boolean {
+    return alive && account === self && get(sessionUser) === account;
+  }
+  function captureViewport(): void { viewport?.capture(); }
+  async function restoreViewport(): Promise<void> {
+    await tick();
+    if (alive) viewport?.restore();
+  }
+  async function fetchPage(cursor: string | null): Promise<MentionsPage> {
+    return mentionsPage(cursor, 50);
+  }
+  async function fetchRange(targetDepth: number, request: number, account: string): Promise<void> {
+    busy = true;
+    error = '';
+    const anchorPage = page;
+    const anchorRevision = anchorPage?.revision ?? 0;
+    let succeeded = false;
+    try {
+      const first = await fetchPage(null);
+      if (!currentAccount(account) || request !== generation || first.boundary.account !== account) return;
+      const firstSnapshot = first;
+      const gathered = [...first.entries];
+      let loadedDepth = 1;
+      let cursor = first.next_cursor;
+      let last = first;
+      for (let index = 1; index < targetDepth && cursor; index++) {
+        last = await fetchPage(cursor);
+        if (!currentAccount(account) || request !== generation || last.boundary.account !== account) return;
+        gathered.push(...last.entries);
+        loadedDepth++;
+        cursor = last.next_cursor;
+      }
+      const mirror = get(mentionsSnapshot);
+      if (mirror?.boundary.account === account && mirror.revision > firstSnapshot.revision) {
+        pendingRevision = Math.max(pendingRevision, mirror.revision);
+      }
+      if (firstSnapshot.revision < anchorRevision) return;
+      captureViewport();
+      const unique = new Map<string, MentionEntry>();
+      for (const entry of gathered) unique.set(keyOf(entry), entry);
+      if (mirror?.boundary.account === account) {
+        for (const update of mirror.entries) {
+          const key = keyOf(update);
+          const previous = unique.get(key);
+          if (previous && update.revision >= previous.revision) unique.set(key, update);
+        }
+      }
+      const replacement = [...unique.values()];
+      page = { ...firstSnapshot, next_cursor: last.next_cursor, end_reached: last.end_reached, entries: replacement };
+      entries = replacement;
+      if (selected) {
+        const latestSelected = replacement.find((entry) => keyOf(entry) === keyOf(selected!));
+        if (latestSelected && latestSelected.revision > selected.revision) selected = latestSelected;
+        void loadContext(selected, false);
+      }
+      publishMentionsPage(firstSnapshot);
+      if (pendingRevision <= firstSnapshot.revision) pendingRevision = 0;
+      depth = loadedDepth;
+      succeeded = true;
+      await restoreViewport();
+    } catch (cause) {
+      if (currentAccount(account) && request === generation) error = cause instanceof Error ? cause.message : 'Could not load mentions';
+    } finally {
+      if (currentAccount(account) && request === generation) {
+        busy = false;
+        if (succeeded && pendingRevision > (page?.revision ?? 0)) scheduleRefresh(pendingRevision);
+      }
+    }
+  }
+  function scheduleRefresh(revision: number): void {
+    pendingRevision = Math.max(pendingRevision, revision);
+    if (busy || !mounted) return;
+    if (refreshTimer) clearTimeout(refreshTimer);
+    refreshTimer = setTimeout(() => {
+      refreshTimer = null;
+      if (!alive || busy) return;
+      const request = ++generation;
+      void fetchRange(Math.max(1, depth), request, self);
+    }, 200);
+  }
+  async function loadMore(): Promise<void> {
+    if (!page?.next_cursor || page.end_reached || busy) return;
+    const cursor = page.next_cursor;
+    const request = ++generation;
+    const account = self;
+    busy = true;
+    error = '';
+    let succeeded = false;
+    try {
+      const next = await fetchPage(cursor);
+      if (!currentAccount(account) || request !== generation || next.boundary.account !== account) return;
+      const current = page;
+      if (!current || next.revision < current.revision) return;
+      captureViewport();
+      const unique = new Map(entries.map((entry) => [keyOf(entry), entry]));
+      for (const entry of next.entries) unique.set(keyOf(entry), entry);
+      page = { ...current, next_cursor: next.next_cursor, end_reached: next.end_reached, entries: [...unique.values()] };
+      entries = page.entries;
+      const mirror = get(mentionsSnapshot);
+      if (mirror?.boundary.account === account) {
+        for (const update of mirror.entries) {
+          const key = keyOf(update);
+          const previous = unique.get(key);
+          if (previous && update.revision >= previous.revision) unique.set(key, update);
+        }
+        entries = [...unique.values()];
+        page = { ...page, entries };
+      }
+      depth++;
+      succeeded = true;
+      await restoreViewport();
+    } catch (cause) {
+      if (currentAccount(account) && request === generation) error = cause instanceof Error ? cause.message : 'Could not load mentions';
+    } finally {
+      if (currentAccount(account) && request === generation) {
+        busy = false;
+        if (succeeded && pendingRevision > (page?.revision ?? 0)) scheduleRefresh(pendingRevision);
+      }
+    }
+  }
+  async function loadContext(entry: MentionEntry, explicit = true): Promise<void> {
+    const id = keyOf(entry);
+    if (explicit) pendingExplicitOpen = true;
+    if (contextRequest?.key === id) {
+      if (entry.revision > contextRequest.revision) queuedContext = entry;
+      return;
+    }
+    if (contextKey !== id) {
+      if (!selected) savedListTop = list?.scrollTop ?? savedListTop;
+      saved = null;
+      selectedRevision = -1;
+    }
+    contextKey = id;
+    selectedRevision = entry.revision;
+    selected = entry;
+    loadingContext = true;
+    error = '';
+    const account = self;
+    const request = ++contextGeneration;
+    contextRequest = { key: id, revision: entry.revision };
+    try {
+      const result = await mentionContext(entry.key.room_id, entry.key.event_id);
+      if (!currentAccount(account) || request !== contextGeneration || contextKey !== id || mentionKey(result.key) !== id) return;
+      saved = result;
+      if (pendingExplicitOpen) {
+        pendingExplicitOpen = false;
+        const current = entries.find((item) => keyOf(item) === id);
+        if (current && !current.read) {
+          await setMentionsRead([current.key], true);
+          if (currentAccount(account) && request === contextGeneration) scheduleRefresh(get(mentionsSnapshot)?.revision ?? page?.revision ?? 0);
+        }
+      }
+    } catch (cause) {
+      if (currentAccount(account) && request === contextGeneration) {
+        pendingExplicitOpen = false;
+        if (cause instanceof ApiError && cause.status === 404) {
+          backToList();
+          error = 'This mention is no longer available';
+          scheduleRefresh(page?.revision ?? 0);
+        } else {
+          error = cause instanceof Error ? cause.message : 'Could not load saved context';
+        }
+      }
+    } finally {
+      if (currentAccount(account) && request === contextGeneration) {
+        contextRequest = null;
+        loadingContext = false;
+        const queued = queuedContext;
+        queuedContext = null;
+        if (queued && keyOf(queued) === id && queued.revision !== selectedRevision) void loadContext(queued, false);
+      }
+    }
+  }
+  async function setRead(entry: MentionEntry, read: boolean): Promise<void> {
+    if (actionBusy) return;
+    actionBusy = true;
+    const account = self;
+    try {
+      await setMentionsRead([entry.key], read);
+      if (!currentAccount(account)) return;
+      const mirror = get(mentionsSnapshot);
+      if (mirror?.boundary.account === account) scheduleRefresh(mirror.revision);
+      else scheduleRefresh((page?.revision ?? 0) + 1);
+    } catch (cause) {
+      if (currentAccount(account)) error = cause instanceof Error ? cause.message : 'Could not update mention';
+    } finally {
+      if (currentAccount(account)) actionBusy = false;
+    }
+  }
+  async function markAllRead(): Promise<void> {
+    if (!page || actionBusy) return;
+    actionBusy = true;
+    const account = self;
+    const boundary = page.boundary;
+    try {
+      await markMentionsReadThrough(boundary);
+      if (!currentAccount(account)) return;
+      const mirror = get(mentionsSnapshot);
+      scheduleRefresh(mirror?.boundary.account === account ? mirror.revision : page?.revision ?? 0);
+    } catch (cause) {
+      if (currentAccount(account)) error = cause instanceof Error ? cause.message : 'Could not mark mentions read';
+    } finally {
+      if (currentAccount(account)) actionBusy = false;
+    }
+  }
+  async function recover(): Promise<void> {
+    if (actionBusy) return;
+    actionBusy = true;
+    const account = self;
+    try {
+      await recoverMentions();
+      if (!currentAccount(account)) return;
+      scheduleRefresh(get(mentionsSnapshot)?.revision ?? page?.revision ?? 0);
+    } catch (cause) {
+      if (currentAccount(account)) error = cause instanceof Error ? cause.message : 'Could not recover mention history';
+    } finally {
+      if (currentAccount(account)) actionBusy = false;
+    }
+  }
+  async function retryCapture(): Promise<void> {
+    if (!selected || !selectedRoom || actionBusy || loadingContext) return;
+    actionBusy = true;
+    const request = contextGeneration;
+    const account = self;
+    try {
+      const result = await retryMentionContext(selected.key.room_id, selected.key.event_id);
+      if (!currentAccount(account) || request !== contextGeneration || mentionKey(result.key) !== contextKey) return;
+      saved = result;
+      scheduleRefresh(get(mentionsSnapshot)?.revision ?? page?.revision ?? 0);
+    } catch (cause) {
+      if (currentAccount(account) && request === contextGeneration) error = cause instanceof Error ? cause.message : 'Could not retry context capture';
+    } finally {
+      if (currentAccount(account)) actionBusy = false;
+    }
+  }
+  async function retryEntry(entry: MentionEntry): Promise<void> {
+    if (selected?.revision !== entry.revision || keyOf(selected) !== keyOf(entry)) await loadContext(entry, false);
+    else await tick();
+    await retryCapture();
+  }
+  function backToList(): void {
+    contextGeneration++;
+    contextRequest = null;
+    queuedContext = null;
+    loadingContext = false;
+    pendingExplicitOpen = false;
+    selected = null;
+    saved = null;
+    contextKey = '';
+  }
+
+  const unsubscribe = mentionsSnapshot.subscribe((snapshot) => {
+    if (!snapshot || snapshot.boundary.account !== self) return;
+    if (snapshot.revision < (page?.revision ?? -1)) return;
+    const updated = new Map(snapshot.entries.map((entry) => [keyOf(entry), entry]));
+    if (entries.length) {
+      captureViewport();
+      entries = entries.map((entry) => {
+        const update = updated.get(keyOf(entry));
+        return update && update.revision >= entry.revision ? update : entry;
+      });
+      if (page) page = { ...page, entries };
+      void restoreViewport();
+    }
+    if (selected) {
+      const update = snapshot.entries.find((entry) => keyOf(entry) === keyOf(selected!));
+      if (update && update.revision > selected.revision) selected = update;
+    }
+    if (busy) {
+      pendingRevision = Math.max(pendingRevision, snapshot.revision);
+      return;
+    }
+    if (!page || snapshot.revision > page.revision) scheduleRefresh(snapshot.revision);
+  });
+  $: if (self && self !== renderedAccount) {
+    generation++;
+    contextGeneration++;
+    page = null;
+    entries = [];
+    error = '';
+    selected = null;
+    saved = null;
+    depth = 1;
+    busy = false;
+    actionBusy = false;
+    loadingContext = false;
+    contextRequest = null;
+    queuedContext = null;
+    pendingExplicitOpen = false;
+    pendingRevision = 0;
+    savedListTop = 0;
+    if (refreshTimer) clearTimeout(refreshTimer);
+    renderedAccount = self;
+    if (mounted) void fetchRange(1, generation, self);
+  }
+  $: if (selected && selected.revision !== selectedRevision) void loadContext(selected, false);
+  onMount(() => {
+    mounted = true;
+    if (!page) void fetchRange(1, ++generation, self);
+  });
+  onDestroy(() => {
+    alive = false;
+    generation++;
+    contextGeneration++;
+    unsubscribe();
+    observer?.disconnect();
+    viewport?.releaseScroll();
+    if (refreshTimer) clearTimeout(refreshTimer);
+  });
+</script>
+
+<section class="mentions-inbox">
+  {#if selected}
+    {#if error}<div class="error" role="alert"><EmojiText text={error} /><button disabled={loadingContext} onclick={() => void loadContext(selected!)}>Retry</button></div>{/if}
+    {#if saved?.context}
+      <ContextTimeline context={saved.context} roomId={selected.key.room_id} eventId={selected.key.event_id} roomName={roomName(selected)} {self} canPaginate={contextCanPaginate} onClose={backToList} {onLive} />
+      {#if selected.capture.kind === 'Partial' || selected.capture.kind === 'Failed' || selected.capture.kind === 'Unavailable' || saved.state.kind === 'Partial' || saved.state.kind === 'Failed'}<button class="capture-retry" disabled={!selectedRoom || actionBusy} onclick={retryCapture}>Retry context capture</button>{/if}
+      {#if !contextCanPaginate}<p class="status">This room is no longer joined. Saved context remains available.</p>{/if}
+      {#if saved.state.kind === 'Partial'}<p class="status">This saved context is partial.</p>{/if}
+      {#if saved.state.kind === 'Pending'}<p class="status">Saving context…</p>{/if}
+      {#if saved.state.kind === 'Failed'}<p class="status" role="alert"><EmojiText text={saved.state.message} /></p>{/if}
+    {:else}
+      <header><button onclick={backToList}>Back to mentions</button><strong><EmojiText text={roomName(selected)} /></strong></header>
+      {#if loadingContext}<p class="status">Loading saved context…</p>
+      {:else if saved?.state.kind === 'Failed'}<p class="status" role="alert"><EmojiText text={saved.state.message} /></p>
+      {:else if saved?.state.kind === 'Unavailable'}<p class="status">Saved context is unavailable.</p>
+      {:else if saved?.state.kind === 'Partial'}<p class="status">Saved context is partial and currently unavailable.</p>
+      {:else}<p class="status">Saved context is not available yet.</p>{/if}
+      {@const preview = itemEvent(selected.event)}
+      {#if preview}<MessageRow itemId={preview.item_id} event={preview} showSender={true} reacting={false} onReact={() => {}} readOnly={true} showSent={false} {self} senderAvatar={preview.sender.avatar} />{/if}
+      {#if selected.capture.kind === 'Failed' || selected.capture.kind === 'Partial' || selected.capture.kind === 'Unavailable'}
+        <button disabled={!selectedRoom || actionBusy} onclick={retryCapture}>Retry context capture</button>
+      {/if}
+    {/if}
+  {:else}
+    <header><h2>Mentions {#if page}<span>({unreadCount} unread)</span>{/if}</h2><button disabled={!page || unreadCount === 0 || actionBusy} onclick={markAllRead}>Mark all read</button></header>
+    <details class="coverage">
+      <summary>{page?.coverage.recovering ? 'Recovering mention history…' : 'History coverage'}{#if page?.coverage.incomplete_history} · Incomplete{/if}</summary>
+      <div class="coverage-body">
+        {#if page}
+          {#if page.coverage.recovering}<p>History recovery is in progress.</p>{/if}
+          {#if page.coverage.incomplete_history}<p>Some mention history could not be checked.</p>{/if}
+          {#if page.coverage.truncated}<p>Results are truncated.</p>{/if}
+          {#if page.coverage.historical_supported === false}<p>Historical mention search is unsupported.</p>{/if}
+          {#if page.coverage.unresolved_candidates}<p>{page.coverage.unresolved_candidates} possible mentions could not be resolved.</p>{/if}
+          {#if page.coverage.gaps.length}<p>{page.coverage.gaps.length} history gaps remain.</p>{/if}
+          {#if page.coverage.earliest_timestamp_ms}<p>Oldest observed event from {new Date(page.coverage.earliest_timestamp_ms).toLocaleString()}.</p>{/if}
+          {#each page.coverage.gaps as gap}<p><EmojiText text={gap.room_id ? joinedRooms.get(gap.room_id)?.name ?? gap.room_id : 'Unknown room'} /> · <EmojiText text={gap.reason} /></p>{/each}
+        {:else}<p>Coverage is loading.</p>{/if}
+        <button disabled={actionBusy || page?.coverage.recovering} onclick={recover}>Recover history</button>
+      </div>
+    </details>
+    {#if error}<div class="error" role="alert"><EmojiText text={error} /><button disabled={busy} onclick={() => fetchRange(depth, ++generation, self)}>Retry</button></div>{/if}
+    <div class="entries" use:bindViewport onscroll={() => { if (!viewport?.consumeScroll()) viewport?.capture(); }}>
+      <div class="entry-content">
+      {#each entries as entry (keyOf(entry))}
+        {@const event = itemEvent(entry.event)}
+        <article class:unread={!entry.read}>
+          <div class="entry-head"><button class="room" onclick={() => openContext(entry)}><EmojiText text={roomName(entry)} /></button><time>{new Date(entry.timestamp_ms).toLocaleString()}</time><span>{entry.read ? 'Read' : 'Unread'}</span></div>
+          <div class="labels">{#each entry.reasons as reason}<span>{reasonLabel(reason)}</span>{/each}<span>{captureLabel(entry.capture)}</span>{#if entry.notification_suppressed}<span>Notifications suppressed</span>{/if}</div>
+          {#if event}<MessageRow itemId={keyOf(entry)} {event} showSender={true} reacting={false} onReact={() => {}} readOnly={true} showSent={false} {self} senderAvatar={event.sender.avatar} />{:else}<p>Mention message unavailable</p>{/if}
+          <div class="entry-actions"><button onclick={() => openContext(entry)}>Open saved context</button><button disabled={actionBusy} onclick={() => void setRead(entry, !entry.read)}>{entry.read ? 'Mark unread' : 'Mark read'}</button>{#if entry.capture.kind === 'Failed' || entry.capture.kind === 'Partial' || entry.capture.kind === 'Unavailable'}<button disabled={!joinedRooms.has(entry.key.room_id) || actionBusy} onclick={() => void retryEntry(entry)}>Retry capture</button>{/if}</div>
+        </article>
+      {/each}
+      </div>
+    </div>
+    <footer><button disabled={!page?.next_cursor || page.end_reached || busy} onclick={loadMore}>{busy ? 'Loading…' : 'Load older mentions'}</button></footer>
+    {#if entries.length === 0 && !busy && !error}<p class="status">No mentions yet.</p>{/if}
+  {/if}
+</section>
+
+<style>
+  .mentions-inbox { display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; color:var(--text); }
+  header { display:flex; align-items:center; gap:.6rem; padding:.6rem; border-bottom:1px solid var(--border); }
+  header h2 { flex:1; margin:0; font-size:1rem; }
+  header h2 span { color:var(--muted); font-size:.85em; }
+  button { color:var(--text); background:var(--panel); border:1px solid var(--border); border-radius:.4rem; padding:.4rem .65rem; cursor:pointer; }
+  button:disabled { opacity:.55; cursor:default; }
+  .entries { flex:1; min-height:0; overflow:auto; overflow-anchor:none; padding:.5rem; }
+  article { border:1px solid var(--border); border-radius:.6rem; padding:.5rem; margin-bottom:.6rem; }
+  article.unread { border-color:var(--accent); }
+  .entry-head,.entry-actions,.labels { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
+  .entry-head .room { font-weight:600; }
+  .entry-head time,.entry-head span { color:var(--muted); font-size:.8rem; }
+  .entry-head time { margin-left:auto; }
+  .labels { margin:.35rem 0; color:var(--muted); font-size:.78rem; }
+  .labels span { border:1px solid var(--border); border-radius:1rem; padding:.1rem .4rem; }
+  .entry-actions { justify-content:flex-end; margin-top:.4rem; }
+  footer { display:flex; justify-content:center; padding:.45rem; }
+  .coverage { padding:.55rem .75rem; background:var(--panel); border-bottom:1px solid var(--border); }
+  .coverage-body { max-height:min(15rem, 35vh); overflow:auto; }
+  .coverage p,.status { margin:.25rem 0; color:var(--muted); }
+  .error { display:flex; align-items:center; gap:.5rem; padding:.5rem; color:var(--danger); }
+  .capture-retry { align-self:flex-start; margin:.4rem; }
+</style>

Modified file: web/src/lib/MessageRow.svelte+6 additions−3 deletions@@ -30,6 +30,7 @@
   export let onEdit: ((eventId: string, body: string) => void) | null = null;
   export let editing = false;
   export let showSent = true;
+  export let readOnly = false;
   export let self: string | null = null;
   export let onUser: ((userId: string, x: number, y: number, menu: boolean) => void) | null = null;
   export let onCloneSticker: ((eventId: string, body: string, x: number, y: number) => void) | null = null;
@@ -110,7 +111,7 @@
   }
 
   function toggleSelected(e: MouseEvent) {
-    if (!interactive || (e.target as Element).closest('a, button, input, video, audio, .picker-pop')) return;
+    if (readOnly || !interactive || (e.target as Element).closest('a, button, input, video, audio, .picker-pop')) return;
     selected = !selected;
   }
 
@@ -263,7 +264,7 @@
   bind:this={row}
   on:click={toggleSelected}
 >
-  {#if interactive && event.event_id}
+  {#if !readOnly && interactive && event.event_id}
     <div class="actions" role="toolbar" aria-label={`Actions for message from ${displayName}`}>
       {#each quickReactions as r (r.key)}
         {@const label = r.shortcode ? `:${r.shortcode}:` : r.key}
@@ -341,6 +342,7 @@
     <button
       type="button"
       class="user-hit"
+      disabled={!onUser}
       tabindex="-1"
       aria-hidden="true"
       on:click|stopPropagation={(ev) => openUser(ev, false)}
@@ -365,6 +367,7 @@
         <button
           type="button"
           class="sender"
+          disabled={!onUser}
           style={`color:hsl(${senderHue(event.sender.user_id)} 70% var(--name-lightness))`}
           on:click|stopPropagation={(ev) => openUser(ev, false)}
           on:contextmenu|preventDefault|stopPropagation={(ev) => openUser(ev, true)}
@@ -432,7 +435,7 @@
             class="reaction"
             class:mine={r.own}
             aria-label={`${r.shortcode ? `:${r.shortcode}:` : r.key.startsWith('mxc://') ? 'custom emote' : r.key}, ${r.count} reaction${r.count === 1 ? '' : 's'}`}
-            disabled={!event.event_id || reacting}
+            disabled={readOnly || !event.event_id || reacting}
             on:click={() => event.event_id && onReact(event.event_id, r.key)}
           >
             {#if r.image}

Modified file: web/src/lib/api.ts+9 additions@@ -2,6 +2,9 @@
 // this build was compiled for, hosted (fetch + SSE) or on-device (worker).
 import type { EventContext, EventContextPage, MemberSummary, RoomSummary } from './types';
 import type { Emote } from './emotes';
+import type { MentionKey, MentionsBoundary, MentionsPage, SavedMentionContext } from './mentions-model';
+export { mentionKey, parseMentionsPage, parseSavedMentionContext, parseMentionsUpdate } from './mentions-model';
+export type { MentionKey, MentionReason, MentionCaptureState, MentionEntry, MentionCoverage, MentionGap, MentionsBoundary, MentionsPage, SavedMentionContext, MentionsUpdate } from './mentions-model';
 import { formatBody } from './markdown';
 import { mentionedUserIds, type Mention } from './mentions';
 import { HttpTransport } from './transport-http';
@@ -55,6 +58,12 @@ export const eventContextBefore = (room_id: string, event_id: string, from: stri
   transport.eventContextBefore(room_id, event_id, from, limit);
 export const eventContextAfter = (room_id: string, event_id: string, from: string, limit?: number): Promise<EventContextPage> =>
   transport.eventContextAfter(room_id, event_id, from, limit);
+export const mentionsPage = (cursor: string | null = null, limit = 50): Promise<MentionsPage> => transport.mentionsPage(cursor, limit);
+export const mentionContext = (room_id: string, event_id: string): Promise<SavedMentionContext> => transport.mentionContext(room_id, event_id);
+export const retryMentionContext = (room_id: string, event_id: string): Promise<SavedMentionContext> => transport.retryMentionContext(room_id, event_id);
+export const setMentionsRead = (keys: MentionKey[], read: boolean) => transport.setMentionsRead(keys, read);
+export const markMentionsReadThrough = (boundary: MentionsBoundary) => transport.markMentionsReadThrough(boundary);
+export const recoverMentions = () => transport.recoverMentions();
 export const setTyping = (room_id: string, typing: boolean) => transport.setTyping(room_id, typing);
 export const getAccountData = (eventType: string) => transport.getAccountData(eventType);
 export const getUrlPreview = (room_id: string, url: string) => transport.getUrlPreview(room_id, url);

Added file: web/src/lib/mentions-model.ts+75 additions@@ -0,0 +1,75 @@
+import { parseEventContext, parseTimelineItem } from './types';
+import type { EventContext, TimelineItem } from './types';
+
+export interface MentionKey { room_id: string; event_id: string }
+export type MentionReason = 'Direct' | 'Reply' | 'Room';
+export type MentionCaptureState =
+  | { kind: 'Pending' | 'Partial' | 'Ready' | 'Unavailable' }
+  | { kind: 'Failed'; message: string; retry_at_ms: number };
+export interface MentionEntry {
+  key: MentionKey; timestamp_ms: number; discovered_at_ms: number; discovery_revision: number; revision: number;
+  event: TimelineItem; reasons: MentionReason[]; read: boolean; capture: MentionCaptureState;
+  room_name: string | null; notification_suppressed: boolean;
+}
+export interface MentionCoverage {
+  earliest_timestamp_ms: number | null; historical_supported: boolean | null; recovering: boolean;
+  incomplete_history: boolean; gaps: MentionGap[]; truncated: boolean; unresolved_candidates: number;
+}
+export interface MentionGap { room_id: string | null; reason: string; token: string | null }
+export interface MentionsBoundary { account: string; revision: number }
+export interface MentionsPage {
+  entries: MentionEntry[]; next_cursor: string | null; end_reached: boolean; coverage: MentionCoverage;
+  unread_count: number; revision: number; boundary: MentionsBoundary;
+}
+export interface SavedMentionContext { key: MentionKey; state: MentionCaptureState; context: EventContext | null; revision: number }
+export interface MentionsUpdate { snapshot: MentionsPage; upserts: MentionEntry[]; removed: MentionKey[] }
+
+type Obj = Record<string, unknown>;
+const obj = (v: unknown): v is Obj => typeof v === 'object' && v !== null && !Array.isArray(v);
+const str = (v: unknown): v is string => typeof v === 'string';
+const bool = (v: unknown): v is boolean => typeof v === 'boolean';
+const nat = (v: unknown): v is number => typeof v === 'number' && Number.isSafeInteger(v) && v >= 0;
+function key(v: unknown): MentionKey | null {
+  if (!obj(v) || !str(v.room_id) || !v.room_id || !str(v.event_id) || !v.event_id) return null;
+  return { room_id: v.room_id, event_id: v.event_id };
+}
+function capture(v: unknown): MentionCaptureState | null {
+  if (str(v) && ['Pending', 'Partial', 'Ready', 'Unavailable'].includes(v)) return { kind: v as 'Pending' | 'Partial' | 'Ready' | 'Unavailable' };
+  if (obj(v) && obj(v.Failed) && str(v.Failed.message) && nat(v.Failed.retry_at_ms)) return { kind: 'Failed', message: v.Failed.message, retry_at_ms: v.Failed.retry_at_ms };
+  return null;
+}
+function entry(v: unknown): MentionEntry | null {
+  if (!obj(v)) return null;
+  const k = key(v.key), ev = parseTimelineItem(v.event), c = capture(v.capture);
+  if (!k || !ev || !c || !nat(v.timestamp_ms) || !nat(v.discovered_at_ms) || !nat(v.discovery_revision) || !nat(v.revision) || !Array.isArray(v.reasons) || !v.reasons.every(x => str(x) && ['Direct','Reply','Room'].includes(x)) || !bool(v.read) || !(v.room_name === null || str(v.room_name)) || !bool(v.notification_suppressed)) return null;
+  return { key:k, timestamp_ms:v.timestamp_ms, discovered_at_ms:v.discovered_at_ms, discovery_revision:v.discovery_revision, revision:v.revision, event:ev, reasons:v.reasons as MentionReason[], read:v.read, capture:c, room_name:v.room_name, notification_suppressed:v.notification_suppressed };
+}
+function gap(v: unknown): MentionGap | null {
+  if (!obj(v) || !(v.room_id === null || (str(v.room_id) && v.room_id)) || !str(v.reason) || !(v.token === null || str(v.token))) return null;
+  return { room_id:v.room_id, reason:v.reason, token:v.token };
+}
+function page(v: unknown): MentionsPage | null {
+  if (!obj(v) || !obj(v.coverage) || !Array.isArray(v.entries) || !Array.isArray(v.coverage['gaps'])) return null;
+  const entries=v.entries.map(entry), cov=v.coverage as Obj;
+  const gaps=(cov['gaps'] as unknown[]).map(gap);
+  if (entries.some(x=>!x) || gaps.some(x=>!x) || !(v.next_cursor === null || str(v.next_cursor)) || !bool(v.end_reached) || !(cov['earliest_timestamp_ms'] === null || nat(cov['earliest_timestamp_ms'])) || !(cov['historical_supported'] === null || bool(cov['historical_supported'])) || !bool(cov['recovering']) || !bool(cov['incomplete_history']) || !bool(cov['truncated']) || !nat(cov['unresolved_candidates']) || !nat(v.unread_count) || !nat(v.revision) || !obj(v.boundary) || !str(v.boundary['account']) || !v.boundary['account'] || !nat(v.boundary['revision'])) return null;
+  return { entries:entries as MentionEntry[], next_cursor:v.next_cursor as string|null, end_reached:v.end_reached, coverage:{earliest_timestamp_ms:cov['earliest_timestamp_ms'] as number|null,historical_supported:cov['historical_supported'] as boolean|null,recovering:cov['recovering'],incomplete_history:cov['incomplete_history'],gaps:gaps as MentionGap[],truncated:cov['truncated'],unresolved_candidates:cov['unresolved_candidates']}, unread_count:v.unread_count, revision:v.revision, boundary:{account:v.boundary['account'],revision:v.boundary['revision']} };
+}
+export function parseMentionsPage(raw: unknown): MentionsPage | null { try { return page(raw); } catch { return null; } }
+export function parseSavedMentionContext(raw: unknown): SavedMentionContext | null {
+  try {
+    if (!obj(raw)) return null;
+    const k=key(raw.key), state=capture(raw.state), context=raw.context === null ? null : parseEventContext(raw.context);
+    if (!k || !state || (raw.context !== null && !context) || !nat(raw.revision)) return null;
+    return {key:k,state,context,revision:raw.revision};
+  } catch { return null; }
+}
+export function parseMentionsUpdate(raw: unknown): MentionsUpdate | null {
+  try {
+    if (!obj(raw) || !Array.isArray(raw.upserts) || !Array.isArray(raw.removed)) return null;
+    const snapshot=page(raw.snapshot), upserts=raw.upserts.map(entry), removed=raw.removed.map(key);
+    if (!snapshot || upserts.some(x=>!x) || removed.some(x=>!x)) return null;
+    return {snapshot,upserts:upserts as MentionEntry[],removed:removed as MentionKey[]};
+  } catch { return null; }
+}
+export function mentionKey(key: MentionKey): string { return JSON.stringify([key.room_id,key.event_id]); }

Modified file: web/src/lib/store.ts+20 additions−1 deletions@@ -1,4 +1,6 @@
-import { writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
+import { parseMentionsPage, parseMentionsUpdate } from './mentions-model';
+import type { MentionsPage } from './mentions-model';
 import { getSession, subscribeEvents } from './api';
 import type { SoftLogout } from './api';
 import { isRecord } from './guards';
@@ -23,6 +25,15 @@ import type {
 } from './types';
 
 export const sessionUser = writable<string | null | undefined>(undefined);
+export const mentionsSnapshot = writable<MentionsPage | null>(null);
+
+export function publishMentionsPage(page: MentionsPage): void {
+  if (page.boundary.account !== get(sessionUser)) return;
+  const current = get(mentionsSnapshot);
+  if (!current || current.boundary.account !== page.boundary.account || page.revision >= current.revision) {
+    mentionsSnapshot.set(page);
+  }
+}
 export const softLogout = writable<SoftLogout | null>(null);
 /** Device build only: this tab lost the store lock to another tab that has malice open. */
 export const blocked = writable<boolean>(false);
@@ -61,6 +72,7 @@ export function dismissBanner(id: number): void {
 }
 
 export function resetClientState(): void {
+  mentionsSnapshot.set(null);
   rooms.set([]);
   timelines.set({});
   pinnedTimelines.set({});
@@ -113,6 +125,8 @@ function handlePayload(text: string): void {
   if (!isRecord(data)) return;
   const kind = data['type'];
   if (kind === 'snapshot') {
+    const mentions = parseMentionsPage(data['mentions']);
+    if (mentions) publishMentionsPage(mentions);
     setRooms(data['rooms']);
     const rawTimelines = data['timelines'];
     if (isRecord(rawTimelines)) {
@@ -136,6 +150,11 @@ function handlePayload(text: string): void {
     imagePacks.set(parseImagePacks(data['image_packs']));
     return;
   }
+  if (kind === 'mentions') {
+    const update = parseMentionsUpdate(data['update']);
+    if (update) publishMentionsPage(update.snapshot);
+    return;
+  }
   if (kind === 'image_packs') {
     imagePacks.set(parseImagePacks(data['packs']));
     return;

Modified file: web/src/lib/transport-http.ts+25 additions@@ -1,5 +1,7 @@
 import type { EventContext, EventContextPage, MemberSummary, RoomSummary } from './types';
 import { parseEventContext, parseEventContextPage } from './types';
+import { parseMentionsPage, parseSavedMentionContext } from './mentions-model';
+import type { MentionKey, MentionsBoundary, MentionsPage, SavedMentionContext } from './mentions-model';
 import { ApiError, type CommandRequest, type SendKind, type SessionInfo, type Transport, type UploadExtras, type VerifyAction } from './transport';
 
 async function parseFailure(res: Response, fallback: string): Promise<never> {
@@ -115,6 +117,29 @@ export class HttpTransport implements Transport {
     if (!parsed) throw new ApiError(502, 'Invalid event context response');
     return parsed;
   }
+  async mentionsPage(cursor: string | null = null, limit = 50): Promise<MentionsPage> {
+    const parsed = parseMentionsPage(await this.command({ op: 'mentions_page', cursor, limit }));
+    if (!parsed) throw new ApiError(502, 'Invalid mentions page response');
+    return parsed;
+  }
+  mentionContext(room_id: string, event_id: string): Promise<SavedMentionContext> {
+    return this.mentionContextCall('mention_context', room_id, event_id);
+  }
+  retryMentionContext(room_id: string, event_id: string): Promise<SavedMentionContext> {
+    return this.mentionContextCall('retry_mention_context', room_id, event_id);
+  }
+  private async mentionContextCall(op: 'mention_context' | 'retry_mention_context', room_id: string, event_id: string): Promise<SavedMentionContext> {
+    const parsed = parseSavedMentionContext(await this.command({ op, room_id, event_id }));
+    if (!parsed) throw new ApiError(502, 'Invalid saved mention context response');
+    return parsed;
+  }
+  async setMentionsRead(keys: MentionKey[], read: boolean): Promise<void> {
+    await this.command({ op: 'set_mentions_read', keys, read });
+  }
+  async markMentionsReadThrough(boundary: MentionsBoundary): Promise<void> {
+    await this.command({ op: 'mark_mentions_read_through', boundary });
+  }
+  async recoverMentions(): Promise<void> { await this.command({ op: 'recover_mentions' }); }
   async eventContextBefore(room_id: string, event_id: string, from: string, limit = 20): Promise<EventContextPage> {
     return this.eventContextPage('before', room_id, event_id, from, limit);
   }

Modified file: web/src/lib/transport-worker.ts+17 additions@@ -1,4 +1,6 @@
 import { parseEventContext, parseEventContextPage } from './types';
+import { parseMentionsPage, parseSavedMentionContext } from './mentions-model';
+import type { MentionKey, MentionsBoundary, MentionsPage, SavedMentionContext } from './mentions-model';
 import type { EventContext, EventContextPage, MemberSummary, RoomSummary } from './types';
 import { ApiError, type CommandRequest, type SendKind, type SessionInfo, type SoftLogout, type Transport, type UploadExtras, type VerifyAction } from './transport';
 import { statusForKind } from './wire-status';
@@ -230,6 +232,21 @@ export class WorkerTransport implements Transport {
   paginateRoom(room_id: string): Promise<void> {
     return this.client.call('paginate', { room_id });
   }
+  async mentionsPage(cursor: string | null = null, limit = 50): Promise<MentionsPage> {
+    const parsed = parseMentionsPage(await this.client.call('mentions_page', { cursor, limit }));
+    if (!parsed) throw new ApiError(502, 'Invalid mentions page response');
+    return parsed;
+  }
+  mentionContext(room_id: string, event_id: string): Promise<SavedMentionContext> { return this.mentionContextCall('mention_context', room_id, event_id); }
+  retryMentionContext(room_id: string, event_id: string): Promise<SavedMentionContext> { return this.mentionContextCall('retry_mention_context', room_id, event_id); }
+  private async mentionContextCall(op: string, room_id: string, event_id: string): Promise<SavedMentionContext> {
+    const parsed = parseSavedMentionContext(await this.client.call(op, { room_id, event_id }));
+    if (!parsed) throw new ApiError(502, 'Invalid saved mention context response');
+    return parsed;
+  }
+  async setMentionsRead(keys: MentionKey[], read: boolean): Promise<void> { await this.client.call('set_mentions_read', { keys, read }); }
+  async markMentionsReadThrough(boundary: MentionsBoundary): Promise<void> { await this.client.call('mark_mentions_read_through', { boundary }); }
+  async recoverMentions(): Promise<void> { await this.client.call('recover_mentions'); }
   eventContext(room_id: string, event_id: string, limit = 20): Promise<EventContext> {
     return this.contextCall('event_context', { room_id, event_id, limit });
   }

Modified file: web/src/lib/transport.ts+16 additions−1 deletions@@ -1,4 +1,5 @@
 import type { EventContext, EventContextPage, MemberSummary, PackUsage, RoomSummary } from './types';
+import type { MentionKey, MentionsBoundary, MentionsPage, SavedMentionContext } from './mentions-model';
 
 export class ApiError extends Error {
   status: number;
@@ -62,7 +63,15 @@ export type CommandRequest =
   | { op: 'set_pack_enabled'; room_id: string; state_key: string; enabled: boolean }
   | { op: 'clone_pack_image'; from_pack: string; shortcode: string; to: PackTarget }
   | { op: 'clone_sticker'; room_id: string; event_id: string; to: PackTarget; shortcode: string }
-  | { op: 'clone_pack'; from_pack: string; to: PackTarget; display_name: string | null };
+  | { op: 'clone_pack'; from_pack: string; to: PackTarget; display_name: string | null }
+  | MentionsRequest;
+
+export type MentionsRequest =
+  | { op: 'mentions_page'; cursor: string | null; limit: number }
+  | { op: 'mention_context' | 'retry_mention_context'; room_id: string; event_id: string }
+  | { op: 'set_mentions_read'; keys: MentionKey[]; read: boolean }
+  | { op: 'mark_mentions_read_through'; boundary: MentionsBoundary }
+  | { op: 'recover_mentions' };
 
 export type PackTarget = { kind: 'user' } | { kind: 'room'; room_id: string; state_key: string };
 
@@ -101,6 +110,12 @@ export interface Transport {
   eventContext(room_id: string, event_id: string, limit?: number): Promise<EventContext>;
   eventContextBefore(room_id: string, event_id: string, from: string, limit?: number): Promise<EventContextPage>;
   eventContextAfter(room_id: string, event_id: string, from: string, limit?: number): Promise<EventContextPage>;
+  mentionsPage(cursor?: string | null, limit?: number): Promise<MentionsPage>;
+  mentionContext(room_id: string, event_id: string): Promise<SavedMentionContext>;
+  retryMentionContext(room_id: string, event_id: string): Promise<SavedMentionContext>;
+  setMentionsRead(keys: MentionKey[], read: boolean): Promise<void>;
+  markMentionsReadThrough(boundary: MentionsBoundary): Promise<void>;
+  recoverMentions(): Promise<void>;
   setTyping(room_id: string, typing: boolean): Promise<void>;
   getAccountData(eventType: string): Promise<unknown | null>;
   getUrlPreview(room_id: string, url: string): Promise<unknown | null>;

malice

Commit 668ab5c30531

Commit `668ab5c30531`