feat: add sp integration

src/entrypoints/background.ts

···
 import { expect } from "@/lib/result";
 import {
-  Fronter,
+  type Fronter,
   fronterGetSocialAppHref,
   getFronter,
+  getSpFronters,
+  memberUriString,
   putFronter,
 } from "@/lib/utils";
 import { parseResourceUri, ResourceUri } from "@atcute/lexicons";
···
     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,
···
     };
 
     const handleWrite = async (
-      { data: { body, authToken } }: any,
+      items: any[],
+      authToken: string | null,
       sender: globalThis.Browser.runtime.MessageSender,
     ) => {
       const fronter = await storage.getItem<string>("sync:fronter");
-      if (!fronter) return;
+      const spFronters = (await getSpFronters()).map((m) => memberUriString(m));
       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);
+      for (const result of items) {
+        const resp = await putFronter(
+          { name: fronter ?? "", subject: result.uri, member: spFronters },
+          authToken,
+        );
         if (resp.ok) {
           const parsedUri = cacheFronter(result.uri, resp.value);
           results.push({
             rkey: parsedUri.rkey!,
             ...resp.value,
           });
+        } else {
+          console.error(`fronter write: ${resp.error}`);
         }
       }
       browser.tabs.sendMessage(sender.tab?.id!, {
···
       // console.log("handling response event", message);
       switch (message.data.type as string) {
         case "write":
-          await handleWrite(message, sender);
+          await handleWrite(
+            JSON.parse(message.data.body).results,
+            message.data.authToken,
+            sender,
+          );
+          break;
+        case "writeOne":
+          await handleWrite(
+            [JSON.parse(message.data.body)],
+            message.data.authToken,
+            sender,
+          );
           break;
         case "posts":
-          const posts = JSON.parse(message.data.body) as any[];
           await handleTimeline(
-            posts.map((post) => ({ post })),
+            (JSON.parse(message.data.body) as any[]).map((post) => ({ post })),
             sender,
           );
           break;

src/entrypoints/content.ts

···
           }),
         );
       };
-
-      let detail: any;
-      if (response.url.includes("/xrpc/com.atproto.repo.applyWrites")) {
+      const getAuthToken = () => {
         let authHeader: string | null = null;
         if (typeof args[0] === "string") {
           if (args[1]?.headers) {
···
         } else if (args[0] instanceof Request) {
           authHeader = getAuthHeader(args[0].headers);
         }
+        return authHeader?.split(" ")[1] || null;
+      };
 
+      let detail: any = undefined;
+      if (response.url.includes("/xrpc/com.atproto.repo.applyWrites")) {
         detail = {
           type: "write",
           body,
-          authToken: authHeader?.split(" ")[1] || null,
+          authToken: getAuthToken(),
+        };
+      } else if (response.url.includes("/xrpc/com.atproto.repo.createRecord")) {
+        detail = {
+          type: "writeOne",
+          body,
+          authToken: getAuthToken(),
         };
       } else if (
         response.url.includes("/xrpc/app.bsky.feed.getAuthorFeed") ||
···
           body,
         };
       }
-      sendEvent(detail);
+      if (detail) {
+        sendEvent(detail);
+      }
 
       return response;
     };
···
     });
     respEventSetup.then((name) => (respEventName = name));
 
