From 5f4e8023b156c146eb3fb7744e93891805779ca7 Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Sat, 7 Jun 2025 00:07:35 +0200
Subject: [PATCH] feat: initial work for artwork fetcher + applet loading fixes

---
 deno.lock                                     |  1 +
 src/pages/configurator/input/_applet.astro    | 42 +++++-----
 src/pages/configurator/input/_manifest.json   |  1 +
 src/pages/configurator/output/_applet.astro   |  7 +-
 src/pages/index.astro                         |  2 +-
 .../orchestrator/input-cache/_applet.astro    | 52 ++++++-------
 .../orchestrator/single-queue/_applet.astro   | 14 +++-
 src/pages/processor/artwork/_applet.astro     | 76 +++++++++++++++++++
 src/pages/processor/artwork/_manifest.json    | 38 ++++++++++
 .../{metadata-fetcher => artwork}/index.astro |  0
 src/pages/processor/artwork/types.d.ts        | 14 ++++
 .../_applet.astro                             | 22 +++---
 .../_manifest.json                            |  8 +-
 src/pages/processor/metadata/index.astro      |  9 +++
 src/pages/processor/metadata/types.d.ts       |  5 ++
 src/scripts/applets/common.ts                 | 68 ++++++++++++-----
 src/scripts/themes/desktop/index.ts           | 73 +++++++++++++++++-
 src/scripts/themes/webamp/index.ts            |  2 +-
 18 files changed, 338 insertions(+), 96 deletions(-)
 create mode 100644 src/pages/processor/artwork/_applet.astro
 create mode 100644 src/pages/processor/artwork/_manifest.json
 rename src/pages/processor/{metadata-fetcher => artwork}/index.astro (100%)
 create mode 100644 src/pages/processor/artwork/types.d.ts
 rename src/pages/processor/{metadata-fetcher => metadata}/_applet.astro (86%)
 rename src/pages/processor/{metadata-fetcher => metadata}/_manifest.json (82%)
 create mode 100644 src/pages/processor/metadata/index.astro
 create mode 100644 src/pages/processor/metadata/types.d.ts

diff --git a/deno.lock b/deno.lock
index 894e6a1..699ced6 100644
--- a/deno.lock
+++ b/deno.lock
@@ -37,6 +37,7 @@
         "npm:idb-keyval@^6.2.1",
         "npm:music-metadata@^11.2.3",
         "npm:native-file-system-adapter@^3.0.1",
+        "npm:netlify@^22.1.0",
         "npm:purgecss@^7.0.2",
         "npm:query-string@^9.1.2",
         "npm:sass@^1.87.0",
diff --git a/src/pages/configurator/input/_applet.astro b/src/pages/configurator/input/_applet.astro
index 1397ebb..c372d52 100644
--- a/src/pages/configurator/input/_applet.astro
+++ b/src/pages/configurator/input/_applet.astro
@@ -36,48 +36,46 @@
   ////////////////////////////////////////////
   // SETUP
   ////////////////////////////////////////////
