previous ratings are loaded on start

drag-fix.js

···
   const existing = canvas.querySelector(`[data-canvas-domain="${domain}"]`);
   if (existing) {
     const name = existing.dataset.name;
+    const rating = window.existingRatings ? window.existingRatings[domain] : undefined;
     existing.remove();
 
     // Add back to services bar
···
            alt="${name}"
            class="service-logo"
            draggable="false">
+      ${rating !== undefined ? `<div class="service-badge ${rating === 90 ? "defunct" : ""}">${rating}</div>` : ""}
     `;
     setupServiceDrag(serviceEl);
     servicesBar.appendChild(serviceEl);

index.html

···
       async function fetchRatings() {
         const query = `
           query {
-            socialGo90Ratings(orderBy: CREATED_AT_DESC, first: 50) {
-              nodes {
-                id
-                serviceDomain
-                rating
-                comment
-                createdAt
-                author {
-                  handle
-                  appBskyActorProfileByDid {
-                    displayName
-                  }
+            socialGo90Rating(last: 50) {
+              edges {
+                node {
+                  serviceDomain
+                  rating
+                  comment
+                  createdAt
+                  actorHandle
                 }
               }
             }
···
         `;
 
         const data = await client.query(query);
-        return data?.socialGo90Ratings?.nodes || [];
+        const edges = data?.socialGo90Rating?.edges || [];
+        return edges.map((edge) => ({
+          ...edge.node,
+          author: { handle: edge.node.actorHandle },
+        }));
       }
 
       async function fetchServiceMetadata(domain) {
···
             await submitRating(data.domain, data.rating);
           }
 
-          // Clear pending ratings
+          // Clear pending ratings (but keep services on canvas)
           pendingRatings = {};
           updateSaveButton();
 
···
         `;
 
         initDragAndDrop();
+        await loadExistingRatings();
+      }
+
+      window.existingRatings = {}; // Store existing ratings globally
+
+      async function loadExistingRatings() {
+        try {
+          // Fetch viewer's own ratings using edges/node structure
+          const query = `
+            query {
+              viewer {
+                did
+              }
+              socialGo90Rating(last: 100, filter: { did: { equalTo: $viewerDid } }) {
+                edges {
+                  node {
+                    serviceDomain
+                    rating
+                    did
+                  }
+                }
+              }
+            }
+          `;
+
+          // First get viewer DID
+          const viewerQuery = `query { viewer { did } }`;
+          const viewerData = await client.query(viewerQuery);
+          const viewerDid = viewerData?.viewer?.did;
+
+          if (!viewerDid) return;
+
+          // Now fetch ratings for this viewer
+          const ratingsQuery = `
+            query {
+              socialGo90Rating(last: 100) {
+                edges {
+                  node {
+                    serviceDomain
+                    rating
+                    did
+                  }
+                }
+              }
+            }
+          `;
+
+          const data = await client.query(ratingsQuery);
+          const allEdges = data?.socialGo90Rating?.edges || [];
+
+          // Filter to only viewer's ratings
+          const myRatings = allEdges
+            .filter((edge) => edge.node.did === viewerDid)
+            .map((edge) => edge.node);
+
+          if (myRatings && myRatings.length > 0) {
+            // Store ratings in global object
+            myRatings.forEach((rating) => {
+              window.existingRatings[rating.serviceDomain] = rating.rating;
+            });
+
+            // Update badges on services in the bar
+            updateServiceBadges();
+
+            const scaleBar = document.getElementById("scaleBar");
+            const scaleBarRect = scaleBar.getBoundingClientRect();
+            const canvas = document.getElementById("dragCanvas");
+            const canvasRect = canvas.getBoundingClientRect();
+
+            // Load viewer's ratings onto canvas
+            for (const rating of myRatings) {
+              // Calculate position based on rating value
+              const percentageX = (rating.rating / 90) * 100;
+              const scaleX = scaleBarRect.left + (percentageX / 100) * scaleBarRect.width;
+              const scaleY = scaleBarRect.top + scaleBarRect.height / 2;
+
+              // Convert to canvas coordinates
+              const canvasX = scaleX - canvasRect.left;
+              const canvasY = scaleY - canvasRect.top;
+
+              // Place on canvas
+              placeServiceOnCanvas(
+                rating.serviceDomain,
+                rating.serviceDomain,
+                rating.rating,
+                canvasX,
+                canvasY,
+              );
+            }
+          }
+        } catch (error) {
+          // No ratings exist yet, that's OK
+          console.log("No existing ratings found (this is normal for first use)");
+        }
+      }
+
+      function updateServiceBadges() {
+        const servicesBar = document.getElementById("servicesBar");
+        if (!servicesBar) return;
+
+        const serviceItems = servicesBar.querySelectorAll(".service-item");
+
+        serviceItems.forEach((item) => {
+          const domain = item.dataset.domain;
+          const rating = window.existingRatings[domain];
+
+          // Remove existing badge if any
+          const existingBadge = item.querySelector(".service-badge");
+          if (existingBadge) existingBadge.remove();
+
+          // Add badge if there's a rating
+          if (rating !== undefined) {
+            const badge = document.createElement("div");
+            badge.className = `service-badge ${rating === 90 ? "defunct" : ""}`;
+            badge.textContent = rating;
+            item.appendChild(badge);
+          }
+        });
       }
 
       async function renderRatingsList(ratings) {

index.html.bak4

···
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Go90 Social</title>
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      * {
+        margin: 0;
+      }
+      body {
+        line-height: 1.5;
+        -webkit-font-smoothing: antialiased;
+      }
+      input,
+      button {
+        font: inherit;
+      }
+
+      :root {
+        --primary-500: #0078ff;
+        --primary-600: #0060cc;
+        --gray-100: #f5f5f5;
+        --gray-200: #e5e5e5;
+        --gray-500: #737373;
+        --gray-700: #404040;
+        --gray-900: #171717;
+        --border-color: #e5e5e5;
+        --error-bg: #fef2f2;
+        --error-border: #fecaca;
+        --error-text: #dc2626;
+        --go90-blue: #2020ff;
+        --go90-yellow: #ffff00;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        background: var(--go90-blue);
+        color: white;
+        min-height: 100vh;
+        padding: 2rem 1rem;
+      }
+
+      #app {
+        max-width: 1100px;
+        margin: 0 auto;
+      }
+
+      header {
+        text-align: center;
+        margin-bottom: 2rem;
+      }
+
+      .logo {
+        width: 64px;
+        height: 64px;
+        margin-bottom: 0.5rem;
+      }
+
+      header h1 {
+        font-size: 2.5rem;
+        color: var(--go90-yellow);
+        margin-bottom: 0.25rem;
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+      }
+
+      .tagline {
+        color: white;
+        font-size: 1.125rem;
+      }
+
+      .card {
+        background: white;
+        border-radius: 0.5rem;
+        padding: 1.5rem;
+        margin-bottom: 1rem;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      }
+
+      .login-form {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .form-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+      }
+
+      .form-group label {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--gray-700);
+      }
+
+      .form-group input {
+        padding: 0.75rem;
+        border: 1px solid var(--border-color);
+        border-radius: 0.375rem;
+        font-size: 1rem;
+      }
+
+      .form-group input:focus {
+        outline: none;
+        border-color: var(--primary-500);
+        box-shadow: 0 0 0 3px rgba(0, 120, 255, 0.1);
+      }
+
+      qs-actor-autocomplete {
+        --qs-input-border: var(--border-color);
+        --qs-input-border-focus: var(--primary-500);
+        --qs-input-padding: 0.75rem;
+        --qs-radius: 0.375rem;
+      }
+
+      .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;
+      }
+
+      .btn-primary {
+        background: var(--primary-500);
+        color: white;
+      }
+
+      .btn-primary:hover {
+        background: var(--primary-600);
+      }
+
+      .btn-secondary {
+        background: var(--gray-200);
+        color: var(--gray-700);
+      }
+
+      .btn-secondary:hover {
+        background: var(--border-color);
+      }
+
+      .user-card {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .user-info {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      }
+
+      .user-avatar {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        background: var(--gray-200);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.5rem;
+      }
+
+      .user-avatar img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        object-fit: cover;
+      }
+
+      .user-name {
+        font-weight: 600;
+      }
+
+      .user-handle {
+        font-size: 0.875rem;
+        color: var(--gray-500);
+      }
+
+      #error-banner {
+        position: fixed;
+        top: 1rem;
+        left: 50%;
+        transform: translateX(-50%);
+        background: var(--error-bg);
+        border: 1px solid var(--error-border);
+        color: var(--error-text);
+        padding: 0.75rem 1rem;
+        border-radius: 0.375rem;
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        max-width: 90%;
+        z-index: 100;
+      }
+
+      #error-banner.hidden {
+        display: none;
+      }
+
+      #error-banner button {
+        background: none;
+        border: none;
+        color: var(--error-text);
+        cursor: pointer;
+        font-size: 1.25rem;
+        line-height: 1;
+      }
+
+      .hidden {
+        display: none !important;
+      }
+
+      .rating-form {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .rating-slider-container {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+      }
+
+      .rating-display {
+        text-align: center;
+        font-size: 3rem;
+        font-weight: 700;
+        color: var(--primary-500);
+        margin: 0.5rem 0;
+      }
+
+      .rating-display.defunct {
+        color: var(--error-text);
+      }
+
+      .rating-slider {
+        width: 100%;
+        height: 8px;
+        -webkit-appearance: none;
+        appearance: none;
+        background: linear-gradient(to right, #32cd32 0%, #ffd700 50%, #ff5722 100%);
+        border-radius: 4px;
+        outline: none;
+      }
+
+      .rating-slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 24px;
+        height: 24px;
+        background: white;
+        border: 2px solid var(--primary-500);
+        border-radius: 50%;
+        cursor: pointer;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      }
+
+      .rating-slider::-moz-range-thumb {
+        width: 24px;
+        height: 24px;
+        background: white;
+        border: 2px solid var(--primary-500);
+        border-radius: 50%;
+        cursor: pointer;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      }
+
+      .rating-labels {
+        display: flex;
+        justify-content: space-between;
+        font-size: 0.875rem;
+        color: var(--gray-500);
+      }
+
+      textarea {
+        padding: 0.75rem;
+        border: 1px solid var(--border-color);
+        border-radius: 0.375rem;
+        font-size: 1rem;
+        resize: vertical;
+        min-height: 80px;
+        font-family: inherit;
+      }
+
+      textarea:focus {
+        outline: none;
+        border-color: var(--primary-500);
+        box-shadow: 0 0 0 3px rgba(0, 120, 255, 0.1);
+      }
+
+      .char-count {
+        text-align: right;
+        font-size: 0.75rem;
+        color: var(--gray-500);
+      }
+
+      .ratings-list {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .rating-item {
+        border-bottom: 1px solid var(--border-color);
+        padding-bottom: 1rem;
+      }
+
+      .rating-item:last-child {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+
+      .rating-header {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 0.5rem;
+      }
+
+      .service-favicon {
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+      }
+
+      .service-name {
+        font-weight: 600;
+        color: var(--gray-900);
+        flex: 1;
+      }
+
+      .rating-value {
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: var(--primary-500);
+      }
+
+      .rating-value.defunct {
+        color: var(--error-text);
+      }
+
+      .rating-meta {
+        font-size: 0.875rem;
+        color: var(--gray-500);
+        margin-bottom: 0.5rem;
+      }
+
+      .rating-comment {
+        color: var(--gray-700);
+        font-size: 0.875rem;
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 2rem;
+        color: var(--gray-500);
+      }
+
+      .section-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+        color: var(--gray-900);
+      }
+
+      .btn-block {
+        width: 100%;
+      }
+
+      /* Go90 Scale Interface */
+      .scale-container {
+        background: var(--go90-blue);
+        border: 4px solid var(--go90-yellow);
+        padding: 3rem 2rem;
+        border-radius: 8px;
+        margin-bottom: 2rem;
+        min-height: 600px;
+        position: relative;
+      }
+
+      .drag-canvas {
+        position: relative;
+        min-height: 500px;
+      }
+
+      .scale-bar-wrapper {
+        margin-bottom: 3rem;
+      }
+
+      .scale-labels {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+      }
+
+      .scale-label {
+        font-size: 3rem;
+        font-weight: 900;
+        color: var(--go90-yellow);
+      }
+
+      .scale-label.red {
+        color: #ff5555;
+      }
+
+      .scale-bar {
+        position: relative;
+        height: 80px;
+        background: linear-gradient(
+          to right,
+          #32cd32 0%,
+          #7fff00 10%,
+          #adff2f 20%,
+          #ffff00 30%,
+          #ffd700 40%,
+          #ffa500 50%,
+          #ff8c00 60%,
+          #ff6347 70%,
+          #ff4500 80%,
+          #dc143c 90%,
+          #8b0000 100%
+        );
+        border-radius: 12px;
+        border: 3px solid white;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        margin-bottom: 120px;
+        margin-top: 120px;
+      }
+
+      .scale-bar.drag-over {
+        box-shadow: 0 0 20px rgba(255, 255, 0, 0.8);
+        border-color: var(--go90-yellow);
+      }
+
+      .drop-zone {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 12px;
+      }
+
+      .service-on-scale {
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        cursor: move;
+        transition: transform 0.1s;
+      }
+
+      .service-on-scale:hover {
+        transform: translate(-50%, -50%) scale(1.1);
+      }
+
+      .service-logo-large {
+        width: 80px;
+        height: 80px;
+        border-radius: 12px;
+        background: white;
+        padding: 8px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+        border: 3px solid white;
+      }
+
+      .service-badge {
+        position: absolute;
+        bottom: -12px;
+        right: -12px;
+        background: black;
+        color: var(--go90-yellow);
+        font-size: 1.25rem;
+        font-weight: 900;
+        padding: 4px 12px;
+        border-radius: 50%;
+        border: 3px solid var(--go90-yellow);
+        min-width: 48px;
+        text-align: center;
+      }
+
+      .service-badge.defunct {
+        color: #ff5555;
+        border-color: #ff5555;
+      }
+
+      .services-bar {
+        background: black;
+        padding: 1.5rem;
+        border-radius: 8px;
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        flex-wrap: wrap;
+        min-height: 100px;
+      }
+
+      .service-item {
+        width: 80px;
+        height: 80px;
+        border-radius: 8px;
+        background: white;
+        padding: 8px;
+        cursor: grab;
+        transition:
+          transform 0.2s,
+          opacity 0.2s;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        position: relative;
+      }
+
+      .service-item:hover {
+        transform: scale(1.05);
+      }
+
+      .service-item:active {
+        cursor: grabbing;
+      }
+
+      .service-item.dragging {
+        opacity: 0.3;
+      }
+
+      .service-item.on-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      .service-logo {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+
+      .add-service-form {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        margin-top: 1rem;
+      }
+
+      .add-service-input {
+        flex: 1;
+        padding: 0.75rem;
+        border: 2px solid var(--gray-500);
+        border-radius: 4px;
+        background: var(--gray-900);
+        color: white;
+        font-size: 1rem;
+      }
+
+      .add-service-input:focus {
+        outline: none;
+        border-color: var(--go90-yellow);
+      }
+
+      .add-service-btn {
+        padding: 0.75rem 1.5rem;
+        background: var(--go90-yellow);
+        color: black;
+        border: none;
+        border-radius: 4px;
+        font-weight: 700;
+        cursor: pointer;
+        font-size: 1rem;
+      }
+
+      .add-service-btn:hover {
+        background: #ffff44;
+      }
+
+      .instructions {
+        text-align: center;
+        color: white;
+        font-size: 1.125rem;
+        margin-bottom: 2rem;
+        opacity: 0.9;
+      }
+
+      .save-button {
+        position: fixed;
+        bottom: 2rem;
+        right: 2rem;
+        padding: 1rem 2rem;
+        background: var(--go90-yellow);
+        color: black;
+        border: none;
+        border-radius: 8px;
+        font-weight: 900;
+        font-size: 1.25rem;
+        cursor: pointer;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        display: none;
+      }
+
+      .save-button.visible {
+        display: block;
+        animation: pulse 2s infinite;
+      }
+
+      .save-button:hover {
+        background: #ffff44;
+        transform: scale(1.05);
+      }
+
+      @keyframes pulse {
+        0%,
+        100% {
+          transform: scale(1);
+        }
+        50% {
+          transform: scale(1.05);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <header>
+        <svg class="logo" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+          <g transform="translate(64, 64)">
+            <ellipse cx="0" cy="-28" rx="50" ry="20" fill="#FF5722" />
+            <ellipse cx="0" cy="0" rx="60" ry="20" fill="#00ACC1" />
+            <ellipse cx="0" cy="28" rx="40" ry="20" fill="#32CD32" />
+          </g>
+        </svg>
+        <h1>Go90 Scale</h1>
+        <p class="tagline">Rate streaming services on the Go90 scale</p>
+      </header>
+      <main>
+        <div id="auth-section"></div>
+        <div id="content"></div>
+      </main>
+      <div id="error-banner" class="hidden"></div>
+      <button id="saveButton" class="save-button" onclick="saveAllRatings()">Save Ratings</button>
+    </div>
+
+    <!-- Quickslice Client SDK -->
+    <script src="https://cdn.jsdelivr.net/gh/bigmoves/quickslice@main/quickslice-client-js/dist/quickslice-client.min.js"></script>
+    <!-- Web Components -->
+    <script src="https://cdn.jsdelivr.net/gh/bigmoves/elements@v0.1.0/dist/elements.min.js"></script>
+    <script src="drag-fix.js"></script>
+
+    <script>
+      // =============================================================================
+      // CONFIGURATION
+      // =============================================================================
+
+      const SERVER_URL = "http://127.0.0.1:8080";
+      const CLIENT_ID = "client_Wpu1V7VdSi1eKI01JTsKOg"; // Set your OAuth client ID here after registering
+
+      let client;
+      let serviceMetadataCache = {};
+      let pendingRatings = {}; // Store ratings before saving
+
+      const defaultServices = [
+        { domain: "netflix.com", name: "Netflix" },
+        { domain: "youtube.com", name: "YouTube" },
+        { domain: "max.com", name: "HBO Max" },
+        { domain: "disneyplus.com", name: "Disney+" },
+        { domain: "hulu.com", name: "Hulu" },
+        { domain: "tv.apple.com", name: "Apple TV" },
+        { domain: "primevideo.com", name: "Prime Video" },
+        { domain: "peacocktv.com", name: "Peacock" },
+        { domain: "paramountplus.com", name: "Paramount+" },
+      ];
+
+      // =============================================================================
+      // INITIALIZATION
+      // =============================================================================
+
+      async function main() {
+        // Check for OAuth errors in URL
+        const params = new URLSearchParams(window.location.search);
+        if (params.has("error")) {
+          const error = params.get("error");
+          const description = params.get("error_description") || error;
+          showError(description);
+          // Clean up URL
+          window.history.replaceState({}, "", window.location.pathname);
+        }
+
+        if (window.location.search.includes("code=")) {
+          if (!CLIENT_ID) {
+            showError("OAuth callback received but CLIENT_ID is not configured.");
+            renderLoginForm();
+            return;
+          }
+
+          try {
+            client = await QuicksliceClient.createQuicksliceClient({
+              server: SERVER_URL,
+              clientId: CLIENT_ID,
+            });
+            await client.handleRedirectCallback();
+          } catch (error) {
+            console.error("OAuth callback error:", error);
+            showError(`Authentication failed: ${error.message}`);
+            renderLoginForm();
+            return;
+          }
+        } else if (CLIENT_ID) {
+          try {
+            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 = client && (await client.isAuthenticated());
+
+        if (isLoggedIn) {
+          try {
+            const viewer = await fetchViewer();
+            renderUserCard(viewer);
+            renderContent(viewer);
+          } catch (error) {
+            console.error("Failed to fetch viewer:", error);
+            renderUserCard(null);
+          }
+        } else {
+          renderLoginForm();
+        }
+      }
+
+      // =============================================================================
+      // DATA FETCHING
+      // =============================================================================
+
+      async function fetchViewer() {
+        const query = `
+          query {
+            viewer {
+              did
+              handle
+              appBskyActorProfileByDid {
+                displayName
+                avatar { url }
+              }
+            }
+          }
+        `;
+
+        const data = await client.query(query);
+        return data?.viewer;
+      }
+
+      async function fetchRatings() {
+        const query = `
+          query {
+            socialGo90Ratings(orderBy: CREATED_AT_DESC, first: 50) {
+              nodes {
+                id
+                serviceDomain
+                rating
+                comment
+                createdAt
+                author {
+                  handle
+                  appBskyActorProfileByDid {
+                    displayName
+                  }
+                }
+              }
+            }
+          }
+        `;
+
+        const data = await client.query(query);
+        return data?.socialGo90Ratings?.nodes || [];
+      }
+
+      async function fetchServiceMetadata(domain) {
+        if (serviceMetadataCache[domain]) {
+          return serviceMetadataCache[domain];
+        }
+
+        const metadata = {
+          name: domain,
+          favicon: `https://www.google.com/s2/favicons?domain=${domain}&sz=128`,
+        };
+
+        serviceMetadataCache[domain] = metadata;
+        return metadata;
+      }
+
+      // =============================================================================
+      // EVENT HANDLERS
+      // =============================================================================
+
+      async function handleLogin(event) {
+        event.preventDefault();
+
+        const handle = document.getElementById("handle").value.trim();
+
+        if (!handle) {
+          showError("Please enter your handle");
+          return;
+        }
+
+        try {
+          client = await QuicksliceClient.createQuicksliceClient({
+            server: SERVER_URL,
+            clientId: CLIENT_ID,
+          });
+
+          await client.loginWithRedirect({ handle });
+        } catch (error) {
+          showError(`Login failed: ${error.message}`);
+        }
+      }
+
+      function logout() {
+        if (client) {
+          client.logout();
+        } else {
+          window.location.reload();
+        }
+      }
+
+      async function handleRatingSubmit(event) {
+        event.preventDefault();
+
+        const serviceDomain = document.getElementById("serviceDomain").value.trim();
+        const rating = parseInt(document.getElementById("rating").value);
+        const comment = document.getElementById("comment").value.trim();
+
+        if (!serviceDomain) {
+          showError("Please enter a service domain");
+          return;
+        }
+
+        // Basic domain validation
+        if (!serviceDomain.includes(".") || serviceDomain.includes("/")) {
+          showError("Please enter a valid domain (e.g., netflix.com)");
+          return;
+        }
+
+        try {
+          const mutation = `
+            mutation CreateRating($input: CreateSocialGo90RatingInput!) {
+              createSocialGo90Rating(input: $input)
+            }
+          `;
+
+          const variables = {
+            input: {
+              serviceDomain,
+              rating,
+              comment: comment || undefined,
+              createdAt: new Date().toISOString(),
+            },
+          };
+
+          await client.query(mutation, variables);
+
+          // Clear form
+          document.getElementById("serviceDomain").value = "";
+          document.getElementById("rating").value = "45";
+          document.getElementById("comment").value = "";
+          updateRatingDisplay(45);
+
+          // Refresh ratings list
+          const viewer = await fetchViewer();
+          await renderContent(viewer);
+        } catch (error) {
+          console.error("Failed to submit rating:", error);
+          showError(`Failed to submit rating: ${error.message}`);
+        }
+      }
+
+      function updateRatingDisplay(value) {
+        const display = document.getElementById("ratingDisplay");
+        const isDefunct = value === 90;
+        display.textContent = value;
+        display.className = isDefunct ? "rating-display defunct" : "rating-display";
+      }
+
+      function updateCharCount() {
+        const comment = document.getElementById("comment").value;
+        const count = document.getElementById("charCount");
+        count.textContent = `${comment.length}/300`;
+      }
+
+      // OLD:       function initDragAndDrop() {
+      // OLD:         const serviceItems = document.querySelectorAll(".service-item");
+      // OLD:         const dropZone = document.getElementById("dropZone");
+      // OLD:         const scaleBar = document.getElementById("scaleBar");
+      // OLD:
+      // OLD:         serviceItems.forEach((item) => {
+      // OLD:           item.addEventListener("dragstart", handleDragStart);
+      // OLD:           item.addEventListener("dragend", handleDragEnd);
+      // OLD:         });
+      // OLD:
+      // OLD:         dropZone.addEventListener("dragover", handleDragOver);
+      // OLD:         dropZone.addEventListener("drop", handleDrop);
+      // OLD:         dropZone.addEventListener("dragleave", handleDragLeave);
+      // OLD:       }
+      // OLD:
+      // OLD:       let draggedItem = null;
+      // OLD:
+      // OLD:       function handleDragStart(e) {
+      // OLD:         draggedItem = e.target;
+      // OLD:         e.target.classList.add("dragging");
+      // OLD:       }
+      // OLD:
+      // OLD:       function handleDragEnd(e) {
+      // OLD:         e.target.classList.remove("dragging");
+      // OLD:         // Don't clear draggedItem here - it's needed in handleDrop
+      // OLD:         setTimeout(() => {
+      // OLD:           draggedItem = null;
+      // OLD:         }, 100);
+      // OLD:       }
+      // OLD:
+      // OLD:       function handleDragOver(e) {
+      // OLD:         e.preventDefault();
+      // OLD:         document.getElementById("scaleBar").classList.add("drag-over");
+      // OLD:       }
+      // OLD:
+      // OLD:       function handleDragLeave(e) {
+      // OLD:         if (e.target === document.getElementById("dropZone")) {
+      // OLD:           document.getElementById("scaleBar").classList.remove("drag-over");
+      // OLD:         }
+      // OLD:       }
+      // OLD:
+      // OLD:       async function handleDrop(e) {
+      // OLD:         e.preventDefault();
+      // OLD:         document.getElementById("scaleBar").classList.remove("drag-over");
+      // OLD:
+      // OLD:         if (!draggedItem) return;
+      // OLD:
+      // OLD:         const domain = draggedItem.dataset.domain;
+      // OLD:         const name = draggedItem.dataset.name;
+      // OLD:
+      // OLD:         // Calculate rating and position based on drop location
+      // OLD:         const scaleBar = document.getElementById("scaleBar");
+      // OLD:         const rect = scaleBar.getBoundingClientRect();
+      // OLD:         const x = e.clientX - rect.left;
+      // OLD:         const y = e.clientY - rect.top;
+      // OLD:
+      // OLD:         const percentageX = Math.max(0, Math.min(100, (x / rect.width) * 100));
+      // OLD:         const rating = Math.round((percentageX / 100) * 90);
+      // OLD:
+      // OLD:         // Allow vertical offset from center
+      // OLD:         const offsetY = y - rect.height / 2;
+      // OLD:
+      // OLD:         // Store in pending ratings (don't submit yet)
+      // OLD:         pendingRatings[domain] = {
+      // OLD:           domain,
+      // OLD:           name,
+      // OLD:           rating,
+      // OLD:           percentageX,
+      // OLD:           offsetY,
+      // OLD:         };
+      // OLD:
+      // OLD:         // Don't mark as rated - allow re-dragging
+      // OLD:         // draggedItem.classList.add("rated");
+      // OLD:
+      // OLD:         // Add service to scale
+      // OLD:         addServiceToScale(domain, name, rating, percentageX, offsetY);
+      // OLD:
+      // OLD:         // Show save button
+      // OLD:         updateSaveButton();
+      // OLD:       }
+      // OLD:
+      async function submitRating(serviceDomain, rating, comment = "") {
+        try {
+          const mutation = `
+            mutation CreateRating($input: CreateSocialGo90RatingInput!) {
+              createSocialGo90Rating(input: $input)
+            }
+          `;
+
+          const input = {
+            serviceDomain: serviceDomain,
+            rating: rating,
+            createdAt: new Date().toISOString(),
+          };
+
+          // Only add comment if it exists
+          if (comment && comment.trim()) {
+            input.comment = comment.trim();
+          }
+
+          const variables = { input };
+
+          await client.query(mutation, variables);
+        } catch (error) {
+          console.error("Failed to submit rating:", error);
+          showError(`Failed to submit rating: ${error.message}`);
+          throw error;
+        }
+      }
+      // OLD:
+      // OLD:       function addServiceToScale(domain, name, rating, percentageX, offsetY = 0) {
+      // OLD:         const scaleBar = document.getElementById("scaleBar");
+      // OLD:
+      // OLD:         // Remove existing rating for this service
+      // OLD:         const existing = scaleBar.querySelector(`[data-scale-domain="${domain}"]`);
+      // OLD:         if (existing) existing.remove();
+      // OLD:
+      // OLD:         const serviceEl = document.createElement("div");
+      // OLD:         serviceEl.className = "service-on-scale";
+      // OLD:         serviceEl.dataset.scaleDomain = domain;
+      // OLD:         serviceEl.style.left = `${percentageX}%`;
+      // OLD:         serviceEl.style.top = `calc(50% + ${offsetY}px)`;
+      // OLD:         serviceEl.draggable = true;
+      // OLD:         serviceEl.innerHTML = `
+      // OLD:           <img src="https://www.google.com/s2/favicons?domain=${domain}&sz=128"
+      // OLD:                alt="${name}"
+      // OLD:                class="service-logo-large">
+      // OLD:           <div class="service-badge ${rating === 90 ? "defunct" : ""}">${rating}</div>
+      // OLD:         `;
+      // OLD:
+      // OLD:         // Make it re-draggable to update rating
+      // OLD:         serviceEl.addEventListener("dragstart", (e) => {
+      // OLD:           draggedItem = { dataset: { domain, name } };
+      // OLD:           e.target.classList.add("dragging");
+      // OLD:         });
+      // OLD:
+      // OLD:         serviceEl.addEventListener("dragend", (e) => {
+      // OLD:           e.target.classList.remove("dragging");
+      // OLD:           e.target.remove(); // Remove from scale when re-dragging
+      // OLD:         });
+      // OLD:
+      // OLD:         scaleBar.appendChild(serviceEl);
+      // OLD:       }
+      // OLD:
+      async function addCustomService(e) {
+        if (e) e.preventDefault();
+
+        const input = document.getElementById("customServiceDomain");
+        const domain = input.value.trim();
+
+        if (!domain) {
+          showError("Please enter a domain");
+          return;
+        }
+
+        if (!domain.includes(".") || domain.includes("/")) {
+          showError("Please enter a valid domain (e.g., dropout.tv)");
+          return;
+        }
+
+        // Add to services bar
+        const servicesBar = document.getElementById("servicesBar");
+        const serviceEl = document.createElement("div");
+        serviceEl.className = "service-item";
+        serviceEl.dataset.domain = domain;
+        serviceEl.dataset.name = domain;
+        serviceEl.innerHTML = `
+          <img src="https://www.google.com/s2/favicons?domain=${domain}&sz=128"
+               alt="${domain}"
+               class="service-logo"
+               draggable="false">
+        `;
+
+        setupServiceDrag(serviceEl);
+        servicesBar.appendChild(serviceEl);
+        input.value = "";
+      }
+
+      function updateSaveButton() {
+        const saveButton = document.getElementById("saveButton");
+        const hasRatings = Object.keys(pendingRatings).length > 0;
+
+        if (hasRatings) {
+          saveButton.classList.add("visible");
+        } else {
+          saveButton.classList.remove("visible");
+        }
+      }
+
+      async function saveAllRatings() {
+        const saveButton = document.getElementById("saveButton");
+        saveButton.disabled = true;
+        saveButton.textContent = "Saving...";
+
+        try {
+          for (const [domain, data] of Object.entries(pendingRatings)) {
+            await submitRating(data.domain, data.rating);
+          }
+
+          // Clear pending ratings (but keep services on canvas)
+          pendingRatings = {};
+          updateSaveButton();
+
+          saveButton.textContent = "Saved!";
+          setTimeout(() => {
+            saveButton.textContent = "Save Ratings";
+            saveButton.disabled = false;
+          }, 2000);
+        } catch (error) {
+          saveButton.textContent = "Save Ratings";
+          saveButton.disabled = false;
+          showError("Failed to save some ratings. Please try again.");
+        }
+      }
+
+      // =============================================================================
+      // UI RENDERING
+      // =============================================================================
+
+      function showError(message) {
+        const banner = document.getElementById("error-banner");
+        banner.innerHTML = `
+          <span>${escapeHtml(message)}</span>
+          <button onclick="hideError()">&times;</button>
+        `;
+        banner.classList.remove("hidden");
+      }
+
+      function hideError() {
+        document.getElementById("error-banner").classList.add("hidden");
+      }
+
+      function escapeHtml(text) {
+        const div = document.createElement("div");
+        div.textContent = text;
+        return div.innerHTML;
+      }
+
+      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: 1rem;">
+                <strong>Configuration Required</strong>
+              </p>
+              <p style="color: var(--gray-700); text-align: center;">
+                Set the <code style="background: var(--gray-100); padding: 0.125rem 0.375rem; border-radius: 0.25rem;">CLIENT_ID</code> constant after registering an OAuth client.
+              </p>
+            </div>
+          `;
+          return;
+        }
+
+        container.innerHTML = `
+          <div class="card">
+            <form class="login-form" onsubmit="handleLogin(event)">
+              <div class="form-group">
+                <label for="handle">AT Protocol Handle</label>
+                <qs-actor-autocomplete
+                  id="handle"
+                  name="handle"
+                  placeholder="you.bsky.social"
+                  required
+                ></qs-actor-autocomplete>
+              </div>
+              <button type="submit" class="btn btn-primary">Login</button>
+            </form>
+          </div>
+        `;
+      }
+
+      function renderUserCard(viewer) {
+        const container = document.getElementById("auth-section");
+        const displayName = viewer?.appBskyActorProfileByDid?.displayName || "User";
+        const handle = viewer?.handle || "unknown";
+        const avatarUrl = viewer?.appBskyActorProfileByDid?.avatar?.url;
+
+        container.innerHTML = `
+          <div class="card user-card">
+            <div class="user-info">
+              <div class="user-avatar">
+                ${avatarUrl ? `<img src="${escapeHtml(avatarUrl)}" alt="Avatar">` : "👤"}
+              </div>
+              <div>
+                <div class="user-name">Hi, ${escapeHtml(displayName)}!</div>
+                <div class="user-handle">@${escapeHtml(handle)}</div>
+              </div>
+            </div>
+            <button class="btn btn-secondary" onclick="logout()">Logout</button>
+          </div>
+        `;
+      }
+
+      async function renderContent(viewer) {
+        const container = document.getElementById("content");
+
+        container.innerHTML = `
+          <div class="instructions">
+            Drag services anywhere to rate them! Drop on the bar to remove rating.
+          </div>
+
+          <div class="scale-container drag-canvas" id="dragCanvas">
+            <div class="scale-bar-wrapper">
+              <div class="scale-labels">
+                <span class="scale-label">0</span>
+                <span class="scale-label red">90</span>
+              </div>
+              <div class="scale-bar" id="scaleBar"></div>
+            </div>
+
+            <div class="services-bar" id="servicesBar">
+              ${defaultServices
+                .map(
+                  (service) => `
+                <div class="service-item"
+                     data-domain="${service.domain}"
+                     data-name="${service.name}">
+                  <img src="https://www.google.com/s2/favicons?domain=${service.domain}&sz=128"
+                       alt="${service.name}"
+                       class="service-logo"
+                       draggable="false">
+                </div>
+              `,
+                )
+                .join("")}
+            </div>
+
+            <form class="add-service-form" onsubmit="addCustomService(event)">
+              <input type="text"
+                     id="customServiceDomain"
+                     class="add-service-input"
+                     placeholder="Enter a domain (e.g., dropout.tv)">
+              <button type="submit" class="add-service-btn">Add Service</button>
+            </form>
+          </div>
+        `;
+
+        initDragAndDrop();
+        await loadExistingRatings();
+      }
+
+      window.existingRatings = {}; // Store existing ratings globally
+
+      async function loadExistingRatings() {
+        try {
+          // Fetch viewer's own ratings
+          const query = `
+            query {
+              viewer {
+                did
+              }
+              socialGo90Ratings(orderBy: CREATED_AT_DESC, first: 100) {
+                nodes {
+                  id
+                  serviceDomain
+                  rating
+                  author {
+                    did
+                  }
+                }
+              }
+            }
+          `;
+
+          const data = await client.query(query);
+          const viewerDid = data?.viewer?.did;
+          const allRatings = data?.socialGo90Ratings?.nodes || [];
+
+          // Filter to only viewer's ratings
+          const myRatings = allRatings.filter((r) => r.author?.did === viewerDid);
+
+          // Store ratings in global object
+          myRatings.forEach((rating) => {
+            existingRatings[rating.serviceDomain] = rating.rating;
+          });
+
+          // Update badges on services in the bar
+          updateServiceBadges();
+
+          const scaleBar = document.getElementById("scaleBar");
+          const scaleBarRect = scaleBar.getBoundingClientRect();
+          const canvas = document.getElementById("dragCanvas");
+          const canvasRect = canvas.getBoundingClientRect();
+
+          // Load viewer's ratings onto canvas
+          for (const rating of myRatings) {
+            // Calculate position based on rating value
+            const percentageX = (rating.rating / 90) * 100;
+            const scaleX = scaleBarRect.left + (percentageX / 100) * scaleBarRect.width;
+            const scaleY = scaleBarRect.top + scaleBarRect.height / 2;
+
+            // Convert to canvas coordinates
+            const canvasX = scaleX - canvasRect.left;
+            const canvasY = scaleY - canvasRect.top;
+
+            // Place on canvas
+            placeServiceOnCanvas(
+              rating.serviceDomain,
+              rating.serviceDomain,
+              rating.rating,
+              canvasX,
+              canvasY,
+            );
+          }
+        } catch (error) {
+          console.error("Failed to load existing ratings:", error);
+        }
+      }
+
+      function updateServiceBadges() {
+        const servicesBar = document.getElementById("servicesBar");
+        if (!servicesBar) return;
+
+        const serviceItems = servicesBar.querySelectorAll(".service-item");
+
+        serviceItems.forEach((item) => {
+          const domain = item.dataset.domain;
+          const rating = existingRatings[domain];
+
+          // Remove existing badge if any
+          const existingBadge = item.querySelector(".service-badge");
+          if (existingBadge) existingBadge.remove();
+
+          // Add badge if there's a rating
+          if (rating !== undefined) {
+            const badge = document.createElement("div");
+            badge.className = `service-badge ${rating === 90 ? "defunct" : ""}`;
+            badge.textContent = rating;
+            item.appendChild(badge);
+          }
+        });
+      }
+
+      async function renderRatingsList(ratings) {
+        const container = document.getElementById("ratingsList");
+
+        if (!ratings || ratings.length === 0) {
+          container.innerHTML = `
+            <div class="empty-state">No ratings yet. Be the first to rate a service!</div>
+          `;
+          return;
+        }
+
+        let html = '<div class="ratings-list">';
+
+        for (const rating of ratings) {
+          const metadata = await fetchServiceMetadata(rating.serviceDomain);
+          const displayName =
+            rating.author?.appBskyActorProfileByDid?.displayName ||
+            rating.author?.handle ||
+            "Anonymous";
+          const isDefunct = rating.rating === 90;
+          const ratingClass = isDefunct ? "rating-value defunct" : "rating-value";
+          const date = new Date(rating.createdAt).toLocaleDateString();
+
+          html += `
+            <div class="rating-item">
+              <div class="rating-header">
+                <img src="${escapeHtml(metadata.favicon)}" alt="" class="service-favicon" onerror="this.style.display='none'" />
+                <span class="service-name">${escapeHtml(metadata.name)}</span>
+                <span class="${ratingClass}">${rating.rating}</span>
+              </div>
+              <div class="rating-meta">
+                Rated by ${escapeHtml(displayName)} (@${escapeHtml(rating.author?.handle)}) on ${date}
+              </div>
+              ${rating.comment ? `<div class="rating-comment">${escapeHtml(rating.comment)}</div>` : ""}
+            </div>
+          `;
+        }
+
+        html += "</div>";
+        container.innerHTML = html;
+      }
+
+      main();
+    </script>
+  </body>
+</html>

index.html.bak5

···
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Go90 Social</title>
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      * {
+        margin: 0;
+      }
+      body {
+        line-height: 1.5;
+        -webkit-font-smoothing: antialiased;
+      }
+      input,
+      button {
+        font: inherit;
+      }
+
+      :root {
+        --primary-500: #0078ff;
+        --primary-600: #0060cc;
+        --gray-100: #f5f5f5;
+        --gray-200: #e5e5e5;
+        --gray-500: #737373;
+        --gray-700: #404040;
+        --gray-900: #171717;
+        --border-color: #e5e5e5;
+        --error-bg: #fef2f2;
+        --error-border: #fecaca;
+        --error-text: #dc2626;
+        --go90-blue: #2020ff;
+        --go90-yellow: #ffff00;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        background: var(--go90-blue);
+        color: white;
+        min-height: 100vh;
+        padding: 2rem 1rem;
+      }
+
+      #app {
+        max-width: 1100px;
+        margin: 0 auto;
+      }
+
+      header {
+        text-align: center;
+        margin-bottom: 2rem;
+      }
+
+      .logo {
+        width: 64px;
+        height: 64px;
+        margin-bottom: 0.5rem;
+      }
+
+      header h1 {
+        font-size: 2.5rem;
+        color: var(--go90-yellow);
+        margin-bottom: 0.25rem;
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+      }
+
+      .tagline {
+        color: white;
+        font-size: 1.125rem;
+      }
+
+      .card {
+        background: white;
+        border-radius: 0.5rem;
+        padding: 1.5rem;
+        margin-bottom: 1rem;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      }
+
+      .login-form {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .form-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+      }
+
+      .form-group label {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--gray-700);
+      }
+
+      .form-group input {
+        padding: 0.75rem;
+        border: 1px solid var(--border-color);
+        border-radius: 0.375rem;
+        font-size: 1rem;
+      }
+
+      .form-group input:focus {
+        outline: none;
+        border-color: var(--primary-500);
+        box-shadow: 0 0 0 3px rgba(0, 120, 255, 0.1);
+      }
+
+      qs-actor-autocomplete {
+        --qs-input-border: var(--border-color);
+        --qs-input-border-focus: var(--primary-500);
+        --qs-input-padding: 0.75rem;
+        --qs-radius: 0.375rem;
+      }
+
+      .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;
+      }
+
+      .btn-primary {
+        background: var(--primary-500);
+        color: white;
+      }
+
+      .btn-primary:hover {
+        background: var(--primary-600);
+      }
+
+      .btn-secondary {
+        background: var(--gray-200);
+        color: var(--gray-700);
+      }
+
+      .btn-secondary:hover {
+        background: var(--border-color);
+      }
+
+      .user-card {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .user-info {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      }
+
+      .user-avatar {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        background: var(--gray-200);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.5rem;
+      }
+
+      .user-avatar img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        object-fit: cover;
+      }
+
+      .user-name {
+        font-weight: 600;
+      }
+
+      .user-handle {
+        font-size: 0.875rem;
+        color: var(--gray-500);
+      }
+
+      #error-banner {
+        position: fixed;
+        top: 1rem;
+        left: 50%;
+        transform: translateX(-50%);
+        background: var(--error-bg);
+        border: 1px solid var(--error-border);
+        color: var(--error-text);
+        padding: 0.75rem 1rem;
+        border-radius: 0.375rem;
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        max-width: 90%;
+        z-index: 100;
+      }
+
+      #error-banner.hidden {
+        display: none;
+      }
+
+      #error-banner button {
+        background: none;
+        border: none;
+        color: var(--error-text);
+        cursor: pointer;
+        font-size: 1.25rem;
+        line-height: 1;
+      }
+
+      .hidden {
+        display: none !important;
+      }
+
+      .rating-form {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .rating-slider-container {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+      }
+
+      .rating-display {
+        text-align: center;
+        font-size: 3rem;
+        font-weight: 700;
+        color: var(--primary-500);
+        margin: 0.5rem 0;
+      }
+
+      .rating-display.defunct {
+        color: var(--error-text);
+      }
+
+      .rating-slider {
+        width: 100%;
+        height: 8px;
+        -webkit-appearance: none;
+        appearance: none;
+        background: linear-gradient(to right, #32cd32 0%, #ffd700 50%, #ff5722 100%);
+        border-radius: 4px;
+        outline: none;
+      }
+
+      .rating-slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 24px;
+        height: 24px;
+        background: white;
+        border: 2px solid var(--primary-500);
+        border-radius: 50%;
+        cursor: pointer;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      }
+
+      .rating-slider::-moz-range-thumb {
+        width: 24px;
+        height: 24px;
+        background: white;
+        border: 2px solid var(--primary-500);
+        border-radius: 50%;
+        cursor: pointer;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      }
+
+      .rating-labels {
+        display: flex;
+        justify-content: space-between;
+        font-size: 0.875rem;
+        color: var(--gray-500);
+      }
+
+      textarea {
+        padding: 0.75rem;
+        border: 1px solid var(--border-color);
+        border-radius: 0.375rem;
+        font-size: 1rem;
+        resize: vertical;
+        min-height: 80px;
+        font-family: inherit;
+      }
+
+      textarea:focus {
+        outline: none;
+        border-color: var(--primary-500);
+        box-shadow: 0 0 0 3px rgba(0, 120, 255, 0.1);
+      }
+
+      .char-count {
+        text-align: right;
+        font-size: 0.75rem;
+        color: var(--gray-500);
+      }
+
+      .ratings-list {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .rating-item {
+        border-bottom: 1px solid var(--border-color);
+        padding-bottom: 1rem;
+      }
+
+      .rating-item:last-child {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+
+      .rating-header {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 0.5rem;
+      }
+
+      .service-favicon {
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+      }
+
+      .service-name {
+        font-weight: 600;
+        color: var(--gray-900);
+        flex: 1;
+      }
+
+      .rating-value {
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: var(--primary-500);
+      }
+
+      .rating-value.defunct {
+        color: var(--error-text);
+      }
+
+      .rating-meta {
+        font-size: 0.875rem;
+        color: var(--gray-500);
+        margin-bottom: 0.5rem;
+      }
+
+      .rating-comment {
+        color: var(--gray-700);
+        font-size: 0.875rem;
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 2rem;
+        color: var(--gray-500);
+      }
+
+      .section-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+        color: var(--gray-900);
+      }
+
+      .btn-block {
+        width: 100%;
+      }
+
+      /* Go90 Scale Interface */
+      .scale-container {
+        background: var(--go90-blue);
+        border: 4px solid var(--go90-yellow);
+        padding: 3rem 2rem;
+        border-radius: 8px;
+        margin-bottom: 2rem;
+        min-height: 600px;
+        position: relative;
+      }
+
+      .drag-canvas {
+        position: relative;
+        min-height: 500px;
+      }
+
+      .scale-bar-wrapper {
+        margin-bottom: 3rem;
+      }
+
+      .scale-labels {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+      }
+
+      .scale-label {
+        font-size: 3rem;
+        font-weight: 900;
+        color: var(--go90-yellow);
+      }
+
+      .scale-label.red {
+        color: #ff5555;
+      }
+
+      .scale-bar {
+        position: relative;
+        height: 80px;
+        background: linear-gradient(
+          to right,
+          #32cd32 0%,
+          #7fff00 10%,
+          #adff2f 20%,
+          #ffff00 30%,
+          #ffd700 40%,
+          #ffa500 50%,
+          #ff8c00 60%,
+          #ff6347 70%,
+          #ff4500 80%,
+          #dc143c 90%,
+          #8b0000 100%
+        );
+        border-radius: 12px;
+        border: 3px solid white;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        margin-bottom: 120px;
+        margin-top: 120px;
+      }
+
+      .scale-bar.drag-over {
+        box-shadow: 0 0 20px rgba(255, 255, 0, 0.8);
+        border-color: var(--go90-yellow);
+      }
+
+      .drop-zone {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 12px;
+      }
+
+      .service-on-scale {
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        cursor: move;
+        transition: transform 0.1s;
+      }
+
+      .service-on-scale:hover {
+        transform: translate(-50%, -50%) scale(1.1);
+      }
+
+      .service-logo-large {
+        width: 80px;
+        height: 80px;
+        border-radius: 12px;
+        background: white;
+        padding: 8px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+        border: 3px solid white;
+      }
+
+      .service-badge {
+        position: absolute;
+        bottom: -12px;
+        right: -12px;
+        background: black;
+        color: var(--go90-yellow);
+        font-size: 1.25rem;
+        font-weight: 900;
+        padding: 4px 12px;
+        border-radius: 50%;
+        border: 3px solid var(--go90-yellow);
+        min-width: 48px;
+        text-align: center;
+      }
+
+      .service-badge.defunct {
+        color: #ff5555;
+        border-color: #ff5555;
+      }
+
+      .services-bar {
+        background: black;
+        padding: 1.5rem;
+        border-radius: 8px;
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        flex-wrap: wrap;
+        min-height: 100px;
+      }
+
+      .service-item {
+        width: 80px;
+        height: 80px;
+        border-radius: 8px;
+        background: white;
+        padding: 8px;
+        cursor: grab;
+        transition:
+          transform 0.2s,
+          opacity 0.2s;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        position: relative;
+      }
+
+      .service-item:hover {
+        transform: scale(1.05);
+      }
+
+      .service-item:active {
+        cursor: grabbing;
+      }
+
+      .service-item.dragging {
+        opacity: 0.3;
+      }
+
+      .service-item.on-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      .service-logo {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+
+      .add-service-form {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        margin-top: 1rem;
+      }
+
+      .add-service-input {
+        flex: 1;
+        padding: 0.75rem;
+        border: 2px solid var(--gray-500);
+        border-radius: 4px;
+        background: var(--gray-900);
+        color: white;
+        font-size: 1rem;
+      }
+
+      .add-service-input:focus {
+        outline: none;
+        border-color: var(--go90-yellow);
+      }
+
+      .add-service-btn {
+        padding: 0.75rem 1.5rem;
+        background: var(--go90-yellow);
+        color: black;
+        border: none;
+        border-radius: 4px;
+        font-weight: 700;
+        cursor: pointer;
+        font-size: 1rem;
+      }
+
+      .add-service-btn:hover {
+        background: #ffff44;
+      }
+
+      .instructions {
+        text-align: center;
+        color: white;
+        font-size: 1.125rem;
+        margin-bottom: 2rem;
+        opacity: 0.9;
+      }
+
+      .save-button {
+        position: fixed;
+        bottom: 2rem;
+        right: 2rem;
+        padding: 1rem 2rem;
+        background: var(--go90-yellow);
+        color: black;
+        border: none;
+        border-radius: 8px;
+        font-weight: 900;
+        font-size: 1.25rem;
+        cursor: pointer;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        display: none;
+      }
+
+      .save-button.visible {
+        display: block;
+        animation: pulse 2s infinite;
+      }
+
+      .save-button:hover {
+        background: #ffff44;
+        transform: scale(1.05);
+      }
+
+      @keyframes pulse {
+        0%,
+        100% {
+          transform: scale(1);
+        }
+        50% {
+          transform: scale(1.05);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <header>
+        <svg class="logo" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+          <g transform="translate(64, 64)">
+            <ellipse cx="0" cy="-28" rx="50" ry="20" fill="#FF5722" />
+            <ellipse cx="0" cy="0" rx="60" ry="20" fill="#00ACC1" />
+            <ellipse cx="0" cy="28" rx="40" ry="20" fill="#32CD32" />
+          </g>
+        </svg>
+        <h1>Go90 Scale</h1>
+        <p class="tagline">Rate streaming services on the Go90 scale</p>
+      </header>
+      <main>
+        <div id="auth-section"></div>
+        <div id="content"></div>
+      </main>
+      <div id="error-banner" class="hidden"></div>
+      <button id="saveButton" class="save-button" onclick="saveAllRatings()">Save Ratings</button>
+    </div>
+
+    <!-- Quickslice Client SDK -->
+    <script src="https://cdn.jsdelivr.net/gh/bigmoves/quickslice@main/quickslice-client-js/dist/quickslice-client.min.js"></script>
+    <!-- Web Components -->
+    <script src="https://cdn.jsdelivr.net/gh/bigmoves/elements@v0.1.0/dist/elements.min.js"></script>
+    <script src="drag-fix.js"></script>
+
+    <script>
+      // =============================================================================
+      // CONFIGURATION
+      // =============================================================================
+
+      const SERVER_URL = "http://127.0.0.1:8080";
+      const CLIENT_ID = "client_Wpu1V7VdSi1eKI01JTsKOg"; // Set your OAuth client ID here after registering
+
+      let client;
+      let serviceMetadataCache = {};
+      let pendingRatings = {}; // Store ratings before saving
+
+      const defaultServices = [
+        { domain: "netflix.com", name: "Netflix" },
+        { domain: "youtube.com", name: "YouTube" },
+        { domain: "max.com", name: "HBO Max" },
+        { domain: "disneyplus.com", name: "Disney+" },
+        { domain: "hulu.com", name: "Hulu" },
+        { domain: "tv.apple.com", name: "Apple TV" },
+        { domain: "primevideo.com", name: "Prime Video" },
+        { domain: "peacocktv.com", name: "Peacock" },
+        { domain: "paramountplus.com", name: "Paramount+" },
+      ];
+
+      // =============================================================================
+      // INITIALIZATION
+      // =============================================================================
+
+      async function main() {
+        // Check for OAuth errors in URL
+        const params = new URLSearchParams(window.location.search);
+        if (params.has("error")) {
+          const error = params.get("error");
+          const description = params.get("error_description") || error;
+          showError(description);
+          // Clean up URL
+          window.history.replaceState({}, "", window.location.pathname);
+        }
+
+        if (window.location.search.includes("code=")) {
+          if (!CLIENT_ID) {
+            showError("OAuth callback received but CLIENT_ID is not configured.");
+            renderLoginForm();
+            return;
+          }
+
+          try {
+            client = await QuicksliceClient.createQuicksliceClient({
+              server: SERVER_URL,
+              clientId: CLIENT_ID,
+            });
+            await client.handleRedirectCallback();
+          } catch (error) {
+            console.error("OAuth callback error:", error);
+            showError(`Authentication failed: ${error.message}`);
+            renderLoginForm();
+            return;
+          }
+        } else if (CLIENT_ID) {
+          try {
+            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 = client && (await client.isAuthenticated());
+
+        if (isLoggedIn) {
+          try {
+            const viewer = await fetchViewer();
+            renderUserCard(viewer);
+            renderContent(viewer);
+          } catch (error) {
+            console.error("Failed to fetch viewer:", error);
+            renderUserCard(null);
+          }
+        } else {
+          renderLoginForm();
+        }
+      }
+
+      // =============================================================================
+      // DATA FETCHING
+      // =============================================================================
+
+      async function fetchViewer() {
+        const query = `
+          query {
+            viewer {
+              did
+              handle
+              appBskyActorProfileByDid {
+                displayName
+                avatar { url }
+              }
+            }
+          }
+        `;
+
+        const data = await client.query(query);
+        return data?.viewer;
+      }
+
+      async function fetchRatings() {
+        const query = `
+          query {
+            socialGo90Ratings(orderBy: CREATED_AT_DESC, first: 50) {
+              nodes {
+                id
+                serviceDomain
+                rating
+                comment
+                createdAt
+                author {
+                  handle
+                  appBskyActorProfileByDid {
+                    displayName
+                  }
+                }
+              }
+            }
+          }
+        `;
+
+        const data = await client.query(query);
+        return data?.socialGo90Ratings?.nodes || [];
+      }
+
+      async function fetchServiceMetadata(domain) {
+        if (serviceMetadataCache[domain]) {
+          return serviceMetadataCache[domain];
+        }
+
+        const metadata = {
+          name: domain,
+          favicon: `https://www.google.com/s2/favicons?domain=${domain}&sz=128`,
+        };
+
+        serviceMetadataCache[domain] = metadata;
+        return metadata;
+      }
+
+      // =============================================================================
+      // EVENT HANDLERS
+      // =============================================================================
+
+      async function handleLogin(event) {
+        event.preventDefault();
+
+        const handle = document.getElementById("handle").value.trim();
+
+        if (!handle) {
+          showError("Please enter your handle");
+          return;
+        }
+
+        try {
+          client = await QuicksliceClient.createQuicksliceClient({
+            server: SERVER_URL,
+            clientId: CLIENT_ID,
+          });
+
+          await client.loginWithRedirect({ handle });
+        } catch (error) {
+          showError(`Login failed: ${error.message}`);
+        }
+      }
+
+      function logout() {
+        if (client) {
+          client.logout();
+        } else {
+          window.location.reload();
+        }
+      }
+
+      async function handleRatingSubmit(event) {
+        event.preventDefault();
+
+        const serviceDomain = document.getElementById("serviceDomain").value.trim();
+        const rating = parseInt(document.getElementById("rating").value);
+        const comment = document.getElementById("comment").value.trim();
+
+        if (!serviceDomain) {
+          showError("Please enter a service domain");
+          return;
+        }
+
+        // Basic domain validation
+        if (!serviceDomain.includes(".") || serviceDomain.includes("/")) {
+          showError("Please enter a valid domain (e.g., netflix.com)");
+          return;
+        }
+
+        try {
+          const mutation = `
+            mutation CreateRating($input: CreateSocialGo90RatingInput!) {
+              createSocialGo90Rating(input: $input)
+            }
+          `;
+
+          const variables = {
+            input: {
+              serviceDomain,
+              rating,
+              comment: comment || undefined,
+              createdAt: new Date().toISOString(),
+            },
+          };
+
+          await client.query(mutation, variables);
+
+          // Clear form
+          document.getElementById("serviceDomain").value = "";
+          document.getElementById("rating").value = "45";
+          document.getElementById("comment").value = "";
+          updateRatingDisplay(45);
+
+          // Refresh ratings list
+          const viewer = await fetchViewer();
+          await renderContent(viewer);
+        } catch (error) {
+          console.error("Failed to submit rating:", error);
+          showError(`Failed to submit rating: ${error.message}`);
+        }
+      }
+
+      function updateRatingDisplay(value) {
+        const display = document.getElementById("ratingDisplay");
+        const isDefunct = value === 90;
+        display.textContent = value;
+        display.className = isDefunct ? "rating-display defunct" : "rating-display";
+      }
+
+      function updateCharCount() {
+        const comment = document.getElementById("comment").value;
+        const count = document.getElementById("charCount");
+        count.textContent = `${comment.length}/300`;
+      }
+
+      // OLD:       function initDragAndDrop() {
+      // OLD:         const serviceItems = document.querySelectorAll(".service-item");
+      // OLD:         const dropZone = document.getElementById("dropZone");
+      // OLD:         const scaleBar = document.getElementById("scaleBar");
+      // OLD:
+      // OLD:         serviceItems.forEach((item) => {
+      // OLD:           item.addEventListener("dragstart", handleDragStart);
+      // OLD:           item.addEventListener("dragend", handleDragEnd);
+      // OLD:         });
+      // OLD:
+      // OLD:         dropZone.addEventListener("dragover", handleDragOver);
+      // OLD:         dropZone.addEventListener("drop", handleDrop);
+      // OLD:         dropZone.addEventListener("dragleave", handleDragLeave);
+      // OLD:       }
+      // OLD:
+      // OLD:       let draggedItem = null;
+      // OLD:
+      // OLD:       function handleDragStart(e) {
+      // OLD:         draggedItem = e.target;
+      // OLD:         e.target.classList.add("dragging");
+      // OLD:       }
+      // OLD:
+      // OLD:       function handleDragEnd(e) {
+      // OLD:         e.target.classList.remove("dragging");
+      // OLD:         // Don't clear draggedItem here - it's needed in handleDrop
+      // OLD:         setTimeout(() => {
+      // OLD:           draggedItem = null;
+      // OLD:         }, 100);
+      // OLD:       }
+      // OLD:
+      // OLD:       function handleDragOver(e) {
+      // OLD:         e.preventDefault();
+      // OLD:         document.getElementById("scaleBar").classList.add("drag-over");
+      // OLD:       }
+      // OLD:
+      // OLD:       function handleDragLeave(e) {
+      // OLD:         if (e.target === document.getElementById("dropZone")) {
+      // OLD:           document.getElementById("scaleBar").classList.remove("drag-over");
+      // OLD:         }
+      // OLD:       }
+      // OLD:
+      // OLD:       async function handleDrop(e) {
+      // OLD:         e.preventDefault();
+      // OLD:         document.getElementById("scaleBar").classList.remove("drag-over");
+      // OLD:
+      // OLD:         if (!draggedItem) return;
+      // OLD:
+      // OLD:         const domain = draggedItem.dataset.domain;
+      // OLD:         const name = draggedItem.dataset.name;
+      // OLD:
+      // OLD:         // Calculate rating and position based on drop location
+      // OLD:         const scaleBar = document.getElementById("scaleBar");
+      // OLD:         const rect = scaleBar.getBoundingClientRect();
+      // OLD:         const x = e.clientX - rect.left;
+      // OLD:         const y = e.clientY - rect.top;
+      // OLD:
+      // OLD:         const percentageX = Math.max(0, Math.min(100, (x / rect.width) * 100));
+      // OLD:         const rating = Math.round((percentageX / 100) * 90);
+      // OLD:
+      // OLD:         // Allow vertical offset from center
+      // OLD:         const offsetY = y - rect.height / 2;
+      // OLD:
+      // OLD:         // Store in pending ratings (don't submit yet)
+      // OLD:         pendingRatings[domain] = {
+      // OLD:           domain,
+      // OLD:           name,
+      // OLD:           rating,
+      // OLD:           percentageX,
+      // OLD:           offsetY,
+      // OLD:         };
+      // OLD:
+      // OLD:         // Don't mark as rated - allow re-dragging
+      // OLD:         // draggedItem.classList.add("rated");
+      // OLD:
+      // OLD:         // Add service to scale
+      // OLD:         addServiceToScale(domain, name, rating, percentageX, offsetY);
+      // OLD:
+      // OLD:         // Show save button
+      // OLD:         updateSaveButton();
+      // OLD:       }
+      // OLD:
+      async function submitRating(serviceDomain, rating, comment = "") {
+        try {
+          const mutation = `
+            mutation CreateRating($input: CreateSocialGo90RatingInput!) {
+              createSocialGo90Rating(input: $input)
+            }
+          `;
+
+          const input = {
+            serviceDomain: serviceDomain,
+            rating: rating,
+            createdAt: new Date().toISOString(),
+          };
+
+          // Only add comment if it exists
+          if (comment && comment.trim()) {
+            input.comment = comment.trim();
+          }
+
+          const variables = { input };
+
+          await client.query(mutation, variables);
+        } catch (error) {
+          console.error("Failed to submit rating:", error);
+          showError(`Failed to submit rating: ${error.message}`);
+          throw error;
+        }
+      }
+      // OLD:
+      // OLD:       function addServiceToScale(domain, name, rating, percentageX, offsetY = 0) {
+      // OLD:         const scaleBar = document.getElementById("scaleBar");
+      // OLD:
+      // OLD:         // Remove existing rating for this service
+      // OLD:         const existing = scaleBar.querySelector(`[data-scale-domain="${domain}"]`);
+      // OLD:         if (existing) existing.remove();
+      // OLD:
+      // OLD:         const serviceEl = document.createElement("div");
+      // OLD:         serviceEl.className = "service-on-scale";
+      // OLD:         serviceEl.dataset.scaleDomain = domain;
+      // OLD:         serviceEl.style.left = `${percentageX}%`;
+      // OLD:         serviceEl.style.top = `calc(50% + ${offsetY}px)`;
+      // OLD:         serviceEl.draggable = true;
+      // OLD:         serviceEl.innerHTML = `
+      // OLD:           <img src="https://www.google.com/s2/favicons?domain=${domain}&sz=128"
+      // OLD:                alt="${name}"
+      // OLD:                class="service-logo-large">
+      // OLD:           <div class="service-badge ${rating === 90 ? "defunct" : ""}">${rating}</div>
+      // OLD:         `;
+      // OLD:
+      // OLD:         // Make it re-draggable to update rating
+      // OLD:         serviceEl.addEventListener("dragstart", (e) => {
+      // OLD:           draggedItem = { dataset: { domain, name } };
+      // OLD:           e.target.classList.add("dragging");
+      // OLD:         });
+      // OLD:
+      // OLD:         serviceEl.addEventListener("dragend", (e) => {
+      // OLD:           e.target.classList.remove("dragging");
+      // OLD:           e.target.remove(); // Remove from scale when re-dragging
+      // OLD:         });
+      // OLD:
+      // OLD:         scaleBar.appendChild(serviceEl);
+      // OLD:       }
+      // OLD:
+      async function addCustomService(e) {
+        if (e) e.preventDefault();
+
+        const input = document.getElementById("customServiceDomain");
+        const domain = input.value.trim();
+
+        if (!domain) {
+          showError("Please enter a domain");
+          return;
+        }
+
+        if (!domain.includes(".") || domain.includes("/")) {
+          showError("Please enter a valid domain (e.g., dropout.tv)");
+          return;
+        }
+
+        // Add to services bar
+        const servicesBar = document.getElementById("servicesBar");
+        const serviceEl = document.createElement("div");
+        serviceEl.className = "service-item";
+        serviceEl.dataset.domain = domain;
+        serviceEl.dataset.name = domain;
+        serviceEl.innerHTML = `
+          <img src="https://www.google.com/s2/favicons?domain=${domain}&sz=128"
+               alt="${domain}"
+               class="service-logo"
+               draggable="false">
+        `;
+
+        setupServiceDrag(serviceEl);
+        servicesBar.appendChild(serviceEl);
+        input.value = "";
+      }
+
+      function updateSaveButton() {
+        const saveButton = document.getElementById("saveButton");
+        const hasRatings = Object.keys(pendingRatings).length > 0;
+
+        if (hasRatings) {
+          saveButton.classList.add("visible");
+        } else {
+          saveButton.classList.remove("visible");
+        }
+      }
+
+      async function saveAllRatings() {
+        const saveButton = document.getElementById("saveButton");
+        saveButton.disabled = true;
+        saveButton.textContent = "Saving...";
+
+        try {
+          for (const [domain, data] of Object.entries(pendingRatings)) {
+            await submitRating(data.domain, data.rating);
+          }
+
+          // Clear pending ratings (but keep services on canvas)
+          pendingRatings = {};
+          updateSaveButton();
+
+          saveButton.textContent = "Saved!";
+          setTimeout(() => {
+            saveButton.textContent = "Save Ratings";
+            saveButton.disabled = false;
+          }, 2000);
+        } catch (error) {
+          saveButton.textContent = "Save Ratings";
+          saveButton.disabled = false;
+          showError("Failed to save some ratings. Please try again.");
+        }
+      }
+
+      // =============================================================================
+      // UI RENDERING
+      // =============================================================================
+
+      function showError(message) {
+        const banner = document.getElementById("error-banner");
+        banner.innerHTML = `
+          <span>${escapeHtml(message)}</span>
+          <button onclick="hideError()">&times;</button>
+        `;
+        banner.classList.remove("hidden");
+      }
+
+      function hideError() {
+        document.getElementById("error-banner").classList.add("hidden");
+      }
+
+      function escapeHtml(text) {
+        const div = document.createElement("div");
+        div.textContent = text;
+        return div.innerHTML;
+      }
+
+      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: 1rem;">
+                <strong>Configuration Required</strong>
+              </p>
+              <p style="color: var(--gray-700); text-align: center;">
+                Set the <code style="background: var(--gray-100); padding: 0.125rem 0.375rem; border-radius: 0.25rem;">CLIENT_ID</code> constant after registering an OAuth client.
+              </p>
+            </div>
+          `;
+          return;
+        }
+
+        container.innerHTML = `
+          <div class="card">
+            <form class="login-form" onsubmit="handleLogin(event)">
+              <div class="form-group">
+                <label for="handle">AT Protocol Handle</label>
+                <qs-actor-autocomplete
+                  id="handle"
+                  name="handle"
+                  placeholder="you.bsky.social"
+                  required
+                ></qs-actor-autocomplete>
+              </div>
+              <button type="submit" class="btn btn-primary">Login</button>
+            </form>
+          </div>
+        `;
+      }
+
+      function renderUserCard(viewer) {
+        const container = document.getElementById("auth-section");
+        const displayName = viewer?.appBskyActorProfileByDid?.displayName || "User";
+        const handle = viewer?.handle || "unknown";
+        const avatarUrl = viewer?.appBskyActorProfileByDid?.avatar?.url;
+
+        container.innerHTML = `
+          <div class="card user-card">
+            <div class="user-info">
+              <div class="user-avatar">
+                ${avatarUrl ? `<img src="${escapeHtml(avatarUrl)}" alt="Avatar">` : "👤"}
+              </div>
+              <div>
+                <div class="user-name">Hi, ${escapeHtml(displayName)}!</div>
+                <div class="user-handle">@${escapeHtml(handle)}</div>
+              </div>
+            </div>
+            <button class="btn btn-secondary" onclick="logout()">Logout</button>
+          </div>
+        `;
+      }
+
+      async function renderContent(viewer) {
+        const container = document.getElementById("content");
+
+        container.innerHTML = `
+          <div class="instructions">
+            Drag services anywhere to rate them! Drop on the bar to remove rating.
+          </div>
+
+          <div class="scale-container drag-canvas" id="dragCanvas">
+            <div class="scale-bar-wrapper">
+              <div class="scale-labels">
+                <span class="scale-label">0</span>
+                <span class="scale-label red">90</span>
+              </div>
+              <div class="scale-bar" id="scaleBar"></div>
+            </div>
+
+            <div class="services-bar" id="servicesBar">
+              ${defaultServices
+                .map(
+                  (service) => `
+                <div class="service-item"
+                     data-domain="${service.domain}"
+                     data-name="${service.name}">
+                  <img src="https://www.google.com/s2/favicons?domain=${service.domain}&sz=128"
+                       alt="${service.name}"
+                       class="service-logo"
+                       draggable="false">
+                </div>
+              `,
+                )
+                .join("")}
+            </div>
+
+            <form class="add-service-form" onsubmit="addCustomService(event)">
+              <input type="text"
+                     id="customServiceDomain"
+                     class="add-service-input"
+                     placeholder="Enter a domain (e.g., dropout.tv)">
+              <button type="submit" class="add-service-btn">Add Service</button>
+            </form>
+          </div>
+        `;
+
+        initDragAndDrop();
+        await loadExistingRatings();
+      }
+
+      window.existingRatings = {}; // Store existing ratings globally
+
+      async function loadExistingRatings() {
+        try {
+          // Fetch viewer's own ratings
+          const query = `
+            query {
+              viewer {
+                did
+              }
+              socialGo90Ratings(orderBy: CREATED_AT_DESC, first: 100) {
+                nodes {
+                  id
+                  serviceDomain
+                  rating
+                  author {
+                    did
+                  }
+                }
+              }
+            }
+          `;
+
+          const data = await client.query(query);
+          const viewerDid = data?.viewer?.did;
+          const allRatings = data?.socialGo90Ratings?.nodes || [];
+
+          // Filter to only viewer's ratings
+          const myRatings = allRatings.filter((r) => r.author?.did === viewerDid);
+
+          // Store ratings in global object
+          myRatings.forEach((rating) => {
+            window.existingRatings[rating.serviceDomain] = rating.rating;
+          });
+
+          // Update badges on services in the bar
+          updateServiceBadges();
+
+          const scaleBar = document.getElementById("scaleBar");
+          const scaleBarRect = scaleBar.getBoundingClientRect();
+          const canvas = document.getElementById("dragCanvas");
+          const canvasRect = canvas.getBoundingClientRect();
+
+          // Load viewer's ratings onto canvas
+          for (const rating of myRatings) {
+            // Calculate position based on rating value
+            const percentageX = (rating.rating / 90) * 100;
+            const scaleX = scaleBarRect.left + (percentageX / 100) * scaleBarRect.width;
+            const scaleY = scaleBarRect.top + scaleBarRect.height / 2;
+
+            // Convert to canvas coordinates
+            const canvasX = scaleX - canvasRect.left;
+            const canvasY = scaleY - canvasRect.top;
+
+            // Place on canvas
+            placeServiceOnCanvas(
+              rating.serviceDomain,
+              rating.serviceDomain,
+              rating.rating,
+              canvasX,
+              canvasY,
+            );
+          }
+        } catch (error) {
+          console.error("Failed to load existing ratings:", error);
+        }
+      }
+
+      function updateServiceBadges() {
+        const servicesBar = document.getElementById("servicesBar");
+        if (!servicesBar) return;
+
+        const serviceItems = servicesBar.querySelectorAll(".service-item");
+
+        serviceItems.forEach((item) => {
+          const domain = item.dataset.domain;
+          const rating = window.existingRatings[domain];
+
+          // Remove existing badge if any
+          const existingBadge = item.querySelector(".service-badge");
+          if (existingBadge) existingBadge.remove();
+
+          // Add badge if there's a rating
+          if (rating !== undefined) {
+            const badge = document.createElement("div");
+            badge.className = `service-badge ${rating === 90 ? "defunct" : ""}`;
+            badge.textContent = rating;
+            item.appendChild(badge);
+          }
+        });
+      }
+
+      async function renderRatingsList(ratings) {
+        const container = document.getElementById("ratingsList");
+
+        if (!ratings || ratings.length === 0) {
+          container.innerHTML = `
+            <div class="empty-state">No ratings yet. Be the first to rate a service!</div>
+          `;
+          return;
+        }
+
+        let html = '<div class="ratings-list">';
+
+        for (const rating of ratings) {
+          const metadata = await fetchServiceMetadata(rating.serviceDomain);
+          const displayName =
+            rating.author?.appBskyActorProfileByDid?.displayName ||
+            rating.author?.handle ||
+            "Anonymous";
+          const isDefunct = rating.rating === 90;
+          const ratingClass = isDefunct ? "rating-value defunct" : "rating-value";
+          const date = new Date(rating.createdAt).toLocaleDateString();
+
+          html += `
+            <div class="rating-item">
+              <div class="rating-header">
+                <img src="${escapeHtml(metadata.favicon)}" alt="" class="service-favicon" onerror="this.style.display='none'" />
+                <span class="service-name">${escapeHtml(metadata.name)}</span>
+                <span class="${ratingClass}">${rating.rating}</span>
+              </div>
+              <div class="rating-meta">
+                Rated by ${escapeHtml(displayName)} (@${escapeHtml(rating.author?.handle)}) on ${date}
+              </div>
+              ${rating.comment ? `<div class="rating-comment">${escapeHtml(rating.comment)}</div>` : ""}
+            </div>
+          `;
+        }
+
+        html += "</div>";
+        container.innerHTML = html;
+      }
+
+      main();
+    </script>
+  </body>
+</html>