fix: various atproto things

.env

···
-ATPROTO_CLIENT_ID=https://handed-pixels-solo-folks.trycloudflare.com/oauth-client-metadata.tunnel.json
+ATPROTO_CLIENT_ID=https://cimd-service.fly.dev/clients/bafyreidf2esqfai4xh2osfrq6oekkkvburcjvomebn4age7hks7teb77fi
 # DISABLE_AUTOMATIC_TRACKS_PROCESSING=t

_config.ts

···
         name: "atcute-multibase-browser",
         setup(build) {
           build.onLoad(
-            { filter: /@atcute\+multibase.*-node\.js$/ },
+            { filter: /@atcute[+/]multibase.*-node\.js$/ },
             async (args) => {
               const browserPath = args.path.replace(
                 "-node.js",
                 "-web.js",
+              );
+              const contents = await Deno.readTextFile(browserPath);
+              return { contents, loader: "js" };
+            },
+          );
+        },
+      },
+      // nanoid ships a browser entry (index.browser.js) but esbuild resolves
+      // the default condition (index.js) which uses Buffer.allocUnsafe.
+      {
+        name: "nanoid-browser",
+        setup(build) {
+          build.onLoad(
+            { filter: /nanoid\/index\.js$/ },
+            async (args) => {
+              const browserPath = args.path.replace(
+                "index.js",
+                "index.browser.js",
               );
               const contents = await Deno.readTextFile(browserPath);
               return { contents, loader: "js" };

deno.jsonc

···
   "vendor": true,
   "imports": {
     "98.css": "npm:98.css@^0.1.21",
+    "@atcute/car": "npm:@atcute/car@^5.1.1",
     "@atcute/cbor": "npm:@atcute/cbor@^2.3.2",
     "@atcute/cid": "npm:@atcute/cid@^2.4.1",
     "@atcute/tid": "npm:@atcute/tid@^1.1.2",
     "@atcute/client": "npm:@atcute/client@^4.2.1",
+    "@atcute/repo": "npm:@atcute/repo@^0.1.3",
     "@atcute/identity-resolver": "npm:@atcute/identity-resolver@^1.2.2",
     "@atcute/lexicons": "npm:@atcute/lexicons@^1.2.9",
     "@atcute/oauth-browser-client": "npm:@atcute/oauth-browser-client@^3.0.0",

src/components/output/raw/atproto/element.js

···
 import { Client, ClientResponseError, ok } from "@atcute/client";
+import { encode } from "@atcute/cbor";
+import { xxh32r } from "xxh32/dist/raw.js";
+import * as Repo from "@atcute/repo";
+import * as IDB from "idb-keyval";
 import * as TID from "@atcute/tid";
 
 import { computed, signal } from "~/common/signal.js";
 import { BroadcastedOutputElement, outputManager } from "../../common.js";
+import * as Output from "~/common/output.js";
 
 import {
   clearStoredSession,
···
 } from "./oauth.js";
 
 /**
- * @import {PlaylistItemBundle, TrackBundle} from "~/definitions/types.d.ts"
+ * @import {TrackBundle} from "~/definitions/types.d.ts"
  * @import {OutputManager} from "../../types.d.ts"
  * @import {ATProtoOutputElement} from "./types.d.ts"
  */
···
       },
       playlistItems: {
         empty: () => [],
-        get: async () => {
-          const bundles = await this.listRecords(
-            "sh.diffuse.output.playlistItemBundle",
-          );
-
-          return bundles.flatMap((bundle) => bundle.playlistItems ?? []);
-        },
-        put: (data) => {
-          /** @type {PlaylistItemBundle[]} */
-          const bundles = [];
-
-          for (let i = 0; i < data.length; i += 100) {
-            bundles.push({
-              $type: "sh.diffuse.output.playlistItemBundle",
-              id: TID.now(),
-              playlistItems: data.slice(i, i + 100),
-            });
-          }
-
-          return this.#putRecords(
-            "sh.diffuse.output.playlistItemBundle",
-            bundles,
-            { upsertBatchSize: 1 },
-          );
-        },
+        get: () => this.listRecords("sh.diffuse.output.playlistItem"),
+        put: (data) => this.#putRecords("sh.diffuse.output.playlistItem", data),
       },
       themes: {
         empty: () => [],
···
 
           return bundles.flatMap((bundle) => bundle.tracks ?? []);
         },
-        put: (data) => {
+        put: async (data) => {
+          const current = await Output.data(this.#manager.tracks);
+          const hashCurrent = xxh32r(encode(current));
+          const hashNew = xxh32r(encode(data));
+
+          if (hashCurrent === hashNew) {
+            return;
+          }
+
           /** @type {TrackBundle[]} */
           const bundles = [];
 
···
   }
 
   /**
+   * Fetch the full repo CAR for the authenticated user, cached in IDB by rev.
+   * Returns null if not authenticated or if the commit rev cannot be determined.
+   *
+   * @returns {Promise<Uint8Array | null>}
+   */
+  async #getRepoCar() {
+    const did = this.#did.value;
+    const rpc = this.#rpc;
+    if (!rpc || !did) return null;
+
+    const latestRev = await this.getLatestCommit();
+    if (!latestRev) return null;
+
+    const IDB_KEY = `diffuse/output/raw/atproto/repo/${did}`;
+    const cached =
+      /** @type {{ rev: string, bytes: Uint8Array } | undefined} */ (
+        await IDB.get(IDB_KEY)
+      );
+
+    if (cached?.rev === latestRev) {
+      return cached.bytes;
+    }
+
+    const bytes = await ok(rpc.get("com.atproto.sync.getRepo", {
+      params: { did },
+      as: "bytes",
+    }));
+
+    await IDB.set(IDB_KEY, { rev: latestRev, bytes });
+    return bytes;
+  }
+
+  /**
    * @template T
    * @param {string} collection
    * @param {string} [did]
···
   async listRecords(collection, did) {
     did ??= this.#did.value ?? undefined;
 
-    const rpc = this.#rpc;
-    if (!rpc || !did) return [];
+    if (!this.#rpc || !did) return [];
 
     try {
-      const records = [];
-
-      /** @type {any} */
-      let cursor;
+      const bytes = await this.#getRepoCar();
+      if (!bytes) return [];
 
-      do {
-        const page = await ok(rpc.get(
-          "com.atproto.repo.listRecords",
-          { params: { repo: did, collection, limit: 100, cursor } },
-        ));
-
-        for (const record of (page?.records ?? [])) {
-          records.push(record.value);
+      const records = [];
+      for (const entry of Repo.fromUint8Array(bytes)) {
+        if (entry.collection === collection) {
+          records.push(/** @type {T} */ (entry.record));
         }
-
-        cursor = page?.cursor;
-      } while (cursor);
-
+      }
       return records;
     } catch (err) {
       if (this.#isSessionError(err)) {
···
       /** @type {Map<string, { rkey: string, value: unknown }>} */
       const existing = new Map();
 
-      /** @type {any} */
-      let cursor;
-
-      do {
-        const page = await ok(rpc.get(
-          "com.atproto.repo.listRecords",
-          {
-            params: { repo: this.#did.value, collection, limit: 100, cursor },
-          },
-        ));
-
-        for (const record of (page?.records ?? [])) {
-          const rkey = record.uri.split("/").pop();
-          existing.set(record.value.id, { rkey, value: record.value });
+      const repoBytes = await this.#getRepoCar();
+      if (repoBytes) {
+        for (const entry of Repo.fromUint8Array(repoBytes)) {
+          if (entry.collection === collection) {
+            const record = /** @type {any} */ (entry.record);
+            existing.set(record.id, { rkey: entry.rkey, value: record });
+          }
         }
-
-        cursor = page?.cursor;
-      } while (cursor);
+      }
 
       // 2. Build desired state
       const desired = new Map(
···
         }
       }
 
-      // 4. Apply in batches
-      const applyBatch = async (/** @type {unknown[]} */ batch) => {
+      // 4. Apply in batches, throttled to 1500 ops/hour via a persisted sliding window
+      const WINDOW_MS = 3_600_000;
+      const RATE_LIMIT = 1500;
+
+      const IDB_KEY = "diffuse/output/raw/atproto/writes";
+
+      /**
+       * Returns all record IDs written within the last hour, loaded from IDB.
+       *
+       * @returns {Promise<{ id: string, ts: number }[]>}
+       */
+      const loadWindow = async () => {
+        const now = Date.now();
+        const all = await IDB.get(IDB_KEY) ?? [];
+        return all.filter(
+          /**
+           * @param {{ id: string, ts: number }} entry
+           * @returns {boolean}
+           */
+          (entry) => now - entry.ts < WINDOW_MS,
+        );
+      };
+
+      /**
+       * Records IDs as written, pruning entries older than one hour.
+       *
+       * @param {string[]} ids
+       */
+      const recordWritten = async (ids) => {
+        const now = Date.now();
+        const window = await loadWindow();
+        await IDB.set(IDB_KEY, [
+          ...window,
+          ...ids.map((id) => ({ id, ts: now })),
+        ]);
+      };
+
+      const applyBatch = async (/** @type {any[]} */ batch) => {
+        // Wait until the sliding window has room for this batch
+        while (true) {
+          const window = await loadWindow();
+          const uniqueInWindow = new Set(window.map((e) => e.id));
+          const batchIds = batch.map((op) => op.rkey ?? op.value?.id).filter(
+            Boolean,
+          );
+          const newIds = batchIds.filter((id) => !uniqueInWindow.has(id));
+
+          if (uniqueInWindow.size + newIds.length <= RATE_LIMIT) break;
+
+          // Wait until the oldest entry in the window expires
+          const oldest = window.reduce((a, b) => a.ts < b.ts ? a : b);
+          const waitMs = WINDOW_MS - (Date.now() - oldest.ts) + 1;
+          await new Promise((resolve) => setTimeout(resolve, waitMs));
+        }
+
         const result = await ok(rpc.post("com.atproto.repo.applyWrites", {
           input: { repo: this.#did.value, writes: batch },
         }));
+
+        const writtenIds = batch.map((op) => op.rkey ?? op.value?.id).filter(
+          Boolean,
+        );
+
+        await recordWritten(writtenIds);
 
         if (result?.commit?.rev) {
           this.#rev.value = result.commit.rev;

src/components/output/raw/atproto/oauth.js

···
 
 const location = globalThis.location;
 
-let redirect_uri = (location.origin + location.pathname + location.search)
-  .replace(
-    "://localhost",
-    "://127.0.0.1",
-  );
+let redirect_uri = location.origin + location.pathname + location.search;
 
 const isLocalDev = redirect_uri.startsWith("http://127.0.0.1");
 
···
  */
 export async function login(handle) {
   const location = globalThis.location;
-
-  if (location.origin.startsWith("http://localhost")) {
-    location.assign(
-      location.href.replace("http://localhost:", "http://127.0.0.1:"),
-    );
-  }
 
   sessionStorage.setItem(
     "diffuse/output/raw/atproto/oauth/redirect_path",

src/components/transformer/output/raw/atproto-sync/element.js

···
         collection: computed(() => {
           const l = local();
           if (!l) return { state: "loading" };
-          return l[name].collection();
+          const c = l[name].collection();
+          if (c.state === "loading") return c;
+          return { state: "loaded", data: c.data ?? [] };
         }),
         reload: async () => {
           await this.#sync();

src/components/transformer/output/refiner/track-uri-passkey/element.js

···
     // Tracks
     this.#tracks = () => {
       const col = base.tracks.collection();
-      if (col.state === "loading") {
+
+      if (col?.state !== "loaded") {
         return { state: "loading", locked: [], unlocked: [] };
       }
 

src/oauth-client-metadata.json

···
   "client_name": "Diffuse",
   "client_uri": "https://elements.diffuse.sh",
   "redirect_uris": ["https://elements.diffuse.sh/oauth/callback"],
-  "scope": "atproto repo?collection=sh.diffuse.output.facet&collection=sh.diffuse.output.playlistItem&collection=sh.diffuse.output.playlistItemBundle&collection=sh.diffuse.output.theme&collection=sh.diffuse.output.track&collection=sh.diffuse.output.trackBundle",
+  "scope": "atproto repo?collection=sh.diffuse.output.facet&collection=sh.diffuse.output.playlistItem&collection=sh.diffuse.output.playlistItemBundle&collection=sh.diffuse.output.track&collection=sh.diffuse.output.trackBundle",
   "grant_types": ["authorization_code", "refresh_token"],
   "response_types": ["code"],
   "token_endpoint_auth_method": "none",

src/oauth-client-metadata.tunnel.json

···
-{
-  "client_id": "https://handed-pixels-solo-folks.trycloudflare.com/oauth-client-metadata.tunnel.json",
-  "client_name": "Diffuse",
-  "client_uri": "https://handed-pixels-solo-folks.trycloudflare.com",
-  "redirect_uris": ["https://handed-pixels-solo-folks.trycloudflare.com/oauth/callback"],
-  "scope": "atproto repo?collection=sh.diffuse.output.facet&collection=sh.diffuse.output.playlistItem&collection=sh.diffuse.output.playlistItemBundle&collection=sh.diffuse.output.theme&collection=sh.diffuse.output.track&collection=sh.diffuse.output.trackBundle",
-  "grant_types": ["authorization_code", "refresh_token"],
-  "response_types": ["code"],
-  "token_endpoint_auth_method": "none",
-  "application_type": "web",
-  "dpop_bound_access_tokens": true
-}

src/themes/winamp/configurators/input/element.js

···
 } from "~/common/element.js";
 import { signal } from "~/common/signal.js";
 
+import { buildURI as buildIcecastURI } from "~/components/input/icecast/common.js";
 import { buildURI as buildOpenSubsonicURI } from "~/components/input/opensubsonic/common.js";
 import { buildURI as buildS3URI } from "~/components/input/s3/common.js";
 import { isSupported as supportsLocalFsAccess } from "~/components/input/local/common.js";
 
 import { SCHEME as HTTPS_SCHEME } from "~/components/input/https/constants.js";
-import { buildURI as buildIcecastURI } from "~/components/input/icecast/common.js";
 import { SCHEME as ICECAST_SCHEME } from "~/components/input/icecast/constants.js";
 import { SCHEME as LOCAL_SCHEME } from "~/components/input/local/constants.js";
 import { SCHEME as OPENSUBSONIC_SCHEME } from "~/components/input/opensubsonic/constants.js";

src/themes/winamp/configurators/output/element.js

···
     const atproto = this.$atproto.value;
     if (!atproto) return;
 
+    const output = this.$output.value;
+    if (!output || !("select" in output)) return;
+
     /** @type {HTMLButtonElement | null} */
     const button = this.root().querySelector("#atproto-submit");
     if (button) {
···
       button.textContent = "Loading ...";
     }
 
+    const option = (await output.options()).find((o) =>
+      o.label === "AT Protocol"
+    );
+
+    if (option) await output.select(option.id);
     this.$atprotoError.value = null;
 
     try {
       await atproto.login(handle);
     } catch (err) {
+      console.error(err);
+
       this.$atprotoError.value = err instanceof Error
         ? err.message
         : "login failed";
+
       if (button) {
         button.disabled = false;
         button.textContent = "Sign in";
···
     const option = (await output.options()).find((o) =>
       o.label === "AT Protocol"
     );
+
     if (option) await output.select(option.id);
   };
 
···
     const s3 = this.$s3.value;
     if (!s3) return;
 
+    const output = this.$output.value;
+    if (!output || !("select" in output)) return;
+
     /** @type {HTMLButtonElement | null} */
     const button = this.root().querySelector("#s3-submit");
     if (button) button.disabled = true;
···
 
     await s3.setBucket(bucket);
 
+    const option = (await output.options()).find((o) =>
+      o.label === "AT Protocol"
+    );
+
+    if (option) await output.select(option.id);
     if (button) button.disabled = false;
   };
 
···
 
       <style>
       @import "./themes/winamp/98-vars.css";
+
+      input, select, textarea {
+        color: rgb(34, 34, 34);
+      }
 
       .button-row {
         display: inline-flex;