From 2cb89f89742abfa1e3b74a8c62afeb5b49037f90 Mon Sep 17 00:00:00 2001
From: Grace Kind <gracekind400@gmail.com>
Date: Sun, 19 Jul 2026 22:01:54 -0500
Subject: [PATCH] Add unit tests and remove todo comments

---
 src/js/api.js                                 |    1 -
 src/js/navigation.js                          |    2 -
 src/js/views/home.view.js                     |    1 -
 src/js/views/profile.view.js                  |    1 -
 .../specs/components/drafts-dialog.test.js    |  550 +++++++
 .../specs/components/post-composer.test.js    | 1315 ++++++++++++++++-
 .../specs/components/toggle-switch.test.js    |  246 +++
 tests/unit/specs/dataLayer/derived.test.js    |  872 +++++++++++
 tests/unit/specs/dataLayer/requests.test.js   | 1025 +++++++++++++
 tests/unit/specs/postSeenObserver.test.js     |  192 ++-
 10 files changed, 4198 insertions(+), 7 deletions(-)
 create mode 100644 tests/unit/specs/components/drafts-dialog.test.js
 create mode 100644 tests/unit/specs/components/toggle-switch.test.js

diff --git a/src/js/api.js b/src/js/api.js
index f748f3bc..23f1fadd 100644
--- a/src/js/api.js
+++ b/src/js/api.js
@@ -521,7 +521,6 @@ export class Api {
   }
 
   async getPost(postUri, { labelers = [] } = {}) {
-    // todo - individual API call?
     const posts = await this.getPosts([postUri], { labelers });
     if (posts.length === 0) {
       throw new Error(`Post not found: ${postUri}`);
diff --git a/src/js/navigation.js b/src/js/navigation.js
index cadea2d8..53b86667 100644
--- a/src/js/navigation.js
+++ b/src/js/navigation.js
@@ -78,8 +78,6 @@ export function linkToSearchPostsByProfile(profile) {
 }
 
 function getPermalinkOrigin() {
-  // return window.location.origin;
-  // TODO: make configurable
   return "https://bsky.app";
 }
 
diff --git a/src/js/views/home.view.js b/src/js/views/home.view.js
index a45c7916..c8bc1567 100644
--- a/src/js/views/home.view.js
+++ b/src/js/views/home.view.js
@@ -149,7 +149,6 @@ class HomeView extends View {
       if (window.scrollY > 0) {
         window.scrollTo({ top: -1, behavior: "smooth" });
       }
-      // TODO - add setting to prevent reload?
       state.$isReloadingFeed.set(true);
       try {
         await loadCurrentFeed({ reload: true });
diff --git a/src/js/views/profile.view.js b/src/js/views/profile.view.js
index d7c4078c..a601884a 100644
--- a/src/js/views/profile.view.js
+++ b/src/js/views/profile.view.js
@@ -131,7 +131,6 @@ class ProfileView extends View {
       if (window.scrollY > 0) {
         window.scrollTo({ top: -1, behavior: "smooth" });
       }
-      // TODO - add setting to prevent reload?
       await loadAuthorFeed({ reload: true });
     }
 
diff --git a/tests/unit/specs/components/drafts-dialog.test.js b/tests/unit/specs/components/drafts-dialog.test.js
new file mode 100644
index 00000000..f7d6b78d
--- /dev/null
+++ b/tests/unit/specs/components/drafts-dialog.test.js
@@ -0,0 +1,550 @@
+import { describe, it, beforeEach, afterEach } from "node:test";
+import assert from "node:assert/strict";
+import { Signal } from "/js/signals.js";
+import { getDraftDeviceId } from "/js/drafts.js";
+import "/js/components/drafts-dialog.js";
+
+describe("drafts-dialog", () => {
+  const originalSetTimeout = globalThis.setTimeout;
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    globalThis.setTimeout = (fn) => originalSetTimeout(fn, 0);
+  });
+
+  afterEach(() => {
+    globalThis.setTimeout = originalSetTimeout;
+    delete globalThis.__testConfirmation;
+  });
+
+  async function nextFrame() {
+    // The render effect flushes on requestAnimationFrame (setTimeout(0) in the
+    // test env), so one tick applies pending renders.
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  }
+
+  async function flushMicrotasks() {
+    for (let i = 0; i < 5; i++) {
+      await Promise.resolve();
+    }
+  }
+
+  function createFakeDataLayer({ loadDrafts, deleteDraft } = {}) {
+    const $hydratedDrafts = new Signal.State(null);
+    const loadCalls = [];
+    const deleteCalls = [];
+    const dataLayer = {
+      derived: { $hydratedDrafts },
+      requests: {
+        loadDrafts: (options) => {
+          loadCalls.push(options);
+          if (loadDrafts) {
+            return loadDrafts(options);
+          }
+          return Promise.resolve();
+        },
+      },
+      mutations: {
+        deleteDraft: (args) => {
+          deleteCalls.push(args);
+          if (deleteDraft) {
+            return deleteDraft(args);
+          }
+          return Promise.resolve();
+        },
+      },
+    };
+    return { dataLayer, $hydratedDrafts, loadCalls, deleteCalls };
+  }
+
+  function createDialog(dataLayer) {
+    const container = document.createElement("div");
+    container.className = "page-visible";
+    const element = document.createElement("drafts-dialog");
+    element.dataLayer = dataLayer;
+    container.appendChild(element);
+    document.body.appendChild(container);
+    return element;
+  }
+
+  // Mirrors the shape produced by derived.$hydratedDrafts: the hydrated posts
+  // live on draftView.posts while the raw record (deviceId, localRefs) lives
+  // on draftView.draft. The dialog only reads display fields from the
+  // hydrated posts, so sharing one array between both is fine here.
+  function createDraftView({
+    id = "draft-1",
+    updatedAt = "2025-01-01T00:00:00.000Z",
+    deviceId = getDraftDeviceId(),
+    posts = [{ text: "Hello draft" }],
+  } = {}) {
+    return {
+      id,
+      updatedAt,
+      draft: { deviceId, deviceName: "Web", posts },
+      posts,
+    };
+  }
+
+  function seedDrafts($hydratedDrafts, draftViews, { cursor = null } = {}) {
+    $hydratedDrafts.set({ drafts: draftViews, cursor });
+  }
+
+  describe("DraftsDialog - loading", () => {
+    it("should render the dialog chrome with a loading spinner while drafts are null", () => {
+      const { dataLayer } = createFakeDataLayer();
+      const element = createDialog(dataLayer);
+      const dialog = element.querySelector('[data-testid="drafts-dialog"]');
+      assert(dialog !== null);
+      assert(dialog.classList.contains("bottom-sheet"));
+      assert(dialog.classList.contains("bottom-sheet-stacked"));
+      assert(
+        element.querySelector('[data-testid="drafts-dialog-back"]') !== null,
+      );
+      assert(element.querySelector(".loading-spinner") !== null);
+      assert.deepEqual(
+        element.querySelector('[data-testid="draft-item"]'),
+        null,
+      );
+    });
+
+    it("should load drafts with reload on connect when none are cached", async () => {
+      const { dataLayer, loadCalls } = createFakeDataLayer();
+      createDialog(dataLayer);
+      await flushMicrotasks();
+      assert.deepEqual(loadCalls, [{ reload: true }]);
+    });
+
+    it("should not reload drafts that are already cached", async () => {
+      const { dataLayer, $hydratedDrafts, loadCalls } = createFakeDataLayer();
+      seedDrafts($hydratedDrafts, [createDraftView()]);
+      createDialog(dataLayer);
+      await flushMicrotasks();
+      assert.deepEqual(loadCalls.length, 0);
+    });
+
+    it("should show the error state when the initial load fails", async (t) => {
+      t.mock.method(console, "error", () => {});
+      const { dataLayer } = createFakeDataLayer({
+        loadDrafts: () => Promise.reject(new Error("boom")),
+      });
+      const element = createDialog(dataLayer);
+      await flushMicrotasks();
+      await nextFrame();
+      assert(element.querySelector('[data-testid="error-state"]') !== null);
+      assert.deepEqual(element.querySelector(".loading-spinner"), null);
+    });
+
+    it("should show the empty state when there are no drafts", async () => {
+      const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
+      seedDrafts($hydratedDrafts, []);
+      const element = createDialog(dataLayer);
+      assert(element.querySelector('[data-testid="empty-state"]') !== null);
+      assert.deepEqual(
+        element.querySelector('[data-testid="draft-item"]'),
+        null,
+      );
+    });
+  });
+
+  describe("DraftsDialog - draft items", () => {
+    it("should render one item per draft with its text and a timestamp", () => {
+      const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
+      seedDrafts($hydratedDrafts, [
+        createDraftView({ id: "draft-1", posts: [{ text: "First draft" }] }),
+        createDraftView({ id: "draft-2", posts: [{ text: "Second draft" }] }),
+      ]);
+      const element = createDialog(dataLayer);
+      const items = element.querySelectorAll('[data-testid="draft-item"]');
+      assert.deepEqual(items.length, 2);
+      assert(items[0].textContent.includes("First draft"));
+      assert(items[1].textContent.includes("Second draft"));
+      assert(items[0].querySelector(".draft-item-timestamp") !== null);
+      assert.deepEqual(
+        items[0].querySelectorAll('[data-testid="draft-item-tag-thread"]')
+          .length,
+        0,
+      );
+    });
+
+    it("should tag multi-post drafts with the extra post count", () => {
+      const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
+      seedDrafts($hydratedDrafts, [
+        createDraftView({
+          id: "draft-1",
+          posts: [{ text: "one" }, { text: "two" }],
+        }),
+        createDraftView({
+          id: "draft-2",
+          posts: [{ text: "one" }, { text: "two" }, { text: "three" }],
+        }),
+      ]);
+      const element = createDialog(dataLayer);
+      const tags = element.querySelectorAll(
+        '[data-testid="draft-item-tag-thread"]',
+      );
+      assert.deepEqual(tags.length, 2);
+      assert.deepEqual(tags[0].textContent.trim(), "1 more post");
+      assert.deepEqual(tags[1].textContent.trim(), "2 more posts");
+    });
+
+    it("should tag drafts containing a quote", () => {
+      const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
+      seedDrafts($hydratedDrafts, [
+        createDraftView({
+          posts: [
+            {
+              text: "quoting",
+              embedRecords: [
+                { record: { uri: "at://did:plc:a/app.bsky.feed.post/1" } },
+              ],
+            },
+          ],
+        }),
+      ]);
+      const element = createDialog(dataLayer);
+      assert(
+        element.querySelector('[data-testid="draft-item-tag-quote"]') !== null,
+      );
+    });
+
+    it("should render media thumbs for drafts from this device", () => {
+      const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
+      seedDrafts($hydratedDrafts, [
+        createDraftView({
+          posts: [
+            {
+              text: "with media",
+              embedImages: [
+                {
+                  localRef: { path: "images/a" },
+                  previewUrl: "blob:image-a",
+                  exists: true,
+                  alt: "an image",
+                },
+              ],
+              embedVideos: [{ localRef: { path: "videos/b" }, exists: true }],
+              embedExternals: [
+                { uri: "https://media.tenor.com/x/fun.gif?ww=200&hh=100" },
+              ],
+            },
+          ],
+        }),
+      ]);
+      const element = createDialog(dataLayer);
+      const media = element.querySelector('[data-testid="draft-item-media"]');
+      assert(media !== null);
+      const thumbs = media.querySelectorAll(".draft-item-thumb");
+      assert.deepEqual(thumbs.length, 3);
+      assert.deepEqual(thumbs[0].getAttribute("src"), "blob:image-a");
+      assert.deepEqual(thumbs[0].getAttribute("alt"), "an image");
+      assert(
+        thumbs[1]
+          .getAttribute("src")
+          .startsWith("https://media.tenor.com/x/fun.gif"),
+      );
+      assert(thumbs[2].classList.contains("draft-item-video-placeholder"));
+      assert.deepEqual(
+        element.querySelector('[data-testid="draft-item-tag-missing-media"]'),
+        null,
+      );
+    });
+
+    it("should warn about missing media for drafts from this device", () => {
+      const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
+      seedDrafts($hydratedDrafts, [
+        createDraftView({
+          posts: [
+            {
+              text: "lost media",
+              embedImages: [{ localRef: { path: "images/a" }, exists: false }],
+            },
+          ],
+        }),
+      ]);
+      const element = createDialog(dataLayer);
+      assert(
+        element.querySelector(
+          '[data-testid="draft-item-tag-missing-media"]',
+        ) !== null,
+      );
+      assert.deepEqual(
+        element.querySelector('[data-testid="draft-item-tag-foreign-media"]'),
+        null,
+      );
+      assert.deepEqual(
+        element.querySelector('[data-testid="draft-item-media"]'),
+        null,
+      );
+    });
+
+    it("should tag foreign-device drafts with missing media and hide their thumbs", () => {
+      const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
+      seedDrafts($hydratedDrafts, [
+        createDraftView({
+          deviceId: "another-device",
+          posts: [
+            {
+              text: "foreign media",
+              embedImages: [
+                {
+                  localRef: { path: "images/a" },
+                  previewUrl: "blob:image-a",
+                  exists: false,
+                },
+              ],
+            },
+          ],
+        }),
+      ]);
+      const element = createDialog(dataLayer);
+      assert(
+        element.querySelector(
+          '[data-testid="draft-item-tag-foreign-media"]',
+        ) !== null,
+      );
+      assert.deepEqual(
+        element.querySelector('[data-testid="draft-item-tag-missing-media"]'),
+        null,
+      );
+      assert.deepEqual(
+        element.querySelector('[data-testid="draft-item-media"]'),
+        null,
+      );
+    });
+  });
+
+  describe("DraftsDialog - selecting a draft", () => {
+    it("should close and dispatch draft-selected with the draft on click", () => {
+      const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
+      const draftView = createDraftView();
+      seedDrafts($hydratedDrafts, [draftView]);
+      const element = createDialog(dataLayer);
+      const events = [];
+      element.addEventListener("dialog-closed", () => events.push("closed"));
+      element.addEventListener("draft-selected", (event) =>
+        events.push(event.detail.draftView),
+      );
+      element.querySelector('[data-testid="draft-item"]').click();
+      assert.deepEqual(events, ["closed", draftView]);
+    });
+
+    it("should select the draft on Enter", () => {
+      const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
+      const draftView = createDraftView();
+      seedDrafts($hydratedDrafts, [draftView]);
+      const element = createDialog(dataLayer);
+      let selected = null;
+      element.addEventListener("draft-selected", (event) => {
+        selected = event.detail.draftView;
+      });
+      element
+        .querySelector('[data-testid="draft-item"]')
+        .dispatchEvent(
+          new window.KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
+        );
+      assert.deepEqual(selected, draftView);
+    });
+  });
+
+  describe("DraftsDialog - deleting a draft", () => {
+    it("should delete the draft with its local refs and dispatch draft-deleted on confirm", async () => {
+      const { dataLayer, $hydratedDrafts, deleteCalls } = createFakeDataLayer();
+      seedDrafts($hydratedDrafts, [
+        createDraftView({
+          id: "draft-9",
+          posts: [
+            {
+              text: "doomed",
+              embedImages: [
+                { localRef: { path: "images/a" }, previewUrl: "blob:a" },
+              ],
+              embedVideos: [{ localRef: { path: "videos/b" }, exists: true }],
+            },
+          ],
+        }),
+      ]);
+      const element = createDialog(dataLayer);
+      globalThis.__testConfirmation = (resolve) => resolve(true);
+      let deletedDetail = null;
+      element.addEventListener("draft-deleted", (event) => {
+        deletedDetail = event.detail;
+      });
+      element.querySelector('[data-testid="draft-item-delete"]').click();
+      await flushMicrotasks();
+      assert.deepEqual(deleteCalls, [
+        { draftId: "draft-9", localRefs: ["images/a", "videos/b"] },
+      ]);
+      assert.deepEqual(deletedDetail, { draftId: "draft-9" });
+    });
+
+    it("should not delete or dispatch when the confirm is declined", async () => {
+      const { dataLayer, $hydratedDrafts, deleteCalls } = createFakeDataLayer();
+      seedDrafts($hydratedDrafts, [createDraftView()]);
+      const element = createDialog(dataLayer);
+      globalThis.__testConfirmation = (resolve) => resolve(false);
+      let deleted = false;
+      element.addEventListener("draft-deleted", () => {
+        deleted = true;
+      });
+      element.querySelector('[data-testid="draft-item-delete"]').click();
+      await flushMicrotasks();
+      assert.deepEqual(deleteCalls.length, 0);
+      assert.deepEqual(deleted, false);
+    });
+
+    it("should show an error toast and skip draft-deleted when the delete fails", async (t) => {
+      t.mock.method(console, "error", () => {});
+      const { dataLayer, $hydratedDrafts } = createFakeDataLayer({
+        deleteDraft: () => Promise.reject(new Error("boom")),
+      });
+      seedDrafts($hydratedDrafts, [createDraftView()]);
+      const element = createDialog(dataLayer);
+      globalThis.__testConfirmation = (resolve) => resolve(true);
+      let deleted = false;
+      element.addEventListener("draft-deleted", () => {
+        deleted = true;
+      });
+      element.querySelector('[data-testid="draft-item-delete"]').click();
+      await flushMicrotasks();
+      assert.deepEqual(deleted, false);
+      const toast = document.body.querySelector('[data-testid="toast"]');
+      assert(toast !== null, "toast should be shown");
+      assert(toast.textContent.includes("Failed to delete draft"));
+    });
+
+    it("should not select the draft when the delete button is clicked", async () => {
+      const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
+      seedDrafts($hydratedDrafts, [createDraftView()]);
+      const element = createDialog(dataLayer);
+      globalThis.__testConfirmation = (resolve) => resolve(false);
+      let selected = false;
+      element.addEventListener("draft-selected", () => {
+        selected = true;
+      });
+      element.querySelector('[data-testid="draft-item-delete"]').click();
+      await flushMicrotasks();
+      assert.deepEqual(selected, false);
+    });
+  });
+
+  describe("DraftsDialog - pagination", () => {
+    it("should disable the infinite scroll container when there is no cursor", () => {
+      const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
+      seedDrafts($hydratedDrafts, [createDraftView()]);
+      const element = createDialog(dataLayer);
+      const container = element.querySelector("infinite-scroll-container");
+      assert(container.hasAttribute("disabled"));
+    });
+
+    it("should load the next page on load-more and resume when done", async () => {
+      let resolveLoad;
+      const { dataLayer, $hydratedDrafts, loadCalls } = createFakeDataLayer({
+        loadDrafts: () =>
+          new Promise((resolve) => {
+            resolveLoad = resolve;
+          }),
+      });
+      seedDrafts($hydratedDrafts, [createDraftView()], { cursor: "page-2" });
+      const element = createDialog(dataLayer);
+      const container = element.querySelector("infinite-scroll-container");
+      assert.deepEqual(container.hasAttribute("disabled"), false);
+      let resumed = 0;
+      container.dispatchEvent(
+        new window.CustomEvent("load-more", {
+          detail: { resume: () => resumed++ },
+        }),
+      );
+      await nextFrame();
+      assert.deepEqual(loadCalls, [undefined]);
+      assert(
+        container.querySelector(".loading-spinner") !== null,
+        "loading-more spinner should show while the page loads",
+      );
+      assert.deepEqual(resumed, 0);
+      resolveLoad();
+      await flushMicrotasks();
+      await nextFrame();
+      assert.deepEqual(resumed, 1);
+      assert.deepEqual(container.querySelector(".loading-spinner"), null);
+    });
+
+    it("should resume immediately without a second request while a page load is pending", async () => {
+      let resolveLoad;
+      const { dataLayer, $hydratedDrafts, loadCalls } = createFakeDataLayer({
+        loadDrafts: () =>
+          new Promise((resolve) => {
+            resolveLoad = resolve;
+          }),
+      });
+      seedDrafts($hydratedDrafts, [createDraftView()], { cursor: "page-2" });
+      const element = createDialog(dataLayer);
+      const container = element.querySelector("infinite-scroll-container");
+      const resumes = [];
+      container.dispatchEvent(
+        new window.CustomEvent("load-more", {
+          detail: { resume: () => resumes.push("first") },
+        }),
+      );
+      container.dispatchEvent(
+        new window.CustomEvent("load-more", {
+          detail: { resume: () => resumes.push("second") },
+        }),
+      );
+      assert.deepEqual(loadCalls.length, 1);
+      assert.deepEqual(resumes, ["second"]);
+      resolveLoad();
+      await flushMicrotasks();
+      assert.deepEqual(resumes, ["second", "first"]);
+    });
+  });
+
+  describe("DraftsDialog - dismissal", () => {
+    it("should open the dialog as a modal and close on the back button", () => {
+      const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
+      seedDrafts($hydratedDrafts, []);
+      const element = createDialog(dataLayer);
+      element.open();
+      const dialog = element.querySelector("dialog");
+      assert(dialog.open);
+      let closed = false;
+      element.addEventListener("dialog-closed", () => {
+        closed = true;
+      });
+      element.querySelector('[data-testid="drafts-dialog-back"]').click();
+      assert(closed);
+      assert.deepEqual(dialog.open, false);
+    });
+
+    it("should close on cancel (Escape)", () => {
+      const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
+      seedDrafts($hydratedDrafts, []);
+      const element = createDialog(dataLayer);
+      element.open();
+      let closed = false;
+      element.addEventListener("dialog-closed", () => {
+        closed = true;
+      });
+      const dialog = element.querySelector("dialog");
+      dialog.dispatchEvent(new window.Event("cancel", { bubbles: false }));
+      assert(closed);
+      assert.deepEqual(dialog.open, false);
+    });
+
+    it("should close on a backdrop click but not on a click inside the sheet", () => {
+      const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
+      seedDrafts($hydratedDrafts, []);
+      const element = createDialog(dataLayer);
+      element.open();
+      let closedCount = 0;
+      element.addEventListener("dialog-closed", () => closedCount++);
+      element
+        .querySelector(".drafts-dialog-content")
+        .dispatchEvent(new window.MouseEvent("click", { bubbles: true }));
+      assert.deepEqual(closedCount, 0);
+      const dialog = element.querySelector("dialog");
+      dialog.dispatchEvent(new window.MouseEvent("click", { bubbles: false }));
+      assert.deepEqual(closedCount, 1);
+      assert.deepEqual(dialog.open, false);
+    });
+  });
+});
diff --git a/tests/unit/specs/components/post-composer.test.js b/tests/unit/specs/components/post-composer.test.js
index ae0d6cd2..2bfb711f 100644
--- a/tests/unit/specs/components/post-composer.test.js
+++ b/tests/unit/specs/components/post-composer.test.js
@@ -1,8 +1,9 @@
-import { describe, it, beforeEach, afterEach } from "node:test";
+import { describe, it, beforeEach, afterEach, mock } from "node:test";
 import assert from "node:assert/strict";
 import { waitFor } from "../../testHelpers.js";
 import { ApiError } from "/js/api.js";
 import { getDraftDeviceId } from "/js/drafts.js";
+import { LINK_CARD_SERVICE_URL } from "/js/config.js";
 import "/js/components/post-composer.js";
 
 describe("post-composer", () => {
@@ -1959,4 +1960,1316 @@ describe("post-composer", () => {
       assert.deepEqual(getFirstPost(element).video, null);
     });
   });
+
+  function toastText() {
+    return [...document.querySelectorAll(".toast")]
+      .map((toast) => toast.textContent)
+      .join(" ");
+  }
+
+  function makeGeneratorRecord() {
+    return {
+      $type: "app.bsky.feed.defs#generatorView",
+      uri: "at://did:plc:creator1/app.bsky.feed.generator/cool-feed",
+      cid: "feedcid",
+      displayName: "Cool Feed",
+      creator: { did: "did:plc:creator1", handle: "creator1.test" },
+    };
+  }
+
+  // JSDOM can't decode video files: mint fake object URLs and fire
+  // loadedmetadata (or error) on any <video> created by readVideoMetadata.
+  function installVideoEnvStubs() {
+    const originalCreateObjectURL = URL.createObjectURL;
+    const originalRevokeObjectURL = URL.revokeObjectURL;
+    const originalCreateElement = document.createElement;
+    const controls = {
+      metadataShouldFail: false,
+      revokedUrls: [],
+    };
+    URL.createObjectURL = () => "blob:mock";
+    URL.revokeObjectURL = (url) => controls.revokedUrls.push(url);
+    document.createElement = function (tagName, ...args) {
+      const created = originalCreateElement.call(this, tagName, ...args);
+      if (String(tagName).toLowerCase() === "video") {
+        setTimeout(() => {
+          if (controls.metadataShouldFail) {
+            created.onerror?.();
+          } else {
+            created.onloadedmetadata?.();
+          }
+        }, 0);
+      }
+      return created;
+    };
+    controls.restore = () => {
+      URL.createObjectURL = originalCreateObjectURL;
+      URL.revokeObjectURL = originalRevokeObjectURL;
+      document.createElement = originalCreateElement;
+    };
+    return controls;
+  }
+
+  function makeVideoDataLayer({
+    statuses = [
+      {
+        state: "JOB_STATE_COMPLETED",
+        progress: 100,
+        blob: { $type: "blob", ref: "blobref" },
+      },
+    ],
+    limits = { canUpload: true },
+  } = {}) {
+    let statusIndex = 0;
+    const statusCalls = [];
+    return {
+      statusCalls,
+      api: {
+        getVideoUploadLimits: async () => limits,
+        uploadVideoBlob: async () => ({ jobId: "job-1" }),
+        getVideoJobStatus: async () => {
+          const status = statuses[Math.min(statusIndex++, statuses.length - 1)];
+          statusCalls.push(status);
+          return status;
+        },
+      },
+    };
+  }
+
+  describe("PostComposer - media preview actions", () => {
+    let originalRevokeObjectURL;
+    let revokedUrls;
+
+    beforeEach(() => {
+      originalRevokeObjectURL = URL.revokeObjectURL;
+      revokedUrls = [];
+      URL.revokeObjectURL = (url) => revokedUrls.push(url);
+    });
+
+    afterEach(() => {
+      URL.revokeObjectURL = originalRevokeObjectURL;
+      delete globalThis.__testConfirmation;
+    });
+
+    it("shows upload progress overlays on the video preview", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      patchFirstPost(element, {
+        video: { previewUrl: "blob:x", status: "uploading", progress: 0 },
+      });
+      await nextFrame();
+      let overlay = element.querySelector(".video-preview-overlay");
+      assert(overlay.textContent.includes("Uploading..."));
+      assert(overlay.querySelector(".loading-spinner") !== null);
+
+      patchFirstPost(element, {
+        video: { previewUrl: "blob:x", status: "processing", progress: 0 },
+      });
+      await nextFrame();
+      overlay = element.querySelector(".video-preview-overlay");
+      assert(overlay.textContent.includes("Processing..."));
+      assert(!overlay.textContent.includes("%"));
+
+      patchFirstPost(element, {
+        video: { previewUrl: "blob:x", status: "processing", progress: 40 },
+      });
+      await nextFrame();
+      overlay = element.querySelector(".video-preview-overlay");
+      assert(overlay.textContent.includes("Processing... 40%"));
+    });
+
+    it("shows the error overlay without a spinner and no overlay when done", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      patchFirstPost(element, {
+        video: { previewUrl: "blob:x", status: "error", error: "Too big" },
+      });
+      await nextFrame();
+      let overlay = element.querySelector(".video-preview-overlay");
+      assert(overlay.textContent.includes("Too big"));
+      assert.deepEqual(overlay.querySelector(".loading-spinner"), null);
+
+      patchFirstPost(element, {
+        video: { previewUrl: "blob:x", status: "error", error: null },
+      });
+      await nextFrame();
+      overlay = element.querySelector(".video-preview-overlay");
+      assert(overlay.textContent.includes("Upload failed"));
+
+      patchFirstPost(element, {
+        video: { previewUrl: "blob:x", status: "done" },
+      });
+      await nextFrame();
+      assert.deepEqual(element.querySelector(".video-preview-overlay"), null);
+    });
+
+    it("removes the video via the preview remove button", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      patchFirstPost(element, {
+        video: { previewUrl: "blob:x", status: "done", alt: "" },
+        videoToken: Symbol("token"),
+        draftVideoCaptions: [{ lang: "en" }],
+      });
+      await nextFrame();
+      element
+        .querySelector(".video-preview-item .image-preview-remove-button")
+        .click();
+      assert.deepEqual(getFirstPost(element).video, null);
+      assert.deepEqual(getFirstPost(element).videoToken, null);
+      assert.deepEqual(getFirstPost(element).draftVideoCaptions, null);
+      assert.deepEqual(revokedUrls, ["blob:x"]);
+      assert.deepEqual(element._isDirty, true);
+      await nextFrame();
+      assert.deepEqual(
+        element.querySelector(".post-composer-video-preview"),
+        null,
+      );
+    });
+
+    it("removes an image via the preview remove button", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      patchFirstPost(element, {
+        images: [
+          { file: {}, dataUrl: "data:a" },
+          { file: {}, dataUrl: "data:b" },
+        ],
+      });
+      await nextFrame();
+      element
+        .querySelector(".image-preview-item .image-preview-remove-button")
+        .click();
+      const images = getFirstPost(element).images;
+      assert.deepEqual(images.length, 1);
+      assert.deepEqual(images[0].dataUrl, "data:b");
+      assert.deepEqual(element._isDirty, true);
+    });
+
+    it("closes the external link preview and rejects the URL", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      const url = "https://example.com/article";
+      patchFirstPost(element, {
+        externalLinkUrl: url,
+        external: { url, title: url, description: "", image: "" },
+      });
+      await nextFrame();
+      element
+        .querySelector(
+          ".post-composer-embed-preview .embed-preview-close-button",
+        )
+        .click();
+      assert.deepEqual(getFirstPost(element).external, null);
+      assert.deepEqual(getFirstPost(element).externalLinkUrl, null);
+      assert(getFirstPost(element).rejectedLinkEmbeds.has(url));
+      assert.deepEqual(element._isDirty, true);
+    });
+
+    it("closes the quoted record preview via its close button", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      patchFirstPost(element, { quotedRecord: makeGeneratorRecord() });
+      await nextFrame();
+      element
+        .querySelector(
+          ".post-composer-embed-preview .embed-preview-close-button",
+        )
+        .click();
+      assert.deepEqual(getFirstPost(element).quotedRecord, null);
+      assert.deepEqual(element._isDirty, true);
+    });
+
+    it("removes the active thread post via its remove button", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      patchFirstPost(element, { text: "first post" });
+      element.handleAddPost();
+      await nextFrame();
+      // a shown confirm would resolve false and cancel the removal
+      globalThis.__testConfirmation = (resolve) => resolve(false);
+      element
+        .querySelector(
+          '[data-testid="composer-post"][data-teststate="active"] [data-testid="composer-remove-post-button"]',
+        )
+        .click();
+      await waitFor(() => element.state.$posts.get().length === 1);
+      assert.deepEqual(getFirstPost(element).text, "first post");
+    });
+  });
+
+  describe("PostComposer - quotedRecord property", () => {
+    it("setting quotedRecord after connect renders the preview", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      element.quotedRecord = makeGeneratorRecord();
+      await nextFrame();
+      assert.deepEqual(
+        getFirstPost(element).quotedRecord.$type,
+        "app.bsky.feed.defs#generatorView",
+      );
+      assert(
+        element.querySelector(
+          ".post-composer-embed-preview .feed-generator-embed",
+        ) !== null,
+      );
+    });
+  });
+
+  describe("PostComposer - dialog chrome", () => {
+    afterEach(() => {
+      delete globalThis.__testChoice;
+      delete globalThis.__testConfirmation;
+    });
+
+    it("closes when the backdrop is clicked with no content", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      element.open();
+      const dialog = element.querySelector(".post-composer");
+      dialog.dispatchEvent(
+        new globalThis.window.MouseEvent("click", { bubbles: true }),
+      );
+      await waitFor(() => !dialog.open);
+    });
+
+    it("closes on the dialog cancel event with no content", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      element.open();
+      const dialog = element.querySelector(".post-composer");
+      dialog.dispatchEvent(new globalThis.window.Event("cancel"));
+      await waitFor(() => !dialog.open);
+    });
+
+    it("closes from the Cancel button with no content", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      element.open();
+      const dialog = element.querySelector(".post-composer");
+      element.querySelector(".post-composer-cancel-button").click();
+      await waitFor(() => !dialog.open);
+    });
+
+    it("stays open when Keep editing is chosen from the Cancel button", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      element.open();
+      element.handleInput(getFirstPost(element).id, {
+        detail: { text: "hello", facets: [] },
+      });
+      globalThis.__testChoice = (resolve) => resolve("keep");
+      element.querySelector(".post-composer-cancel-button").click();
+      await nextFrame();
+      await nextFrame();
+      assert(element.querySelector(".post-composer").open);
+    });
+
+    it("stays open when the file picker dispatches a cancel event", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      element.open();
+      element
+        .querySelector(".media-picker-input")
+        .dispatchEvent(
+          new globalThis.window.Event("cancel", { bubbles: true }),
+        );
+      await nextFrame();
+      assert(element.querySelector(".post-composer").open);
+    });
+  });
+
+  describe("PostComposer - confirmClose for replies", () => {
+    afterEach(() => {
+      delete globalThis.__testConfirmation;
+    });
+
+    function createReplyComposer() {
+      const element = createPostComposer();
+      element.replyTo = {
+        author: { handle: "user.bsky.social", displayName: "User" },
+        record: { text: "Original post", createdAt: new Date().toISOString() },
+        indexedAt: new Date().toISOString(),
+      };
+      connectElement(element);
+      return element;
+    }
+
+    it("closes an empty reply without a prompt", async () => {
+      const element = createReplyComposer();
+      globalThis.__testConfirmation = () => {
+        throw new Error("confirm should not be shown for an empty reply");
+      };
+      assert.deepEqual(await element.confirmClose(), true);
+    });
+
+    it("confirms discarding a reply with content", async () => {
+      const element = createReplyComposer();
+      element.handleInput(getFirstPost(element).id, {
+        detail: { text: "my reply", facets: [] },
+      });
+      globalThis.__testConfirmation = (resolve) => resolve(true);
+      assert.deepEqual(await element.confirmClose(), true);
+      globalThis.__testConfirmation = (resolve) => resolve(false);
+      assert.deepEqual(await element.confirmClose(), false);
+    });
+  });
+
+  describe("PostComposer - emoji picker", () => {
+    it("opens the emoji picker from the button and toggles it closed", () => {
+      const element = createPostComposer();
+      connectElement(element);
+      const button = element.querySelector(".post-composer-emoji-button");
+      const picker = element.querySelector("emoji-picker-dialog");
+      button.click();
+      assert.deepEqual(picker.isOpen, true);
+      button.click();
+      assert.deepEqual(picker.isOpen, false);
+    });
+
+    it("inserts the selected emoji into the active input", () => {
+      const element = createPostComposer();
+      connectElement(element);
+      const richTextInput = element.querySelector("rich-text-input");
+      richTextInput.setText("ab");
+      element.querySelector(".post-composer-emoji-button").click();
+      const picker = element.querySelector("emoji-picker-dialog");
+      picker.dispatchEvent(
+        new CustomEvent("select", { detail: { emoji: "😀" } }),
+      );
+      assert(richTextInput.text.includes("😀"));
+      assert.deepEqual(getFirstPost(element).text, richTextInput.text);
+      assert.deepEqual(element._savedEmojiCursor, null);
+      assert.deepEqual(picker.isOpen, false);
+    });
+  });
+
+  describe("PostComposer - media picker", () => {
+    it("clicks the hidden file input from the media button", () => {
+      const element = createPostComposer();
+      connectElement(element);
+      const input = element.querySelector(".media-picker-input");
+      const clickSpy = mock.fn();
+      input.click = clickSpy;
+      element.handleMediaButtonClick();
+      assert.deepEqual(clickSpy.mock.callCount(), 1);
+    });
+
+    it("adds files from the file input change flow and clears the input", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      const target = {
+        files: [makeImageFile()],
+        value: "C:\\fake\\pasted.png",
+      };
+      await element.handleMediaSelect({ target });
+      assert.deepEqual(target.value, "");
+      assert.deepEqual(getFirstPost(element).images.length, 1);
+    });
+
+    it("adding images rejects an attached external link embed", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      const url = "https://example.com/article";
+      patchFirstPost(element, {
+        externalLinkUrl: url,
+        external: { url, title: url, description: "", image: "" },
+      });
+      await element.addMediaFiles(getFirstPost(element).id, [makeImageFile()]);
+      assert.deepEqual(getFirstPost(element).images.length, 1);
+      assert.deepEqual(getFirstPost(element).external, null);
+      assert.deepEqual(getFirstPost(element).externalLinkUrl, null);
+      assert(getFirstPost(element).rejectedLinkEmbeds.has(url));
+    });
+  });
+
+  describe("PostComposer - alt text dialogs", () => {
+    it("edits image alt text through the alt-text dialog", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      patchFirstPost(element, { images: [{ file: {}, dataUrl: "data:a" }] });
+      await nextFrame();
+      element.querySelector(".image-preview-item img").click();
+      const dialog = document.body.querySelector("image-alt-text-dialog");
+      assert(dialog !== null);
+      const textarea = dialog.querySelector(".image-alt-text-dialog-textarea");
+      textarea.value = "a description";
+      textarea.dispatchEvent(
+        new globalThis.window.InputEvent("input", { bubbles: true }),
+      );
+      dialog.querySelector('[data-testid="alt-text-save"]').click();
+      assert.deepEqual(getFirstPost(element).images[0].alt, "a description");
+      assert.deepEqual(element._isDirty, true);
+      assert.deepEqual(
+        document.body.querySelector("image-alt-text-dialog"),
+        null,
+      );
+      await nextFrame();
+      assert(
+        element.querySelector(".alt-indicator").classList.contains("has-alt"),
+      );
+    });
+
+    it("closes the image alt-text dialog without saving on cancel", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      patchFirstPost(element, { images: [{ file: {}, dataUrl: "data:a" }] });
+      await nextFrame();
+      element.querySelector(".image-preview-item img").click();
+      const dialog = document.body.querySelector("image-alt-text-dialog");
+      dialog.querySelector('[data-testid="alt-text-cancel"]').click();
+      assert.deepEqual(getFirstPost(element).images[0].alt, undefined);
+      assert.deepEqual(
+        document.body.querySelector("image-alt-text-dialog"),
+        null,
+      );
+    });
+
+    it("edits video alt text through the alt-text dialog", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      patchFirstPost(element, {
+        video: { previewUrl: "blob:x", status: "done", alt: "" },
+      });
+      await nextFrame();
+      element.querySelector(".video-preview-item .alt-indicator").click();
+      const dialog = document.body.querySelector("image-alt-text-dialog");
+      assert(dialog !== null);
+      const textarea = dialog.querySelector(".image-alt-text-dialog-textarea");
+      textarea.value = "video description";
+      textarea.dispatchEvent(
+        new globalThis.window.InputEvent("input", { bubbles: true }),
+      );
+      dialog.querySelector('[data-testid="alt-text-save"]').click();
+      assert.deepEqual(getFirstPost(element).video.alt, "video description");
+      assert.deepEqual(element._isDirty, true);
+      assert.deepEqual(
+        document.body.querySelector("image-alt-text-dialog"),
+        null,
+      );
+    });
+  });
+
+  describe("PostComposer - link embed edge cases", () => {
+    it("auto-rejects new links while an external embed is attached", () => {
+      const element = createPostComposer();
+      connectElement(element);
+      patchFirstPost(element, {
+        externalLinkUrl: "https://a.com/x",
+        external: { url: "https://a.com/x" },
+      });
+      const facet = makeLinkFacet("https://b.com/y");
+      patchFirstPost(element, { unresolvedFacets: [facet] });
+      element.handleInput(getFirstPost(element).id, {
+        detail: { text: "see https://b.com/y ", facets: [facet] },
+      });
+      assert(getFirstPost(element).rejectedLinkEmbeds.has("https://b.com/y"));
+      assert.deepEqual(
+        getFirstPost(element).externalLinkUrl,
+        "https://a.com/x",
+      );
+    });
+
+    it("clears rejected links once they are removed from the text", () => {
+      const element = createPostComposer();
+      connectElement(element);
+      const url = "https://a.com/x";
+      getFirstPost(element).rejectedLinkEmbeds.add(url);
+      patchFirstPost(element, { unresolvedFacets: [makeLinkFacet(url)] });
+      element.handleInput(getFirstPost(element).id, {
+        detail: { text: "no links", facets: [] },
+      });
+      assert(!getFirstPost(element).rejectedLinkEmbeds.has(url));
+    });
+  });
+
+  describe("PostComposer - external link preview loading", () => {
+    afterEach(() => {
+      delete globalThis.fetch;
+    });
+
+    function setupPreview(element, url) {
+      connectElement(element);
+      patchFirstPost(element, { externalLinkUrl: url });
+    }
+
+    it("fills the preview from the link card service including the image", async () => {
+      globalThis.fetch = async (url) => {
+        if (url.startsWith(LINK_CARD_SERVICE_URL)) {
+          return {
+            ok: true,
+            json: async () => ({
+              title: "Title",
+              description: "Desc",
+              image: "https://img.example/pic.png",
+            }),
+          };
+        }
+        return { ok: true };
+      };
+      const element = createPostComposer();
+      const url = "https://example.com/article";
+      setupPreview(element, url);
+      await element.loadExternalLinkEmbedPreview(getFirstPost(element).id);
+      assert.deepEqual(getFirstPost(element).external, {
+        url,
+        title: "Title",
+        description: "Desc",
+        image: "https://img.example/pic.png",
+      });
+    });
+
+    it("keeps the preview without an image when the image fails to load", async () => {
+      globalThis.fetch = async (url) => {
+        if (url.startsWith(LINK_CARD_SERVICE_URL)) {
+          return {
+            ok: true,
+            json: async () => ({
+              title: "Title",
+              description: "Desc",
+              image: "https://img.example/pic.png",
+            }),
+          };
+        }
+        throw new TypeError("network error");
+      };
+      const element = createPostComposer();
+      const url = "https://example.com/article";
+      setupPreview(element, url);
+      await element.loadExternalLinkEmbedPreview(getFirstPost(element).id);
+      assert.deepEqual(getFirstPost(element).external, {
+        url,
+        title: "Title",
+        description: "Desc",
+        image: "",
+      });
+    });
+
+    it("falls back to the bare URL when metadata is missing", async () => {
+      globalThis.fetch = async () => ({ ok: true, json: async () => ({}) });
+      const element = createPostComposer();
+      const url = "https://example.com/article";
+      setupPreview(element, url);
+      await element.loadExternalLinkEmbedPreview(getFirstPost(element).id);
+      assert.deepEqual(getFirstPost(element).external, {
+        url,
+        title: url,
+        description: "",
+        image: "",
+      });
+    });
+
+    it("discards metadata that resolves after the preview is closed", async () => {
+      let resolveFetch = null;
+      globalThis.fetch = () =>
+        new Promise((resolve) => {
+          resolveFetch = resolve;
+        });
+      const element = createPostComposer();
+      const url = "https://example.com/article";
+      setupPreview(element, url);
+      const loadPromise = element.loadExternalLinkEmbedPreview(
+        getFirstPost(element).id,
+      );
+      element.handleExternalLinkEmbedPreviewClose(getFirstPost(element).id);
+      resolveFetch({ ok: true, json: async () => ({ title: "Late" }) });
+      await loadPromise;
+      assert.deepEqual(getFirstPost(element).external, null);
+    });
+  });
+
+  describe("PostComposer - send lifecycle", () => {
+    it("dispatches a single empty post when nothing has content", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      let receivedDetail = null;
+      element.addEventListener("send-post", (e) => {
+        receivedDetail = e.detail;
+      });
+      await element.send();
+      assert.deepEqual(receivedDetail.posts.length, 1);
+      assert.deepEqual(receivedDetail.posts[0].postText, "");
+    });
+
+    it("re-enables sending when the errorCallback fires", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      patchFirstPost(element, { text: "hello" });
+      let receivedDetail = null;
+      element.addEventListener("send-post", (e) => {
+        receivedDetail = e.detail;
+      });
+      await element.send();
+      assert.deepEqual(element.state.$isSending.get(), true);
+      receivedDetail.errorCallback();
+      assert.deepEqual(element.state.$isSending.get(), false);
+    });
+
+    it("closes the composer when the successCallback fires", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      element.open();
+      patchFirstPost(element, { text: "hello" });
+      let receivedDetail = null;
+      element.addEventListener("send-post", (e) => {
+        receivedDetail = e.detail;
+      });
+      let closedEventFired = false;
+      element.addEventListener("post-composer-closed", () => {
+        closedEventFired = true;
+      });
+      await element.send();
+      receivedDetail.successCallback();
+      assert(!element.querySelector(".post-composer").open);
+      assert(closedEventFired);
+    });
+  });
+
+  describe("PostComposer - draft snapshot", () => {
+    it("serializes video file, alt, and captions into the snapshot", () => {
+      const element = createPostComposer();
+      connectElement(element);
+      const file = makeVideoFile();
+      patchFirstPost(element, {
+        video: { file, alt: "v alt", previewUrl: "blob:x", status: "done" },
+        draftVideoCaptions: [{ lang: "en" }],
+      });
+      const snapshot = element.buildDraftSnapshot();
+      assert.deepEqual(snapshot.posts[0].video, {
+        file,
+        alt: "v alt",
+        captions: [{ lang: "en" }],
+      });
+    });
+  });
+
+  describe("PostComposer - drafts button", () => {
+    afterEach(() => {
+      delete globalThis.__testChoice;
+      delete globalThis.__testConfirmation;
+    });
+
+    function createWithDialogSpy(dataLayer = null) {
+      const element = createPostComposer();
+      if (dataLayer) {
+        element.dataLayer = dataLayer;
+      }
+      element.openDraftsDialog = mock.fn();
+      connectElement(element);
+      return element;
+    }
+
+    it("opens the drafts dialog directly when there is no content", async () => {
+      const element = createWithDialogSpy();
+      globalThis.__testChoice = () => {
+        throw new Error("choice prompt should not be shown without content");
+      };
+      await element.handleDraftsButtonClick();
+      assert.deepEqual(element.openDraftsDialog.mock.callCount(), 1);
+    });
+
+    it("opens directly when the loaded draft has no unsaved changes", async () => {
+      const element = createWithDialogSpy();
+      element.handleInput(getFirstPost(element).id, {
+        detail: { text: "hello", facets: [] },
+      });
+      element.markSaved("draft-1", []);
+      element._isDirty = false;
+      globalThis.__testChoice = () => {
+        throw new Error("choice prompt should not be shown for a clean draft");
+      };
+      await element.handleDraftsButtonClick();
+      assert.deepEqual(element.openDraftsDialog.mock.callCount(), 1);
+    });
+
+    it("saves then opens when Save is chosen", async () => {
+      const createDraft = mock.fn(async () => "draft-1");
+      const element = createWithDialogSpy({ mutations: { createDraft } });
+      element.handleInput(getFirstPost(element).id, {
+        detail: { text: "hello", facets: [] },
+      });
+      globalThis.__testChoice = (resolve) => resolve("save");
+      await element.handleDraftsButtonClick();
+      assert.deepEqual(createDraft.mock.callCount(), 1);
+      assert.deepEqual(element._draftId, "draft-1");
+      assert.deepEqual(element.openDraftsDialog.mock.callCount(), 1);
+    });
+
+    it("does not open the drafts dialog when the save fails", async () => {
+      const originalError = console.error;
+      console.error = () => {};
+      try {
+        const element = createWithDialogSpy({
+          mutations: {
+            createDraft: async () => {
+              throw new Error("boom");
+            },
+          },
+        });
+        element.handleInput(getFirstPost(element).id, {
+          detail: { text: "hello", facets: [] },
+        });
+        globalThis.__testChoice = (resolve) => resolve("save");
+        await element.handleDraftsButtonClick();
+        assert.deepEqual(element.openDraftsDialog.mock.callCount(), 0);
+        assert.deepEqual(element._isDirty, true);
+      } finally {
+        console.error = originalError;
+      }
+    });
+
+    it("discards content then opens when Discard is chosen", async () => {
+      const element = createWithDialogSpy();
+      element.handleInput(getFirstPost(element).id, {
+        detail: { text: "hello", facets: [] },
+      });
+      globalThis.__testChoice = (resolve) => resolve("discard");
+      await element.handleDraftsButtonClick();
+      assert.deepEqual(getFirstPost(element).text, "");
+      assert.deepEqual(element._isDirty, false);
+      assert.deepEqual(element.openDraftsDialog.mock.callCount(), 1);
+    });
+
+    it("keeps editing without opening when Keep editing is chosen", async () => {
+      const element = createWithDialogSpy();
+      element.handleInput(getFirstPost(element).id, {
+        detail: { text: "hello", facets: [] },
+      });
+      globalThis.__testChoice = (resolve) => resolve("keep");
+      await element.handleDraftsButtonClick();
+      assert.deepEqual(getFirstPost(element).text, "hello");
+      assert.deepEqual(element.openDraftsDialog.mock.callCount(), 0);
+    });
+
+    it("confirms discarding over-limit text before opening", async () => {
+      const element = createWithDialogSpy();
+      element.handleInput(getFirstPost(element).id, {
+        detail: { text: "x".repeat(1001), facets: [] },
+      });
+      globalThis.__testChoice = () => {
+        throw new Error("choice prompt should not be shown over the limit");
+      };
+      globalThis.__testConfirmation = (resolve) => resolve(false);
+      await element.handleDraftsButtonClick();
+      assert.deepEqual(element.openDraftsDialog.mock.callCount(), 0);
+      assert.deepEqual(getFirstPost(element).text, "x".repeat(1001));
+
+      globalThis.__testConfirmation = (resolve) => resolve(true);
+      await element.handleDraftsButtonClick();
+      assert.deepEqual(element.openDraftsDialog.mock.callCount(), 1);
+      assert.deepEqual(getFirstPost(element).text, "");
+    });
+
+    it("ignores clicks while a draft save is in flight", async () => {
+      const element = createWithDialogSpy();
+      element.handleInput(getFirstPost(element).id, {
+        detail: { text: "hello", facets: [] },
+      });
+      element.state.$isSavingDraft.set(true);
+      globalThis.__testChoice = () => {
+        throw new Error("choice prompt should not be shown while saving");
+      };
+      await element.handleDraftsButtonClick();
+      assert.deepEqual(element.openDraftsDialog.mock.callCount(), 0);
+    });
+
+    it("does nothing when drafts are disabled", async () => {
+      const element = createPostComposer({ draftsEnabled: false });
+      element.openDraftsDialog = mock.fn();
+      connectElement(element);
+      await element.handleDraftsButtonClick();
+      assert.deepEqual(element.openDraftsDialog.mock.callCount(), 0);
+    });
+  });
+
+  describe("PostComposer - drafts dialog wiring", () => {
+    function makeDraftsDataLayer() {
+      return {
+        derived: {
+          $hydratedDrafts: { get: () => ({ drafts: [], cursor: null }) },
+        },
+      };
+    }
+
+    it("opens the drafts dialog and handles delete and close events", () => {
+      const element = createPostComposer();
+      element.dataLayer = makeDraftsDataLayer();
+      connectElement(element);
+      element.markSaved("draft-1", []);
+      element.openDraftsDialog();
+      const dialog = document.querySelector("drafts-dialog");
+      assert(dialog !== null);
+      assert.deepEqual(dialog.dataLayer, element.dataLayer);
+      assert(dialog.querySelector("dialog").open);
+      dialog.dispatchEvent(
+        new CustomEvent("draft-deleted", { detail: { draftId: "draft-1" } }),
+      );
+      assert.deepEqual(element._draftId, null);
+      dialog.dispatchEvent(new CustomEvent("dialog-closed"));
+      assert.deepEqual(document.querySelector("drafts-dialog"), null);
+    });
+
+    it("restores the draft chosen from the drafts dialog", () => {
+      const element = createPostComposer();
+      element.dataLayer = makeDraftsDataLayer();
+      connectElement(element);
+      element.restoreFromDraft = mock.fn();
+      element.openDraftsDialog();
+      const dialog = document.querySelector("drafts-dialog");
+      const draftView = { id: "draft-1", draft: { posts: [] } };
+      dialog.dispatchEvent(
+        new CustomEvent("draft-selected", { detail: { draftView } }),
+      );
+      assert.deepEqual(element.restoreFromDraft.mock.callCount(), 1);
+      assert.deepEqual(
+        element.restoreFromDraft.mock.calls[0].arguments[0],
+        draftView,
+      );
+    });
+  });
+
+  describe("PostComposer - restoring draft media", () => {
+    let originalWarn;
+
+    beforeEach(() => {
+      originalWarn = console.warn;
+      console.warn = () => {};
+    });
+
+    afterEach(() => {
+      console.warn = originalWarn;
+    });
+
+    function makeImageDraftView() {
+      return {
+        id: "draft-1",
+        draft: {
+          deviceId: getDraftDeviceId(),
+          deviceName: "Web",
+          posts: [
+            {
+              text: "with image",
+              embedGallery: {
+                $type: "app.bsky.draft.defs#draftEmbedGallery",
+                items: [
+                  {
+                    $type: "app.bsky.draft.defs#draftEmbedImage",
+                    alt: "pic alt",
+                    localRef: {
+                      $type: "app.bsky.draft.defs#draftEmbedLocalRef",
+                      path: "image:abc",
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      };
+    }
+
+    it("restores draft images from the local media store", async () => {
+      const element = createPostComposer();
+      element.dataLayer = {
+        draftMediaStore: {
+          readBlob: async () =>
+            new globalThis.window.Blob(["img"], { type: "image/png" }),
+        },
+      };
+      connectElement(element);
+      await element.restoreFromDraft(makeImageDraftView());
+      const image = getFirstPost(element).images[0];
+      assert(image.dataUrl.startsWith("data:image/png"));
+      assert.deepEqual(image.alt, "pic alt");
+      assert.deepEqual(image.localRefPath, "image:abc");
+      assert.deepEqual(image.file.name, "draft-image");
+      assert.deepEqual(getFirstPost(element).unrestoredImages, null);
+    });
+
+    it("marks images unrestored when the local bytes are missing", async () => {
+      const element = createPostComposer();
+      element.dataLayer = {
+        draftMediaStore: { readBlob: async () => null },
+      };
+      connectElement(element);
+      const draftView = makeImageDraftView();
+      await element.restoreFromDraft(draftView);
+      assert.deepEqual(getFirstPost(element).images, []);
+      assert.deepEqual(
+        getFirstPost(element).unrestoredImages,
+        draftView.draft.posts[0].embedGallery.items,
+      );
+    });
+
+    it("marks images unrestored when the read fails", async () => {
+      const element = createPostComposer();
+      element.dataLayer = {
+        draftMediaStore: {
+          readBlob: async () => {
+            throw new Error("idb broken");
+          },
+        },
+      };
+      connectElement(element);
+      const draftView = makeImageDraftView();
+      await element.restoreFromDraft(draftView);
+      assert.deepEqual(getFirstPost(element).images, []);
+      assert.deepEqual(
+        getFirstPost(element).unrestoredImages,
+        draftView.draft.posts[0].embedGallery.items,
+      );
+    });
+  });
+
+  describe("PostComposer - restoring draft quotes", () => {
+    let originalWarn;
+
+    beforeEach(() => {
+      originalWarn = console.warn;
+      console.warn = () => {};
+    });
+
+    afterEach(() => {
+      console.warn = originalWarn;
+    });
+
+    function makeRecordDraftView(uri) {
+      return {
+        id: "draft-1",
+        draft: {
+          deviceId: "another-device",
+          deviceName: "Web",
+          posts: [
+            {
+              text: "quoting",
+              embedRecords: [{ record: { uri, cid: "cid1" } }],
+            },
+          ],
+        },
+      };
+    }
+
+    function createComposerWithDeclarative(overrides = {}) {
+      const element = createPostComposer();
+      element.dataLayer = {
+        declarative: {
+          ensureFeedGenerator: async (uri) => ({
+            uri,
+            cid: "feedcid",
+            displayName: "Cool Feed",
+            creator: { did: "did:plc:creator1", handle: "creator1.test" },
+          }),
+          ensureList: async (uri) => ({
+            uri,
+            cid: "listcid",
+            name: "Cool List",
+            creator: { did: "did:plc:creator1", handle: "creator1.test" },
+          }),
+          ensureStarterPack: async (uri) => ({
+            uri,
+            cid: "packcid",
+            record: { name: "Cool Pack" },
+            creator: { did: "did:plc:creator1", handle: "creator1.test" },
+          }),
+          ...overrides,
+        },
+      };
+      connectElement(element);
+      return element;
+    }
+
+    it("restores a feed generator quote", async () => {
+      const element = createComposerWithDeclarative();
+      await element.restoreFromDraft(
+        makeRecordDraftView(
+          "at://did:plc:creator1/app.bsky.feed.generator/cool-feed",
+        ),
+      );
+      assert.deepEqual(
+        getFirstPost(element).quotedRecord.$type,
+        "app.bsky.feed.defs#generatorView",
+      );
+    });
+
+    it("restores a list quote", async () => {
+      const element = createComposerWithDeclarative();
+      await element.restoreFromDraft(
+        makeRecordDraftView(
+          "at://did:plc:creator1/app.bsky.graph.list/cool-list",
+        ),
+      );
+      assert.deepEqual(
+        getFirstPost(element).quotedRecord.$type,
+        "app.bsky.graph.defs#listView",
+      );
+    });
+
+    it("restores a starter pack quote", async () => {
+      const element = createComposerWithDeclarative();
+      await element.restoreFromDraft(
+        makeRecordDraftView(
+          "at://did:plc:creator1/app.bsky.graph.starterpack/cool-pack",
+        ),
+      );
+      assert.deepEqual(
+        getFirstPost(element).quotedRecord.$type,
+        "app.bsky.graph.defs#starterPackViewBasic",
+      );
+    });
+
+    it("warns with a toast when the quoted record fails to load", async () => {
+      const element = createComposerWithDeclarative({
+        ensureFeedGenerator: async () => {
+          throw new Error("not found");
+        },
+      });
+      await element.restoreFromDraft(
+        makeRecordDraftView(
+          "at://did:plc:creator1/app.bsky.feed.generator/cool-feed",
+        ),
+      );
+      assert.deepEqual(getFirstPost(element).quotedRecord, null);
+      await waitFor(() =>
+        toastText().includes("Couldn't load this draft's quoted record"),
+      );
+    });
+  });
+
+  describe("PostComposer - video selection and upload", () => {
+    let videoEnv;
+    let originalError;
+    let originalWarn;
+
+    beforeEach(() => {
+      videoEnv = installVideoEnvStubs();
+      originalError = console.error;
+      originalWarn = console.warn;
+      console.error = () => {};
+      console.warn = () => {};
+    });
+
+    afterEach(() => {
+      videoEnv.restore();
+      console.error = originalError;
+      console.warn = originalWarn;
+      delete globalThis.__testConfirmation;
+    });
+
+    it("uploads a selected video to done", async () => {
+      const element = createPostComposer();
+      element.dataLayer = makeVideoDataLayer();
+      connectElement(element);
+      await element.addMediaFiles(getFirstPost(element).id, [makeVideoFile()]);
+      assert.deepEqual(element._isDirty, true);
+      await waitFor(() => getFirstPost(element).video?.status === "done");
+      const video = getFirstPost(element).video;
+      assert.deepEqual(video.jobId, "job-1");
+      assert.deepEqual(video.blob, { $type: "blob", ref: "blobref" });
+      assert.deepEqual(video.previewUrl, "blob:mock");
+      assert.deepEqual(video.error, null);
+    });
+
+    describe("with zero-delay timers", () => {
+      const originalSetTimeout = globalThis.setTimeout;
+
+      beforeEach(() => {
+        globalThis.setTimeout = (fn) => originalSetTimeout(fn, 0);
+      });
+
+      afterEach(() => {
+        globalThis.setTimeout = originalSetTimeout;
+      });
+
+      it("polls the processing job until completion", async () => {
+        const element = createPostComposer();
+        const dataLayer = makeVideoDataLayer({
+          statuses: [
+            { state: "JOB_STATE_PROCESSING", progress: 40 },
+            {
+              state: "JOB_STATE_COMPLETED",
+              progress: 100,
+              blob: { $type: "blob", ref: "blobref" },
+            },
+          ],
+        });
+        element.dataLayer = dataLayer;
+        connectElement(element);
+        await element.addMediaFiles(getFirstPost(element).id, [
+          makeVideoFile(),
+        ]);
+        await waitFor(() => getFirstPost(element).video?.status === "done");
+        assert.deepEqual(dataLayer.statusCalls.length, 2);
+        assert.deepEqual(getFirstPost(element).video.progress, 100);
+      });
+    });
+
+    it("marks the video errored and blocks send when the upload fails", async () => {
+      const element = createPostComposer();
+      element.dataLayer = makeVideoDataLayer({
+        limits: { canUpload: false, message: "No uploads allowed" },
+      });
+      connectElement(element);
+      await element.addMediaFiles(getFirstPost(element).id, [makeVideoFile()]);
+      await waitFor(() => getFirstPost(element).video?.status === "error");
+      assert.deepEqual(getFirstPost(element).video.error, "No uploads allowed");
+      assert(toastText().includes("No uploads allowed"));
+      assert.deepEqual(element.isSendBlocked(), true);
+      await nextFrame();
+      assert(
+        element.querySelector('[data-testid="composer-submit-button"]')
+          .disabled,
+      );
+    });
+
+    it("rejects a video when images are already selected", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      patchFirstPost(element, { images: [{ file: {}, dataUrl: "data:a" }] });
+      await element.addMediaFiles(getFirstPost(element).id, [makeVideoFile()]);
+      assert.deepEqual(getFirstPost(element).video, null);
+      assert(toastText().includes("multiple media types"));
+      assert.deepEqual(element._isDirty, false);
+    });
+
+    it("keeps only the first of multiple selected videos", async () => {
+      const element = createPostComposer();
+      element.dataLayer = makeVideoDataLayer();
+      connectElement(element);
+      await element.addMediaFiles(getFirstPost(element).id, [
+        makeVideoFile("a.mp4"),
+        makeVideoFile("b.mp4"),
+      ]);
+      assert(toastText().includes("one video at a time"));
+      await waitFor(() => getFirstPost(element).video?.status === "done");
+      assert.deepEqual(getFirstPost(element).video.file.name, "a.mp4");
+    });
+
+    it("rejects unsupported video formats", async () => {
+      const element = createPostComposer();
+      connectElement(element);
+      const file = new globalThis.window.File(["avi-bytes"], "clip.avi", {
+        type: "video/avi",
+      });
+      await element.addMediaFiles(getFirstPost(element).id, [file]);
+      assert.deepEqual(getFirstPost(element).video, null);
+      assert(toastText().includes("Unsupported video format"));
+    });
+
+    it("surfaces metadata read failures", async () => {
+      videoEnv.metadataShouldFail = true;
+      const element = createPostComposer();
+      connectElement(element);
+      await element.addMediaFiles(getFirstPost(element).id, [makeVideoFile()]);
+      assert.deepEqual(getFirstPost(element).video, null);
+      assert(toastText().includes("Could not read video file."));
+    });
+
+    it("patchSelectedVideo ignores stale tokens", async () => {
+      const element = createPostComposer();
+      element.dataLayer = makeVideoDataLayer();
+      connectElement(element);
+      await element.addMediaFiles(getFirstPost(element).id, [makeVideoFile()]);
+      await waitFor(() => getFirstPost(element).video?.status === "done");
+      const result = element.patchSelectedVideo(
+        getFirstPost(element).id,
+        Symbol("stale"),
+        { alt: "stale alt" },
+      );
+      assert.deepEqual(result, null);
+      assert.deepEqual(getFirstPost(element).video.alt, "");
+    });
+
+    it("clearComposer revokes the video preview URL", async () => {
+      const element = createPostComposer();
+      element.dataLayer = makeVideoDataLayer();
+      connectElement(element);
+      await element.addMediaFiles(getFirstPost(element).id, [makeVideoFile()]);
+      await waitFor(() => getFirstPost(element).video?.status === "done");
+      element.clearComposer();
+      assert(videoEnv.revokedUrls.includes("blob:mock"));
+      assert.deepEqual(getFirstPost(element).video, null);
+    });
+
+    it("removing a thread post revokes its video preview URL", async () => {
+      const element = createPostComposer();
+      element.dataLayer = makeVideoDataLayer();
+      connectElement(element);
+      patchFirstPost(element, { text: "first post" });
+      element.handleAddPost();
+      const secondId = element.state.$posts.get()[1].id;
+      await element.addMediaFiles(secondId, [makeVideoFile()]);
+      await waitFor(() => element._getPost(secondId).video?.status === "done");
+      globalThis.__testConfirmation = (resolve) => resolve(true);
+      await element.handleRemovePost(secondId);
+      assert.deepEqual(element.state.$posts.get().length, 1);
+      assert(videoEnv.revokedUrls.includes("blob:mock"));
+    });
+
+    it("restores a draft video with alt text and captions", async () => {
+      const element = createPostComposer();
+      element.dataLayer = {
+        ...makeVideoDataLayer(),
+        draftMediaStore: {
+          readBlob: async () =>
+            new globalThis.window.Blob(["vid"], { type: "video/mp4" }),
+        },
+      };
+      connectElement(element);
+      const videoEmbed = {
+        $type: "app.bsky.draft.defs#draftEmbedVideo",
+        alt: "vid alt",
+        captions: [{ lang: "en" }],
+        localRef: {
+          $type: "app.bsky.draft.defs#draftEmbedLocalRef",
+          path: "video:video/mp4:abc.mp4",
+        },
+      };
+      await element.restoreFromDraft({
+        id: "draft-1",
+        draft: {
+          deviceId: getDraftDeviceId(),
+          deviceName: "Web",
+          posts: [{ text: "video draft", embedVideos: [videoEmbed] }],
+        },
+      });
+      const postState = getFirstPost(element);
+      assert(postState.video !== null);
+      assert.deepEqual(postState.video.alt, "vid alt");
+      assert.deepEqual(postState.video.file.name, "draft-video.mp4");
+      assert.deepEqual(postState.draftVideoCaptions, [{ lang: "en" }]);
+      assert.deepEqual(postState.unrestoredVideo, null);
+    });
+
+    it("marks the video unrestored when the local read fails", async () => {
+      const element = createPostComposer();
+      element.dataLayer = {
+        draftMediaStore: {
+          readBlob: async () => {
+            throw new Error("idb broken");
+          },
+        },
+      };
+      connectElement(element);
+      const videoEmbed = {
+        $type: "app.bsky.draft.defs#draftEmbedVideo",
+        localRef: {
+          $type: "app.bsky.draft.defs#draftEmbedLocalRef",
+          path: "video:video/mp4:abc.mp4",
+        },
+      };
+      await element.restoreFromDraft({
+        id: "draft-1",
+        draft: {
+          deviceId: getDraftDeviceId(),
+          deviceName: "Web",
+          posts: [{ text: "video draft", embedVideos: [videoEmbed] }],
+        },
+      });
+      assert.deepEqual(getFirstPost(element).video, null);
+      assert.deepEqual(getFirstPost(element).unrestoredVideo, videoEmbed);
+      await waitFor(() =>
+        toastText().includes("Couldn't restore this draft's video"),
+      );
+    });
+  });
 });
diff --git a/tests/unit/specs/components/toggle-switch.test.js b/tests/unit/specs/components/toggle-switch.test.js
new file mode 100644
index 00000000..fbabe8bc
--- /dev/null
+++ b/tests/unit/specs/components/toggle-switch.test.js
@@ -0,0 +1,246 @@
+import { describe, it, beforeEach, mock } from "node:test";
+import assert from "node:assert/strict";
+import "/js/components/toggle-switch.js";
+
+describe("toggle-switch", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  function createToggle(attributes = {}) {
+    const element = document.createElement("toggle-switch");
+    for (const [name, value] of Object.entries(attributes)) {
+      element.setAttribute(name, value);
+    }
+    document.body.appendChild(element);
+    return element;
+  }
+
+  describe("ToggleSwitch - rendering", () => {
+    it("should render a track with role switch and a knob", () => {
+      const element = createToggle();
+      const track = element.querySelector(".toggle-switch-track");
+      assert(track !== null);
+      assert.deepEqual(track.getAttribute("role"), "switch");
+      assert(track.querySelector(".toggle-switch-knob") !== null);
+    });
+
+    it("should render unchecked and enabled by default", () => {
+      const element = createToggle();
+      const track = element.querySelector(".toggle-switch-track");
+      assert(!track.classList.contains("checked"));
+      assert(!track.classList.contains("disabled"));
+      assert.deepEqual(track.getAttribute("aria-checked"), "false");
+      assert.deepEqual(track.getAttribute("aria-disabled"), "false");
+      assert.deepEqual(track.getAttribute("tabindex"), "0");
+      assert.deepEqual(element.checked, false);
+      assert.deepEqual(element.disabled, false);
+    });
+
+    it("should render checked state from the checked attribute", () => {
+      const element = createToggle({ checked: "" });
+      const track = element.querySelector(".toggle-switch-track");
+      assert(track.classList.contains("checked"));
+      assert.deepEqual(track.getAttribute("aria-checked"), "true");
+      assert.deepEqual(element.checked, true);
+    });
+
+    it("should render disabled state from the disabled attribute", () => {
+      const element = createToggle({ disabled: "" });
+      const track = element.querySelector(".toggle-switch-track");
+      assert(track.classList.contains("disabled"));
+      assert.deepEqual(track.getAttribute("aria-disabled"), "true");
+      assert.deepEqual(track.getAttribute("tabindex"), "-1");
+      assert.deepEqual(element.disabled, true);
+    });
+
+    it("should apply the label attribute as aria-label", () => {
+      const element = createToggle({ label: "Dark mode" });
+      const track = element.querySelector(".toggle-switch-track");
+      assert.deepEqual(track.getAttribute("aria-label"), "Dark mode");
+    });
+
+    it("should default aria-label to empty string without a label attribute", () => {
+      const element = createToggle();
+      const track = element.querySelector(".toggle-switch-track");
+      assert.deepEqual(track.getAttribute("aria-label"), "");
+    });
+
+    it("should not duplicate the track when connectedCallback runs again", () => {
+      const element = createToggle();
+      element.connectedCallback();
+      assert.deepEqual(
+        element.querySelectorAll(".toggle-switch-track").length,
+        1,
+      );
+    });
+  });
+
+  describe("ToggleSwitch - attribute reactivity", () => {
+    it("should update the DOM when the checked attribute is added", () => {
+      const element = createToggle();
+      element.setAttribute("checked", "");
+      const track = element.querySelector(".toggle-switch-track");
+      assert(track.classList.contains("checked"));
+      assert.deepEqual(track.getAttribute("aria-checked"), "true");
+    });
+
+    it("should update the DOM when the checked attribute is removed", () => {
+      const element = createToggle({ checked: "" });
+      element.removeAttribute("checked");
+      const track = element.querySelector(".toggle-switch-track");
+      assert(!track.classList.contains("checked"));
+      assert.deepEqual(track.getAttribute("aria-checked"), "false");
+    });
+
+    it("should update the DOM when the disabled attribute changes", () => {
+      const element = createToggle();
+      element.setAttribute("disabled", "");
+      const track = element.querySelector(".toggle-switch-track");
+      assert(track.classList.contains("disabled"));
+      assert.deepEqual(track.getAttribute("tabindex"), "-1");
+
+      element.removeAttribute("disabled");
+      assert(!track.classList.contains("disabled"));
+      assert.deepEqual(track.getAttribute("tabindex"), "0");
+    });
+  });
+
+  describe("ToggleSwitch - property reflection", () => {
+    it("should reflect the checked property to the attribute and DOM", () => {
+      const element = createToggle();
+      element.checked = true;
+      assert(element.hasAttribute("checked"));
+      const track = element.querySelector(".toggle-switch-track");
+      assert(track.classList.contains("checked"));
+
+      element.checked = false;
+      assert(!element.hasAttribute("checked"));
+      assert(!track.classList.contains("checked"));
+    });
+
+    it("should reflect the disabled property to the attribute and DOM", () => {
+      const element = createToggle();
+      element.disabled = true;
+      assert(element.hasAttribute("disabled"));
+      const track = element.querySelector(".toggle-switch-track");
+      assert(track.classList.contains("disabled"));
+
+      element.disabled = false;
+      assert(!element.hasAttribute("disabled"));
+      assert(!track.classList.contains("disabled"));
+    });
+  });
+
+  describe("ToggleSwitch - click handling", () => {
+    it("should dispatch a bubbling change event with the opposite checked value on click", () => {
+      const element = createToggle();
+      const changeListener = mock.fn();
+      document.body.addEventListener("change", changeListener);
+      element.querySelector(".toggle-switch-track").click();
+      document.body.removeEventListener("change", changeListener);
+
+      assert.deepEqual(changeListener.mock.callCount(), 1);
+      assert.deepEqual(changeListener.mock.calls[0].arguments[0].detail, {
+        checked: true,
+      });
+    });
+
+    it("should dispatch change with checked false when already checked", () => {
+      const element = createToggle({ checked: "" });
+      const changeListener = mock.fn();
+      element.addEventListener("change", changeListener);
+      element.querySelector(".toggle-switch-track").click();
+
+      assert.deepEqual(changeListener.mock.callCount(), 1);
+      assert.deepEqual(changeListener.mock.calls[0].arguments[0].detail, {
+        checked: false,
+      });
+    });
+
+    it("should not change its own checked state on click", () => {
+      const element = createToggle();
+      element.querySelector(".toggle-switch-track").click();
+      assert.deepEqual(element.checked, false);
+      assert(!element.hasAttribute("checked"));
+    });
+
+    it("should not dispatch change when disabled", () => {
+      const element = createToggle({ disabled: "" });
+      const changeListener = mock.fn();
+      element.addEventListener("change", changeListener);
+      element.querySelector(".toggle-switch-track").click();
+      assert.deepEqual(changeListener.mock.callCount(), 0);
+    });
+  });
+
+  describe("ToggleSwitch - keyboard handling", () => {
+    function pressKey(track, key) {
+      const event = new window.KeyboardEvent("keydown", {
+        key,
+        bubbles: true,
+        cancelable: true,
+      });
+      track.dispatchEvent(event);
+      return event;
+    }
+
+    it("should dispatch change on Enter", () => {
+      const element = createToggle();
+      const changeListener = mock.fn();
+      element.addEventListener("change", changeListener);
+      const event = pressKey(
+        element.querySelector(".toggle-switch-track"),
+        "Enter",
+      );
+
+      assert(event.defaultPrevented);
+      assert.deepEqual(changeListener.mock.callCount(), 1);
+      assert.deepEqual(changeListener.mock.calls[0].arguments[0].detail, {
+        checked: true,
+      });
+    });
+
+    it("should dispatch change on Space", () => {
+      const element = createToggle({ checked: "" });
+      const changeListener = mock.fn();
+      element.addEventListener("change", changeListener);
+      const event = pressKey(
+        element.querySelector(".toggle-switch-track"),
+        " ",
+      );
+
+      assert(event.defaultPrevented);
+      assert.deepEqual(changeListener.mock.callCount(), 1);
+      assert.deepEqual(changeListener.mock.calls[0].arguments[0].detail, {
+        checked: false,
+      });
+    });
+
+    it("should ignore other keys", () => {
+      const element = createToggle();
+      const changeListener = mock.fn();
+      element.addEventListener("change", changeListener);
+      const event = pressKey(
+        element.querySelector(".toggle-switch-track"),
+        "Escape",
+      );
+
+      assert(!event.defaultPrevented);
+      assert.deepEqual(changeListener.mock.callCount(), 0);
+    });
+
+    it("should not dispatch change on Enter when disabled", () => {
+      const element = createToggle({ disabled: "" });
+      const changeListener = mock.fn();
+      element.addEventListener("change", changeListener);
+      const event = pressKey(
+        element.querySelector(".toggle-switch-track"),
+        "Enter",
+      );
+
+      assert(!event.defaultPrevented);
+      assert.deepEqual(changeListener.mock.callCount(), 0);
+    });
+  });
+});
diff --git a/tests/unit/specs/dataLayer/derived.test.js b/tests/unit/specs/dataLayer/derived.test.js
index 3b4041fe..3191790e 100644
--- a/tests/unit/specs/dataLayer/derived.test.js
+++ b/tests/unit/specs/dataLayer/derived.test.js
@@ -6,6 +6,13 @@ import { DraftMediaStore, getDraftDeviceId } from "/js/drafts.js";
 import { PatchStore } from "/js/dataLayer/patchStore.js";
 import { Preferences } from "/js/preferences.js";
 import { Signal, SignalMap } from "/js/signals.js";
+import {
+  createConvo,
+  createMessage,
+  createNotification,
+  createPost,
+  createProfile,
+} from "../../../shared/factories.js";
 
 function makeDerived(dataStore, { preferences, draftMediaStore } = {}) {
   const patchStore = new PatchStore(dataStore);
@@ -37,6 +44,8 @@ function fakePreferences(overrides = {}) {
     getContentLabel: () => null,
     getMediaLabel: () => null,
     getProfileBlurLabel: () => null,
+    getBadgeLabelsForProfile: () => [],
+    getFollowingFeedPreference: () => null,
     clone() {
       return this;
     },
@@ -1123,6 +1132,34 @@ describe("$hydratedDrafts", () => {
     ]);
     assert.deepEqual(posts[1].embedRecords, undefined);
   });
+
+  it("leaves gallery items without a localRef path untouched", () => {
+    const posts = hydrateDraftPosts([
+      makeDraftView({
+        posts: [
+          {
+            text: "",
+            embedGallery: { items: [{ alt: "remote-only" }] },
+          },
+        ],
+      }),
+    ]);
+    assert.deepEqual(posts[0].embedGallery.items, [{ alt: "remote-only" }]);
+  });
+
+  it("leaves video embeds without a localRef path untouched", () => {
+    const posts = hydrateDraftPosts([
+      makeDraftView({
+        posts: [
+          {
+            text: "",
+            embedVideos: [{ captions: [] }],
+          },
+        ],
+      }),
+    ]);
+    assert.deepEqual(posts[0].embedVideos, [{ captions: [] }]);
+  });
 });
 
 describe("$groupConvoMemberList", () => {
@@ -1149,3 +1186,838 @@ describe("$groupConvoMemberList", () => {
     assert.deepEqual(result.cursor, "2");
   });
 });
+
+describe("$hydratedPosts (nested quotes and author labels)", () => {
+  const postURI = "at://did:test/app.bsky.feed.post/x";
+  const quotedUri = "at://did:quoted/app.bsky.feed.post/q";
+
+  function makeQuotePost() {
+    return {
+      uri: postURI,
+      record: { text: "quoting post" },
+      embed: {
+        $type: "app.bsky.embed.record#view",
+        record: {
+          $type: "app.bsky.embed.record#viewRecord",
+          uri: quotedUri,
+          author: { did: "did:quoted" },
+          value: { text: "quoted text" },
+        },
+      },
+    };
+  }
+
+  it("should mark a quoted post that contains a muted word", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore, {
+      preferences: fakePreferences({
+        quotedPostHasMutedWord: (quotedPost) => quotedPost.uri === quotedUri,
+      }),
+    });
+    dataStore.$posts.set(postURI, makeQuotePost());
+    const result = derived.$hydratedPosts.get(postURI);
+    assert.deepEqual(result.embed.record.hasMutedWord, true);
+    assert.deepEqual(result.viewer, undefined);
+  });
+
+  it("should mark a quoted post that is hidden", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore, {
+      preferences: fakePreferences({
+        isPostHidden: (uri) => uri === quotedUri,
+      }),
+    });
+    dataStore.$posts.set(postURI, makeQuotePost());
+    const result = derived.$hydratedPosts.get(postURI);
+    assert.deepEqual(result.embed.record.isHidden, true);
+    assert.deepEqual(result.viewer, undefined);
+  });
+
+  it("should attach a blur label to the post author", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore, {
+      preferences: fakePreferences({
+        getProfileBlurLabel: (author) =>
+          author?.did === "did:author" ? "adult" : null,
+      }),
+    });
+    dataStore.$posts.set(postURI, {
+      uri: postURI,
+      author: { did: "did:author" },
+      record: { text: "hello" },
+    });
+    const result = derived.$hydratedPosts.get(postURI);
+    assert.deepEqual(result.author.blurLabel, "adult");
+  });
+
+  it("should keep a third-party-blocked quote blocked when the quoted post is not loaded", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore, {
+      preferences: fakePreferences(),
+    });
+    dataStore.$posts.set(postURI, {
+      uri: postURI,
+      record: { text: "quoting post" },
+      embed: {
+        $type: "app.bsky.embed.record#view",
+        record: {
+          $type: "app.bsky.embed.record#viewBlocked",
+          uri: "at://did:blocked/app.bsky.feed.post/q",
+          blocked: true,
+          author: { did: "did:blocked", viewer: {} },
+        },
+      },
+    });
+    const result = derived.$hydratedPosts.get(postURI);
+    assert.deepEqual(
+      result.embed.record.$type,
+      "app.bsky.embed.record#viewBlocked",
+    );
+  });
+});
+
+describe("$hydratedPosts (join link previews)", () => {
+  const postURI = "at://did:test/app.bsky.feed.post/x";
+
+  function makeInviteLinkPost() {
+    return {
+      uri: postURI,
+      record: { text: "join us" },
+      embed: {
+        $type: "app.bsky.embed.external#view",
+        external: { uri: "https://bsky.app/chat/abc1234" },
+      },
+    };
+  }
+
+  it("should attach a loaded join link preview to an invite link embed", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    const preview = {
+      $type: "chat.bsky.group.defs#joinLinkPreviewView",
+      code: "abc1234",
+      groupName: "The Group",
+    };
+    dataStore.$joinLinkPreviewsByCode.set("abc1234", preview);
+    dataStore.$posts.set(postURI, makeInviteLinkPost());
+    const result = derived.$hydratedPosts.get(postURI);
+    assert.deepEqual(result.embed.$type, "chat.bsky.embed.joinLink#view");
+    assert.deepEqual(result.embed.joinLinkPreview, preview);
+  });
+
+  it("should leave the embed unchanged when no preview is loaded", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    dataStore.$posts.set(postURI, makeInviteLinkPost());
+    const result = derived.$hydratedPosts.get(postURI);
+    assert.deepEqual(result.embed.$type, "app.bsky.embed.external#view");
+  });
+});
+
+describe("$hydratedFeeds (reason, replies, following feed)", () => {
+  const feedURI = "at://did:test/app.bsky.feed.generator/test";
+
+  it("should preserve the feed item reason", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    const reason = {
+      $type: "app.bsky.feed.defs#reasonRepost",
+      by: { did: "did:plc:reposter", handle: "reposter.test" },
+    };
+    dataStore.$posts.set("post1", { uri: "post1", record: { text: "hi" } });
+    dataStore.$feeds.set(feedURI, {
+      feed: [{ post: { uri: "post1" }, reason }],
+      cursor: null,
+    });
+    const result = derived.$hydratedFeeds.get(feedURI);
+    assert.deepEqual(result.feed[0].reason, reason);
+  });
+
+  it("should hydrate reply root and parent post views and pass through other reply nodes", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    const rootPost = { uri: "root1", record: { text: "r" }, likeCount: 7 };
+    const parentPost = { uri: "parent1", record: { text: "p" }, likeCount: 3 };
+    const unknownNode = { $type: "custom#unknownNode", uri: "gone" };
+    dataStore.$posts.set("root1", rootPost);
+    dataStore.$posts.set("parent1", parentPost);
+    dataStore.$posts.set("reply1", { uri: "reply1", record: { text: "a" } });
+    dataStore.$posts.set("reply2", { uri: "reply2", record: { text: "b" } });
+    dataStore.$feeds.set(feedURI, {
+      feed: [
+        {
+          post: { uri: "reply1" },
+          reply: {
+            root: { $type: "app.bsky.feed.defs#postView", uri: "root1" },
+            parent: { $type: "app.bsky.feed.defs#postView", uri: "parent1" },
+          },
+        },
+        {
+          post: { uri: "reply2" },
+          reply: { root: unknownNode, parent: unknownNode },
+        },
+      ],
+      cursor: null,
+    });
+    const result = derived.$hydratedFeeds.get(feedURI);
+    assert.deepEqual(result.feed[0].reply.root.likeCount, 7);
+    assert.deepEqual(result.feed[0].reply.parent.likeCount, 3);
+    assert.deepEqual(result.feed[1].reply.root, unknownNode);
+    assert.deepEqual(result.feed[1].reply.parent, unknownNode);
+  });
+
+  it("should run the following feed through the following filter pipeline", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    const post = createPost({
+      uri: "at://did:plc:author/app.bsky.feed.post/1",
+      text: "hello",
+      authorHandle: "author.test",
+    });
+    dataStore.$posts.set(post.uri, post);
+    dataStore.$feeds.set("following", {
+      feed: [{ post: { uri: post.uri } }],
+      cursor: "fc",
+    });
+    const result = derived.$hydratedFeeds.get("following");
+    assert.deepEqual(result.feed.length, 1);
+    assert.deepEqual(result.feed[0].post.uri, post.uri);
+    assert.deepEqual(result.cursor, "fc");
+  });
+});
+
+describe("$notifications", () => {
+  const author = createProfile({ did: "did:plc:actor", handle: "actor.test" });
+
+  function seedNotifications(dataStore, notifications, cursor = null) {
+    dataStore.$notifications.set({ notifications, cursor });
+  }
+
+  it("should return null when notifications are not loaded", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$notifications.get(), null);
+  });
+
+  it("should attach the liked post as subject when it is loaded", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    dataStore.$posts.set("post1", { uri: "post1", record: { text: "hi" } });
+    seedNotifications(dataStore, [
+      createNotification({ reason: "like", author, reasonSubject: "post1" }),
+    ]);
+    const result = derived.$notifications.get();
+    assert.deepEqual(result[0].subject.uri, "post1");
+    assert.deepEqual(result[0].subject.record.text, "hi");
+  });
+
+  it("should attach an unavailable subject when the liked post is missing", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    seedNotifications(dataStore, [
+      createNotification({ reason: "repost", author, reasonSubject: "gone" }),
+    ]);
+    const result = derived.$notifications.get();
+    assert.deepEqual(result[0].subject, {
+      $type: "social.impro.feed.defs#unavailablePost",
+      uri: "gone",
+    });
+  });
+
+  it("should resolve via-repost notifications from the record subject", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    dataStore.$posts.set("post1", { uri: "post1", record: { text: "hi" } });
+    seedNotifications(dataStore, [
+      createNotification({
+        reason: "like-via-repost",
+        author,
+        record: { subject: { uri: "post1" } },
+      }),
+    ]);
+    const result = derived.$notifications.get();
+    assert.deepEqual(result[0].subject.uri, "post1");
+  });
+
+  it("should attach post and parent for reply notifications", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    dataStore.$posts.set("reply1", { uri: "reply1", record: { text: "r" } });
+    dataStore.$posts.set("parent1", { uri: "parent1", record: { text: "p" } });
+    seedNotifications(dataStore, [
+      createNotification({
+        reason: "reply",
+        author,
+        uri: "reply1",
+        record: { reply: { parent: { uri: "parent1" } } },
+      }),
+    ]);
+    const result = derived.$notifications.get();
+    assert.deepEqual(result[0].post.uri, "reply1");
+    assert.deepEqual(result[0].parentPost.uri, "parent1");
+  });
+
+  it("should leave parentPost null for mentions without a reply parent", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    dataStore.$posts.set("m1", { uri: "m1", record: { text: "m" } });
+    seedNotifications(dataStore, [
+      createNotification({ reason: "mention", author, uri: "m1", record: {} }),
+    ]);
+    const result = derived.$notifications.get();
+    assert.deepEqual(result[0].post.uri, "m1");
+    assert.deepEqual(result[0].parentPost, null);
+  });
+
+  it("should attach the post as reasonSubject for subscribed-post notifications", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    dataStore.$posts.set("s1", { uri: "s1", record: { text: "s" } });
+    seedNotifications(dataStore, [
+      createNotification({ reason: "subscribed-post", author, uri: "s1" }),
+    ]);
+    const result = derived.$notifications.get();
+    assert.deepEqual(result[0].reasonSubject.uri, "s1");
+  });
+
+  it("should pass through notifications with other reasons unchanged", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    const notification = createNotification({ reason: "follow", author });
+    seedNotifications(dataStore, [notification]);
+    const result = derived.$notifications.get();
+    assert.deepEqual(result[0], notification);
+  });
+});
+
+describe("$mentionNotifications", () => {
+  it("should return null when mention notifications are not loaded", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$mentionNotifications.get(), null);
+  });
+
+  it("should hydrate mention notifications", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    const author = createProfile({ did: "did:plc:a", handle: "a.test" });
+    dataStore.$posts.set("m1", { uri: "m1", record: { text: "m" } });
+    dataStore.$mentionNotifications.set({
+      notifications: [
+        createNotification({
+          reason: "mention",
+          author,
+          uri: "m1",
+          record: {},
+        }),
+      ],
+      cursor: "mc",
+    });
+    const result = derived.$mentionNotifications.get();
+    assert.deepEqual(result[0].post.uri, "m1");
+    assert.deepEqual(derived.$mentionNotificationCursor.get(), "mc");
+  });
+});
+
+describe("$hydratedPostThreads", () => {
+  const threadUri = "post1";
+
+  it("should return null when the thread or its hidden replies are not loaded", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$hydratedPostThreads.get(threadUri), null);
+    dataStore.$postThreads.set(threadUri, {
+      $type: "app.bsky.feed.defs#threadViewPost",
+      post: { uri: threadUri },
+    });
+    // Still null without $postThreadOthers
+    assert.deepEqual(derived.$hydratedPostThreads.get(threadUri), null);
+  });
+
+  it("should pass through an empty (not found) thread", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    const notFound = {
+      $type: "app.bsky.feed.defs#notFoundPost",
+      uri: threadUri,
+    };
+    dataStore.$postThreads.set(threadUri, notFound);
+    dataStore.$postThreadOthers.set(threadUri, []);
+    assert.deepEqual(derived.$hydratedPostThreads.get(threadUri), notFound);
+  });
+
+  it("should return null when the thread root post is not loaded", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    dataStore.$postThreads.set(threadUri, {
+      $type: "app.bsky.feed.defs#threadViewPost",
+      post: { uri: threadUri },
+    });
+    dataStore.$postThreadOthers.set(threadUri, []);
+    assert.deepEqual(derived.$hydratedPostThreads.get(threadUri), null);
+  });
+
+  it("should hydrate replies, marking hidden ones and passing through non-post replies", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    const blockedReply = {
+      $type: "app.bsky.feed.defs#blockedPost",
+      uri: "blocked1",
+      blocked: true,
+    };
+    dataStore.$posts.set(threadUri, {
+      uri: threadUri,
+      record: { text: "root" },
+    });
+    dataStore.$posts.set("reply1", { uri: "reply1", record: { text: "r1" } });
+    dataStore.$postThreads.set(threadUri, {
+      $type: "app.bsky.feed.defs#threadViewPost",
+      post: { uri: threadUri },
+      replies: [
+        {
+          $type: "app.bsky.feed.defs#threadViewPost",
+          post: { uri: "reply1" },
+        },
+        blockedReply,
+      ],
+    });
+    dataStore.$postThreadOthers.set(threadUri, [{ uri: "reply1" }]);
+    const result = derived.$hydratedPostThreads.get(threadUri);
+    assert.deepEqual(result.post.uri, threadUri);
+    assert.deepEqual(result.replies[0].post.uri, "reply1");
+    assert.deepEqual(result.replies[0].post.isHidden, true);
+    assert.deepEqual(result.replies[1], blockedReply);
+  });
+
+  function seedThreadWithParent(dataStore, parent) {
+    dataStore.$posts.set(threadUri, {
+      uri: threadUri,
+      record: { text: "root" },
+    });
+    dataStore.$postThreads.set(threadUri, {
+      $type: "app.bsky.feed.defs#threadViewPost",
+      post: { uri: threadUri },
+      parent,
+    });
+    dataStore.$postThreadOthers.set(threadUri, []);
+  }
+
+  it("should hydrate a parent chain recursively", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    const grandparent = { $type: "app.bsky.feed.defs#notFoundPost", uri: "gp" };
+    dataStore.$posts.set("pp", { uri: "pp", record: { text: "parent" } });
+    seedThreadWithParent(dataStore, {
+      $type: "app.bsky.feed.defs#threadViewPost",
+      post: { uri: "pp" },
+      parent: grandparent,
+    });
+    const result = derived.$hydratedPostThreads.get(threadUri);
+    assert.deepEqual(result.parent.post.uri, "pp");
+    assert.deepEqual(result.parent.post.record.text, "parent");
+    assert.deepEqual(result.parent.parent, grandparent);
+  });
+
+  it("should replace a confirmed-unavailable parent with an unavailable post", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    dataStore.$unavailablePosts.set("pp", {
+      $type: "social.impro.feed.defs#unavailablePost",
+      uri: "pp",
+    });
+    seedThreadWithParent(dataStore, {
+      $type: "app.bsky.feed.defs#blockedPost",
+      uri: "pp",
+      blocked: true,
+      author: { did: "did:blocked", viewer: {} },
+    });
+    const result = derived.$hydratedPostThreads.get(threadUri);
+    assert.deepEqual(result.parent, {
+      $type: "social.impro.feed.defs#unavailablePost",
+      uri: "pp",
+    });
+  });
+
+  it("should keep a blocked parent as-is when the parent author blocks the viewer", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    const blockedParent = {
+      $type: "app.bsky.feed.defs#blockedPost",
+      uri: "pp",
+      blocked: true,
+      author: { did: "did:blocked", viewer: { blockedBy: true } },
+    };
+    seedThreadWithParent(dataStore, blockedParent);
+    const result = derived.$hydratedPostThreads.get(threadUri);
+    assert.deepEqual(result.parent, blockedParent);
+  });
+});
+
+describe("actor search results", () => {
+  const did = "did:plc:found";
+
+  function seedProfile(dataStore) {
+    dataStore.setProfiles([createProfile({ did, handle: "found.test" })]);
+  }
+
+  it("$profileSearchResults should be null before a search and hydrate after", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$profileSearchResults.get(), null);
+    assert.deepEqual(derived.$profileSearchCursor.get(), null);
+    seedProfile(dataStore);
+    dataStore.$profileSearchResults.set({
+      actors: [{ did }],
+      cursor: "pc",
+    });
+    const result = derived.$profileSearchResults.get();
+    assert.deepEqual(result.length, 1);
+    assert.deepEqual(result[0].handle, "found.test");
+    assert.deepEqual(derived.$profileSearchCursor.get(), "pc");
+  });
+
+  it("$chatRecipientSearchResults should be null before a search and hydrate after", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$chatRecipientSearchResults.get(), null);
+    seedProfile(dataStore);
+    dataStore.$chatRecipientSearchResults.set({ actors: [{ did }] });
+    const result = derived.$chatRecipientSearchResults.get();
+    assert.deepEqual(result[0].handle, "found.test");
+  });
+
+  it("$searchTypeaheadResults should be null before a search and hydrate after", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$searchTypeaheadResults.get(), null);
+    seedProfile(dataStore);
+    dataStore.$searchTypeaheadResults.set({ actors: [{ did }] });
+    const result = derived.$searchTypeaheadResults.get();
+    assert.deepEqual(result[0].handle, "found.test");
+  });
+});
+
+describe("$feedSearchResults", () => {
+  it("should be null before a search and pass feeds through after", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$feedSearchResults.get(), null);
+    assert.deepEqual(derived.$feedSearchCursor.get(), null);
+    const feeds = [{ uri: "feed-1", displayName: "Feed One" }];
+    dataStore.$feedSearchResults.set({ feeds, cursor: "fc" });
+    assert.deepEqual(derived.$feedSearchResults.get(), feeds);
+    assert.deepEqual(derived.$feedSearchCursor.get(), "fc");
+  });
+});
+
+describe("post search results", () => {
+  it("should be null before a search and hydrate loaded posts after", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$postSearchResultsTop.get(), null);
+    assert.deepEqual(derived.$postSearchResultsLatest.get(), null);
+    assert.deepEqual(derived.$postSearchCursorTop.get(), null);
+    assert.deepEqual(derived.$postSearchCursorLatest.get(), null);
+    dataStore.$posts.set("post1", { uri: "post1", record: { text: "hit" } });
+    dataStore.$postSearchResultsTop.set({
+      posts: [{ uri: "post1" }, { uri: "missing" }],
+      cursor: "tc",
+    });
+    dataStore.$postSearchResultsLatest.set({
+      posts: [{ uri: "post1" }],
+      cursor: "lc",
+    });
+    const top = derived.$postSearchResultsTop.get();
+    assert.deepEqual(top.length, 1);
+    assert.deepEqual(top[0].uri, "post1");
+    const latest = derived.$postSearchResultsLatest.get();
+    assert.deepEqual(latest.length, 1);
+    assert.deepEqual(derived.$postSearchCursorTop.get(), "tc");
+    assert.deepEqual(derived.$postSearchCursorLatest.get(), "lc");
+  });
+});
+
+describe("$hydratedPostQuotes", () => {
+  const postUri = "post1";
+
+  it("should return null when quotes are not loaded", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$hydratedPostQuotes.get(postUri), null);
+  });
+
+  it("should hydrate loaded quote posts and skip missing ones", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    dataStore.$posts.set("quote1", { uri: "quote1", record: { text: "q" } });
+    dataStore.$postQuotes.set(postUri, {
+      posts: [{ uri: "quote1" }, { uri: "missing" }],
+      cursor: "qc",
+    });
+    const result = derived.$hydratedPostQuotes.get(postUri);
+    assert.deepEqual(result.posts.length, 1);
+    assert.deepEqual(result.posts[0].uri, "quote1");
+    assert.deepEqual(result.cursor, "qc");
+  });
+});
+
+describe("$listMembers", () => {
+  const listUri = "at://did:plc:owner/app.bsky.graph.list/1";
+
+  it("should return null when list members are not loaded", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$listMembers.get(listUri), null);
+  });
+
+  it("should hydrate member profiles and carry the cursor", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    const did = "did:plc:member";
+    dataStore.setProfiles([createProfile({ did, handle: "member.test" })]);
+    dataStore.$listMembers.set(listUri, {
+      items: [{ subject: { did } }],
+      cursor: "lc",
+    });
+    const result = derived.$listMembers.get(listUri);
+    assert.deepEqual(result.members.length, 1);
+    assert.deepEqual(result.members[0].handle, "member.test");
+    assert.deepEqual(result.cursor, "lc");
+  });
+});
+
+describe("$hydratedProfiles (blur labels)", () => {
+  it("should attach a blur label from preferences", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore, {
+      preferences: fakePreferences({ getProfileBlurLabel: () => "adult" }),
+    });
+    const did = "did:plc:user";
+    dataStore.setProfiles([createProfile({ did, handle: "user.test" })]);
+    const result = derived.$hydratedProfiles.get(did);
+    assert.deepEqual(result.blurLabel, "adult");
+  });
+});
+
+describe("$hydratedDetailedProfiles", () => {
+  const did = "did:plc:user";
+
+  it("should return null when the detailed profile does not exist", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$hydratedDetailedProfiles.get(did), null);
+  });
+
+  it("should return the profile unchanged when no labels apply", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore, {
+      preferences: fakePreferences(),
+    });
+    dataStore.$detailedProfiles.set(
+      did,
+      createProfile({ did, handle: "user.test" }),
+    );
+    const result = derived.$hydratedDetailedProfiles.get(did);
+    assert.deepEqual(result.handle, "user.test");
+    assert.deepEqual(result.blurLabel, undefined);
+    assert.deepEqual(result.badgeLabels, undefined);
+  });
+
+  it("should attach blur and badge labels from preferences", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore, {
+      preferences: fakePreferences({
+        getProfileBlurLabel: () => "adult",
+        getBadgeLabelsForProfile: () => ["verified"],
+      }),
+    });
+    dataStore.$detailedProfiles.set(
+      did,
+      createProfile({ did, handle: "user.test" }),
+    );
+    const result = derived.$hydratedDetailedProfiles.get(did);
+    assert.deepEqual(result.blurLabel, "adult");
+    assert.deepEqual(result.badgeLabels, ["verified"]);
+  });
+});
+
+describe("$convoList and $convoRequestList", () => {
+  function seedConvos(dataStore, convos) {
+    for (const convo of convos) {
+      dataStore.$convos.set(convo.id, convo);
+    }
+  }
+
+  function makeConvoWithMessage(id, sentAt, status = "accepted") {
+    return createConvo({
+      id,
+      status,
+      otherMember: createProfile({
+        did: `did:plc:${id}`,
+        handle: `${id}.test`,
+      }),
+      lastMessage: createMessage({
+        id: `msg-${id}`,
+        text: "hello",
+        senderDid: `did:plc:${id}`,
+        sentAt,
+      }),
+    });
+  }
+
+  it("$convoList should be null before loading", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$convoList.get(), null);
+    assert.deepEqual(derived.$convoListCursor.get(), null);
+  });
+
+  it("$convoList should sort convos by last interaction, newest first", () => {
+    const dataStore = new DataStore();
+    const older = makeConvoWithMessage("older", "2026-01-01T00:00:00.000Z");
+    const newer = makeConvoWithMessage("newer", "2026-01-05T00:00:00.000Z");
+    seedConvos(dataStore, [older, newer]);
+    dataStore.$convoList.set({
+      convos: [older, newer],
+      cursor: "cc",
+    });
+    const { derived } = makeDerived(dataStore);
+    const result = derived.$convoList.get();
+    assert.deepEqual(
+      result.map((convo) => convo.id),
+      ["newer", "older"],
+    );
+    assert.deepEqual(derived.$convoListCursor.get(), "cc");
+  });
+
+  it("$convoRequestList should be null before loading", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$convoRequestList.get(), null);
+    assert.deepEqual(derived.$convoRequestListCursor.get(), null);
+  });
+
+  it("$convoRequestList should drop unknown convos and sort the rest", () => {
+    const dataStore = new DataStore();
+    const older = makeConvoWithMessage(
+      "older",
+      "2026-01-01T00:00:00.000Z",
+      "request",
+    );
+    const newer = makeConvoWithMessage(
+      "newer",
+      "2026-01-05T00:00:00.000Z",
+      "request",
+    );
+    seedConvos(dataStore, [older, newer]);
+    dataStore.$convoRequestList.set({
+      convos: [older, newer, { id: "not-in-store" }],
+      cursor: "rc",
+    });
+    const { derived } = makeDerived(dataStore);
+    const result = derived.$convoRequestList.get();
+    assert.deepEqual(
+      result.map((convo) => convo.id),
+      ["newer", "older"],
+    );
+    assert.deepEqual(derived.$convoRequestListCursor.get(), "rc");
+  });
+});
+
+describe("$convoProfiles (badge labels)", () => {
+  it("should attach badge labels to convo members", () => {
+    const dataStore = new DataStore();
+    dataStore.$convos.set("convo1", {
+      id: "convo1",
+      members: [{ did: "did:plc:member", handle: "member.test" }],
+    });
+    const { derived } = makeDerived(dataStore, {
+      preferences: fakePreferences({
+        getBadgeLabelsForProfile: () => ["verified"],
+      }),
+    });
+    const profiles = derived.$convoProfiles.get("convo1");
+    assert.deepEqual(profiles[0].badgeLabels, ["verified"]);
+  });
+});
+
+describe("interaction and graph list hydration", () => {
+  const actorDid = "did:plc:actor";
+
+  function seedActor(dataStore) {
+    dataStore.setProfiles([
+      createProfile({ did: actorDid, handle: "actor.test" }),
+    ]);
+  }
+
+  it("$postLikes should be null before loading and hydrate actors after", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$postLikes.get("post1"), null);
+    seedActor(dataStore);
+    dataStore.$postLikes.set("post1", {
+      likes: [{ actor: { did: actorDid }, createdAt: "2026-01-01T00:00:00Z" }],
+      cursor: "lc",
+    });
+    const result = derived.$postLikes.get("post1");
+    assert.deepEqual(result.likes[0].actor.handle, "actor.test");
+    assert.deepEqual(result.likes[0].createdAt, "2026-01-01T00:00:00Z");
+    assert.deepEqual(result.cursor, "lc");
+  });
+
+  it("$postReposts should be null before loading and hydrate actors after", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$postReposts.get("post1"), null);
+    seedActor(dataStore);
+    dataStore.$postReposts.set("post1", {
+      repostedBy: [{ did: actorDid }],
+      cursor: "rc",
+    });
+    const result = derived.$postReposts.get("post1");
+    assert.deepEqual(result.repostedBy[0].handle, "actor.test");
+    assert.deepEqual(result.cursor, "rc");
+  });
+
+  it("$profileFollows should be null before loading and hydrate actors after", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$profileFollows.get("did:plc:subject"), null);
+    seedActor(dataStore);
+    dataStore.$profileFollows.set("did:plc:subject", {
+      follows: [{ did: actorDid }],
+      cursor: "fc",
+    });
+    const result = derived.$profileFollows.get("did:plc:subject");
+    assert.deepEqual(result.follows[0].handle, "actor.test");
+    assert.deepEqual(result.cursor, "fc");
+  });
+
+  it("$profileFollowers should be null before loading and hydrate actors after", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$profileFollowers.get("did:plc:subject"), null);
+    seedActor(dataStore);
+    dataStore.$profileFollowers.set("did:plc:subject", {
+      followers: [{ did: actorDid }],
+      cursor: "fc",
+    });
+    const result = derived.$profileFollowers.get("did:plc:subject");
+    assert.deepEqual(result.followers[0].handle, "actor.test");
+    assert.deepEqual(result.cursor, "fc");
+  });
+
+  it("$knownFollowers should be null before loading and hydrate actors after", () => {
+    const dataStore = new DataStore();
+    const { derived } = makeDerived(dataStore);
+    assert.deepEqual(derived.$knownFollowers.get("did:plc:subject"), null);
+    seedActor(dataStore);
+    dataStore.$knownFollowers.set("did:plc:subject", {
+      followers: [{ did: actorDid }],
+      count: 3,
+    });
+    const result = derived.$knownFollowers.get("did:plc:subject");
+    assert.deepEqual(result.followers[0].handle, "actor.test");
+    assert.deepEqual(result.count, 3);
+  });
+});
diff --git a/tests/unit/specs/dataLayer/requests.test.js b/tests/unit/specs/dataLayer/requests.test.js
index 93dbb0be..2e18fd31 100644
--- a/tests/unit/specs/dataLayer/requests.test.js
+++ b/tests/unit/specs/dataLayer/requests.test.js
@@ -2524,6 +2524,67 @@ describe("pollConvoMessages", () => {
 
     assert.deepEqual(dataStore.$convoMessages.get(convoId).messages.length, 0);
   });
