+1 -1

.env

··· 1 1 - ATPROTO_CLIENT_ID=http://127.0.0.1:3000/oauth-client-metadata.json 1 1 + ATPROTO_CLIENT_ID=https://1908-185-142-225-217.ngrok-free.app/oauth-client-metadata.tunnel.json 2 2 DISABLE_AUTOMATIC_TRACKS_PROCESSING=t

+3

Caddyfile

··· 1 1 + diffuse.localhost { 2 2 + reverse_proxy 127.0.0.1:3000 3 3 + }

+1

deno.jsonc

··· 21 21 "@fry69/deep-diff": "jsr:@fry69/deep-diff@^0.1.10", 22 22 "@js-temporal/polyfill": "npm:@js-temporal/polyfill@^0.5.1", 23 23 "@mary/ds-queue": "jsr:@mary/ds-queue@^0.1.3", 24 24 + "@noble/ciphers": "npm:@noble/ciphers@^2.1.1", 24 25 "@okikio/transferables": "jsr:@okikio/transferables@^1.0.2", 25 26 "@orama/orama": "npm:@orama/orama@^3.1.18", 26 27 "@phosphor-icons/web": "npm:@phosphor-icons/web@^2.1.2",

+20 -20

src/components/output/common.js

··· 8 8 */ 9 9 10 10 /** 11 11 + * @param {() => void} loader 12 12 + * @param {SignalReader<"loading" | "loaded" | "sleeping">} state 13 13 + */ 14 14 + export function promiseLoadedState(loader, state) { 15 15 + return () => 16 16 + new Promise((resolve) => { 17 17 + const stop = effect(() => { 18 18 + if (state() === "loaded") { 19 19 + stop(); 20 20 + resolve(void 0); 21 21 + } 22 22 + }); 23 23 + 24 24 + if (state() === "sleeping") { 25 25 + loader(); 26 26 + } 27 27 + }); 28 28 + } 29 29 + 30 30 + /** 11 31 * @template [Encoding=null] 12 32 * @param {OutputManagerProperties<Encoding>} _ 13 33 * @returns {OutputManager<Encoding>} ··· 44 64 const ts = signal( 45 65 /** @type {"loading" | "loaded" | "sleeping"} */ ("sleeping"), 46 66 ); 47 47 - 48 48 - /** 49 49 - * @param {() => void} loader 50 50 - * @param {SignalReader<"loading" | "loaded" | "sleeping">} state 51 51 - */ 52 52 - function promiseLoadedState(loader, state) { 53 53 - return () => 54 54 - new Promise((resolve) => { 55 55 - const stop = effect(() => { 56 56 - if (state() === "loaded") { 57 57 - stop(); 58 58 - resolve(void 0); 59 59 - } 60 60 - }); 61 61 - 62 62 - if (state() === "sleeping") { 63 63 - loader(); 64 64 - } 65 65 - }); 66 66 - } 67 67 68 68 async function loadFacets() { 69 69 if (init && (await init()) === false) return;

+175 -3

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

··· 3 3 import { DiffuseElement } from "@common/element.js"; 4 4 import { computed, signal } from "@common/signal.js"; 5 5 import { outputManager } from "../../common.js"; 6 6 + 6 7 import { 7 8 clearStoredSession, 8 9 login, ··· 12 13 TokenRefreshError, 13 14 } from "./oauth.js"; 14 15 16 16 + import { 17 17 + adoptPasskeyPrfResult, 18 18 + createPasskey, 19 19 + decryptUri, 20 20 + deriveCipherKey, 21 21 + encryptUri, 22 22 + isEncryptedUri, 23 23 + loadStoredCipherKey, 24 24 + removeStoredPasskey, 25 25 + storeCipherKey, 26 26 + } from "./passkey.js"; 27 27 + 15 28 /** 29 29 + * @import {Track} from "@definitions/types.d.ts" 16 30 * @import {OutputManager} from "../../types.d.ts" 17 31 * @import {ATProtoOutputElement} from "./types.d.ts" 18 32 */ ··· 60 74 }, 61 75 tracks: { 62 76 empty: () => [], 63 63 - get: () => this.listRecords("sh.diffuse.output.track"), 64 64 - put: (data) => this.#putRecords("sh.diffuse.output.track", data), 77 77 + get: async () => { 78 78 + const { locked, unlocked } = await this.#getTracks(); 79 79 + this.#lockedTracks.value = locked; 80 80 + return unlocked; 81 81 + }, 82 82 + put: (data) => this.#putTracks(data), 65 83 }, 66 84 }); 67 85 ··· 75 93 76 94 #did = signal(/** @type {string | null} */ (null)); 77 95 #isOnline = signal(navigator.onLine); 96 96 + #lockedTracks = signal(/** @type {Track[]} */ ([])); 97 97 + #passkeyActive = signal(false); 78 98 #rev = signal(/** @type {string | null} */ (null)); 79 99 80 100 // STATE 81 101 102 102 + /** @type {Uint8Array | null} */ 103 103 + #encryptionKey = null; 104 104 + 82 105 did = this.#did.get; 83 106 rev = this.#rev.get; 107 107 + lockedTracks = this.#lockedTracks.get; 108 108 + passkeyActive = this.#passkeyActive.get; 84 109 85 110 ready = computed(() => { 86 86 - return this.#did.value !== null && this.#isOnline.value; 111 111 + return this.#did.value !== null && !!this.#rpc && this.#isOnline.value; 87 112 }); 88 113 89 114 // LIFECYCLE ··· 92 117 connectedCallback() { 93 118 super.connectedCallback(); 94 119 120 120 + loadStoredCipherKey().then((key) => { 121 121 + if (key) { 122 122 + this.#encryptionKey = key; 123 123 + this.#passkeyActive.value = true; 124 124 + this.#decryptLockedTracks(); 125 125 + } 126 126 + }); 127 127 + 95 128 this.#tryRestore(); 96 129 97 130 globalThis.addEventListener("online", this.#online); ··· 128 161 this.#agent = null; 129 162 this.#authenticated = Promise.withResolvers(); 130 163 this.#did.value = null; 164 164 + this.#encryptionKey = null; 165 165 + this.#passkeyActive.value = false; 131 166 this.#rpc = null; 132 167 } 133 168 } ··· 140 175 this.#agent = null; 141 176 this.#authenticated = Promise.withResolvers(); 142 177 this.#did.value = null; 178 178 + this.#encryptionKey = null; 179 179 + this.#passkeyActive.value = false; 143 180 this.#rpc = null; 181 181 + 144 182 clearStoredSession(); 145 183 } 146 184 ··· 205 243 this.#authenticated.resolve(); 206 244 } 207 245 246 246 + // PASSKEY 247 247 + 248 248 + /** 249 249 + * Register a new passkey for track URI encryption. 250 250 + * Throws if the authenticator does not support the PRF extension. 251 251 + */ 252 252 + async setupPasskey() { 253 253 + const result = await createPasskey(); 254 254 + 255 255 + if (!result.supported) { 256 256 + throw new Error(result.reason); 257 257 + } 258 258 + } 259 259 + 260 260 + /** 261 261 + * Adopt an existing passkey via discoverable-credential 262 262 + * lookup. Stores the credential ID locally and derives the cipher key. 263 263 + */ 264 264 + async adoptPasskey() { 265 265 + const result = await adoptPasskeyPrfResult(); 266 266 + 267 267 + if (!result.supported) { 268 268 + throw new Error(result.reason); 269 269 + } 270 270 + 271 271 + this.#encryptionKey = await deriveCipherKey(result.prfSecond); 272 272 + this.#passkeyActive.value = true; 273 273 + 274 274 + await storeCipherKey(this.#encryptionKey); 275 275 + await this.#decryptLockedTracks(); 276 276 + } 277 277 + 278 278 + /** 279 279 + * Remove the stored passkey credential and clear in-memory key material. 280 280 + */ 281 281 + async removePasskey() { 282 282 + await removeStoredPasskey(); 283 283 + this.#encryptionKey = null; 284 284 + this.#passkeyActive.value = false; 285 285 + this.#lockedTracks.value = []; 286 286 + } 287 287 + 288 288 + /** 289 289 + * Attempt to decrypt tracks that were held back due to a missing key. 290 290 + * Called automatically after `unlockWithPasskey()`. 291 291 + */ 292 292 + async #decryptLockedTracks() { 293 293 + const key = this.#encryptionKey; 294 294 + if (!key) return; 295 295 + 296 296 + const locked = this.#lockedTracks.value; 297 297 + if (locked.length === 0) return; 298 298 + 299 299 + const results = locked.map((track) => { 300 300 + try { 301 301 + const uri = decryptUri(key, track.uri); 302 302 + return { ...track, uri }; 303 303 + } catch { 304 304 + return null; 305 305 + } 306 306 + }); 307 307 + 308 308 + const decrypted = results.filter((r) => r !== null); 309 309 + const stillLocked = locked.filter((_, i) => results[i] === null); 310 310 + 311 311 + this.#lockedTracks.value = stillLocked; 312 312 + 313 313 + const current = this.#manager.signals.tracks.value; 314 314 + this.#manager.signals.tracks.value = [...current, ...decrypted]; 315 315 + } 316 316 + 208 317 // RECORDS 209 318 210 319 /** ··· 277 386 } 278 387 279 388 /** 389 389 + * Fetch tracks and separate encrypted-but-locked records from usable ones. 390 390 + * Encrypted records with no key in memory are stored in `#lockedTracks` 391 391 + * and excluded from the returned array. 392 392 + * 393 393 + * @returns {Promise<{ locked: Track[]; unlocked: Track[] }>} 394 394 + */ 395 395 + async #getTracks() { 396 396 + /** @type {Track[]} */ 397 397 + const raw = await this.listRecords("sh.diffuse.output.track"); 398 398 + 399 399 + /** @type {Track[]} */ 400 400 + const unlocked = []; 401 401 + 402 402 + /** @type {Track[]} */ 403 403 + const locked = []; 404 404 + 405 405 + console.log("Get tracks", raw); 406 406 + 407 407 + for (const track of raw) { 408 408 + if (!isEncryptedUri(track.uri)) { 409 409 + unlocked.push(track); 410 410 + } else if (this.#encryptionKey) { 411 411 + try { 412 412 + const uri = decryptUri(this.#encryptionKey, track.uri); 413 413 + unlocked.push({ ...track, uri }); 414 414 + } catch { 415 415 + locked.push(track); 416 416 + } 417 417 + } else { 418 418 + locked.push(track); 419 419 + } 420 420 + } 421 421 + 422 422 + console.log("Locked", locked); 423 423 + console.log("Unlocked", unlocked); 424 424 + 425 425 + return { 426 426 + locked, 427 427 + unlocked, 428 428 + }; 429 429 + } 430 430 + 431 431 + /** 280 432 * @param {string} collection 281 433 * @param {Array<{ id: string }>} data 282 434 */ ··· 362 514 363 515 throw err; 364 516 } 517 517 + } 518 518 + 519 519 + /** 520 520 + * @param {Track[]} tracks 521 521 + */ 522 522 + async #putTracks(tracks) { 523 523 + const key = this.#encryptionKey; 524 524 + 525 525 + if (key) { 526 526 + tracks = tracks.map((track) => { 527 527 + return { 528 528 + ...track, 529 529 + uri: encryptUri(key, track.uri), 530 530 + }; 531 531 + }); 532 532 + 533 533 + tracks = tracks.concat(this.#lockedTracks.value); 534 534 + } 535 535 + 536 536 + this.#putRecords("sh.diffuse.output.track", tracks); 365 537 } 366 538 } 367 539

+10 -6

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

··· 47 47 redirect_uri = location.origin + "/oauth/callback"; 48 48 } 49 49 50 50 + const client_id = isLocalDev 51 51 + ? `http://localhost/?redirect_uri=${encodeURIComponent(redirect_uri)}&scope=${ 52 52 + encodeURIComponent(SCOPE) 53 53 + }` 54 54 + : /** @type {any} */ (import.meta).env?.ATPROTO_CLIENT_ID ?? 55 55 + "https://elements.diffuse.sh/oauth-client-metadata.json"; 56 56 + 57 57 + console.log(client_id); 58 58 + 50 59 configureOAuth({ 51 60 metadata: { 52 52 - client_id: isLocalDev 53 53 - ? `http://localhost/?redirect_uri=${ 54 54 - encodeURIComponent(redirect_uri) 55 55 - }&scope=${encodeURIComponent(SCOPE)}` 56 56 - : /** @type {any} */ (import.meta).env?.ATPROTO_CLIENT_ID ?? 57 57 - "https://elements.diffuse.sh/oauth-client-metadata.json", 61 61 + client_id, 58 62 redirect_uri, 59 63 }, 60 64 identityResolver: new LocalActorResolver({

+281

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

··· 1 1 + import { xchacha20poly1305 } from "@noble/ciphers/chacha.js"; 2 2 + import { managedNonce } from "@noble/ciphers/utils.js"; 3 3 + 4 4 + import * as IDB from "idb-keyval"; 5 5 + import { base64url } from "iso-base/rfc4648"; 6 6 + import { utf8 } from "iso-base/utf8"; 7 7 + 8 8 + //////////////////////////////////////////// 9 9 + // CONSTANTS 10 10 + //////////////////////////////////////////// 11 11 + 12 12 + const IDB_KEY = "diffuse/output/raw/atproto/passkey"; 13 13 + const IDB_KEY_CIPHER = "diffuse/output/raw/atproto/passkey/cipher-key"; 14 14 + 15 15 + //////////////////////////////////////////// 16 16 + // RELYING PARTY 17 17 + //////////////////////////////////////////// 18 18 + 19 19 + /** 20 20 + * @returns {{ name: string, id: string }} 21 21 + */ 22 22 + export function relyingParty() { 23 23 + const id = document.location.hostname; 24 24 + return { name: id, id }; 25 25 + } 26 26 + 27 27 + //////////////////////////////////////////// 28 28 + // PASSKEY MANAGEMENT 29 29 + //////////////////////////////////////////// 30 30 + 31 31 + /** 32 32 + * Register a new passkey with the PRF extension. 33 33 + * 34 34 + * @returns {Promise<{ supported: true, credentialId: Uint8Array } | { supported: false, reason: string }>} 35 35 + */ 36 36 + export async function createPasskey() { 37 37 + const rp = relyingParty(); 38 38 + const challenge = crypto.getRandomValues(new Uint8Array(32)); 39 39 + const userId = crypto.getRandomValues(new Uint8Array(16)); 40 40 + 41 41 + /** @type {PublicKeyCredential | null} */ 42 42 + let credential; 43 43 + 44 44 + try { 45 45 + credential = /** @type {PublicKeyCredential} */ ( 46 46 + await navigator.credentials.create({ 47 47 + publicKey: { 48 48 + challenge, 49 49 + rp, 50 50 + user: { 51 51 + id: userId, 52 52 + name: rp.id, 53 53 + displayName: "Diffuse – " + rp.id, 54 54 + }, 55 55 + pubKeyCredParams: [ 56 56 + { type: "public-key", alg: -7 }, 57 57 + { type: "public-key", alg: -257 }, 58 58 + ], 59 59 + attestation: "none", 60 60 + authenticatorSelection: { 61 61 + userVerification: "required", 62 62 + requireResidentKey: true, 63 63 + residentKey: "required", 64 64 + }, 65 65 + extensions: { 66 66 + // @ts-ignore — PRF is not yet in the TS DOM types 67 67 + prf: { 68 68 + eval: { 69 69 + // @ts-ignore 70 70 + first: utf8.decode(rp.id + "signing"), 71 71 + // @ts-ignore 72 72 + second: utf8.decode(rp.id + "encryption"), 73 73 + }, 74 74 + }, 75 75 + }, 76 76 + }, 77 77 + }) 78 78 + ); 79 79 + } catch (err) { 80 80 + return { 81 81 + supported: false, 82 82 + reason: err instanceof Error ? err.message : String(err), 83 83 + }; 84 84 + } 85 85 + 86 86 + if (!credential) { 87 87 + return { supported: false, reason: "Credential creation returned null" }; 88 88 + } 89 89 + 90 90 + const extensions = credential.getClientExtensionResults(); 91 91 + 92 92 + // @ts-ignore — PRF is not yet in the TS DOM types 93 93 + if (extensions.prf?.enabled !== true) { 94 94 + return { 95 95 + supported: false, 96 96 + reason: "This authenticator does not support the WebAuthn PRF extension", 97 97 + }; 98 98 + } 99 99 + 100 100 + const credentialId = new Uint8Array(credential.rawId); 101 101 + await IDB.set(IDB_KEY, { credentialId: Array.from(credentialId) }); 102 102 + 103 103 + return { supported: true, credentialId }; 104 104 + } 105 105 + 106 106 + /** 107 107 + * Authenticate with an existing passkey via discoverable-credential lookup 108 108 + * (no `allowCredentials`), so it works on a new device that has no stored 109 109 + * credential ID yet. Saves the credential ID to IDB and returns PRF material. 110 110 + * 111 111 + * @returns {Promise<{ supported: true, credentialId: Uint8Array, prfSecond: ArrayBuffer } | { supported: false, reason: string }>} 112 112 + */ 113 113 + export async function adoptPasskeyPrfResult() { 114 114 + const rp = relyingParty(); 115 115 + const challenge = crypto.getRandomValues(new Uint8Array(32)); 116 116 + 117 117 + /** @type {PublicKeyCredential | null} */ 118 118 + let assertion; 119 119 + 120 120 + try { 121 121 + assertion = /** @type {PublicKeyCredential} */ ( 122 122 + await navigator.credentials.get({ 123 123 + publicKey: { 124 124 + challenge, 125 125 + rpId: rp.id, 126 126 + userVerification: "required", 127 127 + extensions: { 128 128 + // @ts-ignore — PRF is not yet in the TS DOM types 129 129 + prf: { 130 130 + eval: { 131 131 + // @ts-ignore 132 132 + first: utf8.decode(rp.id + "signing"), 133 133 + // @ts-ignore 134 134 + second: utf8.decode(rp.id + "encryption"), 135 135 + }, 136 136 + }, 137 137 + }, 138 138 + }, 139 139 + }) 140 140 + ); 141 141 + } catch (err) { 142 142 + return { 143 143 + supported: false, 144 144 + reason: err instanceof Error ? err.message : String(err), 145 145 + }; 146 146 + } 147 147 + 148 148 + if (!assertion) { 149 149 + return { supported: false, reason: "Credential get returned null" }; 150 150 + } 151 151 + 152 152 + const extensions = assertion.getClientExtensionResults(); 153 153 + 154 154 + // @ts-ignore — PRF is not yet in the TS DOM types 155 155 + const prfSecond = extensions.prf?.results?.second; 156 156 + 157 157 + if (!prfSecond) { 158 158 + return { 159 159 + supported: false, 160 160 + reason: 161 161 + "This authenticator did not return PRF results — PRF extension may not be supported", 162 162 + }; 163 163 + } 164 164 + 165 165 + const credentialId = new Uint8Array(assertion.rawId); 166 166 + await IDB.set(IDB_KEY, { credentialId: Array.from(credentialId) }); 167 167 + 168 168 + return { 169 169 + supported: true, 170 170 + credentialId, 171 171 + prfSecond: /** @type {ArrayBuffer} */ (prfSecond), 172 172 + }; 173 173 + } 174 174 + 175 175 + /** 176 176 + * Remove the stored passkey credential ID and cached cipher key from IDB. 177 177 + * 178 178 + * @returns {Promise<void>} 179 179 + */ 180 180 + export async function removeStoredPasskey() { 181 181 + await Promise.all([IDB.del(IDB_KEY), IDB.del(IDB_KEY_CIPHER)]); 182 182 + } 183 183 + 184 184 + /** 185 185 + * Persist the derived cipher key to IDB so it survives page reloads. 186 186 + * 187 187 + * @param {Uint8Array} key 188 188 + * @returns {Promise<void>} 189 189 + */ 190 190 + export async function storeCipherKey(key) { 191 191 + await IDB.set(IDB_KEY_CIPHER, key); 192 192 + } 193 193 + 194 194 + /** 195 195 + * Retrieve the previously persisted cipher key from IDB. 196 196 + * 197 197 + * @returns {Promise<Uint8Array | undefined>} 198 198 + */ 199 199 + export async function loadStoredCipherKey() { 200 200 + return IDB.get(IDB_KEY_CIPHER); 201 201 + } 202 202 + 203 203 + //////////////////////////////////////////// 204 204 + // KEY DERIVATION 205 205 + //////////////////////////////////////////// 206 206 + 207 207 + /** 208 208 + * Derive a 256-bit key from the PRF "second" output via HKDF. 209 209 + * Returns raw bytes suitable for use with XChaCha20-Poly1305. 210 210 + * 211 211 + * @param {ArrayBuffer} prfSecond 212 212 + * @returns {Promise<Uint8Array>} 213 213 + */ 214 214 + export async function deriveCipherKey(prfSecond) { 215 215 + const keyMaterial = await crypto.subtle.importKey( 216 216 + "raw", 217 217 + prfSecond, 218 218 + { name: "HKDF" }, 219 219 + false, 220 220 + ["deriveBits"], 221 221 + ); 222 222 + 223 223 + const bits = await crypto.subtle.deriveBits( 224 224 + { 225 225 + name: "HKDF", 226 226 + hash: "SHA-256", 227 227 + 228 228 + // @ts-ignore 229 229 + salt: utf8.decode("diffuse-atproto-passkey-salt"), 230 230 + 231 231 + // @ts-ignore 232 232 + info: utf8.decode("diffuse-atproto-track-uri"), 233 233 + }, 234 234 + keyMaterial, 235 235 + 256, 236 236 + ); 237 237 + 238 238 + return new Uint8Array(bits); 239 239 + } 240 240 + 241 241 + //////////////////////////////////////////// 242 242 + // ENCRYPT / DECRYPT 243 243 + //////////////////////////////////////////// 244 244 + 245 245 + /** 246 246 + * Detect whether a URI is encrypted by this module. 247 247 + * 248 248 + * @param {string} uri 249 249 + * @returns {boolean} 250 250 + */ 251 251 + export function isEncryptedUri(uri) { 252 252 + return uri.startsWith("encrypted://"); 253 253 + } 254 254 + 255 255 + const xchacha = managedNonce(xchacha20poly1305); 256 256 + 257 257 + /** 258 258 + * Encrypt a plaintext URI with XChaCha20-Poly1305. 259 259 + * Returns a string of the form: `encrypted://<base64url(nonce || ciphertext)>` 260 260 + * The nonce is prepended automatically by `managedNonce`. 261 261 + * 262 262 + * @param {Uint8Array} key 263 263 + * @param {string} plaintext 264 264 + * @returns {string} 265 265 + */ 266 266 + export function encryptUri(key, plaintext) { 267 267 + const ciphertext = xchacha(key).encrypt(utf8.decode(plaintext)); 268 268 + return "encrypted://" + base64url.encode(ciphertext); 269 269 + } 270 270 + 271 271 + /** 272 272 + * Decrypt an encrypted URI produced by `encryptUri`. 273 273 + * 274 274 + * @param {Uint8Array} key 275 275 + * @param {string} encryptedUri 276 276 + * @returns {string} 277 277 + */ 278 278 + export function decryptUri(key, encryptedUri) { 279 279 + const ciphertext = base64url.decode(encryptedUri.slice(12)); 280 280 + return utf8.encode(xchacha(key).decrypt(ciphertext)); 281 281 + }

+17

src/components/output/raw/atproto/types.d.ts

··· 1 1 import type { SignalReader } from "@common/signal.d.ts"; 2 2 + import type { Track } from "@definitions/types.d.ts"; 2 3 import type { OutputElement } from "../../types.d.ts"; 3 4 4 5 export type ATProtoOutputElement = ··· 6 7 & { 7 8 did: SignalReader<string | null>; 8 9 rev: SignalReader<string | null>; 10 10 + 11 11 + /** Track records with encrypted URIs that cannot be decrypted without the passkey. */ 12 12 + lockedTracks: SignalReader<Track[]>; 13 13 + 14 14 + /** True if passkey encryption is active for this session. */ 15 15 + passkeyActive: SignalReader<boolean>; 16 16 + 9 17 getLatestCommit(): Promise<string | null>; 10 18 login(handle: string): Promise<void>; 11 19 logout(): Promise<void>; 20 20 + 21 21 + /** Adopt an existing passkey from another device via discoverable-credential lookup. */ 22 22 + adoptPasskey(): Promise<void>; 23 23 + 24 24 + /** Remove the stored passkey credential and clear the in-memory key. */ 25 25 + removePasskey(): Promise<void>; 26 26 + 27 27 + /** Register a new passkey for track URI encryption. Throws if PRF is not supported. */ 28 28 + setupPasskey(): Promise<void>; 12 29 };

+9 -1

src/components/transformer/output/bytes/dasl-sync/element.js

··· 9 9 import { compareTimestamps } from "@common/utils.js"; 10 10 import { OutputTransformer } from "../../base.js"; 11 11 import { IDB_PREFIX } from "./constants.js"; 12 12 + import { promiseLoadedState } from "@toko/diffuse/components/output/common.js"; 12 13 13 14 /** 14 15 * @import { Signal, SignalReader } from "@common/signal.d.ts"; ··· 363 364 * @param {{ save: (bytes: Uint8Array) => Promise<void> | void }} local 364 365 * @param {{ collection: SignalReader<Uint8Array | undefined>, reload: () => Promise<void>, save: (bytes: Uint8Array) => Promise<void>, state: SignalReader<"loading" | "loaded" | "sleeping"> }} remote 365 366 * @param {SignalReader<Container<T>>} container 366 366 - * @returns {{ collection: SignalReader<T[]>, reload: () => Promise<void>, save: (items: T[]) => Promise<void>, state: SignalReader<"loading" | "loaded" | "sleeping"> }} 367 367 + * @returns {{ collection: SignalReader<T[]>, loaded: () => Promise<void>; reload: () => Promise<void>, save: (items: T[]) => Promise<void>, state: SignalReader<"loading" | "loaded" | "sleeping"> }} 367 368 */ 368 369 managerProp(local, remote, container) { 369 370 return { 370 371 collection: computed(() => { 371 372 return container().data; 372 373 }), 374 374 + loaded: promiseLoadedState( 375 375 + computed(() => container()), 376 376 + computed(() => { 377 377 + if (container().cid) return "loaded"; 378 378 + return "loading"; 379 379 + }), 380 380 + ), 373 381 reload: remote.reload, 374 382 save: async (/** @type {T[]} */ newItems) => { 375 383 const adjustedContainer = await this.updateContainer({

+11

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

··· 4 4 5 5 import { computed, signal } from "@common/signal.js"; 6 6 import { OutputTransformer } from "../../base.js"; 7 7 + import { promiseLoadedState } from "@toko/diffuse/components/output/common.js"; 7 8 8 9 /** 9 10 * @import { RenderArg } from "@common/element.d.ts" ··· 53 54 const data = l[name].collection(); 54 55 return Array.isArray(data) ? data : []; 55 56 }), 57 57 + loaded: promiseLoadedState( 58 58 + computed(() => { 59 59 + const l = local(); 60 60 + if (!l) return []; 61 61 + l[name].collection(); 62 62 + }), 63 63 + computed(() => { 64 64 + return local()?.[name]?.state() ?? "sleeping"; 65 65 + }), 66 66 + ), 56 67 reload: async () => { 57 68 await this.#sync(); 58 69 },

src/images/icons/windows_98/keys-5.png

This is a binary file and will not be displayed.

+12

src/oauth-client-metadata.tunnel.json

··· 1 1 + { 2 2 + "client_id": "https://1908-185-142-225-217.ngrok-free.app/oauth-client-metadata.tunnel.json", 3 3 + "client_name": "Diffuse", 4 4 + "client_uri": "https://1908-185-142-225-217.ngrok-free.app", 5 5 + "redirect_uris": ["https://1908-185-142-225-217.ngrok-free.app/oauth/callback"], 6 6 + "scope": "atproto repo?collection=sh.diffuse.output.facet&collection=sh.diffuse.output.playlistItem&collection=sh.diffuse.output.theme&collection=sh.diffuse.output.track", 7 7 + "grant_types": ["authorization_code", "refresh_token"], 8 8 + "response_types": ["code"], 9 9 + "token_endpoint_auth_method": "none", 10 10 + "application_type": "web", 11 11 + "dpop_bound_access_tokens": true 12 12 + }

+146

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

··· 40 40 ); 41 41 42 42 $atprotoError = signal(/** @type {string | null} */ (null)); 43 43 + $passkeyError = signal(/** @type {string | null} */ (null)); 44 44 + $passkeyWorking = signal(false); 43 45 $tab = signal("overview"); 44 46 45 47 // LIFECYCLE ··· 110 112 if (!atproto) return; 111 113 112 114 await atproto.logout(); 115 115 + }; 116 116 + 117 117 + #handlePasskeySetup = async () => { 118 118 + const atproto = this.$atproto.value; 119 119 + if (!atproto) return; 120 120 + 121 121 + this.$passkeyError.value = null; 122 122 + this.$passkeyWorking.value = true; 123 123 + 124 124 + try { 125 125 + await atproto.setupPasskey(); 126 126 + } catch (err) { 127 127 + this.$passkeyError.value = err instanceof Error 128 128 + ? err.message 129 129 + : "Passkey setup failed"; 130 130 + } finally { 131 131 + this.$passkeyWorking.value = false; 132 132 + } 133 133 + }; 134 134 + 135 135 + #handlePasskeyAdopt = async () => { 136 136 + const atproto = this.$atproto.value; 137 137 + if (!atproto) return; 138 138 + 139 139 + this.$passkeyError.value = null; 140 140 + this.$passkeyWorking.value = true; 141 141 + 142 142 + try { 143 143 + await atproto.adoptPasskey(); 144 144 + } catch (err) { 145 145 + this.$passkeyError.value = err instanceof Error 146 146 + ? err.message 147 147 + : "Passkey adoption failed"; 148 148 + } finally { 149 149 + this.$passkeyWorking.value = false; 150 150 + } 151 151 + }; 152 152 + 153 153 + #handlePasskeyRemove = async () => { 154 154 + const atproto = this.$atproto.value; 155 155 + if (!atproto) return; 156 156 + 157 157 + this.$passkeyError.value = null; 158 158 + await atproto.removePasskey(); 113 159 }; 114 160 115 161 /** @param {Event} event */ ··· 384 430 : undefined; 385 431 386 432 const authenticated = () => { 433 433 + const atproto = this.$atproto.value; 434 434 + const passkeyActive = atproto?.passkeyActive() ?? false; 435 435 + const lockedTracksCount = atproto?.lockedTracks().length ?? 0; 436 436 + 437 437 + console.log(lockedTracksCount); 438 438 + 387 439 return html` 388 440 <fieldset> 389 441 <span class="with-icon with-icon--large"> ··· 391 443 <span>Signed in as <strong>${did}</strong></span> 392 444 </span> 393 445 </fieldset> 446 446 + 447 447 + <fieldset> 448 448 + <legend>Passkey encryption (optional)</legend> 449 449 + 450 450 + <div class="with-icon with-icon--large"> 451 451 + <img src="images/icons/windows_98/keys-5.png" width="24" /> 452 452 + 453 453 + <div> 454 454 + ${passkeyActive 455 455 + ? html` 456 456 + <p class="with-icon with-icon--large"> 457 457 + <img 458 458 + src="images/icons/windows_98/directory_channels-2.png" 459 459 + width="24" 460 460 + /> 461 461 + Passkey active — track URIs are encrypted. 462 462 + </p> 463 463 + 464 464 + ${this.$passkeyError.value 465 465 + ? html` 466 466 + <fieldset> 467 467 + <span class="with-icon with-icon--large"> 468 468 + <img src="images/icons/windows_98/msg_error-0.png" width="24" /> 469 469 + <span>${this.$passkeyError.value}</span> 470 470 + </span> 471 471 + </fieldset> 472 472 + ` 473 473 + : nothing} 474 474 + 475 475 + <p> 476 476 + <button @click="${this 477 477 + .#handlePasskeyRemove}">Remove passkey</button> 478 478 + </p> 479 479 + ` 480 480 + : html` 481 481 + <p> 482 482 + Data stored on the AT Protocol is public by default.<br /> 483 483 + This feature optionally hides any passwords and other<br /> 484 484 + sensitive authentication details from the inputs you've added. 485 485 + </p> 486 486 + <p> 487 487 + Note that, with this enabled, other people can NOT play audio listed on your 488 488 + account. 489 489 + </p> 490 490 + 491 491 + ${this.$passkeyError.value 492 492 + ? html` 493 493 + <fieldset> 494 494 + <span class="with-icon with-icon--large"> 495 495 + <img src="images/icons/windows_98/msg_error-0.png" width="24" /> 496 496 + <span>${this.$passkeyError.value}</span> 497 497 + </span> 498 498 + </fieldset> 499 499 + ` 500 500 + : nothing} 501 501 + 502 502 + <p class="button-row"> 503 503 + <button 504 504 + ?disabled="${this.$passkeyWorking.value}" 505 505 + @click="${this.#handlePasskeySetup}" 506 506 + > 507 507 + ${this.$passkeyWorking.value 508 508 + ? "Setting up ..." 509 509 + : "Set up passkey encryption"} 510 510 + </button> 511 511 + <button 512 512 + ?disabled="${this.$passkeyWorking.value}" 513 513 + @click="${this.#handlePasskeyAdopt}" 514 514 + > 515 515 + ${this.$passkeyWorking.value 516 516 + ? "Authenticating ..." 517 517 + : "Use existing passkey"} 518 518 + </button> 519 519 + </p> 520 520 + `} 521 521 + </div> 522 522 + </div> 523 523 + </fieldset> 524 524 + 525 525 + ${lockedTracksCount > 0 526 526 + ? html` 527 527 + <fieldset> 528 528 + <legend></legend> 529 529 + <p class="with-icon with-icon--large"> 530 530 + <img 531 531 + src="images/icons/windows_98/msg_warning-0.png" 532 532 + width="24" 533 533 + /> 534 534 + ${lockedTracksCount} encrypted track(s) cannot be played until you unlock them with 535 535 + your passkey. 536 536 + </p> 537 537 + </fieldset> 538 538 + ` 539 539 + : nothing} 394 540 395 541 <p class="button-row"> 396 542 <button @click="${this.#handleAtprotoLogout}">Sign out</button>