perf(api,frontend): index hot queries, paginate chats, fix realtime

frontend/src/lib/stores/chat-picker.svelte.ts

@@ -0,0 +1,42 @@
+import { listChats } from "$lib/api/endpoints";
+import type { Chat } from "$lib/api/types";
+
+const DEBOUNCE_MS = 250;
+const LIMIT = 40;
+
+export function createChatPicker() {
+  let results = $state<Chat[]>([]);
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  let seq = 0;
+
+  async function run(query: string, current: number) {
+    try {
+      const found = await listChats({
+        limit: LIMIT,
+        search: query || undefined,
+      });
+      if (current === seq) {
+        results = found;
+      }
+    } catch {
+      if (current === seq) {
+        results = [];
+      }
+    }
+  }
+
+  return {
+    get results(): Chat[] {
+      return results;
+    },
+    search(query: string) {
+      const current = ++seq;
+      if (timer !== null) {
+        clearTimeout(timer);
+      }
+      timer = setTimeout(() => {
+        run(query.trim(), current).catch(() => undefined);
+      }, DEBOUNCE_MS);
+    },
+  };
+}

frontend/src/lib/stores/chats.svelte.ts

@@ -1,104 +1,178 @@
-import { enrichChat, getJob, listChats } from "$lib/api/endpoints";
+import { enrichChat, getChat, getJob, listChats } from "$lib/api/endpoints";
 import type { Chat, LiveEvent } from "$lib/api/types";
+import { folderContains } from "$lib/format/folders";
 import { accounts } from "$lib/stores/accounts.svelte";
 import { events } from "$lib/stores/events.svelte";
-import { peers } from "$lib/stores/peers.svelte";
+import { folders } from "$lib/stores/folders.svelte";
 
 const POLL_INTERVAL = 1500;
 const POLL_MAX = 12;