+
+  it("should replace the stored message when an add-reaction log arrives", async () => {
+    dataStore.$convoMessages.set(convoId, {
+      messages: [{ id: "m1", text: "hi", reactions: [] }],
+      cursor: "keep",
+    });
+    const requests = makeRequestsWithLogs([
+      {
+        $type: "chat.bsky.convo.defs#logAddReaction",
+        rev: "rev1",
+        convoId,
+        message: {
+          id: "m1",
+          text: "hi",
+          reactions: [{ value: "👍", sender: { did: otherDid } }],
+        },
+        reaction: { value: "👍", sender: { did: otherDid } },
+        relatedProfiles: [{ did: otherDid, handle: "other.test" }],
+      },
+    ]);
+
+    const cursor = await requests.pollConvoMessages(convoId);
+
+    assert.deepEqual(cursor, "next");
+    const stored = dataStore.$convoMessages.get(convoId);
+    assert.deepEqual(stored.messages.length, 1);
+    assert.deepEqual(stored.messages[0].reactions.length, 1);
+    assert.deepEqual(stored.cursor, "keep");
+    assert.deepEqual(dataStore.$messages.get("m1").reactions.length, 1);
+    assert.deepEqual(dataStore.$profiles.get(otherDid).handle, "other.test");
+  });
+
+  it("should update only the message store when a remove-reaction log arrives for an unloaded convo", async () => {
+    dataStore.$convoMessages.delete(convoId);
+    const requests = makeRequestsWithLogs([
+      {
+        $type: "chat.bsky.convo.defs#logRemoveReaction",
+        rev: "rev1",
+        convoId,
+        message: { id: "m1", text: "hi", reactions: [] },
+        reaction: { value: "👍", sender: { did: otherDid } },
+      },
+    ]);
+
+    const cursor = await requests.pollConvoMessages(convoId);
+
+    assert.deepEqual(cursor, "next");
+    assert.deepEqual(dataStore.$messages.get("m1").reactions, []);
+    assert.deepEqual(dataStore.$convoMessages.get(convoId), null);
+  });
+
+  it("should stop and return the cursor when no messages data exists for the convo", async () => {
+    dataStore.$convoMessages.delete(convoId);
+    const requests = makeRequestsWithLogs([makeMessageLog("m1", otherDid)]);
+
+    const cursor = await requests.pollConvoMessages(convoId);
+
+    assert.deepEqual(cursor, "next");
+    assert.deepEqual(dataStore.$messages.get("m1"), null);
+    assert.deepEqual(dataStore.$convoMessages.get(convoId), null);
+  });
 });
 
 describe("loadPostLikes", () => {
@@ -3172,3 +3233,967 @@ describe("_loadBlockedPosts", () => {
     assert.deepEqual(dataStore.$unavailablePosts.get(existingUri), null);
   });
 });
