diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 00000000..1c211c1e
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,84 @@
+# Bitvid — AI Agent Guide
+
+This guide tells AI agents how to keep Bitvid aligned with the current product direction. Follow it whenever you touch code, content, or documentation inside this repository.
+
+---
+
+## 1. Release Channels: Main vs. Unstable
+
+* **Main** is the production track. Anything merged here must preserve today’s UX and magnet safety guarantees. Rollbacks should be painless: keep commits atomic, avoid destructive migrations, and leave feature flags in a known-good default (`false` unless product explicitly flips them).
+* **Unstable** is our experimentation lane. Gate risky behavior behind feature flags defined in `js/constants.js` and document the toggle/rollback plan in PR descriptions.
+* **Emergency response:** If a change regresses URL-first playback or breaks magnet parsing, revert immediately and annotate the AGENTS.md changelog with remediation tips so future agents do not repeat the mistake.
+
+## 2. Mission: URL‑First Playback with WebTorrent Fallback
+
+* **Goal:** Always deliver smooth playback while keeping hosting costs low.
+* **Primary transport:** A hosted video URL (MP4/WebM/HLS/DASH) that the `<video>` element can stream directly.
+* **Fallback transport:** A WebTorrent magnet that includes browser‑safe trackers plus optional HTTP hints.
+* **Runtime behavior:** Call `playVideoWithFallback({ url, magnet })` (see `js/playbackUtils.js`). It probes the URL first; only when that fails should WebTorrent start.
+* **Content contract:** Bitvid posts (Nostr kind `30078`) must include a `title` and at least one of `url` or `magnet`. Prefer to publish both along with optional `thumbnail`, `description`, and `mode` fields. When mirroring to NIP‑94 (`kind 1063`), copy the hosted URL and (optionally) the magnet so other clients can discover the same asset.
+
+---
+
+## 3. Magnet Handling — Do’s & Don’ts
+
+* **Use the helpers every time:** Always run inbound values through `safeDecodeMagnet()` before playback or normalization, and call `normalizeAndAugmentMagnet()` (see `js/magnetUtils.js`) to append `ws=` / `xs=` hints without mutating hashes.
+* **Keep magnets raw:** Persist the literal `magnet:?xt=urn:btih:...` string. Decode once, then feed that exact value to WebTorrent or storage. Never rely on re-encoding helpers that might alter casing.
+* **Never call `new URL()` on magnets:** URL constructors/`URLSearchParams` percent-encode the `xt` payload and corrupt legacy hashes. Manipulate magnets with the helper utilities or string functions that respect the raw hash.
+* **HTTP hints:** Encourage HTTPS `ws=` web seeds (file roots only) and HTTPS `xs=` pointers to `.torrent` files so fallback peers warm quickly.
+* **Tracker policy:** Browser code must ship WSS trackers only. Pull the canonical list from `js/constants.js`; do not add UDP or plaintext HTTP trackers.
+
+---
+
+## 4. Upload Modal Troubleshooting
+
+1. **Required fields:** Validation must ensure a title exists and that either a hosted URL or a magnet (or both) is supplied. Optional `ws` / `xs` inputs should be appended only when a magnet is present.
+2. **Magnet parsing errors:** When a user pastes encoded magnets, run `safeDecodeMagnet()` before normalizing. Show inline errors if decoding fails and confirm the raw `magnet:?xt=` string survives the round trip.
+3. **URL-first promise:** After submission, confirm the resulting feed item carries `data-play-url` and `data-play-magnet` attributes so playback utilities can attempt the URL first.
+4. **Mixed-content warnings:** If the page is served over HTTPS, reject `ws=` or `xs=` hints that begin with `http://` and show guidance to upgrade to HTTPS. Document the copy in README/UX strings so operators can align messaging.
+5. **Telemetry hooks:** Keep existing analytics/logging untouched unless instructed. If you add new modal states, annotate them clearly in code comments.
+6. **Modal regressions:** If validation or helper wiring breaks in Main, disable new feature flags and ship a revert PR immediately. Note the rollback steps in AGENTS.md for posterity.
+
+---
+
+## 5. Manual QA Checklist
+
+Run this script before shipping notable UI changes, especially around upload/playback flows. Automate when possible, but manual verification is required for releases.
+
+1. **Smoke test the modal**
+   * Launch the site, open the Upload modal, and confirm required-field validation (title + one of URL/magnet).
+   * Submit with URL only, magnet only, and both; ensure success states are clear.
+2. **URL-first playback**
+   * Publish a post with both URL and magnet. Load the card and verify the player fetches the hosted URL first (check network tab or logs).
+   * Temporarily block the URL (e.g., devtools throttling or offline). Confirm playback seamlessly falls back to the magnet.
+3. **Magnet hygiene**
+   * Paste an encoded magnet; ensure `safeDecodeMagnet()` returns the raw value and the final string still includes the original `xt` hash.
+   * Confirm `normalizeAndAugmentMagnet()` appends `ws=`/`xs=` hints without corrupting parameters.
+4. **P2P hints**
+   * Verify magnets authored through the modal include HTTPS `ws=` and optional `xs=` values when provided.
+   * Ensure tracker lists come from `js/constants.js` and remain WSS-only.
+5. **Cross-browser sanity**
+   * Spot-check playback in Chromium and Firefox (desktop) to ensure no console errors related to CORS, Range requests, or tracker connections.
+
+Document the run in PR descriptions so QA can cross-reference results.
+
+---
+
+## 6. Additional Notes for Agents
+
+* **Nostr interoperability:** Keep kind `30078` events as the source of truth and optionally mirror to kind `1063` so external clients see the hosted URL.
+* **Probing:** Lightweight `HEAD`/`GET` requests should back `probeUrl()` so dead URLs can be hidden or flagged without blocking the UI.
+* **Extensibility:** Future work (live streams, NIP-96 uploads, analytics) should preserve the URL-first strategy and magnet safety rules above.
+
+---
+
+## 7. Content Schema v3 & Playback Rules
+
+* **Event payloads:** New video notes serialize as version `3` with the JSON shape:
+  `{ "version": 3, "title": string, "url"?: string, "magnet"?: string, "thumbnail"?: string, "description"?: string, "mode": "live"|"dev", "isPrivate": boolean, "deleted": boolean, "videoRootId": string }`.
+* **Validation:** Every note must include a non-empty `title` plus at least one playable source (`url` or `magnet`). URL-only and magnet-only posts are both valid. Legacy v2 magnet notes stay readable.
+* **Upload UX:** The modal collects a hosted HTTPS URL and/or magnet. Enforce HTTPS for direct playback while keeping magnets optional when a URL is supplied.
+* **Playback orchestration:** `playVideoWithFallback` probes and plays the HTTPS URL first, watches for stalls/errors, and then falls back to WebTorrent. When both sources exist, pass the hosted URL through to WebTorrent as a webseed hint.
+* **Status messaging:** Update modal copy to reflect whether playback is direct or via P2P so regressions surface quickly during QA.
+
+**End of AGENTS.md**
diff --git a/README.md b/README.md
index 9b46b0ed..33647842 100644
--- a/README.md
+++ b/README.md
@@ -26,11 +26,25 @@
 1. **Visit the Site**: Navigate to the live instance of **bitvid** (e.g., `[https://bitvid.network](https://bitvid.network)`).
 2. **Login with Nostr**:
    - Use a compatible Nostr browser extension or manually input your public key.
-3. **Upload Videos**:
-   - Provide a title, magnet link, and optional thumbnail or description.
-   - Toggle "Private" for encrypted listings.
-4. **Stream Videos**:
-   - Play videos directly in the browser using WebTorrent technology.
+
+### Post a video
+
+The upload modal enforces **Title + (URL or Magnet)**. Hosted URLs are strongly recommended so the player can start instantly, and you may also add a magnet for resilience.
+
+- **Title**: Required. Matches the in-app validation copy.
+- **Hosted URL (recommended)**: Supply an HTTPS MP4/WebM/HLS/DASH asset. This is the primary playback path.
+- **Magnet (optional but encouraged)**: Paste the literal `magnet:?xt=urn:btih:...` string. The form decodes it with `safeDecodeMagnet()` to prevent hash corruption. Never wrap magnets in `new URL()`—store them raw or decode then pass directly to the helpers.
+- **Web seeds (`ws=`)**: HTTPS only. Point to a file root (e.g., `https://cdn.example.com/video/`). Mixed-content (`http://`) hints are rejected just like the modal message explains.
+- **Additional sources (`xs=`)**: Recommend adding an HTTPS `.torrent` link so WebTorrent peers can bootstrap faster.
+- **Trackers**: Bitvid’s browser client only connects to WSS trackers shipped in `js/constants.js`. Do not add UDP or plaintext HTTP trackers to published magnets.
+- **Private toggle**: Encrypts the listing for invited viewers.
+
+### How playback works
+
+1. **URL-first**: `playVideoWithFallback({ url, magnet })` attempts the hosted URL immediately. Healthy URLs deliver the full experience without touching P2P resources.
+2. **WebTorrent fallback**: If the URL probe fails or returns an error status, Bitvid falls back to WebTorrent using the raw magnet. The helpers append HTTPS `ws=`/`xs=` hints so peers seed quickly.
+3. **Safety checks**: Magnets are decoded with `safeDecodeMagnet()` and normalized via `normalizeAndAugmentMagnet()` before reaching WebTorrent. Trackers remain WSS-only to satisfy browser constraints.
+4. **Operator playbook**: If a deployment causes playback regressions, flip the relevant feature flags back to their default values in `js/constants.js` and redeploy. Capture the rollback steps in AGENTS.md and the PR description so the Main channel stays stable.
 
 ---
 
@@ -67,6 +81,10 @@ To run **bitvid** locally:
 
 - **`config.js`**:
   - Toggle `isDevMode` for development (`true`) or production (`false`).
+- **`js/constants.js`**:
+  - Source for browser-safe tracker lists and feature flags that govern WebTorrent behavior.
+- **Magnet helpers**:
+  - Use `safeDecodeMagnet()` and `normalizeAndAugmentMagnet()` from `js/magnetUtils.js` to preserve hashes and add `ws=` / `xs=` hints safely.
 
 ### Adding Features
 
