v3: a performance pass over both halves — indexed queries, streamed files, cached previews, and feeds that stop re-rendering on every tick — a review turned up whole-file reads, unindexed scans and render storms; each fix comes with a test. Database: migration 0016 adds the indexes the hot queries lacked — dumps by created_at, (user_id, created_at) and slug, votes by (user_id, created_at), playlists by slug, users by lower(username) for @mentions, and the child side of every cascading foreign key (comment replies, a user's comments, follows both ways, chat messages, invites, reset tokens); the feeds, dump and playlist pages, upvotes and follower fan-out all plan as index searches now, with no temp-table sort. SQLite runs in WAL with synchronous=NORMAL and a busy timeout, and a transaction() helper wraps the multi-row writes (a dump and its categories, category sets, backlinks, attachment links, playlist reorders, follower notifications) so they commit once instead of once a row. Lists no longer run a COUNT(*) per page: they fetch limit + 1 rows and hasMore comes from the extra one; total stays only on search, the one place it's shown. Files: /api/files read the whole upload (up to 50 MB) for every range request a player makes while seeking; api/lib/serve-file.ts streams the requested bytes from disk, with an ETag and 304s, and serves avatars, attachments, covers and thumbnails too. File and thumbnail URLs carry the file's version (size and last change), so the current one is cached for a year and anything else revalidates — a same-size replacement used to stay stale, and a video's still was cached immutable forever under a URL that never changed. Feeds showed image dumps at full size: /api/thumbnails now makes a 960px preview with ffmpeg (GIFs and unreadable images go out as they are), one run per output however many cards ask at once, and ffmpeg is probed once per process instead of spawned per request. Uploads stream to disk; replacing a file writes beside it and renames over, a hard link keeping the old one for rollback instead of holding both in memory; generated stills and previews go when the file is replaced or the dump deleted, and a custom thumbnail with its dump. Outbound: fetchWithTimeout's deadline now covers the body — a server that answered at once and then dripped could hold a create open indefinitely — and pages are read to 4 MB at most; metadata is cached five minutes so the create form's preview and the post that follows share one fetch (refresh-metadata still goes to the page); proxied images sit in a 32 MB LRU. Broadcasts serialize once rather than per socket, and index.html is kept in memory until the file changes. Frontend: currentTime lived in PlayerContext, so every card re-rendered — and re-parsed its Markdown — four times a second while anything played; the playhead has its own PlayerTimeContext now. The socket context is split three ways (feed, chat via useWSChat, presence via useWSPresence), so typing, presence and chat messages leave the feeds alone. DumpCard, JournalCard and Markdown are memoized; card images use the server preview and load lazily; the feed cache is written when the page is left rather than after every pause in scrolling; the theme context value is memoized.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/test/components/media.test.tsx

@@ -5,6 +5,11 @@ import { MediaPlayer } from "../../components/MediaPlayer.tsx";
 import FilePreview from "../../components/FilePreview.tsx";
 import { makeDump, makeSession } from "../fixtures.ts";
 import { renderWithContexts } from "../render.tsx";
+import {
+  dumpFileUrl,
+  dumpFileVersion,
+  dumpThumbnailUrl,
+} from "../../utils/urls.ts";
 
 function media(container: HTMLElement) {
   return container.querySelector<HTMLMediaElement>("audio, video")!;
@@ -221,13 +226,24 @@ describe("FilePreview", () => {
     });
 
   test("images show inline, with the media token", () => {
-    renderWithContexts(<FilePreview dump={file("image/png")} />, { session });
+    const d = file("image/png");
+    renderWithContexts(<FilePreview dump={d} />, { session });
     expect(screen.getByRole("img", { name: "thing" })).toHaveAttribute(
       "src",
-      `http://localhost:8000/api/files/f1?v=2048&token=${session.mediaToken}`,
+      `http://localhost:8000/api/files/f1?v=${
+        dumpFileVersion(d)
+      }&token=${session.mediaToken}`,
     );
   });
 
+  test("a compact image shows the server's preview, not the upload", () => {
+    const d = file("image/png");
+    renderWithContexts(<FilePreview dump={d} compact />, { session });
+    const img = screen.getByRole("img", { name: "thing" });
+    expect(img).toHaveAttribute("src", dumpThumbnailUrl(d, session.mediaToken));
+    expect(img).toHaveAttribute("loading", "lazy");
+  });
+
   test("other files are a download link", () => {
     renderWithContexts(<FilePreview dump={file("application/zip")} />);
     const link = screen.getByRole("link", { name: /Download thing/ });
@@ -253,12 +269,14 @@ describe("FilePreview", () => {
 
   test("compact video claims its generated still as artwork", async () => {
     const play = vi.fn();
-    renderWithContexts(<FilePreview dump={file("video/mp4")} compact />, {
+    const d = file("video/mp4");
+    renderWithContexts(<FilePreview dump={d} compact />, {
       player: { play },
     });
     await userEvent.click(screen.getByRole("button", { name: "Play" }));
-    expect(play.mock.calls[0][0].artworkUrl).toBe(
-      "http://localhost:8000/api/thumbnails/f1",
+    expect(play.mock.calls[0][0].artworkUrl).toBe(dumpThumbnailUrl(d));
+    expect(play.mock.calls[0][0].artworkUrl).toMatch(
+      /^http:\/\/localhost:8000\/api\/thumbnails\/f1\?v=2048-\d+$/,
     );
   });
 
@@ -271,7 +289,7 @@ describe("FilePreview", () => {
         playing: true,
         current: {
           kind: "file",
-          fileUrl: "http://localhost:8000/api/files/f1?v=2048",
+          fileUrl: dumpFileUrl(d),
           mimeType: "video/mp4",
         },
       },

src/test/components/player.test.tsx

@@ -13,6 +13,7 @@ import {
 import { makeDump, makePlaylist } from "../fixtures.ts";
 import { currentPath, renderWithContexts } from "../render.tsx";
 import { markPlaylistVisited } from "../../utils/visited.ts";
+import { dumpThumbnailUrl } from "../../utils/urls.ts";
 
 let player!: React.ContextType<typeof PlayerContext>;
 function Probe() {
@@ -272,22 +273,19 @@ describe("JournalCard", () => {
   });
 
   test("a video file shows its generated still", () => {
+    const dump = makeDump({
+      id: "v",
+      kind: "file",
+      fileMime: "video/mp4",
+      url: undefined,
+    });
     const { container } = renderWithContexts(
       <ul>
-        <JournalCard
-          dump={makeDump({
-            id: "v",
-            kind: "file",
-            fileMime: "video/mp4",
-            url: undefined,
-          })}
-          shape="tall"
-          {...base}
-        />
+        <JournalCard dump={dump} shape="tall" {...base} />
       </ul>,
     );
     expect(container.querySelector("img")!.getAttribute("src")).toBe(
-      "http://localhost:8000/api/thumbnails/v",
+      dumpThumbnailUrl(dump),
     );
   });
 });

src/test/contexts/PlayerProvider.test.tsx

@@ -1,11 +1,12 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-import { act, renderHook, waitFor } from "@testing-library/react";
-import { type ReactNode, useContext, useState } from "react";
+import { act, render, renderHook, waitFor } from "@testing-library/react";
+import { memo, type ReactNode, useContext, useState } from "react";
 import { AuthContext } from "../../contexts/AuthContext.ts";
 import { PlayerProvider } from "../../contexts/PlayerProvider.tsx";
 import {
   PlayerContext,
   type PlayerItem,
+  PlayerTimeContext,
 } from "../../contexts/PlayerContext.ts";
 import type { AuthResponse } from "../../model.ts";
 import { STREAM_STALE_MS } from "../../utils/streamSources.ts";
@@ -64,7 +65,10 @@ function wrapperFor(initial: AuthResponse | null) {
 }
 
 function setup(session: AuthResponse | null = null) {
-  const hook = renderHook(() => useContext(PlayerContext), {
+  const hook = renderHook(() => ({
+    ...useContext(PlayerContext),
+    ...useContext(PlayerTimeContext),
+  }), {
     wrapper: wrapperFor(session),
   });
   return { hook, p: () => hook.result.current };
@@ -395,3 +399,41 @@ describe("expiring streams", () => {
 beforeEach(() => {
   setSession = () => {};
 });
+
+describe("the playhead", () => {
+  test("a time update re-renders what reads the time, not the rest", () => {
+    let controls = 0;
+    let clock = 0;
+    // Two consumers under one provider: one reads the controls, one the time.
+    const Probe = () => {
+      useContext(PlayerContext);
+      controls++;
+      return null;
+    };
+    const Clock = () => {
+      useContext(PlayerTimeContext);
+      clock++;
+      return null;
+    };
+    const Wrapper = wrapperFor(null);
+    let onTimeUpdate!: (t: number, d: number) => void;
+    const Grab = () => {
+      onTimeUpdate = useContext(PlayerContext).onTimeUpdate;
+      return null;
+    };
+    const MemoProbe = memo(Probe);
+    const MemoClock = memo(Clock);
+    render(
+      <Wrapper>
+        <Grab />
+        <MemoProbe />
+        <MemoClock />
+      </Wrapper>,
+    );
+    const before = { controls, clock };
+    act(() => onTimeUpdate(5, 100));
+    act(() => onTimeUpdate(6, 100));
+    expect(controls).toBe(before.controls);
+    expect(clock).toBe(before.clock + 2);
+  });
+});

src/test/contexts/WSProvider.test.tsx

@@ -5,7 +5,7 @@ import { useContext } from "react";
 import { AuthProvider } from "../../contexts/AuthProvider.tsx";
 import { WSProvider } from "../../contexts/WSProvider.tsx";
 import { AvatarOverrideContext } from "../../contexts/AvatarOverrideContext.ts";
-import { useWS } from "../../hooks/useWS.ts";
+import { useWS, useWSChat, useWSPresence } from "../../hooks/useWS.ts";
 import { useAuth } from "../../hooks/useAuth.ts";
 import { FakeWebSocket } from "../ws.ts";
 import { defaultRoutes } from "../render.tsx";
@@ -36,7 +36,7 @@ function setup({ signedIn = true } = {}) {
   defaultRoutes({ session: signedIn ? me : null });
   const hook = renderHook(
     () => ({
-      ws: useWS(),
+      ws: { ...useWS(), ...useWSChat(), ...useWSPresence() },
       auth: useAuth(),
       avatars: useContext(AvatarOverrideContext),
     }),
@@ -805,3 +805,33 @@ describe("chat", () => {
     });
   });
 });
+
+describe("split contexts", () => {
+  test("chat, typing and presence leave the feed's context alone", () => {
+    storeSession(me);
+    defaultRoutes({ session: me });
+    const feeds: unknown[] = [];
+    const chats: unknown[] = [];
+    renderHook(() => {
+      feeds.push(useWS());
+      chats.push(useWSChat());
+    }, { wrapper });
+    const socket = FakeWebSocket.last;
+    socket.welcome();
+    const feed = feeds.at(-1);
+    const chat = chats.at(-1);
+    socket.receive({
+      type: "chat_typing_update",
+      users: [{ userId: "x", username: "x", hasAvatar: false }],
+    });
+    socket.receive({
+      type: "presence_update",
+      users: [{ userId: "x", username: "x", hasAvatar: false }],
+    });
+    socket.receive({ type: "chat_message", message: wire(makeChatMessage()) });
+    // The feed's value is the same object: its consumers had no reason to
+    // re-render. The chat's moved on.
+    expect(feeds.at(-1)).toBe(feed);
+    expect(chats.at(-1)).not.toBe(chat);
+  });
+});

src/test/hooks/misc.test.tsx

@@ -379,22 +379,51 @@ describe("useScrollLock", () => {
 });
 
 describe("useScrollSave", () => {
-  test("debounces scroll positions while enabled", () => {
-    vi.useFakeTimers();
+  const scrollTo = (y: number) => {
+    Object.defineProperty(globalThis, "scrollY", {
+      value: y,
+      configurable: true,
+    });
+    globalThis.dispatchEvent(new Event("scroll"));
+  };
+
+  test("saves the last position when the page is left, not while scrolling", () => {
     const onSave = vi.fn();
-    const { rerender, unmount } = renderHook(
-      ({ on }) => useScrollSave(on, onSave),
-      { initialProps: { on: true } },
-    );
-    globalThis.dispatchEvent(new Event("scroll"));
-    globalThis.dispatchEvent(new Event("scroll"));
-    vi.advanceTimersByTime(100);
-    expect(onSave).toHaveBeenCalledTimes(1);
-    rerender({ on: false });
-    globalThis.dispatchEvent(new Event("scroll"));
-    vi.advanceTimersByTime(100);
-    expect(onSave).toHaveBeenCalledTimes(1);
+    const { unmount } = renderHook(() => useScrollSave(true, onSave));
+    scrollTo(100);
+    scrollTo(250);
+    expect(onSave).not.toHaveBeenCalled();
+    // The next page has already scrolled back up by the time this unmounts.
+    Object.defineProperty(globalThis, "scrollY", {
+      value: 0,
+      configurable: true,
+    });
     unmount();
+    expect(onSave).toHaveBeenCalledExactlyOnceWith(250);
+  });
+
+  test("saves on pagehide, with the latest callback", () => {
+    const first = vi.fn();
+    const second = vi.fn();
+    const { rerender, unmount } = renderHook(
+      ({ cb }) => useScrollSave(true, cb),
+      { initialProps: { cb: first } },
+    );
+    scrollTo(40);
+    rerender({ cb: second });
+    globalThis.dispatchEvent(new Event("pagehide"));
+    expect(first).not.toHaveBeenCalled();
+    expect(second).toHaveBeenCalledExactlyOnceWith(40);
+    unmount();
+  });
+
+  test("nothing is tracked or saved while disabled", () => {
+    const onSave = vi.fn();
+    const { unmount } = renderHook(() => useScrollSave(false, onSave));
+    scrollTo(10);
+    globalThis.dispatchEvent(new Event("pagehide"));
+    unmount();
+    expect(onSave).not.toHaveBeenCalled();
   });
 });
 

src/test/render.tsx

@@ -8,9 +8,15 @@ import type { AuthResponse, Category } from "../model.ts";
 import { AuthContext } from "../contexts/AuthContext.ts";
 import { AuthProvider } from "../contexts/AuthProvider.tsx";
 import {
+  defaultWSChatValue,
+  defaultWSPresenceValue,
   defaultWSValue,
+  WSChatContext,
+  type WSChatContextValue,
   WSContext,
   type WSContextValue,
+  WSPresenceContext,
+  type WSPresenceContextValue,
 } from "../contexts/WSContext.ts";
 import { WSProvider } from "../contexts/WSProvider.tsx";
 import {
@@ -25,9 +31,12 @@ import {
 } from "../contexts/CategoriesContext.ts";
 import { CategoriesProvider } from "../contexts/CategoriesProvider.tsx";
 import {
+  defaultPlayerTimeValue,
   defaultPlayerValue,
   PlayerContext,
   type PlayerContextValue,
+  PlayerTimeContext,
+  type PlayerTimeValue,
 } from "../contexts/PlayerContext.ts";
 import { PlayerProvider } from "../contexts/PlayerProvider.tsx";
 import { ThemeProvider } from "../contexts/ThemeProvider.tsx";
@@ -84,10 +93,11 @@ function Router(
 
 export interface StubOptions extends RouterOptions {
   session?: AuthResponse | null;
-  ws?: Partial<WSContextValue>;
+  /** Any of the socket's three contexts' fields; each goes to its own. */
+  ws?: Partial<WSContextValue & WSChatContextValue & WSPresenceContextValue>;
   follows?: Partial<FollowContextValue>;
   categories?: Category[] | Partial<CategoriesContextValue>;
-  player?: Partial<PlayerContextValue>;
+  player?: Partial<PlayerContextValue & PlayerTimeValue>;
 }
 
 function StubAuth(
@@ -101,6 +111,17 @@ function StubAuth(
   );
 }
 
+/** `defaults`, with whichever of its keys `overrides` sets. */
+function pick<T extends object>(defaults: T, overrides: object = {}): T {
+  const out = { ...defaults };
+  for (const key of Object.keys(defaults) as (keyof T)[]) {
+    if (key in overrides) {
+      out[key] = (overrides as T)[key];
+    }
+  }
+  return out;
+}
+
 function categoriesValue(
   c: StubOptions["categories"],
 ): CategoriesContextValue {
@@ -130,17 +151,36 @@ export function renderWithContexts(
         <PlayerContext.Provider
           value={{ ...defaultPlayerValue, ...opts.player }}
         >
-          <WSContext.Provider value={{ ...defaultWSValue, ...opts.ws }}>
-            <FollowContext.Provider
-              value={{ ...defaultFollowValue, isLoaded: true, ...opts.follows }}
-            >
-              <CategoriesContext.Provider
-                value={categoriesValue(opts.categories)}
-              >
-                <Router {...opts}>{children}</Router>
-              </CategoriesContext.Provider>
-            </FollowContext.Provider>
-          </WSContext.Provider>
+          <PlayerTimeContext.Provider
+            value={{
+              currentTime: opts.player?.currentTime ??
+                defaultPlayerTimeValue.currentTime,
+              duration: opts.player?.duration ??
+                defaultPlayerTimeValue.duration,
+            }}
+          >
+            <WSContext.Provider value={pick(defaultWSValue, opts.ws)}>
+              <WSChatContext.Provider value={pick(defaultWSChatValue, opts.ws)}>
+                <WSPresenceContext.Provider
+                  value={pick(defaultWSPresenceValue, opts.ws)}
+                >
+                  <FollowContext.Provider
+                    value={{
+                      ...defaultFollowValue,
+                      isLoaded: true,
+                      ...opts.follows,
+                    }}
+                  >
+                    <CategoriesContext.Provider
+                      value={categoriesValue(opts.categories)}
+                    >
+                      <Router {...opts}>{children}</Router>
+                    </CategoriesContext.Provider>
+                  </FollowContext.Provider>
+                </WSPresenceContext.Provider>
+              </WSChatContext.Provider>
+            </WSContext.Provider>
+          </PlayerTimeContext.Provider>
         </PlayerContext.Provider>
       </StubAuth>
     </I18nProvider>

src/test/utils/misc.test.ts

@@ -141,12 +141,17 @@ describe("thumbnail tint", () => {
 });
 
 describe("urls", () => {
-  test("dumpFileUrl versions by size and carries the token", () => {
-    expect(dumpFileUrl({ id: "d1", fileSize: 42 })).toBe(
-      `${API_URL}/api/files/d1?v=42`,
+  test("dumpFileUrl versions by size and last change, and carries the token", () => {
+    const createdAt = new Date(1000);
+    const updatedAt = new Date(2000);
+    expect(dumpFileUrl({ id: "d1", fileSize: 42, createdAt })).toBe(
+      `${API_URL}/api/files/d1?v=42-1000`,
     );
+    // An edit (a replaced file among them) moves the version on.
+    expect(dumpFileUrl({ id: "d1", fileSize: 42, createdAt, updatedAt }))
+      .toBe(`${API_URL}/api/files/d1?v=42-2000`);
     expect(dumpFileUrl({ id: "d1" }, "t o+k")).toBe(
-      `${API_URL}/api/files/d1?v=0&token=t%20o%2Bk`,
+      `${API_URL}/api/files/d1?v=0-0&token=t%20o%2Bk`,
     );
   });
   test("dumpThumbnailUrl", () => {
@@ -154,6 +159,9 @@ describe("urls", () => {
     expect(dumpThumbnailUrl({ id: "d1" }, "tk")).toBe(
       `${API_URL}/api/thumbnails/d1?token=tk`,
     );
+    expect(
+      dumpThumbnailUrl({ id: "d1", fileSize: 7, createdAt: new Date(5) }, "tk"),
+    ).toBe(`${API_URL}/api/thumbnails/d1?v=7-5&token=tk`);
   });
   test("normalizeUrl adds a scheme when there's none", () => {
     expect(normalizeUrl("  example.com/x ")).toBe("https://example.com/x");