+
+function makeRequestsWithConstellation(api, dataStore, constellation) {
+  return new Requests(
+    api,
+    dataStore,
+    { requirePreferences: () => Preferences.createLoggedOutPreferences() },
+    stubPluginService,
+    new DraftMediaStore("test-media"),
+    { constellation },
+  );
+}
+
+describe("statusStore.$statuses", () => {
+  it("should expose combined loading and error state per request id", async () => {
+    const apiError = new ApiError({
+      status: 500,
+      statusText: "Server Error",
+      data: null,
+      headers: {},
+      url: "/x",
+    });
+    const mockApi = {
+      getMutes: async () => {
+        throw apiError;
+      },
+    };
+    const requests = makeRequests(mockApi, new DataStore());
+
+    assert.deepEqual(requests.statusStore.$statuses.get("loadMutedProfiles"), {
+      loading: false,
+      error: null,
+    });
+
+    const promise = requests.loadMutedProfiles();
+    assert.deepEqual(
+      requests.statusStore.$statuses.get("loadMutedProfiles").loading,
+      true,
+    );
+    await promise;
+
+    const status = requests.statusStore.$statuses.get("loadMutedProfiles");
+    assert.deepEqual(status.loading, false);
+    assert(status.error === apiError, "expected the recorded ApiError");
+  });
+});
+
+describe("loadCurrentUser", () => {
+  it("should resolve the session did and store the profile", async () => {
+    const profile = { did: "did:plc:me", handle: "me.test" };
+    let requestedDid = null;
+    const mockApi = {
+      getSession: async () => ({ did: "did:plc:me" }),
+      getProfile: async (did) => {
+        requestedDid = did;
+        return profile;
+      },
+    };
+    const dataStore = new DataStore();
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadCurrentUser();
+
+    assert.deepEqual(requestedDid, "did:plc:me");
+    assert.deepEqual(dataStore.$currentUser.get(), profile);
+  });
+});
+
+describe("loadPost", () => {
+  it("should load and store a single post", async () => {
+    const post = { uri: "at://did:plc:a/app.bsky.feed.post/1", record: {} };
+    const mockApi = { getPost: async () => post };
+    const dataStore = new DataStore();
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadPost(post.uri);
+
+    assert.deepEqual(dataStore.$posts.get(post.uri), post);
+  });
+});
+
+describe("loadPostThread with a blocked parent", () => {
+  const rootUri = "at://did:plc:root/app.bsky.feed.post/root";
+  const parentUri = "at://did:plc:blockedauthor/app.bsky.feed.post/parent";
+  const postURI = "at://did:plc:viewer/app.bsky.feed.post/main";
+
+  function makeMainPost() {
+    return {
+      uri: postURI,
+      replyCount: 0,
+      record: {
+        reply: { root: { uri: rootUri }, parent: { uri: parentUri } },
+      },
+    };
+  }
+
+  function makeBlockedParent(viewer = {}) {
+    return {
+      $type: "app.bsky.feed.defs#blockedPost",
+      uri: parentUri,
+      blocked: true,
+      author: { did: "did:plc:blockedauthor", viewer },
+    };
+  }
+
+  const parentPost = {
+    uri: parentUri,
+    author: { did: "did:plc:blockedauthor" },
+    record: { reply: { root: { uri: rootUri }, parent: { uri: rootUri } } },
+  };
+  const rootPost = {
+    uri: rootUri,
+    author: { did: "did:plc:root" },
+    record: {},
+  };
+
+  function makeApiWithPosts() {
+    const postsByUri = new Map([
+      [parentUri, parentPost],
+      [rootUri, rootPost],
+    ]);
+    return {
+      getPostThread: async () => ({
+        post: makeMainPost(),
+        parent: makeBlockedParent(),
+        replies: [],
+      }),
+      getPostThreadOther: async () => [],
+      getPosts: async (uris) =>
+        uris.map((uri) => postsByUri.get(uri)).filter(Boolean),
+    };
+  }
+
+  it("should rebuild the parent chain from backlinks across blocked authors", async () => {
+    const dataStore = new DataStore();
+    const constellation = {
+      getLinks: async () => [
+        {
+          did: "did:plc:blockedauthor",
+          collection: "app.bsky.feed.post",
+          rkey: "parent",
+        },
+      ],
+    };
+    const requests = makeRequestsWithConstellation(
+      makeApiWithPosts(),
+      dataStore,
+      constellation,
+    );
+
+    await requests.loadPostThread(postURI);
+
+    const thread = dataStore.$postThreads.get(postURI);
+    assert.deepEqual(thread.parent.$type, "app.bsky.feed.defs#threadViewPost");
+    assert.deepEqual(thread.parent.post.uri, parentUri);
+    assert.deepEqual(thread.parent.parent.post.uri, rootUri);
+    assert.deepEqual(thread.parent.parent.parent, null);
+    assert.deepEqual(dataStore.$posts.get(parentUri), parentPost);
+    assert.deepEqual(dataStore.$posts.get(rootUri), rootPost);
+  });
+
+  it("should walk through multiple loaded posts by the same blocked author", async () => {
+    const grandparentUri =
+      "at://did:plc:blockedauthor/app.bsky.feed.post/grandparent";
+    const nearParentPost = {
+      uri: parentUri,
+      author: { did: "did:plc:blockedauthor" },
+      record: {
+        reply: { root: { uri: rootUri }, parent: { uri: grandparentUri } },
+      },
+    };
+    const grandparentPost = {
+      uri: grandparentUri,
+      author: { did: "did:plc:blockedauthor" },
+      record: { reply: { root: { uri: rootUri }, parent: { uri: rootUri } } },
+    };
+    const postsByUri = new Map([
+      [parentUri, nearParentPost],
+      [grandparentUri, grandparentPost],
+      [rootUri, rootPost],
+    ]);
+    const dataStore = new DataStore();
+    const constellation = {
+      getLinks: async () => [
+        {
+          did: "did:plc:blockedauthor",
+          collection: "app.bsky.feed.post",
+          rkey: "parent",
+        },
+        {
+          did: "did:plc:blockedauthor",
+          collection: "app.bsky.feed.post",
+          rkey: "grandparent",
+        },
+      ],
+    };
+    const mockApi = {
+      getPostThread: async () => ({
+        post: makeMainPost(),
+        parent: makeBlockedParent(),
+        replies: [],
+      }),
+      getPostThreadOther: async () => [],
+      getPosts: async (uris) =>
+        uris.map((uri) => postsByUri.get(uri)).filter(Boolean),
+    };
+    const requests = makeRequestsWithConstellation(
+      mockApi,
+      dataStore,
+      constellation,
+    );
+
+    await requests.loadPostThread(postURI);
+
+    const thread = dataStore.$postThreads.get(postURI);
+    assert.deepEqual(thread.parent.post.uri, parentUri);
+    assert.deepEqual(thread.parent.parent.post.uri, grandparentUri);
+    assert.deepEqual(thread.parent.parent.parent.post.uri, rootUri);
+  });
+
+  it("should rethrow non-abort backlink failures", async () => {
+    const dataStore = new DataStore();
+    const constellation = {
+      getLinks: async () => {
+        throw new TypeError("network down");
+      },
+    };
+    const mockApi = {
+      getPostThread: async () => ({
+        post: makeMainPost(),
+        parent: makeBlockedParent(),
+        replies: [],
+      }),
+      getPostThreadOther: async () => [],
+    };
+    const requests = makeRequestsWithConstellation(
+      mockApi,
+      dataStore,
+      constellation,
+    );
+
+    await assert.rejects(requests.loadPostThread(postURI), /network down/);
+  });
+
+  it("should fall back to loading the blocked parent thread when the viewer is involved in the block", async () => {
+    const dataStore = new DataStore();
+    let constellationCalled = false;
+    const constellation = {
+      getLinks: async () => {
+        constellationCalled = true;
+        return [];
+      },
+    };
+    const parentThread = {
+      post: { uri: parentUri, replyCount: 0 },
+      replies: [],
+    };
+    const mockApi = {
+      getPostThread: async (uri) => {
+        if (uri === parentUri) return parentThread;
+        return {
+          post: makeMainPost(),
+          parent: makeBlockedParent({ blocking: "at://block" }),
+          replies: [],
+        };
+      },
+      getPostThreadOther: async () => [],
+    };
+    const requests = makeRequestsWithConstellation(
+      mockApi,
+      dataStore,
+      constellation,
+    );
+
+    await requests.loadPostThread(postURI);
+
+    assert.deepEqual(constellationCalled, false);
+    const thread = dataStore.$postThreads.get(postURI);
+    assert.deepEqual(thread.parent.post.uri, parentUri);
+  });
+
+  it("should fall back to loading the blocked parent thread when backlinks time out", async () => {
+    const dataStore = new DataStore();
+    const constellation = {
+      getLinks: async () => {
+        throw Object.assign(new Error("timed out"), { name: "AbortError" });
+      },
+    };
+    const parentThread = {
+      post: { uri: parentUri, replyCount: 0 },
+      replies: [],
+    };
+    const mockApi = {
+      getPostThread: async (uri) => {
+        if (uri === parentUri) return parentThread;
+        return {
+          post: makeMainPost(),
+          parent: makeBlockedParent(),
+          replies: [],
+        };
+      },
+      getPostThreadOther: async () => [],
+    };
+    const requests = makeRequestsWithConstellation(
+      mockApi,
+      dataStore,
+      constellation,
+    );
+
+    await requests.loadPostThread(postURI);
+
+    const thread = dataStore.$postThreads.get(postURI);
+    assert.deepEqual(thread.parent.post.uri, parentUri);
+  });
+
+  it("should fall back to loading the blocked parent thread when backlinks yield no posts", async () => {
+    const dataStore = new DataStore();
+    // No backlinks by the blocked author — only the root gets appended
+    const constellation = { getLinks: async () => [] };
+    const parentThread = {
+      post: { uri: parentUri, replyCount: 0 },
+      replies: [],
+    };
+    const mockApi = {
+      getPostThread: async (uri) => {
+        if (uri === parentUri) return parentThread;
+        return {
+          post: makeMainPost(),
+          parent: makeBlockedParent(),
+          replies: [],
+        };
+      },
+      getPostThreadOther: async () => [],
+    };
+    const requests = makeRequestsWithConstellation(
+      mockApi,
+      dataStore,
+      constellation,
+    );
+
+    await requests.loadPostThread(postURI);
+
+    const thread = dataStore.$postThreads.get(postURI);
+    assert.deepEqual(thread.parent.post.uri, parentUri);
+  });
+});
+
+describe("_loadBlockedReplies", () => {
+  const postURI = "at://did:plc:op/app.bsky.feed.post/main";
+  const replyUri = "at://did:plc:replier/app.bsky.feed.post/r1";
+  const blockedReplyUri = "at://did:plc:blocker/app.bsky.feed.post/r2";
+
+  it("should return an empty list when the thread has no post", async () => {
+    const requests = makeRequests({}, new DataStore());
+
+    const replies = await requests._loadBlockedReplies({});
+
+    assert.deepEqual(replies, []);
+  });
+
+  it("should keep the loaded replies when backlinks time out", async () => {
+    const dataStore = new DataStore();
+    const constellation = {
+      getLinks: async () => {
+        throw Object.assign(new Error("timed out"), { name: "AbortError" });
+      },
+    };
+    const mockApi = {
+      getPostThread: async () => ({
+        post: { uri: postURI, replyCount: 1, record: {} },
+        replies: [],
+      }),
+      getPostThreadOther: async () => [],
+    };
+    const requests = makeRequestsWithConstellation(
+      mockApi,
+      dataStore,
+      constellation,
+    );
+
+    await requests.loadPostThread(postURI);
+
+    assert.deepEqual(dataStore.$postThreads.get(postURI).replies, []);
+  });
+
+  it("should rethrow non-abort backlink failures", async () => {
+    const dataStore = new DataStore();
+    const constellation = {
+      getLinks: async () => {
+        throw new TypeError("network down");
+      },
+    };
+    const mockApi = {
+      getPostThread: async () => ({
+        post: { uri: postURI, replyCount: 1, record: {} },
+        replies: [],
+      }),
+      getPostThreadOther: async () => [],
+    };
+    const requests = makeRequestsWithConstellation(
+      mockApi,
+      dataStore,
+      constellation,
+    );
+
+    await assert.rejects(requests.loadPostThread(postURI), /network down/);
+  });
+
+  it("should load missing replies from backlinks and mark them as blocked replies", async () => {
+    const dataStore = new DataStore();
+    const constellation = {
+      getLinks: async () => [
+        {
+          did: "did:plc:replier",
+          collection: "app.bsky.feed.post",
+          rkey: "r1",
+        },
+        {
+          did: "did:plc:blocker",
+          collection: "app.bsky.feed.post",
+          rkey: "r2",
+        },
+      ],
+    };
+    const replyPost = {
+      uri: replyUri,
+      author: { did: "did:plc:replier", viewer: {} },
+      record: {},
+    };
+    const blockingReplyPost = {
+      uri: blockedReplyUri,
+      author: { did: "did:plc:blocker", viewer: { blockedBy: true } },
+      record: {},
+    };
+    let requestedUris = null;
+    const mockApi = {
+      getPostThread: async () => ({
+        post: { uri: postURI, replyCount: 2, record: {} },
+        replies: [],
+      }),
+      getPostThreadOther: async () => [],
+      getPosts: async (uris) => {
+        requestedUris = uris;
+        return [replyPost, blockingReplyPost];
+      },
+    };
+    const requests = makeRequestsWithConstellation(
+      mockApi,
+      dataStore,
+      constellation,
+    );
+
+    await requests.loadPostThread(postURI);
+
+    assert.deepEqual(requestedUris, [replyUri, blockedReplyUri]);
+    const thread = dataStore.$postThreads.get(postURI);
+    // The reply from the author blocking the viewer is filtered out
+    assert.deepEqual(thread.replies.length, 1);
+    assert.deepEqual(thread.replies[0].post.uri, replyUri);
+    assert.deepEqual(thread.replies[0].post.isBlockedReply, true);
+    assert.deepEqual(dataStore.$posts.get(replyUri).isBlockedReply, true);
+  });
+});
+
+describe("loadNextFeedPage feed types", () => {
+  it("should use getFollowingFeed for the timeline type", async () => {
+    const dataStore = new DataStore();
+    let called = false;
+    const mockApi = {
+      getFollowingFeed: async () => {
+        called = true;
+        return { feed: [{ post: { uri: "t1" } }], cursor: "c1" };
+      },
+    };
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadNextFeedPage({ type: "timeline", uri: "following" });
+
+    assert.deepEqual(called, true);
+    assert.deepEqual(dataStore.$feeds.get("following").feed.length, 1);
+  });
+
+  it("should use getListFeed for the list type", async () => {
+    const dataStore = new DataStore();
+    const listUri = "at://did/app.bsky.graph.list/1";
+    let requestedUri = null;
+    const mockApi = {
+      getListFeed: async (uri) => {
+        requestedUri = uri;
+        return { feed: [{ post: { uri: "l1" } }], cursor: "c1" };
+      },
+    };
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadNextFeedPage({ type: "list", uri: listUri });
+
+    assert.deepEqual(requestedUri, listUri);
+    assert.deepEqual(dataStore.$feeds.get(listUri).feed.length, 1);
+  });
+
+  it("should reject on an unknown feed type", async () => {
+    const requests = makeRequests({}, new DataStore());
+
+    await assert.rejects(
+      requests.loadNextFeedPage({ type: "bogus", uri: "x" }),
+      /Unknown pinned item type/,
+    );
+  });
+});
+
+describe("loadDetailedProfiles", () => {
+  it("should store each profile in both profile maps", async () => {
+    const profiles = [
+      { did: "did:plc:a", handle: "a.test" },
+      { did: "did:plc:b", handle: "b.test" },
+    ];
+    const mockApi = { getProfiles: async () => profiles };
+    const dataStore = new DataStore();
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadDetailedProfiles(["did:plc:a", "did:plc:b"]);
+
+    assert.deepEqual(dataStore.$profiles.get("did:plc:a"), profiles[0]);
+    assert.deepEqual(dataStore.$detailedProfiles.get("did:plc:b"), profiles[1]);
+  });
+
+  it("should not call the api when dids is empty", async () => {
+    let called = false;
+    const mockApi = {
+      getProfiles: async () => {
+        called = true;
+        return [];
+      },
+    };
+    const requests = makeRequests(mockApi, new DataStore());
+
+    await requests.loadDetailedProfiles([]);
+
+    assert.deepEqual(called, false);
+  });
+});
+
+describe("_loadJoinLinkPreviews", () => {
+  it("should fetch distinct codes and store previews by code", async () => {
+    const dataStore = new DataStore();
+    let requestedCodes = null;
+    const mockApi = {
+      isAuthenticated: true,
+      getJoinLinkPreviews: async (codes) => {
+        requestedCodes = codes;
+        return {
+          joinLinkPreviews: [
+            { code: "abc", name: "Group" },
+            { name: "no code" },
+          ],
+        };
+      },
+    };
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests._loadJoinLinkPreviews(["abc", "abc", null, "def"]);
+
+    assert.deepEqual(requestedCodes, ["abc", "def"]);
+    assert.deepEqual(
+      dataStore.$joinLinkPreviewsByCode.get("abc").name,
+      "Group",
+    );
+    assert.deepEqual(dataStore.$joinLinkPreviewsByCode.get("def"), null);
+  });
+
+  it("should not fetch when unauthenticated or when there are no codes", async () => {
+    let called = false;
+    const mockApi = {
+      isAuthenticated: false,
+      getJoinLinkPreviews: async () => {
+        called = true;
+        return { joinLinkPreviews: [] };
+      },
+    };
+    const requests = makeRequests(mockApi, new DataStore());
+
+    await requests._loadJoinLinkPreviews(["abc"]);
+    assert.deepEqual(called, false);
+
+    mockApi.isAuthenticated = true;
+    await requests._loadJoinLinkPreviews([null, undefined]);
+    assert.deepEqual(called, false);
+  });
+
+  it("should swallow fetch failures", async () => {
+    const mockApi = {
+      isAuthenticated: true,
+      getJoinLinkPreviews: async () => {
+        throw new Error("boom");
+      },
+    };
+    const requests = makeRequests(mockApi, new DataStore());
+
+    await requests._loadJoinLinkPreviews(["abc"]);
+  });
+});
+
+describe("_loadPostDependencies", () => {
+  it("should not reject when a dependency loader fails", async () => {
+    const mockApi = {
+      getPosts: async () => {
+        throw new Error("network down");
+      },
+    };
+    const requests = makeRequests(mockApi, new DataStore());
+    const blockedPost = {
+      $type: "app.bsky.feed.defs#blockedPost",
+      uri: "at://did:plc:x/app.bsky.feed.post/1",
+    };
+
+    await requests._loadPostDependencies([blockedPost]);
+  });
+});
+
+describe("loadFeedGenerator / loadList / loadStarterPack", () => {
+  it("should store the feed generator by uri", async () => {
+    const dataStore = new DataStore();
+    const feedGenerator = { uri: "at://did/feed/1", displayName: "Feed" };
+    const mockApi = { getFeedGenerator: async () => feedGenerator };
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadFeedGenerator(feedGenerator.uri);
+
+    assert.deepEqual(
+      dataStore.$feedGenerators.get(feedGenerator.uri),
+      feedGenerator,
+    );
+  });
+
+  it("should store the list view by uri", async () => {
+    const dataStore = new DataStore();
+    const listUri = "at://did/app.bsky.graph.list/1";
+    let capturedOptions = null;
+    const mockApi = {
+      getList: async (_uri, options) => {
+        capturedOptions = options;
+        return { list: { uri: listUri, name: "L1" }, items: [] };
+      },
+    };
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadList(listUri);
+
+    assert.deepEqual(capturedOptions, { limit: 1 });
+    assert.deepEqual(dataStore.$lists.get(listUri).name, "L1");
+  });
+
+  it("should store the starter pack by uri", async () => {
+    const dataStore = new DataStore();
+    const starterPack = { uri: "at://did/starterpack/1", record: {} };
+    const mockApi = { getStarterPack: async () => starterPack };
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadStarterPack(starterPack.uri);
+
+    assert.deepEqual(dataStore.$starterPacks.get(starterPack.uri), starterPack);
+  });
+});
+
+describe("loadListMembers", () => {
+  const listUri = "at://did/app.bsky.graph.list/1";
+
+  it("should store the first page and hydrate member profiles", async () => {
+    const dataStore = new DataStore();
+    const mockApi = {
+      getList: async () => ({
+        list: { uri: listUri },
+        items: [{ uri: "li1", subject: { did: "did:plc:a", handle: "a" } }],
+        cursor: "next",
+      }),
+    };
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadListMembers(listUri);
+
+    const stored = dataStore.$listMembers.get(listUri);
+    assert.deepEqual(stored.items.length, 1);
+    assert.deepEqual(stored.cursor, "next");
+    assert.deepEqual(dataStore.$profiles.get("did:plc:a").handle, "a");
+  });
+
+  it("should short-circuit when fully loaded", async () => {
+    const dataStore = new DataStore();
+    dataStore.$listMembers.set(listUri, { items: [], cursor: null });
+    let called = false;
+    const mockApi = {
+      getList: async () => {
+        called = true;
+        return { items: [], cursor: null };
+      },
+    };
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadListMembers(listUri);
+
+    assert.deepEqual(called, false);
+  });
+
+  it("should refetch from scratch on reload", async () => {
+    const dataStore = new DataStore();
+    dataStore.$listMembers.set(listUri, {
+      items: [{ uri: "li1", subject: { did: "did:plc:a" } }],
+      cursor: null,
+    });
+    let capturedCursor;
+    const mockApi = {
+      getList: async (_uri, { cursor }) => {
+        capturedCursor = cursor;
+        return {
+          items: [{ uri: "li2", subject: { did: "did:plc:b" } }],
+          cursor: "next",
+        };
+      },
+    };
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadListMembers(listUri, { reload: true });
+
+    assert.deepEqual(capturedCursor, "");
+    const stored = dataStore.$listMembers.get(listUri);
+    assert.deepEqual(stored.items.length, 1);
+    assert.deepEqual(stored.items[0].uri, "li2");
+  });
+});
+
+describe("loadActorLists", () => {
+  const did = "did:plc:author";
+
+  it("should store actor lists and cache each list view", async () => {
+    const dataStore = new DataStore();
+    const mockApi = {
+      getActorLists: async () => ({
+        lists: [{ uri: "at://did/app.bsky.graph.list/1", name: "L1" }],
+        cursor: "next",
+      }),
+    };
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadActorLists(did);
+
+    const stored = dataStore.$actorLists.get(did);
+    assert.deepEqual(stored.lists.length, 1);
+    assert.deepEqual(stored.cursor, "next");
+    assert.deepEqual(
+      dataStore.$lists.get("at://did/app.bsky.graph.list/1").name,
+      "L1",
+    );
+  });
+
+  it("should short-circuit when there is no remaining cursor", async () => {
+    const dataStore = new DataStore();
+    dataStore.$actorLists.set(did, { lists: [], cursor: null });
+    let called = false;
+    const mockApi = {
+      getActorLists: async () => {
+        called = true;
+        return { lists: [], cursor: null };
+      },
+    };
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadActorLists(did);
+
+    assert.deepEqual(called, false);
+  });
+
+  it("should refetch from scratch on reload", async () => {
+    const dataStore = new DataStore();
+    dataStore.$actorLists.set(did, {
+      lists: [{ uri: "old" }],
+      cursor: null,
+    });
+    let capturedCursor;
+    const mockApi = {
+      getActorLists: async (_did, { cursor }) => {
+        capturedCursor = cursor;
+        return { lists: [{ uri: "new" }], cursor: "next" };
+      },
+    };
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadActorLists(did, { reload: true });
+
+    assert.deepEqual(capturedCursor, "");
+    const stored = dataStore.$actorLists.get(did);
+    assert.deepEqual(stored.lists.length, 1);
+    assert.deepEqual(stored.lists[0].uri, "new");
+  });
+});
+
+describe("loadCurrentUserLists", () => {
+  it("should do nothing when there is no current user", async () => {
+    let called = false;
+    const mockApi = {
+      getActorLists: async () => {
+        called = true;
+        return { lists: [], cursor: null };
+      },
+    };
+    const requests = makeRequests(mockApi, new DataStore());
+
+    await requests.loadCurrentUserLists();
+
+    assert.deepEqual(called, false);
+  });
+
+  it("should load the current user's lists", async () => {
+    const dataStore = new DataStore();
+    dataStore.$currentUser.set({ did: "did:plc:me" });
+    let requestedDid = null;
+    const mockApi = {
+      getActorLists: async (did) => {
+        requestedDid = did;
+        return { lists: [{ uri: "l1" }], cursor: null };
+      },
+    };
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadCurrentUserLists();
+
+    assert.deepEqual(requestedDid, "did:plc:me");
+    assert.deepEqual(dataStore.$actorLists.get("did:plc:me").lists.length, 1);
+  });
+});
+
+describe("loadDrafts", () => {
+  function makeRequestsWithDraftStore(api, dataStore, draftMediaStore) {
+    return new Requests(
+      api,
+      dataStore,
+      { requirePreferences: () => Preferences.createLoggedOutPreferences() },
+      stubPluginService,
+      draftMediaStore,
+      { constellation: stubConstellation },
+    );
+  }
+
+  it("should store the drafts page and load local media refs", async () => {
+    const dataStore = new DataStore();
+    const draftView = {
+      draft: {
+        posts: [
+          {
+            embedImages: [{ localRef: { path: "media/1" } }],
+            embedVideos: [{ localRef: { path: "media/2" } }],
+          },
+        ],
+      },
+    };
+    const mockApi = {
+      getDrafts: async () => ({ drafts: [draftView], cursor: "next" }),
+    };
+    let loadedRefs = null;
+    const draftMediaStore = {
+      load: async (refs) => {
+        loadedRefs = refs;
+      },
+    };
+    const requests = makeRequestsWithDraftStore(
+      mockApi,
+      dataStore,
+      draftMediaStore,
+    );
+
+    await requests.loadDrafts();
+
+    assert.deepEqual(loadedRefs, ["media/1", "media/2"]);
+    const stored = dataStore.$drafts.get();
+    assert.deepEqual(stored.drafts.length, 1);
+    assert.deepEqual(stored.cursor, "next");
+  });
+
+  it("should refetch from scratch on reload", async () => {
+    const dataStore = new DataStore();
+    dataStore.$drafts.set({ drafts: [{ draft: {} }], cursor: "c1" });
+    let capturedCursor;
+    const mockApi = {
+      getDrafts: async ({ cursor }) => {
+        capturedCursor = cursor;
+        return { drafts: [{ draft: { posts: [] } }], cursor: null };
+      },
+    };
+    const requests = makeRequestsWithDraftStore(mockApi, dataStore, {
+      load: async () => {},
+    });
+
+    await requests.loadDrafts({ reload: true });
+
+    assert.deepEqual(capturedCursor, "");
+    const stored = dataStore.$drafts.get();
+    assert.deepEqual(stored.drafts.length, 1);
+    assert.deepEqual(stored.cursor, null);
+  });
+});
+
+describe("loadKnownFollowers", () => {
+  const profileDid = "did:plc:target";
+
+  it("should store known followers and hydrate profiles on first load", async () => {
+    const dataStore = new DataStore();
+    const mockApi = {
+      getKnownFollowers: async () => ({
+        followers: [{ did: "did:plc:a", handle: "a" }],
+        cursor: "next",
+      }),
+    };
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadKnownFollowers(profileDid);
+
+    const stored = dataStore.$knownFollowers.get(profileDid);
+    assert.deepEqual(stored.followers.length, 1);
+    assert.deepEqual(stored.cursor, "next");
+    assert.deepEqual(dataStore.$profiles.get("did:plc:a").handle, "a");
+  });
+
+  it("should append when cursor is provided", async () => {
+    const dataStore = new DataStore();
+    dataStore.$knownFollowers.set(profileDid, {
+      followers: [{ did: "did:plc:a" }],
+      cursor: "c1",
+    });
+    const mockApi = {
+      getKnownFollowers: async () => ({
+        followers: [{ did: "did:plc:b" }],
+        cursor: null,
+      }),
+    };
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadKnownFollowers(profileDid, { cursor: "c1" });
+
+    const stored = dataStore.$knownFollowers.get(profileDid);
+    assert.deepEqual(stored.followers.length, 2);
+    assert.deepEqual(stored.cursor, null);
+  });
+});
+
+describe("loadProfileChatStatus", () => {
+  it("should store the availability response keyed by profile did", async () => {
+    const dataStore = new DataStore();
+    let requestedDids = null;
+    const availability = { canChat: true };
+    const mockApi = {
+      getConvoAvailability: async (dids) => {
+        requestedDids = dids;
+        return availability;
+      },
+    };
+    const requests = makeRequests(mockApi, dataStore);
+
+    await requests.loadProfileChatStatus("did:plc:a");
+
+    assert.deepEqual(requestedDids, ["did:plc:a"]);
+    assert.deepEqual(
+      dataStore.$profileChatStatus.get("did:plc:a"),
+      availability,
+    );
+  });
+});
diff --git a/tests/unit/specs/postSeenObserver.test.js b/tests/unit/specs/postSeenObserver.test.js
index 889c047b..f5648767 100644
--- a/tests/unit/specs/postSeenObserver.test.js
+++ b/tests/unit/specs/postSeenObserver.test.js
@@ -1,6 +1,13 @@
-import { describe, it } from "node:test";
+import { describe, it, beforeEach, afterEach, mock } from "node:test";
 import assert from "node:assert/strict";
 import { PostSeenObserver } from "/js/postSeenObserver.js";
