From bdda3f1dc5589ea669cd8d147ccfe3cc9ae7d104 Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Fri, 19 Dec 2025 15:35:07 -0800
Subject: [PATCH] feat: add teal-scrobble manual scrobbling tool

Single-page HTML tool for manually scrobbling tracks to Teal with
MusicBrainz search-as-you-type. Features:

- OAuth login via quickslice-client-js
- Artist search with autocomplete (300ms debounce)
- Track search filtered by selected artist
- Auto-fill album and duration from MusicBrainz
- Time toggle for "now" or custom datetime
- Recent scrobbles section showing last 3 plays
- Keyboard navigation and click-outside for dropdowns
- Dark music theme matching teal-plays
---
 index.html         |   16 +-
 tangled-repos.html |   22 +-
 teal-scrobble.html | 1226 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 1257 insertions(+), 7 deletions(-)
 create mode 100644 teal-scrobble.html

diff --git a/index.html b/index.html
index fa72630..84c1274 100644
--- a/index.html
+++ b/index.html
@@ -133,7 +133,12 @@
           </g>
         </svg>
         <h1>Tools</h1>
-        <qs-tangled-stars handle="slices.network" repo="tools" instance="https://quickslice-production-ddc3.up.railway.app" style="margin-bottom: 0.75rem;"></qs-tangled-stars>
+        <qs-tangled-stars
+          handle="slices.network"
+          repo="tools"
+          instance="https://quickslice-production-ddc3.up.railway.app"
+          style="margin-bottom: 0.75rem"
+        ></qs-tangled-stars>
         <p class="tagline">Apps for the Atmosphere</p>
       </header>
       <main class="tools-list">
@@ -146,6 +151,15 @@
             Live music feed from the Atmosphere. See what everyone is listening to in real-time.
           </div>
         </a>
+        <a href="teal-scrobble" class="tool-card">
+          <div class="tool-header">
+            <span class="tool-icon">🎧</span>
+            <span class="tool-name">Teal Scrobble</span>
+          </div>
+          <div class="tool-description">
+            Manually log what you're listening to. Search MusicBrainz and scrobble to Teal.
+          </div>
+        </a>
         <a href="statusphere" class="tool-card">
           <div class="tool-header">
             <span class="tool-icon">😎</span>
diff --git a/tangled-repos.html b/tangled-repos.html
index 5294c16..a4ac420 100644
--- a/tangled-repos.html
+++ b/tangled-repos.html
@@ -501,12 +501,23 @@
         <p class="tagline">Browse repositories from the Atmosphere</p>
       </header>
       <div class="search-container">
-        <input type="text" id="search-input" placeholder="Search... (@user, repo:name, topic:rust)" />
+        <input
+          type="text"
+          id="search-input"
+          placeholder="Search... (@user, repo:name, topic:rust)"
+        />
         <button id="clear-search" class="hidden" title="Clear search">&times;</button>
       </div>
       <div id="trending-section" class="trending-section hidden">
         <div class="trending-header">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
             <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
             <polyline points="17 6 23 6 23 12"></polyline>
           </svg>
@@ -712,9 +723,7 @@
         }
 
         // Sort by star count and return top 10
