Retain a stable message window in channel timelines

desktop/package.json

@@ -77,6 +77,7 @@
     "tailwind-merge": "^3.5.0",
     "tiptap-markdown": "^0.9.0",
     "upng-js": "^2.1.0",
+    "virtua": "0.49.2",
     "yaml": "^2.8.3",
     "zod": "^4.4.3"
   },

desktop/src/features/channels/ui/ChannelPane.tsx

@@ -76,6 +76,7 @@ export const ChannelPane = React.memo(function ChannelPane({
   fetchOlder,
   header,
   hasOlderMessages,
+  historyExhausted,
   isFetchingOlder,
   followThreadById,
   isFollowingThread,
@@ -190,6 +191,7 @@ export const ChannelPane = React.memo(function ChannelPane({
     timelineScrollRef,
     composerWrapperRef,
     `${activeChannelId}:${isSinglePanelView}:${hasMainComposerOverlay}`,
+    "css-variable",
   );
   const clearWelcomeComposerDismissTimer = React.useCallback(() => {
     if (welcomeComposerDismissTimerRef.current !== null) {
@@ -616,6 +618,7 @@ export const ChannelPane = React.memo(function ChannelPane({
             followThreadById={followThreadById}
             hasComposerOverlay={hasMainComposerOverlay}
             hasOlderMessages={hasOlderMessages}
+            historyExhausted={historyExhausted}
             huddleMemberPubkeys={huddleMemberPubkeys}
             huddleMemberPubkeysPending={huddleMemberPubkeysPending}
             isFetchingOlder={isFetchingOlder}
@@ -689,7 +692,7 @@ export const ChannelPane = React.memo(function ChannelPane({
             </div>
           ) : (
             <div
-              className="pointer-events-none absolute inset-x-0 bottom-0 z-40"
+              className="pointer-events-none absolute inset-x-0 bottom-0 z-40 bg-background/70 backdrop-blur-md supports-[backdrop-filter]:bg-background/55"
               data-testid="channel-composer-overlay"
               ref={composerWrapperRef}
             >
@@ -735,7 +738,7 @@ export const ChannelPane = React.memo(function ChannelPane({
                   }
                   showTopBorder={false}
                 />
-                <div className="min-h-8 overflow-visible bg-background px-5 pb-1.5 pt-0">
+                <div className="min-h-8 overflow-visible bg-transparent px-5 pb-1.5 pt-0">
                   <div className="flex h-full w-full items-center gap-2 overflow-visible">
                     {hasComposerBotActivity ? (
                       <div className="flex min-w-0 flex-1 overflow-visible">

desktop/src/features/channels/ui/ChannelPane.types.ts

@@ -46,6 +46,8 @@ export type ChannelPaneProps = {
   fetchOlder?: () => Promise<void>;
   header?: React.ReactNode;
   hasOlderMessages?: boolean;
+  /** True when the loaded window provably starts at the channel's beginning. */
+  historyExhausted?: boolean;
   isFetchingOlder?: boolean;
   isJoining?: boolean;
   isSinglePanelView?: boolean;

desktop/src/features/channels/ui/ChannelScreen.tsx

@@ -190,7 +190,7 @@ export function ChannelScreen({
     effectiveOpenThreadHeadId,
   );
   useChannelSubscription(activeChannel);
-  const { fetchOlder, hasOlderMessages, isFetchingOlder } =
+  const { fetchOlder, hasOlderMessages, historyExhausted, isFetchingOlder } =
     useFetchOlderMessages(activeChannel);
   const latestActiveMessage = React.useMemo(() => {
     const messages = messagesQuery.data;
@@ -878,6 +878,7 @@ export function ChannelScreen({
                   fetchOlder={fetchOlder}
                   header={channelHeader}
                   hasOlderMessages={hasOlderMessages}
+                  historyExhausted={historyExhausted}
                   onAddAgent={handleOpenAddBot}
                   onCreateChannel={openCreateChannel}
                   onOpenMembers={handleOpenMembersSidebar}

desktop/src/features/messages/lib/channelWindowStore.test.mjs

@@ -3,6 +3,8 @@ import test from "node:test";
 import {
   appendOlderChannelWindow,
   mapChannelWindowEvents,
+  channelWindowHasMore,
+  channelWindowHistoryExhausted,
   channelWindowThreadSummaries,
   emptyChannelWindowStore,
   flattenChannelWindowEvents,
@@ -401,3 +403,26 @@ test("mapChannelWindowEvents rewrites live overlay events", () => {
     "edited-live",
   );
 });
+
+test("exhaustion is unresolved (false) on an empty store, unlike hasMore's default", () => {
+  const store = emptyChannelWindowStore();
+  assert.equal(channelWindowHasMore(store), false);
+  // Both read "no more history", but exhaustion must NOT claim the boundary
+  // is proven before any page resolves — an unloaded window is unknown.
+  assert.equal(channelWindowHistoryExhausted(store), false);
+});
+
+test("exhaustion tracks only a resolved tail page's hasMore", () => {
+  const open = replaceNewestChannelWindow(
+    emptyChannelWindowStore(),
+    page(null, [event("newest", 100)], { hasMore: true }),
+  );
+  assert.equal(channelWindowHistoryExhausted(open), false);
+
+  const closed = appendOlderChannelWindow(
+    open,
+    page(open.pages[0].nextCursor, [event("oldest", 99)], { hasMore: false }),
+  );
+  assert.equal(channelWindowHistoryExhausted(closed), true);
+  assert.equal(channelWindowHasMore(closed), false);
+});

desktop/src/features/messages/lib/channelWindowStore.ts

@@ -282,6 +282,17 @@ export function channelWindowHasMore(store: ChannelWindowStore) {
   return tail?.hasMore ?? false;
 }
 
+/**
+ * Whether the loaded window PROVABLY starts at the channel's beginning. This
+ * is not `!channelWindowHasMore`: an empty store also reports "no more", but
+ * that means the boundary is unresolved (nothing has loaded), not exhausted.
+ * Only a resolved tail page saying `hasMore: false` proves the start.
+ */
+export function channelWindowHistoryExhausted(store: ChannelWindowStore) {
+  const tail = store.pages[store.pages.length - 1];
+  return tail !== undefined && !tail.hasMore;
+}
+
 /**
  * Per-root thread summaries for badge rendering: authoritative page summaries
  * overlaid with any fresher relay-pushed live summaries. The live overlay also

desktop/src/features/messages/lib/timelineImagePreload.test.mjs

@@ -0,0 +1,98 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+import { timelineImageUrls } from "./timelineImagePreload.ts";
+
+function message(over = {}) {
+  return {
+    id: "m1",
+    createdAt: 0,
+    author: "a",
+    time: "now",
+    body: "",
+    depth: 0,
+    ...over,
+  };
+}
+
+test("timelineImageUrls warms chrome images but leaves attachments lazy", () => {
+  const urls = timelineImageUrls(
+    message({
+      avatarUrl: "https://example.com/avatar.jpg",
+      body: [
+        "![first](https://example.com/one.png)",
+        '![second](https://example.com/two.webp "caption")',
+      ].join("\n"),
+      tags: [
+        ["imeta", "url https://example.com/three.jpg", "m image/jpeg"],
+        [
+          "imeta",
+          "url https://example.com/movie.mp4",
+          "m video/mp4",
+          "image https://example.com/poster.jpg",
+          "thumb https://example.com/thumb.jpg",
+        ],
+        ["emoji", "party", "https://example.com/party.png"],
+      ],
+      reactions: [
+        {
+          emoji: ":party:",
+          emojiUrl: "https://example.com/reaction.png",
+          count: 1,
+          users: [],
+        },
+      ],
+    }),
+  );
+
+  assert.deepEqual(
+    new Set(urls),
+    new Set([
+      "https://example.com/avatar.jpg",
+      "https://example.com/poster.jpg",
+      "https://example.com/thumb.jpg",
+      "https://example.com/party.png",
+      "https://example.com/reaction.png",
+    ]),
+  );
+  assert.ok(!urls.includes("https://example.com/one.png"));
+  assert.ok(!urls.includes("https://example.com/three.jpg"));
+});
+
+test("timelineImageUrls deduplicates chrome image URLs", () => {
+  const url = "https://example.com/same.png";
+  assert.deepEqual(
+    timelineImageUrls(
+      message({
+        avatarUrl: url,
+        tags: [["emoji", "same", url]],
+      }),
+    ),
+    [url],
+  );
+});
+
+test("preloadTimelineImages requests URLs once and keeps requests alive", async () => {
+  const { preloadTimelineImages } = await import("./timelineImagePreload.ts");
+  const previousImage = globalThis.Image;
+  const requested = [];
+  class FakeImage extends EventTarget {
+    set src(url) {
+      requested.push(url);
+    }
+  }
+  globalThis.Image = FakeImage;
+  try {
+    const state = { activeImages: new Set(), requestedUrls: new Set() };
+    const messages = [message({ avatarUrl: "https://example.com/one.png" })];
+    preloadTimelineImages(messages, state);
+    preloadTimelineImages(messages, state);
+
+    assert.deepEqual(requested, ["https://example.com/one.png"]);
+    assert.equal(state.activeImages.size, 1);
+    state.activeImages.values().next().value.dispatchEvent(new Event("load"));
+    assert.equal(state.activeImages.size, 0);
+  } finally {
+    globalThis.Image = previousImage;
+  }
+});

desktop/src/features/messages/lib/timelineImagePreload.ts

@@ -0,0 +1,57 @@
+import { rewriteRelayUrl } from "@/shared/lib/mediaUrl";
+import type { TimelineMessage } from "../types";
+import { parseImetaTags } from "./parseImeta";
+
+/**
+ * Return non-message-media image URLs worth warming before a virtualized row
+ * mounts. Inline image attachments deliberately stay out of this projection:
+ * their native-lazy thumbnail must load before the full-resolution request.
+ */
+export function timelineImageUrls(message: TimelineMessage): string[] {
+  const urls = new Set<string>();
+  const add = (url: string | null | undefined) => {
+    if (url) urls.add(rewriteRelayUrl(url));
+  };
+
+  add(message.avatarUrl);
+
+  if (message.tags) {
+    for (const entry of parseImetaTags(message.tags).values()) {
+      // Video poster frames are not part of the progressive image path.
+      if (entry.m?.startsWith("video/")) {
+        add(entry.image);
+        add(entry.thumb);
+      }
+    }
+    for (const tag of message.tags) {
+      if (tag[0] === "emoji") add(tag[2]);
+    }
+  }
+
+  for (const reaction of message.reactions ?? []) add(reaction.emojiUrl);
+  return [...urls];
+}
+
+export type TimelineImagePreloadState = {
+  activeImages: Set<HTMLImageElement>;
+  requestedUrls: Set<string>;
+};
+
+/** Start all image requests now, independently of Virtua row mounting. */
+export function preloadTimelineImages(
+  messages: readonly TimelineMessage[],
+  state: TimelineImagePreloadState,
+): void {
+  for (const message of messages) {
+    for (const url of timelineImageUrls(message)) {
+      if (state.requestedUrls.has(url)) continue;
+      state.requestedUrls.add(url);
+      const image = new Image();
+      state.activeImages.add(image);
+      const release = () => state.activeImages.delete(image);
+      image.addEventListener("load", release, { once: true });
+      image.addEventListener("error", release, { once: true });
+      image.src = url;
+    }
+  }
+}