@@ -101,6 +119,21 @@ To run **bitvid** locally:
 - Follow the [MIT License](https://opensource.org/licenses/MIT).
 - Use clear, concise commit messages.
 - Respect the existing coding style and architecture.
+- Run the manual QA script (see below) and note results in PR descriptions for changes that affect upload or playback.
+
+---
+
+## Testing
+
+Use the manual QA checklist before releases or when altering upload/playback flows:
+
+1. Open the Upload modal, confirm validation (title plus URL or magnet), and test submissions for URL-only, magnet-only, and combined entries.
+2. Publish a post with both URL and magnet, verify the player streams the hosted URL, then simulate a URL failure and confirm WebTorrent playback.
+3. Paste encoded magnets to ensure `safeDecodeMagnet()` returns the raw string and `normalizeAndAugmentMagnet()` adds `ws=` / `xs=` hints without corruption.
+4. Confirm magnets include HTTPS `ws=` / optional `xs=` hints and use the WSS tracker list from `js/constants.js`.
+5. Spot-check Chromium and Firefox for console warnings (CORS, Range requests, tracker connectivity).
+
+See [`docs/qa.md`](docs/qa.md) for the copy/paste-friendly checklist we share with QA.
 
 ---
 
diff --git a/assets/svg/lightning-bolt.svg b/assets/svg/lightning-bolt.svg
new file mode 100644
index 00000000..db4c7623
--- /dev/null
+++ b/assets/svg/lightning-bolt.svg
@@ -0,0 +1,13 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="white"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+</svg>
diff --git a/blog.html b/blog.html
index bd41b469..395c5be8 100644
--- a/blog.html
+++ b/blog.html
@@ -34,6 +34,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title></title>
+    <script src="./js/tracking.js" defer></script>
     <script type="module" crossorigin>
       var pv = Object.defineProperty;
       var gv = (e, t, n) =>
diff --git a/components/sidebar.html b/components/sidebar.html
index 21180f22..beaab150 100644
--- a/components/sidebar.html
+++ b/components/sidebar.html
@@ -1,6 +1,11 @@
+<!--
+  Sidebar fades in once when hydrated on the client. js/index.js removes the
+  helper classes after the initial animation to avoid flashes each time we
+  re-render navigation links.
+-->
 <aside
   id="sidebar"
-  class="bg-gray-900 text-white transition-transform duration-300 ease-in-out fixed top-0 left-0 w-64 h-screen overflow-y-auto"
+  class="bg-gray-900 text-white transition-transform duration-300 ease-in-out fixed top-0 left-0 w-64 h-screen overflow-y-auto fade-in fade-in-delay-100"
 >
   <div class="flex flex-col h-full">
     <!-- Top Navigation Links -->
@@ -45,178 +50,182 @@
       </div>
     </div>
 
-    <!-- Mobile Dropdown Button for Footer Links -->
-    <!-- Added p-4 around the button for spacing, and styling consistent with top links -->
-    <div class="md:hidden p-4">
-      <button
-        id="footerDropdownButton"
-        class="flex items-center w-full py-2 px-4 bg-gray-800 hover:bg-gray-700 text-sm font-semibold text-gray-100 rounded shadow-md focus:outline-none transition-colors duration-200"
-      >
-        <!-- Arrow on the left side -->
-        <svg
-          id="footerDropdownIcon"
-          class="w-4 h-4 mr-2 transform transition-transform duration-300"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M19 9l-7 7-7-7"
-          />
-        </svg>
-        <span id="footerDropdownText">More</span>
-      </button>
-    </div>
-
-    <!-- Footer Links Container -->
-    <!-- On mobile: hidden by default; on desktop: visible and pushed to the bottom -->
-    <div id="footerLinksContainer" class="hidden md:block md:mt-auto">
-      <hr class="border-gray-700" />
+    <!-- Footer Links Toggle -->
+    <div class="md:mt-auto">
       <div class="p-4">
-        <nav class="space-y-2 text-sm opacity-70">
-          <a
-            href="#view=about"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+        <button
+          id="footerDropdownButton"
+          type="button"
+          class="flex items-center w-full py-2 px-4 bg-gray-800 hover:bg-gray-700 text-sm font-semibold text-gray-100 rounded shadow-md focus:outline-none transition-colors duration-200"
+          aria-expanded="false"
+          aria-controls="footerLinksContainer"
+        >
+          <!-- Arrow on the left side -->
+          <svg
+            id="footerDropdownIcon"
+            class="w-4 h-4 mr-2 transform transition-transform duration-300"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
           >
-            <img
-              src="assets/svg/about-icon.svg"
-              alt="About"
-              class="w-5 h-5 mr-3"
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 9l-7 7-7-7"
             />
-            <span class="sidebar-text">About</span>
-          </a>
-          <a
-            href="#view=community-guidelines"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/guidelines-icon.svg"
-              alt="Guidelines"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">Guidelines</span>
-          </a>
-          <a
-            href="#view=getting-started"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/getting-started-icon.svg"
-              alt="Getting Started"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">Getting Started</span>
-          </a>
-          <a
-            href="#view=roadmap"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/roadmap-icon.svg"
-              alt="Roadmap"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">Roadmap</span>
-          </a>
-          <a
-            href="#view=blog"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/blog-icon.svg"
-              alt="Blog"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">Blog</span>
-          </a>
-          <a
-            href="https://primal.net/p/npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/nostr-icon.svg"
-              alt="Nostr"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">Nostr</span>
-          </a>
-          <a
-            href="https://github.com/PR0M3TH3AN/bitvid"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/github-icon.svg"
-              alt="GitHub"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">GitHub</span>
-          </a>
-          <a
-            href="torrent/beacon.html"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/beacon-icon.svg"
-              alt="βeacon"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">βeacon</span>
-          </a>
-          <a
-            href="https://beta.bitvid.network/"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/beta-icon.svg"
-              alt="Beta"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">Beta</span>
-          </a>
-          <a
-            href="#view=links"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/links-icon.svg"
-              alt="Links"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">Links</span>
-          </a>
-          <a
-            href="#view=ipns"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/ipns-icon.svg"
-              alt="IPNS"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">IPNS</span>
-          </a>
-          <a
-            href="https://bitvid.network/"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img src="assets/svg/dns-icon.svg" alt="DNS" class="w-5 h-5 mr-3" />
-            <span class="sidebar-text">DNS</span>
-          </a>
-        </nav>
+
+          </svg>
+          <span id="footerDropdownText">More</span>
+        </button>
+      </div>
+
+      <!-- Footer Links Container -->
+      <div id="footerLinksContainer" class="hidden">
+        <hr class="border-gray-700" />
+        <div class="p-4">
+          <nav class="space-y-2 text-sm opacity-70">
+            <a
+              href="#view=about"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/about-icon.svg"
+                alt="About"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">About</span>
+            </a>
+            <a
+              href="#view=community-guidelines"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/guidelines-icon.svg"
+                alt="Guidelines"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">Guidelines</span>
+            </a>
+            <a
+              href="#view=getting-started"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/getting-started-icon.svg"
+                alt="Getting Started"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">Getting Started</span>
+            </a>
+            <a
+              href="#view=roadmap"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/roadmap-icon.svg"
+                alt="Roadmap"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">Roadmap</span>
+            </a>
+            <a
+              href="#view=blog"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/blog-icon.svg"
+                alt="Blog"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">Blog</span>
+            </a>
+            <a
+              href="https://primal.net/p/npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/nostr-icon.svg"
+                alt="Nostr"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">Nostr</span>
+            </a>
+            <a
+              href="https://github.com/PR0M3TH3AN/bitvid"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/github-icon.svg"
+                alt="GitHub"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">GitHub</span>
+            </a>
+            <a
+              href="torrent/beacon.html"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/beacon-icon.svg"
+                alt="βeacon"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">βeacon</span>
+            </a>
+            <a
+              href="https://beta.bitvid.network/"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/beta-icon.svg"
+                alt="Beta"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">Beta</span>
+            </a>
+            <a
+              href="#view=links"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/links-icon.svg"
+                alt="Links"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">Links</span>
+            </a>
+            <a
+              href="#view=ipns"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/ipns-icon.svg"
+                alt="IPNS"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">IPNS</span>
+            </a>
+            <a
+              href="https://bitvid.network/"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img src="assets/svg/dns-icon.svg" alt="DNS" class="w-5 h-5 mr-3" />
+              <span class="sidebar-text">DNS</span>
+            </a>
+          </nav>
+        </div>
       </div>
     </div>
   </div>
@@ -228,18 +237,15 @@
       if (btn && footerLinks) {
         btn.addEventListener("click", function () {
           footerLinks.classList.toggle("hidden");
+          var isHidden = footerLinks.classList.contains("hidden");
+          btn.setAttribute("aria-expanded", String(!isHidden));
           var icon = document.getElementById("footerDropdownIcon");
           var textSpan = document.getElementById("footerDropdownText");
-          if (footerLinks.classList.contains("hidden")) {
-            textSpan.textContent = "More";
-            if (icon) {
-              icon.classList.remove("rotate-180");
-            }
-          } else {
-            textSpan.textContent = "Less";
-            if (icon) {
-              icon.classList.add("rotate-180");
-            }
+          if (textSpan) {
+            textSpan.textContent = isHidden ? "More" : "Less";
+          }
+          if (icon) {
+            icon.classList.toggle("rotate-180", !isHidden);
           }
         });
       }
diff --git a/components/upload-modal.html b/components/upload-modal.html
index fa01051e..d361a352 100644
--- a/components/upload-modal.html
+++ b/components/upload-modal.html
@@ -24,7 +24,7 @@
     >
       <!-- Top Bar (similar to video-modal) -->
       <div
-        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-300 p-4 flex items-center justify-between"
+        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-150 p-4 flex items-center justify-between"
       >
         <h2 class="text-xl font-bold text-white">Share a Video</h2>
         <button
@@ -52,6 +52,9 @@
       <!-- Form Content -->
       <div class="p-6 space-y-4">
         <form id="uploadForm" class="space-y-4">
+          <p class="text-sm text-gray-400">
+            Share a title plus either a hosted video URL or a magnet link. Providing both helps Bitvid fall back gracefully.
+          </p>
           <div>
             <label
               for="uploadTitle"
@@ -66,18 +69,57 @@
             />
           </div>
 
+          <!-- Hosted video URL -->
+          <div class="form-group">
+            <label
+              for="uploadUrl"
+              class="block text-sm font-medium text-gray-200"
+              >Hosted video URL (https)</label
+            >
+            <input
+              id="uploadUrl"
+              type="url"
+              class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+              placeholder="https://cdn.example.com/video.mp4"
+            />
+            <small class="mt-1 block text-xs text-gray-400"
+              >Optional but preferred. We will play this first and fall back to
+              P2P.</small
+            >
+          </div>
+
+          <!-- Optional: seed bootstraps for magnet -->
+          <div class="grid grid-cols-1 gap-3 mb-2 text-xs">
+            <input
+              id="uploadWs"
+              type="url"
+              class="w-full p-2 rounded"
+              placeholder="Web seed (ws=) e.g., https://cdn.example.com/video.mp4"
+            >
+            <input
+              id="uploadXs"
+              type="url"
+              class="w-full p-2 rounded"
+              placeholder=".torrent URL (xs=) e.g., https://cdn.example.com/video.torrent"
+            >
+          </div>
+
           <div>
             <label
               for="uploadMagnet"
               class="block text-sm font-medium text-gray-200"
-              >Magnet Link</label
+              >Magnet link (optional if URL provided)</label
             >
             <input
               type="text"
               id="uploadMagnet"
-              required
-              class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+              placeholder="magnet:?xt=urn:btih:..."
+              class="mt-1 block w-full rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
             />
+            <p class="mt-1 text-xs text-gray-400">
+              Provide a hosted URL for instant playback. Add a magnet for P2P
+              cost control.
+            </p>
           </div>
 
           <div>
diff --git a/components/video-modal.html b/components/video-modal.html
index 13202077..56df5588 100644
--- a/components/video-modal.html
+++ b/components/video-modal.html
@@ -9,7 +9,7 @@
       <!-- Navigation bar - sliding at top -->
       <div
         id="modalNav"
-        class="sticky top-0 z-60 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-300"
+        class="sticky top-0 z-60 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-150"
       >
         <div class="flex items-center px-6 py-4">
           <button
@@ -51,6 +51,19 @@
                 class="icon-image"
               />
             </button>
+            <!-- Zap Button (circular) -->
+            <button
+              id="modalZapBtn"
+              type="button"
+              class="icon-button"
+              aria-label="Send a zap"
+            >
+              <img
+                src="assets/svg/lightning-bolt.svg"
+                alt="Zap"
+                class="icon-image"
+              />
+            </button>
             <!-- Share Button (circular) -->
             <button id="shareBtn" class="icon-button">
               <img
diff --git a/content/roadmap.md b/content/roadmap.md
index 552f3509..a8a4fdd6 100644
--- a/content/roadmap.md
+++ b/content/roadmap.md
@@ -46,9 +46,9 @@
 - Add zaps to videos, profiles, and comments.
 - Create a VRR (View, Rating, and Retention) Penalty Scoring system. [Click for more details](https://github.com/PR0M3TH3AN/bitvid/blob/main/content/roadmap/07_bitvid_Enhanced_View_Rating_%26_Retention_Penalty_Scoring.md)
 - Implement visibility filtering for videos:
-  - Show only videos whose magnet links have at least **one active peer online**.
-  - Integrate the filtering mechanism into the video list rendering process.
-  - Update the video list dynamically based on real-time peer availability. (this may not be possible)
+  - Run lightweight URL-health probes so cards stay visible when the hosted playback link responds.
+  - When a URL is unreachable, fall back to WebTorrent and surface items only if their magnets can stream via peers or web seeds.
+  - Align the filtering logic with the player’s URL-first, WebTorrent-fallback behavior during list rendering.
 - Dynamic Home Page and Video Tracking Specification. [Click for more details](https://github.com/PR0M3TH3AN/bitvid/blob/main/content/roadmap/08_bitvid_Enhanced_Dynamic_Home_Page_%26_Video_Tracking_Specification.md)
 - Add multi-language support for content and filtration. (v4?)
 - Create a settings menu for local account preferences, including relay, adult content, theme, and language.
diff --git a/css/style.css b/css/style.css
index 839ecf2e..208e5552 100644
--- a/css/style.css
+++ b/css/style.css
@@ -8,6 +8,7 @@
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --modal-motion-duration: 160ms;
 }
 
 /* Core Styles */
@@ -73,6 +74,92 @@ header img {
   box-shadow: var(--shadow-md);
 }
 
+.video-card--enter {
+  opacity: 0;
+  animation: video-card-fade-in 220ms ease-out forwards;
+}
+
+@keyframes video-card-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/*
+  Thumbnails start transparent and fade in the first time they finish loading.
+  `data-thumbnail-loaded` is cleared by js/index.js once the animation completes
+  so re-rendering the same element later does not replay the transition and cause
+  a distracting flash.
+*/
+[data-video-thumbnail][data-thumbnail-loaded="true"] {
+  animation: video-thumbnail-fade-in 220ms ease-out forwards;
+}
+
+@keyframes video-thumbnail-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/*
+  Generic fade-in utility for chrome elements (sidebar, header controls, etc.).
+  js/index.js listens for the `interface-fade-in` animation finishing and removes
+  the temporary classes so that once an element has gracefully appeared it stays
+  opaque even if the DOM is re-used or re-parented later.
+*/
+
+.fade-in {
+  opacity: 0;
+  animation: interface-fade-in 280ms ease-out forwards;
+  animation-delay: var(--fade-in-delay, 0ms);
+}
+
+.fade-in-delay-100 {
+  --fade-in-delay: 100ms;
+}
+
+.fade-in-delay-200 {
+  --fade-in-delay: 200ms;
+}
+
+.fade-in-delay-300 {
+  --fade-in-delay: 300ms;
+}
+
+.fade-in-delay-400 {
+  --fade-in-delay: 400ms;
+}
+
+@keyframes interface-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .video-card--enter,
+  .fade-in {
+    opacity: 1;
+    animation: none;
+  }
+
+  [data-video-thumbnail][data-thumbnail-loaded="true"] {
+    animation: none;
+    opacity: 1;
+  }
+}
+
 .video-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
@@ -137,7 +224,7 @@ header img {
   display: flex;
   flex-direction: column;
   background-color: #0f172a;
-  animation: fadeIn 0.3s ease-in-out;
+  animation: fadeIn var(--modal-motion-duration) ease-out;
 }
 
 @keyframes fadeIn {
@@ -151,6 +238,12 @@ header img {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .modal-content {
+    animation-duration: 1ms;
+  }
+}
+
 /* Video Container */
 .video-container {
   width: 100%;
@@ -541,3 +634,60 @@ footer a:hover {
 #sidebar hr {
   border-color: rgba(255, 255, 255, 0.1);
 }
+
+/* Sidebar drop-up menu styling */
+.sidebar-dropup {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.75rem;
+}
+
+.sidebar-dropup-panel {
+  background-color: #1f2937; /* gray-800 */
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  border-radius: 0.75rem;
+  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.45);
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  transform: translateY(16px);
+  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease;
+}
+
+.sidebar-dropup-panel__inner {
+  padding: 1.25rem;
+}
+
+.sidebar-dropup-panel--expanded {
+  max-height: 640px;
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.sidebar-dropup-trigger {
+  align-items: center;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(14, 116, 144, 0.35));
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  border-radius: 9999px;
+  color: #f8fafc;
+  display: flex;
+  justify-content: space-between;
+  padding: 0.75rem 1.25rem;
+  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
+  width: 100%;
+}
+
+.sidebar-dropup-trigger:hover,
+.sidebar-dropup-trigger:focus {
+  border-color: rgba(148, 163, 184, 0.6);
+  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
+  outline: none;
+  transform: translateY(-1px);
+}
+
+.sidebar-dropup-trigger__content {
+  align-items: center;
+  display: flex;
+}
diff --git a/docs/qa.md b/docs/qa.md
new file mode 100644
index 00000000..2b785423
--- /dev/null
+++ b/docs/qa.md
@@ -0,0 +1,21 @@
+# Bitvid Manual QA Script
+
+Run this checklist before publishing releases or merging changes that touch upload or playback flows. Copy/paste the steps into QA tickets when requesting validation.
+
+1. **Upload Modal Smoke Test**
+   - Open the Upload modal, verify title is required, and ensure either a hosted URL or a magnet (or both) must be supplied.
+   - Submit three variants: URL-only, magnet-only, and both URL + magnet. Confirm success messaging or event publication in each case.
+2. **URL-First Playback**
+   - For a post with both URL and magnet, play the video and confirm the hosted URL loads first (inspect network requests or logs).
+   - Simulate a dead URL (offline mode or request blocker) and confirm playback falls back to WebTorrent without breaking the UI.
+3. **Magnet Safety**
+   - Paste an encoded magnet and confirm `safeDecodeMagnet()` outputs the raw string before playback.
+   - Ensure `normalizeAndAugmentMagnet()` adds provided `ws=` / `xs=` hints while keeping the original `xt` hash intact.
+4. **P2P Hints & Trackers**
+   - Confirm magnets generated through the modal include HTTPS `ws=` seeds and optional HTTPS `xs=` torrent URLs when supplied.
+   - Check that tracker arrays originate from `js/constants.js` and only include WSS endpoints.
+5. **Cross-Browser Verification**
+   - Spot-check Chromium and Firefox (desktop) for console warnings about CORS, Range requests, or tracker connectivity.
+   - Optionally validate on mobile Safari/Chrome if the change targets mobile UX.
+
+Document findings (pass/fail notes plus relevant screenshots or logs) so they can be attached to release or PR notes.
diff --git a/index.html b/index.html
index e707cdd4..116a9760 100644
--- a/index.html
+++ b/index.html
@@ -39,6 +39,7 @@
     <meta name="theme-color" content="#0f172a" />
 
     <!-- Styles -->
+    <script src="js/tracking.js" defer></script>
     <link href="css/tailwind.min.css" rel="stylesheet" />
     <link href="css/style.css" rel="stylesheet" />
     <link href="css/markdown.css" rel="stylesheet" />
@@ -58,14 +59,25 @@
       md:ml-64 ensures content is shifted on desktop so the pinned sidebar doesn't overlap.
       On mobile, we also toggle .sidebar-open to shift the entire content.
     -->
-    <div id="app" class="md:ml-64 px-4 py-8 min-h-screen flex flex-col">
+    <!--
+      `fade-in` is scrubbed by js/index.js after the first animation so that
+      re-rendering views does not cause the shell to flicker. Only apply it to
+      elements that should animate exactly once on initial paint.
+    -->
+
+    <div id="app" class="md:ml-64 px-4 py-8 min-h-screen flex flex-col fade-in">
       <!-- Header -->
       <header class="mb-8 flex items-center w-full">
         <!-- Mobile hamburger button (hidden on md+) -->
         <!-- New button -->
+        <!--
+          Mobile menu button: uses `fade-in` to match the rest of the chrome.
+          The JS animation cleanup removes the helper classes once the entrance
+          finishes to prevent flashes on future sidebar toggles.
+        -->
         <button
           id="mobileMenuBtn"
-          class="md:hidden ml-2 mr-4 flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-transparent focus:outline-none focus:ring-2 focus:ring-[#0f172a] z-[60]"
+          class="md:hidden ml-2 mr-4 flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-transparent focus:outline-none focus:ring-2 focus:ring-[#0f172a] z-[60] fade-in"
         >
           <img
             src="assets/svg/mobile-sidebar-menu-icon.svg"
@@ -74,14 +86,18 @@
           />
         </button>
         <!-- Logo -->
+        <!-- Logo fades in once on initial load. -->
         <img
           src="assets/svg/bitvid-logo-light-mode.svg"
           alt="BitVid Logo"
-          class="h-16"
+          class="h-16 fade-in fade-in-delay-100"
         />
 
         <!-- Buttons on the far right -->
-        <div class="ml-auto flex items-center space-x-4">
+
+        <!-- Header action buttons share the fade-in treatment for consistency. -->
+
+        <div class="ml-auto flex items-center space-x-4 fade-in fade-in-delay-200">
           <!-- Login Button -->
           <button
             id="loginButton"
@@ -140,7 +156,10 @@
       <div id="modalContainer"></div>
 
       <!-- Tagline / Slogan -->
-      <div class="text-center mb-8">
+
+      <!-- Tagline fade matches the cards. -->
+
+      <div class="text-center mb-8 fade-in fade-in-delay-300">
         <h2 class="text-2xl font-bold text-gray-500 tracking-wide">
           seed. zap. subscribe.
         </h2>
diff --git a/js/accessControl.js b/js/accessControl.js
index 15d68bff..4cc051ba 100644
--- a/js/accessControl.js
+++ b/js/accessControl.js
@@ -7,44 +7,118 @@ class AccessControl {
   constructor() {
     // Debug logging for initialization
     console.log("DEBUG: AccessControl constructor called");
-    console.log("DEBUG: initialWhitelist from import:", initialWhitelist);
-    console.log("DEBUG: typeof initialWhitelist:", typeof initialWhitelist);
-    console.log("DEBUG: initialWhitelist length:", initialWhitelist.length);
 
-    // Initialize empty sets
-    this.whitelist = new Set(initialWhitelist);
-    this.blacklist = new Set(initialBlacklist.filter((x) => x)); // Filter out empty strings
+    const { data: storedWhitelist, status: whitelistStatus } = this.loadWhitelist();
+    const { data: storedBlacklist, status: blacklistStatus } = this.loadBlacklist();
+
+    if (storedWhitelist !== null) {
+      this.whitelist = new Set(storedWhitelist);
+    } else {
+      this.whitelist = new Set(initialWhitelist);
+      this.saveWhitelist();
+      if (whitelistStatus && whitelistStatus !== "missing") {
+        console.warn(
+          `Whitelist storage ${whitelistStatus}. Falling back to initial whitelist.`
+        );
+      }
+    }
+
+    if (storedBlacklist !== null) {
+      this.blacklist = new Set(storedBlacklist);
+    } else {
+      this.blacklist = new Set(initialBlacklist.filter((x) => x)); // Filter out empty strings
+      this.saveBlacklist();
+      if (blacklistStatus && blacklistStatus !== "missing") {
+        console.warn(
+          `Blacklist storage ${blacklistStatus}. Falling back to initial blacklist.`
+        );
+      }
+    }
 
     // Debug the sets
-    console.log("DEBUG: Whitelist after Set creation:", [...this.whitelist]);
-    console.log("DEBUG: Blacklist after Set creation:", [...this.blacklist]);
-
-    // Save to localStorage
-    this.saveWhitelist();
-    this.saveBlacklist();
+    console.log("DEBUG: Whitelist after initialization:", [...this.whitelist]);
+    console.log("DEBUG: Blacklist after initialization:", [...this.blacklist]);
   }
 
   // Rest of the class remains the same...
   loadWhitelist() {
     try {
       const stored = localStorage.getItem("bitvid_whitelist");
-      return stored ? JSON.parse(stored) : [];
+      if (!stored) {
+        if (isDevMode) console.log("No stored whitelist found in localStorage.");
+        return { data: null, status: "missing" };
+      }
+
+      const parsed = JSON.parse(stored);
+      const sanitized = this.sanitizeList(parsed, "whitelist");
+      return {
+        data: sanitized,
+        status: sanitized === null ? "invalid" : "ok",
+      };
     } catch (error) {
-      console.error("Error loading whitelist:", error);
-      return [];
+      console.error("Error loading whitelist, using defaults:", error);
+      return { data: null, status: "error" };
     }
   }
 
   loadBlacklist() {
     try {
       const stored = localStorage.getItem("bitvid_blacklist");
-      return stored ? JSON.parse(stored) : [];
+      if (!stored) {
+        if (isDevMode) console.log("No stored blacklist found in localStorage.");
+        return { data: null, status: "missing" };
+      }
+
+      const parsed = JSON.parse(stored);
+      const sanitized = this.sanitizeList(parsed, "blacklist");
+      return {
+        data: sanitized,
+        status: sanitized === null ? "invalid" : "ok",
+      };
     } catch (error) {
-      console.error("Error loading blacklist:", error);
-      return [];
+      console.error("Error loading blacklist, using defaults:", error);
+      return { data: null, status: "error" };
     }
   }
 
+  sanitizeList(list, listName) {
+    if (!Array.isArray(list)) {
+      console.warn(
+        `Stored ${listName} is not an array. Received:`,
+        list
+      );
+      return null;
+    }
+
+    const sanitized = [];
+    let invalidEntries = 0;
+
+    list.forEach((value) => {
+      if (typeof value !== "string") {
+        invalidEntries += 1;
+        return;
+      }
+
+      const trimmed = value.trim();
+      if (trimmed) {
+        sanitized.push(trimmed);
+      } else {
+        invalidEntries += 1;
+      }
+    });
+
+    if (invalidEntries > 0) {
+      console.warn(
+        `Stored ${listName} contained ${invalidEntries} invalid entr${
+          invalidEntries === 1 ? "y" : "ies"
+        }. Sanitized list:`,
+        sanitized
+      );
+    }
+
+    return sanitized;
+  }
+
   saveWhitelist() {
     try {
       localStorage.setItem(
diff --git a/js/analytics.js b/js/analytics.js
new file mode 100644
index 00000000..bdab3ef8
--- /dev/null
+++ b/js/analytics.js
@@ -0,0 +1,194 @@
+// js/analytics.js
+import { ANALYTICS_CONFIG } from "./analyticsConfig.js";
+
+const SCRIPT_ATTR = "data-bitvid-analytics";
+const SCRIPT_IDENTIFIER = "umami";
+const pendingCalls = [];
+let flushTimerId = null;
+let scriptLoadedOnce = false;
+
+function isBrowserEnvironment() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+
+function flushPendingCalls() {
+  if (!isBrowserEnvironment()) {
+    return;
+  }
+
+  const umami = window.umami;
+  if (!umami) {
+    return;
+  }
+
+  while (pendingCalls.length > 0) {
+    const { method, args } = pendingCalls.shift();
+    const fn = typeof umami[method] === "function" ? umami[method] : null;
+    if (!fn) {
+      continue;
+    }
+    try {
+      fn.apply(umami, args);
+    } catch (err) {
+      console.warn("[analytics] Failed to call", method, err);
+    }
+  }
+}
+
+function scheduleFlush() {
+  if (!isBrowserEnvironment()) {
+    return;
+  }
+
+  if (flushTimerId !== null) {
+    return;
+  }
+
+  // 🔧 merged conflicting changes from codex/add-tracking-script-to-all-pages vs unstable
+  flushTimerId = window.setInterval(() => {
+    if (window.umami && typeof window.umami.track === "function") {
+      window.clearInterval(flushTimerId);
+      flushTimerId = null;
+      flushPendingCalls();
+    }
+  }, 500);
+}
+
+export function ensureAnalyticsLoaded(doc = typeof document !== "undefined" ? document : null) {
+  if (!doc) {
+    return null;
+  }
+
+  let script = doc.querySelector(`script[${SCRIPT_ATTR}]`);
+  if (script) {
+    if (!scriptLoadedOnce) {
+      // If a server rendered script already exists, make sure we flush asap.
+      scriptLoadedOnce = true;
+      flushPendingCalls();
+    }
+    return script;
+  }
+
+  script = doc.createElement("script");
+  script.defer = true;
+  script.src = ANALYTICS_CONFIG.scriptSrc;
+  script.setAttribute(SCRIPT_ATTR, SCRIPT_IDENTIFIER);
+  script.dataset.websiteId = ANALYTICS_CONFIG.websiteId;
+  // Allow Umami to handle automatic pageview tracking by default.
+  script.addEventListener("load", () => {
+    scriptLoadedOnce = true;
+    flushPendingCalls();
+  });
+  doc.head.appendChild(script);
+
+  scheduleFlush();
+
+  return script;
+}
+
+function queueCall(method, args) {
+  pendingCalls.push({ method, args });
+  scheduleFlush();
+}
+
+function invokeUmami(method, args) {
+  if (!isBrowserEnvironment()) {
+    return;
+  }
+
+  ensureAnalyticsLoaded();
+
+  const umami = window.umami;
+  if (umami && typeof umami[method] === "function") {
+    try {
+      umami[method].apply(umami, args);
+    } catch (err) {
+      console.warn("[analytics] Failed to call", method, err);
+    }
+    return;
+  }
+
+  queueCall(method, args);
+}
+
+export function trackPageView(path, referrer) {
+  if (!isBrowserEnvironment()) {
+    return;
+  }
+
+  const resolvedPath =
+    typeof path === "string" && path.length > 0
+      ? path
+      : `${window.location.pathname}${window.location.hash || ""}`;
+
+  const resolvedReferrer =
+    typeof referrer === "string" ? referrer : document.referrer || "";
+
+  // 🔧 merged conflicting changes from codex/add-tracking-script-to-all-pages vs unstable
+  let absoluteUrl = resolvedPath;
+  try {
+    absoluteUrl = new URL(resolvedPath, window.location.origin).toString();
+  } catch (err) {
+    // Fall back to the provided path if it cannot be resolved.
+  }
+
+  let absoluteReferrer = resolvedReferrer;
+  if (resolvedReferrer) {
+    try {
+      absoluteReferrer = new URL(resolvedReferrer, window.location.origin).toString();
+    } catch (err) {
+      // Keep original referrer if it cannot be normalized.
+    }
+  }
+
+  invokeUmami("track", [
+    (basePayload = {}) => ({
+      ...basePayload,
+      url: absoluteUrl || basePayload.url,
+      referrer: absoluteReferrer || basePayload.referrer,
+    }),
+    "pageview",
+  ]);
+}
+
+export function trackVideoView({
+  videoId,
+  title,
+  source,
+  hasMagnet,
+  hasUrl,
+} = {}) {
+  if (!isBrowserEnvironment()) {
+    return;
+  }
+
+  const payload = {};
+
+  if (videoId) {
+    payload.videoId = String(videoId);
+  }
+
+  if (title) {
+    payload.title = String(title);
+  }
+
+  if (source) {
+    payload.source = String(source);
+  }
+
+  if (typeof hasMagnet === "boolean") {
+    payload.hasMagnet = hasMagnet;
+  }
+
+  if (typeof hasUrl === "boolean") {
+    payload.hasUrl = hasUrl;
+  }
+
+  // 🔧 merged conflicting changes from codex/add-tracking-script-to-all-pages vs unstable
+  invokeUmami("track", [ANALYTICS_CONFIG.videoViewEventName, payload]);
+}
+
+// Immediately queue the analytics script so page views are captured early.
+if (isBrowserEnvironment()) {
+  ensureAnalyticsLoaded();
+}
diff --git a/js/analyticsConfig.js b/js/analyticsConfig.js
new file mode 100644
index 00000000..a4bf0749
--- /dev/null
+++ b/js/analyticsConfig.js
@@ -0,0 +1,18 @@
+// js/analyticsConfig.js
+// Central configuration for site-wide analytics tracking.
+
+export const ANALYTICS_CONFIG = Object.freeze({
+  /**
+   * Hosted Umami script that powers analytics.
+   * Update this value if the tracker is relocated.
+   */
+  scriptSrc: "https://umami.malin.onl/script.js",
+  /**
+   * The Umami website identifier for this deployment.
+   */
+  websiteId: "1f8eead2-79f0-4dba-8c3b-ed9b08b6e877",
+  /**
+   * Event name used when recording individual video views.
+   */
+  videoViewEventName: "video_view",
+});
diff --git a/js/app.js b/js/app.js
index 5d45bc03..be73a127 100644
--- a/js/app.js
+++ b/js/app.js
@@ -4,8 +4,13 @@ import { loadView } from "./viewManager.js";
 import { nostrClient } from "./nostr.js";
 import { torrentClient } from "./webtorrent.js";
 import { isDevMode } from "./config.js";
-import disclaimerModal from "./disclaimer.js";
 import { isWhitelistEnabled } from "./config.js";
+import { safeDecodeMagnet } from "./magnetUtils.js";
+import { normalizeAndAugmentMagnet } from "./magnet.js";
+import { deriveTorrentPlaybackConfig } from "./playbackUtils.js";
+import { URL_FIRST_ENABLED } from "./constants.js";
+import { trackVideoView } from "./analytics.js";
+import { attachHealthBadges } from "./gridHealth.js";
 import {
   initialWhitelist,
   initialBlacklist,
@@ -19,6 +24,260 @@ function fakeDecrypt(str) {
   return str.split("").reverse().join("");
 }
 
+const UNSUPPORTED_BTITH_MESSAGE =
+  "This magnet link is missing a compatible BitTorrent v1 info hash.";
+
+const FALLBACK_THUMBNAIL_SRC = "assets/jpg/video-thumbnail-fallback.jpg";
+const TRACKING_SCRIPT_PATTERN = /(?:^|\/)tracking\.js(?:$|\?)/;
+const EMPTY_VIDEO_LIST_SIGNATURE = "__EMPTY__";
+const PROFILE_CACHE_STORAGE_KEY = "bitvid:profileCache:v1";
+const PROFILE_CACHE_VERSION = 1;
+const PROFILE_CACHE_TTL_MS = 10 * 60 * 1000; // 10 minutes
+// We probe hosted URLs often enough that a naive implementation would spam
+// remote CDNs. A medium-lived cache (roughly 45 minutes) keeps us from
+// hammering dead hosts while still giving the UI timely updates when a CDN
+// recovers. Results are stored both in-memory and in localStorage so other
+// views can reuse them without re-probing.
+const URL_HEALTH_TTL_MS = 45 * 60 * 1000; // 45 minutes
+const URL_PROBE_TIMEOUT_MS = 8 * 1000; // 8 seconds
+const URL_HEALTH_STORAGE_PREFIX = "bitvid:urlHealth:";
+const urlHealthCache = new Map();
+const urlHealthInFlight = new Map();
+
+function removeTrackingScripts(root) {
+  if (!root || typeof root.querySelectorAll !== "function") {
+    return;
+  }
+
+  root.querySelectorAll("script[src]").forEach((script) => {
+    const src = script.getAttribute("src") || "";
+    if (TRACKING_SCRIPT_PATTERN.test(src)) {
+      script.remove();
+    }
+  });
+}
+
+function getUrlHealthStorageKey(eventId) {
+  return `${URL_HEALTH_STORAGE_PREFIX}${eventId}`;
+}
+
+function readUrlHealthFromStorage(eventId) {
+  if (!eventId || typeof localStorage === "undefined") {
+    return null;
+  }
+
+  try {
+    const raw = localStorage.getItem(getUrlHealthStorageKey(eventId));
+    if (!raw) {
+      return null;
+    }
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === "object") {
+      return parsed;
+    }
+  } catch (err) {
+    console.warn(`Failed to parse stored URL health for ${eventId}:`, err);
+  }
+
+  removeUrlHealthFromStorage(eventId);
+  return null;
+}
+
+function writeUrlHealthToStorage(eventId, entry) {
+  if (!eventId || typeof localStorage === "undefined") {
+    return;
+  }
+
+  try {
+    localStorage.setItem(
+      getUrlHealthStorageKey(eventId),
+      JSON.stringify(entry)
+    );
+  } catch (err) {
+    console.warn(`Failed to persist URL health for ${eventId}:`, err);
+  }
+}
+
+function removeUrlHealthFromStorage(eventId) {
+  if (!eventId || typeof localStorage === "undefined") {
+    return;
+  }
+
+  try {
+    localStorage.removeItem(getUrlHealthStorageKey(eventId));
+  } catch (err) {
+    console.warn(`Failed to remove URL health for ${eventId}:`, err);
+  }
+}
+
+function isUrlHealthEntryFresh(entry, url) {
+  if (!entry || typeof entry !== "object") {
+    return false;
+  }
+
+  const now = Date.now();
+  if (typeof entry.expiresAt !== "number" || entry.expiresAt <= now) {
+    return false;
+  }
+
+  if (url && entry.url && entry.url !== url) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Returns the cached health result for a given event ID when the entry is
+ * still "fresh". Entries are evicted eagerly once their TTL expires or when
+ * the associated URL changes (e.g. a user edits the post to point elsewhere).
+ */
+function readUrlHealthFromCache(eventId, url) {
+  if (!eventId) {
+    return null;
+  }
+
+  const entry = urlHealthCache.get(eventId);
+  if (isUrlHealthEntryFresh(entry, url)) {
+    return entry;
+  }
+
+  if (entry) {
+    urlHealthCache.delete(eventId);
+  }
+
+  const stored = readUrlHealthFromStorage(eventId);
+  if (!isUrlHealthEntryFresh(stored, url)) {
+    if (stored) {
+      removeUrlHealthFromStorage(eventId);
+    }
+    return null;
+  }
+
+  urlHealthCache.set(eventId, stored);
+  return stored;
+}
+
+/**
+ * Stores a health result and calculates the expiry moment. The TTL lasts for
+ * roughly three quarters of an hour so we recover quickly when a CDN returns
+ * while still avoiding redundant probes during render thrash.
+*/
+function writeUrlHealthToCache(eventId, url, result, ttlMs = URL_HEALTH_TTL_MS) {
+  if (!eventId) {
+    return null;
+  }
+
+  const ttl = typeof ttlMs === "number" && ttlMs > 0 ? ttlMs : URL_HEALTH_TTL_MS;
+  const now = Date.now();
+  const entry = {
+    status: result?.status || "checking",
+    message: result?.message || "Checking hosted URL…",
+    url: url || result?.url || "",
+    expiresAt: now + ttl,
+    lastCheckedAt: now,
+  };
+  urlHealthCache.set(eventId, entry);
+  writeUrlHealthToStorage(eventId, entry);
+  return entry;
+}
+
+/**
+ * Tracks in-flight probe promises so that multiple cards rendering the same
+ * event simultaneously do not all fire off duplicate requests. The stored
+ * metadata includes the URL so edits invalidate the old request immediately.
+ */
+function setInFlightUrlProbe(eventId, url, promise) {
+  if (!eventId || !promise) {
+    return;
+  }
+
+  urlHealthInFlight.set(eventId, { promise, url });
+  promise.finally(() => {
+    const current = urlHealthInFlight.get(eventId);
+    if (current && current.promise === promise) {
+      urlHealthInFlight.delete(eventId);
+    }
+  });
+}
+
+function getInFlightUrlProbe(eventId, url) {
+  if (!eventId) {
+    return null;
+  }
+
+  const entry = urlHealthInFlight.get(eventId);
+  if (!entry) {
+    return null;
+  }
+
+  if (url && entry.url && entry.url !== url) {
+    return null;
+  }
+
+  return entry.promise;
+}
+// NOTE: The modal uses a "please stand by" animated poster while the torrent
+// or direct URL boots up. We've regressed multiple times by forgetting to clear
+// that poster once playback starts, which leaves the loading GIF covering the
+// video even though audio is playing. Centralising the cleanup logic makes it
+// easier to spot those regressions; see forceRemoveModalPoster() below.
+const MODAL_LOADING_POSTER = "assets/gif/please-stand-by.gif";
+
+/**
+ * Basic validation for BitTorrent magnet URIs.
+ *
+ * Returns `true` only when the value looks like a magnet link that WebTorrent
+ * understands (`magnet:` scheme with at least one `xt=urn:btih:<info-hash>`
+ * entry, where `<info-hash>` is either a 40-character hex digest or a
+ * 32-character base32 digest). Magnets that only contain BitTorrent v2 hashes
+ * (e.g. `btmh`) are treated as unsupported.
+ */
+function isValidMagnetUri(magnet) {
+  const trimmed = typeof magnet === "string" ? magnet.trim() : "";
+  if (!trimmed) {
+    return false;
+  }
+
+  const decoded = safeDecodeMagnet(trimmed);
+  const candidate = decoded || trimmed;
+
+  if (/^[0-9a-f]{40}$/i.test(candidate)) {
+    return true;
+  }
+
+  try {
+    const parsed = new URL(candidate);
+    if (parsed.protocol.toLowerCase() !== "magnet:") {
+      return false;
+    }
+
+    const xtValues = parsed.searchParams.getAll("xt");
+    if (!xtValues.length) {
+      return false;
+    }
+
+    const hexPattern = /^[0-9a-f]{40}$/i;
+    const base32Pattern = /^[A-Z2-7]{32}$/;
+
+    return xtValues.some((value) => {
+      if (typeof value !== "string") return false;
+      const match = value.trim().match(/^urn:btih:([a-z0-9]+)$/i);
+      if (!match) return false;
+
+      const infoHash = match[1];
+      if (hexPattern.test(infoHash)) {
+        return true;
+      }
+
+      const upperHash = infoHash.toUpperCase();
+      return infoHash.length === 32 && base32Pattern.test(upperHash);
+    });
+  } catch (err) {
+    return false;
+  }
+}
+
 /**
  * Simple IntersectionObserver-based lazy loader for images (or videos).
  *
@@ -36,11 +295,87 @@ class MediaLoader {
         for (const entry of entries) {
           if (entry.isIntersecting) {
             const el = entry.target;
-            const lazySrc = el.dataset.lazy;
+            const lazySrc =
+              typeof el.dataset.lazy === "string"
+                ? el.dataset.lazy.trim()
+                : "";
+
             if (lazySrc) {
-              el.src = lazySrc;
-              delete el.dataset.lazy;
+              const fallbackSrc =
+                (typeof el.dataset.fallbackSrc === "string"
+                  ? el.dataset.fallbackSrc.trim()
+                  : "") ||
+                el.getAttribute("data-fallback-src") ||
+                "";
+
+              const applyFallback = () => {
+                const resolvedFallback =
+                  fallbackSrc && fallbackSrc.trim()
+                    ? fallbackSrc.trim()
+                    : FALLBACK_THUMBNAIL_SRC;
+
+                if (!resolvedFallback) {
+                  return;
+                }
+
+                if (el.src !== resolvedFallback) {
+                  el.src = resolvedFallback;
+                }
+
+                if (!el.dataset.fallbackSrc) {
+                  el.dataset.fallbackSrc = resolvedFallback;
+                }
+
+                if (!el.getAttribute("data-fallback-src")) {
+                  el.setAttribute("data-fallback-src", resolvedFallback);
+                }
+
+                el.dataset.thumbnailFailed = "true";
+              };
+
+              const cleanupListeners = () => {
+                el.removeEventListener("error", handleError);
+                el.removeEventListener("load", handleLoad);
+              };
+
+              const handleError = () => {
+                cleanupListeners();
+                applyFallback();
+              };
+
+              const handleLoad = () => {
+                cleanupListeners();
+                if (
+                  (el.naturalWidth === 0 && el.naturalHeight === 0) ||
+                  !el.currentSrc
+                ) {
+                  applyFallback();
+                } else {
+                  delete el.dataset.thumbnailFailed;
+                }
+              };
+
+              el.addEventListener("error", handleError);
+              el.addEventListener("load", handleLoad);
+
+              if (fallbackSrc && lazySrc === fallbackSrc) {
+                cleanupListeners();
+                delete el.dataset.thumbnailFailed;
+              } else {
+                el.src = lazySrc;
+
+                if (el.complete) {
+                  // Handle cached results synchronously
+                  if (el.naturalWidth === 0 && el.naturalHeight === 0) {
+                    handleError();
+                  } else {
+                    handleLoad();
+                  }
+                }
+              }
             }
+
+            delete el.dataset.lazy;
             // Stop observing once loaded
             this.observer.unobserve(el);
           }
@@ -51,7 +386,35 @@ class MediaLoader {
   }
 
   observe(el) {
-    if (el.dataset.lazy) {
+    if (!el || typeof el.dataset === "undefined") {
+      return;
+    }
+
+    if (!el.dataset.fallbackSrc) {
+      const fallbackAttr =
+        el.getAttribute("data-fallback-src") || el.getAttribute("src") || "";
+      if (fallbackAttr) {
+        el.dataset.fallbackSrc = fallbackAttr;
+      } else if (el.tagName === "IMG") {
+        el.dataset.fallbackSrc = FALLBACK_THUMBNAIL_SRC;
+        el.setAttribute("data-fallback-src", FALLBACK_THUMBNAIL_SRC);
+      }
+    }
+
+    if (
+      el.tagName === "IMG" &&
+      typeof HTMLImageElement !== "undefined" &&
+      "loading" in HTMLImageElement.prototype
+    ) {
+      el.loading = el.loading || "lazy";
+      if ("decoding" in HTMLImageElement.prototype) {
+        el.decoding = el.decoding || "async";
+      }
+    }
+
+    const lazySrc =
+      typeof el.dataset.lazy === "string" ? el.dataset.lazy.trim() : "";
+    if (lazySrc) {
       this.observer.observe(el);
     }
   }
@@ -71,6 +434,9 @@ class bitvidApp {
 
     // Lazy-loading helper for images
     this.mediaLoader = new MediaLoader();
+    this.loadedThumbnails = new Map();
+    this.activeIntervals = [];
+    this.urlPlaybackWatchdogCleanup = null;
 
     // Optional: a "profile" button or avatar (if used)
     this.profileButton = document.getElementById("profileButton") || null;
@@ -114,6 +480,9 @@ class bitvidApp {
     this.creatorNpub = null;
     this.copyMagnetBtn = null;
     this.shareBtn = null;
+    this.modalZapBtn = null;
+    this.modalPosterCleanup = null;
+    this.cleanupPromise = null;
 
     // Hide/Show Subscriptions Link
     this.subscriptionsLink = null;
@@ -127,11 +496,17 @@ class bitvidApp {
     this.currentMagnetUri = null;
     this.currentVideo = null;
     this.videoSubscription = null;
+    this.videoList = null;
+    this._videoListElement = null;
+    this._videoListClickHandler = null;
 
     // Videos stored as a Map (key=event.id)
     this.videosMap = new Map();
     // Simple cache for user profiles
     this.profileCache = new Map();
+    this.lastRenderedVideoSignature = null;
+    this._lastRenderedVideoListElement = null;
+    this.renderedVideoIds = new Set();
 
     // NEW: reference to the login modal's close button
     this.closeLoginModalBtn =
@@ -159,6 +534,148 @@ class bitvidApp {
     }
   }
 
+  loadProfileCacheFromStorage() {
+    if (typeof localStorage === "undefined") {
+      return;
+    }
+
+    const now = Date.now();
+    const raw = localStorage.getItem(PROFILE_CACHE_STORAGE_KEY);
+    if (!raw) {
+      return;
+    }
+
+    try {
+      const parsed = JSON.parse(raw);
+      if (!parsed || typeof parsed !== "object") {
+        return;
+      }
+
+      if (parsed.version !== PROFILE_CACHE_VERSION) {
+        return;
+      }
+
+      const entries = parsed.entries;
+      if (!entries || typeof entries !== "object") {
+        return;
+      }
+
+      for (const [pubkey, entry] of Object.entries(entries)) {
+        if (!pubkey || !entry || typeof entry !== "object") {
+          continue;
+        }
+
+        const timestamp = typeof entry.timestamp === "number" ? entry.timestamp : 0;
+        if (!timestamp || now - timestamp > PROFILE_CACHE_TTL_MS) {
+          continue;
+        }
+
+        const profile = entry.profile;
+        if (!profile || typeof profile !== "object") {
+          continue;
+        }
+
+        const normalized = {
+          name: profile.name || profile.display_name || "Unknown",
+          picture: profile.picture || "assets/svg/default-profile.svg",
+        };
+
+        this.profileCache.set(pubkey, {
+          profile: normalized,
+          timestamp,
+        });
+      }
+    } catch (err) {
+      console.warn("Failed to parse stored profile cache:", err);
+    }
+  }
+
+  persistProfileCacheToStorage() {
+    if (typeof localStorage === "undefined") {
+      return;
+    }
+
+    const now = Date.now();
+    const entries = {};
+
+    for (const [pubkey, entry] of this.profileCache.entries()) {
+      if (!entry || typeof entry !== "object") {
+        continue;
+      }
+      const timestamp = typeof entry.timestamp === "number" ? entry.timestamp : 0;
+      if (!timestamp || now - timestamp > PROFILE_CACHE_TTL_MS) {
+        this.profileCache.delete(pubkey);
+        continue;
+      }
+
+      entries[pubkey] = {
+        profile: entry.profile,
+        timestamp,
+      };
+    }
+
+    const payload = {
+      version: PROFILE_CACHE_VERSION,
+      savedAt: now,
+      entries,
+    };
+
+    if (Object.keys(entries).length === 0) {
+      try {
+        localStorage.removeItem(PROFILE_CACHE_STORAGE_KEY);
+      } catch (err) {
+        console.warn("Failed to clear profile cache storage:", err);
+      }
+      return;
+    }
+
+    try {
+      localStorage.setItem(PROFILE_CACHE_STORAGE_KEY, JSON.stringify(payload));
+    } catch (err) {
+      console.warn("Failed to persist profile cache:", err);
+    }
+  }
+
+  getProfileCacheEntry(pubkey) {
+    if (!pubkey) {
+      return null;
+    }
+
+    const entry = this.profileCache.get(pubkey);
+    if (!entry) {
+      return null;
+    }
+
+    const timestamp = typeof entry.timestamp === "number" ? entry.timestamp : 0;
+    if (!timestamp || Date.now() - timestamp > PROFILE_CACHE_TTL_MS) {
+      this.profileCache.delete(pubkey);
+      this.persistProfileCacheToStorage();
+      return null;
+    }
+
+    return entry;
+  }
+
+  setProfileCacheEntry(pubkey, profile) {
+    if (!pubkey || !profile) {
+      return;
+    }
+
+    const normalized = {
+      name: profile.name || profile.display_name || "Unknown",
+      picture: profile.picture || "assets/svg/default-profile.svg",
+    };
+
+    const entry = {
+      profile: normalized,
+      timestamp: Date.now(),
+    };
+
+    this.profileCache.set(pubkey, entry);
+    this.persistProfileCacheToStorage();
+    return entry;
+  }
+
   forceRefreshAllProfiles() {
     // 1) Grab the newest set of videos from nostrClient
     const activeVideos = nostrClient.getActiveVideos();
@@ -181,6 +698,8 @@ class bitvidApp {
         });
       }
 
+      this.loadProfileCacheFromStorage();
+
       // 1. Initialize the video modal (components/video-modal.html)
       await this.initModal();
       this.updateModalElements();
@@ -208,9 +727,8 @@ class bitvidApp {
         }
       }
 
-      // 5. Setup general event listeners, show disclaimers
+      // 5. Setup general event listeners
       this.setupEventListeners();
-      disclaimerModal.show();
 
       // 6) Load the default view ONLY if there's no #view= already
       if (!window.location.hash || !window.location.hash.startsWith("#view=")) {
@@ -228,6 +746,7 @@ class bitvidApp {
 
       // 7. Once loaded, get a reference to #videoList
       this.videoList = document.getElementById("videoList");
+      this.attachVideoListHandler();
 
       // 8. Subscribe or fetch videos
       await this.loadVideos();
@@ -235,8 +754,6 @@ class bitvidApp {
       // 9. Check URL ?v= param
       this.checkUrlParams();
 
-      // Keep an array of active interval IDs so we can clear them on modal close
-      this.activeIntervals = [];
     } catch (error) {
       console.error("Init failed:", error);
       this.showError("Failed to connect to Nostr relay");
@@ -248,6 +765,12 @@ class bitvidApp {
    */
   async initModal() {
     try {
+      const existingModal = document.getElementById("playerModal");
+      if (existingModal) {
+        this.playerModal = existingModal;
+        return true;
+      }
+
       const resp = await fetch("components/video-modal.html");
       if (!resp.ok) {
         throw new Error(`HTTP error! status: ${resp.status}`);
@@ -262,6 +785,7 @@ class bitvidApp {
       // Instead of overwriting, we append a new DIV with the fetched HTML
       const wrapper = document.createElement("div");
       wrapper.innerHTML = html; // set the markup
+      removeTrackingScripts(wrapper);
       modalContainer.appendChild(wrapper); // append the markup
 
       // Now we can safely find elements inside:
@@ -322,6 +846,7 @@ class bitvidApp {
     // Copy/Share buttons
     this.copyMagnetBtn = document.getElementById("copyMagnetBtn") || null;
     this.shareBtn = document.getElementById("shareBtn") || null;
+    this.modalZapBtn = document.getElementById("modalZapBtn") || null;
 
     // Attach existing event listeners for copy/share
     if (this.copyMagnetBtn) {
@@ -331,23 +856,24 @@ class bitvidApp {
     }
     if (this.shareBtn) {
       this.shareBtn.addEventListener("click", () => {
-        if (!this.currentVideo) {
-          this.showError("No video is loaded to share.");
+        if (!this.currentVideo || !this.currentVideo.id) {
+          this.showError("No shareable video is loaded.");
           return;
         }
-        try {
-          const nevent = window.NostrTools.nip19.neventEncode({
-            id: this.currentVideo.id,
-          });
-          const shareUrl = `${window.location.origin}${window.location.pathname}?v=${nevent}`;
-          navigator.clipboard
-            .writeText(shareUrl)
-            .then(() => this.showSuccess("Video link copied to clipboard!"))
-            .catch(() => this.showError("Failed to copy the link."));
-        } catch (err) {
-          console.error("Error generating share link:", err);
+        const shareUrl = this.buildShareUrlFromEventId(this.currentVideo.id);
+        if (!shareUrl) {
           this.showError("Could not generate link.");
+          return;
         }
+        navigator.clipboard
+          .writeText(shareUrl)
+          .then(() => this.showSuccess("Video link copied to clipboard!"))
+          .catch(() => this.showError("Failed to copy the link."));
+      });
+    }
+    if (this.modalZapBtn) {
+      this.modalZapBtn.addEventListener("click", () => {
+        window.alert("Zaps coming soon.");
       });
     }
 
@@ -410,9 +936,83 @@ class bitvidApp {
       this.playerModal.style.display = "flex";
       this.playerModal.classList.remove("hidden");
     }
-    if (this.modalVideo) {
-      this.modalVideo.poster = "assets/gif/please-stand-by.gif";
+    this.applyModalLoadingPoster();
+  }
+
+  applyModalLoadingPoster() {
+    if (!this.modalVideo) {
+      return;
     }
+
+    if (typeof this.modalPosterCleanup === "function") {
+      this.modalPosterCleanup();
+      this.modalPosterCleanup = null;
+    }
+
+    const videoEl = this.modalVideo;
+
+    const clearPoster = () => {
+      // Delegate to the shared helper so every code path clears the GIF in the
+      // same way. If we ever change how the poster works we only need to update
+      // forceRemoveModalPoster().
+      this.forceRemoveModalPoster("playback-event");
+    };
+
+    videoEl.addEventListener("loadeddata", clearPoster);
+    videoEl.addEventListener("playing", clearPoster);
+
+    videoEl.poster = MODAL_LOADING_POSTER;
+
+    this.modalPosterCleanup = () => {
+      videoEl.removeEventListener("loadeddata", clearPoster);
+      videoEl.removeEventListener("playing", clearPoster);
+    };
+  }
+
+  /**
+   * Forcefully strip the modal's loading poster.
+   *
+   * The video modal shows an animated "please stand by" GIF while we wait for a
+   * `loadeddata` or `playing` event. Historically, small refactors would remove
+   * the matching cleanup path which left the GIF covering real playback. By
+   * routing every caller through this helper we can add defensive clears (for
+   * example when WebTorrent reports progress) without duplicating poster logic
+   * all over the file.
+   *
+   * @param {string} reason A debugging hint that documents why the poster was
+   * cleared.
+   * @returns {boolean} `true` if a poster attribute/value was removed.
+   */
+  forceRemoveModalPoster(reason = "manual-clear") {
+    if (!this.modalVideo) {
+      return false;
+    }
+
+    const videoEl = this.modalVideo;
+
+    if (typeof this.modalPosterCleanup === "function") {
+      this.modalPosterCleanup();
+      this.modalPosterCleanup = null;
+    }
+
+    const hadPoster =
+      videoEl.hasAttribute("poster") ||
+      (typeof videoEl.poster === "string" && videoEl.poster !== "");
+
+    if (!hadPoster) {
+      return false;
+    }
+
+    videoEl.poster = "";
+    if (videoEl.hasAttribute("poster")) {
+      videoEl.removeAttribute("poster");
+    }
+
+    console.debug(
+      `[bitvidApp] Cleared modal loading poster (${reason}).`
+    );
+
+    return true;
   }
 
   /**
@@ -433,6 +1033,7 @@ class bitvidApp {
       // Append the upload modal markup
       const wrapper = document.createElement("div");
       wrapper.innerHTML = html;
+      removeTrackingScripts(wrapper);
       modalContainer.appendChild(wrapper);
 
       // Grab references
@@ -485,6 +1086,7 @@ class bitvidApp {
       }
       const wrapper = document.createElement("div");
       wrapper.innerHTML = html;
+      removeTrackingScripts(wrapper);
       modalContainer.appendChild(wrapper);
 
       // Now references
@@ -597,8 +1199,10 @@ class bitvidApp {
     }
 
     // 7) Cleanup on page unload
-    window.addEventListener("beforeunload", async () => {
-      await this.cleanup();
+    window.addEventListener("beforeunload", () => {
+      this.cleanup().catch((err) => {
+        console.error("Cleanup before unload failed:", err);
+      });
     });
 
     // 8) Handle back/forward navigation => hide video modal
@@ -607,22 +1211,7 @@ class bitvidApp {
       await this.hideModal();
     });
 
-    // 9) Event delegation on the video list container for playing videos
-    if (this.videoList) {
-      this.videoList.addEventListener("click", (event) => {
-        const magnetTrigger = event.target.closest("[data-play-magnet]");
-        if (magnetTrigger) {
-          // For a normal left-click (button 0, no Ctrl/Cmd), prevent navigation:
-          if (event.button === 0 && !event.ctrlKey && !event.metaKey) {
-            event.preventDefault(); // Stop browser from following the href
-            const magnet = magnetTrigger.dataset.playMagnet;
-            this.playVideo(magnet);
-          }
-        }
-      });
-    }
-
-    // 10) Event delegation for the “Application Form” button inside the login modal
+    // 9) Event delegation for the “Application Form” button inside the login modal
     document.addEventListener("click", (event) => {
       if (event.target && event.target.id === "openApplicationModal") {
         // Hide the login modal
@@ -639,6 +1228,66 @@ class bitvidApp {
     });
   }
 
+  attachVideoListHandler() {
+    if (this._videoListElement && this._videoListClickHandler) {
+      this._videoListElement.removeEventListener(
+        "click",
+        this._videoListClickHandler
+      );
+      this._videoListElement = null;
+      this._videoListClickHandler = null;
+    }
+
+    if (!this.videoList) {
+      return;
+    }
+
+    const handler = async (event) => {
+      const trigger = event.target.closest(
+        "[data-play-magnet],[data-play-url]"
+      );
+      if (!trigger) {
+        return;
+      }
+
+      if (event.button === 0 && !event.ctrlKey && !event.metaKey) {
+        event.preventDefault();
+
+        const rawUrlValue =
+          (trigger.dataset && typeof trigger.dataset.playUrl === "string"
+            ? trigger.dataset.playUrl
+            : null) ?? trigger.getAttribute("data-play-url") ?? "";
+        const rawMagnetValue =
+          (trigger.dataset && typeof trigger.dataset.playMagnet === "string"
+            ? trigger.dataset.playMagnet
+            : null) ?? trigger.getAttribute("data-play-magnet") ?? "";
+
+        let url = "";
+        if (rawUrlValue) {
+          try {
+            url = decodeURIComponent(rawUrlValue);
+          } catch (err) {
+            console.warn("Failed to decode data-play-url attribute:", err);
+            url = rawUrlValue;
+          }
+        }
+
+        const magnet = typeof rawMagnetValue === "string" ? rawMagnetValue : "";
+        const eventId = trigger.getAttribute("data-video-id");
+
+        if (eventId) {
+          await this.playVideoByEventId(eventId);
+        } else {
+          await this.playVideoWithFallback({ url, magnet });
+        }
+      }
+    };
+
+    this._videoListElement = this.videoList;
+    this._videoListClickHandler = handler;
+    this.videoList.addEventListener("click", handler);
+  }
+
   /**
    * Attempt to load the user's own profile from Nostr (kind:0).
    */
@@ -656,6 +1305,11 @@ class bitvidApp {
         picture = data.picture || "assets/svg/default-profile.svg";
       }
 
+      this.setProfileCacheEntry(pubkey, {
+        name: displayName,
+        picture,
+      });
+
       // If you have a top-bar avatar (profileAvatar)
       if (this.profileAvatar) {
         this.profileAvatar.src = picture;
@@ -673,14 +1327,12 @@ class bitvidApp {
   }
 
   async fetchAndRenderProfile(pubkey, forceRefresh = false) {
-    const now = Date.now();
-
-    // 1) Check if we have a cached entry
-    const cacheEntry = this.profileCache.get(pubkey);
-    if (!forceRefresh && cacheEntry && now - cacheEntry.timestamp < 60000) {
-      // If it's less than 60 seconds old, just update DOM with it
+    const cacheEntry = this.getProfileCacheEntry(pubkey);
+    if (cacheEntry) {
       this.updateProfileInDOM(pubkey, cacheEntry.profile);
-      return;
+      if (!forceRefresh) {
+        return;
+      }
     }
 
     // 2) Otherwise, fetch from Nostr
@@ -696,7 +1348,7 @@ class bitvidApp {
         };
 
         // Cache it
-        this.profileCache.set(pubkey, { profile, timestamp: now });
+        this.setProfileCacheEntry(pubkey, profile);
         // Update DOM
         this.updateProfileInDOM(pubkey, profile);
       }
@@ -709,10 +1361,25 @@ class bitvidApp {
     const pubkeys = Array.from(authorSet);
     if (!pubkeys.length) return;
 
+    const toFetch = [];
+
+    pubkeys.forEach((pubkey) => {
+      const cacheEntry = this.getProfileCacheEntry(pubkey);
+      if (cacheEntry) {
+        this.updateProfileInDOM(pubkey, cacheEntry.profile);
+      } else {
+        toFetch.push(pubkey);
+      }
+    });
+
+    if (!toFetch.length) {
+      return;
+    }
+
     const filter = {
       kinds: [0],
-      authors: pubkeys,
-      limit: pubkeys.length,
+      authors: toFetch,
+      limit: toFetch.length,
     };
 
     try {
@@ -743,7 +1410,7 @@ class bitvidApp {
             name: data.name || data.display_name || "Unknown",
             picture: data.picture || "assets/svg/default-profile.svg",
           };
-          this.profileCache.set(pubkey, { profile, timestamp: Date.now() });
+          this.setProfileCacheEntry(pubkey, profile);
           this.updateProfileInDOM(pubkey, profile);
         } catch (err) {
           console.error("Profile parse error:", err);
@@ -781,32 +1448,59 @@ class bitvidApp {
     }
 
     const titleEl = document.getElementById("uploadTitle");
+    const urlEl = document.getElementById("uploadUrl");
     const magnetEl = document.getElementById("uploadMagnet");
+    const wsEl = document.getElementById("uploadWs");
+    const xsEl = document.getElementById("uploadXs");
     const thumbEl = document.getElementById("uploadThumbnail");
     const descEl = document.getElementById("uploadDescription");
     const privEl = document.getElementById("uploadIsPrivate");
 
+    const title = titleEl?.value.trim() || "";
+    const url = urlEl?.value.trim() || "";
+    const magnet = magnetEl?.value.trim() || "";
+    const ws = wsEl?.value.trim() || "";
+    const xs = xsEl?.value.trim() || "";
+    const thumbnail = thumbEl?.value.trim() || "";
+    const description = descEl?.value.trim() || "";
+
     const formData = {
-      version: 2,
-      title: titleEl?.value.trim() || "",
-      magnet: magnetEl?.value.trim() || "",
-      thumbnail: thumbEl?.value.trim() || "",
-      description: descEl?.value.trim() || "",
+      version: 3,
+      title,
+      url,
+      magnet,
+      thumbnail,
+      description,
       mode: isDevMode ? "dev" : "live",
       // isPrivate: privEl?.checked || false,
     };
 
-    if (!formData.title || !formData.magnet) {
-      this.showError("Title and Magnet are required.");
+    if (!formData.title || (!formData.url && !formData.magnet)) {
+      this.showError("Title and at least one of URL or Magnet is required.");
       return;
     }
 
+    if (formData.url && !/^https:\/\//i.test(formData.url)) {
+      this.showError("Hosted video URLs must use HTTPS.");
+      return;
+    }
+
+    if (formData.magnet) {
+      formData.magnet = normalizeAndAugmentMagnet(formData.magnet, {
+        ws,
+        xs,
+      });
+    }
+
     try {
       await nostrClient.publishVideo(formData, this.pubkey);
 
       // Clear fields
       if (titleEl) titleEl.value = "";
+      if (urlEl) urlEl.value = "";
       if (magnetEl) magnetEl.value = "";
+      if (wsEl) wsEl.value = "";
+      if (xsEl) xsEl.value = "";
       if (thumbEl) thumbEl.value = "";
       if (descEl) descEl.value = "";
       if (privEl) privEl.checked = false;
@@ -839,7 +1533,7 @@ class bitvidApp {
     }
     // Optionally hide logout or userStatus
     if (this.logoutButton) {
-      this.logoutButton.classList.add("hidden");
+      this.logoutButton.classList.remove("hidden");
     }
     if (this.userStatus) {
       this.userStatus.classList.add("hidden");
@@ -922,25 +1616,368 @@ class bitvidApp {
   /**
    * Cleanup resources on unload or modal close.
    */
-  async cleanup() {
-    try {
-      // If there's a small inline player
-      if (this.videoElement) {
-        this.videoElement.pause();
-        this.videoElement.src = "";
-        this.videoElement.load();
+  async cleanup({ preserveSubscriptions = false, preserveObservers = false } = {}) {
+    // Serialise teardown so overlapping calls (e.g. close button spam) don't
+    // race each other and clobber a fresh playback setup.
+    if (this.cleanupPromise) {
+      try {
+        await this.cleanupPromise;
+      } catch (err) {
+        console.warn("Previous cleanup rejected:", err);
       }
-      // If there's a modal video
-      if (this.modalVideo) {
-        this.modalVideo.pause();
-        this.modalVideo.src = "";
-        this.modalVideo.load();
-      }
-      // Tell webtorrent to cleanup
-      await torrentClient.cleanup();
-    } catch (err) {
-      console.error("Cleanup error:", err);
     }
+
+    const runCleanup = async () => {
+      try {
+        this.clearActiveIntervals();
+        this.cleanupUrlPlaybackWatchdog();
+
+        if (!preserveObservers && this.mediaLoader) {
+          this.mediaLoader.disconnect();
+        }
+
+        if (!preserveSubscriptions && this.videoSubscription) {
+          try {
+            if (typeof this.videoSubscription.unsub === "function") {
+              this.videoSubscription.unsub();
+            }
+          } catch (err) {
+            console.error("Failed to unsubscribe from video feed:", err);
+          } finally {
+            this.videoSubscription = null;
+          }
+        }
+
+        // If there's a small inline player
+        if (this.videoElement) {
+          this.videoElement.pause();
+          this.videoElement.src = "";
+          // When WebTorrent (or other MediaSource based flows) mount a stream they
+          // set `srcObject` behind the scenes. Forgetting to clear it leaves the
+          // detached MediaSource hanging around which breaks the next playback
+          // attempt. Always null it out alongside the normal `src` reset.
+          this.videoElement.srcObject = null;
+          this.videoElement.load();
+        }
+        // If there's a modal video
+        if (this.modalVideo) {
+          this.modalVideo.pause();
+          this.modalVideo.src = "";
+          // See comment above—keep the `srcObject` reset paired with the `src`
+          // wipe so magnet-only replays do not regress into the grey screen bug.
+          this.modalVideo.srcObject = null;
+          this.modalVideo.load();
+        }
+        // Tell webtorrent to cleanup
+        await torrentClient.cleanup();
+      } catch (err) {
+        console.error("Cleanup error:", err);
+      }
+    };
+
+    const cleanupPromise = runCleanup();
+    this.cleanupPromise = cleanupPromise;
+
+    try {
+      await cleanupPromise;
+    } finally {
+      if (this.cleanupPromise === cleanupPromise) {
+        this.cleanupPromise = null;
+      }
+    }
+  }
+
+  async waitForCleanup() {
+    if (!this.cleanupPromise) {
+      return;
+    }
+
+    try {
+      await this.cleanupPromise;
+    } catch (err) {
+      console.warn("waitForCleanup observed a rejected cleanup:", err);
+    }
+  }
+
+  clearActiveIntervals() {
+    if (!Array.isArray(this.activeIntervals) || !this.activeIntervals.length) {
+      return;
+    }
+    this.activeIntervals.forEach((id) => clearInterval(id));
+    this.activeIntervals = [];
+  }
+
+  cleanupUrlPlaybackWatchdog() {
+    if (typeof this.urlPlaybackWatchdogCleanup === "function") {
+      try {
+        this.urlPlaybackWatchdogCleanup();
+      } catch (err) {
+        console.warn("[cleanupUrlPlaybackWatchdog]", err);
+      } finally {
+        this.urlPlaybackWatchdogCleanup = null;
+      }
+    }
+  }
+
+  registerUrlPlaybackWatchdogs(
+    videoElement,
+    { stallMs = 8000, onSuccess, onFallback } = {}
+  ) {
+    this.cleanupUrlPlaybackWatchdog();
+
+    if (!videoElement || typeof onFallback !== "function") {
+      return () => {};
+    }
+
+    const normalizedStallMs = Number.isFinite(stallMs) && stallMs > 0 ? stallMs : 0;
+    let active = true;
+    let stallTimerId = null;
+
+    const listeners = [];
+
+    const cleanup = () => {
+      if (!active) {
+        return;
+      }
+      active = false;
+      if (stallTimerId) {
+        clearTimeout(stallTimerId);
+        stallTimerId = null;
+      }
+      for (const [eventName, handler] of listeners) {
+        videoElement.removeEventListener(eventName, handler);
+      }
+      this.urlPlaybackWatchdogCleanup = null;
+    };
+
+    const triggerFallback = (reason) => {
+      if (!active) {
+        return;
+      }
+      cleanup();
+      onFallback(reason);
+    };
+
+    const handleSuccess = () => {
+      if (!active) {
+        return;
+      }
+      cleanup();
+      if (typeof onSuccess === "function") {
+        onSuccess();
+      }
+    };
+
+    const resetTimer = () => {
+      if (!active || !normalizedStallMs) {
+        return;
+      }
+      if (stallTimerId) {
+        clearTimeout(stallTimerId);
+      }
+      stallTimerId = setTimeout(() => triggerFallback("stall"), normalizedStallMs);
+    };
+
+    const addListener = (eventName, handler) => {
+      videoElement.addEventListener(eventName, handler);
+      listeners.push([eventName, handler]);
+    };
+
+    addListener("error", () => triggerFallback("error"));
+    addListener("abort", () => triggerFallback("abort"));
+    addListener("stalled", () => triggerFallback("stalled"));
+    addListener("emptied", () => triggerFallback("emptied"));
+    addListener("playing", handleSuccess);
+    addListener("ended", handleSuccess);
+
+    const timerEvents = [
+      "timeupdate",
+      "progress",
+      "loadeddata",
+      "canplay",
+      "canplaythrough",
+      "suspend",
+      "waiting",
+    ];
+    for (const eventName of timerEvents) {
+      addListener(eventName, resetTimer);
+    }
+
+    if (normalizedStallMs) {
+      resetTimer();
+    }
+
+    this.urlPlaybackWatchdogCleanup = () => {
+      cleanup();
+    };
+
+    return this.urlPlaybackWatchdogCleanup;
+  }
+
+  resetTorrentStats() {
+    if (this.modalPeers) {
+      this.modalPeers.textContent = "";
+    }
+    if (this.modalSpeed) {
+      this.modalSpeed.textContent = "";
+    }
+    if (this.modalDownloaded) {
+      this.modalDownloaded.textContent = "";
+    }
+    if (this.modalProgress) {
+      this.modalProgress.style.width = "0%";
+    }
+  }
+
+  setCopyMagnetState(enabled) {
+    if (!this.copyMagnetBtn) {
+      return;
+    }
+    this.copyMagnetBtn.disabled = !enabled;
+    this.copyMagnetBtn.setAttribute("aria-disabled", (!enabled).toString());
+    this.copyMagnetBtn.classList.toggle("opacity-50", !enabled);
+    this.copyMagnetBtn.classList.toggle("cursor-not-allowed", !enabled);
+  }
+
+  setShareButtonState(enabled) {
+    if (!this.shareBtn) {
+      return;
+    }
+    this.shareBtn.disabled = !enabled;
+    this.shareBtn.setAttribute("aria-disabled", (!enabled).toString());
+    this.shareBtn.classList.toggle("opacity-50", !enabled);
+    this.shareBtn.classList.toggle("cursor-not-allowed", !enabled);
+  }
+
+  getShareUrlBase() {
+    try {
+      const current = new URL(window.location.href);
+      return `${current.origin}${current.pathname}`;
+    } catch (err) {
+      const origin = window.location?.origin || "";
+      const pathname = window.location?.pathname || "";
+      if (origin || pathname) {
+        return `${origin}${pathname}`;
+      }
+      const href = window.location?.href || "";
+      if (href) {
+        const base = href.split(/[?#]/)[0];
+        if (base) {
+          return base;
+        }
+      }
+      console.warn("Unable to determine share URL base:", err);
+      return "";
+    }
+  }
+
+  buildShareUrlFromNevent(nevent) {
+    if (!nevent) {
+      return "";
+    }
+    const base = this.getShareUrlBase();
+    if (!base) {
+      return "";
+    }
+    return `${base}?v=${encodeURIComponent(nevent)}`;
+  }
+
+  buildShareUrlFromEventId(eventId) {
+    if (!eventId) {
+      return "";
+    }
+
+    try {
+      const nevent = window.NostrTools.nip19.neventEncode({ id: eventId });
+      return this.buildShareUrlFromNevent(nevent);
+    } catch (err) {
+      console.error("Error generating nevent for share URL:", err);
+      return "";
+    }
+  }
+
+  dedupeVideosByRoot(videos) {
+    if (!Array.isArray(videos) || videos.length === 0) {
+      return [];
+    }
+    return dedupeToNewestByRoot(videos);
+  }
+
+  prepareModalVideoForPlayback() {
+    if (!this.modalVideo) {
+      return;
+    }
+
+    const storedUnmuted = localStorage.getItem("unmutedAutoplay");
+    const userWantsUnmuted = storedUnmuted === "true";
+    this.modalVideo.muted = !userWantsUnmuted;
+
+    if (!this.modalVideo.dataset.autoplayBound) {
+      this.modalVideo.addEventListener("volumechange", () => {
+        localStorage.setItem(
+          "unmutedAutoplay",
+          (!this.modalVideo.muted).toString()
+        );
+      });
+      this.modalVideo.dataset.autoplayBound = "true";
+    }
+  }
+
+  autoplayModalVideo() {
+    if (!this.modalVideo) return;
+    this.modalVideo.play().catch((err) => {
+      this.log("Autoplay failed:", err);
+      if (!this.modalVideo.muted) {
+        this.log("Falling back to muted autoplay.");
+        this.modalVideo.muted = true;
+        this.modalVideo.play().catch((err2) => {
+          this.log("Muted autoplay also failed:", err2);
+        });
+      }
+    });
+  }
+
+  startTorrentStatusMirrors(torrentInstance) {
+    if (!torrentInstance) {
+      return;
+    }
+
+    const updateInterval = setInterval(() => {
+      if (!document.body.contains(this.modalVideo)) {
+        clearInterval(updateInterval);
+        return;
+      }
+      this.updateTorrentStatus(torrentInstance);
+    }, 3000);
+    this.activeIntervals.push(updateInterval);
+
+    const mirrorInterval = setInterval(() => {
+      if (!document.body.contains(this.modalVideo)) {
+        clearInterval(mirrorInterval);
+        return;
+      }
+      const status = document.getElementById("status");
+      const progress = document.getElementById("progress");
+      const peers = document.getElementById("peers");
+      const speed = document.getElementById("speed");
+      const downloaded = document.getElementById("downloaded");
+      if (status && this.modalStatus) {
+        this.modalStatus.textContent = status.textContent;
+      }
+      if (progress && this.modalProgress) {
+        this.modalProgress.style.width = progress.style.width;
+      }
+      if (peers && this.modalPeers) {
+        this.modalPeers.textContent = peers.textContent;
+      }
+      if (speed && this.modalSpeed) {
+        this.modalSpeed.textContent = speed.textContent;
+      }
+      if (downloaded && this.modalDownloaded) {
+        this.modalDownloaded.textContent = downloaded.textContent;
+      }
+    }, 3000);
+    this.activeIntervals.push(mirrorInterval);
   }
 
   /**
@@ -948,23 +1985,31 @@ class bitvidApp {
    */
   async hideModal() {
     // 1) Clear intervals, cleanup, etc. (unchanged)
-    if (this.activeIntervals && this.activeIntervals.length) {
-      this.activeIntervals.forEach((id) => clearInterval(id));
-      this.activeIntervals = [];
-    }
+    this.clearActiveIntervals();
 
     try {
       await fetch("/webtorrent/cancel/", { mode: "no-cors" });
     } catch (err) {
       // ignore
     }
-    await this.cleanup();
+    await this.cleanup({
+      preserveSubscriptions: true,
+      preserveObservers: true,
+    });
 
     // 2) Hide the modal
     if (this.playerModal) {
       this.playerModal.style.display = "none";
       this.playerModal.classList.add("hidden");
     }
+    if (typeof this.modalPosterCleanup === "function") {
+      this.modalPosterCleanup();
+      this.modalPosterCleanup = null;
+    }
+    if (this.modalVideo) {
+      this.modalVideo.poster = "";
+      this.modalVideo.removeAttribute("poster");
+    }
     this.currentMagnetUri = null;
 
     // 3) Remove only `?v=` but **keep** the hash
@@ -980,6 +2025,27 @@ class bitvidApp {
   async loadVideos(forceFetch = false) {
     console.log("Starting loadVideos... (forceFetch =", forceFetch, ")");
 
+    const shouldIncludeVideo = (video) => {
+      if (!video || typeof video !== "object") {
+        return false;
+      }
+
+      if (this.blacklistedEventIds.has(video.id)) {
+        return false;
+      }
+
+      const authorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
+      if (initialBlacklist.includes(authorNpub)) {
+        return false;
+      }
+
+      if (isWhitelistEnabled && !initialWhitelist.includes(authorNpub)) {
+        return false;
+      }
+
+      return true;
+    };
+
     // If forceFetch is true, unsubscribe from the old subscription to start fresh
     if (forceFetch && this.videoSubscription) {
       // Call unsubscribe on the subscription object directly.
@@ -990,6 +2056,7 @@ class bitvidApp {
     // The rest of your existing logic:
     if (!this.videoSubscription) {
       if (this.videoList) {
+        this.lastRenderedVideoSignature = null;
         this.videoList.innerHTML = `
         <p class="text-center text-gray-500">
           Loading videos as they arrive...
@@ -1001,29 +2068,17 @@ class bitvidApp {
         const updatedAll = nostrClient.getActiveVideos();
 
         // Filter out blacklisted authors & blacklisted event IDs
-        const filteredVideos = updatedAll.filter((video) => {
-          // 1) If the event ID is in our blacklistedEventIds set, skip
-          if (this.blacklistedEventIds.has(video.id)) {
-            return false;
-          }
-
-          // 2) Check if the author's npub is in initialBlacklist
-          const authorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
-          if (initialBlacklist.includes(authorNpub)) {
-            return false;
-          }
-
-          // 3) If whitelist mode is enabled, only keep authors in initialWhitelist
-          if (isWhitelistEnabled && !initialWhitelist.includes(authorNpub)) {
-            return false;
-          }
-
-          return true;
-        });
+        const filteredVideos = updatedAll.filter(shouldIncludeVideo);
 
         this.renderVideoList(filteredVideos);
       });
 
+      const cachedActiveVideos = nostrClient.getActiveVideos();
+      const cachedFiltered = cachedActiveVideos.filter(shouldIncludeVideo);
+      if (cachedFiltered.length) {
+        this.renderVideoList(cachedFiltered);
+      }
+
       if (this.videoSubscription) {
         console.log(
           "[loadVideos] subscription remains open to get live updates."
@@ -1033,22 +2088,7 @@ class bitvidApp {
       // Already subscribed: just show what's cached
       const allCached = nostrClient.getActiveVideos();
 
-      const filteredCached = allCached.filter((video) => {
-        if (this.blacklistedEventIds.has(video.id)) {
-          return false;
-        }
-
-        const authorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
-        if (initialBlacklist.includes(authorNpub)) {
-          return false;
-        }
-
-        if (isWhitelistEnabled && !initialWhitelist.includes(authorNpub)) {
-          return false;
-        }
-
-        return true;
-      });
+      const filteredCached = allCached.filter(shouldIncludeVideo);
 
       this.renderVideoList(filteredCached);
     }
@@ -1094,11 +2134,297 @@ class bitvidApp {
     return olderMatches.length > 0;
   }
 
+  /**
+   * Centralised helper for other modules (channel profiles, subscriptions)
+   * so they can re-use the exact same badge skeleton. Keeping the markup in
+   * one place avoids subtle mismatches when we tweak copy or classes later.
+   */
+  getUrlHealthPlaceholderMarkup(options = {}) {
+    const includeMargin = options?.includeMargin !== false;
+    const classes = [
+      "url-health-badge",
+      "text-xs",
+      "font-semibold",
+      "px-2",
+      "py-1",
+      "rounded",
+      "inline-flex",
+      "items-center",
+      "gap-1",
+      "bg-gray-800",
+      "text-gray-300",
+    ];
+    if (includeMargin) {
+      classes.splice(1, 0, "mt-3");
+    }
+
+    return `
+      <div
+        class="${classes.join(" ")}"
+        data-url-health-state="checking"
+        aria-live="polite"
+        role="status"
+      >
+        Checking hosted URL…
+      </div>
+    `;
+  }
+
+  getTorrentHealthBadgeMarkup(options = {}) {
+    const includeMargin = options?.includeMargin !== false;
+    const classes = [
+      "torrent-health-badge",
+      "text-xs",
+      "font-semibold",
+      "px-2",
+      "py-1",
+      "rounded",
+      "inline-flex",
+      "items-center",
+      "gap-1",
+      "bg-gray-800",
+      "text-gray-300",
+      "transition-colors",
+      "duration-200",
+    ];
+    if (includeMargin) {
+      classes.unshift("mt-3");
+    }
+
+    return `
+      <div
+        class="${classes.join(" ")}"
+        data-stream-health-state="checking"
+        aria-live="polite"
+        role="status"
+      >
+        ⏳ Torrent
+      </div>
+    `;
+  }
+
+  isMagnetUriSupported(magnet) {
+    return isValidMagnetUri(magnet);
+  }
+
+  getCachedUrlHealth(eventId, url) {
+    return readUrlHealthFromCache(eventId, url);
+  }
+
+  storeUrlHealth(eventId, url, result, ttlMs) {
+    return writeUrlHealthToCache(eventId, url, result, ttlMs);
+  }
+
+  updateUrlHealthBadge(badgeEl, state, videoId) {
+    if (!badgeEl) {
+      return;
+    }
+
+    if (videoId && badgeEl.dataset.urlHealthFor && badgeEl.dataset.urlHealthFor !== videoId) {
+      return;
+    }
+
+    if (!badgeEl.isConnected) {
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(() => {
+          if (badgeEl.isConnected) {
+            this.updateUrlHealthBadge(badgeEl, state, videoId);
+          }
+        });
+      }
+      return;
+    }
+
+    const status = state?.status || "checking";
+    const message =
+      state?.message ||
+      (status === "healthy"
+        ? "✅ CDN"
+        : status === "offline"
+        ? "❌ CDN"
+        : status === "unknown"
+        ? "⚠️ CDN"
+        : status === "timeout"
+        ? "⚠️ CDN timed out"
+        : "Checking hosted URL…");
+
+    const hadMargin = badgeEl.classList.contains("mt-3");
+
+    badgeEl.dataset.urlHealthState = status;
+    badgeEl.setAttribute("aria-live", "polite");
+    badgeEl.setAttribute("role", status === "offline" ? "alert" : "status");
+    badgeEl.textContent = message;
+
+    const baseClasses = [
+      "url-health-badge",
+      "text-xs",
+      "font-semibold",
+      "px-2",
+      "py-1",
+      "rounded",
+      "transition-colors",
+      "duration-200",
+    ];
+    if (hadMargin) {
+      baseClasses.unshift("mt-3");
+    }
+    badgeEl.className = baseClasses.join(" ");
+
+    if (status === "healthy") {
+      badgeEl.classList.add(
+        "inline-flex",
+        "items-center",
+        "gap-1",
+        "bg-green-900",
+        "text-green-200"
+      );
+    } else if (status === "offline") {
+      badgeEl.classList.add(
+        "inline-flex",
+        "items-center",
+        "gap-1",
+        "bg-red-900",
+        "text-red-200"
+      );
+    } else if (status === "unknown" || status === "timeout") {
+      badgeEl.classList.add(
+        "inline-flex",
+        "items-center",
+        "gap-1",
+        "bg-amber-900",
+        "text-amber-200"
+      );
+    } else {
+      badgeEl.classList.add(
+        "inline-flex",
+        "items-center",
+        "gap-1",
+        "bg-gray-800",
+        "text-gray-300"
+      );
+    }
+  }
+
+  handleUrlHealthBadge({ video, url, badgeEl }) {
+    if (!video?.id || !badgeEl || !url) {
+      return;
+    }
+
+    const eventId = video.id;
+    const trimmedUrl = typeof url === "string" ? url.trim() : "";
+    if (!trimmedUrl) {
+      return;
+    }
+
+    badgeEl.dataset.urlHealthFor = eventId;
+
+    const cached = this.getCachedUrlHealth(eventId, trimmedUrl);
+    if (cached) {
+      this.updateUrlHealthBadge(badgeEl, cached, eventId);
+      return;
+    }
+
+    this.updateUrlHealthBadge(badgeEl, { status: "checking" }, eventId);
+
+    const existingProbe = getInFlightUrlProbe(eventId, trimmedUrl);
+    if (existingProbe) {
+      existingProbe
+        .then((entry) => {
+          if (entry) {
+            this.updateUrlHealthBadge(badgeEl, entry, eventId);
+          }
+        })
+        .catch((err) => {
+          console.warn(
+            `[urlHealth] cached probe promise rejected for ${trimmedUrl}:`,
+            err
+          );
+        });
+      return;
+    }
+
+    const probePromise = this.probeUrl(trimmedUrl)
+      .then((result) => {
+        const outcome = result?.outcome || "error";
+        let entry;
+
+        if (outcome === "ok") {
+          entry = { status: "healthy", message: "✅ CDN" };
+        } else if (outcome === "opaque") {
+          entry = {
+            status: "unknown",
+            message: "⚠️ CDN",
+          };
+        } else if (outcome === "timeout") {
+          entry = {
+            status: "timeout",
+            message: "⚠️ CDN timed out",
+          };
+        } else {
+          entry = {
+            status: "offline",
+            message: "❌ CDN",
+          };
+        }
+
+        return this.storeUrlHealth(eventId, trimmedUrl, entry);
+      })
+      .catch((err) => {
+        console.warn(`[urlHealth] probe failed for ${trimmedUrl}:`, err);
+        const entry = {
+          status: "offline",
+          message: "❌ CDN",
+        };
+        return this.storeUrlHealth(eventId, trimmedUrl, entry);
+      });
+
+    setInFlightUrlProbe(eventId, trimmedUrl, probePromise);
+
+    probePromise
+      .then((entry) => {
+        if (entry) {
+          this.updateUrlHealthBadge(badgeEl, entry, eventId);
+        }
+      })
+      .catch((err) => {
+        console.warn(
+          `[urlHealth] probe promise rejected post-cache for ${trimmedUrl}:`,
+          err
+        );
+      });
+  }
+
   async renderVideoList(videos) {
     if (!this.videoList) return;
 
+    if (this._lastRenderedVideoListElement !== this.videoList) {
+      this.lastRenderedVideoSignature = null;
+      this._lastRenderedVideoListElement = this.videoList;
+    }
+
+    const dedupedVideos = this.dedupeVideosByRoot(videos);
+
+    if (this.loadedThumbnails && this.loadedThumbnails.size) {
+      const activeIds = new Set();
+      dedupedVideos.forEach((video) => {
+        if (video && typeof video.id === "string" && video.id) {
+          activeIds.add(video.id);
+        }
+      });
+      Array.from(this.loadedThumbnails.keys()).forEach((videoId) => {
+        if (!activeIds.has(videoId)) {
+          this.loadedThumbnails.delete(videoId);
+        }
+      });
+    }
+
     // 1) If no videos
-    if (!videos || videos.length === 0) {
+    if (!dedupedVideos.length) {
+      this.renderedVideoIds.clear();
+      if (this.lastRenderedVideoSignature === EMPTY_VIDEO_LIST_SIGNATURE) {
+        return;
+      }
+      this.lastRenderedVideoSignature = EMPTY_VIDEO_LIST_SIGNATURE;
       this.videoList.innerHTML = `
         <p class="flex justify-center items-center h-full w-full text-center text-gray-500">
           No public videos available yet. Be the first to upload one!
@@ -1107,14 +2433,39 @@ class bitvidApp {
     }
 
     // 2) Sort newest first
-    videos.sort((a, b) => b.created_at - a.created_at);
+    dedupedVideos.sort((a, b) => b.created_at - a.created_at);
+
+    const signaturePayload = dedupedVideos.map((video) => ({
+      id: typeof video.id === "string" ? video.id : "",
+      createdAt: Number.isFinite(video.created_at)
+        ? video.created_at
+        : Number(video.created_at) || 0,
+      deleted: Boolean(video.deleted),
+      isPrivate: Boolean(video.isPrivate),
+      thumbnail: typeof video.thumbnail === "string" ? video.thumbnail : "",
+      url: typeof video.url === "string" ? video.url : "",
+      magnet: typeof video.magnet === "string" ? video.magnet : "",
+    }));
+    const signature = JSON.stringify(signaturePayload);
+
+    if (signature === this.lastRenderedVideoSignature) {
+      return;
+    }
+    this.lastRenderedVideoSignature = signature;
+
+    const previouslyRenderedIds = new Set(this.renderedVideoIds);
+    this.renderedVideoIds.clear();
 
     const fullAllEventsArray = Array.from(nostrClient.allEvents.values());
     const fragment = document.createDocumentFragment();
     const authorSet = new Set();
+    const defaultShareBase =
+      this.getShareUrlBase() ||
+      `${window.location?.origin || ""}${window.location?.pathname || ""}` ||
+      (window.location?.href ? window.location.href.split(/[?#]/)[0] : "");
 
     // 3) Build each card
-    videos.forEach((video, index) => {
+    dedupedVideos.forEach((video, index) => {
       if (!video.id || !video.title) {
         console.error("Video missing ID/title:", video);
         return;
@@ -1123,14 +2474,16 @@ class bitvidApp {
       authorSet.add(video.pubkey);
 
       const nevent = window.NostrTools.nip19.neventEncode({ id: video.id });
-      const shareUrl = `${window.location.pathname}?v=${encodeURIComponent(
-        nevent
-      )}`;
+      const shareUrl =
+        this.buildShareUrlFromNevent(nevent) ||
+        `${defaultShareBase}?v=${encodeURIComponent(nevent)}`;
       const canEdit = video.pubkey === this.pubkey;
       const highlightClass =
         video.isPrivate && canEdit
           ? "border-2 border-yellow-500"
           : "border-none";
+      const isNewlyRendered = !previouslyRenderedIds.has(video.id);
+      const animationClass = isNewlyRendered ? "video-card--enter" : "";
       const timeAgo = this.formatTimeAgo(video.created_at);
 
       // Check if there's an older version
@@ -1144,6 +2497,7 @@ class bitvidApp {
           <button
             class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
             data-revert-index="${index}"
+            data-revert-event-id="${video.id}"
           >
             Revert
           </button>
@@ -1172,6 +2526,7 @@ class bitvidApp {
                 <button
                   class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
                   data-edit-index="${index}"
+                  data-edit-event-id="${video.id}"
                 >
                   Edit
                 </button>
@@ -1179,6 +2534,7 @@ class bitvidApp {
                 <button
                   class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
                   data-delete-all-index="${index}"
+                  data-delete-all-event-id="${video.id}"
                 >
                   Delete All
                 </button>
@@ -1188,19 +2544,92 @@ class bitvidApp {
         `
         : "";
 
+      const trimmedUrl = typeof video.url === "string" ? video.url.trim() : "";
+      const trimmedMagnet =
+        typeof video.magnet === "string" ? video.magnet.trim() : "";
+      const legacyInfoHash =
+        typeof video.infoHash === "string" ? video.infoHash.trim() : "";
+      const magnetCandidate = trimmedMagnet || legacyInfoHash;
+      const magnetSupported = isValidMagnetUri(magnetCandidate);
+      const magnetProvided = magnetCandidate.length > 0;
+      const playbackUrl = trimmedUrl;
+      const playbackMagnet = magnetCandidate;
+      const showUnsupportedTorrentBadge =
+        !trimmedUrl && magnetProvided && !magnetSupported;
+      const torrentWarningHtml = showUnsupportedTorrentBadge
+        ? `
+          <p
+            class="mt-3 text-xs text-amber-300"
+            data-torrent-status="unsupported"
+            title="${UNSUPPORTED_BTITH_MESSAGE}"
+          >
+            WebTorrent fallback unavailable (magnet missing btih info hash)
+          </p>
+        `
+        : "";
+
+      const urlBadgeHtml = trimmedUrl
+        ? this.getUrlHealthPlaceholderMarkup({ includeMargin: false })
+        : "";
+      const torrentHealthBadgeHtml =
+        magnetSupported && magnetProvided
+          ? this.getTorrentHealthBadgeMarkup({ includeMargin: false })
+          : "";
+      const connectionBadgesHtml =
+        urlBadgeHtml || torrentHealthBadgeHtml
+          ? `
+            <div class="mt-3 flex flex-wrap items-center gap-2">
+              ${urlBadgeHtml}${torrentHealthBadgeHtml}
+            </div>
+          `
+          : "";
+
+      const rawThumbnail =
+        typeof video.thumbnail === "string" ? video.thumbnail.trim() : "";
+      const escapedThumbnail = rawThumbnail
+        ? this.escapeHTML(rawThumbnail)
+        : "";
+      const previouslyLoadedThumbnail =
+        this.loadedThumbnails.get(video.id) || "";
+      const shouldLazyLoadThumbnail =
+        escapedThumbnail && previouslyLoadedThumbnail !== escapedThumbnail;
+      const shouldAnimateThumbnail =
+        !!escapedThumbnail && previouslyLoadedThumbnail !== escapedThumbnail;
+      const thumbnailAttrLines = ["data-video-thumbnail=\"true\""];
+      if (shouldLazyLoadThumbnail) {
+        thumbnailAttrLines.push(
+          `src=\"${FALLBACK_THUMBNAIL_SRC}\"`,
+          `data-fallback-src=\"${FALLBACK_THUMBNAIL_SRC}\"`,
+          `data-lazy=\"${escapedThumbnail}\"`,
+          'loading="lazy"',
+          'decoding="async"'
+        );
+      } else {
+        thumbnailAttrLines.push(
+          `src=\"${escapedThumbnail || FALLBACK_THUMBNAIL_SRC}\"`,
+          `data-fallback-src=\"${FALLBACK_THUMBNAIL_SRC}\"`,
+          'loading="lazy"',
+          'decoding="async"'
+        );
+      }
+      thumbnailAttrLines.push(
+        `alt=\"${this.escapeHTML(video.title)}\"`
+      );
+
       const cardHtml = `
-        <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass}">
+        <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass} ${animationClass}">
           <!-- The clickable link to play video -->
           <a
             href="${shareUrl}"
-            data-play-magnet="${encodeURIComponent(video.magnet)}"
+            data-video-id="${video.id}"
+            data-play-url=""
+            data-play-magnet=""
+            data-torrent-supported="${magnetSupported ? "true" : "false"}"
             class="block cursor-pointer relative group"
           >
             <div class="ratio-16-9">
               <img
-                src="assets/jpg/video-thumbnail-fallback.jpg"
-                data-lazy="${this.escapeHTML(video.thumbnail)}"
-                alt="${this.escapeHTML(video.title)}"
+                ${thumbnailAttrLines.join("\n                ")}
               />
             </div>
           </a>
@@ -1208,7 +2637,10 @@ class bitvidApp {
             <!-- Title triggers the video modal as well -->
             <h3
               class="text-lg font-bold text-white line-clamp-2 hover:text-blue-400 cursor-pointer mb-3"
-              data-play-magnet="${encodeURIComponent(video.magnet)}"
+              data-video-id="${video.id}"
+              data-play-url=""
+              data-play-magnet=""
+              data-torrent-supported="${magnetSupported ? "true" : "false"}"
             >
               ${this.escapeHTML(video.title)}
             </h3>
@@ -1237,6 +2669,8 @@ class bitvidApp {
               </div>
               ${gearMenu}
             </div>
+            ${connectionBadgesHtml}
+            ${torrentWarningHtml}
           </div>
         </div>
       `;
@@ -1244,12 +2678,156 @@ class bitvidApp {
       const template = document.createElement("template");
       template.innerHTML = cardHtml.trim();
       const cardEl = template.content.firstElementChild;
+      if (cardEl) {
+        const thumbnailEl = cardEl.querySelector("[data-video-thumbnail]");
+        if (thumbnailEl) {
+          const markThumbnailAsLoaded = () => {
+            if (!escapedThumbnail) {
+              return;
+            }
+
+            if (shouldAnimateThumbnail) {
+              // Flag the element so CSS runs a one-time fade. js/index.js scrubs
+              // this attribute in the `animationend` handler so reusing the same
+              // DOM node later will not re-trigger the animation and flash.
+              if (thumbnailEl.dataset.thumbnailLoaded !== "true") {
+                thumbnailEl.dataset.thumbnailLoaded = "true";
+              }
+            } else if (thumbnailEl.dataset.thumbnailLoaded) {
+              delete thumbnailEl.dataset.thumbnailLoaded;
+            }
+
+            this.loadedThumbnails.set(video.id, escapedThumbnail);
+          };
+
+          const handleThumbnailLoad = () => {
+            if (thumbnailEl.dataset.thumbnailLoaded === "true") {
+              return;
+            }
+
+            const hasPendingLazySrc =
+              typeof thumbnailEl.dataset.lazy === "string" &&
+              thumbnailEl.dataset.lazy.trim().length > 0;
+
+            if (hasPendingLazySrc) {
+              return;
+            }
+
+            if (thumbnailEl.dataset.thumbnailFailed || !escapedThumbnail) {
+              return;
+            }
+
+            const fallbackAttr =
+              (typeof thumbnailEl.dataset.fallbackSrc === "string"
+                ? thumbnailEl.dataset.fallbackSrc.trim()
+                : "") ||
+              thumbnailEl.getAttribute("data-fallback-src") ||
+              "";
+
+            const currentSrc = thumbnailEl.currentSrc || thumbnailEl.src || "";
+            const isFallbackSrc =
+              !!fallbackAttr &&
+              !!currentSrc &&
+              (currentSrc === fallbackAttr || currentSrc.endsWith(fallbackAttr));
+
+            if (isFallbackSrc) {
+              return;
+            }
+
+            if (
+              (thumbnailEl.naturalWidth === 0 &&
+                thumbnailEl.naturalHeight === 0) ||
+              !currentSrc
+            ) {
+              return;
+            }
+
+            markThumbnailAsLoaded();
+
+            thumbnailEl.removeEventListener("load", handleThumbnailLoad);
+          };
+          const handleThumbnailError = () => {
+            if (
+              escapedThumbnail &&
+              this.loadedThumbnails.get(video.id) === escapedThumbnail
+            ) {
+              this.loadedThumbnails.delete(video.id);
+            }
+
+            if (thumbnailEl.dataset.thumbnailLoaded) {
+              delete thumbnailEl.dataset.thumbnailLoaded;
+            }
+
+            thumbnailEl.removeEventListener("load", handleThumbnailLoad);
+          };
+
+          thumbnailEl.addEventListener("load", handleThumbnailLoad);
+          thumbnailEl.addEventListener("error", handleThumbnailError, {
+            once: true,
+          });
+
+          if (thumbnailEl.complete) {
+            handleThumbnailLoad();
+          }
+        }
+
+        if (showUnsupportedTorrentBadge) {
+          cardEl.dataset.torrentSupported = "false";
+        } else if (magnetProvided && magnetSupported) {
+          cardEl.dataset.torrentSupported = "true";
+        }
+
+        if (magnetProvided) {
+          cardEl.dataset.magnet = playbackMagnet;
+        } else if (cardEl.dataset.magnet) {
+          delete cardEl.dataset.magnet;
+        }
+        const interactiveEls = cardEl.querySelectorAll("[data-video-id]");
+        // We intentionally leave the data-play-* attributes blank in cardHtml and
+        // assign them after template parsing so the raw URL/magnet strings avoid
+        // HTML entity escaping in the literal markup and keep any sensitive
+        // magnet payloads out of the static DOM text.
+        // The play URL is stored URL-encoded to keep spaces and query params
+        // intact inside data-* attributes; attachVideoListHandler() decodes it
+        // before playback.
+        interactiveEls.forEach((el) => {
+          if (!el.dataset) return;
+          el.dataset.playUrl = encodeURIComponent(playbackUrl || "");
+          el.dataset.playMagnet = playbackMagnet || "";
+          if (magnetProvided) {
+            el.dataset.torrentSupported = magnetSupported ? "true" : "false";
+          }
+        });
+
+        if (trimmedUrl) {
+          const badgeEl = cardEl.querySelector("[data-url-health-state]");
+          if (badgeEl) {
+            this.handleUrlHealthBadge({
+              video,
+              url: trimmedUrl,
+              badgeEl,
+            });
+          }
+        }
+      }
+      if (video && video.id) {
+        this.videosMap.set(video.id, video);
+      }
+
       fragment.appendChild(cardEl);
+      this.renderedVideoIds.add(video.id);
     });
 
     // Clear old content, add new
     this.videoList.innerHTML = "";
     this.videoList.appendChild(fragment);
+    attachHealthBadges(this.videoList);
+
+    // Ensure every thumbnail can recover with a fallback image if the primary
+    // source fails to load or returns a zero-sized response (some CDNs error
+    // with HTTP 200 + empty body). We set up the listeners before kicking off
+    // any lazy-loading observers so cached failures are covered as well.
+    this.bindThumbnailFallbacks(this.videoList);
 
     // Lazy-load images
     const lazyEls = this.videoList.querySelectorAll("[data-lazy]");
@@ -1273,10 +2851,15 @@ class bitvidApp {
     const editButtons = this.videoList.querySelectorAll("[data-edit-index]");
     editButtons.forEach((button) => {
       button.addEventListener("click", () => {
-        const index = button.getAttribute("data-edit-index");
-        const dropdown = document.getElementById(`settingsDropdown-${index}`);
+        const indexAttr = button.getAttribute("data-edit-index");
+        const eventId = button.getAttribute("data-edit-event-id") || "";
+        const index = Number.parseInt(indexAttr, 10);
+        const dropdown = document.getElementById(`settingsDropdown-${indexAttr}`);
         if (dropdown) dropdown.classList.add("hidden");
-        this.handleEditVideo(index);
+        this.handleEditVideo({
+          eventId,
+          index: Number.isNaN(index) ? null : index,
+        });
       });
     });
 
@@ -1286,10 +2869,15 @@ class bitvidApp {
     );
     revertButtons.forEach((button) => {
       button.addEventListener("click", () => {
-        const index = button.getAttribute("data-revert-index");
-        const dropdown = document.getElementById(`settingsDropdown-${index}`);
+        const indexAttr = button.getAttribute("data-revert-index");
+        const eventId = button.getAttribute("data-revert-event-id") || "";
+        const index = Number.parseInt(indexAttr, 10);
+        const dropdown = document.getElementById(`settingsDropdown-${indexAttr}`);
         if (dropdown) dropdown.classList.add("hidden");
-        this.handleRevertVideo(index);
+        this.handleRevertVideo({
+          eventId,
+          index: Number.isNaN(index) ? null : index,
+        });
       });
     });
 
@@ -1299,10 +2887,15 @@ class bitvidApp {
     );
     deleteAllButtons.forEach((button) => {
       button.addEventListener("click", () => {
-        const index = button.getAttribute("data-delete-all-index");
-        const dropdown = document.getElementById(`settingsDropdown-${index}`);
+        const indexAttr = button.getAttribute("data-delete-all-index");
+        const eventId = button.getAttribute("data-delete-all-event-id") || "";
+        const index = Number.parseInt(indexAttr, 10);
+        const dropdown = document.getElementById(`settingsDropdown-${indexAttr}`);
         if (dropdown) dropdown.classList.add("hidden");
-        this.handleFullDeleteVideo(index);
+        this.handleFullDeleteVideo({
+          eventId,
+          index: Number.isNaN(index) ? null : index,
+        });
       });
     });
 
@@ -1333,6 +2926,88 @@ class bitvidApp {
     });
   }
 
+  bindThumbnailFallbacks(container) {
+    if (!container || typeof container.querySelectorAll !== "function") {
+      return;
+    }
+
+    const thumbnails = container.querySelectorAll("[data-video-thumbnail]");
+    thumbnails.forEach((img) => {
+      if (!img) {
+        return;
+      }
+
+      const ensureFallbackSource = () => {
+        let fallbackSrc = "";
+        if (typeof img.dataset.fallbackSrc === "string") {
+          fallbackSrc = img.dataset.fallbackSrc.trim();
+        }
+
+        if (!fallbackSrc) {
+          const attr = img.getAttribute("data-fallback-src") || "";
+          fallbackSrc = attr.trim();
+        }
+
+        if (!fallbackSrc && img.tagName === "IMG") {
+          fallbackSrc = FALLBACK_THUMBNAIL_SRC;
+        }
+
+        if (fallbackSrc) {
+          if (img.dataset.fallbackSrc !== fallbackSrc) {
+            img.dataset.fallbackSrc = fallbackSrc;
+          }
+          if (!img.getAttribute("data-fallback-src")) {
+            img.setAttribute("data-fallback-src", fallbackSrc);
+          }
+        }
+
+        return fallbackSrc;
+      };
+
+      const applyFallback = () => {
+        const fallbackSrc = ensureFallbackSource() || FALLBACK_THUMBNAIL_SRC;
+        if (!fallbackSrc) {
+          return;
+        }
+
+        if (img.src !== fallbackSrc) {
+          img.src = fallbackSrc;
+        }
+
+        img.dataset.thumbnailFailed = "true";
+      };
+
+      const handleLoad = () => {
+        if (
+          (img.naturalWidth === 0 && img.naturalHeight === 0) ||
+          !img.currentSrc
+        ) {
+          applyFallback();
+        } else {
+          delete img.dataset.thumbnailFailed;
+        }
+      };
+
+      ensureFallbackSource();
+
+      if (img.dataset.thumbnailFallbackBound === "true") {
+        if (img.complete) {
+          handleLoad();
+        }
+        return;
+      }
+
+      img.addEventListener("error", applyFallback);
+      img.addEventListener("load", handleLoad);
+
+      img.dataset.thumbnailFallbackBound = "true";
+
+      if (img.complete) {
+        handleLoad();
+      }
+    });
+  }
+
   /**
    * Updates the modal to reflect current torrent stats.
    * We remove the unused torrent.status references,
@@ -1346,6 +3021,15 @@ class bitvidApp {
       return;
     }
 
+    if (torrent.ready || (typeof torrent.progress === "number" && torrent.progress > 0)) {
+      // Belt-and-suspenders: if WebTorrent reports progress but the DOM events
+      // failed to fire we still rip off the loading GIF. This regression has
+      // bitten us in past releases, so the extra clear is intentional.
+      this.forceRemoveModalPoster(
+        torrent.ready ? "torrent-ready-flag" : "torrent-progress"
+      );
+    }
+
     // Log only fields that actually exist on the torrent:
     console.log("[DEBUG] torrent.progress =", torrent.progress);
     console.log("[DEBUG] torrent.numPeers =", torrent.numPeers);
@@ -1393,39 +3077,178 @@ class bitvidApp {
     }
   }
 
+  normalizeActionTarget(target) {
+    if (target && typeof target === "object") {
+      const eventId =
+        typeof target.eventId === "string" ? target.eventId.trim() : "";
+      let index = null;
+      if (typeof target.index === "number" && Number.isInteger(target.index)) {
+        index = target.index;
+      } else if (
+        typeof target.index === "string" && target.index.trim().length > 0
+      ) {
+        const parsed = Number.parseInt(target.index.trim(), 10);
+        index = Number.isNaN(parsed) ? null : parsed;
+      }
+      return { eventId, index };
+    }
+
+    if (typeof target === "string") {
+      const trimmed = target.trim();
+      if (!trimmed) {
+        return { eventId: "", index: null };
+      }
+      if (/^-?\d+$/.test(trimmed)) {
+        const parsed = Number.parseInt(trimmed, 10);
+        return { eventId: "", index: Number.isNaN(parsed) ? null : parsed };
+      }
+      return { eventId: trimmed, index: null };
+    }
+
+    if (typeof target === "number" && Number.isInteger(target)) {
+      return { eventId: "", index: target };
+    }
+
+    return { eventId: "", index: null };
+  }
+
+  async resolveVideoActionTarget({
+    eventId = "",
+    index = null,
+    preloadedList,
+  } = {}) {
+    const trimmedEventId = typeof eventId === "string" ? eventId.trim() : "";
+    const normalizedIndex =
+      typeof index === "number" && Number.isInteger(index) && index >= 0
+        ? index
+        : null;
+
+    const candidateLists = Array.isArray(preloadedList)
+      ? [preloadedList]
+      : [];
+
+    for (const list of candidateLists) {
+      if (trimmedEventId) {
+        const match = list.find((video) => video?.id === trimmedEventId);
+        if (match) {
+          this.videosMap.set(match.id, match);
+          return match;
+        }
+      }
+      if (
+        normalizedIndex !== null &&
+        normalizedIndex >= 0 &&
+        normalizedIndex < list.length
+      ) {
+        const match = list[normalizedIndex];
+        if (match) {
+          this.videosMap.set(match.id, match);
+          return match;
+        }
+      }
+    }
+
+    if (trimmedEventId) {
+      const fromMap = this.videosMap.get(trimmedEventId);
+      if (fromMap) {
+        return fromMap;
+      }
+
+      const activeVideos = nostrClient.getActiveVideos();
+      const fromActive = activeVideos.find((video) => video.id === trimmedEventId);
+      if (fromActive) {
+        this.videosMap.set(fromActive.id, fromActive);
+        return fromActive;
+      }
+
+      const fromAll = nostrClient.allEvents.get(trimmedEventId);
+      if (fromAll) {
+        this.videosMap.set(fromAll.id, fromAll);
+        return fromAll;
+      }
+
+      const fetched = await nostrClient.getEventById(trimmedEventId);
+      if (fetched) {
+        this.videosMap.set(fetched.id, fetched);
+        return fetched;
+      }
+    }
+
+    if (normalizedIndex !== null) {
+      const activeVideos = nostrClient.getActiveVideos();
+      if (normalizedIndex >= 0 && normalizedIndex < activeVideos.length) {
+        const candidate = activeVideos[normalizedIndex];
+        if (candidate) {
+          this.videosMap.set(candidate.id, candidate);
+          return candidate;
+        }
+      }
+    }
+
+    return null;
+  }
+
   /**
    * Handle "Edit Video" from gear menu.
    */
-  async handleEditVideo(index) {
+  async handleEditVideo(target) {
     try {
-      // 1) Fetch the current list of videos (the newest versions)
-      const all = await nostrClient.fetchVideos();
-      const video = all[index];
+      const normalizedTarget = this.normalizeActionTarget(target);
+      const latestVideos = await nostrClient.fetchVideos();
+      const video = await this.resolveVideoActionTarget({
+        ...normalizedTarget,
+        preloadedList: latestVideos,
+      });
 
       // 2) Basic ownership checks
       if (!this.pubkey) {
         this.showError("Please login to edit videos.");
         return;
       }
-      if (!video || video.pubkey !== this.pubkey) {
+      const userPubkey = (this.pubkey || "").toLowerCase();
+      const videoPubkey = (video?.pubkey || "").toLowerCase();
+      if (!video || !videoPubkey || videoPubkey !== userPubkey) {
         this.showError("You do not own this video.");
         return;
       }
 
       // 3) Prompt the user for updated fields
       const newTitle = prompt("New Title? (blank=keep existing)", video.title);
+      if (newTitle === null) {
+        return;
+      }
+
       const newMagnet = prompt(
         "New Magnet? (blank=keep existing)",
         video.magnet
       );
+      if (newMagnet === null) {
+        return;
+      }
+
+      const newUrl = prompt(
+        "New URL? (blank=keep existing)",
+        video.url || ""
+      );
+      if (newUrl === null) {
+        return;
+      }
+
       const newThumb = prompt(
         "New Thumbnail? (blank=keep existing)",
         video.thumbnail
       );
+      if (newThumb === null) {
+        return;
+      }
+
       const newDesc = prompt(
         "New Description? (blank=keep existing)",
         video.description
       );
+      if (newDesc === null) {
+        return;
+      }
       // const wantPrivate = confirm("Make this video private? OK=Yes, Cancel=No");
 
       // 4) Build final updated fields (or fallback to existing)
@@ -1433,6 +3256,7 @@ class bitvidApp {
         !newTitle || !newTitle.trim() ? video.title : newTitle.trim();
       const magnet =
         !newMagnet || !newMagnet.trim() ? video.magnet : newMagnet.trim();
+      const url = !newUrl || !newUrl.trim() ? video.url : newUrl.trim();
       const thumbnail =
         !newThumb || !newThumb.trim() ? video.thumbnail : newThumb.trim();
       const description =
@@ -1444,6 +3268,7 @@ class bitvidApp {
         // isPrivate: wantPrivate,
         title,
         magnet,
+        url,
         thumbnail,
         description,
         mode: isDevMode ? "dev" : "live",
@@ -1475,17 +3300,22 @@ class bitvidApp {
     }
   }
 
-  async handleRevertVideo(index) {
+  async handleRevertVideo(target) {
     try {
-      // 1) Still use fetchVideos to get the video in question
+      const normalizedTarget = this.normalizeActionTarget(target);
       const activeVideos = await nostrClient.fetchVideos();
-      const video = activeVideos[index];
+      const video = await this.resolveVideoActionTarget({
+        ...normalizedTarget,
+        preloadedList: activeVideos,
+      });
 
       if (!this.pubkey) {
         this.showError("Please login to revert.");
         return;
       }
-      if (!video || video.pubkey !== this.pubkey) {
+      const userPubkey = (this.pubkey || "").toLowerCase();
+      const videoPubkey = (video?.pubkey || "").toLowerCase();
+      if (!video || !videoPubkey || videoPubkey !== userPubkey) {
         this.showError("You do not own this video.");
         return;
       }
@@ -1523,16 +3353,22 @@ class bitvidApp {
   /**
    * Handle "Delete Video" from gear menu.
    */
-  async handleFullDeleteVideo(index) {
+  async handleFullDeleteVideo(target) {
     try {
+      const normalizedTarget = this.normalizeActionTarget(target);
       const all = await nostrClient.fetchVideos();
-      const video = all[index];
+      const video = await this.resolveVideoActionTarget({
+        ...normalizedTarget,
+        preloadedList: all,
+      });
 
       if (!this.pubkey) {
         this.showError("Please login to delete videos.");
         return;
       }
-      if (!video || video.pubkey !== this.pubkey) {
+      const userPubkey = (this.pubkey || "").toLowerCase();
+      const videoPubkey = (video?.pubkey || "").toLowerCase();
+      if (!video || !videoPubkey || videoPubkey !== userPubkey) {
         this.showError("You do not own this video.");
         return;
       }
@@ -1598,183 +3434,786 @@ class bitvidApp {
     }
   }
 
+  async probeUrlWithVideoElement(url, timeoutMs = URL_PROBE_TIMEOUT_MS) {
+    const trimmed = typeof url === "string" ? url.trim() : "";
+    if (!trimmed || typeof document === "undefined") {
+      return { outcome: "error" };
+    }
+
+    return new Promise((resolve) => {
+      const video = document.createElement("video");
+      let settled = false;
+      let timeoutId = null;
+
+      const cleanup = () => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+        video.removeEventListener("loadeddata", handleSuccess);
+        video.removeEventListener("canplay", handleSuccess);
+        video.removeEventListener("error", handleError);
+        try {
+          video.pause();
+        } catch (err) {
+          // ignore pause failures (e.g. if never played)
+        }
+        try {
+          video.removeAttribute("src");
+          video.load();
+        } catch (err) {
+          // ignore cleanup failures
+        }
+      };
+
+      const settle = (result) => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        cleanup();
+        resolve(result);
+      };
+
+      const handleSuccess = () => {
+        settle({ outcome: "ok" });
+      };
+
+      const handleError = () => {
+        settle({ outcome: "error" });
+      };
+
+      if (Number.isFinite(timeoutMs) && timeoutMs > 0) {
+        timeoutId = setTimeout(() => {
+          settle({ outcome: "timeout" });
+        }, timeoutMs);
+      }
+
+      try {
+        video.preload = "metadata";
+        video.muted = true;
+        video.playsInline = true;
+        video.addEventListener("loadeddata", handleSuccess, { once: true });
+        video.addEventListener("canplay", handleSuccess, { once: true });
+        video.addEventListener("error", handleError, { once: true });
+        video.src = trimmed;
+        video.load();
+      } catch (err) {
+        settle({ outcome: "error", error: err });
+      }
+    });
+  }
+
+  async probeUrl(url) {
+    const trimmed = typeof url === "string" ? url.trim() : "";
+    if (!trimmed) {
+      return { outcome: "invalid" };
+    }
+
+    const supportsAbort = typeof AbortController !== "undefined";
+    const controller = supportsAbort ? new AbortController() : null;
+    let timeoutId = null;
+
+    const racers = [
+      fetch(trimmed, {
+        method: "HEAD",
+        mode: "no-cors",
+        cache: "no-store",
+        signal: controller ? controller.signal : undefined,
+      }),
+    ];
+
+    if (Number.isFinite(URL_PROBE_TIMEOUT_MS) && URL_PROBE_TIMEOUT_MS > 0) {
+      racers.push(
+        new Promise((resolve) => {
+          timeoutId = setTimeout(() => {
+            if (controller) {
+              try {
+                controller.abort();
+              } catch (err) {
+                // ignore abort errors
+              }
+            }
+            resolve({ outcome: "timeout" });
+          }, URL_PROBE_TIMEOUT_MS);
+        })
+      );
+    }
+
+    let responseOrTimeout;
+    try {
+      responseOrTimeout = await Promise.race(racers);
+    } catch (err) {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      console.warn(`[probeUrl] HEAD request failed for ${trimmed}:`, err);
+      const fallback = await this.probeUrlWithVideoElement(trimmed);
+      if (fallback && fallback.outcome) {
+        return fallback;
+      }
+      return { outcome: "error", error: err };
+    }
+
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    if (responseOrTimeout && responseOrTimeout.outcome === "timeout") {
+      const fallback = await this.probeUrlWithVideoElement(trimmed);
+      if (fallback && fallback.outcome) {
+        return fallback;
+      }
+      return { outcome: "timeout" };
+    }
+
+    const response = responseOrTimeout;
+    if (!response) {
+      return { outcome: "error" };
+    }
+
+    if (response.type === "opaque") {
+      const fallback = await this.probeUrlWithVideoElement(trimmed);
+      if (fallback && fallback.outcome) {
+        return fallback;
+      }
+      return { outcome: "opaque" };
+    }
+
+    return {
+      outcome: response.ok ? "ok" : "bad",
+      status: response.status,
+    };
+  }
+
+  async playHttp(videoEl, url) {
+    const target = videoEl || this.modalVideo;
+    if (!target) {
+      return false;
+    }
+
+    const sanitizedUrl = typeof url === "string" ? url.trim() : "";
+    if (!sanitizedUrl) {
+      return false;
+    }
+
+    target.src = sanitizedUrl;
+
+    try {
+      await target.play();
+      return true;
+    } catch (err) {
+      console.warn("[playHttp] Direct URL playback failed:", err);
+      return false;
+    }
+  }
+
+  async playViaWebTorrent(
+    magnet,
+    { fallbackMagnet = "", urlList = [] } = {}
+  ) {
+    const sanitizedUrlList = Array.isArray(urlList)
+      ? urlList
+          .map((entry) =>
+            typeof entry === "string" ? entry.trim() : ""
+          )
+          .filter((entry) => /^https?:\/\//i.test(entry))
+      : [];
+
+    const attemptStream = async (candidate) => {
+      const trimmedCandidate =
+        typeof candidate === "string" ? candidate.trim() : "";
+      if (!trimmedCandidate) {
+        throw new Error("No magnet URI provided for torrent playback.");
+      }
+      if (!isValidMagnetUri(trimmedCandidate)) {
+        if (this.modalStatus) {
+          this.modalStatus.textContent = UNSUPPORTED_BTITH_MESSAGE;
+        }
+        throw new Error(UNSUPPORTED_BTITH_MESSAGE);
+      }
+      if (!this.modalVideo) {
+        throw new Error(
+          "No modal video element available for torrent playback."
+        );
+      }
+
+      const timestamp = Date.now().toString();
+      const [magnetPrefix, magnetQuery = ""] = trimmedCandidate.split("?", 2);
+      let normalizedMagnet = magnetPrefix;
+      let queryParts = magnetQuery
+        .split("&")
+        .map((part) => part.trim())
+        .filter((part) => part && !/^ts=\d+$/.test(part));
+
+      if (queryParts.length) {
+        normalizedMagnet = `${magnetPrefix}?${queryParts.join("&")}`;
+      }
+
+      const separator = normalizedMagnet.includes("?") ? "&" : "?";
+      const cacheBustedMagnet = `${normalizedMagnet}${separator}ts=${timestamp}`;
+
+      await torrentClient.cleanup();
+      this.resetTorrentStats();
+
+      if (this.modalStatus) {
+        this.modalStatus.textContent = "Streaming via WebTorrent";
+      }
+
+      const torrentInstance = await torrentClient.streamVideo(
+        cacheBustedMagnet,
+        this.modalVideo,
+        { urlList: sanitizedUrlList }
+      );
+      if (torrentInstance && torrentInstance.ready) {
+        // Some browsers delay `playing` events for MediaSource-backed torrents.
+        // Clearing the poster here prevents the historic "GIF stuck over the
+        // video" regression when WebTorrent is already feeding data.
+        this.forceRemoveModalPoster("webtorrent-ready");
+      }
+      this.startTorrentStatusMirrors(torrentInstance);
+      return torrentInstance;
+    };
+
+    const primaryTrimmed =
+      typeof magnet === "string" ? magnet.trim() : "";
+    const fallbackTrimmed =
+      typeof fallbackMagnet === "string" ? fallbackMagnet.trim() : "";
+    const hasFallback =
+      !!fallbackTrimmed && fallbackTrimmed !== primaryTrimmed;
+
+    try {
+      return await attemptStream(primaryTrimmed);
+    } catch (primaryError) {
+      if (!hasFallback) {
+        throw primaryError;
+      }
+      this.log(
+        `[playViaWebTorrent] Normalized magnet failed: ${primaryError.message}`
+      );
+      this.log(
+        "[playViaWebTorrent] Primary magnet failed, retrying original string."
+      );
+      try {
+        return await attemptStream(fallbackTrimmed);
+      } catch (fallbackError) {
+        throw fallbackError;
+      }
+    }
+  }
+
   /**
-   * Helper to open a video by event ID (like ?v=...).
+   * Unified playback helper that prefers HTTP URL sources
+   * and falls back to WebTorrent when needed.
    */
+  async playVideoWithFallback({ url = "", magnet = "" } = {}) {
+    // When the modal closes we run an asynchronous cleanup that tears down the
+    // previous MediaSource attachment. If the user immediately selects another
+    // video we must wait for that teardown to finish or the stale cleanup will
+    // wipe the freshly attached `src`/`srcObject`, leaving playback stuck on a
+    // blank frame. Guard every playback entry point with waitForCleanup() so the
+    // race never reappears.
+    await this.waitForCleanup();
+
+    const sanitizedUrl = typeof url === "string" ? url.trim() : "";
+    const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+
+    const playbackConfig = deriveTorrentPlaybackConfig({
+      magnet: trimmedMagnet,
+      url: sanitizedUrl,
+      logger: (message) => this.log(message),
+    });
+
+    const magnetIsUsable = isValidMagnetUri(playbackConfig.magnet);
+    const magnetForPlayback = magnetIsUsable ? playbackConfig.magnet : "";
+    const fallbackMagnet = magnetIsUsable
+      ? playbackConfig.fallbackMagnet
+      : "";
+    const magnetProvided = playbackConfig.provided;
+
+    if (this.currentVideo) {
+      this.currentVideo.magnet = magnetForPlayback;
+      this.currentVideo.normalizedMagnet = magnetForPlayback;
+      this.currentVideo.normalizedMagnetFallback = fallbackMagnet;
+      if (playbackConfig.infoHash && !this.currentVideo.legacyInfoHash) {
+        this.currentVideo.legacyInfoHash = playbackConfig.infoHash;
+      }
+      this.currentVideo.torrentSupported = !!magnetForPlayback;
+    }
+    this.currentMagnetUri = magnetForPlayback || null;
+    this.setCopyMagnetState(!!magnetForPlayback);
+
+    try {
+      if (!this.modalVideo) {
+        throw new Error("Video element is not ready for playback.");
+      }
+
+      this.showModalWithPoster();
+      const videoEl = this.modalVideo;
+      const HOSTED_URL_SUCCESS_MESSAGE = "✅ Streaming from hosted URL";
+
+      if (this.modalStatus) {
+        this.modalStatus.textContent = "Preparing video...";
+      }
+
+      this.clearActiveIntervals();
+      this.prepareModalVideoForPlayback();
+
+      await torrentClient.cleanup();
+
+      videoEl.pause();
+      // Clearing the WebTorrent attachment requires wiping both `src` and
+      // `srcObject`. Multiple regressions have shipped where we only blanked
+      // `src`, leaving the old MediaSource wired up and the next magnet would
+      // stall on a grey frame. Always clear both before calling `load()`.
+      videoEl.src = "";
+      videoEl.removeAttribute("src");
+      videoEl.srcObject = null;
+      videoEl.load();
+
+      this.resetTorrentStats();
+      this.playSource = null;
+      this.cleanupUrlPlaybackWatchdog();
+
+      if (magnetForPlayback) {
+        const label = playbackConfig.didMutate
+          ? "[playVideoWithFallback] Using normalized magnet URI:"
+          : "[playVideoWithFallback] Using magnet URI:";
+        this.log(`${label} ${magnetForPlayback}`);
+      }
+
+      const httpsUrl =
+        sanitizedUrl && /^https:\/\//i.test(sanitizedUrl) ? sanitizedUrl : "";
+      const webSeedCandidates = httpsUrl ? [httpsUrl] : [];
+      let cleanupHostedUrlStatusListeners = () => {};
+
+      let fallbackStarted = false;
+      const startTorrentFallback = async (reason) => {
+        if (fallbackStarted) {
+          this.log(
+            `[playVideoWithFallback] Duplicate fallback request ignored (${reason}).`
+          );
+          return null;
+        }
+        fallbackStarted = true;
+        this.cleanupUrlPlaybackWatchdog();
+        cleanupHostedUrlStatusListeners();
+        if (!magnetForPlayback) {
+          const message =
+            "Hosted playback failed and no magnet fallback is available.";
+          if (this.modalStatus) {
+            this.modalStatus.textContent = message;
+          }
+          this.playSource = null;
+          throw new Error(message);
+        }
+
+        if (this.modalStatus) {
+          this.modalStatus.textContent = "Switching to WebTorrent...";
+        }
+        this.log(
+          `[playVideoWithFallback] Falling back to WebTorrent (${reason}).`
+        );
+        console.debug("[WT] add magnet =", magnetForPlayback);
+        const torrentInstance = await this.playViaWebTorrent(
+          magnetForPlayback,
+          {
+            fallbackMagnet,
+            urlList: webSeedCandidates,
+          }
+        );
+        this.playSource = "torrent";
+        this.autoplayModalVideo();
+        return torrentInstance;
+      };
+
+      if (URL_FIRST_ENABLED && httpsUrl) {
+        if (this.modalStatus) {
+          this.modalStatus.textContent = "Checking hosted URL...";
+        }
+        let hostedStatusResolved = false;
+        const hostedStatusHandlers = [];
+        const addHostedStatusListener = (eventName, handler, options) => {
+          if (!videoEl) {
+            return;
+          }
+          videoEl.addEventListener(eventName, handler, options);
+          hostedStatusHandlers.push([eventName, handler, options]);
+        };
+        const markHostedUrlAsLive = () => {
+          if (hostedStatusResolved) {
+            return;
+          }
+          hostedStatusResolved = true;
+          if (this.modalStatus) {
+            this.modalStatus.textContent = HOSTED_URL_SUCCESS_MESSAGE;
+          }
+          cleanupHostedUrlStatusListeners();
+        };
+        const maybeMarkHostedUrl = () => {
+          if (
+            hostedStatusResolved ||
+            !videoEl ||
+            videoEl.readyState < HTMLMediaElement.HAVE_CURRENT_DATA
+          ) {
+            return;
+          }
+          if (videoEl.currentTime > 0 || !videoEl.paused) {
+            markHostedUrlAsLive();
+          }
+        };
+        cleanupHostedUrlStatusListeners = () => {
+          if (!hostedStatusHandlers.length || !videoEl) {
+            hostedStatusHandlers.length = 0;
+            cleanupHostedUrlStatusListeners = () => {};
+            return;
+          }
+          for (const [eventName, handler, options] of hostedStatusHandlers) {
+            videoEl.removeEventListener(eventName, handler, options);
+          }
+          hostedStatusHandlers.length = 0;
+          cleanupHostedUrlStatusListeners = () => {};
+        };
+        addHostedStatusListener("playing", markHostedUrlAsLive, { once: true });
+        addHostedStatusListener("loadeddata", maybeMarkHostedUrl);
+        addHostedStatusListener("canplay", maybeMarkHostedUrl);
+        addHostedStatusListener("error", () => {
+          cleanupHostedUrlStatusListeners();
+        }, { once: true });
+        const probeResult = await this.probeUrl(httpsUrl);
+        const probeOutcome = probeResult?.outcome || "error";
+        const shouldAttemptHosted =
+          probeOutcome !== "bad" && probeOutcome !== "error";
+
+        if (shouldAttemptHosted) {
+          let outcomeResolved = false;
+          let outcomeResolver = () => {};
+          let autoplayBlocked = false;
+
+          const playbackOutcomePromise = new Promise((resolve) => {
+            outcomeResolver = (value) => {
+              if (outcomeResolved) {
+                return;
+              }
+              outcomeResolved = true;
+              resolve(value);
+            };
+          });
+
+          const attachWatchdogs = ({ stallMs = 8000 } = {}) => {
+            this.registerUrlPlaybackWatchdogs(videoEl, {
+              stallMs,
+              onSuccess: () => outcomeResolver({ status: "success" }),
+              onFallback: (reason) => {
+                if (autoplayBlocked && reason === "stall") {
+                  this.log(
+                    "[playVideoWithFallback] Autoplay blocked; waiting for user gesture before falling back."
+                  );
+                  if (this.modalStatus) {
+                    this.modalStatus.textContent =
+                      "Press play to start the hosted video.";
+                  }
+                  attachWatchdogs({ stallMs: 0 });
+                  return;
+                }
+
+                outcomeResolver({ status: "fallback", reason });
+              },
+            });
+          };
+
+          attachWatchdogs({ stallMs: 8000 });
+
+          const handleFatalPlaybackError = (err) => {
+            this.log(
+              "[playVideoWithFallback] Direct URL playback threw:",
+              err
+            );
+            outcomeResolver({ status: "fallback", reason: "play-error" });
+          };
+
+          try {
+            videoEl.src = httpsUrl;
+            const playPromise = videoEl.play();
+            if (playPromise && typeof playPromise.catch === "function") {
+              playPromise.catch((err) => {
+                if (err?.name === "NotAllowedError") {
+                  autoplayBlocked = true;
+                  this.log(
+                    "[playVideoWithFallback] Autoplay blocked by browser; awaiting user interaction.",
+                    err
+                  );
+                  if (this.modalStatus) {
+                    this.modalStatus.textContent =
+                      "Press play to start the hosted video.";
+                  }
+                  this.cleanupUrlPlaybackWatchdog();
+                  attachWatchdogs({ stallMs: 0 });
+                  const restoreOnPlay = () => {
+                    videoEl.removeEventListener("play", restoreOnPlay);
+                    this.cleanupUrlPlaybackWatchdog();
+                    autoplayBlocked = false;
+                    attachWatchdogs({ stallMs: 8000 });
+                  };
+                  videoEl.addEventListener("play", restoreOnPlay, {
+                    once: true,
+                  });
+                  return;
+                }
+                handleFatalPlaybackError(err);
+              });
+            }
+          } catch (err) {
+            handleFatalPlaybackError(err);
+          }
+
+          const playbackOutcome = await playbackOutcomePromise;
+          if (playbackOutcome?.status === "success") {
+            this.forceRemoveModalPoster("http-success");
+            this.playSource = "url";
+            if (this.modalStatus) {
+              this.modalStatus.textContent = HOSTED_URL_SUCCESS_MESSAGE;
+            }
+            cleanupHostedUrlStatusListeners();
+            return;
+          }
+
+          const fallbackReason = playbackOutcome?.reason || "watchdog-triggered";
+          await startTorrentFallback(fallbackReason);
+          return;
+        }
+
+        this.log(
+          `[playVideoWithFallback] Hosted URL probe reported "${probeOutcome}"; deferring to WebTorrent.`
+        );
+        cleanupHostedUrlStatusListeners();
+      }
+
+      if (magnetForPlayback) {
+        await startTorrentFallback("magnet-primary");
+        return;
+      }
+
+      const message = magnetProvided && !magnetForPlayback
+        ? UNSUPPORTED_BTITH_MESSAGE
+        : "No playable source found.";
+      if (this.modalStatus) {
+        this.modalStatus.textContent = message;
+      }
+      this.playSource = null;
+      this.showError(message);
+    } catch (error) {
+      this.log("Error in playVideoWithFallback:", error);
+      this.showError(`Playback error: ${error.message}`);
+    }
+  }
+
   async playVideoByEventId(eventId) {
-    // 1) Event-level blacklist check
+    if (!eventId) {
+      this.showError("No video identifier provided.");
+      return;
+    }
+
     if (this.blacklistedEventIds.has(eventId)) {
       this.showError("This content has been removed or is not allowed.");
       return;
     }
 
-    try {
-      // Attempt to get the video from local cache or fetch
-      let video = this.videosMap.get(eventId);
-      if (!video) {
-        video = await this.getOldEventById(eventId);
-      }
-      if (!video) {
-        this.showError("Video not found.");
-        return;
-      }
+    let video = this.videosMap.get(eventId);
+    if (!video) {
+      video = await this.getOldEventById(eventId);
+    }
+    if (!video) {
+      this.showError("Video not found or has been removed.");
+      return;
+    }
 
-      // 2) Author-level blacklist check
-      const authorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
-      if (initialBlacklist.includes(authorNpub)) {
-        this.showError("This content has been removed or is not allowed.");
-        return;
-      }
+    const authorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
+    if (initialBlacklist.includes(authorNpub)) {
+      this.showError("This content has been removed or is not allowed.");
+      return;
+    }
 
-      // 3) Whitelist check if enabled
-      if (isWhitelistEnabled && !initialWhitelist.includes(authorNpub)) {
-        this.showError("This content is not from a whitelisted author.");
-        return;
-      }
+    if (isWhitelistEnabled && !initialWhitelist.includes(authorNpub)) {
+      this.showError("This content is not from a whitelisted author.");
+      return;
+    }
 
-      // Handle private videos (decrypt if owner is the current user)
-      if (
-        video.isPrivate &&
-        video.pubkey === this.pubkey &&
-        !video.alreadyDecrypted
-      ) {
-        video.magnet = fakeDecrypt(video.magnet);
-        video.alreadyDecrypted = true;
-      }
+    if (
+      video.isPrivate &&
+      video.pubkey === this.pubkey &&
+      !video.alreadyDecrypted
+    ) {
+      video.magnet = fakeDecrypt(video.magnet);
+      video.alreadyDecrypted = true;
+    }
 
-      this.currentVideo = video;
-      this.currentMagnetUri = video.magnet;
-      this.showModalWithPoster();
+    const trimmedUrl = typeof video.url === "string" ? video.url.trim() : "";
+    const rawMagnet =
+      typeof video.magnet === "string" ? video.magnet.trim() : "";
+    const legacyInfoHash =
+      typeof video.infoHash === "string" ? video.infoHash.trim().toLowerCase() : "";
+    const magnetCandidate = rawMagnet || legacyInfoHash;
+    const decodedMagnetCandidate = safeDecodeMagnet(magnetCandidate);
+    const usableMagnetCandidate = decodedMagnetCandidate || magnetCandidate;
+    const magnetSupported = isValidMagnetUri(usableMagnetCandidate);
+    const sanitizedMagnet = magnetSupported ? usableMagnetCandidate : "";
 
-      // Update ?v= param in the URL
-      const nevent = window.NostrTools.nip19.neventEncode({ id: eventId });
-      const newUrl = `${window.location.pathname}?v=${encodeURIComponent(
+    trackVideoView({
+      videoId: video.id || eventId,
+      title: video.title || "Untitled",
+      source: "event",
+      hasMagnet: !!sanitizedMagnet,
+      hasUrl: !!trimmedUrl,
+    });
+
+    this.currentVideo = {
+      ...video,
+      url: trimmedUrl,
+      magnet: sanitizedMagnet,
+      originalMagnet: magnetCandidate,
+      torrentSupported: magnetSupported,
+      legacyInfoHash: video.legacyInfoHash || legacyInfoHash,
+    };
+
+    this.currentMagnetUri = sanitizedMagnet || null;
+
+    this.setCopyMagnetState(!!sanitizedMagnet);
+    this.setShareButtonState(true);
+
+    const nevent = window.NostrTools.nip19.neventEncode({ id: eventId });
+    const pushUrl =
+      this.buildShareUrlFromNevent(nevent) ||
+      `${this.getShareUrlBase() || window.location.pathname}?v=${encodeURIComponent(
         nevent
       )}`;
-      window.history.pushState({}, "", newUrl);
+    window.history.pushState({}, "", pushUrl);
 
-      // Fetch author profile
-      let creatorProfile = {
-        name: "Unknown",
-        picture: `https://robohash.org/${video.pubkey}`,
-      };
-      try {
-        const userEvents = await nostrClient.pool.list(nostrClient.relays, [
-          { kinds: [0], authors: [video.pubkey], limit: 1 },
-        ]);
-        if (userEvents.length > 0 && userEvents[0]?.content) {
-          const data = JSON.parse(userEvents[0].content);
-          creatorProfile = {
-            name: data.name || data.display_name || "Unknown",
-            picture: data.picture || `https://robohash.org/${video.pubkey}`,
-          };
-        }
-      } catch (error) {
-        this.log("Error fetching creator profile:", error);
+    let creatorProfile = {
+      name: "Unknown",
+      picture: `https://robohash.org/${video.pubkey}`,
+    };
+    try {
+      const userEvents = await nostrClient.pool.list(nostrClient.relays, [
+        { kinds: [0], authors: [video.pubkey], limit: 1 },
+      ]);
+      if (userEvents.length > 0 && userEvents[0]?.content) {
+        const data = JSON.parse(userEvents[0].content);
+        creatorProfile = {
+          name: data.name || data.display_name || "Unknown",
+          picture: data.picture || `https://robohash.org/${video.pubkey}`,
+        };
       }
-
-      // Update UI fields
-      const creatorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
-      if (this.videoTitle) {
-        this.videoTitle.textContent = video.title || "Untitled";
-      }
-      if (this.videoDescription) {
-        this.videoDescription.textContent =
-          video.description || "No description available.";
-      }
-      if (this.videoTimestamp) {
-        this.videoTimestamp.textContent = this.formatTimeAgo(video.created_at);
-      }
-      if (this.creatorName) {
-        this.creatorName.textContent = creatorProfile.name;
-      }
-      if (this.creatorNpub) {
-        this.creatorNpub.textContent = `${creatorNpub.slice(
-          0,
-          8
-        )}...${creatorNpub.slice(-4)}`;
-      }
-      if (this.creatorAvatar) {
-        this.creatorAvatar.src = creatorProfile.picture;
-        this.creatorAvatar.alt = creatorProfile.name;
-      }
-
-      // Cleanup any previous WebTorrent streams, then start a fresh one
-      await torrentClient.cleanup();
-      const cacheBustedMagnet = video.magnet + "&ts=" + Date.now();
-      this.log("Starting video stream with:", cacheBustedMagnet);
-
-      // Autoplay preferences
-      const storedUnmuted = localStorage.getItem("unmutedAutoplay");
-      const userWantsUnmuted = storedUnmuted === "true";
-      this.modalVideo.muted = !userWantsUnmuted;
-
-      this.modalVideo.addEventListener("volumechange", () => {
-        localStorage.setItem(
-          "unmutedAutoplay",
-          (!this.modalVideo.muted).toString()
-        );
-      });
-
-      const realTorrent = await torrentClient.streamVideo(
-        cacheBustedMagnet,
-        this.modalVideo
-      );
-
-      // Try playing; if autoplay fails, fallback to muted
-      this.modalVideo.play().catch((err) => {
-        this.log("Autoplay failed:", err);
-        if (!this.modalVideo.muted) {
-          this.log("Falling back to muted autoplay.");
-          this.modalVideo.muted = true;
-          this.modalVideo.play().catch((err2) => {
-            this.log("Muted autoplay also failed:", err2);
-          });
-        }
-      });
-
-      // Update torrent stats every 3s
-      const updateInterval = setInterval(() => {
-        if (!document.body.contains(this.modalVideo)) {
-          clearInterval(updateInterval);
-          return;
-        }
-        this.updateTorrentStatus(realTorrent);
-      }, 3000);
-      this.activeIntervals.push(updateInterval);
-
-      // Mirror stats into the modal if needed
-      const mirrorInterval = setInterval(() => {
-        if (!document.body.contains(this.modalVideo)) {
-          clearInterval(mirrorInterval);
-          return;
-        }
-        const status = document.getElementById("status");
-        const progress = document.getElementById("progress");
-        const peers = document.getElementById("peers");
-        const speed = document.getElementById("speed");
-        const downloaded = document.getElementById("downloaded");
-        if (status && this.modalStatus) {
-          this.modalStatus.textContent = status.textContent;
-        }
-        if (progress && this.modalProgress) {
-          this.modalProgress.style.width = progress.style.width;
-        }
-        if (peers && this.modalPeers) {
-          this.modalPeers.textContent = peers.textContent;
-        }
-        if (speed && this.modalSpeed) {
-          this.modalSpeed.textContent = speed.textContent;
-        }
-        if (downloaded && this.modalDownloaded) {
-          this.modalDownloaded.textContent = downloaded.textContent;
-        }
-      }, 3000);
-      this.activeIntervals.push(mirrorInterval);
     } catch (error) {
-      this.log("Error in playVideoByEventId:", error);
-      this.showError(`Playback error: ${error.message}`);
+      this.log("Error fetching creator profile:", error);
     }
+
+    const creatorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
+    if (this.videoTitle) {
+      this.videoTitle.textContent = video.title || "Untitled";
+    }
+    if (this.videoDescription) {
+      this.videoDescription.textContent =
+        video.description || "No description available.";
+    }
+    if (this.videoTimestamp) {
+      this.videoTimestamp.textContent = this.formatTimeAgo(video.created_at);
+    }
+    if (this.creatorName) {
+      this.creatorName.textContent = creatorProfile.name;
+    }
+    if (this.creatorNpub) {
+      this.creatorNpub.textContent = `${creatorNpub.slice(0, 8)}...${creatorNpub.slice(
+        -4
+      )}`;
+    }
+    if (this.creatorAvatar) {
+      this.creatorAvatar.src = creatorProfile.picture;
+      this.creatorAvatar.alt = creatorProfile.name;
+    }
+
+    await this.playVideoWithFallback({
+      url: trimmedUrl,
+      magnet: usableMagnetCandidate,
+    });
+  }
+
+  async playVideoWithoutEvent({
+    url = "",
+    magnet = "",
+    title = "Untitled",
+    description = "",
+  } = {}) {
+    const sanitizedUrl = typeof url === "string" ? url.trim() : "";
+    const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+    const decodedMagnet = safeDecodeMagnet(trimmedMagnet);
+    const usableMagnet = decodedMagnet || trimmedMagnet;
+    const magnetSupported = isValidMagnetUri(usableMagnet);
+    const sanitizedMagnet = magnetSupported ? usableMagnet : "";
+
+    trackVideoView({
+      videoId:
+        typeof title === "string" && title.trim().length > 0
+          ? `direct:${title.trim()}`
+          : "direct-playback",
+      title,
+      source: "direct",
+      hasMagnet: !!sanitizedMagnet,
+      hasUrl: !!sanitizedUrl,
+    });
+
+    if (!sanitizedUrl && !sanitizedMagnet) {
+      const message = trimmedMagnet && !magnetSupported
+        ? UNSUPPORTED_BTITH_MESSAGE
+        : "This video has no playable source.";
+      this.showError(message);
+      return;
+    }
+
+    this.currentVideo = {
+      id: null,
+      title,
+      description,
+      url: sanitizedUrl,
+      magnet: sanitizedMagnet,
+      originalMagnet: trimmedMagnet,
+      torrentSupported: magnetSupported,
+    };
+
+    this.currentMagnetUri = sanitizedMagnet || null;
+
+    this.setCopyMagnetState(!!sanitizedMagnet);
+    this.setShareButtonState(false);
+
+    if (this.videoTitle) {
+      this.videoTitle.textContent = title || "Untitled";
+    }
+    if (this.videoDescription) {
+      this.videoDescription.textContent =
+        description || "No description available.";
+    }
+    if (this.videoTimestamp) {
+      this.videoTimestamp.textContent = "";
+    }
+    if (this.creatorName) {
+      this.creatorName.textContent = "Unknown";
+    }
+    if (this.creatorNpub) {
+      this.creatorNpub.textContent = "";
+    }
+    if (this.creatorAvatar) {
+      this.creatorAvatar.src = "assets/svg/default-profile.svg";
+      this.creatorAvatar.alt = "Unknown";
+    }
+
+    const urlObj = new URL(window.location.href);
+    urlObj.searchParams.delete("v");
+    const cleaned = `${urlObj.pathname}${urlObj.search}${urlObj.hash}`;
+    window.history.replaceState({}, "", cleaned);
+
+    await this.playVideoWithFallback({
+      url: sanitizedUrl,
+      magnet: usableMagnet,
+    });
   }
 
   /**
@@ -1851,7 +4290,11 @@ class bitvidApp {
   }
 
   escapeHTML(unsafe) {
-    return unsafe
+    if (unsafe === null || typeof unsafe === "undefined") {
+      return "";
+    }
+
+    return String(unsafe)
       .replace(/&/g, "&amp;")
       .replace(/</g, "&lt;")
       .replace(/>/g, "&gt;")
@@ -1903,6 +4346,15 @@ class bitvidApp {
    */
   handleCopyMagnet() {
     if (!this.currentVideo || !this.currentVideo.magnet) {
+      if (
+        this.currentVideo &&
+        this.currentVideo.originalMagnet &&
+        !this.currentVideo.torrentSupported
+      ) {
+        this.showError(UNSUPPORTED_BTITH_MESSAGE);
+        return;
+      }
+
       this.showError("No magnet link to copy.");
       return;
     }
diff --git a/js/bufferPolyfill.js b/js/bufferPolyfill.js
new file mode 100644
index 00000000..eb201cff
--- /dev/null
+++ b/js/bufferPolyfill.js
@@ -0,0 +1,17 @@
+import { Buffer } from "https://esm.sh/buffer@6.0.3?bundle";
+
+const globalScope = typeof globalThis !== "undefined" ? globalThis : window;
+
+if (globalScope && !globalScope.Buffer) {
+  globalScope.Buffer = Buffer;
+}
+
+if (globalScope && !globalScope.global) {
+  globalScope.global = globalScope;
+}
+
+if (globalScope && !globalScope.process) {
+  globalScope.process = { env: {} };
+}
+
+export { Buffer };
diff --git a/js/channelProfile.js b/js/channelProfile.js
index 968b7dd3..1a5037cb 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -1,8 +1,12 @@
 // js/channelProfile.js
 
-import { nostrClient } from "./nostr.js";
+import {
+  nostrClient,
+  convertEventToVideo as sharedConvertEventToVideo,
+} from "./nostr.js";
 import { app } from "./app.js";
 import { subscriptions } from "./subscriptions.js"; // <-- NEW import
+import { attachHealthBadges } from "./gridHealth.js";
 import { initialBlacklist, initialWhitelist } from "./lists.js";
 import { isWhitelistEnabled } from "./config.js";
 
@@ -44,6 +48,8 @@ export async function initChannelProfileView() {
     if (btn) btn.classList.add("hidden");
   }
 
+  setupZapButton();
+
   // 4) Load user’s profile (banner, avatar, etc.)
   await loadUserProfile(hexPub);
 
@@ -51,6 +57,22 @@ export async function initChannelProfileView() {
   await loadUserVideos(hexPub);
 }
 
+function setupZapButton() {
+  const zapButton = document.getElementById("zapButton");
+  if (!zapButton) {
+    return;
+  }
+
+  if (zapButton.dataset.initialized === "true") {
+    return;
+  }
+
+  zapButton.addEventListener("click", () => {
+    window.alert("Zaps coming soon.");
+  });
+  zapButton.dataset.initialized = "true";
+}
+
 /**
  * Renders a Subscribe / Unsubscribe button with an icon,
  * using color #fe0032 and the subscribe-button-icon.svg on the left.
@@ -199,14 +221,14 @@ async function loadUserVideos(pubkey) {
     // 3) Convert to "video" objects
     let videos = [];
     for (const evt of events) {
-      const vid = localConvertEventToVideo(evt);
+      const vid = sharedConvertEventToVideo(evt);
       if (!vid.invalid && !vid.deleted) {
         videos.push(vid);
       }
     }
 
     // 4) Deduplicate older overshadowed versions => newest only
-    videos = dedupeToNewestByRoot(videos);
+    videos = app?.dedupeVideosByRoot?.(videos) ?? dedupeToNewestByRoot(videos);
 
     // 5) Filter out blacklisted IDs / authors
     videos = videos.filter((video) => {
@@ -251,6 +273,10 @@ async function loadUserVideos(pubkey) {
         video.alreadyDecrypted = true;
       }
 
+      // Ensure the global videos map is kept up to date so delegated handlers
+      // have the freshest metadata for this event.
+      window.app?.videosMap?.set(video.id, video);
+
       // Check if user can edit
       const canEdit = video.pubkey === app.pubkey;
       let hasOlder = false;
@@ -264,6 +290,7 @@ async function loadUserVideos(pubkey) {
             class="block w-full text-left px-4 py-2 text-sm text-red-400
             hover:bg-red-700 hover:text-white"
             data-revert-index="${index}"
+            data-revert-event-id="${video.id}"
           >
             Revert
           </button>
@@ -298,6 +325,7 @@ async function loadUserVideos(pubkey) {
                   class="block w-full text-left px-4 py-2 text-sm text-gray-100
                   hover:bg-gray-700"
                   data-edit-index="${index}"
+                  data-edit-event-id="${video.id}"
                 >
                   Edit
                 </button>
@@ -306,6 +334,7 @@ async function loadUserVideos(pubkey) {
                   class="block w-full text-left px-4 py-2 text-sm text-red-400
                   hover:bg-red-700 hover:text-white"
                   data-delete-all-index="${index}"
+                  data-delete-all-event-id="${video.id}"
                 >
                   Delete All
                 </button>
@@ -322,6 +351,7 @@ async function loadUserVideos(pubkey) {
 
       const cardEl = document.createElement("div");
       cardEl.classList.add(
+        "video-card",
         "bg-gray-900",
         "rounded-lg",
         "overflow-hidden",
@@ -331,8 +361,42 @@ async function loadUserVideos(pubkey) {
         "duration-300"
       );
 
+      const rawMagnet =
+        typeof video.magnet === "string" ? video.magnet : "";
+      const trimmedMagnet = rawMagnet ? rawMagnet.trim() : "";
+      const legacyInfoHash =
+        typeof video.infoHash === "string" ? video.infoHash.trim() : "";
+      const playbackUrl =
+        typeof video.url === "string" ? video.url : "";
+      const trimmedUrl = playbackUrl ? playbackUrl.trim() : "";
+      const playbackMagnet = trimmedMagnet || legacyInfoHash || "";
+      const magnetProvided = playbackMagnet.length > 0;
+      const magnetSupported = app.isMagnetUriSupported(playbackMagnet);
+      const showUnsupportedTorrentBadge =
+        !trimmedUrl && magnetProvided && !magnetSupported;
+      const urlBadgeHtml = trimmedUrl
+        ? app.getUrlHealthPlaceholderMarkup({ includeMargin: false })
+        : "";
+      const torrentHealthBadgeHtml =
+        magnetSupported && magnetProvided
+          ? app.getTorrentHealthBadgeMarkup({ includeMargin: false })
+          : "";
+      const connectionBadgesHtml =
+        urlBadgeHtml || torrentHealthBadgeHtml
+          ? `
+            <div class="mt-3 flex flex-wrap items-center gap-2">
+              ${urlBadgeHtml}${torrentHealthBadgeHtml}
+            </div>
+          `
+          : "";
+
       cardEl.innerHTML = `
-        <div class="cursor-pointer relative group">
+        <div
+          class="cursor-pointer relative group"
+          data-video-id="${video.id}"
+          data-play-url=""
+          data-play-magnet=""
+        >
           <div class="ratio-16-9">
             <img
               src="${fallbackThumb}"
@@ -341,32 +405,86 @@ async function loadUserVideos(pubkey) {
             />
           </div>
         </div>
-        <div class="p-4 flex items-center justify-between">
-          <div>
-            <h3
-              class="text-lg font-bold text-white mb-2 line-clamp-2"
-              data-play-magnet="${encodeURIComponent(video.magnet)}"
-            >
-              ${safeTitle}
-            </h3>
-            <p class="text-sm text-gray-500">
-              ${new Date(video.created_at * 1000).toLocaleString()}
-            </p>
+        <div class="p-4">
+          <div class="flex items-center justify-between">
+            <div>
+              <h3
+                class="text-lg font-bold text-white mb-2 line-clamp-2"
+                data-video-id="${video.id}"
+                data-play-url=""
+                data-play-magnet=""
+              >
+                ${safeTitle}
+              </h3>
+              <p class="text-sm text-gray-500">
+                ${new Date(video.created_at * 1000).toLocaleString()}
+              </p>
+            </div>
+            ${gearMenu}
           </div>
-          ${gearMenu}
+          ${connectionBadgesHtml}
         </div>
       `;
 
-      // Clicking the card => open the video modal
-      cardEl.addEventListener("click", () => {
-        app.playVideoByEventId(video.id);
+      if (showUnsupportedTorrentBadge) {
+        cardEl.dataset.torrentSupported = "false";
+      } else if (magnetProvided && magnetSupported) {
+        cardEl.dataset.torrentSupported = "true";
+      } else if (cardEl.dataset.torrentSupported) {
+        delete cardEl.dataset.torrentSupported;
+      }
+
+      if (magnetProvided) {
+        cardEl.dataset.magnet = playbackMagnet;
+      } else if (cardEl.dataset.magnet) {
+        delete cardEl.dataset.magnet;
+      }
+
+      // Leave the data-play-* attributes empty in the template markup so the raw
+      // URL/magnet strings can be assigned after parsing without HTML entity
+      // escaping, keeping this renderer consistent with app.js. The stored URL is
+      // encoded so it stays intact within data-* attributes, and the click
+      // handler decodes it while leaving magnets untouched until
+      // safeDecodeMagnet() runs.
+      const interactiveEls = cardEl.querySelectorAll("[data-video-id]");
+      interactiveEls.forEach((el) => {
+        if (!el.dataset) return;
+
+        if (trimmedUrl) {
+          el.dataset.playUrl = encodeURIComponent(trimmedUrl);
+        } else {
+          delete el.dataset.playUrl;
+        }
+
+        el.dataset.playMagnet = playbackMagnet || "";
+        if (magnetProvided) {
+          el.dataset.torrentSupported = magnetSupported ? "true" : "false";
+        } else if (el.dataset.torrentSupported) {
+          delete el.dataset.torrentSupported;
+        }
       });
 
+      if (trimmedUrl) {
+        const badgeEl = cardEl.querySelector("[data-url-health-state]");
+        if (badgeEl) {
+          app.handleUrlHealthBadge({
+            video,
+            url: trimmedUrl,
+            badgeEl,
+          });
+        }
+      }
+
       fragment.appendChild(cardEl);
     });
 
     container.appendChild(fragment);
 
+    attachHealthBadges(container);
+
+    window.app.videoList = container;
+    window.app.attachVideoListHandler();
+
     // Lazy-load images
     const lazyEls = container.querySelectorAll("[data-lazy]");
     lazyEls.forEach((el) => app.mediaLoader.observe(el));
@@ -389,10 +507,15 @@ async function loadUserVideos(pubkey) {
     editBtns.forEach((btn) => {
       btn.addEventListener("click", (ev) => {
         ev.stopPropagation();
-        const idx = parseInt(btn.getAttribute("data-edit-index"), 10);
-        const dropdown = document.getElementById(`settingsDropdown-${idx}`);
+        const idxAttr = btn.getAttribute("data-edit-index");
+        const idx = Number.parseInt(idxAttr, 10);
+        const dropdown = document.getElementById(`settingsDropdown-${idxAttr}`);
         if (dropdown) dropdown.classList.add("hidden");
-        app.handleEditVideo(idx);
+        const eventId = btn.getAttribute("data-edit-event-id") || "";
+        app.handleEditVideo({
+          eventId,
+          index: Number.isNaN(idx) ? null : idx,
+        });
       });
     });
 
@@ -401,10 +524,15 @@ async function loadUserVideos(pubkey) {
     revertBtns.forEach((btn) => {
       btn.addEventListener("click", (ev) => {
         ev.stopPropagation();
-        const idx = parseInt(btn.getAttribute("data-revert-index"), 10);
-        const dropdown = document.getElementById(`settingsDropdown-${idx}`);
+        const idxAttr = btn.getAttribute("data-revert-index");
+        const idx = Number.parseInt(idxAttr, 10);
+        const dropdown = document.getElementById(`settingsDropdown-${idxAttr}`);
         if (dropdown) dropdown.classList.add("hidden");
-        app.handleRevertVideo(idx);
+        const eventId = btn.getAttribute("data-revert-event-id") || "";
+        app.handleRevertVideo({
+          eventId,
+          index: Number.isNaN(idx) ? null : idx,
+        });
       });
     });
 
@@ -413,10 +541,15 @@ async function loadUserVideos(pubkey) {
     deleteAllBtns.forEach((btn) => {
       btn.addEventListener("click", (ev) => {
         ev.stopPropagation();
-        const idx = parseInt(btn.getAttribute("data-delete-all-index"), 10);
-        const dropdown = document.getElementById(`settingsDropdown-${idx}`);
+        const idxAttr = btn.getAttribute("data-delete-all-index");
+        const idx = Number.parseInt(idxAttr, 10);
+        const dropdown = document.getElementById(`settingsDropdown-${idxAttr}`);
         if (dropdown) dropdown.classList.add("hidden");
-        app.handleFullDeleteVideo(idx);
+        const eventId = btn.getAttribute("data-delete-all-event-id") || "";
+        app.handleFullDeleteVideo({
+          eventId,
+          index: Number.isNaN(idx) ? null : idx,
+        });
       });
     });
   } catch (err) {
@@ -446,43 +579,6 @@ function dedupeToNewestByRoot(videos) {
   return Array.from(map.values());
 }
 
-/**
- * Convert raw event => "video" object.
- */
-function localConvertEventToVideo(event) {
-  try {
-    const content = JSON.parse(event.content || "{}");
-    const isSupportedVersion = content.version >= 2;
-    const hasRequiredFields = !!(content.title && content.magnet);
-
-    if (!isSupportedVersion) {
-      return { id: event.id, invalid: true, reason: "version <2" };
-    }
-    if (!hasRequiredFields) {
-      return { id: event.id, invalid: true, reason: "missing title/magnet" };
-    }
-
-    return {
-      id: event.id,
-      videoRootId: content.videoRootId || event.id,
-      version: content.version,
-      isPrivate: content.isPrivate ?? false,
-      title: content.title ?? "",
-      magnet: content.magnet ?? "",
-      thumbnail: content.thumbnail ?? "",
-      description: content.description ?? "",
-      mode: content.mode ?? "live",
-      deleted: content.deleted === true,
-      pubkey: event.pubkey,
-      created_at: event.created_at,
-      tags: event.tags,
-      invalid: false,
-    };
-  } catch (err) {
-    return { id: event.id, invalid: true, reason: "json parse error" };
-  }
-}
-
 /**
  * Basic escaping to avoid XSS.
  */
diff --git a/js/constants.js b/js/constants.js
new file mode 100644
index 00000000..38600fe9
--- /dev/null
+++ b/js/constants.js
@@ -0,0 +1,159 @@
+const DEFAULT_FLAGS = Object.freeze({
+  URL_FIRST_ENABLED: true,   // try URL before magnet in the player
+  ACCEPT_LEGACY_V1: true,    // accept v1 magnet-only notes
+  WSS_TRACKERS: Object.freeze([
+    "wss://tracker.openwebtorrent.com",
+    "wss://tracker.btorrent.xyz",
+    "wss://tracker.webtorrent.dev",
+  ]),
+});
+
+const globalScope = typeof globalThis === "object" && globalThis ? globalThis : undefined;
+
+const runtimeFlags = (() => {
+  if (globalScope && typeof globalScope.__BITVID_RUNTIME_FLAGS__ === "object") {
+    return globalScope.__BITVID_RUNTIME_FLAGS__;
+  }
+  const initial = {
+    URL_FIRST_ENABLED: DEFAULT_FLAGS.URL_FIRST_ENABLED,
+    ACCEPT_LEGACY_V1: DEFAULT_FLAGS.ACCEPT_LEGACY_V1,
+    WSS_TRACKERS: [...DEFAULT_FLAGS.WSS_TRACKERS],
+  };
+  if (globalScope) {
+    globalScope.__BITVID_RUNTIME_FLAGS__ = initial;
+  }
+  return initial;
+})();
+
+function coerceBoolean(value, fallback) {
+  if (typeof value === "boolean") {
+    return value;
+  }
+  if (typeof value === "string") {
+    const normalized = value.trim().toLowerCase();
+    if (!normalized) {
+      return fallback;
+    }
+    if (["false", "0", "off", "no"].includes(normalized)) {
+      return false;
+    }
+    if (["true", "1", "on", "yes"].includes(normalized)) {
+      return true;
+    }
+  }
+  if (value == null) {
+    return fallback;
+  }
+  return Boolean(value);
+}
+
+function sanitizeTrackerList(candidate) {
+  const input = Array.isArray(candidate) ? candidate : DEFAULT_FLAGS.WSS_TRACKERS;
+  const seen = new Set();
+  const sanitized = [];
+
+  for (const tracker of input) {
+    if (typeof tracker !== "string") {
+      continue;
+    }
+    const trimmed = tracker.trim();
+    if (!trimmed) {
+      continue;
+    }
+    if (!/^wss:\/\//i.test(trimmed)) {
+      continue;
+    }
+    const normalized = trimmed.toLowerCase();
+    if (seen.has(normalized)) {
+      continue;
+    }
+    seen.add(normalized);
+    sanitized.push(trimmed);
+  }
+
+  if (!sanitized.length) {
+    return [...DEFAULT_FLAGS.WSS_TRACKERS];
+  }
+
+  return sanitized;
+}
+
+function freezeTrackers(list) {
+  return Object.freeze([...list]);
+}
+
+export let URL_FIRST_ENABLED = coerceBoolean(
+  runtimeFlags.URL_FIRST_ENABLED,
+  DEFAULT_FLAGS.URL_FIRST_ENABLED
+);
+
+export let ACCEPT_LEGACY_V1 = coerceBoolean(
+  runtimeFlags.ACCEPT_LEGACY_V1,
+  DEFAULT_FLAGS.ACCEPT_LEGACY_V1
+);
+
+export let WSS_TRACKERS = freezeTrackers(
+  sanitizeTrackerList(runtimeFlags.WSS_TRACKERS)
+);
+
+Object.defineProperty(runtimeFlags, "URL_FIRST_ENABLED", {
+  configurable: true,
+  enumerable: true,
+  get() {
+    return URL_FIRST_ENABLED;
+  },
+  set(next) {
+    URL_FIRST_ENABLED = coerceBoolean(next, DEFAULT_FLAGS.URL_FIRST_ENABLED);
+  },
+});
+
+Object.defineProperty(runtimeFlags, "ACCEPT_LEGACY_V1", {
+  configurable: true,
+  enumerable: true,
+  get() {
+    return ACCEPT_LEGACY_V1;
+  },
+  set(next) {
+    ACCEPT_LEGACY_V1 = coerceBoolean(next, DEFAULT_FLAGS.ACCEPT_LEGACY_V1);
+  },
+});
+
+Object.defineProperty(runtimeFlags, "WSS_TRACKERS", {
+  configurable: true,
+  enumerable: true,
+  get() {
+    return [...WSS_TRACKERS];
+  },
+  set(next) {
+    WSS_TRACKERS = freezeTrackers(sanitizeTrackerList(next));
+  },
+});
+
+// Ensure the runtime object reflects the sanitized defaults immediately.
+runtimeFlags.URL_FIRST_ENABLED = URL_FIRST_ENABLED;
+runtimeFlags.ACCEPT_LEGACY_V1 = ACCEPT_LEGACY_V1;
+runtimeFlags.WSS_TRACKERS = WSS_TRACKERS;
+
+export function setUrlFirstEnabled(next) {
+  runtimeFlags.URL_FIRST_ENABLED = next;
+  return URL_FIRST_ENABLED;
+}
+
+export function setAcceptLegacyV1(next) {
+  runtimeFlags.ACCEPT_LEGACY_V1 = next;
+  return ACCEPT_LEGACY_V1;
+}
+
+export function setWssTrackers(next) {
+  runtimeFlags.WSS_TRACKERS = next;
+  return WSS_TRACKERS;
+}
+
+export function resetRuntimeFlags() {
+  setUrlFirstEnabled(DEFAULT_FLAGS.URL_FIRST_ENABLED);
+  setAcceptLegacyV1(DEFAULT_FLAGS.ACCEPT_LEGACY_V1);
+  setWssTrackers(DEFAULT_FLAGS.WSS_TRACKERS);
+}
+
+export const RUNTIME_FLAGS = runtimeFlags;
+
diff --git a/js/disclaimer.js b/js/disclaimer.js
index e1a13980..bdfa4454 100644
--- a/js/disclaimer.js
+++ b/js/disclaimer.js
@@ -2,17 +2,29 @@
 
 class DisclaimerModal {
   constructor() {
-    // Initialize elements when the disclaimer HTML is in the DOM.
-    this.init();
+    this.modal = null;
+    this.acceptButton = null;
+    this.acceptHandler = null;
   }
 
   init() {
     this.modal = document.getElementById("disclaimerModal");
-    this.acceptButton = document.getElementById("acceptDisclaimer");
-    if (this.acceptButton) {
-      this.acceptButton.addEventListener("click", () => {
+    const nextAcceptButton = document.getElementById("acceptDisclaimer");
+
+    if (!this.acceptHandler) {
+      this.acceptHandler = () => {
         this.hide();
-      });
+      };
+    }
+
+    if (this.acceptButton && this.acceptHandler) {
+      this.acceptButton.removeEventListener("click", this.acceptHandler);
+    }
+
+    this.acceptButton = nextAcceptButton || null;
+
+    if (this.acceptButton && this.acceptHandler) {
+      this.acceptButton.addEventListener("click", this.acceptHandler);
     }
   }
 
diff --git a/js/gridHealth.js b/js/gridHealth.js
new file mode 100644
index 00000000..11815a6d
--- /dev/null
+++ b/js/gridHealth.js
@@ -0,0 +1,442 @@
+import { infoHashFromMagnet } from "./magnets.js";
+import { TorrentClient, torrentClient } from "./webtorrent.js";
+
+const containerState = new WeakMap();
+const ROOT_MARGIN = "200px 0px";
+
+function now() {
+  return Date.now();
+}
+
+function getCacheEntry(key) {
+  if (!key) {
+    return null;
+  }
+  const entry = probeCache.get(key);
+  if (!entry) {
+    return null;
+  }
+  if (now() - entry.ts > PROBE_CACHE_TTL_MS) {
+    probeCache.delete(key);
+    return null;
+  }
+  return entry.value;
+}
+
+function setCacheEntry(key, value) {
+  if (!key) {
+    return;
+  }
+  probeCache.set(key, { ts: now(), value });
+}
+
+function formatTime(ts) {
+  if (!Number.isFinite(ts)) {
+    return "";
+  }
+  try {
+    return new Date(ts).toLocaleTimeString([], { hour12: false });
+  } catch (err) {
+    return new Date(ts).toLocaleTimeString();
+  }
+}
+
+function buildTooltip({ peers = 0, checkedAt, reason } = {}) {
+  const parts = [];
+  if (Number.isFinite(peers)) {
+    parts.push(`Peers: ${Math.max(0, peers)}`);
+  }
+  if (Number.isFinite(checkedAt)) {
+    const formatted = formatTime(checkedAt);
+    if (formatted) {
+      parts.push(`Checked ${formatted}`);
+    }
+  }
+  if (typeof reason === "string" && reason && reason !== "peer") {
+    let normalizedReason;
+    if (reason === "timeout") {
+      normalizedReason = "Timed out";
+    } else if (reason === "no-trackers") {
+      normalizedReason = "No WSS trackers";
+    } else if (reason === "invalid") {
+      normalizedReason = "Invalid magnet";
+    } else {
+      normalizedReason = reason.charAt(0).toUpperCase() + reason.slice(1);
+    }
+    parts.push(normalizedReason);
+  }
+  if (!parts.length) {
+    return "WebTorrent status unknown";
+  }
+  return `WebTorrent • ${parts.join(" • ")}`;
+}
+
+function normalizeResult(result) {
+  const fallback = {
+    healthy: false,
+    peers: 0,
+    reason: "error",
+    appendedTrackers: false,
+    hasProbeTrackers: false,
+    usedTrackers: Array.isArray(TorrentClient.PROBE_TRACKERS)
+      ? [...TorrentClient.PROBE_TRACKERS]
+      : [],
+    durationMs: 0,
+  };
+  if (!result || typeof result !== "object") {
+    return { ...fallback, checkedAt: now() };
+  }
+  const peers = Number.isFinite(result.peers)
+    ? Math.max(0, Number(result.peers))
+    : 0;
+  const healthy = Boolean(result.healthy) && peers > 0;
+  const reason = typeof result.reason === "string" ? result.reason : "error";
+  return {
+    healthy,
+    peers: healthy ? Math.max(1, peers) : peers,
+    reason,
+    appendedTrackers: Boolean(result.appendedTrackers),
+    hasProbeTrackers:
+      typeof result.hasProbeTrackers === "boolean"
+        ? result.hasProbeTrackers
+        : healthy || Boolean(result.appendedTrackers),
+    usedTrackers: Array.isArray(result.usedTrackers)
+      ? result.usedTrackers.slice()
+      : fallback.usedTrackers,
+    durationMs: Number.isFinite(result.durationMs)
+      ? Math.max(0, Number(result.durationMs))
+      : 0,
+    checkedAt: now(),
+  };
+}
+
+function queueProbe(magnet, cacheKey) {
+  if (!magnet) {
+    return Promise.resolve(null);
+  }
+
+  const cached = getCacheEntry(cacheKey);
+  if (cached) {
+    return Promise.resolve(cached);
+  }
+
+  if (probeInflight.has(cacheKey)) {
+    return probeInflight.get(cacheKey);
+  }
+
+  const job = probeQueue
+    .run(() =>
+      torrentClient
+        .probePeers(magnet, {
+          timeoutMs: PROBE_TIMEOUT_MS,
+          maxWebConns: 2,
+          polls: PROBE_POLL_COUNT,
+        })
+        .catch((err) => ({
+          healthy: false,
+          peers: 0,
+          reason: "error",
+          error: err,
+          appendedTrackers: false,
+          hasProbeTrackers: false,
+        }))
+    )
+    .then((result) => {
+      const normalized = normalizeResult(result);
+      if (cacheKey) {
+        setCacheEntry(cacheKey, normalized);
+      }
+      return normalized;
+    })
+    .finally(() => {
+      if (cacheKey) {
+        probeInflight.delete(cacheKey);
+      }
+    });
+
+  if (cacheKey) {
+    probeInflight.set(cacheKey, job);
+  }
+
+  return job;
+}
+
+const PROBE_CACHE_TTL_MS = 5 * 60 * 1000;
+const PROBE_TIMEOUT_MS = 8000;
+const PROBE_CONCURRENCY = 3;
+const PROBE_POLL_COUNT = 3;
+
+class ProbeQueue {
+  constructor(max = 2) {
+    this.max = Math.max(1, Number(max) || 1);
+    this.running = 0;
+    this.queue = [];
+  }
+
+  run(task) {
+    return new Promise((resolve, reject) => {
+      this.queue.push({ task, resolve, reject });
+      this.drain();
+    });
+  }
+
+  drain() {
+    if (this.running >= this.max) {
+      return;
+    }
+    const job = this.queue.shift();
+    if (!job) {
+      return;
+    }
+    this.running += 1;
+    let finished = false;
+    const finalize = () => {
+      if (finished) {
+        return;
+      }
+      finished = true;
+      this.running -= 1;
+      this.drain();
+    };
+
+    let result;
+    try {
+      result = job.task();
+    } catch (err) {
+      job.reject(err);
+      finalize();
+      return;
+    }
+
+    Promise.resolve(result)
+      .then((value) => {
+        job.resolve(value);
+      })
+      .catch((err) => {
+        job.reject(err);
+      })
+      .finally(() => {
+        finalize();
+      });
+  }
+}
+
+const probeQueue = new ProbeQueue(PROBE_CONCURRENCY);
+const probeCache = new Map();
+const probeInflight = new Map();
+
+function ensureState(container) {
+  let state = containerState.get(container);
+  if (state) {
+    return state;
+  }
+
+  const pendingByCard = new WeakMap();
+  const observedCards = new WeakSet();
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        const card = entry.target;
+        if (!(card instanceof HTMLElement)) {
+          return;
+        }
+        if (!entry.isIntersecting) {
+          return;
+        }
+        handleCardVisible({ card, pendingByCard });
+      });
+    },
+    { root: null, rootMargin: ROOT_MARGIN, threshold: 0.01 }
+  );
+
+  state = { observer, pendingByCard, observedCards };
+  containerState.set(container, state);
+  return state;
+}
+
+function setBadge(card, state, details) {
+  const badge = card.querySelector(".torrent-health-badge");
+  if (!badge) {
+    return;
+  }
+  const hadMargin = badge.classList.contains("mt-3");
+
+  const baseClasses = [
+    "torrent-health-badge",
+    "text-xs",
+    "font-semibold",
+    "px-2",
+    "py-1",
+    "rounded",
+    "inline-flex",
+    "items-center",
+    "gap-1",
+    "transition-colors",
+    "duration-200",
+  ];
+  if (hadMargin) {
+    baseClasses.unshift("mt-3");
+  }
+  badge.className = baseClasses.join(" ");
+
+  const map = {
+    healthy: {
+      icon: "🟢",
+      aria: "WebTorrent peers available",
+      classes: ["bg-green-900", "text-green-200"],
+      role: "status",
+    },
+    unhealthy: {
+      icon: "🔴",
+      aria: "WebTorrent peers unavailable",
+      classes: ["bg-red-900", "text-red-200"],
+      role: "alert",
+    },
+    checking: {
+      icon: "⏳",
+      aria: "Checking WebTorrent peers",
+      classes: ["bg-gray-800", "text-gray-300"],
+      role: "status",
+    },
+    unknown: {
+      icon: "⚪",
+      aria: "WebTorrent status unknown",
+      classes: ["bg-gray-800", "text-gray-300"],
+      role: "status",
+    },
+  };
+
+  const entry = map[state] || map.unknown;
+  entry.classes.forEach((cls) => badge.classList.add(cls));
+
+  const peers =
+    details && Number.isFinite(details.peers)
+      ? Math.max(0, Number(details.peers))
+      : 0;
+  const peersText = state === "healthy" && peers > 0 ? ` (${peers})` : "";
+
+  const iconPrefix = entry.icon ? `${entry.icon} ` : "";
+  badge.textContent = `${iconPrefix}WebTorrent${peersText}`;
+  const tooltip =
+    state === "checking" || state === "unknown"
+      ? entry.aria
+      : buildTooltip({
+          peers,
+          checkedAt: details?.checkedAt,
+          reason: details?.reason,
+        });
+  badge.setAttribute("aria-label", tooltip);
+  badge.setAttribute("title", tooltip);
+  badge.setAttribute("aria-live", entry.role === "alert" ? "assertive" : "polite");
+  badge.setAttribute("role", entry.role);
+  badge.dataset.streamHealthState = state;
+  if (Number.isFinite(peers)) {
+    badge.dataset.streamHealthPeers = String(peers);
+  } else if (badge.dataset.streamHealthPeers) {
+    delete badge.dataset.streamHealthPeers;
+  }
+}
+
+function handleCardVisible({ card, pendingByCard }) {
+  if (!(card instanceof HTMLElement)) {
+    return;
+  }
+  const magnet = card.dataset.magnet || "";
+  if (!magnet) {
+    setBadge(card, "unknown");
+    return;
+  }
+
+  const infoHash = infoHashFromMagnet(magnet);
+  if (!infoHash) {
+    setBadge(card, "unknown");
+    return;
+  }
+
+  if (pendingByCard.has(card)) {
+    return;
+  }
+
+  const cached = getCacheEntry(infoHash);
+  if (cached) {
+    const cachedState = cached.healthy
+      ? "healthy"
+      : cached.hasProbeTrackers
+      ? "unhealthy"
+      : "unknown";
+    setBadge(card, cachedState, cached);
+    return;
+  }
+
+  setBadge(card, "checking");
+
+  const probePromise = queueProbe(magnet, infoHash);
+
+  pendingByCard.set(card, probePromise);
+
+  probePromise
+    .then((result) => {
+      pendingByCard.delete(card);
+      if (!card.isConnected) {
+        return;
+      }
+      if (!result) {
+        setBadge(card, "unknown");
+        return;
+      }
+      if (!result.hasProbeTrackers) {
+        setBadge(card, "unknown", result);
+        return;
+      }
+      if (result.healthy) {
+        setBadge(card, "healthy", result);
+        return;
+      }
+      setBadge(card, "unhealthy", result);
+    })
+    .catch((err) => {
+      console.warn("[gridHealth] probe failed", err);
+      pendingByCard.delete(card);
+      if (!card.isConnected) {
+        return;
+      }
+      setBadge(card, "unhealthy");
+    });
+}
+
+export function attachHealthBadges(container) {
+  if (!(container instanceof HTMLElement)) {
+    return;
+  }
+  const state = ensureState(container);
+  const cards = container.querySelectorAll(".video-card");
+  cards.forEach((card) => {
+    if (!(card instanceof HTMLElement)) {
+      return;
+    }
+    if (state.observedCards.has(card)) {
+      return;
+    }
+    state.observedCards.add(card);
+    state.observer.observe(card);
+    if (!card.dataset.magnet) {
+      setBadge(card, "unknown");
+    }
+  });
+}
+
+export function refreshHealthBadges(container) {
+  if (!(container instanceof HTMLElement)) {
+    return;
+  }
+  const state = containerState.get(container);
+  if (!state) {
+    return;
+  }
+  state.observer.takeRecords().forEach((entry) => {
+    if (entry.isIntersecting) {
+      handleCardVisible({ card: entry.target, pendingByCard: state.pendingByCard });
+    }
+  });
+}
diff --git a/js/healthService.js b/js/healthService.js
new file mode 100644
index 00000000..de265bab
--- /dev/null
+++ b/js/healthService.js
@@ -0,0 +1,98 @@
+import PQueue from "https://esm.sh/p-queue@7.4.1";
+import { trackerPing } from "./trackerPing.js";
+import { infoHashFromMagnet } from "./magnets.js";
+import { HEALTH_TTL_MS, CONCURRENCY } from "./trackerConfig.js";
+
+const queue = new PQueue({ concurrency: CONCURRENCY });
+const cache = new Map();
+const inflight = new Map();
+
+export function getDefaultHealth() {
+  return {
+    ok: false,
+    seeders: 0,
+    leechers: 0,
+    responded: false,
+    from: [],
+  };
+}
+
+export function getHealthCached(infoHash) {
+  if (!infoHash) {
+    return null;
+  }
+  const entry = cache.get(infoHash);
+  if (!entry) {
+    return null;
+  }
+  if (Date.now() - entry.ts > HEALTH_TTL_MS) {
+    cache.delete(infoHash);
+    return null;
+  }
+  return entry.value;
+}
+
+export function setHealthCache(infoHash, value) {
+  if (!infoHash) {
+    return;
+  }
+  cache.set(infoHash, { ts: Date.now(), value });
+}
+
+export function queueHealthCheck(magnet, onResult) {
+  const infoHash = infoHashFromMagnet(magnet);
+  if (!infoHash) {
+    const fallback = getDefaultHealth();
+    if (typeof onResult === "function") {
+      onResult(fallback);
+    }
+    return Promise.resolve(fallback);
+  }
+
+  const cached = getHealthCached(infoHash);
+  if (cached) {
+    if (typeof onResult === "function") {
+      onResult(cached);
+    }
+    return Promise.resolve(cached);
+  }
+
+  if (inflight.has(infoHash)) {
+    const pending = inflight.get(infoHash);
+    if (typeof onResult === "function") {
+      pending.then(onResult).catch(() => {});
+    }
+    return pending;
+  }
+
+  const jobPromise = queue
+    .add(async () => {
+      try {
+        const health = await trackerPing(magnet);
+        setHealthCache(infoHash, health);
+        return health;
+      } catch (err) {
+        console.warn("trackerPing failed", err);
+        return getDefaultHealth();
+      }
+    })
+    .finally(() => {
+      inflight.delete(infoHash);
+    });
+
+  inflight.set(infoHash, jobPromise);
+  if (typeof onResult === "function") {
+    jobPromise.then(onResult).catch(() => {});
+  }
+  return jobPromise;
+}
+
+export function purgeHealthCache() {
+  const now = Date.now();
+  Array.from(cache.keys()).forEach((infoHash) => {
+    const entry = cache.get(infoHash);
+    if (!entry || now - entry.ts > HEALTH_TTL_MS) {
+      cache.delete(infoHash);
+    }
+  });
+}
diff --git a/js/index.js b/js/index.js
index ce3b6db5..6ad7302f 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,5 +1,64 @@
 // js/index.js
 
+import "./bufferPolyfill.js";
+import { trackPageView } from "./analytics.js";
+
+const INTERFACE_FADE_IN_ANIMATION = "interface-fade-in";
+const VIDEO_THUMBNAIL_FADE_IN_ANIMATION = "video-thumbnail-fade-in";
+
+//
+// Centralized animation cleanup
+// ------------------------------
+// We attach a single capture-phase listener for animation events so that any
+// chrome element or thumbnail using our fade-in helpers can automatically shed
+// the temporary classes/data attributes that trigger the transition. This is
+// critical because these DOM nodes frequently persist while the surrounding
+// lists re-render; if the classes stick around, future layout shuffles would
+// replay the fade and make the UI flicker. Clearing the hooks immediately after
+// the first animation keeps the graceful entrance without introducing future
+// flashes.
+const handleFadeInAnimationComplete = (event) => {
+  const { animationName, target } = event;
+
+  if (!(target instanceof HTMLElement)) {
+    return;
+  }
+
+  if (animationName === INTERFACE_FADE_IN_ANIMATION) {
+    if (!target.classList.contains("fade-in")) {
+      return;
+    }
+
+    // Remove the transient fade-in class so future renders keep the element
+    // visible. The delays piggyback on `fade-in`, so we strip those too.
+    target.classList.remove("fade-in");
+    Array.from(target.classList).forEach((className) => {
+      if (className.startsWith("fade-in-delay-")) {
+        target.classList.remove(className);
+      }
+    });
+    return;
+  }
+
+  if (animationName !== VIDEO_THUMBNAIL_FADE_IN_ANIMATION) {
+    return;
+  }
+
+  if (
+    target.dataset &&
+    target.dataset.videoThumbnail === "true" &&
+    target.dataset.thumbnailLoaded === "true"
+  ) {
+    // Thumbnails use the same pattern: once the fade finishes we clear the flag
+    // so a later `load` event (or template reuse) does not restart the
+    // animation.
+    delete target.dataset.thumbnailLoaded;
+  }
+};
+
+document.addEventListener("animationend", handleFadeInAnimationComplete, true);
+document.addEventListener("animationcancel", handleFadeInAnimationComplete, true);
+
 // 1) Load modals (login, application, etc.)
 async function loadModal(url) {
   try {
@@ -8,9 +67,14 @@ async function loadModal(url) {
       throw new Error("Failed to load " + url);
     }
     const html = await response.text();
+    // Remove analytics loader tags from modal partials to avoid duplicate pageview events.
+    const sanitizedHtml = html.replace(
+      /<script\b[^>]*src=["'][^"']*tracking\.js[^"']*["'][^>]*>\s*<\/script>/gi,
+      ""
+    );
     document
       .getElementById("modalContainer")
-      .insertAdjacentHTML("beforeend", html);
+      .insertAdjacentHTML("beforeend", sanitizedHtml);
     console.log(url, "loaded");
   } catch (err) {
     console.error(err);
@@ -171,6 +235,12 @@ Promise.all([
 
     // Also run once on initial load
     handleHashChange();
+
+    return import("./disclaimer.js");
+  })
+  .then(({ default: disclaimerModal }) => {
+    disclaimerModal.init();
+    disclaimerModal.show();
   });
 
 /* -------------------------------------------
@@ -292,9 +362,6 @@ function handleQueryParams() {
   }
 }
 
-/**
- * Handle #view=... in the hash and load the correct partial view.
- */
 function handleHashChange() {
   console.log("handleHashChange called, current hash =", window.location.hash);
 
@@ -311,6 +378,7 @@ function handleHashChange() {
         if (typeof initFn === "function") {
           initFn();
         }
+        recordView("most-recent-videos");
       });
     });
     return;
@@ -321,11 +389,11 @@ function handleHashChange() {
 
   // Now dynamically load that partial, then call its init function
   import("./viewManager.js").then(({ loadView, viewInitRegistry }) => {
-    loadView(viewUrl).then(() => {
-      const initFn = viewInitRegistry[viewName];
-      if (typeof initFn === "function") {
-        initFn();
-      }
-    });
+      loadView(viewUrl).then(() => {
+        const initFn = viewInitRegistry[viewName];
+        if (typeof initFn === "function") {
+          initFn();
+        }
+      });
   });
 }
diff --git a/js/lists.js b/js/lists.js
index ee7274a1..2abc968e 100644
--- a/js/lists.js
+++ b/js/lists.js
@@ -13,6 +13,7 @@ const npubs = [
   "npub1m5s9w4t03znyetxswhgq0ud7fq8ef8y3l4kscn2e8wkvmv42hh3qujgjl3", // mister_monster
   "npub13qexjtmajssuhz8gdchgx65dwsnr705drse294zz5vt4e78ya2vqzyg8lv", // SatoshiSignal
   "npub1da7m2ksdj24995hm8afv88pjpvzt6t9vh70mg8t52yjwtxza3vjszyar58", // GoblinBox
+  "npub196rl3tls3c4y79pc3ptrrj2430z7p5uwetfhukhtkt69hph0fvwq08l43q", // ~Bordut-Nodlex
 ];
 
 console.log("DEBUG: lists.js loaded, npubs:", npubs);
diff --git a/js/magnet.js b/js/magnet.js
new file mode 100644
index 00000000..5fe5d80c
--- /dev/null
+++ b/js/magnet.js
@@ -0,0 +1,170 @@
+import { WSS_TRACKERS } from "./constants.js";
+
+const HEX_INFO_HASH = /^[0-9a-f]{40}$/i;
+const ENCODED_BTih_PATTERN = /xt=urn%3Abtih%3A([0-9a-z]+)/gi;
+
+function getOriginProtocol() {
+  if (typeof window !== "undefined" && window.location?.protocol) {
+    return window.location.protocol.toLowerCase();
+  }
+  return "https:";
+}
+
+function decodeLoose(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+  try {
+    return decodeURIComponent(trimmed);
+  } catch (err) {
+    return trimmed;
+  }
+}
+
+function normalizeForComparison(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+  return value.trim().replace(/\/+$/, "").toLowerCase();
+}
+
+function tryFormatAbsoluteUrl(candidate) {
+  if (typeof candidate !== "string") {
+    return "";
+  }
+  const trimmed = candidate.trim();
+  if (!trimmed) {
+    return "";
+  }
+  try {
+    const parsed = new URL(trimmed);
+    return parsed.toString();
+  } catch (err) {
+    return trimmed;
+  }
+}
+
+/**
+ * Normalize and enrich a magnet string entered in the upload form so that it
+ * always produces a WebTorrent-friendly URI. The logic mirrors the behaviour of
+ * the legacy magnetUtils helper but returns a plain string for ease of use.
+ */
+export function normalizeAndAugmentMagnet(rawValue, { ws = "", xs = "" } = {}) {
+  const initial = typeof rawValue === "string" ? rawValue.trim() : "";
+  if (!initial) {
+    return "";
+  }
+
+  let working = initial;
+
+  if (HEX_INFO_HASH.test(working)) {
+    working = `magnet:?xt=urn:btih:${working.toLowerCase()}`;
+  }
+
+  working = working.replace(ENCODED_BTih_PATTERN, (_, hash) => `xt=urn:btih:${hash}`);
+
+  if (!/^magnet:/i.test(working)) {
+    return working;
+  }
+
+  let fragment = "";
+  const hashIndex = working.indexOf("#");
+  if (hashIndex !== -1) {
+    fragment = working.slice(hashIndex);
+    working = working.slice(0, hashIndex);
+  }
+
+  const [, queryPart = ""] = working.split("?", 2);
+  const normalizedScheme = "magnet:";
+  const rawParams = queryPart
+    .split("&")
+    .map((part) => part.trim())
+    .filter(Boolean);
+
+  const params = [];
+
+  for (const rawParam of rawParams) {
+    const [rawKey, rawVal = ""] = rawParam.split("=", 2);
+    const key = rawKey.trim();
+    if (!key) {
+      continue;
+    }
+    let value = rawVal.trim();
+    if (key.toLowerCase() === "xt" && value) {
+      const decoded = decodeLoose(value);
+      if (decoded) {
+        value = decoded;
+      }
+    }
+    params.push({
+      key,
+      value,
+      lowerKey: key.toLowerCase(),
+      compareValue: normalizeForComparison(value),
+    });
+  }
+
+  const appendUniqueParam = (key, value) => {
+    if (!value) {
+      return;
+    }
+    const trimmedValue = value.trim();
+    if (!trimmedValue) {
+      return;
+    }
+    const lowerKey = key.toLowerCase();
+    const compareValue = normalizeForComparison(trimmedValue);
+    if (compareValue) {
+      const exists = params.some(
+        (param) => param.lowerKey === lowerKey && param.compareValue === compareValue
+      );
+      if (exists) {
+        return;
+      }
+    }
+    params.push({
+      key,
+      value: trimmedValue,
+      lowerKey,
+      compareValue,
+    });
+  };
+
+  for (const tracker of WSS_TRACKERS) {
+    if (typeof tracker !== "string") {
+      continue;
+    }
+    const trimmedTracker = tracker.trim();
+    if (!/^wss:\/\//i.test(trimmedTracker)) {
+      continue;
+    }
+    appendUniqueParam("tr", trimmedTracker);
+  }
+
+  const normalizedXs = typeof xs === "string" ? xs.trim() : "";
+  if (normalizedXs) {
+    appendUniqueParam("xs", normalizedXs);
+  }
+
+  const originProtocol = getOriginProtocol();
+  const rawWs = typeof ws === "string" ? ws.trim() : "";
+  if (rawWs) {
+    const formattedWs = tryFormatAbsoluteUrl(rawWs);
+    const lowerWs = formattedWs.toLowerCase();
+    const isHttpSeed = lowerWs.startsWith("http://");
+    const allowHttpSeed = originProtocol === "http:";
+    if (!isHttpSeed || allowHttpSeed) {
+      appendUniqueParam("ws", formattedWs);
+    }
+  }
+
+  const queryString = params
+    .map(({ key, value }) => (value ? `${key}=${value}` : key))
+    .join("&");
+
+  return `${normalizedScheme}${queryString ? `?${queryString}` : ""}${fragment}`;
+}
diff --git a/js/magnetUtils.js b/js/magnetUtils.js
new file mode 100644
index 00000000..29057dc3
--- /dev/null
+++ b/js/magnetUtils.js
@@ -0,0 +1,309 @@
+// js/magnetUtils.js
+
+import { WSS_TRACKERS } from "./constants.js";
+
+export { WSS_TRACKERS };
+
+const HEX_INFO_HASH = /^[0-9a-f]{40}$/i;
+const BTIH_PREFIX = "urn:btih:";
+const ENCODED_BTih_PATTERN = /xt=urn%3Abtih%3A([0-9a-z]+)/gi;
+
+function normalizeForComparison(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+  try {
+    const parsed = new URL(trimmed);
+    const pathname = parsed.pathname.replace(/\/?$/, "");
+    const normalizedPath = pathname ? pathname : "";
+    return (
+      `${parsed.protocol}//${parsed.host}${normalizedPath}${parsed.search}${parsed.hash}`
+        .trim()
+        .toLowerCase()
+    );
+  } catch (err) {
+    return trimmed.replace(/\/?$/, "").toLowerCase();
+  }
+}
+
+function sanitizeHttpUrl(candidate) {
+  if (typeof candidate !== "string") {
+    return "";
+  }
+  const trimmed = candidate.trim();
+  if (!trimmed) {
+    return "";
+  }
+  try {
+    const parsed = new URL(trimmed);
+    if (parsed.protocol === "http:" || parsed.protocol === "https:") {
+      return parsed.toString();
+    }
+  } catch (err) {
+    return "";
+  }
+  return "";
+}
+
+export function safeDecodeMagnet(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+
+  let decoded = value.trim();
+  if (!decoded) {
+    return "";
+  }
+
+  for (let i = 0; i < 2; i += 1) {
+    if (!decoded.includes("%")) {
+      break;
+    }
+
+    try {
+      const candidate = decodeURIComponent(decoded);
+      if (!candidate) {
+        break;
+      }
+      if (candidate === decoded) {
+        break;
+      }
+      decoded = candidate.trim();
+    } catch (err) {
+      break;
+    }
+  }
+
+  return decoded;
+}
+
+/**
+ * Normalize a magnet URI while preserving legacy payload quirks and augmenting it
+ * for browser playback.
+ *
+ * Key behaviors:
+ * - Accepts bare info-hash strings and promotes them to full `magnet:?xt=urn:btih:` links.
+ * - Leaves the existing `xt` payload untouched—no percent re-encoding or normalization
+ *   beyond decoding legacy `%3A` segments.
+ * - Only appends browser-safe WSS trackers in addition to whatever the caller provides.
+ * - Skips insecure `http:` web seeds unless the application itself is running over HTTP.
+ *
+ * Note: `didChange` may be reported even if the resulting magnet string is textually
+ * identical to the input. Callers should not rely on `didChange` to detect a modified
+ * URI.
+ */
+export function normalizeAndAugmentMagnet(
+  rawValue,
+  {
+    webSeed,
+    torrentUrl,
+    xs,
+    extraTrackers = [],
+    logger,
+    appProtocol,
+  } = {}
+) {
+  const log = typeof logger === "function" ? logger : () => {};
+  const initial = typeof rawValue === "string" ? rawValue.trim() : "";
+  if (!initial) {
+    return { magnet: "", didChange: false };
+  }
+
+  let working = initial;
+  let didMutate = false;
+  const bareHashMatch = HEX_INFO_HASH.test(working);
+  if (bareHashMatch) {
+    working = `magnet:?xt=${BTIH_PREFIX}${working.toLowerCase()}`;
+    didMutate = true;
+  }
+
+  const hashIndex = working.indexOf("#");
+  let fragment = "";
+  if (hashIndex !== -1) {
+    fragment = working.slice(hashIndex);
+    working = working.slice(0, hashIndex);
+  }
+
+  const decodedXt = working.replace(ENCODED_BTih_PATTERN, (_, hash) => {
+    didMutate = true;
+    return `xt=${BTIH_PREFIX}${hash}`;
+  });
+  working = decodedXt;
+
+  if (!/^magnet:/i.test(working)) {
+    return {
+      magnet: working,
+      didChange: didMutate || working !== initial,
+    };
+  }
+
+  const [schemePart, queryPart = ""] = working.split("?", 2);
+  const normalizedScheme = "magnet:";
+  if (schemePart !== normalizedScheme) {
+    didMutate = true;
+  }
+
+  const rawParams = queryPart
+    .split("&")
+    .map((part) => part.trim())
+    .filter(Boolean);
+
+  const params = [];
+
+  const decodeLoose = (value) => {
+    if (typeof value !== "string" || !value) {
+      return "";
+    }
+    try {
+      return decodeURIComponent(value);
+    } catch (err) {
+      return value;
+    }
+  };
+
+  for (const rawParam of rawParams) {
+    const [rawKey, rawValue = ""] = rawParam.split("=", 2);
+    const key = rawKey.trim();
+    if (!key) {
+      continue;
+    }
+    let value = rawValue.trim();
+    if (key.toLowerCase() === "xt" && value) {
+      const decoded = decodeLoose(value);
+      if (decoded !== value) {
+        value = decoded;
+        didMutate = true;
+      }
+    }
+    params.push({
+      key,
+      value,
+      decoded: decodeLoose(value),
+    });
+  }
+
+  const torrentHint = typeof torrentUrl === "string" && torrentUrl.trim()
+    ? torrentUrl
+    : typeof xs === "string"
+      ? xs.trim()
+      : "";
+
+  const safeTorrentHint = sanitizeHttpUrl(torrentHint);
+  const seedInputs = Array.isArray(webSeed)
+    ? webSeed
+    : typeof webSeed === "string"
+      ? [webSeed]
+      : [];
+
+  const resolvedProtocol = typeof appProtocol === "string" && appProtocol
+    ? appProtocol.toLowerCase()
+    : typeof window !== "undefined" && window.location && window.location.protocol
+      ? window.location.protocol.toLowerCase()
+      : "https:";
+
+  const existingTrackers = new Set(
+    params
+      .filter((param) => param.key.toLowerCase() === "tr")
+      .map((param) => normalizeForComparison(param.decoded))
+      .filter(Boolean)
+  );
+
+  const trackerCandidates = [
+    ...WSS_TRACKERS,
+    ...extraTrackers,
+  ];
+
+  for (const tracker of trackerCandidates) {
+    if (typeof tracker !== "string") {
+      continue;
+    }
+    const trimmedTracker = tracker.trim();
+    if (!trimmedTracker) {
+      continue;
+    }
+    if (!/^wss:\/\//i.test(trimmedTracker)) {
+      continue;
+    }
+    const normalizedTracker = normalizeForComparison(trimmedTracker);
+    if (!normalizedTracker || existingTrackers.has(normalizedTracker)) {
+      continue;
+    }
+    params.push({ key: "tr", value: trimmedTracker, decoded: trimmedTracker });
+    existingTrackers.add(normalizedTracker);
+    didMutate = true;
+  }
+
+  if (safeTorrentHint) {
+    const existingXs = new Set(
+      params
+        .filter((param) => param.key.toLowerCase() === "xs")
+        .map((param) => normalizeForComparison(param.decoded))
+        .filter(Boolean)
+    );
+    const normalizedXs = normalizeForComparison(safeTorrentHint);
+    if (normalizedXs && !existingXs.has(normalizedXs)) {
+      params.push({
+        key: "xs",
+        value: safeTorrentHint,
+        decoded: safeTorrentHint,
+      });
+      didMutate = true;
+    }
+  }
+
+  if (seedInputs.length) {
+    const existingWs = new Set(
+      params
+        .filter((param) => param.key.toLowerCase() === "ws")
+        .map((param) => normalizeForComparison(param.decoded))
+        .filter(Boolean)
+    );
+    for (const seedInput of seedInputs) {
+      if (typeof seedInput !== "string") {
+        continue;
+      }
+      const trimmedSeed = seedInput.trim();
+      if (!trimmedSeed) {
+        continue;
+      }
+      try {
+        const parsedSeed = new URL(trimmedSeed);
+        const seedProtocol = parsedSeed.protocol;
+        const allowHttpSeed = resolvedProtocol === "http:";
+        if (
+          seedProtocol === "https:" ||
+          (seedProtocol === "http:" && allowHttpSeed)
+        ) {
+          const seedValue = parsedSeed.toString();
+          const normalizedSeed = normalizeForComparison(seedValue);
+          if (normalizedSeed && !existingWs.has(normalizedSeed)) {
+            params.push({ key: "ws", value: seedValue, decoded: seedValue });
+            existingWs.add(normalizedSeed);
+            didMutate = true;
+          }
+        } else if (seedProtocol === "http:") {
+          log(
+            `[normalizeAndAugmentMagnet] Skipping insecure web seed: ${trimmedSeed}`
+          );
+        }
+      } catch (err) {
+        // Ignore invalid web seed values silently.
+      }
+    }
+  }
+
+  const queryString = params
+    .map(({ key, value }) => (value ? `${key}=${value}` : key))
+    .join("&");
+
+  const finalMagnet = `${normalizedScheme}${queryString ? `?${queryString}` : ""}${fragment}`;
+
+  return {
+    magnet: finalMagnet,
+    didChange: didMutate || finalMagnet !== initial,
+  };
+}
diff --git a/js/magnets.js b/js/magnets.js
new file mode 100644
index 00000000..208b703c
--- /dev/null
+++ b/js/magnets.js
@@ -0,0 +1,66 @@
+import parseMagnet from "https://esm.sh/magnet-uri@7.0.7";
+
+function normalizeInfoHash(candidate) {
+  const trimmed = typeof candidate === "string" ? candidate.trim() : "";
+  if (!trimmed) {
+    return null;
+  }
+  if (/^[0-9a-f]{40}$/i.test(trimmed)) {
+    return trimmed.toLowerCase();
+  }
+  if (/^[a-z2-7]{32}$/i.test(trimmed)) {
+    try {
+      const parsed = parseMagnet(`magnet:?xt=urn:btih:${trimmed}`);
+      const hash = typeof parsed.infoHash === "string" ? parsed.infoHash : "";
+      return hash ? hash.toLowerCase() : null;
+    } catch (err) {
+      console.warn("Failed to normalize base32 info hash", err);
+    }
+  }
+  return null;
+}
+
+export function infoHashFromMagnet(magnet) {
+  if (typeof magnet !== "string") {
+    return null;
+  }
+  const direct = normalizeInfoHash(magnet);
+  if (direct) {
+    return direct;
+  }
+  try {
+    const parsed = parseMagnet(magnet);
+    const hash = typeof parsed.infoHash === "string" ? parsed.infoHash : "";
+    return hash ? hash.toLowerCase() : null;
+  } catch (err) {
+    console.warn("Failed to parse magnet for info hash", err);
+    return null;
+  }
+}
+
+export function trackersFromMagnet(magnet) {
+  if (typeof magnet !== "string") {
+    return [];
+  }
+  try {
+    const parsed = parseMagnet(magnet);
+    if (!parsed || !Array.isArray(parsed.announce)) {
+      return [];
+    }
+    const deduped = new Set();
+    parsed.announce.forEach((url) => {
+      if (typeof url !== "string") {
+        return;
+      }
+      const trimmed = url.trim();
+      if (!trimmed) {
+        return;
+      }
+      deduped.add(trimmed);
+    });
+    return Array.from(deduped);
+  } catch (err) {
+    console.warn("Failed to parse magnet trackers", err);
+    return [];
+  }
+}
diff --git a/js/nostr.js b/js/nostr.js
index a1293f89..6df1dffc 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -1,7 +1,10 @@
 // js/nostr.js
 
 import { isDevMode } from "./config.js";
+import { ACCEPT_LEGACY_V1 } from "./constants.js";
 import { accessControl } from "./accessControl.js";
+// 🔧 merged conflicting changes from codex/update-video-publishing-and-parsing-logic vs unstable
+import { deriveTitleFromEvent, magnetFromText } from "./videoEventUtils.js";
 
 /**
  * The usual relays
@@ -14,6 +17,10 @@ const RELAY_URLS = [
   "wss://relay.nostr.band",
 ];
 
+const EVENTS_CACHE_STORAGE_KEY = "bitvid:eventsCache:v1";
+const LEGACY_EVENTS_STORAGE_KEY = "bitvidEvents";
+const EVENTS_CACHE_TTL_MS = 10 * 60 * 1000; // 10 minutes
+
 // To limit error spam
 let errorLogCount = 0;
 const MAX_ERROR_LOGS = 100;
@@ -43,53 +50,256 @@ function fakeDecrypt(encrypted) {
   return encrypted.split("").reverse().join("");
 }
 
-/**
- * Convert a raw Nostr event => your "video" object.
- * CHANGED: skip if version <2
- */
-function convertEventToVideo(event) {
+const EXTENSION_MIME_MAP = {
+  mp4: "video/mp4",
+  m4v: "video/x-m4v",
+  webm: "video/webm",
+  mkv: "video/x-matroska",
+  mov: "video/quicktime",
+  avi: "video/x-msvideo",
+  ogv: "video/ogg",
+  ogg: "video/ogg",
+  m3u8: "application/x-mpegURL",
+  mpd: "application/dash+xml",
+  ts: "video/mp2t",
+  mpg: "video/mpeg",
+  mpeg: "video/mpeg",
+  flv: "video/x-flv",
+  "3gp": "video/3gpp",
+};
+
+function inferMimeTypeFromUrl(url) {
+  if (!url || typeof url !== "string") {
+    return "";
+  }
+
+  let pathname = "";
   try {
-    const content = JSON.parse(event.content || "{}");
+    const parsed = new URL(url);
+    pathname = parsed.pathname || "";
+  } catch (err) {
+    const sanitized = url.split("?")[0].split("#")[0];
+    pathname = sanitized || "";
+  }
 
-    // Example checks:
-    const isSupportedVersion = content.version >= 2;
-    const hasRequiredFields = !!(content.title && content.magnet);
+  const lastSegment = pathname.split("/").pop() || "";
+  const match = lastSegment.match(/\.([a-z0-9]+)$/i);
+  if (!match) {
+    return "";
+  }
 
-    if (!isSupportedVersion) {
-      return {
-        id: event.id,
-        invalid: true,
-        reason: "version <2",
-      };
+  const extension = match[1].toLowerCase();
+  return EXTENSION_MIME_MAP[extension] || "";
+}
+
+/**
+ * Convert a raw Nostr event into Bitvid's canonical "video" object.
+ *
+ * The converter intentionally centralises all of the quirky legacy handling so
+ * that feed rendering, subscriptions, and deep links rely on the exact same
+ * rules. Any future regression around magnet-only posts or malformed JSON
+ * should be solved by updating this function (and its tests) instead of
+ * sprinkling ad-hoc checks elsewhere in the UI.
+ *
+ * Also accepts legacy (<v2) payloads when ACCEPT_LEGACY_V1 allows it.
+ */
+function convertEventToVideo(event = {}) {
+  const safeTrim = (value) => (typeof value === "string" ? value.trim() : "");
+
+  const rawContent = typeof event.content === "string" ? event.content : "";
+  const tags = Array.isArray(event.tags) ? event.tags : [];
+
+  let parsedContent = {};
+  let parseError = null;
+  if (rawContent) {
+    try {
+      const parsed = JSON.parse(rawContent);
+      if (parsed && typeof parsed === "object") {
+        parsedContent = parsed;
+      }
+    } catch (err) {
+      parseError = err;
+      parsedContent = {};
     }
-    if (!hasRequiredFields) {
-      return {
-        id: event.id,
-        invalid: true,
-        reason: "missing title/magnet",
-      };
+  }
+
+  const directUrl = safeTrim(parsedContent.url);
+  const directMagnetRaw = safeTrim(parsedContent.magnet);
+
+  const normalizeMagnetCandidate = (value) => {
+    if (typeof value !== "string") {
+      return "";
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return "";
+    }
+    if (trimmed.toLowerCase().startsWith("magnet:?")) {
+      return trimmed;
+    }
+    const extracted = magnetFromText(trimmed);
+    return extracted ? extracted.trim() : "";
+  };
+
+  let magnet = normalizeMagnetCandidate(directMagnetRaw);
+  let rawMagnet = magnet ? directMagnetRaw : "";
+
+  if (!magnet && ACCEPT_LEGACY_V1) {
+    const inlineMagnet = normalizeMagnetCandidate(rawContent);
+    if (inlineMagnet) {
+      magnet = inlineMagnet;
     }
 
+    if (!magnet) {
+      outer: for (const tag of tags) {
+        if (!Array.isArray(tag) || tag.length < 2) {
+          continue;
+        }
+
+        const key =
+          typeof tag[0] === "string" ? tag[0].trim().toLowerCase() : "";
+
+        const startIndex = key === "magnet" ? 1 : 0;
+        for (let i = startIndex; i < tag.length; i += 1) {
+          const candidate = normalizeMagnetCandidate(tag[i]);
+          if (candidate) {
+            magnet = candidate;
+            break outer;
+          }
+        }
+      }
+    }
+
+    if (!magnet) {
+      const recoveredFromRaw = magnetFromText(rawContent);
+      if (recoveredFromRaw) {
+        magnet = safeTrim(recoveredFromRaw);
+      }
+    }
+  }
+
+  if (!rawMagnet && magnet) {
+    rawMagnet = magnet;
+  }
+
+  const url = directUrl;
+
+  if (!url && !magnet) {
+    return { id: event.id, invalid: true, reason: "missing playable source" };
+  }
+
+  const thumbnail = safeTrim(parsedContent.thumbnail);
+  const description = safeTrim(parsedContent.description);
+  const rawMode = safeTrim(parsedContent.mode);
+  const mode = rawMode || "live";
+  const deleted = parsedContent.deleted === true;
+  const isPrivate = parsedContent.isPrivate === true;
+  const videoRootId = safeTrim(parsedContent.videoRootId) || event.id;
+
+  let infoHash = "";
+  const pushInfoHash = (candidate) => {
+    if (typeof candidate !== "string") {
+      return false;
+    }
+    const normalized = candidate.trim().toLowerCase();
+    if (/^[0-9a-f]{40}$/.test(normalized)) {
+      infoHash = normalized;
+      return true;
+    }
+    return false;
+  };
+
+  pushInfoHash(parsedContent.infoHash);
+
+  if (!infoHash && magnet) {
+    const match = magnet.match(/xt=urn:btih:([0-9a-z]+)/i);
+    if (match && match[1]) {
+      pushInfoHash(match[1]);
+    }
+  }
+
+  const searchInfoHashInString = (value) => {
+    if (infoHash || typeof value !== "string") {
+      return;
+    }
+    const match = value.match(/[0-9a-f]{40}/i);
+    if (match && match[0]) {
+      pushInfoHash(match[0]);
+    }
+  };
+
+  if (!infoHash && ACCEPT_LEGACY_V1) {
+    searchInfoHashInString(rawContent);
+    for (const tag of tags) {
+      if (infoHash) {
+        break;
+      }
+      if (!Array.isArray(tag)) {
+        continue;
+      }
+      for (let i = 0; i < tag.length; i += 1) {
+        searchInfoHashInString(tag[i]);
+        if (infoHash) {
+          break;
+        }
+      }
+    }
+  }
+
+  const declaredTitle = safeTrim(parsedContent.title);
+  const derivedTitle = deriveTitleFromEvent({
+    parsedContent,
+    tags,
+    primaryTitle: declaredTitle,
+  });
+
+  let title = safeTrim(derivedTitle);
+  if (!title && ACCEPT_LEGACY_V1 && (magnet || infoHash)) {
+    title = infoHash
+      ? `Legacy Video ${infoHash.slice(0, 8)}`
+      : "Legacy BitTorrent Video";
+  }
+
+  if (!title) {
+    const reason = parseError
+      ? "missing title (json parse error)"
+      : "missing title";
+    return { id: event.id, invalid: true, reason };
+  }
+
+  const rawVersion = parsedContent.version;
+  let version = rawVersion === undefined ? 2 : Number(rawVersion);
+  if (!Number.isFinite(version)) {
+    version = rawVersion === undefined ? 2 : 1;
+  }
+
+  if (version < 2 && !ACCEPT_LEGACY_V1) {
     return {
       id: event.id,
-      videoRootId: content.videoRootId || event.id,
-      version: content.version,
-      isPrivate: content.isPrivate ?? false,
-      title: content.title ?? "",
-      magnet: content.magnet ?? "",
-      thumbnail: content.thumbnail ?? "",
-      description: content.description ?? "",
-      mode: content.mode ?? "live",
-      deleted: content.deleted === true,
-      pubkey: event.pubkey,
-      created_at: event.created_at,
-      tags: event.tags,
-      invalid: false,
+      invalid: true,
+      reason: `unsupported version ${version}`,
     };
-  } catch (err) {
-    // JSON parse error
-    return { id: event.id, invalid: true, reason: "json parse error" };
   }
+
+  return {
+    id: event.id,
+    videoRootId,
+    version,
+    isPrivate,
+    title,
+    url,
+    magnet,
+    rawMagnet,
+    infoHash,
+    thumbnail,
+    description,
+    mode,
+    deleted,
+    pubkey: event.pubkey,
+    created_at: event.created_at,
+    tags,
+    invalid: false,
+  };
 }
 
 /**
@@ -107,6 +317,8 @@ function getActiveKey(video) {
   return `LEGACY:${video.id}`;
 }
 
+export { convertEventToVideo };
+
 class NostrClient {
   constructor() {
     this.pool = null;
@@ -118,6 +330,107 @@ class NostrClient {
 
     // “activeMap” holds only the newest version for each root
     this.activeMap = new Map();
+
+    this.hasRestoredLocalData = false;
+  }
+
+  restoreLocalData() {
+    if (this.hasRestoredLocalData) {
+      return this.allEvents.size > 0;
+    }
+
+    this.hasRestoredLocalData = true;
+
+    if (typeof localStorage === "undefined") {
+      return false;
+    }
+
+    const now = Date.now();
+    const parsePayload = (raw) => {
+      if (!raw) {
+        return null;
+      }
+      try {
+        const parsed = JSON.parse(raw);
+        if (parsed && typeof parsed === "object") {
+          return parsed;
+        }
+      } catch (err) {
+        if (isDevMode) {
+          console.warn("[nostr] Failed to parse cached events:", err);
+        }
+      }
+      return null;
+    };
+
+    let payload = parsePayload(localStorage.getItem(EVENTS_CACHE_STORAGE_KEY));
+
+    if (!payload) {
+      const legacyRaw = localStorage.getItem(LEGACY_EVENTS_STORAGE_KEY);
+      const legacyParsed = parsePayload(legacyRaw);
+      if (legacyParsed) {
+        payload = {
+          version: 1,
+          savedAt: now,
+          events: legacyParsed,
+        };
+      }
+      if (legacyRaw) {
+        try {
+          localStorage.removeItem(LEGACY_EVENTS_STORAGE_KEY);
+        } catch (err) {
+          if (isDevMode) {
+            console.warn("[nostr] Failed to remove legacy cache:", err);
+          }
+        }
+      }
+    }
+
+    if (!payload || payload.version !== 1) {
+      return false;
+    }
+
+    if (
+      typeof payload.savedAt !== "number" ||
+      payload.savedAt <= 0 ||
+      now - payload.savedAt > EVENTS_CACHE_TTL_MS
+    ) {
+      try {
+        localStorage.removeItem(EVENTS_CACHE_STORAGE_KEY);
+      } catch (err) {
+        if (isDevMode) {
+          console.warn("[nostr] Failed to clear expired cache:", err);
+        }
+      }
+      return false;
+    }
+
+    const events = payload.events;
+    if (!events || typeof events !== "object") {
+      return false;
+    }
+
+    this.allEvents.clear();
+    this.activeMap.clear();
+
+    for (const [id, video] of Object.entries(events)) {
+      if (!id || !video || typeof video !== "object") {
+        continue;
+      }
+
+      this.allEvents.set(id, video);
+      if (video.deleted) {
+        continue;
+      }
+
+      const activeKey = getActiveKey(video);
+      const existing = this.activeMap.get(activeKey);
+      if (!existing || video.created_at > existing.created_at) {
+        this.activeMap.set(activeKey, video);
+      }
+    }
+
+    return this.allEvents.size > 0;
   }
 
   /**
@@ -126,6 +439,8 @@ class NostrClient {
   async init() {
     if (isDevMode) console.log("Connecting to relays...");
 
+    this.restoreLocalData();
+
     try {
       this.pool = new window.NostrTools.SimplePool();
       const results = await this.connectToRelays();
@@ -144,6 +459,11 @@ class NostrClient {
     }
   }
 
+  // We subscribe to kind `0` purely as a liveness probe because almost every
+  // relay can answer it quickly. Either an `event` or `eose` signals success,
+  // while the 5s timer guards against relays that never respond. We immediately
+  // `unsub` to avoid leaking subscriptions. Note: any future change must still
+  // provide a lightweight readiness check with similar timeout semantics.
   async connectToRelays() {
     return Promise.all(
       this.relays.map(
@@ -212,8 +532,7 @@ class NostrClient {
   }
 
   /**
-   * Publish a new video
-   * CHANGED: Force version=2 for all new notes
+   * Publish a new video using the v3 content schema.
    */
   async publishVideo(videoData, pubkey) {
     if (!pubkey) throw new Error("Not logged in to publish video.");
@@ -222,31 +541,49 @@ class NostrClient {
       console.log("Publishing new video with data:", videoData);
     }
 
-    let finalMagnet = videoData.magnet;
-    if (videoData.isPrivate) {
+    const rawMagnet = typeof videoData.magnet === "string" ? videoData.magnet : "";
+    let finalMagnet = rawMagnet.trim();
+    if (videoData.isPrivate && finalMagnet) {
       finalMagnet = fakeEncrypt(finalMagnet);
     }
+    const finalUrl =
+      typeof videoData.url === "string" ? videoData.url.trim() : "";
+    const finalThumbnail =
+      typeof videoData.thumbnail === "string" ? videoData.thumbnail.trim() : "";
+    const finalDescription =
+      typeof videoData.description === "string"
+        ? videoData.description.trim()
+        : "";
+    const finalTitle =
+      typeof videoData.title === "string" ? videoData.title.trim() : "";
+    const providedMimeType =
+      typeof videoData.mimeType === "string"
+        ? videoData.mimeType.trim()
+        : "";
+
+    const createdAt = Math.floor(Date.now() / 1000);
 
     // brand-new root & d
     const videoRootId = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
     const dTagValue = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
 
     const contentObject = {
+      version: 3,
+      title: finalTitle,
+      url: finalUrl,
+      magnet: finalMagnet,
+      thumbnail: finalThumbnail,
+      description: finalDescription,
+      mode: videoData.mode || "live",
       videoRootId,
-      version: 2, // forcibly set version=2
       deleted: false,
       isPrivate: videoData.isPrivate ?? false,
-      title: videoData.title || "",
-      magnet: finalMagnet,
-      thumbnail: videoData.thumbnail || "",
-      description: videoData.description || "",
-      mode: videoData.mode || "live",
     };
 
     const event = {
       kind: 30078,
       pubkey,
-      created_at: Math.floor(Date.now() / 1000),
+      created_at: createdAt,
       tags: [
         ["t", "video"],
         ["d", dTagValue],
@@ -273,6 +610,83 @@ class NostrClient {
           }
         })
       );
+
+      if (finalUrl) {
+        const inferredMimeType = inferMimeTypeFromUrl(finalUrl);
+        const mimeType =
+          providedMimeType || inferredMimeType || "application/octet-stream";
+
+        const mirrorTags = [
+          ["url", finalUrl],
+          ["m", mimeType],
+        ];
+
+        if (finalThumbnail) {
+          mirrorTags.push(["thumb", finalThumbnail]);
+        }
+
+        const altText = finalDescription || finalTitle || "";
+        if (altText) {
+          mirrorTags.push(["alt", altText]);
+        }
+
+        if (!contentObject.isPrivate && finalMagnet) {
+          mirrorTags.push(["magnet", finalMagnet]);
+        }
+
+        const mirrorEvent = {
+          kind: 1063,
+          pubkey,
+          created_at: createdAt,
+          tags: mirrorTags,
+          content: altText,
+        };
+
+        if (isDevMode) {
+          console.log("Prepared NIP-94 mirror event:", mirrorEvent);
+        }
+
+        try {
+          const signedMirrorEvent = await window.nostr.signEvent(mirrorEvent);
+          if (isDevMode) {
+            console.log("Signed NIP-94 mirror event:", signedMirrorEvent);
+          }
+
+          await Promise.all(
+            this.relays.map(async (url) => {
+              try {
+                await this.pool.publish([url], signedMirrorEvent);
+                if (isDevMode) {
+                  console.log(`NIP-94 mirror published to ${url}`);
+                }
+              } catch (mirrorErr) {
+                if (isDevMode) {
+                  console.error(
+                    `Failed to publish NIP-94 mirror to ${url}`,
+                    mirrorErr
+                  );
+                }
+              }
+            })
+          );
+
+          if (isDevMode) {
+            console.log(
+              "NIP-94 mirror dispatched for hosted URL:",
+              finalUrl
+            );
+          }
+        } catch (mirrorError) {
+          if (isDevMode) {
+            console.error(
+              "Failed to sign/publish NIP-94 mirror event:",
+              mirrorError
+            );
+          }
+        }
+      } else if (isDevMode) {
+        console.log("Skipping NIP-94 mirror: no hosted URL provided.");
+      }
       return signedEvent;
     } catch (err) {
       if (isDevMode) console.error("Failed to sign/publish:", err);
@@ -322,14 +736,23 @@ class NostrClient {
       oldPlainMagnet = fakeDecrypt(oldPlainMagnet);
     }
 
+    const oldUrl = baseEvent.url || "";
+
     // Determine if the updated note should be private
     const wantPrivate = updatedData.isPrivate ?? baseEvent.isPrivate ?? false;
 
     // Use the new magnet if provided; otherwise, fall back to the decrypted old magnet
-    let finalPlainMagnet = (updatedData.magnet || "").trim() || oldPlainMagnet;
-    let finalMagnet = wantPrivate
-      ? fakeEncrypt(finalPlainMagnet)
-      : finalPlainMagnet;
+    const newMagnetValue =
+      typeof updatedData.magnet === "string" ? updatedData.magnet.trim() : "";
+    let finalPlainMagnet = newMagnetValue || oldPlainMagnet;
+    let finalMagnet =
+      wantPrivate && finalPlainMagnet
+        ? fakeEncrypt(finalPlainMagnet)
+        : finalPlainMagnet;
+
+    const newUrlValue =
+      typeof updatedData.url === "string" ? updatedData.url.trim() : "";
+    const finalUrl = newUrlValue || oldUrl;
 
     // Use the existing videoRootId (or fall back to the base event's ID)
     const oldRootId = baseEvent.videoRootId || baseEvent.id;
@@ -344,6 +767,7 @@ class NostrClient {
       deleted: false,
       isPrivate: wantPrivate,
       title: updatedData.title ?? baseEvent.title,
+      url: finalUrl,
       magnet: finalMagnet,
       thumbnail: updatedData.thumbnail ?? baseEvent.thumbnail,
       description: updatedData.description ?? baseEvent.description,
@@ -420,6 +844,7 @@ class NostrClient {
           deleted: fetched.deleted,
           isPrivate: fetched.isPrivate,
           title: fetched.title,
+          url: fetched.url,
           magnet: fetched.magnet,
           thumbnail: fetched.thumbnail,
           description: fetched.description,
@@ -451,6 +876,7 @@ class NostrClient {
       deleted: true,
       isPrivate: oldContent.isPrivate ?? false,
       title: oldContent.title || "",
+      url: "",
       magnet: "",
       thumbnail: "",
       description: "This version was reverted by the creator.",
@@ -530,6 +956,7 @@ class NostrClient {
             deleted: vid.deleted,
             isPrivate: vid.isPrivate,
             title: vid.title,
+            url: vid.url,
             magnet: vid.magnet,
             thumbnail: vid.thumbnail,
             description: vid.description,
@@ -548,12 +975,28 @@ class NostrClient {
  * Saves all known events to localStorage (or a different storage if you prefer).
  */
   saveLocalData() {
-    // Convert our allEvents map into a plain object for JSON storage
-    const allEventsObject = {};
+    if (typeof localStorage === "undefined") {
+      return;
+    }
+
+    const payload = {
+      version: 1,
+      savedAt: Date.now(),
+      events: {},
+    };
+
     for (const [id, vid] of this.allEvents.entries()) {
-      allEventsObject[id] = vid;
+      payload.events[id] = vid;
+    }
+
+    try {
+      localStorage.setItem(EVENTS_CACHE_STORAGE_KEY, JSON.stringify(payload));
+      localStorage.removeItem(LEGACY_EVENTS_STORAGE_KEY);
+    } catch (err) {
+      if (isDevMode) {
+        console.warn("[nostr] Failed to persist events cache:", err);
+      }
     }
-    localStorage.setItem("bitvidEvents", JSON.stringify(allEventsObject));
   }
 
   /**
@@ -634,7 +1077,7 @@ class NostrClient {
     sub.on("eose", () => {
       if (isDevMode && invalidDuringSub.length > 0) {
         console.warn(
-          `[subscribeVideos] found ${invalidDuringSub.length} invalid v2 notes:`,
+          `[subscribeVideos] found ${invalidDuringSub.length} invalid video notes (with reasons):`,
           invalidDuringSub
         );
       }
@@ -646,6 +1089,23 @@ class NostrClient {
     });
 
     // Return the subscription object if you need to unsub manually later
+    const originalUnsub =
+      typeof sub.unsub === "function" ? sub.unsub.bind(sub) : () => {};
+    let unsubscribed = false;
+    sub.unsub = () => {
+      if (unsubscribed) {
+        return;
+      }
+      unsubscribed = true;
+      clearInterval(processInterval);
+      try {
+        return originalUnsub();
+      } catch (err) {
+        console.error("[subscribeVideos] Failed to unsub from pool:", err);
+        return undefined;
+      }
+    };
+
     return sub;
   }
 
@@ -701,7 +1161,7 @@ class NostrClient {
       // OPTIONAL: Log invalid stats
       if (invalidNotes.length > 0 && isDevMode) {
         console.warn(
-          `Skipped ${invalidNotes.length} invalid v2 notes:\n`,
+          `Skipped ${invalidNotes.length} invalid video notes:\n`,
           invalidNotes.map((n) => `${n.id.slice(0, 8)}.. => ${n.reason}`)
         );
       }
diff --git a/js/playbackUtils.js b/js/playbackUtils.js
new file mode 100644
index 00000000..53c4c57b
--- /dev/null
+++ b/js/playbackUtils.js
@@ -0,0 +1,102 @@
+// js/playbackUtils.js
+
+import {
+  normalizeAndAugmentMagnet,
+  safeDecodeMagnet,
+} from "./magnetUtils.js";
+
+const HEX_INFO_HASH = /^[0-9a-f]{40}$/i;
+const MAGNET_URI = /^magnet:\?/i;
+
+/**
+ * Normalizes torrent related playback inputs into a canonical magnet payload.
+ *
+ * The function first trims and safely decodes the incoming `magnet` string so
+ * that URL encoded magnets become plain text before processing. Bare info hash
+ * strings are tolerated: whenever the caller supplies an info hash (either via
+ * the `infoHash` field or a magnet that looks like one) it gets promoted to a
+ * full magnet URI so downstream WebTorrent code can consume it directly.
+ *
+ * When the normalized output differs from the original magnet input (for
+ * example due to whitespace/encoding fixes or tracker augmentation) the
+ * original candidate is exposed through `fallbackMagnet`. Callers can surface
+ * that value if a later refactor breaks magnet normalization.
+ *
+ * The returned flags communicate provenance: `provided` indicates that some
+ * torrent-related input was supplied, while `usedInfoHash` is only `true` when
+ * the normalized magnet was derived from an info hash instead of an already
+ * well-formed magnet URI.
+ *
+ * Web seeds coming from the `url` parameter are forwarded to
+ * `normalizeAndAugmentMagnet` via the `webSeed` option. Refactors must preserve
+ * that flow (even if the parameter name changes) so hosted URLs continue to
+ * populate `ws=` hints automatically.
+ */
+export function deriveTorrentPlaybackConfig({
+  magnet = "",
+  infoHash = "",
+  url = "",
+  logger,
+  appProtocol,
+} = {}) {
+  const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+  const decodedMagnet = safeDecodeMagnet(trimmedMagnet);
+  const magnetCandidate = decodedMagnet || trimmedMagnet;
+  const trimmedInfoHash =
+    typeof infoHash === "string" ? infoHash.trim().toLowerCase() : "";
+  const sanitizedUrl = typeof url === "string" ? url.trim() : "";
+
+  const magnetIsUri = MAGNET_URI.test(magnetCandidate);
+  const magnetLooksLikeInfoHash = HEX_INFO_HASH.test(magnetCandidate);
+  const resolvedInfoHash = trimmedInfoHash || (magnetLooksLikeInfoHash
+    ? magnetCandidate.toLowerCase()
+    : "");
+
+  const normalizationInput = magnetIsUri ? magnetCandidate : resolvedInfoHash;
+  const provided = Boolean(trimmedMagnet || trimmedInfoHash);
+  const decodeChanged = magnetCandidate !== trimmedMagnet;
+
+  if (!normalizationInput) {
+    return {
+      magnet: "",
+      fallbackMagnet: "",
+      provided,
+      usedInfoHash: false,
+      originalInput: "",
+      didMutate: false,
+      infoHash: resolvedInfoHash,
+    };
+  }
+
+  const normalization = normalizeAndAugmentMagnet(normalizationInput, {
+    webSeed: sanitizedUrl ? [sanitizedUrl] : [],
+    logger,
+    appProtocol,
+  });
+
+  let normalizedMagnet = normalization.magnet;
+  if (!normalizedMagnet || !MAGNET_URI.test(normalizedMagnet)) {
+    if (magnetIsUri) {
+      normalizedMagnet = normalizationInput;
+    } else if (resolvedInfoHash) {
+      normalizedMagnet = `magnet:?xt=urn:btih:${resolvedInfoHash}`;
+    } else {
+      normalizedMagnet = "";
+    }
+  }
+
+  const usedInfoHash = !magnetIsUri && Boolean(resolvedInfoHash);
+  const fallbackMagnet = magnetIsUri && normalization.didChange
+    ? normalizationInput
+    : "";
+
+  return {
+    magnet: normalizedMagnet,
+    fallbackMagnet,
+    provided,
+    usedInfoHash,
+    originalInput: normalizationInput,
+    didMutate: normalization.didChange || usedInfoHash || decodeChanged,
+    infoHash: resolvedInfoHash,
+  };
+}
diff --git a/js/subscriptions.js b/js/subscriptions.js
index 802c5b02..68b42102 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -1,5 +1,36 @@
 // js/subscriptions.js
-import { nostrClient } from "./nostr.js";
+import {
+  nostrClient,
+  convertEventToVideo as sharedConvertEventToVideo,
+} from "./nostr.js";
+import { attachHealthBadges } from "./gridHealth.js";
+
+function getAbsoluteShareUrl(nevent) {
+  if (!nevent) {
+    return "";
+  }
+
+  if (window.app?.buildShareUrlFromNevent) {
+    const candidate = window.app.buildShareUrlFromNevent(nevent);
+    if (candidate) {
+      return candidate;
+    }
+  }
+
+  const origin = window.location?.origin || "";
+  const pathname = window.location?.pathname || "";
+  let base = origin || pathname ? `${origin}${pathname}` : "";
+  if (!base) {
+    const href = window.location?.href || "";
+    base = href ? href.split(/[?#]/)[0] : "";
+  }
+
+  if (!base) {
+    return `?v=${encodeURIComponent(nevent)}`;
+  }
+
+  return `${base}?v=${encodeURIComponent(nevent)}`;
+}
 
 /**
  * Manages the user's subscription list (kind=30002) *privately*,
@@ -120,6 +151,14 @@ class SubscriptionsManager {
     const plainObj = { subPubkeys: Array.from(this.subscribedPubkeys) };
     const plainStr = JSON.stringify(plainObj);
 
+    /*
+     * The subscription list is stored as a NIP-04 message to self, so both
+     * encryption and decryption intentionally use the user's own pubkey.
+     * Extensions are expected to support this encrypt-to-self flow; altering
+     * the target would break loadSubscriptions, which decrypts with the same
+     * pubkey. Any future sharing model (e.g., sharing with another user) will
+     * need a parallel read path and should not overwrite this behavior.
+     */
     let cipherText = "";
     try {
       cipherText = await window.nostr.nip04.encrypt(userPubkey, plainStr);
@@ -234,7 +273,12 @@ class SubscriptionsManager {
     const container = document.getElementById(containerId);
     if (!container) return;
 
-    if (!videos.length) {
+    const safeVideos = Array.isArray(videos) ? videos : [];
+    const dedupedVideos =
+      window.app?.dedupeVideosByRoot?.(safeVideos) ??
+      this.dedupeToNewestByRoot(safeVideos);
+
+    if (!dedupedVideos.length) {
       container.innerHTML = `
         <p class="flex justify-center items-center h-full w-full text-center text-gray-500">
           No videos available yet.
@@ -243,25 +287,27 @@ class SubscriptionsManager {
     }
 
     // Sort newest first
-    videos.sort((a, b) => b.created_at - a.created_at);
+    dedupedVideos.sort((a, b) => b.created_at - a.created_at);
 
     const fullAllEventsArray = Array.from(nostrClient.allEvents.values());
     const fragment = document.createDocumentFragment();
     // Only declare localAuthorSet once
     const localAuthorSet = new Set();
 
-    videos.forEach((video, index) => {
+    dedupedVideos.forEach((video, index) => {
       if (!video.id || !video.title) {
         console.error("Missing ID or title:", video);
         return;
       }
 
+      // Keep the global videos map up to date so delegated playback handlers
+      // can reuse the already fetched metadata for this event.
+      window.app?.videosMap?.set(video.id, video);
+
       localAuthorSet.add(video.pubkey);
 
       const nevent = window.NostrTools.nip19.neventEncode({ id: video.id });
-      const shareUrl = `${window.location.pathname}?v=${encodeURIComponent(
-        nevent
-      )}`;
+      const shareUrl = getAbsoluteShareUrl(nevent);
       const canEdit = window.app?.pubkey === video.pubkey;
 
       const highlightClass =
@@ -283,6 +329,7 @@ class SubscriptionsManager {
           <button
             class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
             data-revert-index="${index}"
+            data-revert-event-id="${video.id}"
           >
             Revert
           </button>
@@ -311,6 +358,7 @@ class SubscriptionsManager {
                 <button
                   class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
                   data-edit-index="${index}"
+                  data-edit-event-id="${video.id}"
                 >
                   Edit
                 </button>
@@ -318,6 +366,7 @@ class SubscriptionsManager {
                 <button
                   class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
                   data-delete-all-index="${index}"
+                  data-delete-all-event-id="${video.id}"
                 >
                   Delete All
                 </button>
@@ -329,11 +378,43 @@ class SubscriptionsManager {
 
       const safeTitle = window.app?.escapeHTML(video.title) || "Untitled";
       const safeThumb = window.app?.escapeHTML(video.thumbnail) || "";
+      const playbackUrl =
+        typeof video.url === "string" ? video.url : "";
+      const trimmedUrl = playbackUrl ? playbackUrl.trim() : "";
+      const trimmedMagnet =
+        typeof video.magnet === "string" ? video.magnet.trim() : "";
+      const legacyInfoHash =
+        typeof video.infoHash === "string" ? video.infoHash.trim() : "";
+      const magnetCandidate = trimmedMagnet || legacyInfoHash;
+      const playbackMagnet = magnetCandidate;
+      const magnetProvided = magnetCandidate.length > 0;
+      const magnetSupported =
+        window.app?.isMagnetUriSupported?.(magnetCandidate) ?? false;
+      const urlBadgeHtml = trimmedUrl
+        ? window.app?.getUrlHealthPlaceholderMarkup?.({ includeMargin: false }) ??
+          ""
+        : "";
+      const torrentHealthBadgeHtml =
+        magnetProvided && magnetSupported
+          ? window.app?.getTorrentHealthBadgeMarkup?.({
+              includeMargin: false,
+            }) ?? ""
+          : "";
+      const connectionBadgesHtml =
+        urlBadgeHtml || torrentHealthBadgeHtml
+          ? `
+            <div class="mt-3 flex flex-wrap items-center gap-2">
+              ${urlBadgeHtml}${torrentHealthBadgeHtml}
+            </div>
+          `
+          : "";
       const cardHtml = `
         <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass}">
           <a
             href="${shareUrl}"
-            data-play-magnet="${encodeURIComponent(video.magnet)}"
+            data-video-id="${video.id}"
+            data-play-url=""
+            data-play-magnet=""
             class="block cursor-pointer relative group"
           >
             <div class="ratio-16-9">
@@ -347,7 +428,9 @@ class SubscriptionsManager {
           <div class="p-4">
             <h3
               class="text-lg font-bold text-white line-clamp-2 hover:text-blue-400 cursor-pointer mb-3"
-              data-play-magnet="${encodeURIComponent(video.magnet)}"
+              data-video-id="${video.id}"
+              data-play-url=""
+              data-play-magnet=""
             >
               ${safeTitle}
             </h3>
@@ -375,6 +458,7 @@ class SubscriptionsManager {
               </div>
               ${gearMenu}
             </div>
+            ${connectionBadgesHtml}
           </div>
         </div>
       `;
@@ -382,10 +466,52 @@ class SubscriptionsManager {
       const t = document.createElement("template");
       t.innerHTML = cardHtml.trim();
       const cardEl = t.content.firstElementChild;
+      if (cardEl) {
+        // Leave the data-play-* attributes empty in the literal markup so we can
+        // assign the raw URL/magnet strings post-parsing without HTML entity
+        // escaping, mirroring the approach in app.js. The URL is encoded so that
+        // special characters survive storage in data-* attributes; the click
+        // handler decodes it right before playback while keeping the magnet raw.
+        const interactiveEls = cardEl.querySelectorAll("[data-video-id]");
+        interactiveEls.forEach((el) => {
+          if (!el.dataset) return;
+
+          if (trimmedUrl) {
+            el.dataset.playUrl = encodeURIComponent(trimmedUrl);
+          } else {
+            delete el.dataset.playUrl;
+          }
+
+          el.dataset.playMagnet = playbackMagnet || "";
+        });
+
+        if (magnetProvided) {
+          cardEl.dataset.magnet = playbackMagnet;
+        } else if (cardEl.dataset.magnet) {
+          delete cardEl.dataset.magnet;
+        }
+
+        if (trimmedUrl && window.app?.handleUrlHealthBadge) {
+          const badgeEl = cardEl.querySelector("[data-url-health-state]");
+          if (badgeEl) {
+            window.app.handleUrlHealthBadge({
+              video,
+              url: trimmedUrl,
+              badgeEl,
+            });
+          }
+        }
+      }
       fragment.appendChild(cardEl);
     });
 
     container.appendChild(fragment);
+    attachHealthBadges(container);
+
+    if (window.app) {
+      window.app.videoList = container;
+      window.app.attachVideoListHandler?.();
+    }
 
     // Lazy-load
     const lazyEls = container.querySelectorAll("[data-lazy]");
@@ -407,10 +533,15 @@ class SubscriptionsManager {
     editButtons.forEach((btn) => {
       btn.addEventListener("click", (ev) => {
         ev.stopPropagation();
-        const idx = btn.getAttribute("data-edit-index");
-        const dropdown = document.getElementById(`settingsDropdown-${idx}`);
+        const idxAttr = btn.getAttribute("data-edit-index");
+        const idx = Number.parseInt(idxAttr, 10);
+        const dropdown = document.getElementById(`settingsDropdown-${idxAttr}`);
         if (dropdown) dropdown.classList.add("hidden");
-        window.app?.handleEditVideo(idx);
+        const eventId = btn.getAttribute("data-edit-event-id") || "";
+        window.app?.handleEditVideo({
+          eventId,
+          index: Number.isNaN(idx) ? null : idx,
+        });
       });
     });
 
@@ -419,10 +550,15 @@ class SubscriptionsManager {
     revertButtons.forEach((btn) => {
       btn.addEventListener("click", (ev) => {
         ev.stopPropagation();
-        const idx = btn.getAttribute("data-revert-index");
-        const dropdown = document.getElementById(`settingsDropdown-${idx}`);
+        const idxAttr = btn.getAttribute("data-revert-index");
+        const idx = Number.parseInt(idxAttr, 10);
+        const dropdown = document.getElementById(`settingsDropdown-${idxAttr}`);
         if (dropdown) dropdown.classList.add("hidden");
-        window.app?.handleRevertVideo(idx);
+        const eventId = btn.getAttribute("data-revert-event-id") || "";
+        window.app?.handleRevertVideo({
+          eventId,
+          index: Number.isNaN(idx) ? null : idx,
+        });
       });
     });
 
@@ -433,10 +569,15 @@ class SubscriptionsManager {
     deleteAllButtons.forEach((btn) => {
       btn.addEventListener("click", (ev) => {
         ev.stopPropagation();
-        const idx = btn.getAttribute("data-delete-all-index");
-        const dd = document.getElementById(`settingsDropdown-${idx}`);
+        const idxAttr = btn.getAttribute("data-delete-all-index");
+        const idx = Number.parseInt(idxAttr, 10);
+        const dd = document.getElementById(`settingsDropdown-${idxAttr}`);
         if (dd) dd.classList.add("hidden");
-        window.app?.handleFullDeleteVideo(idx);
+        const eventId = btn.getAttribute("data-delete-all-event-id") || "";
+        window.app?.handleFullDeleteVideo({
+          eventId,
+          index: Number.isNaN(idx) ? null : idx,
+        });
       });
     });
 
@@ -480,31 +621,7 @@ class SubscriptionsManager {
   }
 
   convertEventToVideo(evt) {
-    try {
-      const content = JSON.parse(evt.content || "{}");
-      const hasFields = !!(content.title && content.magnet);
-      const versionOk = content.version >= 2;
-      if (!versionOk || !hasFields) {
-        return { id: evt.id, invalid: true };
-      }
-      return {
-        id: evt.id,
-        pubkey: evt.pubkey,
-        created_at: evt.created_at,
-        videoRootId: content.videoRootId || evt.id,
-        version: content.version,
-        deleted: content.deleted === true,
-        isPrivate: content.isPrivate === true,
-        title: content.title || "",
-        magnet: content.magnet || "",
-        thumbnail: content.thumbnail || "",
-        description: content.description || "",
-        tags: evt.tags || [],
-        invalid: false,
-      };
-    } catch (err) {
-      return { id: evt.id, invalid: true };
-    }
+    return sharedConvertEventToVideo(evt);
   }
 
   dedupeToNewestByRoot(videos) {
diff --git a/js/trackerConfig.js b/js/trackerConfig.js
new file mode 100644
index 00000000..9e31870a
--- /dev/null
+++ b/js/trackerConfig.js
@@ -0,0 +1,39 @@
+import { WSS_TRACKERS as DEFAULT_WSS_TRACKERS } from "./constants.js";
+
+export const TRACKER_TIMEOUT_MS = 3000;
+export const TRACKER_PER_MAGNET = 3;
+export const HEALTH_TTL_MS = 2 * 60 * 1000;
+export const CONCURRENCY = 3;
+export const TRACKER_ERROR_COOLDOWN_MS = 60 * 1000;
+
+export function resolveTrackerList({ magnetTrackers } = {}) {
+  const combined = [];
+  const seen = new Set();
+
+  const pushUnique = (url) => {
+    if (typeof url !== "string") {
+      return;
+    }
+    const trimmed = url.trim();
+    if (!trimmed) {
+      return;
+    }
+    if (!/^wss:\/\//i.test(trimmed)) {
+      return;
+    }
+    const normalized = trimmed.toLowerCase();
+    if (seen.has(normalized)) {
+      return;
+    }
+    seen.add(normalized);
+    combined.push(trimmed);
+  };
+
+  if (Array.isArray(magnetTrackers)) {
+    magnetTrackers.forEach(pushUnique);
+  }
+
+  DEFAULT_WSS_TRACKERS.forEach(pushUnique);
+
+  return combined.slice(0, TRACKER_PER_MAGNET);
+}
diff --git a/js/trackerPing.js b/js/trackerPing.js
new file mode 100644
index 00000000..eb85c6ba
--- /dev/null
+++ b/js/trackerPing.js
@@ -0,0 +1,230 @@
+import "./bufferPolyfill.js";
+import Client from "https://esm.sh/bittorrent-tracker@11.0.0/client?bundle";
+import { infoHashFromMagnet, trackersFromMagnet } from "./magnets.js";
+import {
+  resolveTrackerList,
+  TRACKER_TIMEOUT_MS,
+  TRACKER_ERROR_COOLDOWN_MS,
+} from "./trackerConfig.js";
+
+const trackerState = new Map();
+
+function now() {
+  return Date.now();
+}
+
+function randomPeerId() {
+  const bytes = new Uint8Array(20);
+  if (typeof crypto !== "undefined" && crypto.getRandomValues) {
+    crypto.getRandomValues(bytes);
+  } else {
+    for (let i = 0; i < bytes.length; i += 1) {
+      bytes[i] = Math.floor(Math.random() * 256);
+    }
+  }
+  return bytes;
+}
+
+function getDefaultHealth() {
+  return {
+    ok: false,
+    seeders: 0,
+    leechers: 0,
+    responded: false,
+    from: [],
+  };
+}
+
+function getTrackerEntry(url) {
+  const existing = trackerState.get(url);
+  if (existing) {
+    return existing;
+  }
+  const entry = {
+    consecutiveErrors: 0,
+    lastErrorAt: 0,
+    cooldownUntil: 0,
+  };
+  trackerState.set(url, entry);
+  return entry;
+}
+
+function markTrackerSuccess(url) {
+  const entry = getTrackerEntry(url);
+  entry.consecutiveErrors = 0;
+  entry.cooldownUntil = 0;
+}
+
+function markTrackerError(url) {
+  const entry = getTrackerEntry(url);
+  const nowTs = now();
+  if (entry.lastErrorAt && nowTs - entry.lastErrorAt < TRACKER_ERROR_COOLDOWN_MS) {
+    entry.consecutiveErrors += 1;
+  } else {
+    entry.consecutiveErrors = 1;
+  }
+  entry.lastErrorAt = nowTs;
+  if (entry.consecutiveErrors >= 2) {
+    entry.cooldownUntil = nowTs + TRACKER_ERROR_COOLDOWN_MS;
+  }
+}
+
+function isTrackerUsable(url) {
+  const entry = getTrackerEntry(url);
+  return entry.cooldownUntil === 0 || entry.cooldownUntil <= now();
+}
+
+export async function trackerPing(magnet, trackers) {
+  const infoHash = infoHashFromMagnet(magnet);
+  if (!infoHash) {
+    return getDefaultHealth();
+  }
+
+  const magnetTrackers = trackers || trackersFromMagnet(magnet);
+  const announceList = resolveTrackerList({ magnetTrackers });
+  const usable = announceList.filter(isTrackerUsable);
+  const announces = usable.length ? usable : announceList;
+
+  if (!announces.length) {
+    return getDefaultHealth();
+  }
+
+  const peerId = randomPeerId();
+  const result = getDefaultHealth();
+  const clients = new Set();
+  let settled = false;
+  let timeoutId = null;
+
+  const finalize = () => {
+    if (settled) {
+      return;
+    }
+    settled = true;
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    clients.forEach((client) => {
+      try {
+        client.destroy();
+      } catch (err) {
+        // ignore
+      }
+    });
+    clients.clear();
+  };
+
+  return new Promise((resolve) => {
+    if (Number.isFinite(TRACKER_TIMEOUT_MS) && TRACKER_TIMEOUT_MS > 0) {
+      timeoutId = setTimeout(() => {
+        finalize();
+        resolve(result);
+      }, TRACKER_TIMEOUT_MS);
+    }
+
+    let remaining = announces.length;
+
+    const handleComplete = (client, url) => {
+      if (clients.has(client)) {
+        clients.delete(client);
+      }
+      if (url && result.from.includes(url) && result.ok) {
+        markTrackerSuccess(url);
+      }
+      remaining -= 1;
+      if (remaining <= 0 && !settled) {
+        finalize();
+        resolve(result);
+      }
+    };
+
+    const handleResult = (url, data) => {
+      result.responded = true;
+      if (url && !result.from.includes(url)) {
+        result.from.push(url);
+      }
+      const seeders = Number.isFinite(data?.complete)
+        ? Number(data.complete)
+        : 0;
+      const leechers = Number.isFinite(data?.incomplete)
+        ? Number(data.incomplete)
+        : 0;
+      if (seeders > result.seeders) {
+        result.seeders = seeders;
+      }
+      if (leechers > result.leechers) {
+        result.leechers = leechers;
+      }
+      if (seeders > 0) {
+        result.ok = true;
+      }
+    };
+
+    announces.forEach((url) => {
+      let client;
+      try {
+        client = new Client({
+          infoHash,
+          peerId,
+          announce: [url],
+        });
+      } catch (err) {
+        markTrackerError(url);
+        remaining -= 1;
+        if (remaining <= 0 && !settled) {
+          finalize();
+          resolve(result);
+        }
+        return;
+      }
+
+      clients.add(client);
+
+      const cleanupAndResolve = () => {
+        if (settled) {
+          return;
+        }
+        finalize();
+        resolve(result);
+      };
+
+      client.once("update", (data) => {
+        handleResult(url, data);
+        markTrackerSuccess(url);
+        if (result.ok) {
+          cleanupAndResolve();
+          return;
+        }
+        handleComplete(client, url);
+      });
+
+      client.once("error", () => {
+        markTrackerError(url);
+        handleComplete(client, url);
+      });
+
+      client.once("warning", () => {
+        handleComplete(client, url);
+      });
+
+      try {
+        client.start();
+      } catch (err) {
+        markTrackerError(url);
+        handleComplete(client, url);
+      }
+    });
+
+    if (announces.length === 0) {
+      finalize();
+      resolve(result);
+    }
+  });
+}
+
+export function getTrackerStateSnapshot() {
+  const snapshot = {};
+  trackerState.forEach((value, key) => {
+    snapshot[key] = { ...value };
+  });
+  return snapshot;
+}
diff --git a/js/tracking.js b/js/tracking.js
new file mode 100644
index 00000000..f19158c7
--- /dev/null
+++ b/js/tracking.js
@@ -0,0 +1,41 @@
+// js/tracking.js
+// Centralized configuration and loader for the site's analytics script.
+// Update `bitvidTrackingConfig` to change the tracking provider or settings.
+window.bitvidTrackingConfig = window.bitvidTrackingConfig || {
+  src: "https://umami.malin.onl/script.js",
+  websiteId: "1f8eead2-79f0-4dba-8c3b-ed9b08b6e877",
+};
+
+(function loadTrackingScript(config) {
+  if (!config || !config.src) {
+    return;
+  }
+
+  if (document.querySelector(`script[src="${config.src}"]`)) {
+    return;
+  }
+
+  const script = document.createElement("script");
+  script.src = config.src;
+  script.defer = true;
+
+  if (config.websiteId) {
+    script.setAttribute("data-website-id", config.websiteId);
+  }
+
+  const additionalAttributes = config.attributes || {};
+  Object.entries(additionalAttributes).forEach(([key, value]) => {
+    if (key === "defer") {
+      script.defer = Boolean(value);
+      return;
+    }
+
+    if (value === false || value === null || typeof value === "undefined") {
+      return;
+    }
+
+    script.setAttribute(key, value);
+  });
+
+  document.head.appendChild(script);
+})(window.bitvidTrackingConfig);
diff --git a/js/videoEventUtils.js b/js/videoEventUtils.js
new file mode 100644
index 00000000..acf48f63
--- /dev/null
+++ b/js/videoEventUtils.js
@@ -0,0 +1,292 @@
+// js/videoEventUtils.js
+
+/**
+ * Extracts normalized fields from a Bitvid video event while
+ * tolerating legacy payloads that may omit version >= 2 metadata.
+ */
+const MAGNET_URI_PATTERN = /^magnet:\?/i;
+const HEX_INFO_HASH_PATTERN = /\b[0-9a-f]{40}\b/gi;
+const LEGACY_MAGNET_PATTERN = /magnet:\?xt=urn:btih:[0-9a-z]{40,}[^\s"'<>]*/i;
+
+function safeTrim(value) {
+  return typeof value === "string" ? value.trim() : "";
+}
+
+function pickFirstString(values = []) {
+  if (!Array.isArray(values)) {
+    return "";
+  }
+
+  for (const value of values) {
+    const trimmed = safeTrim(value);
+    if (trimmed) {
+      return trimmed;
+    }
+  }
+
+  return "";
+}
+
+export function deriveTitleFromEvent({
+  parsedContent = {},
+  tags = [],
+  primaryTitle = "",
+} = {}) {
+  const initial = safeTrim(primaryTitle);
+  if (initial) {
+    return initial;
+  }
+
+  const directCandidates = pickFirstString([
+    parsedContent?.title,
+    parsedContent?.name,
+    parsedContent?.filename,
+    parsedContent?.fileName,
+    parsedContent?.subject,
+    parsedContent?.caption,
+  ]);
+  if (directCandidates) {
+    return directCandidates;
+  }
+
+  const metaTitle = safeTrim(parsedContent?.meta?.title);
+  if (metaTitle) {
+    return metaTitle;
+  }
+
+  if (Array.isArray(tags)) {
+    for (const tag of tags) {
+      if (!Array.isArray(tag) || tag.length < 2) {
+        continue;
+      }
+      const key = safeTrim(tag[0]).toLowerCase();
+      if (!key) {
+        continue;
+      }
+      if (["title", "subject", "caption", "name"].includes(key)) {
+        const candidate = safeTrim(tag[1]);
+        if (candidate) {
+          return candidate;
+        }
+      }
+    }
+  }
+
+  return "";
+}
+
+function extractInfoHashesFromString(value, pushInfoHash) {
+  if (typeof value !== "string") {
+    return;
+  }
+
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return;
+  }
+
+  const matches = trimmed.match(HEX_INFO_HASH_PATTERN);
+  if (!matches) {
+    return;
+  }
+
+  for (const match of matches) {
+    const normalized = match.toLowerCase();
+    pushInfoHash(normalized);
+  }
+}
+
+function traverseForInfoHashes(value, pushInfoHash) {
+  if (!value) {
+    return;
+  }
+  if (typeof value === "string") {
+    extractInfoHashesFromString(value, pushInfoHash);
+    return;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      traverseForInfoHashes(item, pushInfoHash);
+    }
+    return;
+  }
+  if (typeof value === "object") {
+    for (const nested of Object.values(value)) {
+      traverseForInfoHashes(nested, pushInfoHash);
+    }
+  }
+}
+
+export function parseVideoEventPayload(event = {}) {
+  const rawContent = typeof event.content === "string" ? event.content : "";
+
+  let parsedContent = {};
+  let parseError = null;
+  if (rawContent) {
+    try {
+      const parsed = JSON.parse(rawContent);
+      if (parsed && typeof parsed === "object") {
+        parsedContent = parsed;
+      }
+    } catch (err) {
+      parseError = err;
+      parsedContent = {};
+    }
+  }
+
+  const title = typeof parsedContent.title === "string"
+    ? parsedContent.title.trim()
+    : "";
+  const thumbnail = typeof parsedContent.thumbnail === "string"
+    ? parsedContent.thumbnail.trim()
+    : "";
+
+  const magnetCandidates = [];
+  const infoHashCandidates = [];
+  const urlCandidates = [];
+
+  const pushUnique = (arr, value) => {
+    if (!value || typeof value !== "string") return;
+    const trimmed = value.trim();
+    if (!trimmed || arr.includes(trimmed)) return;
+    arr.push(trimmed);
+  };
+
+  const pushInfoHash = (candidate) => {
+    if (!candidate) return;
+    const normalized = candidate.toLowerCase();
+    if (!/^[0-9a-f]{40}$/.test(normalized)) {
+      return;
+    }
+    if (infoHashCandidates.includes(normalized)) {
+      return;
+    }
+    infoHashCandidates.push(normalized);
+  };
+
+  const collectMagnetOrInfoHash = (value) => {
+    if (typeof value !== "string") {
+      return;
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return;
+    }
+
+    if (MAGNET_URI_PATTERN.test(trimmed)) {
+      pushUnique(magnetCandidates, trimmed);
+    }
+
+    extractInfoHashesFromString(trimmed, pushInfoHash);
+
+    const urnMatch = trimmed.match(/^urn:btih:([0-9a-z]+)$/i);
+    if (urnMatch) {
+      pushInfoHash(urnMatch[1]);
+    }
+  };
+
+  if (typeof parsedContent.magnet === "string") {
+    collectMagnetOrInfoHash(parsedContent.magnet);
+  }
+  if (typeof parsedContent.url === "string") {
+    const parsedUrl = parsedContent.url.trim();
+    if (parsedUrl && parsedUrl !== thumbnail) {
+      // Keep this guard so we don't duplicate thumbnail URLs in the playable URL list.
+      pushUnique(urlCandidates, parsedUrl);
+    }
+    // Legacy Bitvid events sometimes embedded magnets/info-hashes in the URL field, so treat it accordingly.
+    collectMagnetOrInfoHash(parsedUrl);
+  }
+
+  const tags = Array.isArray(event.tags) ? event.tags : [];
+  const urlTagKeys = new Set(["r", "url", "u"]);
+  for (const tag of tags) {
+    if (!Array.isArray(tag) || tag.length < 2) continue;
+    const key = typeof tag[0] === "string" ? tag[0] : "";
+    const value = typeof tag[1] === "string" ? tag[1] : "";
+    if (!value) continue;
+
+    if (value.toLowerCase().startsWith("magnet:")) {
+      collectMagnetOrInfoHash(value);
+      continue;
+    }
+
+    if (urlTagKeys.has(key) && /^https?:\/\//i.test(value)) {
+      pushUnique(urlCandidates, value);
+    }
+
+    collectMagnetOrInfoHash(value);
+  }
+
+  const magnetMatch = rawContent.match(/magnet:\?xt=urn:[^"'\s<>]+/i);
+  if (magnetMatch) {
+    collectMagnetOrInfoHash(magnetMatch[0]);
+  }
+
+  extractInfoHashesFromString(rawContent, pushInfoHash);
+  traverseForInfoHashes(parsedContent, pushInfoHash);
+
+  const magnet = magnetCandidates.find(Boolean) || "";
+  const infoHash = infoHashCandidates.find(Boolean) || "";
+  const url =
+    urlCandidates.find(
+      (candidate) => candidate && !candidate.toLowerCase().startsWith("magnet:")
+    ) || "";
+
+  const rawVersion = parsedContent.version;
+  let version = 0;
+  if (typeof rawVersion === "number" && Number.isFinite(rawVersion)) {
+    version = rawVersion;
+  } else if (typeof rawVersion === "string") {
+    const parsedVersion = Number(rawVersion);
+    if (!Number.isNaN(parsedVersion)) {
+      version = parsedVersion;
+    }
+  }
+
+  return {
+    parsedContent,
+    parseError,
+    title,
+    url,
+    magnet,
+    infoHash,
+    version,
+  };
+}
+
+export function magnetFromText(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+  const match = value.match(LEGACY_MAGNET_PATTERN);
+  return match ? match[0] : "";
+}
+
+export function findLegacyMagnetInEvent(event = {}) {
+  const fromContent = magnetFromText(event?.content);
+  if (fromContent) {
+    return fromContent.trim();
+  }
+
+  const tags = Array.isArray(event?.tags) ? event.tags : [];
+  for (const tag of tags) {
+    if (!Array.isArray(tag) || tag.length < 2) {
+      continue;
+    }
+    const key = typeof tag[0] === "string" ? tag[0].trim().toLowerCase() : "";
+    const value = typeof tag[1] === "string" ? tag[1].trim() : "";
+    if (!value) {
+      continue;
+    }
+    if (key === "magnet" && value) {
+      return value;
+    }
+    const fromTag = magnetFromText(value);
+    if (fromTag) {
+      return fromTag.trim();
+    }
+  }
+
+  return "";
+}
diff --git a/js/viewManager.js b/js/viewManager.js
index 2589e46d..f22746c7 100644
--- a/js/viewManager.js
+++ b/js/viewManager.js
@@ -2,6 +2,8 @@
 import { initChannelProfileView } from "./channelProfile.js";
 import { subscriptions } from "./subscriptions.js";
 
+const TRACKING_SCRIPT_PATTERN = /(?:^|\/)tracking\.js(?:$|\?)/;
+
 /**
  * Load a partial view by URL into the #viewContainer.
  */
@@ -23,6 +25,10 @@ export async function loadView(viewUrl) {
     // Copy and execute any inline scripts
     const scriptTags = doc.querySelectorAll("script");
     scriptTags.forEach((oldScript) => {
+      const src = oldScript.getAttribute("src") || "";
+      if (src && TRACKING_SCRIPT_PATTERN.test(src)) {
+        return;
+      }
       const newScript = document.createElement("script");
       Array.from(oldScript.attributes).forEach((attr) => {
         newScript.setAttribute(attr.name, attr.value);
@@ -44,6 +50,9 @@ export const viewInitRegistry = {
   "most-recent-videos": () => {
     if (window.app && window.app.loadVideos) {
       window.app.videoList = document.getElementById("videoList");
+      if (window.app.attachVideoListHandler) {
+        window.app.attachVideoListHandler();
+      }
       window.app.loadVideos();
     }
     // Force profile updates after the new view is in place.
diff --git a/js/webtorrent.js b/js/webtorrent.js
index 65b8ea80..ee8aac8b 100644
--- a/js/webtorrent.js
+++ b/js/webtorrent.js
@@ -2,11 +2,145 @@
 
 import WebTorrent from "./webtorrent.min.js";
 
+const DEFAULT_PROBE_TRACKERS = Object.freeze([
+  "wss://tracker.btorrent.xyz",
+  "wss://tracker.openwebtorrent.com",
+]);
+
+function decodeComponentSafe(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+  try {
+    return decodeURIComponent(value);
+  } catch (err) {
+    return value;
+  }
+}
+
+function normalizeTrackerList(trackers) {
+  const normalized = [];
+  const seen = new Set();
+  if (!Array.isArray(trackers)) {
+    return normalized;
+  }
+  trackers.forEach((tracker) => {
+    if (typeof tracker !== "string") {
+      return;
+    }
+    const trimmed = tracker.trim();
+    if (!trimmed || !/^wss:\/\//i.test(trimmed)) {
+      return;
+    }
+    const lower = trimmed.toLowerCase();
+    if (seen.has(lower)) {
+      return;
+    }
+    seen.add(lower);
+    normalized.push(trimmed);
+  });
+  return normalized;
+}
+
+function appendProbeTrackers(magnetURI, trackers) {
+  if (typeof magnetURI !== "string") {
+    return { magnet: "", appended: false, hasProbeTrackers: false };
+  }
+
+  const trimmedMagnet = magnetURI.trim();
+  if (!trimmedMagnet) {
+    return { magnet: "", appended: false, hasProbeTrackers: false };
+  }
+
+  const probeTrackers = normalizeTrackerList(trackers);
+  if (!probeTrackers.length) {
+    return {
+      magnet: trimmedMagnet,
+      appended: false,
+      hasProbeTrackers: false,
+    };
+  }
+
+  const trackerSet = new Set();
+  const [withoutFragment, fragment = ""] = trimmedMagnet.split("#", 2);
+  const [, queryPart = ""] = withoutFragment.split("?", 2);
+
+  if (queryPart) {
+    queryPart
+      .split("&")
+      .map((segment) => segment.trim())
+      .filter(Boolean)
+      .forEach((segment) => {
+        const [rawKey, rawValue = ""] = segment.split("=", 2);
+        if (!rawKey || rawKey.trim().toLowerCase() !== "tr") {
+          return;
+        }
+        const decoded = decodeComponentSafe(rawValue).trim().toLowerCase();
+        if (decoded) {
+          trackerSet.add(decoded);
+        }
+      });
+  }
+
+  const normalizedProbe = probeTrackers.map((url) => url.toLowerCase());
+  const hadProbeTracker = normalizedProbe.some((url) => trackerSet.has(url));
+
+  const toAppend = [];
+  probeTrackers.forEach((tracker, index) => {
+    const normalizedTracker = normalizedProbe[index];
+    if (trackerSet.has(normalizedTracker)) {
+      return;
+    }
+    trackerSet.add(normalizedTracker);
+    toAppend.push(`tr=${encodeURIComponent(tracker)}`);
+  });
+
+  if (!toAppend.length) {
+    return {
+      magnet: trimmedMagnet,
+      appended: false,
+      hasProbeTrackers: hadProbeTracker,
+    };
+  }
+
+  const separator = queryPart ? "&" : "?";
+  const augmented = `${withoutFragment}${separator}${toAppend.join("&")}`;
+  const finalMagnet = fragment
+    ? `${augmented}#${fragment}`
+    : augmented;
+
+  return {
+    magnet: finalMagnet,
+    appended: true,
+    hasProbeTrackers: true,
+  };
+}
+
+function normalizeNumber(value, fallback = 0) {
+  const coerced = Number(value);
+  if (Number.isFinite(coerced)) {
+    return coerced;
+  }
+  return fallback;
+}
+
+function toError(err) {
+  if (err instanceof Error) {
+    return err;
+  }
+  try {
+    return new Error(String(err));
+  } catch (stringifyError) {
+    return new Error("Unknown error");
+  }
+}
+
 export class TorrentClient {
   constructor() {
     // Reusable objects and flags
     this.client = null;
     this.currentTorrent = null;
+    this.probeClient = null;
 
     // Service worker registration is cached
     this.swRegistration = null;
@@ -16,6 +150,155 @@ export class TorrentClient {
     this.TIMEOUT_DURATION = 60000;
   }
 
+  ensureClientForProbe() {
+    if (!this.probeClient) {
+      this.probeClient = new WebTorrent();
+    }
+    return this.probeClient;
+  }
+
+  async probePeers(
+    magnetURI,
+    { timeoutMs = 8000, maxWebConns = 2, polls = 3 } = {}
+  ) {
+    const magnet = typeof magnetURI === "string" ? magnetURI.trim() : "";
+    if (!magnet) {
+      return {
+        healthy: false,
+        peers: 0,
+        reason: "invalid",
+        appendedTrackers: false,
+        hasProbeTrackers: false,
+        usedTrackers: [...TorrentClient.PROBE_TRACKERS],
+        durationMs: 0,
+      };
+    }
+
+    const trackers = normalizeTrackerList(TorrentClient.PROBE_TRACKERS);
+    const { magnet: augmentedMagnet, appended, hasProbeTrackers } =
+      appendProbeTrackers(magnet, trackers);
+
+    if (!hasProbeTrackers) {
+      return {
+        healthy: false,
+        peers: 0,
+        reason: "no-trackers",
+        appendedTrackers: false,
+        hasProbeTrackers: false,
+        usedTrackers: trackers,
+        durationMs: 0,
+      };
+    }
+
+    const client = this.ensureClientForProbe();
+    const safeTimeout = Math.max(0, normalizeNumber(timeoutMs, 8000));
+    const safePolls = Math.max(1, Math.floor(normalizeNumber(polls, 3)));
+    const safeMaxWebConns = Math.max(1, Math.floor(normalizeNumber(maxWebConns, 2)));
+    const pollInterval = Math.max(
+      250,
+      Math.floor(safeTimeout / Math.max(1, safePolls))
+    );
+
+    const startedAt =
+      typeof performance !== "undefined" && performance?.now
+        ? performance.now()
+        : Date.now();
+
+    return new Promise((resolve) => {
+      let settled = false;
+      let torrent = null;
+      let timeoutId = null;
+      let pollId = null;
+
+      const finalize = (overrides = {}) => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+          timeoutId = null;
+        }
+        if (pollId) {
+          clearInterval(pollId);
+          pollId = null;
+        }
+        if (torrent) {
+          try {
+            torrent.destroy({ destroyStore: true });
+          } catch (err) {
+            // ignore
+          }
+        }
+
+        const endedAt =
+          typeof performance !== "undefined" && performance?.now
+            ? performance.now()
+            : Date.now();
+
+        resolve({
+          healthy: false,
+          peers: 0,
+          reason: "timeout",
+          appendedTrackers: appended,
+          hasProbeTrackers,
+          usedTrackers: trackers,
+          durationMs: Math.max(0, endedAt - startedAt),
+          ...overrides,
+        });
+      };
+
+      try {
+        torrent = client.add(augmentedMagnet, {
+          announce: trackers,
+          maxWebConns: safeMaxWebConns,
+        });
+      } catch (err) {
+        finalize({
+          reason: "error",
+          error: toError(err),
+          peers: 0,
+        });
+        return;
+      }
+
+      const settleHealthy = () => {
+        const peers = Math.max(1, Math.floor(normalizeNumber(torrent?.numPeers, 1)));
+        finalize({ healthy: true, peers, reason: "peer" });
+      };
+
+      torrent.once("wire", settleHealthy);
+
+      torrent.once("error", (err) => {
+        finalize({
+          healthy: false,
+          reason: "error",
+          error: toError(err),
+          peers: Math.max(0, Math.floor(normalizeNumber(torrent?.numPeers, 0))),
+        });
+      });
+
+      if (safeTimeout > 0) {
+        timeoutId = setTimeout(() => {
+          finalize({
+            healthy: false,
+            peers: Math.max(0, Math.floor(normalizeNumber(torrent?.numPeers, 0))),
+          });
+        }, safeTimeout);
+      }
+
+      pollId = setInterval(() => {
+        if (!torrent || settled) {
+          return;
+        }
+        const peers = Math.max(0, Math.floor(normalizeNumber(torrent.numPeers, 0)));
+        if (peers > 0) {
+          finalize({ healthy: true, peers, reason: "peer" });
+        }
+      }, pollInterval);
+    });
+  }
+
   log(msg) {
     console.log(msg);
   }
@@ -43,6 +326,13 @@ export class TorrentClient {
     // 2) If we haven’t registered the service worker yet, do it now
     if (!this.swRegistration) {
       this.swRegistration = await this.setupServiceWorker();
+    } else {
+      // Even with an existing registration we still wait for control so that a
+      // transient controller drop (e.g. Chrome devtools unregister/reload) does
+      // not resurrect the grey-screen regression mentioned in
+      // waitForActiveController().
+      this.requestClientsClaim(this.swRegistration);
+      await this.waitForActiveController(this.swRegistration);
     }
   }
 
@@ -81,6 +371,117 @@ export class TorrentClient {
     });
   }
 
+  /**
+   * Ensure a live service worker is actively controlling the page before we
+   * start WebTorrent streaming.
+   *
+   * This regression has bitten us repeatedly: the first playback attempt after
+   * a cold load would get stuck on a grey frame because `navigator.serviceWorker`
+   * had finished installing but never claimed the page yet. WebTorrent's
+   * service-worker proxy never attached, so `file.streamTo(videoElement)` fed
+   * data into the void. Refreshing the page “fixed” it because the worker became
+   * the controller during navigation. Future refactors **must not** remove this
+   * guard — wait for `controllerchange` whenever `controller` is still null.
+   */
+  requestClientsClaim(registration = this.swRegistration) {
+    if (!("serviceWorker" in navigator)) {
+      return;
+    }
+
+    try {
+      const activeWorker = registration?.active;
+      if (!activeWorker) {
+        return;
+      }
+
+      // Some Chromium builds require an explicit startMessages() call before a
+      // yet-to-claim worker will accept postMessage traffic. Calling it is a
+      // harmless no-op elsewhere.
+      if (navigator.serviceWorker.startMessages) {
+        navigator.serviceWorker.startMessages();
+      }
+
+      activeWorker.postMessage({ type: "ENSURE_CLIENTS_CLAIM" });
+    } catch (err) {
+      this.log("Failed to request clients.claim():", err);
+    }
+  }
+
+  async waitForActiveController(registration = this.swRegistration) {
+    if (!("serviceWorker" in navigator)) {
+      return null;
+    }
+
+    if (navigator.serviceWorker.controller) {
+      return navigator.serviceWorker.controller;
+    }
+
+    this.requestClientsClaim(registration);
+
+    return new Promise((resolve, reject) => {
+      let timeoutId = null;
+      let pollId = null;
+
+      const cleanup = () => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+          timeoutId = null;
+        }
+        if (pollId) {
+          clearInterval(pollId);
+          pollId = null;
+        }
+        navigator.serviceWorker.removeEventListener(
+          "controllerchange",
+          onControllerChange
+        );
+      };
+
+      const maybeResolve = () => {
+        const controller = navigator.serviceWorker.controller;
+        if (controller) {
+          cleanup();
+          resolve(controller);
+          return true;
+        }
+        return false;
+      };
+
+      const onControllerChange = () => {
+        if (maybeResolve()) {
+          return;
+        }
+        // If we received a controllerchange event but still don't have a
+        // controller it usually means the new worker hasn't claimed this page
+        // yet. Ask it again to be safe.
+        this.requestClientsClaim(registration);
+      };
+
+      timeoutId = setTimeout(() => {
+        cleanup();
+        reject(new Error("Service worker controller claim timeout"));
+      }, this.TIMEOUT_DURATION);
+
+      pollId = setInterval(() => {
+        if (maybeResolve()) {
+          return;
+        }
+        this.requestClientsClaim(registration);
+      }, 500);
+
+      navigator.serviceWorker.addEventListener(
+        "controllerchange",
+        onControllerChange
+      );
+
+      // One last check in case the controller appeared between the earlier
+      // synchronous guard and the promise wiring above.
+      if (!maybeResolve()) {
+        this.requestClientsClaim(registration);
+      }
+    });
+  }
+
   async setupServiceWorker() {
     try {
       const isBraveBrowser = await this.isBrave();
@@ -92,7 +493,15 @@ export class TorrentClient {
         throw new Error("Service Worker not supported or disabled");
       }
 
-      // Brave-specific logic
+      // Brave-specific logic: Brave Shields has a long-standing bug where
+      // stale service worker registrations linger even after we ship fixes.
+      // When that happens, the outdated worker keeps intercepting requests
+      // and WebTorrent fails to spin up, leaving playback broken until the
+      // user manually nukes the registration. To guarantee a clean slate we
+      // blanket-unregister every worker, then pause briefly so Brave can
+      // finish tearing down the old instance before we register the fresh
+      // one again. That delay is intentional—future tweaks should not shorten
+      // or remove it without understanding the regression risk.
       if (isBraveBrowser) {
         this.log("Checking Brave configuration...");
         if (!navigator.serviceWorker) {
@@ -160,6 +569,16 @@ export class TorrentClient {
         throw new Error("Service worker not active after ready state");
       }
 
+      // Give the newly activated worker an explicit nudge to claim the page
+      // before we continue. This keeps Chromium's occasionally sluggish claim
+      // hand-offs from derailing the subsequent wait below.
+      this.requestClientsClaim(registration);
+
+      // See waitForActiveController() docstring for why this must remain in
+      // place. We intentionally wait here instead of racing with playback so a
+      // newly installed worker claims the page before WebTorrent spins up.
+      await this.waitForActiveController(registration);
+
       // Force the SW to check for updates
       registration.update();
       this.log("Service worker ready");
@@ -171,8 +590,30 @@ export class TorrentClient {
     }
   }
 
+  attemptAutoplay(videoElement, context = "webtorrent") {
+    if (!videoElement || typeof videoElement.play !== "function") {
+      return;
+    }
+
+    videoElement
+      .play()
+      .catch((err) => {
+        this.log(`Autoplay failed (${context} path):`, err);
+        if (videoElement.muted) {
+          return;
+        }
+        this.log(`Retrying with muted autoplay (${context} path).`);
+        videoElement.muted = true;
+        videoElement.play().catch((err2) => {
+          this.log(`Muted autoplay also failed (${context} path):`, err2);
+        });
+      });
+  }
+
   // Handle Chrome-based browsers
   handleChromeTorrent(torrent, videoElement, resolve, reject) {
+    // Prune demo web seeds/trackers that chronically trip Chromium CORS and
+    // deliberately mutate `torrent._opts` as a sanctioned WebTorrent workaround.
     torrent.on("warning", (err) => {
       if (err && typeof err.message === "string") {
         if (
@@ -203,18 +644,20 @@ export class TorrentClient {
       return reject(new Error("No compatible video file found in torrent"));
     }
 
-    videoElement.muted = true;
+    // Satisfy autoplay requirements and keep cross-origin chunks usable (e.g., for snapshots).
     videoElement.crossOrigin = "anonymous";
 
     videoElement.addEventListener("error", (e) => {
       this.log("Video error:", e.target.error);
     });
 
-    videoElement.addEventListener("canplay", () => {
-      videoElement.play().catch((err) => {
-        this.log("Autoplay failed:", err);
-      });
-    });
+    videoElement.addEventListener(
+      "canplay",
+      () => {
+        this.attemptAutoplay(videoElement, "chrome");
+      },
+      { once: true }
+    );
 
     try {
       file.streamTo(videoElement);
@@ -240,18 +683,20 @@ export class TorrentClient {
       return reject(new Error("No compatible video file found in torrent"));
     }
 
-    videoElement.muted = true;
+    // Satisfy autoplay requirements and keep cross-origin chunks usable (e.g., for snapshots).
     videoElement.crossOrigin = "anonymous";
 
     videoElement.addEventListener("error", (e) => {
       this.log("Video error (Firefox path):", e.target.error);
     });
 
-    videoElement.addEventListener("canplay", () => {
-      videoElement.play().catch((err) => {
-        this.log("Autoplay failed:", err);
-      });
-    });
+    videoElement.addEventListener(
+      "canplay",
+      () => {
+        this.attemptAutoplay(videoElement, "firefox");
+      },
+      { once: true }
+    );
 
     try {
       file.streamTo(videoElement, { highWaterMark: 256 * 1024 });
@@ -272,7 +717,7 @@ export class TorrentClient {
    * Initiates streaming of a torrent magnet to a <video> element.
    * Ensures the service worker is set up only once and the client is reused.
    */
-  async streamVideo(magnetURI, videoElement) {
+  async streamVideo(magnetURI, videoElement, opts = {}) {
     try {
       // 1) Make sure we have a WebTorrent client and a valid SW registration.
       await this.init();
@@ -288,6 +733,16 @@ export class TorrentClient {
       }
 
       const isFirefoxBrowser = this.isFirefox();
+      const candidateUrls = Array.isArray(opts?.urlList)
+        ? opts.urlList
+            .map((entry) => (typeof entry === "string" ? entry.trim() : ""))
+            .filter((entry) => /^https?:\/\//i.test(entry))
+        : [];
+
+      const chromeOptions = { strategy: "sequential" };
+      if (candidateUrls.length) {
+        chromeOptions.urlList = candidateUrls;
+      }
 
       return new Promise((resolve, reject) => {
         // 3) Add the torrent to the client and handle accordingly.
@@ -295,7 +750,7 @@ export class TorrentClient {
           this.log("Starting torrent download (Firefox path)");
           this.client.add(
             magnetURI,
-            { strategy: "sequential", maxWebConns: 4 },
+            { ...chromeOptions, maxWebConns: 4 },
             (torrent) => {
               this.log("Torrent added (Firefox path):", torrent.name);
               this.handleFirefoxTorrent(torrent, videoElement, resolve, reject);
@@ -303,7 +758,7 @@ export class TorrentClient {
           );
         } else {
           this.log("Starting torrent download (Chrome path)");
-          this.client.add(magnetURI, { strategy: "sequential" }, (torrent) => {
+          this.client.add(magnetURI, chromeOptions, (torrent) => {
             this.log("Torrent added (Chrome path):", torrent.name);
             this.handleChromeTorrent(torrent, videoElement, resolve, reject);
           });
@@ -330,6 +785,10 @@ export class TorrentClient {
         await this.client.destroy();
         this.client = null;
       }
+      if (this.probeClient) {
+        await this.probeClient.destroy();
+        this.probeClient = null;
+      }
       this.currentTorrent = null;
       this.serverCreated = false;
     } catch (error) {
@@ -338,4 +797,6 @@ export class TorrentClient {
   }
 }
 
+TorrentClient.PROBE_TRACKERS = DEFAULT_PROBE_TRACKERS;
+
 export const torrentClient = new TorrentClient();
diff --git a/sw.min.js b/sw.min.js
index 4acb34e5..de8c8651 100644
--- a/sw.min.js
+++ b/sw.min.js
@@ -15,6 +15,9 @@
           Promise.all(cacheNames.map((cacheName) => caches.delete(cacheName)))
         );
     }
+    if (event.data && event.data.type === "ENSURE_CLIENTS_CLAIM") {
+      event.waitUntil(clients.claim());
+    }
   });
 
   // Immediately install and skip waiting
diff --git a/tests/legacy-infohash.test.mjs b/tests/legacy-infohash.test.mjs
new file mode 100644
index 00000000..b6beeace
--- /dev/null
+++ b/tests/legacy-infohash.test.mjs
@@ -0,0 +1,136 @@
+import "./test-helpers/setup-localstorage.mjs";
+import assert from "node:assert/strict";
+import { parseVideoEventPayload } from "../js/videoEventUtils.js";
+import { convertEventToVideo } from "../js/nostr.js";
+import { deriveTorrentPlaybackConfig } from "../js/playbackUtils.js";
+
+const LEGACY_INFO_HASH = "0123456789abcdef0123456789abcdef01234567";
+
+(function testParseDetectsBareInfoHashInJson() {
+  const event = {
+    id: "evt-json",
+    content: JSON.stringify({
+      version: 1,
+      title: "Legacy note",
+      magnet: LEGACY_INFO_HASH,
+    }),
+    tags: [],
+  };
+
+  const parsed = parseVideoEventPayload(event);
+  assert.equal(parsed.magnet, "", "Bare info hash should not be treated as a magnet URI");
+  assert.equal(parsed.infoHash, LEGACY_INFO_HASH);
+})();
+
+(function testParseDetectsInfoHashInRawContentAndTags() {
+  const event = {
+    id: "evt-tag",
+    content: JSON.stringify({ title: "tag-sourced" }),
+    tags: [["magnet", LEGACY_INFO_HASH]],
+  };
+
+  const parsed = parseVideoEventPayload(event);
+  assert.equal(parsed.infoHash, LEGACY_INFO_HASH);
+})();
+
+(function testParseDetectsInfoHashInRawString() {
+  const event = {
+    id: "evt-raw",
+    content: `legacy magnet ${LEGACY_INFO_HASH} broken json`,
+    tags: [],
+  };
+
+  const parsed = parseVideoEventPayload(event);
+  assert.equal(parsed.infoHash, LEGACY_INFO_HASH);
+})();
+
+(function testConvertFlagsBareInfoHashAsInvalid() {
+  const event = {
+    id: "evt-convert",
+    pubkey: "pk",
+    created_at: 1,
+    tags: [],
+    content: JSON.stringify({
+      version: 1,
+      title: "Legacy conversion",
+      magnet: LEGACY_INFO_HASH,
+    }),
+  };
+
+  const video = convertEventToVideo(event);
+  assert.equal(video.invalid, true, "Bare info-hash payloads should be flagged");
+  assert.equal(video.reason, "missing playable source");
+})();
+
+(function testLegacyEventWithoutTitleStillLoads() {
+  const event = {
+    id: "evt-no-title",
+    pubkey: "pk2",
+    created_at: 2,
+    tags: [],
+    content: JSON.stringify({
+      version: 1,
+      magnet: `magnet:?xt=urn:btih:${LEGACY_INFO_HASH}`,
+    }),
+  };
+
+  const video = convertEventToVideo(event);
+  assert.equal(video.invalid, false, "Legacy events without title should fallback");
+  assert.ok(video.title && video.title.length > 0, "Fallback title should be provided");
+})();
+
+(function testConvertRecoversMagnetFromMagnetTag() {
+  const magnetUri =
+    `magnet:?xt=urn:btih:${LEGACY_INFO_HASH}&dn=legacy-tag&tr=wss://tracker.openwebtorrent.com`;
+  const event = {
+    id: "evt-magnet-tag",
+    pubkey: "pk3",
+    created_at: 3,
+    // Deliberately invalid JSON so the converter must rely on scavenging.
+    content: "{not valid json}",
+    tags: [["magnet", magnetUri]],
+  };
+
+  const video = convertEventToVideo(event);
+  assert.equal(video.invalid, false, "Magnet in tag should still be playable");
+  assert.equal(video.magnet, magnetUri);
+  assert.equal(video.rawMagnet, magnetUri);
+})();
+
+(function testPlaybackConfigNormalizesInfoHash() {
+  const result = deriveTorrentPlaybackConfig({
+    magnet: "",
+    infoHash: LEGACY_INFO_HASH,
+    url: "",
+  });
+
+  assert.ok(result.magnet.startsWith("magnet:?"));
+  const xtValues = new URL(result.magnet).searchParams.getAll("xt");
+  assert.deepEqual(xtValues, [`urn:btih:${LEGACY_INFO_HASH}`]);
+  assert.equal(result.usedInfoHash, true);
+  assert.equal(result.fallbackMagnet, "");
+  assert.equal(result.provided, true);
+})();
+
+(function testPlaybackConfigDecodesEncodedMagnet() {
+  const rawMagnet =
+    `magnet:?xt=urn:btih:${LEGACY_INFO_HASH}&dn=Legacy+Example`;
+  const encodedMagnet = encodeURIComponent(rawMagnet);
+  const result = deriveTorrentPlaybackConfig({
+    magnet: encodedMagnet,
+    infoHash: "",
+    url: "",
+  });
+
+  assert.ok(result.magnet.startsWith("magnet:?"));
+  const parsed = new URL(result.magnet);
+  assert.equal(
+    parsed.searchParams.get("xt"),
+    `urn:btih:${LEGACY_INFO_HASH}`,
+    "Expected encoded magnet to be normalized"
+  );
+  assert.equal(result.provided, true);
+  assert.equal(result.usedInfoHash, false);
+})();
+
+console.log("legacy infohash tests passed");
diff --git a/tests/magnet-utils.test.mjs b/tests/magnet-utils.test.mjs
new file mode 100644
index 00000000..1297664c
--- /dev/null
+++ b/tests/magnet-utils.test.mjs
@@ -0,0 +1,160 @@
+import assert from "node:assert/strict";
+import { WSS_TRACKERS } from "../js/constants.js";
+import { normalizeAndAugmentMagnet, safeDecodeMagnet } from "../js/magnetUtils.js";
+import { normalizeAndAugmentMagnet as formNormalize } from "../js/magnet.js";
+
+function getParamValues(magnet, key) {
+  const parsed = new URL(magnet);
+  return parsed.searchParams.getAll(key);
+}
+
+(function testBareInfoHashNormalization() {
+  const infoHash = "0123456789abcdef0123456789abcdef01234567";
+  const result = normalizeAndAugmentMagnet(infoHash);
+  assert.ok(result.didChange, "Bare info hash should mark didChange true");
+  const xtValues = getParamValues(result.magnet, "xt");
+  assert.deepEqual(xtValues, [`urn:btih:${infoHash}`]);
+  const trackerValues = getParamValues(result.magnet, "tr");
+  for (const tracker of WSS_TRACKERS) {
+    assert.ok(
+      trackerValues.includes(tracker),
+      `Expected tracker ${tracker} to be appended`
+    );
+  }
+})();
+
+(function testEncodedXtDecoding() {
+  const infoHash = "abcdefabcdefabcdefabcdefabcdefabcdefabcd";
+  const encodedMagnet = `magnet:?xt=urn%3Abtih%3A${infoHash}&dn=Example`;
+  const result = normalizeAndAugmentMagnet(encodedMagnet);
+  const xtValues = getParamValues(result.magnet, "xt");
+  assert.deepEqual(xtValues, [`urn:btih:${infoHash}`]);
+})();
+
+(function testDuplicateTrackerFiltering() {
+  const infoHash = "fedcba9876543210fedcba9876543210fedcba98";
+  const baseMagnet =
+    `magnet:?xt=urn:btih:${infoHash}` +
+    "&tr=wss://tracker.openwebtorrent.com" +
+    "&tr=WsS://tracker.openwebtorrent.com/" +
+    "&tr=https://not-allowed.example";
+  const result = normalizeAndAugmentMagnet(baseMagnet, {
+    extraTrackers: [
+      "wss://tracker.fastcast.nz",
+      "http://tracker.invalid",
+      "wss://tracker.openwebtorrent.com",
+    ],
+  });
+  const trackers = getParamValues(result.magnet, "tr");
+  const openwebCount = trackers.filter(
+    (value) => value === "wss://tracker.openwebtorrent.com"
+  ).length;
+  assert.equal(openwebCount, 1, "Duplicate WSS tracker should be collapsed");
+  assert.ok(
+    trackers.includes("wss://tracker.fastcast.nz"),
+    "Expected extra WSS tracker to be preserved"
+  );
+  assert.ok(
+    !trackers.includes("http://tracker.invalid"),
+    "Non-WSS tracker candidates should be ignored"
+  );
+})();
+
+(function testWebSeedHandlingWithLogging() {
+  const infoHash = "0123456789abcdef0123456789abcdef01234567";
+  const messages = [];
+  const result = normalizeAndAugmentMagnet(`magnet:?xt=urn:btih:${infoHash}`, {
+    webSeed: [
+      "https://cdn.example.com/video.mp4",
+      "http://cdn.example.com/legacy.mp4",
+      "https://cdn.example.com/video.mp4",
+    ],
+    logger: (msg) => messages.push(msg),
+    appProtocol: "https:",
+  });
+  const seeds = getParamValues(result.magnet, "ws");
+  assert.deepEqual(seeds, ["https://cdn.example.com/video.mp4"]);
+  assert.equal(messages.length, 1, "HTTP seed should have been skipped with a log");
+  assert.ok(
+    messages[0].includes("Skipping insecure web seed"),
+    "Expected skip message for HTTP seed"
+  );
+})();
+
+(function testHttpWebSeedAllowedOnHttpOrigin() {
+  const infoHash = "abcdefabcdefabcdefabcdefabcdefabcdefabcd";
+  const result = normalizeAndAugmentMagnet(`magnet:?xt=urn:btih:${infoHash}`, {
+    webSeed: "http://cdn.example.com/video.mp4",
+    appProtocol: "http:",
+  });
+  const seeds = getParamValues(result.magnet, "ws");
+  assert.deepEqual(seeds, ["http://cdn.example.com/video.mp4"]);
+})();
+
+(function testSafeDecodeMagnetHandlesEncodedValues() {
+  const rawMagnet =
+    "magnet:?xt=urn:btih:0123456789abcdef0123456789abcdef01234567&dn=Example";
+  const encodedMagnet = encodeURIComponent(rawMagnet);
+  assert.equal(
+    safeDecodeMagnet(encodedMagnet),
+    rawMagnet,
+    "Expected percent-encoded magnet to be decoded"
+  );
+})();
+
+(function testSafeDecodeMagnetLeavesPlainStringsUntouched() {
+  const rawMagnet =
+    "magnet:?xt=urn:btih:abcdefabcdefabcdefabcdefabcdefabcdefabcd";
+  assert.equal(
+    safeDecodeMagnet(rawMagnet),
+    rawMagnet,
+    "Plain magnet strings should pass through unchanged"
+  );
+})();
+
+(function testFormHelperAugmentsWsXsAndDecodesXt() {
+  const infoHash = "abcdef0123456789abcdef0123456789abcdef01";
+  const encodedMagnet = `magnet:?xt=urn%3Abtih%3A${infoHash}`;
+  const normalized = formNormalize(encodedMagnet, {
+    ws: "https://cdn.example.com/video-base/",
+    xs: "https://cdn.example.com/video.torrent",
+  });
+  const parsed = new URL(normalized);
+  assert.equal(
+    parsed.searchParams.get("xt"),
+    `urn:btih:${infoHash}`,
+    "Form helper should decode encoded xt payloads"
+  );
+  assert.deepEqual(
+    parsed.searchParams.getAll("ws"),
+    ["https://cdn.example.com/video-base/"],
+    "Expected ws hint to be appended"
+  );
+  assert.deepEqual(
+    parsed.searchParams.getAll("xs"),
+    ["https://cdn.example.com/video.torrent"],
+    "Expected xs hint to be appended"
+  );
+  const trackers = parsed.searchParams.getAll("tr");
+  for (const tracker of WSS_TRACKERS) {
+    assert.ok(
+      trackers.includes(tracker),
+      `Expected helper to append tracker ${tracker}`
+    );
+  }
+})();
+
+(function testFormHelperSkipsInsecureWsOnHttpsOrigin() {
+  const infoHash = "0123456789abcdef0123456789abcdef01234567";
+  const normalized = formNormalize(`magnet:?xt=urn:btih:${infoHash}`, {
+    ws: "http://cdn.example.com/video-base/",
+  });
+  const parsed = new URL(normalized);
+  assert.equal(
+    parsed.searchParams.getAll("ws").length,
+    0,
+    "HTTP ws value should be skipped on HTTPS origins"
+  );
+})();
+
+console.log("magnet-utils tests passed");
diff --git a/tests/nostr-ephemeral-dm-tester.html b/tests/nostr-ephemeral-dm-tester.html
index 4c908ae9..2a97cfa2 100644
--- a/tests/nostr-ephemeral-dm-tester.html
+++ b/tests/nostr-ephemeral-dm-tester.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title>Nostr Ephemeral DM Tester (Using finalizeEvent)</title>
+    <script src="../js/tracking.js" defer></script>
     <style>
       /* Basic styling for the demo page */
       body {
diff --git a/tests/test-helpers/setup-localstorage.mjs b/tests/test-helpers/setup-localstorage.mjs
new file mode 100644
index 00000000..c990b187
--- /dev/null
+++ b/tests/test-helpers/setup-localstorage.mjs
@@ -0,0 +1,17 @@
+if (typeof globalThis.localStorage === "undefined") {
+  const store = new Map();
+  globalThis.localStorage = {
+    getItem(key) {
+      return store.has(key) ? store.get(key) : null;
+    },
+    setItem(key, value) {
+      store.set(String(key), String(value));
+    },
+    removeItem(key) {
+      store.delete(key);
+    },
+    clear() {
+      store.clear();
+    },
+  };
+}
diff --git a/torrent/beacon.html b/torrent/beacon.html
index 541fb82b..8c6b6052 100644
--- a/torrent/beacon.html
+++ b/torrent/beacon.html
@@ -17,6 +17,7 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
 
     <!-- Scripts: webtorrent, angular, etc. -->
+    <script src="../js/tracking.js" defer></script>
     <script src="bundle.min.js"></script>
     <!--<script src="https://cdn.jsdelivr.net/combine/npm/webtorrent/webtorrent.min.js,npm/moment@2,npm/angular@1.5/angular.min.js,npm/angular-route@1.5/angular-route.min.js,npm/angular-sanitize@1.5/angular-sanitize.min.js,npm/angular-ui-grid@3/ui-grid.min.js,gh/matowens/ng-notify/dist/ng-notify.min.js,npm/ng-file-upload@12.2.13/dist/ng-file-upload.min.js"></script>-->
 
diff --git a/views/channel-profile.html b/views/channel-profile.html
index 693c7dd5..845e08e1 100644
--- a/views/channel-profile.html
+++ b/views/channel-profile.html
@@ -43,7 +43,21 @@
 
   <!-- Area for Subscribe/Unsubscribe button -->
   <div class="px-4 my-4">
-    <div id="subscribeBtnArea" class="hidden"></div>
+    <div class="flex items-center gap-3">
+      <button
+        id="zapButton"
+        type="button"
+        class="icon-button"
+        aria-label="Send a zap"
+      >
+        <img
+          src="assets/svg/lightning-bolt.svg"
+          alt="Zap"
+          class="icon-image"
+        />
+      </button>
+      <div id="subscribeBtnArea" class="hidden"></div>
+    </div>
   </div>
 
   <hr class="my-6" />