+import { createPost } from "../../shared/factories.js";
+
+const originalSetTimeout = globalThis.setTimeout;
+
+function flushTimers() {
+  return new Promise((resolve) => originalSetTimeout(resolve, 20));
+}
 
 function createObserver() {
   const api = { sendInteractions: async () => {} };
@@ -12,6 +19,26 @@ function createObserver() {
   return { observer, getScrollHandlerCalls: () => scrollHandlerCalls };
 }
 
+function createTrackedElement({ top = 0, bottom = 100 } = {}) {
+  const element = document.createElement("div");
+  const rect = { top, bottom };
+  element.getBoundingClientRect = () => ({
+    top: rect.top,
+    bottom: rect.bottom,
+  });
+  return { element, rect };
+}
+
+const postUriA = createPost({
+  uri: "at://did:plc:alice/app.bsky.feed.post/1",
+}).uri;
+const postUriB = createPost({
+  uri: "at://did:plc:bob/app.bsky.feed.post/2",
+}).uri;
+const postUriC = createPost({
+  uri: "at://did:plc:carol/app.bsky.feed.post/3",
+}).uri;
+
 describe("PostSeenObserver - scroll listener lifecycle", () => {
   it("should handle scroll events after construction", () => {
     const { observer, getScrollHandlerCalls } = createObserver();
@@ -48,3 +75,166 @@ describe("PostSeenObserver - scroll listener lifecycle", () => {
     assert(!observer.connected);
   });
 });
+
+describe("PostSeenObserver - seen tracking", () => {
+  let observer;
+  let sendInteractions;
+  let warnMock;
+
+  beforeEach(() => {
+    globalThis.setTimeout = (fn) => originalSetTimeout(fn, 0);
+    warnMock = mock.method(console, "warn", () => {});
+    sendInteractions = mock.fn(async () => {});
+    observer = new PostSeenObserver(
+      { sendInteractions },
+      "did:web:example.com#bsky_fg",
+    );
+  });
+
+  afterEach(() => {
+    observer.disconnect();
+    globalThis.setTimeout = originalSetTimeout;
+    warnMock.mock.restore();
+  });
+
+  it("marks a visible registered post as seen and sends the interaction", async () => {
+    const { element } = createTrackedElement();
+    observer.register(element, postUriA, "feed-context-a");
+    await flushTimers();
+    assert.deepEqual(sendInteractions.mock.callCount(), 1);
+    assert.deepEqual(sendInteractions.mock.calls[0].arguments, [
+      [
+        {
+          item: postUriA,
+          event: "app.bsky.feed.defs#interactionSeen",
+          feedContext: "feed-context-a",
+        },
+      ],
+      "did:web:example.com#bsky_fg",
+    ]);
+    assert(observer.seenPosts.has(postUriA));
+  });
+
+  it("does not send an interaction for an off-screen post", async () => {
+    const { element } = createTrackedElement({ top: 2000, bottom: 2100 });
+    observer.register(element, postUriA, null);
+    await flushTimers();
+    assert.deepEqual(sendInteractions.mock.callCount(), 0);
+    assert(!observer.seenPosts.has(postUriA));
+  });
+
+  it("does not send when the post scrolls away before the dwell recheck", async () => {
+    const { element, rect } = createTrackedElement();
+    observer.register(element, postUriA, null);
+    rect.top = 2000;
+    rect.bottom = 2100;
+    await flushTimers();
+    assert.deepEqual(sendInteractions.mock.callCount(), 0);
+    assert(!observer.seenPosts.has(postUriA));
+  });
+
+  it("skips checks for posts already marked seen", async () => {
+    const { element } = createTrackedElement();
+    observer.register(element, postUriA, null);
+    await flushTimers();
+    observer.checkAllIntersections();
+    await flushTimers();
+    assert.deepEqual(sendInteractions.mock.callCount(), 1);
+  });
+
+  it("refuses to resend an interaction the dispatch already sent", async () => {
+    const { element } = createTrackedElement();
+    observer.register(element, postUriA, null);
+    await flushTimers();
+    observer.seenPosts.clear();
+    observer.checkAllIntersections();
+    await flushTimers();
+    assert.deepEqual(sendInteractions.mock.callCount(), 1);
+    assert.deepEqual(warnMock.mock.callCount(), 1);
+    assert(observer.seenPosts.has(postUriA));
+  });
+
+  it("does not mark the post seen when sending fails", async () => {
+    sendInteractions.mock.mockImplementation(async () => {
+      throw new Error("network down");
+    });
+    const { element } = createTrackedElement();
+    observer.register(element, postUriA, null);
+    await flushTimers();
+    assert.deepEqual(sendInteractions.mock.callCount(), 1);
+    assert(!observer.seenPosts.has(postUriA));
+  });
+
+  it("batches interactions queued in the same burst into one api call", async () => {
+    const first = createTrackedElement();
+    const second = createTrackedElement();
+    observer.register(first.element, postUriA, null);
+    observer.register(second.element, postUriB, null);
+    await flushTimers();
+    assert.deepEqual(sendInteractions.mock.callCount(), 1);
+    const [interactions] = sendInteractions.mock.calls[0].arguments;
+    assert.deepEqual(
+      interactions.map((interaction) => interaction.item),
+      [postUriA, postUriB],
+    );
+    assert(observer.seenPosts.has(postUriA));
+    assert(observer.seenPosts.has(postUriB));
+  });
+
+  it("processes interactions queued while a batch is in flight as a second batch", async () => {
+    let releaseFirstBatch;
+    sendInteractions.mock.mockImplementationOnce(
+      () => new Promise((resolve) => (releaseFirstBatch = resolve)),
+    );
+    const dispatch = observer.interactionsDispatch;
+    const firstPromise = dispatch.sendInteraction({ item: postUriA });
+    await flushTimers();
+    assert.deepEqual(sendInteractions.mock.callCount(), 1);
+    const secondPromise = dispatch.sendInteraction({ item: postUriC });
+    releaseFirstBatch();
+    await Promise.all([firstPromise, secondPromise]);
+    assert.deepEqual(sendInteractions.mock.callCount(), 2);
+    assert.deepEqual(sendInteractions.mock.calls[1].arguments[0], [
+      { item: postUriC },
+    ]);
+  });
+
+  it("replaces a previous registration for the same post uri", async () => {
+    const stale = createTrackedElement({ top: 2000, bottom: 2100 });
+    const fresh = createTrackedElement({ top: 2000, bottom: 2100 });
+    observer.register(stale.element, postUriA, null);
+    observer.register(fresh.element, postUriA, null);
+    assert.deepEqual(observer.observedElements.length, 1);
+    assert.deepEqual(observer.observedElements[0].el, fresh.element);
+    await flushTimers();
+    assert.deepEqual(sendInteractions.mock.callCount(), 0);
+  });
+
+  it("checks registered posts again on scroll", async () => {
+    const { element, rect } = createTrackedElement({ top: 2000, bottom: 2100 });
+    observer.register(element, postUriA, "scrolled-context");
+    await flushTimers();
+    assert.deepEqual(sendInteractions.mock.callCount(), 0);
+    rect.top = 0;
+    rect.bottom = 100;
+    observer.handleScroll();
+    await flushTimers();
+    assert.deepEqual(sendInteractions.mock.callCount(), 1);
+    assert(observer.seenPosts.has(postUriA));
+  });
+
+  it("logs verbose debug output when enabled", async () => {
+    const debugMock = mock.method(console, "debug", () => {});
+    const verboseObserver = new PostSeenObserver(
+      { sendInteractions },
+      "did:web:example.com#bsky_fg",
+      { verbose: true },
+    );
+    const { element } = createTrackedElement();
+    verboseObserver.register(element, postUriB, null);
+    await flushTimers();
+    assert(debugMock.mock.calls.some((call) => call.arguments[1] === postUriB));
+    verboseObserver.disconnect();
+    debugMock.mock.restore();
+  });
+});
-- 
2.51.2