-    const applyFronterName = (el: Element, fronterName: string) => {
+    const applyFronterName = (el: Element, fronterNames: string[]) => {
       if (el.getAttribute("data-fronter")) return;
-      el.textContent += ` [f: ${fronterName}]`;
-      el.setAttribute("data-fronter", fronterName);
+      const s = fronterNames.join(", ");
+      el.textContent += ` [f: ${s}]`;
+      el.setAttribute("data-fronter", s);
     };
     const applyFrontersToPage = (fronters: Map<string, any>) => {
       for (const el of document.getElementsByTagName("a")) {
···
           : (el.parentElement?.firstElementChild?.firstElementChild
               ?.firstElementChild?.firstElementChild ?? null);
         if (!displayNameElement) continue;
-        applyFronterName(displayNameElement, fronter.fronterName);
+        applyFronterName(displayNameElement, fronter.names);
       }
     };
     window.addEventListener("message", (event) => {

src/entrypoints/isolated.content.ts

···
     const respEventName = Math.random().toString(36).slice(2);
     window.addEventListener(`${respEventName}-isolated`, async (event) => {
       const data = (event as any).detail;
-      // console.log("passing response event to bg", data);
-      await browser.runtime
-        .sendMessage({
-          type: "RESPONSE_CAPTURED",
-          data,
-        })
-        .catch(() => {
-          console.log("background script not ready");
-        });
+      // console.log("passing response event to bg", event);
+      await browser.runtime.sendMessage({
+        type: "RESPONSE_CAPTURED",
+        data,
+      });
     });
     const messageTypes = [
       "TAB_FRONTER",

src/entrypoints/popup/App.svelte

···
     import { expect } from "@/lib/result";
     import { getFronter } from "@/lib/utils";
     import { isResourceUri } from "@atcute/lexicons";
-    import type {
-        AtprotoDid,
-        Handle,
-        ResourceUri,
-    } from "@atcute/lexicons/syntax";
+    import type { ResourceUri } from "@atcute/lexicons/syntax";
 
     let recordAtUri = $state("");
     let queryResult = $state("");
     let isQuerying = $state(false);
     let fronterName = $state("");
+    let spToken = $state("");
 
-    const makeOutput = (fronterName: string, handle: Handle | null) => {
-        return `HANDLE: ${handle ?? "handle.invalid"}\nFRONTER: ${fronterName}`;
+    const makeOutput = (fronter: any) => {
+        return `HANDLE: ${fronter.handle ?? "handle.invalid"}<br>FRONTER: ${fronter.fronterName}`;
     };
 
     const queryRecord = async (recordUri: ResourceUri) => {
···
         try {
             if (!isResourceUri(recordUri)) throw "INVALID_RESOURCE_URI";
             const result = expect(await getFronter(recordUri));
-            queryResult =
-                makeOutput(result.fronterName, result.handle) ||
-                "NO_FRONTER_FOUND";
+            queryResult = makeOutput(result) || "NO_FRONTER_FOUND";
         } catch (error) {
             queryResult = `ERROR: ${error}`;
         } finally {
···
     const updateFronter = (event: any) => {
         fronterName = (event.target as HTMLInputElement).value;
         storage.setItem("sync:fronter", fronterName);
+    };
+
+    const updateSpToken = (event: any) => {
+        spToken = (event.target as HTMLInputElement).value;
+        storage.setItem("sync:sp_token", spToken);
     };
 
     const handleKeyPress = (event: KeyboardEvent) => {
···
             fronterName = fronter;
         }
 
+        const token = await storage.getItem<string>("sync:sp_token");
+        if (token) {
+            spToken = token;
+        }
+
         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`);
+        const tabFronter = await storage.getItem<any>(
+            `local:tab-${tabs[0].id!}-fronter`,
+        );
         if (tabFronter) {
-            queryResult = makeOutput(tabFronter.fronterName, tabFronter.handle);
+            queryResult = makeOutput(tabFronter);
             recordAtUri = tabFronter.recordUri;
         }
     });
···
                                         "ERROR:",
                                     )}
                                 >
-                                    {queryResult}
+                                    {@html queryResult}
                                 </div>
                             {:else}
                                 <div class="placeholder-text">
···
                             bind:value={fronterName}
                             class="config-input"
                             class:has-value={fronterName}
+                        />
+                    </div>
+                </div>
+
+                <div class="config-row">
+                    <span class="config-label">SP_TOKEN</span>
+                    <div class="config-input-wrapper">
+                        <input
+                            type="password"
+                            placeholder="enter_simply_plural_token"
+                            oninput={updateSpToken}
+                            bind:value={spToken}
+                            class="config-input"
+                            class:has-value={spToken}
                         />
                     </div>
                 </div>

src/lib/utils.ts

···
 import {
   ActorIdentifier,
   Did,
+  GenericUri,
   Handle,
   isHandle,
   RecordKey,
···
 import { getAtprotoHandle, getPdsEndpoint } from "@atcute/identity";
 
 export type Fronter = {
-  fronterName: string;
+  memberUris: MemberUri[];
+  names: string[];
   handle: Handle | null;
   did: AtprotoDid;
 };
···
     $type: v.literal("systems.gaze.atfronter.fronter"),
     name: v.string(),
     subject: v.resourceUriString(),
+    member: v.array(v.genericUriString()), // identifier(s) for pk or sp or etc. (maybe member record in the future?)
   }),
 );
 
+type MemberUri =
+  | { type: "at"; recordUri: ResourceUri }
+  | { type: "pk"; systemId: string; memberId: string }
+  | { type: "sp"; systemId: string; memberId: string };
+
+export const parseMemberId = (memberId: GenericUri): MemberUri => {
+  const uri = new URL(memberId);
+  switch (uri.protocol) {
+    case "pk:": {
+      const split = uri.pathname.split("/").slice(1);
+      return { type: "pk", systemId: split[0], memberId: split[1] };
+    }
+    case "sp:": {
+      const split = uri.pathname.split("/").slice(1);
+      return { type: "sp", systemId: split[0], memberId: split[1] };
+    }
+    case "at:": {
+      return { type: "at", recordUri: memberId as ResourceUri };
+    }
+    default: {
+      throw new Error(`Invalid member ID: ${memberId}`);
+    }
+  }
+};
+export const memberUriString = (memberUri: MemberUri): GenericUri => {
+  switch (memberUri.type) {
+    case "pk": {
+      return `pk://api.pluralkit.com/${memberUri.systemId}/${memberUri.memberId}`;
+    }
+    case "sp": {
+      return `sp://api.apparyllis.com/${memberUri.systemId}/${memberUri.memberId}`;
+    }
+    case "at": {
+      return memberUri.recordUri;
+    }
+  }
+};
+
+let memberCache = new Map<string, any>();
+export const fetchMember = async (
+  memberUri: MemberUri,
+): Promise<string | undefined> => {
+  switch (memberUri.type) {
+    case "sp": {
+      const s = memberUriString(memberUri);
+      const cached = memberCache.get(s);
+      if (cached) return cached.content.name;
+      const token = await storage.getItem<string>("sync:sp_token");
+      if (!token) return;
+      const resp = await fetch(
+        `https://api.apparyllis.com/v1/member/${memberUri.systemId}/${memberUri.memberId}`,
+        {
+          headers: {
+            authorization: token,
+          },
+        },
+      );
+      if (!resp.ok) return;
+      const member = await resp.json();
+      memberCache.set(s, member);
+      return member.content.name;
+    }
+  }
+};
+
+export const getFronterNames = async (
+  name: string,
+  memberUris: MemberUri[],
+) => {
+  let fronterNames = [name];
+  if (memberUris.length > 0) {
+    fronterNames = (
+      await Promise.allSettled(memberUris.map((m) => fetchMember(m)))
+    )
+      .filter((p) => p.status === "fulfilled")
+      .flatMap((p) => p.value ?? []);
+  }
+  return fronterNames;
+};
+
 const handleResolver = new CompositeHandleResolver({
   strategy: "race",
   methods: {
···
   const maybeTyped = safeParse(fronterSchema, maybeRecord.data.value);
   if (!maybeTyped.ok) return err(maybeTyped.message);
 
+  let memberUris, fronterNames;
+  try {
+    memberUris = maybeTyped.value.member.map((m) => parseMemberId(m));
+    fronterNames = await getFronterNames(maybeTyped.value.name, memberUris);
+  } catch (error) {
+    return err(`error fetching fronter names: ${error}`);
+  }
+
   return ok({
-    fronterName: maybeTyped.value.name,
+    memberUris,
+    names: fronterNames,
     handle,
     did,
   });
 };
 
-export const putFronter = async <Uri extends ResourceUri>(
-  recordUri: Uri,
-  name: string,
+export const putFronter = async (
+  record: Omit<InferOutput<typeof fronterSchema>, "$type">,
   authToken: string,
 ): Promise<Result<Fronter, string>> => {
-  const parsedRecordUri = parseResourceUri(recordUri);
+  const parsedRecordUri = parseResourceUri(record.subject);
   if (!parsedRecordUri.ok) return err(parsedRecordUri.error);
   const { repo, collection, rkey } = parsedRecordUri.value;
 
···
       repo: did,
       collection: fronterSchema.object.shape.$type.expected,
       rkey: `${collection}_${rkey}`,
-      record: {
-        name,
-        subject: `at://${did}/${collection}/${rkey}`,
-      },
+      record,
       validate: false,
     },
     headers: { authorization: `Bearer ${authToken}` },
···
   if (!maybeRecord.ok)
     return err(maybeRecord.data.message ?? maybeRecord.data.error);
 
+  let memberUris, fronterNames;
+  try {
+    memberUris = record.member.map((m) => parseMemberId(m));
+    fronterNames = await getFronterNames(record.name, memberUris);
+  } catch (error) {
+    return err(`error fetching fronter names: ${error}`);
+  }
+
   return ok({
     did,
     handle,
-    fronterName: name,
+    names: fronterNames,
+    memberUris,
   });
 };
+
+export const getSpFronters = async (): Promise<MemberUri[]> => {
+  const spToken = await storage.getItem<string>("sync:sp_token");
+  if (!spToken) return [];
+  const resp = await fetch(`https://api.apparyllis.com/v1/fronters`, {
+    headers: {
+      authorization: spToken,
+    },
+  });
+  if (!resp.ok) return [];
+  const spFronters = (await resp.json()) as any[];
+  return spFronters.map((fronter) => ({
+    type: "sp",
+    memberId: fronter.content.member,
+    systemId: fronter.content.uid,
+  }));
+};