-const PAGE_SIZE = 200;
+const PAGE_SIZE = 40;
+const ALL = "all";
+const EMPTY: Chat[] = [];
+
+interface Bucket {
+  hasMore: boolean;
+  list: Chat[];
+  loaded: boolean;
+  loading: boolean;
+}
+
+function createBucket(): Bucket {
+  return { list: [], loaded: false, loading: false, hasMore: true };
+}
+
+function bucketKey(folderId: number | null): string {
+  return folderId === null ? ALL : String(folderId);
+}
 
 function createChats() {
-  let list = $state<Chat[]>([]);
-  let loaded = $state(false);
-  let loading = $state(false);
-  let hasMore = $state(false);
-  let revision = $state(0);
+  let buckets = $state<Record<string, Bucket>>({});
+  let extra = $state<Record<number, Chat>>({});
   let account: number | null = null;
-  let filling = false;
   const enriched = new Set<number>();
+  const resolving = new Set<number>();
 
   function syncAccount() {
     if (accounts.selectedId !== account) {
       account = accounts.selectedId;
-      list = [];
-      loaded = false;
+      buckets = {};
+      extra = {};
       enriched.clear();
+      resolving.clear();
     }
   }
 
-  async function load(force: boolean) {
+  function activeKey(): string {
+    return bucketKey(folders.selectedId);
+  }
+
+  function active(): Bucket | undefined {
+    return buckets[activeKey()];
+  }
+
+  function folderQuery(key: string): number | undefined {
+    return key === ALL ? undefined : Number(key);
+  }
+
+  async function fetchPage(key: string, offset: number): Promise<Chat[]> {
+    return await listChats({
+      limit: PAGE_SIZE,
+      offset,
+      folder_id: folderQuery(key),
+    });
+  }
+
+  async function load(folderId: number | null, force: boolean) {
     syncAccount();
-    if (account === null || (loaded && !force)) {
+    const key = bucketKey(folderId);
+    buckets[key] ??= createBucket();
+    const bucket = buckets[key];
+    if (account === null || bucket.loading || (bucket.loaded && !force)) {
       return;
     }
-    loading = true;
+    bucket.loading = true;
     try {
-      const page = await listChats({ limit: PAGE_SIZE });
-      list = page;
-      hasMore = page.length === PAGE_SIZE;
-      loaded = true;
+      const page = await fetchPage(key, 0);
+      bucket.list = page;
+      bucket.hasMore = page.length === PAGE_SIZE;
+      bucket.loaded = true;
     } finally {
-      loading = false;
+      bucket.loading = false;
     }
-    loadAll();
   }
 
-  async function loadAll() {
-    if (filling) {
+  async function loadMore(folderId: number | null) {
+    syncAccount();
+    const key = bucketKey(folderId);
+    const bucket = buckets[key];
+    if (
+      account === null ||
+      bucket === undefined ||
+      bucket.loading ||
+      !(bucket.loaded && bucket.hasMore)
+    ) {
       return;
     }
-    filling = true;
+    bucket.loading = true;
     try {
-      while (hasMore) {
-        if (loading) {
-          await new Promise((resolve) => {
-            setTimeout(resolve, 50);
-          });
-          continue;
-        }
-        const before = list.length;
-        await loadMore();
-        if (list.length === before) {
-          break;
-        }
+      const page = await fetchPage(key, bucket.list.length);
+      const seen = new Set(bucket.list.map((chat) => chat.chat_id));
+      bucket.list = [
+        ...bucket.list,
+        ...page.filter((chat) => !seen.has(chat.chat_id)),
+      ];
+      bucket.hasMore = page.length === PAGE_SIZE;
+    } finally {
+      bucket.loading = false;
+    }
+  }
+
+  function bucketsFor(chat: Chat): Bucket[] {
+    const matching: Bucket[] = [];
+    for (const [key, bucket] of Object.entries(buckets)) {
+      if (key === ALL) {
+        matching.push(bucket);
+        continue;
+      }
+      const folder = folders.list.find(
+        (candidate) => candidate.folder_id === Number(key)
+      );
+      if (folder && folderContains(folder, chat)) {
+        matching.push(bucket);
       }
-    } finally {
-      filling = false;
     }
+    return matching;
   }
 
-  async function loadMore() {
-    syncAccount();
-    if (account === null || loading || !loaded || !hasMore) {
+  function known(id: number): boolean {
+    if (extra[id] !== undefined) {
+      return true;
+    }
+    return Object.values(buckets).some((bucket) =>
+      bucket.list.some((chat) => chat.chat_id === id)
+    );
+  }
+
+  function hoist(bucket: Bucket, chat: Chat) {
+    bucket.list = [chat, ...bucket.list.filter((item) => item !== chat)];
+  }
+
+  async function insertUnknown(chatId: number) {
+    const chat = await getChat(chatId);
+    if (chat === null) {
       return;
     }
-    loading = true;
-    try {
-      const page = await listChats({ limit: PAGE_SIZE, offset: list.length });
-      const seen = new Set(list.map((chat) => chat.chat_id));
-      list = [...list, ...page.filter((chat) => !seen.has(chat.chat_id))];
-      hasMore = page.length === PAGE_SIZE;
-    } finally {
-      loading = false;
+    for (const bucket of bucketsFor(chat)) {
+      if (!bucket.list.some((item) => item.chat_id === chatId)) {
+        bucket.list = [chat, ...bucket.list];
+      }
     }
   }
 
   function applyEvent(event: LiveEvent) {
-    if (event.type !== "message" || !loaded) {
+    if (event.type !== "message") {
       return;
     }
     const message = event.message;
-    const existing = list.find((chat) => chat.chat_id === message.chat_id);
-    if (!existing) {
-      load(true);
-      return;
+    let known = false;
+    for (const bucket of Object.values(buckets)) {
+      const existing = bucket.list.find(
+        (chat) => chat.chat_id === message.chat_id
+      );
+      if (existing === undefined) {
+        continue;
+      }
+      known = true;
+      existing.last_date = message.date;
+      existing.last_sender_id = message.sender_id;
+      existing.last_text = message.text;
+      existing.message_count++;
+      hoist(bucket, existing);
+    }
+    if (!known && buckets[ALL]?.loaded) {
+      insertUnknown(message.chat_id).catch(() => undefined);
     }
-    existing.last_date = message.date;
-    existing.last_sender_id = message.sender_id;
-    existing.last_text = message.text;
-    existing.message_count++;
-    list = [existing, ...list.filter((chat) => chat !== existing)];
   }
 
   async function waitForJob(jobId: number) {
@@ -113,38 +187,69 @@ function createChats() {
     }
   }
 
+  function replaceEverywhere(chat: Chat) {
+    for (const bucket of Object.values(buckets)) {
+      const index = bucket.list.findIndex(
+        (item) => item.chat_id === chat.chat_id
+      );
+      if (index !== -1) {
+        bucket.list[index] = chat;
+      }
+    }
+    if (extra[chat.chat_id] !== undefined) {
+      extra[chat.chat_id] = chat;
+    }
+  }
+
   events.subscribe(applyEvent);
   events.onReconnect(() => {
-    if (loaded) {
-      load(true);
+    if (active()?.loaded) {
+      load(folders.selectedId, true);
     }
   });
 
   return {
     get list(): Chat[] {
-      return list;
+      return active()?.list ?? EMPTY;
     },
     get loaded(): boolean {
-      return loaded;
+      return active()?.loaded ?? false;
     },
     get loading(): boolean {
-      return loading;
+      return active()?.loading ?? false;
     },
     get hasMore(): boolean {
-      return hasMore;
-    },
-    get revision(): number {
-      return revision;
+      return active()?.hasMore ?? false;
     },
     loadMore,
     byId(id: number): Chat | undefined {
-      return list.find((chat) => chat.chat_id === id);
+      for (const bucket of Object.values(buckets)) {
+        const found = bucket.list.find((chat) => chat.chat_id === id);
+        if (found !== undefined) {
+          return found;
+        }
+      }
+      return extra[id];
     },
-    load() {
-      return load(false);
+    ensure(id: number) {
+      syncAccount();
+      if (account === null || resolving.has(id) || known(id)) {
+        return;
+      }
+      resolving.add(id);
+      getChat(id)
+        .then((chat) => {
+          if (chat !== null) {
+            extra[id] = chat;
+          }
+        })
+        .catch(() => resolving.delete(id));
     },
-    refresh() {
-      return load(true);
+    load(folderId: number | null = folders.selectedId) {
+      return load(folderId, false);
+    },
+    refresh(folderId: number | null = folders.selectedId) {
+      return load(folderId, true);
     },
     async enrich(chatId: number) {
       syncAccount();
@@ -155,9 +260,10 @@ function createChats() {
       try {
         const { job_id } = await enrichChat(chatId);
         await waitForJob(job_id);
-        peers.reset();
-        await load(true);
-        revision++;
+        const chat = await getChat(chatId);
+        if (chat !== null) {
+          replaceEverywhere(chat);
+        }
       } catch {
         enriched.delete(chatId);
       }

frontend/src/lib/stores/events.svelte.ts

@@ -1,11 +1,15 @@
+import { browser } from "$app/environment";
 import type { LiveEvent } from "$lib/api/types";
 import { auth } from "$lib/stores/auth.svelte";
 
 const BASE = import.meta.env.VITE_API_BASE ?? "/api";
 const RECONNECT_DELAY = 2000;
+const STALL_TIMEOUT = 45_000;
 
 type Listener = (event: LiveEvent) => void;
 
+const STALLED = Symbol("stalled");
+
 function parseFrame(block: string): LiveEvent | null {
   for (const line of block.split("\n")) {
     if (line.startsWith("data:")) {
@@ -25,6 +29,7 @@ function createEvents() {
   let epoch = $state(0);
   let account: number | null = null;
   let controller: AbortController | null = null;
+  let lastFrameAt = 0;
 
   function emit(event: LiveEvent) {
     for (const listener of listeners) {
@@ -49,11 +54,24 @@ function createEvents() {
     return rest;
   }
 
+  function readWithTimeout(
+    reader: ReadableStreamDefaultReader<Uint8Array>
+  ): Promise<ReadableStreamReadResult<Uint8Array> | typeof STALLED> {
+    let timer: ReturnType<typeof setTimeout>;
+    const stall = new Promise<typeof STALLED>((resolve) => {
+      timer = setTimeout(() => resolve(STALLED), STALL_TIMEOUT);
+    });
+    return Promise.race([reader.read(), stall]).finally(() => {
+      clearTimeout(timer);
+    });
+  }
+
   async function consume(response: Response, signal: AbortSignal) {
     if (!response.body) {
       return;
     }
     epoch++;
+    lastFrameAt = Date.now();
     for (const listener of reconnectListeners) {
       listener();
     }
@@ -61,11 +79,16 @@ function createEvents() {
     const decoder = new TextDecoder();
     let buffer = "";
     while (!signal.aborted) {
-      const { value, done } = await reader.read();
-      if (done) {
+      const result = await readWithTimeout(reader);
+      if (result === STALLED) {
+        await reader.cancel().catch(() => undefined);
         return;
       }
-      buffer = drain(buffer + decoder.decode(value, { stream: true }));
+      if (result.done) {
+        return;
+      }
+      lastFrameAt = Date.now();
+      buffer = drain(buffer + decoder.decode(result.value, { stream: true }));
     }
   }
 
@@ -98,6 +121,22 @@ function createEvents() {
     controller = null;
   }
 
+  function start(accountId: number) {
+    close();
+    account = accountId;
+    controller = new AbortController();
+    run(accountId, controller.signal);
+  }
+
+  if (browser) {
+    document.addEventListener("visibilitychange", () => {
+      const stale = Date.now() - lastFrameAt > STALL_TIMEOUT;
+      if (document.visibilityState === "visible" && account !== null && stale) {
+        start(account);
+      }
+    });
+  }
+
   return {
     get epoch(): number {
       return epoch;
@@ -111,16 +150,15 @@ function createEvents() {
       return () => reconnectListeners.delete(listener);
     },
     open(accountId: number | null) {
-      if (accountId === account) {
-        return;
-      }
-      close();
-      account = accountId;
       if (accountId === null || !auth.token) {
+        close();
+        account = null;
         return;
       }
-      controller = new AbortController();
-      run(accountId, controller.signal);
+      if (accountId === account && controller !== null) {
+        return;
+      }
+      start(accountId);
     },
   };
 }

frontend/src/lib/stores/search.svelte.ts

@@ -1,30 +1,22 @@
-import { discoverPeers, searchMessages } from "$lib/api/endpoints";
-import type { DiscoverItem, SearchHit } from "$lib/api/types";
-import { chats } from "$lib/stores/chats.svelte";
+import { discoverPeers, listChats, searchMessages } from "$lib/api/endpoints";
+import type { Chat, DiscoverItem, SearchHit } from "$lib/api/types";
 
 const DEBOUNCE_MS = 250;
 const REMOTE_DEBOUNCE_MS = 700;
 const MIN_LENGTH = 1;
+const CHAT_LIMIT = 30;
 
 function createSearch() {
   let active = $state(false);
   let query = $state("");
   let messageHits = $state<SearchHit[]>([]);
+  let chatHits = $state<Chat[]>([]);
   let peerResults = $state<DiscoverItem[]>([]);
   let loading = $state(false);
   let timers: ReturnType<typeof setTimeout>[] = [];
   let seq = 0;
 
   const trimmed = $derived(query.trim());
-  const chatHits = $derived.by(() => {
-    const needle = trimmed.toLowerCase();
-    if (needle.length < MIN_LENGTH) {
-      return [];
-    }
-    return chats.list.filter((chat) =>
-      (chat.title ?? "").toLowerCase().includes(needle)
-    );
-  });
   const peerHits = $derived.by(() => {
     const shown = new Set(chatHits.map((chat) => chat.chat_id));
     return peerResults.filter((item) => !shown.has(item.chat_id));
@@ -47,6 +39,19 @@ function createSearch() {
     }
   }
 
+  async function runChats(value: string, current: number) {
+    try {
+      const found = await listChats({ limit: CHAT_LIMIT, search: value });
+      if (current === seq) {
+        chatHits = found;
+      }
+    } catch {
+      if (current === seq) {
+        chatHits = [];
+      }
+    }
+  }
+
   async function runPeers(value: string, current: number, remote: boolean) {
     try {
       const items = await discoverPeers(value, remote);
@@ -73,6 +78,7 @@ function createSearch() {
     const current = ++seq;
     if (value.length < MIN_LENGTH) {
       messageHits = [];
+      chatHits = [];
       peerResults = [];
       loading = false;
       return;
@@ -81,6 +87,7 @@ function createSearch() {
     timers.push(
       setTimeout(() => {
         runMessages(value, current).catch(() => undefined);
+        runChats(value, current).catch(() => undefined);
         runPeers(value, current, false).catch(() => undefined);
       }, DEBOUNCE_MS),
       setTimeout(() => {
@@ -122,6 +129,7 @@ function createSearch() {
       active = false;
       query = "";
       messageHits = [];
+      chatHits = [];
       peerResults = [];
       loading = false;
       seq++;