-  const context = register<{ ready: boolean }>();
-
-  // Initial state
-  context.data = {
-    ready: false,
-  };
+  const context = register();
 
   // Applet connections
   const input = {
-    nativeFs: await applet("../../input/native-fs"),
-    s3: await applet("../../input/s3"),
+    nativeFs: applet("../../input/native-fs"),
+    s3: applet("../../input/s3"),
   };
 
   ////////////////////////////////////////////
   // ACTIONS
   ////////////////////////////////////////////
   const contextualize = async (tracks: Track[]) => {
-    await input.s3.sendAction("contextualize", tracks);
+    const s3 = await input.s3;
+    await s3.sendAction("contextualize", tracks, { timeoutDuration: 60000 * 5 });
   };
 
   const list = async (cachedTracks: Track[] = []) => {
+    const [nativeFs, s3] = [await input.nativeFs, await input.s3];
+
     const groups = cachedTracks.reduce(
       (acc: Record<string, Track[]>, track: Track) => {
         const scheme = track.uri.split(":", 1)[0];
         return { ...acc, [scheme]: [...(acc[scheme] || []), track] };
       },
       {
-        [input.nativeFs.manifest.input_properties.scheme]: [],
-        [input.s3.manifest.input_properties.scheme]: [],
+        [nativeFs.manifest.input_properties.scheme]: [],
+        [s3.manifest.input_properties.scheme]: [],
       },
     );
 
     const promises = Object.entries(groups).map(
       async ([scheme, cachedTracksGroup]: [string, Track[]]) => {
         switch (scheme) {
-          case input.nativeFs.manifest.input_properties.scheme:
-            return await input.nativeFs.sendAction("list", cachedTracksGroup, {
+          case nativeFs.manifest.input_properties.scheme:
+            return await nativeFs.sendAction("list", cachedTracksGroup, {
               timeoutDuration: 60000 * 60 * 24,
             });
 
-          case input.s3.manifest.input_properties.scheme:
-            return await input.s3.sendAction("list", cachedTracksGroup, {
+          case s3.manifest.input_properties.scheme:
+            return await s3.sendAction("list", cachedTracksGroup, {
               timeoutDuration: 60000 * 60 * 24,
             });
 
@@ -94,14 +92,15 @@
   };
 
   const resolve = async (args: { method: string; uri: string }) => {
+    const [nativeFs, s3] = [await input.nativeFs, await input.s3];
     const scheme = args.uri.split(":", 1)[0];
 
     switch (scheme) {
-      case input.nativeFs.manifest.input_properties.scheme:
-        return await input.nativeFs.sendAction("resolve", args);
+      case nativeFs.manifest.input_properties.scheme:
+        return await nativeFs.sendAction("resolve", args);
 
-      case input.s3.manifest.input_properties.scheme:
-        return await input.s3.sendAction("resolve", args);
+      case s3.manifest.input_properties.scheme:
+        return await s3.sendAction("resolve", args);
 
       default:
         return undefined;
@@ -111,9 +110,4 @@
   context.setActionHandler("contextualize", contextualize);
   context.setActionHandler("list", list);
   context.setActionHandler("resolve", resolve);
-
-  ////////////////////////////////////////////
-  // 🚦
-  ////////////////////////////////////////////
-  context.data = { ready: true };
 </script>
diff --git a/src/pages/configurator/input/_manifest.json b/src/pages/configurator/input/_manifest.json
index 35d5a85..e0101bf 100644
--- a/src/pages/configurator/input/_manifest.json
+++ b/src/pages/configurator/input/_manifest.json
@@ -5,6 +5,7 @@
   "actions": {
     "contextualize": {
       "title": "Contextualize",
+      "description": "Provide context to all inputs.",
       "params_schema": {
         "type": "array",
         "description": "Array of tracks",
diff --git a/src/pages/configurator/output/_applet.astro b/src/pages/configurator/output/_applet.astro
index 2ece121..250022b 100644
--- a/src/pages/configurator/output/_applet.astro
+++ b/src/pages/configurator/output/_applet.astro
@@ -81,6 +81,10 @@
   // Applet connections
   const connections: Record<string, Applet<ManagedOutput>> = {};
 
+  // Initial state
+  context.data = INITIAL_MANAGED_OUTPUT;
+
+  // Applet connections
   async function connection(method: Method) {
     if (connections[method]) return connections[method];
 
@@ -98,9 +102,6 @@
     return connections[method];
   }
 
-  // Initial state
-  context.data = INITIAL_MANAGED_OUTPUT;
-
   // Signals
   const stored = localStorage.getItem(LOCALSTORAGE_KEY);
   const [active, setActive] = signal<Method>(
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6bd54cc..ad4bab1 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -60,7 +60,7 @@ const output = [
 
 const processors = [
   { url: "processor/artwork/", title: "(TODO) Artwork fetcher" },
-  { url: "processor/metadata-fetcher/", title: "Metadata fetcher" },
+  { url: "processor/metadata/", title: "Metadata fetcher" },
 ];
 ---
 
diff --git a/src/pages/orchestrator/input-cache/_applet.astro b/src/pages/orchestrator/input-cache/_applet.astro
index e324788..a986ec0 100644
--- a/src/pages/orchestrator/input-cache/_applet.astro
+++ b/src/pages/orchestrator/input-cache/_applet.astro
@@ -1,38 +1,33 @@
 <script>
   import type { ManagedOutput, ResolvedUri, Track } from "@applets/core/types.d.ts";
-
-  import {
-    applet,
-    register,
-    waitUntilAppletData,
-    waitUntilAppletIsReady,
-  } from "@scripts/applets/common";
+  import { applet, register, waitUntilAppletData } from "@scripts/applets/common";
 
   ////////////////////////////////////////////
   // SETUP
   ////////////////////////////////////////////
-  const context = register<{ isProcessing: boolean; ready: boolean }>();
+  const context = register<{ isProcessing: boolean }>();
 
   // Initial data
   context.data = {
     isProcessing: false,
-    ready: false,
   };
 
   // Applet connections
   const configurator = {
-    input: await applet("../../configurator/input"),
-    output: await applet<ManagedOutput>("../../configurator/output"),
+    input: applet("../../configurator/input"),
+    output: applet<ManagedOutput>("../../configurator/output"),
   };
 
   const processor = {
-    metadataFetcher: await applet("../../processor/metadata-fetcher"),
+    metadata: applet("../../processor/metadata"),
   };
 
-  // 🚀
-  waitUntilAppletData(configurator.output, (d) => d?.tracks.state === "loaded").then(() =>
-    process(),
-  );
+  // Start processing when tracks are loaded
+  configurator.output
+    .then((output) => {
+      return waitUntilAppletData(output, (d) => d?.tracks.state === "loaded");
+    })
+    .then(process);
 
   ////////////////////////////////////////////
   // ACTIONS
@@ -44,12 +39,15 @@
     context.data = { ...context.data, isProcessing: true };
     console.log("🪵 Processing initiated");
 
-    await waitUntilAppletIsReady(configurator.input);
+    const input = await configurator.input;
+    const output = await configurator.output;
 
-    const cachedTracks = configurator.output.data.tracks.collection;
-    await configurator.input.sendAction("contextualize", cachedTracks);
+    const cachedTracks = output.data.tracks.collection;
+    await input.sendAction("contextualize", cachedTracks, {
+      timeoutDuration: 60000 * 5,
+    });
 
-    const tracks = await configurator.input.sendAction<Track[]>("list", cachedTracks, {
+    const tracks = await input.sendAction<Track[]>("list", cachedTracks, {
       timeoutDuration: 60000 * 60 * 24,
     });
 
@@ -60,7 +58,7 @@
 
         if (track.tags && track.stats) return [...acc, track];
 
-        const resGet = await configurator.input.sendAction<ResolvedUri>(
+        const resGet = await input.sendAction<ResolvedUri>(
           "resolve",
           { method: "GET", uri: track.uri },
           {
@@ -68,7 +66,7 @@
           },
         );
 
-        const resHead = await configurator.input.sendAction<ResolvedUri>(
+        const resHead = await input.sendAction<ResolvedUri>(
           "resolve",
           { method: "HEAD", uri: track.uri },
           {
@@ -78,7 +76,8 @@
 
         if (!resGet) return acc;
 
-        const { stats, tags } = await processor.metadataFetcher.sendAction(
+        const metadataProcessor = await processor.metadata;
+        const { stats, tags } = await metadataProcessor.sendAction(
           "extract",
           { urls: { get: resGet.url, head: resHead?.url || resGet.url } },
           {
@@ -94,7 +93,7 @@
     );
 
     // Save
-    await configurator.output.sendAction("tracks", tracksWithMetadata, {
+    await output.sendAction("tracks", tracksWithMetadata, {
       timeoutDuration: 60000 * 5,
     });
 
@@ -102,9 +101,4 @@
     console.log("🪵 Processing completed");
     context.data = { ...context.data, isProcessing: false };
   }
-
-  ////////////////////////////////////////////
-  // 🚦
-  ////////////////////////////////////////////
-  context.data = { ...context.data, ready: true };
 </script>
diff --git a/src/pages/orchestrator/single-queue/_applet.astro b/src/pages/orchestrator/single-queue/_applet.astro
index 2616e6e..e613a37 100644
--- a/src/pages/orchestrator/single-queue/_applet.astro
+++ b/src/pages/orchestrator/single-queue/_applet.astro
@@ -31,10 +31,16 @@
     const queueItems = await tracks.reduce(
       async (promise: Promise<QueueEngine.QueueItem[]>, track: Track) => {
         const acc = await promise;
-        const res = await configurator.input.sendAction<ResolvedUri>("resolve", {
-          method: "GET",
-          uri: track.uri,
-        });
+        const res = await configurator.input.sendAction<ResolvedUri>(
+          "resolve",
+          {
+            method: "GET",
+            uri: track.uri,
+          },
+          {
+            timeoutDuration: 60000 * 5,
+          },
+        );
 
         if (!res) return acc;
 
diff --git a/src/pages/processor/artwork/_applet.astro b/src/pages/processor/artwork/_applet.astro
new file mode 100644
index 0000000..3094b09
--- /dev/null
+++ b/src/pages/processor/artwork/_applet.astro
@@ -0,0 +1,76 @@
+<script>
+  import * as IDB from "idb-keyval";
+
+  import { applet, register } from "@scripts/applets/common";
+  import type { ArtworkRequest, State } from "./types.d.ts";
+
+  ////////////////////////////////////////////
+  // SETUP
+  ////////////////////////////////////////////
+  const IDB_PREFIX = "@applets/processor/artwork";
+
+  const context = register<State>();
+  let queue: ArtworkRequest[] = [];
+
+  // Initial data
+  context.data = {
+    artwork: [],
+  };
+
+  // Applet connections
+  const processor = {
+    metadata: applet("../../processor/metadata"),
+  };
+
+  // Load already-downloaded artwork
+  IDB.keys().then((keys) => {
+    console.log(keys);
+    const artworkKeys = keys.filter((k) => k.toString().startsWith(`${IDB_PREFIX}/artwork/`));
+  });
+
+  ////////////////////////////////////////////
+  // ACTIONS
+  ////////////////////////////////////////////
+  function supply(items: ArtworkRequest[]) {
+    const exe = !queue[0];
+    queue = [...queue, ...items];
+    console.log("supply", queue);
+    if (exe) shiftQueue();
+  }
+
+  context.setActionHandler("supply", supply);
+
+  ////////////////////////////////////////////
+  // 🛠️
+  ////////////////////////////////////////////
+  async function shiftQueue() {
+    const next = queue.shift();
+    if (!next) return;
+
+    // Check if already processed
+    const cache = await IDB.get(`${IDB_PREFIX}/${next.cacheId}`);
+    if (cache) return;
+
+    // 🚀
+    let art: Uint8Array | undefined;
+
+    // Get metadata + possible artwork from file metadata
+    const proc = await processor.metadata;
+    const meta = await proc.sendAction("supply", { ...next, includeArtwork: true });
+
+    //
+    art = meta.artwork?.sort((a: any, b: any) => {
+      if (a.data.length > b.data.length) return -1;
+      if (a.data.length < b.data.length) return 1;
+      return 0;
+    })?.[0]?.data;
+
+    console.log(art);
+
+    // Save artwork to IDB
+    await IDB.set(`${IDB_PREFIX}/${next.cacheId}`, art || "TRIED");
+
+    // 🏹
+    shiftQueue();
+  }
+</script>
diff --git a/src/pages/processor/artwork/_manifest.json b/src/pages/processor/artwork/_manifest.json
new file mode 100644
index 0000000..95a62a2
--- /dev/null
+++ b/src/pages/processor/artwork/_manifest.json
@@ -0,0 +1,38 @@
+{
+  "name": "diffuse/processor/artwork",
+  "title": "Diffuse Processor | Artwork fetcher",
+  "description": "Tries to get artwork for a given URL or stream.",
+  "entrypoint": "index.html",
+  "actions": {
+    "supply": {
+      "title": "Supply",
+      "description": "Get the artwork for a given URL.",
+      "params_schema": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "cacheId": {
+              "type": "string"
+            },
+            "mimeType": {
+              "type": "string"
+            },
+            "stream": {
+              "type": "object"
+            },
+            "urls": {
+              "type": "object",
+              "properties": {
+                "get": { "type": "string" },
+                "head": { "type": "string" }
+              },
+              "required": ["get", "head"]
+            }
+          },
+          "required": ["cacheId"]
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/processor/metadata-fetcher/index.astro b/src/pages/processor/artwork/index.astro
similarity index 100%
rename from src/pages/processor/metadata-fetcher/index.astro
rename to src/pages/processor/artwork/index.astro
diff --git a/src/pages/processor/artwork/types.d.ts b/src/pages/processor/artwork/types.d.ts
new file mode 100644
index 0000000..666bfbe
--- /dev/null
+++ b/src/pages/processor/artwork/types.d.ts
@@ -0,0 +1,14 @@
+export type Artwork = {};
+
+export type ArtworkRequest = {
+  cacheId: string;
+  mimeType?: string;
+  stream?: ReadableStream;
+  urls?: Urls;
+};
+
+export type State = {
+  artwork: Artwork[];
+};
+
+export type Urls = { get: string; head: string };
diff --git a/src/pages/processor/metadata-fetcher/_applet.astro b/src/pages/processor/metadata/_applet.astro
similarity index 86%
rename from src/pages/processor/metadata-fetcher/_applet.astro
rename to src/pages/processor/metadata/_applet.astro
index abb286c..c0b21f9 100644
--- a/src/pages/processor/metadata-fetcher/_applet.astro
+++ b/src/pages/processor/metadata/_applet.astro
@@ -1,11 +1,12 @@
 <script>
-  import { type IPicture, parseFromTokenizer, parseWebStream } from "music-metadata";
+  import { parseFromTokenizer, parseWebStream } from "music-metadata";
   import { contentType } from "@std/media-types";
   import * as URI from "uri-js";
   import * as HTTP_TOKENIZER from "@tokenizer/http";
   import * as RANGE_TOKENIZER from "@tokenizer/range";
 
   import type { TrackStats, TrackTags } from "@applets/core/types";
+  import type { Extraction, Urls } from "./types.d.ts";
   import { register } from "@scripts/applets/common";
 
   ////////////////////////////////////////////
@@ -13,15 +14,12 @@
   ////////////////////////////////////////////
   const context = register();
 
-  type Extraction = { artwork?: IPicture[]; stats: TrackStats; tags: TrackTags };
-  type Urls = { get: string; head: string };
-
   ////////////////////////////////////////////
   // ACTIONS
   ////////////////////////////////////////////
-  context.setActionHandler("extract", extract);
+  context.setActionHandler("supply", supply);
 
-  async function extract(args: {
+  async function supply(args: {
     includeArtwork?: boolean;
     mimeType?: string;
     stream?: ReadableStream;
@@ -29,13 +27,15 @@
   }) {
     // Construct records
     // TODO: Use other metadata lib as fallback: https://github.com/buzz/mediainfo.js
-    const { stats, tags } = await musicMetadataTags(args).catch(() => ({
-      stats: undefined,
-      tags: undefined,
-    }));
+    const response = await musicMetadataTags(args).catch((err): Extraction => {
+      console.warn("Metadata processor error:", err);
+      console.log(args);
+
+      return {};
+    });
 
     // Fin
-    return { stats, tags };
+    return response;
   }
 
   ////////////////////////////////////////////
diff --git a/src/pages/processor/metadata-fetcher/_manifest.json b/src/pages/processor/metadata/_manifest.json
similarity index 82%
rename from src/pages/processor/metadata-fetcher/_manifest.json
rename to src/pages/processor/metadata/_manifest.json
index acb48bb..715b945 100644
--- a/src/pages/processor/metadata-fetcher/_manifest.json
+++ b/src/pages/processor/metadata/_manifest.json
@@ -1,11 +1,11 @@
 {
-  "name": "diffuse/processor/metadata-fetcher",
+  "name": "diffuse/processor/metadata",
   "title": "Diffuse Processor | Metadata fetcher",
   "entrypoint": "index.html",
   "actions": {
-    "extract": {
-      "title": "Extract",
-      "description": "Get the metadata for a given URL.",
+    "supply": {
+      "title": "Supply",
+      "description": "Get the metadata for a given URL or stream.",
       "params_schema": {
         "type": "object",
         "properties": {
diff --git a/src/pages/processor/metadata/index.astro b/src/pages/processor/metadata/index.astro
new file mode 100644
index 0000000..dfb1e1a
--- /dev/null
+++ b/src/pages/processor/metadata/index.astro
@@ -0,0 +1,9 @@
+---
+import Layout from "@layouts/applet.astro";
+import Applet from "./_applet.astro";
+import { title } from "./_manifest.json";
+---
+
+<Layout title={title}>
+  <Applet />
+</Layout>
diff --git a/src/pages/processor/metadata/types.d.ts b/src/pages/processor/metadata/types.d.ts
new file mode 100644
index 0000000..e0ef7e6
--- /dev/null
+++ b/src/pages/processor/metadata/types.d.ts
@@ -0,0 +1,5 @@
+import type { IPicture } from "music-metadata";
+import type { TrackStats, TrackTags } from "@applets/core/types";
+
+export type Extraction = { artwork?: IPicture[]; stats?: TrackStats; tags?: TrackTags };
+export type Urls = { get: string; head: string };
diff --git a/src/scripts/applets/common.ts b/src/scripts/applets/common.ts
index 781b543..6a96566 100644
--- a/src/scripts/applets/common.ts
+++ b/src/scripts/applets/common.ts
@@ -98,8 +98,9 @@ export type BroadcastedApplet<T> = {
 };
 
 export function register<DataType = any>() {
-  const id = `${location.host}${location.pathname}`;
+  const channelId = `${location.host}${location.pathname}`;
   const scope = applets.register<DataType>();
+  const id = crypto.randomUUID();
 
   let isMainInstance = true;
 
@@ -110,22 +111,48 @@ export function register<DataType = any>() {
   //
   // Actions are performed on the main instance,
   // and data is replicated from main to the other instances.
-  const channel = new BroadcastChannel(id);
+  const channel = new BroadcastChannel(channelId);
 
   channel.addEventListener("message", async (event) => {
-    if (event.data === "PING") {
-      channel.postMessage("PONG");
-    } else if (event.data?.type === "data") {
-      scope.data = context.codec.decode(event.data.data);
-    } else if (event.data === "PONG") {
-      isMainInstance = false;
-    } else if (isMainInstance && event.data?.type === "action" && event.data?.actionId) {
-      const result = await scope.actionHandlers[event.data.actionId]?.(...event.data.arguments);
-      channel.postMessage({
-        type: "actioncomplete",
-        id: event.data.id,
-        result,
-      });
+    switch (event.data?.type) {
+      case "PING": {
+        channel.postMessage({
+          type: "PONG",
+          id: event.data.id,
+        });
+
+        if (isMainInstance) {
+          channel.postMessage({
+            type: "data",
+            data: context.codec.encode(scope.data),
+          });
+        }
+        break;
+      }
+
+      case "PONG": {
+        if (event.data.id === id) {
+          isMainInstance = false;
+        }
+        break;
+      }
+
+      case "action": {
+        if (isMainInstance) {
+          const result = await scope.actionHandlers[event.data.actionId]?.(...event.data.arguments);
+          channel.postMessage({
+            type: "actioncomplete",
+            id: event.data.id,
+            result,
+          });
+        }
+        break;
+      }
+
+      case "data": {
+        scope.data = context.codec.decode(event.data.data);
+        break;
+      }
     }
   });
 
@@ -148,18 +175,23 @@ export function register<DataType = any>() {
   });
 
   // Send out ping
-  channel.postMessage("PING");
+  channel.postMessage({
+    type: "PING",
+    id,
+  });
 
   // If the data on the main instance changes,
   // pass it on to other instances.
-  scope.ondata = (event) => {
+  scope.addEventListener("data", async (event: AppletEvent) => {
+    await promise;
+
     if (isMainInstance) {
       channel.postMessage({
         type: "data",
         data: context.codec.encode(event.data),
       });
     }
-  };
+  });
 
   // Context
   const context: BroadcastedApplet<DataType> = {
diff --git a/src/scripts/themes/desktop/index.ts b/src/scripts/themes/desktop/index.ts
index 2e4db5d..0e7a8dc 100644
--- a/src/scripts/themes/desktop/index.ts
+++ b/src/scripts/themes/desktop/index.ts
@@ -1,4 +1,5 @@
-import { applet, reactive } from "@scripts/applets/common";
+import * as Uint8 from "uint8arrays";
+import { applet, reactive, waitUntilAppletData } from "@scripts/applets/common";
 
 ////////////////////////////////////////////
 // 🎨 Styles
@@ -10,6 +11,13 @@ import "@styles/themes/desktop/index.css";
 ////////////////////////////////////////////
 import type * as AudioEngine from "@applets/engine/audio/types.d.ts";
 import type * as QueueEngine from "@applets/engine/queue/types.d.ts";
+import type { ManagedOutput } from "@applets/core/types";
+import type { Urls } from "@applets/processor/artwork/types";
+
+const configurator = {
+  input: await applet("../../configurator/input"),
+  output: await applet<ManagedOutput>("../../configurator/output"),
+};
 
 const engine = {
   audio: await applet<AudioEngine.State>("../../engine/audio"),
@@ -21,6 +29,10 @@ const _orchestrator = {
   queue: await applet("../../orchestrator/single-queue"),
 };
 
+const processor = {
+  artwork: await applet("../../processor/artwork"),
+};
+
 const ui = {};
 
 ////////////////////////////////////////////
@@ -36,3 +48,62 @@ const ui = {};
 ////////////////////////////////////////////
 
 // TODO
+
+// 🚀
+
+waitUntilAppletData(configurator.output, (d) => d?.tracks?.state === "loaded").then(async () => {
+  console.log("🚀", configurator.output.data);
+
+  const items = await configurator.output.data.tracks.collection.reduce(
+    async (
+      promise: Promise<{ cacheId: string; urls: Urls }[]>,
+      track,
+    ): Promise<{ cacheId: string; urls: Urls }[]> => {
+      const acc = await promise;
+
+      const urls = {
+        get: await configurator.input
+          .sendAction(
+            "resolve",
+            {
+              method: "GET",
+              uri: track.uri,
+            },
+            {
+              timeoutDuration: 60000 * 5,
+            },
+          )
+          .then((a) => a.url),
+        head: await configurator.input
+          .sendAction(
+            "resolve",
+            {
+              method: "HEAD",
+              uri: track.uri,
+            },
+            {
+              timeoutDuration: 60000 * 5,
+            },
+          )
+          .then((a) => a.url),
+      };
+
+      const cacheId = await crypto.subtle
+        .digest({ name: "SHA-256" }, new TextEncoder().encode(track.uri))
+        .then((a) => Uint8.toString(new Uint8Array(a), "base64"));
+
+      return [
+        ...acc,
+        {
+          cacheId,
+          urls,
+        },
+      ];
+    },
+    Promise.resolve([]),
+  );
+
+  processor.artwork.sendAction("supply", items, {
+    timeoutDuration: 60000 * 120,
+  });
+});
diff --git a/src/scripts/themes/webamp/index.ts b/src/scripts/themes/webamp/index.ts
index fe5c0d7..586627c 100644
--- a/src/scripts/themes/webamp/index.ts
+++ b/src/scripts/themes/webamp/index.ts
@@ -64,7 +64,7 @@ async function loadTracks(): Promise<URLTrack[]> {
         "resolve",
         { method: "GET", uri: track.uri },
         {
-          timeoutDuration: 60000,
+          timeoutDuration: 60000 * 5,
         },
       );
 
-- 
2.51.2