-        const sorted = [...starCounts.entries()]
-          .sort((a, b) => b[1] - a[1])
-          .slice(0, 10);
+        const sorted = [...starCounts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 10);
 
         return sorted.map(([uri, count]) => ({
           ...repoData.get(uri),
@@ -985,7 +994,8 @@
         clearBtn.addEventListener("click", clearSearch);
 
         // Show loading state
-        document.getElementById("repo-feed").innerHTML = `<div class="loading-container"><div class="spinner"></div><span>Loading repos...</span></div>`;
+        document.getElementById("repo-feed").innerHTML =
+          `<div class="loading-container"><div class="spinner"></div><span>Loading repos...</span></div>`;
 
         // Load both in parallel
         const [reposResult, trendingResult] = await Promise.allSettled([
diff --git a/teal-scrobble.html b/teal-scrobble.html
new file mode 100644
index 0000000..ca73258
--- /dev/null
+++ b/teal-scrobble.html
@@ -0,0 +1,1226 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline'; connect-src 'self' https://fmteal.slices.network https://musicbrainz.org; img-src 'self' https: data:;"
+    />
+    <title>Teal Scrobble</title>
+    <style>
+      /* CSS Reset */
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      * {
+        margin: 0;
+      }
+      body {
+        line-height: 1.5;
+        -webkit-font-smoothing: antialiased;
+      }
+      input,
+      button {
+        font: inherit;
+      }
+
+      /* Dark Music Theme */
+      :root {
+        --bg-primary: #0a0a0a;
+        --bg-card: #161616;
+        --bg-hover: #1f1f1f;
+        --bg-input: #1a1a1a;
+        --text-primary: #ffffff;
+        --text-secondary: #a0a0a0;
+        --accent: #1db954;
+        --accent-hover: #1ed760;
+        --border: #2a2a2a;
+        --error-bg: #2d1f1f;
+        --error-border: #5c2828;
+        --error-text: #ff6b6b;
+        --success-bg: #1f2d1f;
+        --success-border: #285c28;
+        --success-text: #6bff6b;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        background: var(--bg-primary);
+        color: var(--text-primary);
+        min-height: 100vh;
+        padding: 2rem 1rem;
+      }
+
+      #app {
+        max-width: 500px;
+        margin: 0 auto;
+      }
+
+      header {
+        text-align: center;
+        margin-bottom: 1.5rem;
+      }
+
+      header h1 {
+        font-size: 2rem;
+        color: var(--accent);
+        margin-bottom: 0.25rem;
+      }
+
+      .tagline {
+        color: var(--text-secondary);
+        font-size: 0.875rem;
+      }
+
+      .card {
+        background: var(--bg-card);
+        border-radius: 0.5rem;
+        padding: 1.25rem;
+        margin-bottom: 1rem;
+        border: 1px solid var(--border);
+      }
+
+      .card-title {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--text-secondary);
+        margin-bottom: 1rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      /* Form Styles */
+      .form-group {
+        margin-bottom: 1rem;
+      }
+
+      .form-group:last-child {
+        margin-bottom: 0;
+      }
+
+      .form-group label {
+        display: block;
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--text-secondary);
+        margin-bottom: 0.375rem;
+      }
+
+      .form-group input {
+        width: 100%;
+        padding: 0.75rem;
+        background: var(--bg-input);
+        border: 1px solid var(--border);
+        border-radius: 0.375rem;
+        color: var(--text-primary);
+        font-size: 1rem;
+      }
+
+      .form-group input:focus {
+        outline: none;
+        border-color: var(--accent);
+      }
+
+      .form-group input:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .form-group input::placeholder {
+        color: var(--text-secondary);
+        opacity: 0.6;
+      }
+
+      .form-row {
+        display: flex;
+        gap: 1rem;
+      }
+
+      .form-row .form-group {
+        flex: 1;
+      }
+
+      .read-only {
+        background: var(--bg-hover);
+        cursor: default;
+      }
+
+      /* Autocomplete Dropdown */
+      .autocomplete-wrapper {
+        position: relative;
+      }
+
+      .autocomplete-dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: var(--bg-card);
+        border: 1px solid var(--border);
+        border-top: none;
+        border-radius: 0 0 0.375rem 0.375rem;
+        max-height: 240px;
+        overflow-y: auto;
+        z-index: 10;
+      }
+
+      .autocomplete-dropdown.hidden {
+        display: none;
+      }
+
+      .autocomplete-item {
+        padding: 0.75rem;
+        cursor: pointer;
+        border-bottom: 1px solid var(--border);
+      }
+
+      .autocomplete-item:last-child {
+        border-bottom: none;
+      }
+
+      .autocomplete-item:hover,
+      .autocomplete-item.selected {
+        background: var(--bg-hover);
+      }
+
+      .autocomplete-item-title {
+        font-weight: 500;
+        color: var(--text-primary);
+      }
+
+      .autocomplete-item-subtitle {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+      }
+
+      .autocomplete-status {
+        padding: 0.75rem;
+        color: var(--text-secondary);
+        font-size: 0.875rem;
+        text-align: center;
+      }
+
+      /* Selected Tag */
+      .selected-tag {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        background: var(--bg-hover);
+        border: 1px solid var(--accent);
+        border-radius: 0.375rem;
+        padding: 0.5rem 0.75rem;
+        color: var(--text-primary);
+      }
+
+      .selected-tag button {
+        background: none;
+        border: none;
+        color: var(--text-secondary);
+        cursor: pointer;
+        font-size: 1.25rem;
+        line-height: 1;
+        padding: 0;
+      }
+
+      .selected-tag button:hover {
+        color: var(--error-text);
+      }
+
+      /* Buttons */
+      .btn {
+        padding: 0.75rem 1.5rem;
+        border: none;
+        border-radius: 0.375rem;
+        font-size: 1rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition:
+          background-color 0.15s,
+          opacity 0.15s;
+        width: 100%;
+      }
+
+      .btn-primary {
+        background: var(--accent);
+        color: var(--bg-primary);
+      }
+
+      .btn-primary:hover {
+        background: var(--accent-hover);
+      }
+
+      .btn-primary:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .btn-secondary {
+        background: var(--bg-hover);
+        color: var(--text-primary);
+        border: 1px solid var(--border);
+      }
+
+      .btn-secondary:hover {
+        background: var(--border);
+      }
+
+      /* User Card */
+      .user-card {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .user-info {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      }
+
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: var(--bg-hover);
+        overflow: hidden;
+      }
+
+      .user-avatar img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .user-name {
+        font-weight: 600;
+      }
+
+      .user-handle {
+        font-size: 0.875rem;
+        color: var(--text-secondary);
+      }
+
+      /* Time Toggle */
+      .time-toggle {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 0.5rem;
+      }
+
+      .time-toggle label {
+        margin-bottom: 0;
+      }
+
+      .toggle-switch {
+        position: relative;
+        width: 44px;
+        height: 24px;
+        background: var(--bg-hover);
+        border-radius: 12px;
+        cursor: pointer;
+        transition: background-color 0.2s;
+      }
+
+      .toggle-switch.active {
+        background: var(--accent);
+      }
+
+      .toggle-switch::after {
+        content: "";
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 20px;
+        height: 20px;
+        background: var(--text-primary);
+        border-radius: 50%;
+        transition: transform 0.2s;
+      }
+
+      .toggle-switch.active::after {
+        transform: translateX(20px);
+      }
+
+      /* Recent Scrobbles */
+      .recent-item {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.75rem 0;
+        border-bottom: 1px solid var(--border);
+      }
+
+      .recent-item:last-child {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+
+      .recent-item:first-child {
+        padding-top: 0;
+      }
+
+      .recent-info {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .recent-track {
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .recent-artist {
+        font-size: 0.875rem;
+        color: var(--text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .recent-time {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+        flex-shrink: 0;
+      }
+
+      /* Toast */
+      #toast {
+        position: fixed;
+        bottom: 2rem;
+        left: 50%;
+        transform: translateX(-50%);
+        padding: 0.75rem 1.5rem;
+        border-radius: 0.5rem;
+        font-weight: 500;
+        z-index: 100;
+        transition: opacity 0.3s;
+      }
+
+      #toast.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      #toast.success {
+        background: var(--success-bg);
+        border: 1px solid var(--success-border);
+        color: var(--success-text);
+      }
+
+      #toast.error {
+        background: var(--error-bg);
+        border: 1px solid var(--error-border);
+        color: var(--error-text);
+      }
+
+      /* Spinner */
+      .spinner {
+        width: 20px;
+        height: 20px;
+        border: 2px solid var(--border);
+        border-top-color: var(--bg-primary);
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      .hidden {
+        display: none !important;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <header>
+        <h1>Teal Scrobble</h1>
+        <p class="tagline">Manually log what you're listening to</p>
+      </header>
+      <main>
+        <div id="auth-section"></div>
+        <div id="scrobble-form"></div>
+        <div id="recent-scrobbles"></div>
+      </main>
+      <div id="toast" class="hidden"></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/gh/bigmoves/quickslice@main/quickslice-client-js/dist/quickslice-client.min.js"></script>
+    <script>
+      // =============================================================================
+      // CONFIGURATION
+      // =============================================================================
+
+      const SERVER_URL = "https://fmteal.slices.network";
+      const CLIENT_ID = "client_B6LdE1mw4EM-YT7gS5d6yw";
+
+      // =============================================================================
+      // STATE
+      // =============================================================================
+
+      const state = {
+        client: null,
+        user: null,
+        selectedArtist: null,
+        selectedRecording: null,
+        recentScrobbles: [],
+        isSubmitting: false,
+        useCustomTime: false,
+      };
+
+      // =============================================================================
+      // HELPERS
+      // =============================================================================
+
+      function esc(str) {
+        const d = document.createElement("div");
+        d.textContent = str;
+        return d.innerHTML;
+      }
+
+      function showToast(message, type = "success") {
+        const toast = document.getElementById("toast");
+        toast.textContent = message;
+        toast.className = type;
+        setTimeout(() => toast.classList.add("hidden"), 3000);
+      }
+
+      // =============================================================================
+      // MUSICBRAINZ API
+      // =============================================================================
+
+      let searchTimeout = null;
+      const MB_API = "https://musicbrainz.org/ws/2";
+      const MB_HEADERS = { Accept: "application/json" };
+
+      async function searchArtists(query) {
+        if (query.length < 2) return [];
+
+        const url = `${MB_API}/artist?query=${encodeURIComponent(query)}&fmt=json&limit=5`;
+        const res = await fetch(url, { headers: MB_HEADERS });
+
+        if (!res.ok) throw new Error("MusicBrainz search failed");
+
+        const data = await res.json();
+        return data.artists || [];
+      }
+
+      async function searchRecordings(query, artistMbid) {
+        if (query.length < 2) return [];
+
+        const fullQuery = `${query} AND arid:${artistMbid}`;
+        const url = `${MB_API}/recording?query=${encodeURIComponent(fullQuery)}&fmt=json&limit=8`;
+        const res = await fetch(url, { headers: MB_HEADERS });
+
+        if (!res.ok) throw new Error("MusicBrainz search failed");
+
+        const data = await res.json();
+        return data.recordings || [];
+      }
+
+      function debounce(fn, ms) {
+        return (...args) => {
+          clearTimeout(searchTimeout);
+          searchTimeout = setTimeout(() => fn(...args), ms);
+        };
+      }
+
+      // =============================================================================
+      // INITIALIZATION
+      // =============================================================================
+
+      async function main() {
+        // Handle OAuth callback
+        if (window.location.search.includes("code=")) {
+          if (!CLIENT_ID) {
+            showToast("CLIENT_ID not configured", "error");
+            renderLoginForm();
+            return;
+          }
+
+          try {
+            state.client = await QuicksliceClient.createQuicksliceClient({
+              server: SERVER_URL,
+              clientId: CLIENT_ID,
+            });
+            await state.client.handleRedirectCallback();
+            window.history.replaceState({}, "", window.location.pathname);
+          } catch (error) {
+            console.error("OAuth callback error:", error);
+            showToast("Authentication failed", "error");
+            renderLoginForm();
+            return;
+          }
+        } else if (CLIENT_ID) {
+          try {
+            state.client = await QuicksliceClient.createQuicksliceClient({
+              server: SERVER_URL,
+              clientId: CLIENT_ID,
+            });
+          } catch (error) {
+            console.error("Failed to initialize client:", error);
+          }
+        }
+
+        await renderApp();
+      }
+
+      async function renderApp() {
+        const isLoggedIn = state.client && (await state.client.isAuthenticated());
+
+        if (isLoggedIn) {
+          try {
+            state.user = await fetchViewer();
+            renderUserCard();
+            renderScrobbleForm();
+            await loadRecentScrobbles();
+          } catch (error) {
+            console.error("Failed to load user data:", error);
+            renderLoginForm();
+          }
+        } else {
+          renderLoginForm();
+          document.getElementById("scrobble-form").innerHTML = "";
+          document.getElementById("recent-scrobbles").innerHTML = "";
+        }
+      }
+
+      // =============================================================================
+      // DATA FETCHING
+      // =============================================================================
+
+      async function fetchViewer() {
+        const query = `
+          query {
+            viewer {
+              did
+              handle
+              appBskyActorProfileByDid {
+                displayName
+                avatar { url(preset: "avatar") }
+              }
+            }
+          }
+        `;
+        const data = await state.client.query(query);
+        return data?.viewer;
+      }
+
+      // =============================================================================
+      // EVENT HANDLERS
+      // =============================================================================
+
+      async function handleLogin(event) {
+        event.preventDefault();
+        const handle = document.getElementById("handle").value.trim();
+
+        if (!handle) {
+          showToast("Please enter your handle", "error");
+          return;
+        }
+
+        try {
+          state.client = await QuicksliceClient.createQuicksliceClient({
+            server: SERVER_URL,
+            clientId: CLIENT_ID,
+          });
+          await state.client.loginWithRedirect({ handle });
+        } catch (error) {
+          showToast("Login failed: " + error.message, "error");
+        }
+      }
+
+      function handleLogout() {
+        if (state.client) {
+          state.client.logout();
+        }
+        window.location.reload();
+      }
+
+      // =============================================================================
+      // RENDERING
+      // =============================================================================
+
+      function renderLoginForm() {
+        const container = document.getElementById("auth-section");
+
+        if (!CLIENT_ID) {
+          container.innerHTML = `
+            <div class="card">
+              <p style="color: var(--error-text); text-align: center; margin-bottom: 0.5rem;">
+                <strong>Configuration Required</strong>
+              </p>
+              <p style="color: var(--text-secondary); text-align: center; font-size: 0.875rem;">
+                Set the <code style="background: var(--bg-hover); padding: 0.125rem 0.375rem; border-radius: 0.25rem;">CLIENT_ID</code> constant in this file.
+              </p>
+            </div>
+          `;
+          return;
+        }
+
+        container.innerHTML = `
+          <div class="card">
+            <form onsubmit="handleLogin(event)">
+              <div class="form-group">
+                <label for="handle">Bluesky Handle</label>
+                <input type="text" id="handle" placeholder="you.bsky.social" required />
+              </div>
+              <button type="submit" class="btn btn-primary">Login with Teal</button>
+            </form>
+          </div>
+        `;
+      }
+
+      function renderUserCard() {
+        const container = document.getElementById("auth-section");
+        const profile = state.user?.appBskyActorProfileByDid;
+        const displayName = profile?.displayName || state.user?.handle || "User";
+        const handle = state.user?.handle || "unknown";
+        const avatar = profile?.avatar?.url || "";
+
+        container.innerHTML = `
+          <div class="card user-card">
+            <div class="user-info">
+              <div class="user-avatar">
+                ${avatar ? `<img src="${esc(avatar)}" alt="">` : ""}
+              </div>
+              <div>
+                <div class="user-name">${esc(displayName)}</div>
+                <div class="user-handle">@${esc(handle)}</div>
+              </div>
+            </div>
+            <button class="btn btn-secondary" onclick="handleLogout()" style="width: auto; padding: 0.5rem 1rem; font-size: 0.875rem;">Logout</button>
+          </div>
+        `;
+      }
+
+      function renderScrobbleForm() {
+        const container = document.getElementById("scrobble-form");
+
+        container.innerHTML = `
+          <div class="card">
+            <div class="card-title">Scrobble a Track</div>
+
+            <div class="form-group">
+              <label>Artist</label>
+              <div id="artist-field"></div>
+            </div>
+
+            <div class="form-group">
+              <label>Track</label>
+              <div id="track-field"></div>
+            </div>
+
+            <div class="form-row">
+              <div class="form-group">
+                <label>Album</label>
+                <input type="text" id="album-display" class="read-only" readonly placeholder="Auto-filled" />
+              </div>
+              <div class="form-group" style="flex: 0 0 80px;">
+                <label>Duration</label>
+                <input type="text" id="duration-display" class="read-only" readonly placeholder="--:--" />
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label>Music Service</label>
+              <input type="text" id="service-domain" placeholder="e.g., spotify.com, music.apple.com (optional)" />
+            </div>
+
+            <div class="form-group">
+              <div class="time-toggle">
+                <label>Played time</label>
+                <div id="time-toggle" class="toggle-switch" onclick="toggleCustomTime()"></div>
+                <span style="font-size: 0.875rem; color: var(--text-secondary);" id="time-label">Now</span>
+              </div>
+              <input type="datetime-local" id="custom-time" class="hidden" />
+            </div>
+
+            <button id="submit-btn" class="btn btn-primary" onclick="handleSubmit()" disabled>
+              Scrobble
+            </button>
+          </div>
+        `;
+
+        renderArtistField();
+        renderTrackField();
+      }
+
+      function renderArtistField() {
+        const container = document.getElementById("artist-field");
+
+        if (state.selectedArtist) {
+          container.innerHTML = `
+            <div class="selected-tag">
+              <span>${esc(state.selectedArtist.name)}</span>
+              <button onclick="clearArtist()">&times;</button>
+            </div>
+          `;
+        } else {
+          container.innerHTML = `
+            <div class="autocomplete-wrapper">
+              <input
+                type="text"
+                id="artist-input"
+                placeholder="Search for an artist..."
+                oninput="handleArtistInput(this.value)"
+                onfocus="handleArtistInput(this.value)"
+              />
+              <div id="artist-dropdown" class="autocomplete-dropdown hidden"></div>
+            </div>
+          `;
+        }
+      }
+
+      function renderTrackField() {
+        const container = document.getElementById("track-field");
+
+        if (state.selectedRecording) {
+          container.innerHTML = `
+            <div class="selected-tag">
+              <span>${esc(state.selectedRecording.title)}</span>
+              <button onclick="clearRecording()">&times;</button>
+            </div>
+          `;
+        } else {
+          const disabled = !state.selectedArtist;
+          container.innerHTML = `
+            <div class="autocomplete-wrapper">
+              <input
+                type="text"
+                id="track-input"
+                placeholder="${disabled ? "Select an artist first" : "Search for a track..."}"
+                ${disabled ? "disabled" : ""}
+                oninput="handleTrackInput(this.value)"
+                onfocus="handleTrackInput(this.value)"
+              />
+              <div id="track-dropdown" class="autocomplete-dropdown hidden"></div>
+            </div>
+          `;
+        }
+      }
+
+      // =============================================================================
+      // ARTIST SEARCH HANDLERS
+      // =============================================================================
+
+      const handleArtistInput = debounce(async (query) => {
+        const dropdown = document.getElementById("artist-dropdown");
+
+        if (query.length < 2) {
+          dropdown.classList.add("hidden");
+          return;
+        }
+
+        dropdown.innerHTML = `<div class="autocomplete-status">Searching...</div>`;
+        dropdown.classList.remove("hidden");
+
+        try {
+          const artists = await searchArtists(query);
+
+          if (artists.length === 0) {
+            dropdown.innerHTML = `<div class="autocomplete-status">No artists found</div>`;
+            return;
+          }
+
+          dropdown.innerHTML = artists
+            .map(
+              (a, i) => `
+              <div class="autocomplete-item" onclick="selectArtist(${i})" data-index="${i}">
+                <div class="autocomplete-item-title">${esc(a.name)}</div>
+                ${a.disambiguation ? `<div class="autocomplete-item-subtitle">${esc(a.disambiguation)}</div>` : ""}
+              </div>
+            `,
+            )
+            .join("");
+
+          // Store artists for selection
+          dropdown.dataset.artists = JSON.stringify(artists);
+        } catch (error) {
+          dropdown.innerHTML = `<div class="autocomplete-status" style="color: var(--error-text)">Search failed</div>`;
+        }
+      }, 300);
+
+      function selectArtist(index) {
+        const dropdown = document.getElementById("artist-dropdown");
+        const artists = JSON.parse(dropdown.dataset.artists || "[]");
+        const artist = artists[index];
+
+        if (!artist) return;
+
+        state.selectedArtist = {
+          name: artist.name,
+          mbid: artist.id,
+        };
+
+        state.selectedRecording = null;
+        document.getElementById("album-display").value = "";
+        document.getElementById("duration-display").value = "";
+
+        renderArtistField();
+        renderTrackField();
+        updateSubmitButton();
+      }
+
+      function clearArtist() {
+        state.selectedArtist = null;
+        state.selectedRecording = null;
+        document.getElementById("album-display").value = "";
+        document.getElementById("duration-display").value = "";
+
+        renderArtistField();
+        renderTrackField();
+        updateSubmitButton();
+      }
+
+      function updateSubmitButton() {
+        const btn = document.getElementById("submit-btn");
+        btn.disabled = !state.selectedArtist || !state.selectedRecording || state.isSubmitting;
+      }
+
+      // =============================================================================
+      // TRACK SEARCH HANDLERS
+      // =============================================================================
+
+      const handleTrackInput = debounce(async (query) => {
+        const dropdown = document.getElementById("track-dropdown");
+
+        if (!state.selectedArtist || query.length < 2) {
+          dropdown.classList.add("hidden");
+          return;
+        }
+
+        dropdown.innerHTML = `<div class="autocomplete-status">Searching...</div>`;
+        dropdown.classList.remove("hidden");
+
+        try {
+          const recordings = await searchRecordings(query, state.selectedArtist.mbid);
+
+          if (recordings.length === 0) {
+            dropdown.innerHTML = `<div class="autocomplete-status">No tracks found</div>`;
+            return;
+          }
+
+          dropdown.innerHTML = recordings
+            .map((r, i) => {
+              const release = r.releases?.[0];
+              const duration = r.length ? formatDuration(Math.floor(r.length / 1000)) : "";
+              const album = release?.title || "";
+
+              return `
+                <div class="autocomplete-item" onclick="selectRecording(${i})" data-index="${i}">
+                  <div class="autocomplete-item-title">${esc(r.title)} ${duration ? `<span style="color: var(--text-secondary); font-weight: normal;">${duration}</span>` : ""}</div>
+                  ${album ? `<div class="autocomplete-item-subtitle">${esc(album)}</div>` : ""}
+                </div>
+              `;
+            })
+            .join("");
+
+          dropdown.dataset.recordings = JSON.stringify(recordings);
+        } catch (error) {
+          dropdown.innerHTML = `<div class="autocomplete-status" style="color: var(--error-text)">Search failed</div>`;
+        }
+      }, 300);
+
+      function selectRecording(index) {
+        const dropdown = document.getElementById("track-dropdown");
+        const recordings = JSON.parse(dropdown.dataset.recordings || "[]");
+        const recording = recordings[index];
+
+        if (!recording) return;
+
+        const release = recording.releases?.[0];
+        const durationSecs = recording.length ? Math.floor(recording.length / 1000) : null;
+
+        state.selectedRecording = {
+          title: recording.title,
+          mbid: recording.id,
+          releaseName: release?.title || null,
+          releaseMbid: release?.id || null,
+          duration: durationSecs,
+          artists: recording["artist-credit"]?.map((ac) => ({
+            artistName: ac.artist.name,
+            artistMbId: ac.artist.id,
+          })) || [{ artistName: state.selectedArtist.name, artistMbId: state.selectedArtist.mbid }],
+        };
+
+        document.getElementById("album-display").value = state.selectedRecording.releaseName || "";
+        document.getElementById("duration-display").value = durationSecs
+          ? formatDuration(durationSecs)
+          : "";
+
+        renderTrackField();
+        updateSubmitButton();
+      }
+
+      function clearRecording() {
+        state.selectedRecording = null;
+        document.getElementById("album-display").value = "";
+        document.getElementById("duration-display").value = "";
+
+        renderTrackField();
+        updateSubmitButton();
+      }
+
+      function formatDuration(secs) {
+        if (!secs) return "";
+        const m = Math.floor(secs / 60);
+        const s = secs % 60;
+        return `${m}:${s.toString().padStart(2, "0")}`;
+      }
+
+      // =============================================================================
+      // TIME TOGGLE AND SUBMIT
+      // =============================================================================
+
+      function toggleCustomTime() {
+        state.useCustomTime = !state.useCustomTime;
+
+        const toggle = document.getElementById("time-toggle");
+        const label = document.getElementById("time-label");
+        const input = document.getElementById("custom-time");
+
+        toggle.classList.toggle("active", state.useCustomTime);
+        label.textContent = state.useCustomTime ? "Custom" : "Now";
+        input.classList.toggle("hidden", !state.useCustomTime);
+
+        if (state.useCustomTime && !input.value) {
+          const now = new Date();
+          now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
+          input.value = now.toISOString().slice(0, 16);
+        }
+      }
+
+      async function handleSubmit() {
+        if (!state.selectedArtist || !state.selectedRecording || state.isSubmitting) return;
+
+        state.isSubmitting = true;
+        updateSubmitButton();
+
+        const btn = document.getElementById("submit-btn");
+        btn.innerHTML = `<span class="spinner"></span> Scrobbling...`;
+
+        try {
+          const playedTime = state.useCustomTime
+            ? new Date(document.getElementById("custom-time").value).toISOString()
+            : new Date().toISOString();
+
+          const serviceDomain = document.getElementById("service-domain").value.trim() || null;
+
+          const input = {
+            trackName: state.selectedRecording.title,
+            recordingMbId: state.selectedRecording.mbid,
+            artists: state.selectedRecording.artists,
+            playedTime,
+            submissionClientAgent: "slices-tools-scrobbler/0.1.0",
+          };
+
+          if (state.selectedRecording.duration) {
+            input.duration = state.selectedRecording.duration;
+          }
+          if (state.selectedRecording.releaseName) {
+            input.releaseName = state.selectedRecording.releaseName;
+          }
+          if (state.selectedRecording.releaseMbid) {
+            input.releaseMbId = state.selectedRecording.releaseMbid;
+          }
+          if (serviceDomain) {
+            input.musicServiceBaseDomain = serviceDomain;
+          }
+
+          const mutation = `
+            mutation CreatePlay($input: FmTealAlphaFeedPlayInput!) {
+              createFmTealAlphaFeedPlay(input: $input) {
+                uri
+                trackName
+              }
+            }
+          `;
+
+          await state.client.mutate(mutation, { input });
+
+          showToast("Scrobbled!", "success");
+
+          // Reset form
+          state.selectedArtist = null;
+          state.selectedRecording = null;
+          state.useCustomTime = false;
+          document.getElementById("service-domain").value = "";
+
+          renderScrobbleForm();
+          await loadRecentScrobbles();
+        } catch (error) {
+          console.error("Submit failed:", error);
+          showToast("Failed to scrobble: " + error.message, "error");
+        } finally {
+          state.isSubmitting = false;
+          updateSubmitButton();
+          const btn = document.getElementById("submit-btn");
+          if (btn) btn.textContent = "Scrobble";
+        }
+      }
+
+      async function loadRecentScrobbles() {
+        const container = document.getElementById("recent-scrobbles");
+
+        container.innerHTML = `
+          <div class="card">
+            <div class="card-title">Your Recent Scrobbles</div>
+            <p style="color: var(--text-secondary); font-size: 0.875rem;">Loading...</p>
+          </div>
+        `;
+
+        try {
+          const query = `
+            query {
+              viewer {
+                fmTealAlphaFeedPlayByDid(
+                  first: 3
+                  sortBy: [{ field: playedTime, direction: DESC }]
+                ) {
+                  edges {
+                    node {
+                      trackName
+                      artistNames
+                      artists { artistName }
+                      releaseName
+                      playedTime
+                    }
+                  }
+                }
+              }
+            }
+          `;
+
+          const data = await state.client.query(query);
+          const plays = data?.viewer?.fmTealAlphaFeedPlayByDid?.edges?.map((e) => e.node) || [];
+          state.recentScrobbles = plays;
+
+          renderRecentScrobbles();
+        } catch (error) {
+          console.error("Failed to load recent scrobbles:", error);
+          container.innerHTML = `
+            <div class="card">
+              <div class="card-title">Your Recent Scrobbles</div>
+              <p style="color: var(--error-text); font-size: 0.875rem;">Failed to load</p>
+            </div>
+          `;
+        }
+      }
+
+      function renderRecentScrobbles() {
+        const container = document.getElementById("recent-scrobbles");
+
+        if (state.recentScrobbles.length === 0) {
+          container.innerHTML = `
+            <div class="card">
+              <div class="card-title">Your Recent Scrobbles</div>
+              <p style="color: var(--text-secondary); font-size: 0.875rem;">No scrobbles yet. Start logging!</p>
+            </div>
+          `;
+          return;
+        }
+
+        const items = state.recentScrobbles
+          .map((play) => {
+            const artists =
+              play.artists?.map((a) => a.artistName).join(", ") ||
+              play.artistNames?.join(", ") ||
+              "Unknown Artist";
+
+            return `
+              <div class="recent-item">
+                <div class="recent-info">
+                  <div class="recent-track">${esc(play.trackName)}</div>
+                  <div class="recent-artist">${esc(artists)}</div>
+                </div>
+                <div class="recent-time">${formatTimeAgo(play.playedTime)}</div>
+              </div>
+            `;
+          })
+          .join("");
+
+        container.innerHTML = `
+          <div class="card">
+            <div class="card-title">Your Recent Scrobbles</div>
+            ${items}
+          </div>
+        `;
+      }
+
+      function formatTimeAgo(iso) {
+        const d = new Date(iso);
+        const now = new Date();
+        const diff = Math.floor((now - d) / 1000);
+
+        if (diff < 60) return "just now";
+        if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+        if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+        return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+      }
+
+      // =============================================================================
+      // GLOBAL EVENT HANDLERS
+      // =============================================================================
+
+      document.addEventListener("click", (e) => {
+        // Close dropdowns when clicking outside
+        if (!e.target.closest(".autocomplete-wrapper")) {
+          document.querySelectorAll(".autocomplete-dropdown").forEach((d) => {
+            d.classList.add("hidden");
+          });
+        }
+      });
+
+      document.addEventListener("keydown", (e) => {
+        const activeDropdown = document.querySelector(".autocomplete-dropdown:not(.hidden)");
+        if (!activeDropdown) return;
+
+        const items = activeDropdown.querySelectorAll(".autocomplete-item");
+        if (items.length === 0) return;
+
+        const selected = activeDropdown.querySelector(".autocomplete-item.selected");
+        let currentIndex = selected ? Array.from(items).indexOf(selected) : -1;
+
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          currentIndex = Math.min(currentIndex + 1, items.length - 1);
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          currentIndex = Math.max(currentIndex - 1, 0);
+        } else if (e.key === "Enter" && selected) {
+          e.preventDefault();
+          selected.click();
+          return;
+        } else if (e.key === "Escape") {
+          activeDropdown.classList.add("hidden");
+          return;
+        } else {
+          return;
+        }
+
+        items.forEach((item, i) => {
+          item.classList.toggle("selected", i === currentIndex);
+        });
+
+        if (items[currentIndex]) {
+          items[currentIndex].scrollIntoView({ block: "nearest" });
+        }
+      });
+
+      // Start the app
+      main();
+    </script>
+  </body>
+</html>
-- 
knotmirror 0.0.1