feat: handle most kinds of posts and views in social-app, cache fronters, etc

src/entrypoints/background.ts

···
-import { getFronter, putFronter } from "@/lib/utils";
+import { expect } from "@/lib/result";
+import {
+  Fronter,
+  fronterGetSocialAppHref,
+  getFronter,
+  putFronter,
+} from "@/lib/utils";
+import { parseResourceUri, ResourceUri } from "@atcute/lexicons";
 
 export default defineBackground({
   persistent: true,
   main: () => {
     console.log("setting up background script");
-    browser.runtime.onMessage.addListener(async (message, sender) => {
-      // console.log("received message", message);
-      if (message.type !== "RESPONSE_CAPTURED") return;
-      const fronter = await storage.getItem<string>("sync:fronter");
-      if (!fronter) return;
-      const authToken = message.data.authToken;
-      if (!authToken) return;
-      const data: any = JSON.parse(message.data.body);
-      // console.log("will put fronter", fronter, "for records", data.results);
-      for (const result of data.results) {
-        // TODO: validate response
-        await putFronter(result.uri, fronter, authToken);
-      }
-    });
 
-    browser.runtime.onMessage.addListener(async (message, sender) => {
-      // console.log("received message", message);
-      if (message.type !== "TAB_FRONTER") return;
-      const { recordUri } = message;
-      const fronter = await getFronter(recordUri);
-      if (!fronter.ok) return;
+    let fronters = new Map<ResourceUri, Fronter | null>();
+    const cacheFronter = (uri: ResourceUri, fronter: Fronter) => {
+      const parsedUri = expect(parseResourceUri(uri));
+      fronters.set(uri, fronter);
+      fronters.set(
+        `at://${fronter.did}/${parsedUri.collection!}/${parsedUri.rkey!}`,
+        fronter,
+      );
+      fronters.set(
+        `at://${fronter.handle}/${parsedUri.collection!}/${parsedUri.rkey!}`,
+        fronter,
+      );
+      return parsedUri;
+    };
+
+    const setTabFronter = async (recordUri: ResourceUri, fronter: Fronter) => {
       const tabs = await browser.tabs.query({
         active: true,
         currentWindow: true,
       });
       const tab = tabs[0];
       const tabKey: StorageItemKey = `local:tab-${tab.id!}-fronter`;
-      await storage.setItem(tabKey, {
-        fronterName: fronter.value.name,
+      const tabFronter = {
         recordUri,
-      });
+        ...fronter,
+      };
+      await storage.setItem(tabKey, tabFronter);
       const deleteOld = async (tabId: number) => {
         if (`local:tab-${tabId}-fronter` !== tabKey) return;
         await storage.removeItem(tabKey);
···
       browser.tabs.onRemoved.addListener(deleteOld);
       browser.tabs.onReplaced.addListener(deleteOld);
       browser.tabs.onUpdated.addListener(deleteOld);
+    };
+
+    const handleWrite = async (
+      { data: { body, authToken } }: any,
+      sender: globalThis.Browser.runtime.MessageSender,
+    ) => {
+      const fronter = await storage.getItem<string>("sync:fronter");
+      if (!fronter) return;
+      if (!authToken) return;
+      const data: any = JSON.parse(body);
+      // console.log("will put fronter", fronter, "for records", data.results);
+      const results = [];
+      for (const result of data.results) {
+        const resp = await putFronter(result.uri, fronter, authToken);
+        if (resp.ok) {
+          const parsedUri = cacheFronter(result.uri, resp.value);
+          results.push({
+            rkey: parsedUri.rkey!,
+            ...resp.value,
+          });
+        }
+      }
+      browser.tabs.sendMessage(sender.tab?.id!, {
+        type: "TIMELINE_FRONTER",
+        results: new Map(
+          results.map((fronter) => [
+            fronterGetSocialAppHref(fronter, fronter.rkey),
+            fronter,
+          ]),
+        ),
+      });
+    };
+    const handleTimeline = async (
+      feed: any[],
+      sender: globalThis.Browser.runtime.MessageSender,
+    ) => {
+      const handlePost = async (post: any) => {
+        const cachedFronter = fronters.get(post.uri);
+        if (cachedFronter === null) return;
+        const promise = cachedFronter
+          ? Promise.resolve(cachedFronter)
+          : getFronter(post.uri).then(async (fronter) => {
+              if (!fronter.ok) {
+                fronters.set(post.uri, null);
+                return;
+              }
+              return fronter.value;
+            });
+        return promise.then((fronter) => {
+          if (!fronter) return;
+          const parsedUri = cacheFronter(post.uri, fronter);
+          return {
+            rkey: parsedUri.rkey!,
+            ...fronter,
+          };
+        });
+      };
+      const allPromises = feed.flatMap((item) => {
+        const promises = [handlePost(item.post)];
+        if (item.reply?.parent) {
+          promises.push(handlePost(item.reply.parent));
+        }
+        if (item.reply?.root) {
+          promises.push(handlePost(item.reply.root));
+        }
+        return promises;
+      });
+      const results = new Map(
+        (await Promise.allSettled(allPromises))
+          .filter((result) => result.status === "fulfilled")
+          .flatMap((result) => result.value ?? [])
+          .map((fronter) => [
+            fronterGetSocialAppHref(fronter, fronter.rkey),
+            fronter,
+          ]),
+      );
+      browser.tabs.sendMessage(sender.tab?.id!, {
+        type: "TIMELINE_FRONTER",
+        results,
+      });
+      // console.log("sent timeline fronters", results);
+    };
+    const handleThread = async (
+      { data: { body } }: any,
+      sender: globalThis.Browser.runtime.MessageSender,
+    ) => {
+      const data: any = JSON.parse(body);
+      const promises = (data.thread as any[]).flatMap((item) => {
+        const cachedFronter = fronters.get(item.uri);
+        if (cachedFronter === null) return [];
+        const promise = cachedFronter
+          ? Promise.resolve(cachedFronter)
+          : getFronter(item.uri).then(async (fronter) => {
+              if (!fronter.ok) {
+                fronters.set(item.uri, null);
+                return;
+              }
+              return fronter.value;
+            });
+        return promise.then(async (fronter) => {
+          if (!fronter) return;
+          const parsedUri = cacheFronter(item.uri, fronter);
+          if (item.depth === 0) await setTabFronter(item.uri, fronter);
+          return {
+            rkey: parsedUri.rkey!,
+            displayName: item.value.post.author.displayName,
+            depth: item.depth,
+            ...fronter,
+          };
+        });
+      });
+      const results = new Map(
+        (await Promise.allSettled(promises))
+          .filter((result) => result.status === "fulfilled")
+          .flatMap((result) => result.value ?? [])
+          .map((fronter) => [
+            fronterGetSocialAppHref(fronter, fronter.rkey, fronter.depth),
+            fronter,
+          ]),
+      );
+      browser.tabs.sendMessage(sender.tab?.id!, {
+        type: "THREAD_FRONTER",
+        results,
+      });
+      // console.log("sent thread fronters", results);
+    };
+
+    browser.runtime.onMessage.addListener(async (message, sender) => {
+      if (message.type !== "RESPONSE_CAPTURED") return;
+      // console.log("handling response event", message);
+      switch (message.data.type as string) {
+        case "write":
+          await handleWrite(message, sender);
+          break;
+        case "posts":
+          const posts = JSON.parse(message.data.body) as any[];
+          await handleTimeline(
+            posts.map((post) => ({ post })),
+            sender,
+          );
+          break;
+        case "timeline":
+          await handleTimeline(JSON.parse(message.data.body).feed, sender);
+          break;
+        case "thread":
+          await handleThread(message, sender);
+          break;
+      }
+      browser.tabs.sendMessage(sender.tab?.id!, {
+        type: "CACHED_FRONTERS",
+        fronters,
+      });
+    });
+    browser.runtime.onMessage.addListener(async (message, sender) => {
+      if (message.type !== "TAB_FRONTER") return;
+      await setTabFronter(message.recordUri, message.fronter);
     });
   },
 });

src/entrypoints/content.ts

···
+import { expect } from "@/lib/result";
+import { Fronter, fronterGetSocialAppHref } from "@/lib/utils";
+import { parseResourceUri, ResourceUri } from "@atcute/lexicons";
+
 const getAuthHeader = (headers: any): string | null => {
   if (headers instanceof Headers) {
     return headers.get("authorization");
···
       const response = await originalFetch.apply(this, args);
 
       if (respEventName === null) return response;
+      if (response.status !== 200) return response;
 
-      let authHeader: string | null = null;
-      if (typeof args[0] === "string") {
-        if (args[1]?.headers) {
-          authHeader = getAuthHeader(args[1].headers);
-        }
-      } else if (args[0] instanceof Request) {
-        authHeader = getAuthHeader(args[0].headers);
-      }
+      const body = await response.clone().text();
 
-      if (
-        !response.url.includes("/xrpc/com.atproto.repo.applyWrites") ||
-        response.status !== 200
-      )
-        return response;
+      const sendEvent = (detail: any) => {
+        // console.log("sending response event", detail);
+        window.dispatchEvent.call(
+          window,
+          new window.CustomEvent(`${respEventName}-isolated`, {
+            detail,
+          }),
+        );
+      };
 
-      const body = await response.clone().text();
+      let detail: any;
+      if (response.url.includes("/xrpc/com.atproto.repo.applyWrites")) {
+        let authHeader: string | null = null;
+        if (typeof args[0] === "string") {
+          if (args[1]?.headers) {
+            authHeader = getAuthHeader(args[1].headers);
+          }
+        } else if (args[0] instanceof Request) {
+          authHeader = getAuthHeader(args[0].headers);
+        }
 
-      const detail = {
-        url: response.url,
-        body,
-        authToken: authHeader?.split(" ")[1] || null,
-      };
-      window.dispatchEvent.call(
-        window,
-        new window.CustomEvent(`${respEventName}-isolated`, {
-          detail,
-        }),
-      );
+        detail = {
+          type: "write",
+          body,
+          authToken: authHeader?.split(" ")[1] || null,
+        };
+      } else if (
+        response.url.includes("/xrpc/app.bsky.feed.getAuthorFeed") ||
+        response.url.includes("/xrpc/app.bsky.feed.getTimeline") ||
+        response.url.includes("/xrpc/app.bsky.feed.getFeed")
+      ) {
+        detail = {
+          type: "timeline",
+          body,
+        };
+      } else if (
+        response.url.includes("/xrpc/app.bsky.unspecced.getPostThreadV2")
+      ) {
+        detail = {
+          type: "thread",
+          body,
+        };
+      } else if (response.url.includes("/xrpc/app.bsky.feed.getPosts")) {
+        detail = {
+          type: "posts",
+          body,
+        };
+      }
+      sendEvent(detail);
 
       return response;
     };
     globalThis.fetch = overriddenFetch;
     (globalThis as any).oldFetch = originalFetch;
 
-    console.log("waiting for response channel setup...");
     const respEventSetup = new Promise<string>((resolve) => {
       document.addEventListener(
         "at-fronter-channel-setup",
···
         { once: true, capture: true },
       );
     });
-    respEventSetup.then((name) => {
-      console.log("set up response channel ", name);
-      respEventName = name;
+    respEventSetup.then((name) => (respEventName = name));
+
+    const applyFronterName = (el: Element, fronterName: string) => {
+      if (el.getAttribute("data-fronter")) return;
+      el.textContent += ` [f: ${fronterName}]`;
+      el.setAttribute("data-fronter", fronterName);
+    };
+    const applyFrontersToPage = (fronters: Map<string, any>) => {
+      for (const el of document.getElementsByTagName("a")) {
+        const path = `/${el.href.split("/").slice(3).join("/")}`;
+        const fronter = fronters.get(path);
+        if (!fronter) continue;
+        const isFocusedPost = fronter.depth === 0;
+        if (isFocusedPost && el.ariaLabel !== fronter.displayName) continue;
+        const displayNameElement = isFocusedPost
+          ? (el.firstElementChild?.firstElementChild?.firstElementChild
+              ?.firstElementChild?.firstElementChild ?? null)
+          : (el.parentElement?.firstElementChild?.firstElementChild
+              ?.firstElementChild?.firstElementChild ?? null);
+        if (!displayNameElement) continue;
+        applyFronterName(displayNameElement, fronter.fronterName);
+      }
+    };
+    window.addEventListener("message", (event) => {
+      if (event.data.type !== "CACHED_FRONTERS") return;
+      const fronters = event.data.fronters as Map<string, Fronter | null>;
+      const updated = new Map(
+        fronters.entries().flatMap(([uri, fronter]) => {
+          if (!fronter) return [];
+          const rkey = expect(parseResourceUri(uri)).rkey!;
+          return [[fronterGetSocialAppHref(fronter, rkey), fronter]];
+        }),
+      );
+      applyFrontersToPage(updated);
+    });
+    window.addEventListener("message", (event) => {
+      if (!["TIMELINE_FRONTER", "THREAD_FRONTER"].includes(event.data.type))
+        return;
+      applyFrontersToPage(event.data.results as Map<string, any>);
     });
   },
 });

src/entrypoints/isolated.content.ts

···
-import { expect } from "@/lib/result";
-import { getFronter } from "@/lib/utils";
+import { Fronter } from "@/lib/utils";
 import { ResourceUri } from "@atcute/lexicons";
 
 export default defineContentScript({
···
   runAt: "document_start",
   world: "ISOLATED",
   main: (ctx) => {
+    let fronters = new Map<ResourceUri, Fronter | null>();
+
     const checkFronter = (url: string) => {
       // match https://*/profile/<actor_identifier>/post/<rkey> regex with named params to extract actor_identifier and rkey
       const match = url.match(
         /https:\/\/[^/]+\/profile\/([^/]+)\/post\/([^/]+)/,
       );
-      if (match) {
-        const [website, actorIdentifier, rkey] = match;
-        const recordUri =
-          `at://${actorIdentifier}/app.bsky.feed.post/${rkey}` as ResourceUri;
-        browser.runtime.sendMessage({
-          type: "TAB_FRONTER",
-          recordUri,
-        });
-      }
+      if (!match) return false;
+      const [website, actorIdentifier, rkey] = match;
+      const recordUri =
+        `at://${actorIdentifier}/app.bsky.feed.post/${rkey}` as ResourceUri;
+      const fronter = fronters.get(recordUri);
+      if (!fronter) return false;
+      browser.runtime.sendMessage({
+        type: "TAB_FRONTER",
+        recordUri,
+        fronter,
+      });
+      return true;
     };
+
     const respEventName = Math.random().toString(36).slice(2);
     window.addEventListener(`${respEventName}-isolated`, async (event) => {
-      // console.log("sending event to bg:", event);
+      const data = (event as any).detail;
+      // console.log("passing response event to bg", data);
       await browser.runtime
         .sendMessage({
           type: "RESPONSE_CAPTURED",
-          data: (event as any).detail,
+          data,
         })
         .catch(() => {
           console.log("background script not ready");
         });
     });
-    ctx.addEventListener(window, "wxt:locationchange", async (event) => {
+    const messageTypes = [
+      "TAB_FRONTER",
+      "THREAD_FRONTER",
+      "TIMELINE_FRONTER",
+      "CACHED_FRONTERS",
+    ];
+    browser.runtime.onMessage.addListener((message) => {
+      if (!messageTypes.includes(message.type)) return;
+      if (message.type === "CACHED_FRONTERS") {
+        fronters = message.fronters;
+      }
+      window.postMessage(message);
+    });
+    let postTabObserver: MutationObserver | null = null;
+    ctx.addEventListener(window, "wxt:locationchange", (event) => {
+      window.postMessage({ type: "CACHED_FRONTERS", fronters });
+      // check if we are on profile so we can update fronters if the post tab is clicked on
+      const postTabElement = document.querySelector(
+        '[data-testid="profilePager-Posts"]',
+      );
+      if (postTabElement) {
+        postTabObserver = new MutationObserver(() => {
+          window.postMessage({ type: "CACHED_FRONTERS", fronters });
+        });
+        postTabObserver.observe(postTabElement, { attributes: true });
+      } else if (postTabObserver) {
+        postTabObserver.disconnect();
+        postTabObserver = null;
+      }
+      // check for tab fronter for the current "post"
       checkFronter(event.newUrl.toString());
     });
 
     // setup response "channel"
-    console.log("sending setup message for response channel", respEventName);
     document.dispatchEvent(
       new CustomEvent("at-fronter-channel-setup", {
         detail: respEventName,
       }),
     );
 
-    checkFronter(document.URL);
+    // checkFronter(document.URL);
   },
 });

src/entrypoints/popup/App.svelte

···
     import { expect } from "@/lib/result";
     import { getFronter } from "@/lib/utils";
     import { isResourceUri } from "@atcute/lexicons";
-    import type { ResourceUri } from "@atcute/lexicons/syntax";
+    import type {
+        AtprotoDid,
+        Handle,
+        ResourceUri,
+    } from "@atcute/lexicons/syntax";
 
     let recordAtUri = $state("");
     let queryResult = $state("");
     let isQuerying = $state(false);
     let fronterName = $state("");
+
+    const makeOutput = (fronterName: string, handle: Handle | null) => {
+        return `HANDLE: ${handle ?? "handle.invalid"}\nFRONTER: ${fronterName}`;
+    };
 
     const queryRecord = async (recordUri: ResourceUri) => {
         if (!recordAtUri.trim()) return;
···
         try {
             if (!isResourceUri(recordUri)) throw "INVALID_RESOURCE_URI";
             const result = expect(await getFronter(recordUri));
-            queryResult = `FRONTER: ${result.name}` || "NO_FRONTER_FOUND";
+            queryResult =
+                makeOutput(result.fronterName, result.handle) ||
+                "NO_FRONTER_FOUND";
         } catch (error) {
             queryResult = `ERROR: ${error}`;
         } finally {
···
         if (fronter) {
             fronterName = fronter;
         }
+
         const tabs = await browser.tabs.query({
             active: true,
             currentWindow: true,
···
         const tabFronter = await storage.getItem<{
             fronterName: string;
             recordUri: ResourceUri;
+            handle: Handle | null;
+            did: AtprotoDid;
         }>(`local:tab-${tabs[0].id!}-fronter`);
         if (tabFronter) {
-            queryResult = `FRONTER: ${tabFronter.fronterName}`;
+            queryResult = makeOutput(tabFronter.fronterName, tabFronter.handle);
             recordAtUri = tabFronter.recordUri;
         }
     });

src/lib/utils.ts

···
 } from "@atcute/lexicons";
 import { Client as AtpClient, simpleFetchHandler } from "@atcute/client";
 import {
+  ActorIdentifier,
   Did,
+  Handle,
   isHandle,
+  RecordKey,
   type AtprotoDid,
   type ResourceUri,
 } from "@atcute/lexicons/syntax";
···
   WebDidDocumentResolver,
   WellKnownHandleResolver,
 } from "@atcute/identity-resolver";
-import { DidDocument, getPdsEndpoint } from "@atcute/identity";
+import { getAtprotoHandle, getPdsEndpoint } from "@atcute/identity";
+
+export type Fronter = {
+  fronterName: string;
+  handle: Handle | null;
+  did: AtprotoDid;
+};
+
+export const fronterGetSocialAppHref = (
+  fronter: Fronter,
+  rkey: RecordKey,
+  depth?: number,
+) => {
+  return depth === 0
+    ? `/profile/${fronter.handle ?? fronter.did}`
+    : `/profile/${fronter.handle ?? fronter.did}/post/${rkey}`;
+};
 
 const fronterSchema = v.record(
   v.string(),
···
   },
 });
 
-// TODO: cache
+const resolveRepo = async (repo: ActorIdentifier) => {
+  let handle: Handle | null;
+  let did = repo;
+  if (isHandle(repo)) {
+    handle = repo;
+    did = await handleResolver.resolve(repo);
+  } else {
+    const didDoc = await docResolver.resolve(repo as AtprotoDid);
+    handle = getAtprotoHandle(didDoc) ?? null;
+  }
+  return { did: did as AtprotoDid, handle };
+};
+
 const getAtpClient = async (repo: AtprotoDid) => {
   const didDoc = await docResolver.resolve(repo);
   const pdsUrl = getPdsEndpoint(didDoc);
···
 
 export const getFronter = async <Uri extends ResourceUri>(
   recordUri: Uri,
-): Promise<Result<InferOutput<typeof fronterSchema>, string>> => {
+): Promise<Result<Fronter, string>> => {
   const parsedRecordUri = parseResourceUri(recordUri);
   if (!parsedRecordUri.ok) return err(parsedRecordUri.error);
 
   // resolve repo
-  let repo = parsedRecordUri.value.repo;
-  if (isHandle(repo)) {
-    // TODO: cache
-    repo = await handleResolver.resolve(repo);
-  }
+  const { did, handle } = await resolveRepo(parsedRecordUri.value.repo);
 
   // make client
-  const atpClient = await getAtpClient(repo as AtprotoDid);
+  const atpClient = await getAtpClient(did);
 
   // fetch
   let maybeRecord = await atpClient.get("com.atproto.repo.getRecord", {
     params: {
-      repo,
+      repo: did,
       collection: fronterSchema.object.shape.$type.expected,
       rkey: `${parsedRecordUri.value.collection}_${parsedRecordUri.value.rkey}`,
     },
···
   const maybeTyped = safeParse(fronterSchema, maybeRecord.data.value);
   if (!maybeTyped.ok) return err(maybeTyped.message);
 
-  return maybeTyped;
+  return ok({
+    fronterName: maybeTyped.value.name,
+    handle,
+    did,
+  });
 };
 
 export const putFronter = async <Uri extends ResourceUri>(
   recordUri: Uri,
   name: string,
   authToken: string,
-): Promise<Result<void, string>> => {
+): Promise<Result<Fronter, string>> => {
   const parsedRecordUri = parseResourceUri(recordUri);
   if (!parsedRecordUri.ok) return err(parsedRecordUri.error);
 
   // resolve repo
-  let repo = parsedRecordUri.value.repo;
-  if (isHandle(repo)) {
-    // TODO: cache
-    repo = await handleResolver.resolve(repo);
-  }
+  const { did, handle } = await resolveRepo(parsedRecordUri.value.repo);
 
   // make client
-  const atpClient = await getAtpClient(repo as AtprotoDid);
+  const atpClient = await getAtpClient(did);
 
   // put
   let maybeRecord = await atpClient.post("com.atproto.repo.putRecord", {
     input: {
-      repo,
+      repo: did,
       collection: fronterSchema.object.shape.$type.expected,
       rkey: `${parsedRecordUri.value.collection}_${parsedRecordUri.value.rkey}`,
       record: { name },
···
   if (!maybeRecord.ok)
     return err(maybeRecord.data.message ?? maybeRecord.data.error);
 
-  return ok(undefined);
+  return ok({
+    did,
+    handle,
+    fronterName: name,
+  });
 };